Fireworks is dead, web designers use Adobe Illustrator instead

By Geoff Muskett

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.

Scaling

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.

SVG graphics

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!

3. Artboards

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.

General thoughts

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.

Comments

Mike
July 29, 2013

As an alternative to Fireworks, you can try WebCode. It is a vector drawing app that also instantly generates JavaScript+Canvas or CSS+HTML code. http://www.webcodeapp.com/

Omar
September 17, 2013

Fireworks 4 lyfe!

Alex
October 28, 2013

What do you think of Indesign for website layouts? It does not have many useful features Illustrator has - such as symbols, pixel perfect design and such - but to me it's more robust. Anyway, I think now of moving to Illustrator or some other tool.

tony
November 5, 2013

So how do you make sharp borders in Illustrator? All I get when exporting to png is blury borders...

Geoff Muskett
November 5, 2013

Hi Alex, I have heard of some big name web designers using InDesign for web layouts. I can see some of the features being useful like master pages for grids etc. However you can achieve a similar thing in Illustrator by making the grid in one ai file and placing it inside another. THat way if you want to change the grid (or whatever baseline layout system) you only need to do it once.

And for me, because InDesign is so strongly aimed at print, it is too limited when it comes to drawing quickly, there are some vector tools but not as in depth as Illustrator. My feeling is if you want to master the speed and flexibility of vectors you need Illustrator.

Please challenge me though if you've got any strong reasons for using InDesign!

Geoff Muskett
November 5, 2013

Hi Tony

There's no reason why png borders can't be sharp. There are options for resolution, for print you should use 300ppi, web 72. But if you are placing the image in other artwork make sure it is no bigger than 100%, otherwise it will start to pixelate.

If you're saving for web, make sure you're using 24bit as opposed to 8bit. There are occasions when you can get away with 8bit but if there are any curves involved go for 24.

Hope that helps, give me a shout otherwise.

D Mark K.
November 16, 2013

I'm a designer web - develop web and loved Ai

kresli
December 3, 2013

advice for Photoshop users: If you want go out from typing in textbox, you need press "Enter on keypad".

Geoff Muskett
December 20, 2013

Really, surely that just goes onto the next line?

James
January 16, 2014

Command and enter.

Design and make a website in 20 hours | Geoff Muskett
March 14, 2014

[…] up my Adobe tool of choice, Illustrator, and started working up the logo and an initial design. A couple of hours later I sent Helen this […]

nada
April 1, 2014

hello,

I am a graphic designer expert in printing media. I am experienced in photoshop, Illustrator and Indesign.

For years i postponed the webdesign since I will not be happy creating 1000 layers in ps. and dreamweaver and fireworks have their negatives too.

I really loved your approach toward Illustrator. It is what made me excited to finally learn web design. So can I, exclusively on Illustrator, design and hand the files to developers?

And also if you can recommend a thorough tutorial, I would appreciate it.

thank u again

Geoff Muskett
April 1, 2014

Hi Nada, thanks for your comment. Glad the post helped!

I would check with the developers first, if they don't know Illustrator then it may be a no-go. Not many developers, in my experience, know how to use illustrator.

There are ways to export Illustrator to a layered PSD, or even pngs though...

AI is awesome, I still recommend you dive into web layouts using it!

Alex R.
May 12, 2014

Geoff I am with you!

Just my 5 cents
I use Ai for about 5 years already for web design or any other work. Not sure how I jumped on Ai bandwagon but once I started my workflow became much easier.
Scaling things always was my problem with Ps and also the size of files. I hate when people separate pages across separate Ps files, that's ridiculous to me :)) With artboards introduced in CS4 life couldn't be better :)
Ai does a bit simpler and flatter design than Ps can produce, but we live in css times when your designs better reflect css abilities.

In terms of inDesign a friend of mine with long time experience in design(I think about 30 years) uses that for anything from logos, brochures and down to web design. I can't stress enough how much times I was trying to explain him that he uses wrong tool for websites, but he was staying reluctant :) In return I always had to spent dozen times to convert his designs into useable web designs, since his works always were in some weird scales and unproportional, you can't take out some elements cuz they linked with other effects and so on. Shortly saying that was pain in the arse :) thanks god at least I knew inDesign pretty not bad, so I could figure out, but other companies required from him convert his designs into Ps
At some stage I almost persuaded him to try at least Ps (for some reason he hates Ai), but at the same time he got some news from Adobe that they made some improvements in inDesign for web design and things will become better. So not chance to change him :)))
The moral of this story is that some persons just don't want to change. And only nuclear war would change them :))

Geoff Muskett
May 13, 2014

Hi Alex, sounds like your mate won't change! I find inDesign mockups a pain too. If I ever get one I usually grab as much of the page as possible and port it over to Illustrator. I guess if he gets the work done to good standard then tats the main thing. Just a pain for everyone else :-)

Bret Kerr
May 20, 2014

I think the major trend for web developers is to design right in the browser - just keep previewing the code as they write it.

Geoff Muskett
May 20, 2014

I think it varies from dev to dev, personally I'm about 50-50 Illustrator vs browser.

Carlos
September 15, 2014

You obviously are NOT a web / mockUp designer.
Illustrator is for OFFline works

You'll never work as this cozy with Fireworks. Macromedia developed for a clear reason and it is Photoshop and Illustrator at the same time BUT BETTER !!!!

James Benson
September 16, 2014

After reading your post I felt that I was reading an Illustrator fanatic, many of the things you complain about Photoshop are because you are actually used to Illustrator, the way it works, the commands or functions which are different to Photoshop's.

I have found also lots of Photoshop users complaining about the way Illustrator works.

So with this I can arrive to the conclusion of that every designer has it's own choice and not because you are more used to Illustrator means Photoshop is rubbish.

Both tools have a purpose, but they are so powerful that there are so many things you can do with them, I personally prefer Photoshop as I have more than 10 Years working with it and I have been able to produce with it great quality graphics for websites.

I repeat, it's a choice every designer must take, both are powerful enough to get the job done, none of them should be disqualified.

Geoff Muskett
September 16, 2014

Fair enough James, at the end of the day - whatever gets the job done. I guess I am a Illustrator fanatic to be fair :-)

Geoff Muskett
September 16, 2014

Carlos, I design partly in Illustrator and partly in browser. That way you don't have to do traditional mockups.

I'm hearing good things about Sketch which seems to be aimed at web designers. I agree Illustrator is primarily an offline tool. However it's better for web layouts (in my opinion!) than Photoshop. And Fireworks isn't a long term option any more.

Tommy
October 8, 2014

Interesting points, however, you can look at the types of features that Adobe is adding to Photoshop and Illustrator with each new release, and it's obvious that they are "guiding" designers to start using Illustrator over Photoshop for web design (CSS code, character styles, multiple device artboards, etc.). Whereas, with Photoshop, the kinds of new features they add are more related to 3D printing, focus, color blending and blur effects. It seems pretty obvious to me which software the developer would prefer people use for which application, and those that are still using PS to lay out websites are just used to it from the olden days of web design. Photoshop is for creating dimensional graphics and editing photos. Illustrator is where it's at now for web design. (There is also Muse, but that is still in it's infancy.)

Geoff Muskett
October 12, 2014

Amen Tommy!

Dan Zimney
November 6, 2014

I have to say, as a Developer and admitted fan of Fireworks, I'm really sad to see Adobe pulling support. It never got used as it should have simply because the industry put up with designers sticking to Photoshop due to everyone's comfort level -- mainly due to shifts from print to web. Fireworks was developed for web graphics and due to the minimal learning curve to use "something else" it was never got picked up. It really could have become an amazing tool had there been a shift to use it. Hopefully that shift is now coming to Illustrator.

It's good to hear that Adobe is putting some focus on Illustrator to make it more web friendly, but when it comes down to it, I think there needs to be a serious shift for web designers (and developers) to be demanding better tools to work with the web. The fact that there currently isn't a standard tool for web design within the Adobe family (Fireworks excluded of course) is really sad on everyone's part. Adobe has a wide array of programs for various, specific applications, yet nothing entirely and outwardly dedicated to web design. Things are certainly better than they've been, but from time to time I still get layouts in InDesign.

Patrick
January 5, 2015

I'm a UX designer and I use Fireworks all day every day and I love it. You have pages, layers and states. You've got reusable custom symbols and master pages. You can export pages to individual files. This is amazing when paired with inVision. I can work so fast making click-through prototypes with those two products together. There is nothing like Fireworks!

Geoff Muskett
January 18, 2015

Sounds like you have a great workflow Patrick! I'm sad for you that Fireworks isn't being developed any more.

Ethan Mitchell
May 20, 2015

Hi,

I've got to say, as a Junior Designer in a Web Design company, a lot of my work is produced and edited in Fireworks, a program I find easy to use and replicate for design.

That being said, a lot of the guys on the iMacs here use Illustrator and every time I've opened it up it has scared me with its unfamiliarity. Some of the work they produce is phenomenal, something I wish I was producing myself.

Your post has inspired me to learn Illustrator, my biggest issue being that it's something I'm entirely new to; if you do tutorials for newbies to Illustrator (and the styling it uses), I'd happily watch them/read them as it's a program I would love to learn and use!

Each program has its merits, Ps, Ai and Fw, but I have to agree that with Adobe no longer developing Fw and Ps being refined to focus on Photo-manipulation that Ai is where web design is headed for the future (yes, primarily prelim for those people like me who are solely design based and not dev based).

Geoff Muskett
May 20, 2015

A lot of people swore by Fireworks but it seems like it won't be around for much longer. But Illustrator is a great tool, worth getting into. Having said that Sketch is pretty hot right now. If you're just starting you may be better off looking into at that instead.

I don't have any tutorials but if you do dig into Illustrator, you're welcome to ask me any questions @geoffmuskett on twitter or geoffmuskett at googlemail dot com.

Good luck

Chris B.
July 13, 2015

Good read. I've felt the same way about Illustrator vs Photoshop my entire career and could never understand why so many people preferred Photoshop. Photoshop is great for bitmap/photo manipulation but for graphics, text and UIs Illustrator is so much faster and easier. I definitely prefer it for mock-ups. I use each program for what their good at, but ultimately Illustrator kills it for laying out interfaces. And fireworks... I haven't used that since community college.

Graham
July 25, 2015

Hi Geoff,
Thanks for the article and sharing your view point and enthusiasm for AI.

As a 'senior' (aka older) designer, I'm currently still using Fireworks for creating my web/app layouts but I know the writings on the wall for this lovely little gem from Macromedia. I do feel that since buying Macromedia, Adobe has gradually culled the Macromedia product list which, in my view, is a shame. I liked them and used most of them at one time or another (Director anyone?!).

The problem I have with using either Photoshop or Illustrator for this specific discipline is neither program was ever intended to be used like this, therefore, both are compromised, albeit, with some neat tools. I feel as if Adobe are forcing me to choose between two compromised applications that have some useful tools that can be used in the creation of web/app design but neither of which are the full-blown web design power houses that I'm looking for, built for web, UI and UX design from the ground up. Being responsive focused, having CSS at it's absolute core, providing easy support for bootstrap UI and many other frameworks, browser/device previewing. Stuff that really helps me do my job: deliver for my clients and help me earn a living.

Fireworks COULD have been all that and more but I really think Adobe has let it's ego and finance department get in the way and have thrown the baby out with the bath water on this one.

I'm still looking around for the next viable Fireworks upgrade at the moment but I have to say SKETCH 3 is looking really impressive so far. One things for sure, it won't be either Photoshop or Illustrator, not even an Adobe Evangelist can convince me it's right decision. Unless of course Adobe decide to 'buy up' Sketch then I'll just have to retire early...

Geoff Muskett
July 25, 2015

Hi Graham, great comment. I feel your pain regarding Fireworks. And I agree that neither Photoshop or Illustrator are ideal web tools. My point is that Illustrator is better suited for mockups than Photoshop, despite Ps being the standard over the past few years.

Adobe seem to have attempted to develop specific tools like Edge Reflow. I've never used it so can't comment, but it hasn't stuck in the web community as you know.

I also agree that Sketch 3 looks great. At some point I'll embrace it. But I'm so used to Ai that it would be a productivity hit. Which is why I've been putting it off for some time. If I was coming from Fireworks now, that would be my go to program ahead of Illustrator.

Lets hope Sketch stays independent!

Tim McNicol
August 13, 2015

Hi folks,

This has made for a very interesting read. I'm pleased that there are some many other Fireworks advocates out there. Graham, I too am a bit of a veteran designer and have been using Fireworks since day 1.

I was prompted to look for some help, or at least somewhere to share my frustrations about the lack of ongoing support and development for Fireworks from Adobe. I have only recently upgraded to the CC package and have just tried to copy and paste a vector object from Ai CC to FW CS6 ... and it cannot be done any more!!! This is extremely infuriating as that is something I do on a very regular basis and is an essential function for me. Being an illustrator, web designer and print designer, I often need seemless functions, such as this, across all my design tools and to be honest, this latest let down perfectly illustrates Adobe's lack of care and support for their loyal customers.

I'm sure they're ongoing development plans are well thought out and they have not made the decision to drop FW lightly, but come on Adobe, this is proof that there are a multitude of designers and developers out that rely heavily on FW and they have somehow been left feeling abandoned, and incredibly frustrated.

I agree whole-heartedly that there are some fantastic tools out there, and I use Ps, Ai and InD on a regular basis. They are all sterling tools for the job that they were intended for. And that's the crux of it. Nothing, as yet, has been developed that can do the job of Fw and this has left a huge gap in the toolbox. Yes, you can use the other common tools available (why you would want to use InD is beyond me I might add!) but Ai is for logo design, print design, illustration etc, etc, and likewise Ps is intended to be used for, well, Photo editing (To coin a phrase, it does exactly what it says on the tin). I understand there are a great many advocates for Ps as a web design tool, but it is such a cumbersome and longwinded tool for creating UI and websites etc. I have converted a number of other designers over the years from Ps to Fw, after which it left them wondering why-ever they used Ps in the first place.

Well, I for one, will be continuing to use FW CS6, despite the niggling issues I have with it, however, I am now prompted to take a look at SKETCH 3, because, as Graham has also said, nobody will convince me that Ps or Ai are viable alternatives to Fw.

I quote from Graham's post ...

"I feel as if Adobe are forcing me to choose between two compromised applications that have some useful tools that can be used in the creation of web/app design but neither of which are the full-blown web design power houses that I'm looking for, built for web, UI and UX design from the ground up."

Here, here, Graham.

Take note Adobe!!!

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.