Software Used in Creating Comps and Websites
Before you begin designing a website, you should become familiar with the industry standard web-graphic software tools. While there are a number of tools on the market that may be more suited to the weekend warrior, the ones listed here are the professional-grade standards used by all agencies and in-house shops. They are expensive, and can be purchased separately or bundled in suites. Notice that all the products listed here are from Adobe Systems. (Adobe has systematically bought up the thoroughbreds of web-design software.)
For creating, editing, and manipulating bitmaps, no other tool on the market holds a candle to Photoshop. The problem with Photoshop, however, is that learning to use it to its fullest is akin to learning to fly a jumbo jet. In addition to the years it may take to fully master Photoshop’s power, you also have to deal with a steep price tag.
Most web comps, as page designs are called in the industry, are built in Photoshop. It is the agency and in-house standard; most developers expect to be handed Photoshop comps before they build the actual website. Typically, there is one Photoshop file per web-page template. Photoshop allows you to make extensive use of layers and layer sets, keeping distinct (and helping you organize) all the components that make up your design.
It’s a best practice to name and organize your layers so that other designers can make sense of your document.
Fireworks is a great graphics software tool because it is purpose-built for creating web comps. Unfortunately, it just has not really caught on as a standard at design agencies and in-house departments. That’s a shame because a single web-page comp — with all its layers — in Photoshop can be 24–100mb file. That same exact page in Fireworks would be lucky to push 3mb because it utilizes a mix of vector and bitmap graphics. That is a file you could e-mail as an attachment to clients and developers.
The only edge that Photoshop has over Fireworks is in bitmap image enhancement and manipulation. However, you can do all those things in Photoshop and then import the result into Fireworks to work into your web layout. You can also export your Fireworks file as a Photoshop layered file, or import Photoshop layered files, so it has some good versatility.
Illustrator is listed here only because it is the standard for producing vector graphics. Often you’ll need to create custom icons, buttons, or illustrations in web design, and it’s easiest to use Illustrator for such tasks. You can then import these illustrations into Photoshop or Fireworks to fold into your web comp.
All web comps are built and assembled in either Fireworks or Photoshop. Illustrator merely contributes graphic pieces or is used to create individual web graphics you may export in various web formats, including SVG, PNG, and JPEG.
Flash allows you to create highly interactive web applications with ActionScript — its robust scripting language — and design animations that leverage the tight file sizes as well as the scalability of vector graphics. Flash files can be embedded directly in your web page. Flash movies can be so interactive and complex that you can build an entire site experience just with Flash. The HTML page just presents the Flash file and Flash takes over from there. If you want a website that shows video or has interactive features like the website in the following figure, you’ll need Flash.
Dreamweaver is not a graphic-design tool; it’s for building HTML pages and CSS files. What many people get confused about is that, on the one hand, you have your web-page comp designed in either Fireworks or Photoshop to look exactly the way your web page is going to look online — down to the last details of your scroll bars and footers. Then, on the other hand, you have developers who must re-create your comp designs in HTML, often using a tool like Dreamweaver.
Why do developers have to re-create your designs? In order to gain maximum page efficiency, developers must rebuild your page. Your comps serve not only as the piecemeal art source and layout to follow but also as the color, button, border, and text source needed to derive CSS styles.