Adobe has announced it would not be continuing to develop features for Fireworks, this doesn’t really effect me having never spent any meaningful time in the program, but I can see that it is a pain for many web designers. So whatever happens, those people will have to learn and use another program, I strongly suggest Adobe Illustrator for layouts and visual design.
I’m sure people will flock to Photoshop, however Illustrator is a far better tool for web designers. Here’s why:
1. Typesetting is way better in Illustrator.
Setting heading and paragraph styles means you can mimic, to a degree, the behaviour of CSS. Global control over font, size, weight, kearning and more means you can make changes accross the document in a couple of clicks. Adobe have an official video on character styles.
I believe this has been addressed in Photoshop CS6, but any version from CS5.5 and down the above is true.
Picking up styles with one click
Even if you’re not setting paragraph styles it’s so easy to apply styles from one piece of text to another. Select the text you want to effect, select the eyedropper (i) and click on the text with the styles you want to pick up. All properties are applied including colour, font, size, leading, kearning etc. Super easy.
Niggles with text editing in Photoshop
Something that annoys me on a regular basis in Photoshop is the fact that you can’t exit text by pressing esc. In Illustrator you type away happily, then press esc to stop editing. This allows you to quickly shortcut to the next tool without actually typing that shortcut key into your text.
In Illustrator for example, I’m typing then I decide to move the text, so I’ll press esc then v to activate the standard select tool and move the text. Fast and easy.
Compare that to Photoshop, I’m typing then I want to move the text. I can’t press esc because I’ll loose all the text I’ve typed (which is infuriating). So I have to stop typing, move the mouse to click the select tool button and move the text. Slow and clunky, and disrupts workflow.
Linking text boxes
As Photoshop is not a layout tool, you can’t link text boxes to flow from one text block to another. This is super easy in Illustrator and an extremely useful feature.
2. Vector work is way easier in Illustrator
Illustrator is a vector based tool. Photoshop is pixel based. Yes, photoshop has some vector style tools but not to the extent of Illustrator.
Not just for logos
Commonly designers might just use Illustrator to design a logo, then continue the layout work in Photoshop. This is bonkers. Layouts, especially web layouts are perfect for a vector program. The web works in rectangles predominantly, in Illustrator press m for rectangle and draw, in Photoshop press u then choose whether you want ‘fill pixels’ a ‘shape layer’ or just a ‘path’. These options have other uses, but not for layouts. Also in Illustrator you can select your shape, press d, and it will apply the default style of white box with 1point black border. Useful for wireframing. In photoshop you have to add an effect to a layer and go through the dialogue boxes choosing the settings. It’s like climbing in through the window when you can just walk through the door.
Vector shapes and shortcuts
Illustrator also has default shortcuts for both rectangle and ellipse. In fact all the shortcuts in Illustrator are vector related, whereas in Photohop most of the shortcuts and tools are for photo manipulation. And rightly so, thats what photoshop is for.
A non-vector shape in Photoshop will not be able to handle upscaling. The program does a good job in guessing the colour of extra pixels needed for bigger images, but it will never be as sharp as vector. Obviously not all images can be vector based, but the trend for ‘flat design’ on the web at the moment lends itself to vectors, and therefor SVG images.
The SVG file format is supported in ie9+ which means for many sites it’s ok to use, possibly with fallback of a gif/jpg/png. Benefits of SVG are numerous, most importantly it’s infinitely scalable. Which is a major plus in todays responsive world. Also, being vector based they’re sharp on retina screens because the browser renders from coordinates rather than pixels. Like text. Which leads me to iconfonts, another great use of SVG graphics which allows the same CSS control you get with text, on images.
You can’t make SVG graphics with photoshop. You’d have to create shapes and paths then export them to Illustrator. Much easier to just use Illustrator in the first place!
In Photoshop you have a canvas that you’ll set to whatever size. In Illustrator you have a pasteboard on which you can have any number of different sized artboards. So if you’re comping static visuals (which isn’t necessarily the ideal workflow), you can set up one for large screens, one for medium screens and one for small screens and they’ll all sit next to each other conveniently.
The pasteboard is also really useful for storing assets and inspiration to refer to while designing. I often copy and paste the element I’m working on onto the pasteboard so if the design doesn’t work out how I’d hoped I can start off from a place that I was happy with. Kind of like micro version control.
4. Custom symbols
Custom symbols in Illustrator are perfect for items that you want to reuse again and again, for example logos. Simply design the logo, drag it into the symbols pallet, then using the symbol sprayer (shift s) click somewhere and your logo will appear.
This workflow comes into it’s own when you want to change the logo. Double click the symbol in the symbols pallet, edit it then hit esc and you’re done. All instances of that logo will change.
It doesn’t have to be a small element, either. Use it for headers, footers, and any modules that are visually consistant. Custom symbols even work with linked or embedded images, making them a very powerful and easy to use tool.
Illustrator is a fantastic tool for web designers. I urge Fireworks users to choose it over Photoshop as their primary tool for visualising web sites. You still have the ability to use layers as you would in Photoshop (and presumably Fireworks) for detailing hover states and generally organising your file. The main difference being that not every element has to be on a different layer, unlike Photoshop where you can end up with hundred of layers.
My advice is to use Photoshop for what it’s great for, photo manipulation, and do all layout work in Illustrator. It’s well worth the time spent learning.