Digital Web Magazine

The web professional's online magazine of choice.

Photoshop vs Fireworks : Comments

By Nathan Smith

July 22, 2008

Comments

Jonathan Snook

July 23, 2008 12:29 AM

No clear winner? Bah. It’s obviously Fireworks. (…trying to fan the flames…)

Kyle Anderson

July 23, 2008 12:31 AM

I’ve been developing websites for more than 10 years, basically since the Internet started out back in 1994. No one really used image editing programs back then.

When it came time to start using a program to make web graphics, I chose Fireworks because it’s made specifically for web graphics.

Photoshop’s steep learning and often clumsy UI has always been a problem for me. Most of the features are things I would never use for a website.

Fireworks, on the other hand, is what I’ve used since it came out, and that’s only because I used Dreamweaver, which is really what introduced me to it.

As you said in the article, Photoshop is for, well, photos. It’s a full-blown image editor. Fireworks, while it does have the ability to edit images, is all about the web.

My vote goes to Fireworks, hands down.

Kyle Anderson

July 23, 2008 12:34 AM

>> No one really used image editing programs back then.

Correction, no one really used image editing programs to design websites. People obviously used image editing programs :D

ChrisR

July 23, 2008 1:08 AM

I’m a photoshop user and have used fireworks too before. To be honest, i love photoshop and might possibly love fireworks too but Photoshop is how i learned designing websites and i’m too busy to learn a new software package so i stick to what i’m most comfortable with.

From reading this post one thing came to my attention and that is that FW users don’t know the capabilities of PS and vice versa. Chuck Mallot for example said that there is no way to select a layer in photoshop by clicking on it in the canvas … there sure is and there has been ever since i started using photoshop (PS7 back then), so I think it’s comfortable to say that designers just use what feels right for them, some adventurous designers with too much time dare to explore other software and could find a program that fits their needs better, some stick to old habits like me :)

John Faulds

July 23, 2008 1:46 AM

@ChrisR – yes you can select items in PS on the canvas, but it’s still not as easy as it is in FW where whenever you mouseover something, you get a highlighted bounding box around it.

Schmoo

July 23, 2008 2:54 AM

Fireworks is quicker, easier, just as good in most respects but is not as easy to create non-generic effects, and output always looks a little fuzzy (naff anti-aliasing).

Photoshop is a major PITA to do some of the simple things in, but is capable of more controlled effects and the output is as sharp as a razor.

I tend to use both together, Fireworks for a site’s general framework and Photoshop for the things that slot into that framework, and importing/exporting to use both on one element where required. I’d hate to have to use just one or the other, neither is quite there yet.

Tor Løvskogen

July 23, 2008 3:32 AM

Anton Peck:
>>Also, it doesn’t seem set-up well enough to manage memory “out of the box”. Many of the issues I know people are having can be resolved with just a little custom tweaking.

Do you have a solution to how Save for Web sometimes takes ages in Photshop running on OS X?

ChrisR

July 23, 2008 3:43 AM

@John Faulds

That’s true, it’s one of the little details that makes fireworks a little better than PS :)

Joust

July 23, 2008 4:34 AM

Blah blah. And where the heck is Corel PhotoPaint? it’s been there with the first photoshop and looong before Fireworks was created.

It’s got all the bells and whistles of ps and a load of it’s own unique features. I was thinking about moving to ps, but I found no reason to do so. It’s counter-intuitive for me, and PhotoPaint is as powerful.

Cheers!

minimal design

July 23, 2008 6:42 AM

I’ve tried FireWorks back in the Macromedia days and I pretty much always hated Macromedia application’s UI. It always felt clunky and ugly to me… With the beta CS4, I decided to give it another shot… The first thing I tried was to draw a rounded corner rectangle… I could not get the 1xp border to be 1px, whatever setting I tried, I still got a antialiased 2px border…

If Fireworks is not pixel perfect, how can it ben a pro web design tool?

I assumed I was missing something obvious and searched online for a solution but instead I found this:

http://kb.adobe.com/selfservice/viewContent.do?externalId=d6f2172a&sliceId=2

If the behavior described in the article is accurate, I’m really perplexed as to how people can use this app professionally and why this major bug still hasn’t been addressed (article dated from 2006…)?

I’d love to hear what Fireworks users have to say on this.

Anton

July 23, 2008 6:44 AM

but it’s still not as easy as it is in FW where whenever you mouseover something, you get a highlighted bounding box around it.

Easy is relative. That little “feature” of Fireworks slows me down. It’s way too easy (IMO) to nudge things around by accident just by clicking in the wrong place.

Do you have a solution to how Save for Web sometimes takes ages in Photshop running on OS X?

Kind of. In complex documents, or images that have more area than I want to export, I select what I want, do a “copy merged” which takes a snapshot of the whole document (all layers), paste into a new doc and export from there. It sounds like a lot, but it only takes me about four keystrokes and is easily scripted.

Daniel Marino

July 23, 2008 6:44 AM

In Photoshop it’s that I can’t select any object just by clicking on it…

I don’t believe this option is turned on by default in Photoshop, but you can. With the “Move Tool” selected, make sure the check-box is checked for “Auto Select Layer” in the info page directly underneath the Menu bar.

Jonathan Snook

July 23, 2008 6:57 AM

The first thing I tried was to draw a rounded corner rectangle… I could not get the 1xp border to be 1px, whatever setting I tried, I still got a antialiased 2px border.

There’s two issues at play. If you want an aliased border, change the medium from Pencil Soft to Pencil Hard. The second is that the outline can be inside, on the outline, or outside the outline, which can affect your width.

And it’s pixel perfect in that the pixels you see on the screen is what you’ll see when exported.

Jared Christensen

July 23, 2008 7:19 AM

@ minimal design – That’s funny, I tried the exact same thing the first time I opened Fireworks (though it was CS3 that I tried making a rounded corner box in). Turned out that the rounded corner box tool didn’t adjust the corner radius, but the squared corner box tool did. I pretty much just closed the app and said “good day” at that point.

I do plan on trying out Fw CS4 when it comes out. I’m hopeful that Macromedia’s horrible UI is getting some Adobe love and that it will be a bit easier for someone raised on the Adobe UI to maintain the level of paitence required to learn a new graphics app. I’ve seen some of what CS4 can do, and it’s pretty cool.

Travis Isaacs

July 23, 2008 7:36 AM

@Daniel Marino

When you right click on an element with the move tool selected (shortcut key ‘V’) a list of your layers is display with the nearest layer automatically selected.

It’s not 100% right all the time, but generally works well. Of course, the use usefullness of this feature all depends on if you name your layers :)

Tor Løvskogen

July 23, 2008 8:04 AM

I’ll try that Anton, but I don’t know if the problem only exists on large/complex documents – I’ve read somewhere that Save for Web is just buggy in OS X.

Things that irks me in Photoshop is Color Profiles and the limit of 7 nested folders :-/

Mike Gowen

July 23, 2008 8:35 AM

The short answer for me is that Fireworks is far superior for UI development. But that doesn’t mean you should uninstall Photoshop. If you’re doing any photomanipulation/collage/effect work, you’re going to want to do that in Photoshop. Use the tool that is right for the job…which might be multiple packages. If you are building a visual language of buttons, labels, menus that all vary in size and are used hundreds of times across hundreds of screens, you’d be crazy to do that in Photoshop.

My take is that Photoshop has always tried to be the one-stop solution for everything graphic related. As such it has become bloated and has lost direction. Illustrator suffers a similar fate. Fireworks on the other hand is geared toward one task, building web interfaces. It takes the relevant parts from both previously mention packages and creates a very focused and robust package. Use it for 2 weeks and you’ll wonder how you made it this far without it.

For the record, I am the proud owner of savefireworks.com which I purchased during the Macrodobe merge. I hope I never have to use it :)

Mike Gowen

July 23, 2008 8:47 AM

Oh one more thing…

If you are deciding between different packages, make sure you give each option at least 2 weeks of trial time. I don’t think you can truly compare software packages without this. The first week of learning ANY new software package when you’re accustomed to another is going to suck, period. I HATED Fireworks the first week. But one week later I would have had it’s babies if it was anatomically possible.

minimal design

July 23, 2008 8:51 AM

If someone can tell me how to get a 1px border rounded corner rectangle that doesn’t turn into a 2px anti aliased border, I’d give FW another try (the inside/outside path option doesn’t seem to be a available for rounded corner rectangles as far as I can tell…). Thanks!

Travis Isaacs

July 23, 2008 9:00 AM

@Mike Gowen

All great points, but I disagree that Adobe is trying to bloat Photoshop into the all-one solution. In fact, many of the recent improvements have been for photo editing, not UI making or trying to stuff in features that don’t belong. Illustrator and InDesign are both very focused, niche (but flexible) products that are very different, but complimentary to Photoshop. As far as features go, Fireworks overlaps with many of Adobe’s graphic/publishing apps. It’s primarily a vector tool (like Illustrator), has pages/canvases (like InDesign), and is a capable pixels pusher (like Photoshop). Sounds like an identity crisis :)

I love that fact that one software package provides the tools to sit down and design a UI, create jaw-dropping visuals (like in Anton’s work), and extensively edit/re-touch/manipulate photos. I respect that Fireworks is purpose built for one of those tasks, but would fall flat in other areas.

Anton

July 23, 2008 9:08 AM

If you are deciding between different packages, make sure you give each option at least 2 weeks of trial time.

But is anyone here actually deciding anything, or have we all already made up our minds? Are we so solidly entrenched in our choice, preparing to defend it to a duel if push comes to shove?

I respect all my freinds who use Fireworks, but ask: What part of my workflow is wrong or broken if I can still produce a killer UI in the same amount of time?

Travis Isaacs

July 23, 2008 9:35 AM

@Anton

Well spoken! I don’t fell that I’m missing anything either.

Hugh Griffith

July 23, 2008 10:04 AM

My take is that Photoshop has always tried to be the one-stop solution for everything graphic related. As such it has become bloated and has lost direction. Illustrator suffers a similar fate. Fireworks on the other hand is geared toward one task, building web interfaces.

Well said, Mike!

Patrick Haney

July 23, 2008 10:16 AM

Anton brings up a great point. I hope people realize that most of us (if not all of us) are not saying that anyone’s workflow is wrong, and I’m certainly not telling all of you that you should stop using Photoshop and get with the Fireworks program. I use it, I really like it, and it works great for what I want to do. At the same time, I’m tired of hearing people chastise me for using it over Photoshop to do web design work, as if I wasn’t a “real designer” unless Photoshop was my tool of choice.

The point of this article, at least for me, was to get people to understand how each of us uses our application of choice, and what advantages and disadvantages each of them has. Once you’re informed, you make the final decision. After all, Adobe doesn’t pay me to sell their software, and regardless of your choice, they make money.

Mike Gowen

July 23, 2008 10:37 AM

@Travis Isaacs

I agree that there is overlap within Fireworks, but I don’t think this is as a result of Fireworks trying to appease page layout or vector drawing people. I think they adopted existing features that would further their goal of being a better web interface application.

@Anton

Good point. I’m definitely not saying you’re wrong in any way for using Photoshop. Tools are just that, tools…a great artist could create a masterpiece with a piece of chalk. But whenever I find something that has truly advanced my workflow and productivity at the core, I get very enthusiastic about helping others make the same progress. Plus I think in the long run this article will be stumbled upon by people searching for info when deciding which package to buy/learn.

Andrew Ingram

July 23, 2008 11:02 AM

The pixel perfectness of Fireworks is why I pick it over Photoshop for web stuff. Photoshop allows subpixel positioning, this is great for print stuff but I’ve count of the times I’ve had to redo every single vertex in layout comps made in Photoshop because they weren’t aligned to a pixel grid.

Also, the rounded rectangles in Photoshop are hideous compared to Fireworks. It’s normally very easy to look at a web design with rounded corners and see which app was used to make it. I imagine there’s a way to get Photoshop’s corners to look nicer but as far as I can tell most people don’t bother.

Andrew Ingram

July 23, 2008 11:10 AM

Sorry, I take that back about the rounded corners. It looks like either they’ve improved in Photoshop recently or something else has been going on in the settings of the app to make things look bad.

joe cannes

July 23, 2008 11:13 AM

My process:

I lay out my web designs in photoshop. Once I am satisfied with my design, i save out a copy of the PSD, and bring the copy into fireworks/ From here,I use fireworks to optimize the graphics and slice and dice the backgrounds.

Any other similar techniques out there?

minimal design

July 23, 2008 11:28 AM

@Andrew

“I’ve count of the times I’ve had to redo every single vertex in layout comps made in Photoshop because they weren’t aligned to a pixel grid.”

That’s the sign of a sloppy designer, not really a Photoshop shortcoming…

I know I’m repeating myself, but you seem to be the perfect person to ask that question to: how do you get a 1px border rounded rectangle to be exactly 1px wide and not the default weird 2px “anti-aliased” border in FW (without turning off anti-aliasing all together and getting pixelated corners…)?

Anton

July 23, 2008 11:35 AM

I lay out my web designs in photoshop. Once I am satisfied with my design, i save out a copy of the PSD, and bring the copy into fireworks/ From here,I use fireworks to optimize the graphics and slice and dice the backgrounds.

Blasphemy! Heretic! Burn the Witch!!!

Okay.. yeah. I’ve done that a on occassion. Please don’t tell the others, will you? Especially Patrick. He’d never let me live that down.

Andrew Ingram

July 23, 2008 12:13 PM

@minimal design

The thing to watch out for with rounded rectangles is that when you select it normally you’ll be selecting the autoshape which doesn’t give you the right options. If you use subselect (white arrow) to select the path instead you’ll be able to change the alignment of the path as part of the colour-picker for the stroke. The default is centered which is why the line is blurred (it’s trying to render a single pixel line between two pixels), using inside or outside will result in a sharp edge even when using the soft line style.

It’s a lot more fiddly than i’d like (I like Fireworks but I do have a lot of issues with aspects of it’s UI) but you do end up with a sharper single-pixel border than you get using the layer stroke tool in Photoshop.

Kyle Bradshaw

July 23, 2008 1:14 PM

To me the choice is obviously Photoshop. I realize Fireworks might be “better” for websites, but most people can agree that Photoshop is better for more complex tasks. Why would I want to learn 2 programs when I can just learn one and kill 2 birds with one stone?

Andrew Ingram

July 23, 2008 1:44 PM

That reasoning is flawed. A lot of people use Fireworks for layout and vector stuff because it’s faster to work with and then do some of the more complex graphical work in Photoshop.

It’s the same way there’s still reason to use languages like Java and C# in a industry where Ruby and Python allow you to be a lot more productive.

Mordy Golding

July 23, 2008 2:14 PM

Photoshop or Fireworks? What about Illustrator? Sure, AI requires a few settings to be made to avoid the antialiasing issues, but with little effort, Illustrator offers just as much — if not more — functionality and efficiency — and guarantees content that can be repurposed for print or any other need.

Christian Baptiste

July 23, 2008 2:38 PM

[Quote] Jared – and I feel very comfortable working with pixels. To me, the Fireworks interface has always seemed clunky. Adobe seems to be bringing the interface in line with those used in Photoshop, Illustrator, et al, so that may appeal to me at some point. While I like the idea of Fireworks—mixing bitmap and vector into one glorious app—it just has this generally undeveloped, mixed-up feeling that I haven’t pushed past to become really interested in using it. [/Quote]

I think you might be surprised to see how many of Fireworks features are getting ported into the original Adobe products rather than the way you describe it. Yes the interface look and feel is getting a little overhaul to match, but the functionality is staying the same and for very good reason… It is contextual, it is intuitive, and it just makes sense, not to mention it is fast.

I can teach a user to do some basic work and be up and running within a couple of hours with Fireworks, where as Photoshop would take several weeks of instruction to accomplish the same tasks. In addition these same users can come back to the app three or four weeks later and still remember how to accomplish what they want,,, sorry, I can’t say the same about Photoshop. That in itself proves the usability of FW is better than PS.

I think Photoshop has some amazing photo manipulation tools, but the work flow is just prehistoric. The idea of locking the default layer, and how dam difficult it is to select and manipulate stacked items on a single screen just baffles me. Fireworks gives me control to instantly select, move, rearrange stacking order, change view orientation, show/hide, lock/unlock, move to new layer, copy, manipulate, combine, align, etc. with minimal clicks and with extreme ease. Most of the time I don’t even need to move my mouse off of the document screen.

How long did it take for Photoshop to allow non destructive filters? This is something that has been a part of the Fireworks workflow from the start. How long did it take for Photoshop to adopt the idea that the design process might need several iterations of a design (originally done in frames now with pages)?

Then you have to ask yourself why do you want to use Illustrator and Photoshop to accomplish what can be done in a single (more intuitive) tool.

Yes I agree that the print capabilities in Fireworks suck and need a lot of improvements but for rapid design you can’t beat it. FW is so easy that even if I have to do work for print or for animated graphics I do my initial work in Fireworks and then port it over to Illustrator or Flash.

As far as being a clunky UI, If it is clunky to you, you have not adopted it to your style of work. I am one of those dual monitor type people with my panels spread out all over the place, this layout suits me, and allows me quick access to anything and everything with a simple click, In addition I use shortcut keys and custom commands that are brainless to set up…. Yet if I am stuck on a single monitor (i.e. if I am traveling with just my laptop) I can with one short cut key change the entire UI for the different work environment. To me flexibility is more important than a fixed UI that doesn’t work the way that I want to work. With Fireworks select the tab key,,, with a simple click you have the cleanest UI you can imagine. FW is extremely customizable,,, you set it up to show as much or as little of the UI as you prefer.

Don’t get me wrong,,, I think Adobe has put some decent effort into continuing the success of FW and I am the happiest of happy campers that they chose to keep it during their purchase of Macromedia,,, But unless the goal is to manipulate photos, or you are doing some extremely high res print work, I can not see a single reason to recommend PS over FW.

Christian

Kyle Anderson

July 23, 2008 3:05 PM

Ok, here’s a question to PS users:

In Fireworks, I can click on any object, hit Ctrl + C, and paste a copy of that in the same image or in a new one, while still retaining all the effects.

I do a lot of PSD2HTML slicing for clients, so I’m always opening up PS for that, but I still don’t see a way to select an element and easily copy it to a new image all by itself with its effects applied.

I don’t know, really it comes down to familiarity (and that’s true for anything, whether it’s an OS, browser, code or image editor). To me, everything is such a PITA in PS. What takes 2 clicks in FW, takes 10 clicks in PS.

Amanda Jahn

July 24, 2008 3:47 AM

If someone can tell me how to get a 1px border rounded corner rectangle that doesn’t turn into a 2px anti aliased border, I’d give FW another try (the inside/outside path option doesn’t seem to be a available for rounded corner rectangles as far as I can tell…). Thanks!

@minimaldesign
Jonathan Snook mentioned it above, basically select Pencil Soft as your option and then in your stroke options select either Inside or Outside. Stroke centered (which is the default) will give you that yucky 2 pixel blurred edge. This was one of my key gripes with Fireworks too.

FWIW I used to use Photoshop for everything but my old boss made me switch. There was a pain period of about a week but I haven’t looked back since. I’d still use Photoshop if i was manipulating images or doing something that required heavy visual treatment but Fireworks is my preferred tool for visual design layouts.

Mihai Tz

July 24, 2008 6:09 AM

Quick selecting a layer in PSP:
hit V to use the Move tool then CTRL + click any layer. i think on mac is CMD + click.

also right clicking anywhere brings up a contextual menu with a list of nearby layers. usually the one that you clicked is on top of the list. so just select the first one regardless its name.

now here’s a trick. if you create folders (groups) when you right click inside the canvas, the contextual menu will always display first the groups and not the layer that you clicked. also the contextual menu does not offer any visual difference between a layer and a group. so, dont use groups at all, use layer linking. or if you use groups name them something like *Group or [GROUP]

u can select several layers at once directly on the canvas by holding CTRL + SHIFT and clicking around. each click will add another layer to your current selection.

use ALT + drag to make copies of them. link them and unlink them at your will.

what kind of design gurus are these guys anyway? if they need to find layers by name in the layer pallete?

David Yeiser

July 24, 2008 7:37 AM

Interesting read. I currently use Photoshop, but one thing that might get me to switch would be type rendering. Can anyone speak to the comparison between the two?

Dustin Evans

July 24, 2008 8:04 AM

Yes, very nice. I started designing with Photoshop awhile back, but then started playing around Fireworks about 3-4 years ago and haven’t put it down since. I find it a lot more accurate when it comes to designing for the web. I like Photoshop, but I feel I have to jump through a bunch hurdles just to do simple things that Fireworks makes so easy. Anyway, I’m really excited to see what’s new in Fireworks CS4.

Roy Reed

July 24, 2008 9:46 AM

I agree with Joust – why no mention of Corel PhotoPaint. I’ve been using it since I started designing websites in 1996 and had no reason to change. Back in those days there was no Fireworks and Photoshop was inferior to PP if you were working at web resolution (the text antialising at small text sizes was simply dreadful).

Anton

July 24, 2008 10:36 AM

Remember in Ghostbusters when they say “don’t cross the streams”? That’s just what I’m going to do… I’m going to probably blow something up, and try using Fireworks for the entire Month of August.

Shocking, I know.

If you want to follow along, read more about it on my site.

Hugh Griffith

July 24, 2008 11:15 AM

@David Yeiser – What about the rendering would you like to know?

Fireworks has five levels of anti-aliasing, plus a custom setting, so I can’t imagine you’d have trouble getting the results you were looking for.

David Yeiser

July 24, 2008 12:30 PM

@Hugh I suppose that’s about it, if it were at least comparable, maybe better. With better being defined as crisper, clearer antialiasing. I’m definitely intrigued, now I just have to find a computer with a copy of it around here (office).

Jack Keller

July 24, 2008 1:17 PM

I used to use Photoshop, and I still do on a semi-regular basis I suppose. I use it for subtle aspects and shading for layouts. I dig the way Fireworks slices and the control I have over layers and guides too much to use Photoshop exclusively. The UI wasn’t ever all that attractive but it’s more conforming in CS3 so I guess that’s nicer. I like how they play better together since Adobe acquired the suite from Macromedia. Anyway, that’s my 2¢.

Ryan "SirGeekelot" Dickinson

July 26, 2008 10:56 AM

As a Fireworks user and the boss of one of the most talented PhotoShop users I know, Anton Peck, my feelings are simple. Use what works for you. Anton produces high quality designs in PhotoShop in the same time I can in Fireworks. It’s what works for him, and I would never suggest he stop using it.

On the flip side however, I do feel that PhotoShop users are sticking to what they know. I used PhotoShop for all my design work until I started using Fireworks. In order to make the switch, I had to stop comparing the two. I heard a lot of “In Fireworks I want to be able to do this, like in Photoshop”, but that kind of misses the point. They are different tools, which should be used for different things.

Regardless, I applaud this thread for showing me I’m not alone in my Fireworks love.

Callan Demellweek

July 28, 2008 1:35 AM

I am mainly a Fireworks user, I have used fireworks for roughly 2 years now and seem to be able to do just as good as someone that could be classed as a “Pro” in photoshop. Both programs are very powerful but I think that Fireworks is better for web graphics as photoshop is better for photo editing, etc. – Callan Demellweek.

Quote Catcher Website Design

July 28, 2008 8:44 AM

I have been using Photoshop since what feels like the dawn of time. I have seen demo’s that other people have shown me of Fireworks and it has always intrigued me but I never could seem to make time to try it out. After reading some of the posts I think it’s time to bite the bullet and carve out some time to learn the tool.

thinsoldier

July 28, 2008 1:03 PM

HG: In Photoshop it’s that I can’t select any object just by clicking on it. In the early stages of a design, or while wire framing, where I’m moving elements around constantly, that really slows me down. In Fireworks, it’s that you can’t wrap text around an object.

| Yes you can

CM: A basic text underline in Fireworks is about all you can do. Showing a background color behind the link or a different underline color is not built in to the text tool and must be done apart from the text, which can be tedious.

| And that’s built into photoshop?

PL: Making bulleted lists is awkward as you have to mung it into shape manually and drop graphical bullets into place….Ideally you’d be able to use CSS right there in Fireworks.

| Same with PS and … wouldn’t it be great if there were a firefox extension that let you export a div of text as an editable .pdf/psd?

CM: …I don’t like that you don’t have the ability to select a layer by clicking on that element on the canvas. You can only select an element by finding and selecting the correct layer in the layers panel. I also don’t like that there are no vector tools, something I use extensively in Fireworks.

| Again, yes you can click to select. And if they would at least put illustrators path finder in PS it would be a hell of a lot better.
Is it not possible for PS and FW to share Fireworks’ superior file compression technology?

PL: …The main thing though, the big selling point that Fireworks has over Photoshop, is that when you want to select something you just click on it or click and drag over it.

| FYI: photoshop can do this

PL: Another big one is Pages, which was introduced in Fireworks CS3. Put your header and main navigation on the Master Page, and then rather than duplicating elements and having multiple .PNGs knocking about, you can just add a new Page for each page of the site you’re designing. Change the header in the Master page and it changes across all your pages.

| Yip, that sounds a lot better than layer comps.

JC: be sure to open the Shapes Options and tick the “Align shapes to pixels” checkbox. This will keep your shapes from getting fuzzy edges.

| I can’t believe that’s been there this whole time.

thinsoldier

July 28, 2008 1:11 PM

@John Faulds
That is a good thing. Photoshop doesn’t show the bounding box until after you click. Predictive pre-selection highlighting (yet another thing photoshop could learn from the world of 3d (modo, maya, silo, etc))

My only guess as to why adobe didn’t do that is because when you’re “painting/airbrushing” you often wind up with layers that have so little pixel/opacity info on them that they can’t generate a visible selection.

thinsoldier

July 28, 2008 1:25 PM

“But is anyone here actually deciding anything, or have we all already made up our minds? Are we so solidly entrenched in our choice, preparing to defend it to a duel if push comes to shove?”

Not me. I hate photoshop and I’ve used it 3-7 days a week for hours at a time since version 4. Never got around to trying FW but I have tried a number of photoshop wanna-be’s and alternatives like pixel, painter, gimp, paint.net, and a few others. Each of them had quite a few features that would make Photoshop 10x more awesome but I doubt we’ll ever see any of them happen in PS for at least 15 years. I would not be surprised if a serious alternative to photoshop appeared in the next 8-10 years.

Mario Amaya

July 28, 2008 1:28 PM

“CM: (…) I don’t like that you don’t have the ability to select a layer by clicking on that element on the canvas. You can only select an element by finding and selecting the correct layer in the layers panel.”

I’m shocked that he could make such a grossly wrong comment and no one in the magazine take notice. Yes, Photoshop has a click-select option for either layers or layer groups. I’ve used it daily for the last 10 years or so. Please edit the article to correct the information.

jim voorhies

July 29, 2008 6:39 AM

I’ve used Photoshop since it was first in beta, long ago and I love it for the artistic creativity it allows, but where I work, we’ve moved to Fireworks for UI work. One of the biggest reasons is Fireworks’ extensibility. We’ve created a full library of all the items we use in our internal sites, everything from icons to text boxes to buttons. Each item in the library meets the corporate branding standard requirements for font, color, etc. that gives us a consistency across applications that we require. Additionally, we created a Flash-based application palette that will allow us to select any library item and, in one click on the palette, turn it from a selected/current/default appearance to unselected/non-default appearance, enabled to disabled or wireframe to full rendered mockup. The ease with which we can create a web application that can mimic a functional application is remarkable.

DaveMo

August 4, 2008 5:46 AM

Some really good comments from everyone here; the article provided a good look at certain peoples workflows and why they benefit from using FW or PS. I personally started with Photoshop back at about version 5.5 and then got frustrated that it couldn’t do vector very well when I switched to using Illustrator for a lot of web work.

I used to read a lot of the DreamWeaver evangelists newsgroups (guys like Al Sparber, and the folks @ projectseven.com) and they all talked about their experiences using fireworks for web layout and graphics production because it was superior in the “Save for Web” and “Optimization” departments than photoshop. I started using it and the marriage of vector and bitmap had me hooked from day one. While photoshop may be capable of doing good things with vector now, I still feel the interface is clunky and better suited to doing the thing it was designed to do: edit photos.

Fireworks incorporates the core concepts from Illustrator so much better than Photoshop does and I really do love my bezier curves with the Pen Tool :)

Rus Miller

August 4, 2008 7:43 PM

This thread is so validating for me. I’m primarily a coder, not a designer, and I always felt like I had a dirty little secret when I used Fireworks for my designs, mainly because it was so learn-able when I was just starting out. I barely have to open Help to figure out what I need to do; it’s usually right there waiting for me, just a right-click or menu away.

I took vacation last December and boned up on PS for most of the month. What I found was that it was really fun to use…once you learned the shortcuts and ‘tricks’ (I know they’re not really tricks, but you have to admit that the interface isn’t all that intuitive).

Although I became fairly proficient at getting PS to do what I wanted, and I’m glad I took the time to learn, I’ve stayed with FW for production work due mainly to the ease of workflow and my familiarity with it.

I do love FW’s ability to open PSDs for editing, something I do often when my ‘real’ designing friends, who all use PS exclusively, send me a design to chop up. They don’t have to know.

Pablo

August 5, 2008 7:51 AM

I think Illustrator is the most efficient tool when it comes to text heavy layouts — I use it a lot with great success. It requires a bit of settings tweaks, like snap to pixel to avoid blurring and the use of the effect > rasterize > 72dpi – text in order to avoid smudgy text when saving out….I am happy to share my knowledge if anyone is interested

jive

August 5, 2008 10:52 AM

If you had to pick 1, then pick Photoshop. Especially since Flash CS3 now reads PS’ layers.

Fireworks is great for moving things around and doing a quick base for a web design, but it doesnt do anything with text very well, that and the color picker for Fireworks is the windows one.

I use a mixture of both though for web design. Photoshop for the main graphics and Fireworks for moving it all around, creating the layout and such. If I’m designing an ad though, I prefer Photoshop.

Pablo Buydid

August 8, 2008 2:58 PM

I have tried both, but Fireworks is better for me. I find its tools are easier to use. The way it manages the objects and selections are faster to dominate. The tools are really appropriate for my job. I use Fireworks a lot to design my email campaigns, almost all the graphic content of my sites and other stuff. It’s too intuitive.

The Fireworks interfase is less complicated to understand than PhotoShop, and other similar programs.

I know Photoshop is a great tool, but Fireworks is the right tool for me.

Craig

August 10, 2008 11:27 AM

Been designing websites since 1997 and I’d say Photoshop all the way. As a designer and perfectionist photoshop gives me the Pixel perfection i want. Firefox… used it and I can’t compaire the two really, maybe I’m just stuck in my ways but firefox just seems clunky. The only thing I would say against photoshop is the price in the UK is an absolute rip off.

Ohiit

August 15, 2008 8:41 PM

I am comfortable with Adobe Photoshop. Been using for 6 years already to do a simple photo editing and poster for campaign, banners and sponsor ads. But now I lost in touch with design so now a part time Chef. LOL!! Never used Fireworks before. I used Fireworks MX a very long time ago but dump the idea of doing Fireworks (I think in 1998-1999) can’t remember exactly which year Macromedia release the software. I am not sure how Fireworks has evolved into Adobe Fireworks. I am curious to try it out one day but no money to purchase Adobe Fireworks. :( Don’t have the time and energy. Design inspiration BURNOUTs already.

Mark

August 18, 2008 2:11 AM

Obviously Fireworks is better to manage .png and animated gifts

Kevin S.

September 10, 2008 4:04 PM

I’ve even used Fireworks for business card and print ad designs too. Easier than working in PS and Illustrator. But I still use Bridge and PS for my RAW photo workflow.

Dee Sadler

September 13, 2008 9:07 AM

They were NEVER meant to compete. Photoshop is great at what it does, and they wouldn’t have got rid of ImageReady in favor for Fireworks if it wasn’t superior for WEB design.

Fireworks is meant to bring in Photoshop work, and make it useful for the web. With pages (and no one even mentioned PAGES until half way through the article. Photoshop has folders, not the same thing.

Fireworks is used for designing more than web, but it’s again, vector. Maybe it should be better compared to Illustrator then Photoshop.

By the way, you can use Photoshop plug-ins, textures and patterns in FW too.

Some good resources are fireworkszone dot com
and Adobe’s developer or designer connection. If you haven’t played with CS4 Fireworks, now I can make a PDF and it’s amazing for Prototyping web designs. Fireworks now ships with the Design Premium Suite, not just the web, btw.

I make a wireframe in FW, make the other pages, send it to the client for approval, I make changes and it takes me less time than actually making the designs first. Then on approval I replace my wireframe with the actual design, and I make a Master page to house navigation etc. that will be on every page.

Then I can make the slices I need for the CSS I will then Export and build in Dreamweaver. It’s called ROUNDTRIP.

I can make Symbols for Flash and Skin Flex applications super easy. It makes more Javascript if needed for a drop down menu for instance, and other things Photoshop was never meant to do. There IS no comparison. Not the same thing.

Someone made the comparison of making a rectangle. A rectangle is easy enough as a Vector shape in PS. But in FW, you can easily add a feather, or a roundness value much quicker, because it’s Vector and that is what FW is, a Vector web graphics program. Not a raster image editing program that now has more functions (3D and video) plus the kitchen sink then it needs. Try doing all the things with a rounded rectangle auto shape in Fireworks then try doing that in Photoshop, because you can’t. PS and it’s vector tools are limited because it’s an image editing program, not a vector web program.

Dee Sadler
Adobe Community Expert
Adobe User Group Manager
Adobe Freelance Professional
Adobe Certified Instructor in 5 programs

Anton Peck

September 14, 2008 10:46 PM

Dee S., I appreciate you stopping by to add your comment. You seem to have a lot of passion for FW, but I’d like to address some of your points.

First off, the reason they ARE meant to compete, is because whether you like it or not, Photoshop is being used by many professionals to create some very incredible-looking website designs, right up there with Fireworks. What we’re trying to do here is help both sides see what the other is up to, and perhaps enlighten some open-minded cross-pollination.

Why would you compare PAGES to folders (folders? really?), when Photoshop has a very similar utility called LAYER COMPS? Don’t know if you’ve looked into it, but you can lots of cool things with layer comps, including (gasp) making interactive PDFs for clients to preview.

Comparing FW to Illustrator? Okay, sure. But how many people use AI to create web design? A few, perhaps – but this article is primarily focused on the two reigning champs of the arena: PS and FW. This article is not all about vectors (because vectors are a journey, not a destination).

Which, by the way… The “vector” argument has always been interesting to me, because I always thought that vectors were a STYLISTIC “per-project” choice, rather than a catch-all design solution, as you seem to imply. The challenge you posed can be done with a rounded-rectangle that has smart-filters applied to it. Granted, not as elegant, but it’s there; it works. I just don’t think I’ve ever given one of my clients a soft-blurred rounded rectangle.

To me, there is no war between vectors or pixels, both can live together harmoniously, because each are a contributing tool to each designers stylistic toolbox. Everything becomes pixels in the end, and sometimes working 1:1 with each pixel can provide a more satisfying result.

- Video: PS has built-in support for Video timeframes, anamorphic pixels, and export to DV device capability. I’ve known a few pro video editors in my time, and I can’t think of a single one that uses FW. What specifically are you trying to compare here?

- Flash can open PS files. Sure, there are some benefits to opening FW files, but then we start getting out of the realm of this conversation, and into another – because Flash is another one of those “per-project” solutions I was talking about. I love Flash, and when I need to FW with it, I’ll be happy to, no problem-o.

- PS has 3D Studio Max object support, 3D Layers, built-in rendering… c’mon, you really don’t know this? Again though, pointless… because how many of us use 3D objects in our web design workflow on a daily basis?

- ROUNDTRIP (since when is it typed in all-caps?) – I’m not going to argue with you on this, you’ve got me fair and square. But then again, I don’t touch Dreamweaver (even if I were a FW user), because there’s two things it really struggles with: semantics, and unobtrusive js. So if you want your app writing crufty code that you should be writing yourself by hand in an app like TextMate or BBedit… be my guest.

Here’s the thing: You go out of your way to add four extra lines, for our benefit, just so that we all know how qualified you are at what you do… but your comment comes off a bit ranty. You also seem out-of-touch with both Photoshop and the large portion of the Adobe userbase who probably have different workflows than you do. I don’t doubt that you’re an expert at FW, but this fervent partisanship doesn’t explain how so many other pros are still cranking out tons of great work and satisfying their clients with whatever system they’ve chosen to follow.

Stephanie Sullivan

September 14, 2008 11:51 PM

Anton my friend… I’m not going to do a point by point argument. I think both programs are good for what they do. And I think people that are used to one over the other get more value because of that.

That said, I’m with Dee on one thing for sure. The vector argument. I code other people’s comps all the time (you’re doing your own coding I assume). When I do, I find FW SO much easier to work with. I can turn on and off objects (so I can export the way I want to). I can recreat things or slightly change them as necessary (removing a border I want to put in with CSS for instance).

In PS, USUALLY (YMMV) things are not created so that I, as a CSS creator, have that much control. I am not for a second saying PS is a bad program. It’s the way people USE PS that typically causes me problems (many bitmaps on one layer). And it’s still a fact that FW exports smaller file sizes. Even the evangelists will show you that.

I have only one other quabble before I let you guys go back to your arguing — DW. I’m not sure how it is that DW struggles with semantics. Have you looked at it LATELY? I mean, I create super semantic documents with no problem. I use DW. Again, a lot of it is the captain at the helm. And I’m not at liberty to talk about the JS subject at this time. So I’ll leave that one alone. ;)

And that’s that. To each his own — but I do love me some FW for slicing and dicing… ;)

Ciao,
Stef.

Dee Sadler

September 15, 2008 10:08 PM

Wow Anton, don’t think that was an attack on you personally. LOL And actually, yours was.

I am amazed you read so much into the bits I said. Make assumptions much?

3D and video make no difference here. Not a comparison because Fireworks does not do that. Why would you assume what a person knows and doesn’t know from a few lines talking about the points this article doesn’t cover as well as it could have? I’ve used, and been an Instructor for Photoshop for a very long time. Yes, I am more than aware of all the features of Photoshop, but again, it wasn’t the point to list every single feature of each program.

Layer Comps… haha. Still not the same thing. Even though I can add slices, it isn’t the same as being able to have a Master page with all my navigation (working with rollovers and or disjointed rollovers, btw) and quickly and easily have things actually function for the client quickly and easily. Oh and Fireworks CS4 can make a PDF too, btw.

For clarification, roundtrip means this to me: I can easily make wireframes in Fireworks that include some design elements, and make the navigation work. This is just a quick file to show the client the main areas of their website, and get approval on those essential areas. Once approved, I either bring in someone’s Photoshop files, or I create them in Fireworks. I make the rest of my slices for export. I just slice the pieces I need for CSS, not the entire design typically. Then I code the CSS by hand in Dreamweaver. I used caps because I didn’t feel it was addressed well in the article.

Rapid Prototyping also wasn’t brought up in the article much.(there are plenty of articles on rapid prototyping and Photoshop isn’t typically mentioned) Flex skins can be done in both too, but again it depends on what the design is. Maybe I’d use Photoshop, maybe I’d use Fireworks. If I was planning out a site and going to design a form for instance, Fireworks already has a library of all the types of input fields etc. I need to just drag them out and place them into my file to show the client what their form will look like. It’s simply a matter of time I base the majority of my opinions.

Photoshop can indeed be brought into Flash, but it comes across as a bitmap, not vector. Even when you use Vector Shapes. Vector makes a smaller file for Flash, and since it’s a web application, that’s a valid point.

I added my credentials because my opinion is an educated one. I am probably more in the know about what people do in terms of work flows than most. As an instructor, I come across a wide variety of users, same goes for the fact I am a user group manager and a Community Expert (I spend a lot of time answering questions in the forums. Stephanie is also a Community Expert for Dreamweaver and made the CSS layout templates for Dreamweaver CS3. Go Stef!).

People should be educated in what makes each the right tool for a specific job. Using the right tool for the right job is important. Just because some of the same things can be done Photoshop does not make it the most effective tool. Just because thousands of designers use just Photoshop, doesn’t mean it’s the better tool for particular jobs. If it takes me an hour to do something in Photoshop that I can do in Fireworks in 10 minutes, doesn’t that say something? Design away in Photoshop, but when it comes time to make it web ready, Fireworks wins for me.

Would I use Fireworks if I was doing video or print work? Nope. Was Fireworks meant as a compliment to Photoshop? Absolutely.

You prefer Photoshop? Fine, no problem, I love Photoshop as much as the next guy, but when it comes to speed and efficiency for making web graphics, it can proved Fireworks is often faster and sometimes the better tool. Not once did I insult anyone. I voiced an opinion about what was missing in the article, that’s all. I did not feel like all the features that make Fireworks web worthy were mentioned, or given equal importance. No rant, just an opinion.

Dee

Matthew Pennell

September 16, 2008 7:45 AM

I’m closing comments on this article due to spam. I think we can all agree that MS Paint is hands-down the best app for web graphics anyway. ;)

Sorry, comments are closed.

Media Temple

via Ad Packs