Web Design Software - Graphics
From concept to creating your website's graphics,
you'll spend a lot of time in these programs
Using Graphic Design Software in Web Page Design
Some type of graphic design / photo editing software is essential for website design.
- Adobe Photoshop
- Macromedia Fireworks (now owned by Adobe)
- Adobe Illustrator
- Corel Draw
Graphic design software is used to:
- Create a visual mockup of what the web page will look like when it is created
- Process the various images that will be used in the website
- Graphic design software can also be used to create actual HTML web pages with features such as rollovers, fly out menus and animated graphics
Graphic design software used for the web often has elements that greatly aid a web designer in creating web pages, such as being able to slice images, ways to optimize image for the web, create HTML for the web page directly from the graphic design program, etc.
Which Program Should You Choose?
There are many software packages that are quite capable for creating web graphics. However, two packages stand out here - Photoshop and Fireworks.
Here's why. If you're going to take the time to learn a complex graphics creation package, why not invest in learning the industry standards?
For this reason, I first recommend learning Photoshop, regardless of what other web design software programs you choose to use (we'll get to Fireworks soon).
There are several reasons to put Photoshop at the top of your list;
- Photoshop is simply the most powerful graphic design / image editing program available. Its wide array of powerful tools allows you to create the best possible design.
- Photoshop is the most widely used graphic program by professionals in many different design disciplines. It's used by photographers, print designers, web designers, artists, illustrators, scientists, and many many others that I'm not even aware of.
- If you're looking for employment in the design field, knowing Photoshop is almost a requirement for the position.
- Many web site templates are created in Photoshop, and you'll need to use Photoshop with varying levels of skill in order to modify them.
- Because Photoshop is the pre-eminent design program, there is a tremendous amount of support material available . This includes hundreds of books and training courses, a magazine specifically for Photoshop users, shows and conferences relating to Photoshop skills, plug-ins that enhance the functionality of the program, and "Styles" and "Actions" that automate design tasks.
- Photoshop is well integrated with GoLive web page creation software. If you use GoLive, Photoshop is definitely the way to go.
Photoshop as Web Design Software
When using Photoshop to create web graphics, there are actually two programs to work with - Photoshop, and it's companion web graphics program, Imageready (when you purchase Photoshop, Imageready is included on the disk).
Photshop offers a wide array of features that simplifies the creation of web graphics. Some of the these features are available directly in Photoshop. These same basic features, as well as the more advanced web design features, are implemented in Imageready.
You can create a graphic in Photoshop and simply press a single button to move it over to Imageready, and vice versa. Imageready is a fairly capable program fo creating web graphics, including roll-overs, gif animation, image maps, etc.
All said, I'm not that crazy about having to use Imageready, and long for the day when all web creation features are fully integrated into Photoshop. Many times I bypass Imageready all together, and simply use the basic web related features that are built into Photoshop. I then add rollovers and image maps in Dreamweaver. Other times, I'll create a graphic in Photoshop and move it over to Fireworks to slice and dice it for the web.
Photoshop and Imageready - Odd Couple
There are a few reasons why I'm not that happy that the advanced web features of Photoshop are placed in the separate program, Imageready. Here they are;
- Although Imageready's interface is similar to Photshop's, some of the tools function differently (for example the color picker does not work quite the same way). Also, many Photoshop features are not implemented in Imageready, and for the one's that are, the tools are grouped differently on the toolbar. This can be annoying.
- Smart Objects, a new (and great) feature implemented Photoshop CS2, is not supported in Imageready. If you import a file into Imageready that has Smart Objects, they will be removed. This is not good.
- Some of the web features implemented in Imageready are not, in my opinion, intuitive. I find the implementation of these features to be easier to use in Fireworks.
- Some of the javascript code created in Imageready is not recognized as a "Behavior" in Dreamweaver. The page can still be edited in Dreamweaver, but you lose the convenience of being able to modify the code by using the Behaviors panel in Dreamweaver. (GoLive does recognize the code created by Imageready as "behaviors"). Hopefully, this will change now that Adobe owns both Photoshop and Dreamweaver. I greatly look forward to the increased integration of these two programs in their next release.
- If you're in Imageready, and need a feature in Photoshop, you can switch back to Photoshop fairly easily, however, it does take some extra time each time you switch between the applications, which can be annoying.
- Finally, I've occassionally experienced problems when modifying a file and switching back and forth between Imageready and Photoshop. On that occassion, the file was somehow corrupted, and could not read at all by Photoshop. I would suggest saving a backup copy of your file every once and a while.
Fireworks
The other program that is invaluable for web designers to have and use is Fireworks. Fireworks, (created by Macromedia which is now part of Adobe), is an excellent and powerfull all-around program for creating web graphics. It combines the ability the ability to work with vectors (like Adobe Illustrator) and edit images in the same program. All web features are also available in the same program, including rollovers, drop down and fly out menus, image maps, gif animation, etc. Fireworks is also well integrated with Flash.
Fireworks was designed expressly for creating web graphics, so the web creation features feel more integrated and intuitive than similar features in Photoshop and Imageready.
Additionally, Fireworks is very well integrated with Dreamweaver. This means you can create drop-down menus, rollovers and other features in Fireworks that Dreamweaver understands natively. It just makes your life that much easier.
Many web templates are created using Fireworks, so in order to modify them you'll need a copy of the program and some skill using it.
Fireworks is a very capable graphics creation program, but, ultimately is not as powerful as Photoshop in this area. As good as Fireworks is, I find myself longing for certain Photoshop tools and control when when working in Fireworks. That being said, Fireworks is capable of producing top rate graphics, and could easily be the only program you use for creating web graphics.
Adobe Illustrator
Illustrator is a vector drawing program. It has a remarkable set of tools for drawing. Images can be utilized withn the program, but not edited there (it is fairly well integrated with Photoshop, so the images can be edited there) Illustrator also has built-in slicing and a save for Web function. Additionally, objects can be used to create imagemaps.
Since Illustrator's native file format is PDF, the program allows you to open PDF files and edit them as vectors (this is not the same as editing the original files that were used to create the PDF in the first place, but it is better than nothing).
Illustrator also allows you to open other vector file formats such as WMF and EPS and edit them in a vector format. For this reason alone - conversion of graphics - Illustrator is a valuable program to have. Many times a client will send a graphic in a file format that you'll need to open. Having Illustrator can often make this possible.
Often times I use Illustrator to work on logos, since it's vector capabilities allow you to create an image that can be easily scaled to any size.
CorelDRAW
This is an excellent and powerful program. It is a vector editing program but has a lot of excellent tools for working with bitmaps, it's less expensive than Adobe products. Corel Draw also has features that facilitate creating web graphics. It is also a great program for opening and converting a wide variety of file formats. The CorelDraw Graphics Suite also includes an excellent photo editor called Photo-Paint.
CorelDRAW Graphic Suite is so capable, you could easily use it as your only web graphics programs.
Since I primarily work with the Adobe products, I don't use CorelDRAW that often. It comes down to the question of how much time you have to learn these very complex programs. However, since it is so powerful, I'll occassionally use it's particular strengths to create graphics.
Note: I receive some compensation if you purchase products mentioned on this page.
