Web Design: Photoshop vs Fireworks – no contest

There have been many a showdown lately about whether fireworks or Photoshop is the better tool for the web. I hate to say this, but Fireworks is the better tool to go to the web. (Let me say I am a Photoshop ACE (Adobe Certified Expert) and Certified Instructor, and have been using it since version 2.0, but it’s a matter of the right tool for the right job) I love Photoshop, I do, but hands-down Fireworks is better for many things like:

– It slices better than Photoshop hands down.
– It has Pages, which let you carry on your design to other pages with a Master page for all common elements.
– With Pages, it allows for you to start with a wireframe and have the client approve of the basic structure before you move on to full blown design. It’s called rapid prototyping.
– From that wireframe or design you can make your navigation work and post it to a site, or make a PDF to send to the client.
– It exports much better CSS without having to slice everything up, as we use background images now, and Fireworks understand that and lets you choose when something is a background image.
– It’s a vector-based drawing program, and since most people use Photoshop, you can make your page more unique, plus making vector shapes is much easier.
– Makes symbols to go into Flash if necessary. (Yes you can bring in a Photoshop file into Flash, but it’ll still be a bitmap, not vector art, thus a bigger file)
– Makes skinning application super easy, like for Flex since it also exports as MXML.

(Flash Catalyst (formally Thermo and to come in 2009) will allow the designer to design a web application in Photoshop, Illustrator or Fireworks and bring it into Catalyst and make scroll bars and buttons, and other things function, then hand that off to the developer to let Flex finish things off.)

Photoshop has many positives, and it is by far the standard for image manipulation. I will say for simple image manipulation, i.e., color correction fireworks does a fine job. I can do most things to my images right inside of Fireworks that I need.

The problem as I see it, is Fireworks was just added to the Creative Suite in 3.3 of the Design Premium. Designers haven’t had years to play with it, except for us old groupies of the Macromedia Studio collection. I won a copy of Ultra Dev (Dreamweaver) and Fireworks 3 years ago, 2000 I think. Many current designers just don’t bother learning something new. They already have Photoshop and why learn a new tool. Didn’t Photoshop take what ImageReady had and they incorporated that into it? Well the answer is yes, to a degree.

Can I slice in Photoshop and name it and even make it text? Yes
Can I export as html, and some CSS and have my images go into a folder? Yes
Can I easily make an animated GIF? Yes
Can I make rollover images easily? Whoa, ah, well, ummm, no. This is where the buck stops to a degree. If I want to make a rollover image in PS, I’d have to rename the slice and re-export it.

So, can I save time in Fireworks? Yes. Could I convince others to join me there and save time and frustration? Maybe. For every designer who has CS4, I’d say come on in, open up Fireworks and see how it can change your life by freeing up time spent making Photoshop mockups.

Flex/AIR/Flash Catalyst – Things designers should care about

By now you know I am a designer, but you may wonder why I would even care about Flex and AIR. I do classify myself as a designer who codes, but still, I am indeed not a full fledged developer. When it comes to needing CF on my sites, I can do some coding, but not in any other language like PHP, or any what I call heavy lifting on the back end of my sites. Would I like to be a developer? Only if I can still design.

So I made a big deal about Flex to our members (KCWebCore), because Flex and AIR and eventually Flash Catalyst can literally change our lives. With an increase my skill set, I’ll be more marketable, and with an increase in my worth, it’ll change my quality of living. Why wouldn’t I want to learn this?

We’ll start with Flex and why us designers should care.

With every Flex application built, someone will need to make it look presentable and have the look of it fit in with the clients web site. This is where we come in with Flex skinning. Adobe has made Flex skinning easy to do with some downloadable (is that a word?) extensions on They have one for Flash (which makes sense) Illustrator and Fireworks (which is awesome). As a matter of fact, if you don’t already, you should have Labs bookmarked for all the great information they have on there.

Flash Catalyst (formally code named Thermo) is a bridge between the design world and Flex. You can either design inside of Flash Catalyst or bring in a Photoshop/Illustrator/Fireworks file. Once you bring in, lets just use a layered Photoshop file for an example, you can target specific layers and turn them into working Flex elements and components. Plus, it isn’t like Contribute or some program that doesn’t let you touch the code, it’s more like a WYSIWYG, Dreamweaver like program that lets you design, but also lets you see the code you have just created. What it allows you to create is working sliders, visually wiring together events and bindings, and much more. Wow! Flash Catalyst isn’t even public yet, so we have to be patient for a bit unless you were lucky enough to be at MAX NA 2008. They gave out a ton of DVD’s with Gumbo on it as well. Gumbo is Flex 4’s code name. MAX also had a ton of  sessions and hands-on sessions. Maybe I’ll add a tutorial for those who have the MAX build very soon. Anyway, once the designer gets done, he hands it over to the develop in Flex 4 who takes the file and finishes up the functionality of the application. You can even round-trip back and forth from Flex 4 back to Catalyst, back to whatever design progam you used. Lots of new features to be added soon, so stay tuned. Visit Flash Catalyst’s page at Labs for more info.

There will be plenty of opportunities for us designers there, but what about AIR? So lets say Actionscript 3.0 is still a bit mystical for you just yet. (I know you are trying to learn it) Even for us Flash designers, turning to AS 3.0 for our code, even the simple stuff, has a learning curve. Even for AS developers, making the switch to Flex has been… shall we say, at times frustrating. (Flash Catalyst can also make AIR applications, or will when released.) You can also make AIR applications out of Dreamweaver and now Flash CS4. WooHoo! With Dreamweaver CS3 and CS4 and Javascript, you can make AIR applications. Yep, no kidding. So first thing, you go and download the Adobe AIR extension for Dreamweaver CS3. There is a ton of good support info, so don’t worry, I won’t explain it all in one blog entry. Just know that it is an amazing opportunity for us Dreamweaver geeks to explore something as cool as AIR.

Flex allows you to use either AS 3.0, or MXML. If that means nothing to you, that’s OK too. Just know that there are some subtle difference between Flex AS 3.0, and Flash 3.0. What this info makes me do besides turn to Colin Mook’s AS book from O’Reily is make me understand that only really good developers will be embracing Flex, AND that they will need a good designer to make their Flex apps look good.

So have I given you enough reason to lean more about these new Adobe technologies? I hope so.

See ya later