5 Reasons why Fireworks kicks Photoshop’s Web Designing Butt

By Elyssa Dolinger on September 3, 2010 at 11:50 am in General

kickinbutt

When it comes to designing webpages I prefer working in Fireworks. I know, I know. There seems to exist a real prejudice against Fireworks. Sort of like you’re not a real designer if you use it. I challenge any web designer to give Fireworks the old college try. Making the switch to Fireworks was the best thing I ever did for the efficiency of my website building. And here’s why:

1. Fireworks is intuitive to web design.

Click to see full size.

Fireworks was built originally by Macromedia with a focus on web designer needs. That means it is optimized for a web designer’s needs. They made web-related things readily available like image compression, an intuitive slicing system and a whole different way of grouping and layering. One of my favorite features is that when you copy something, it pastes it in exactly the same place.

And for those of you desperately clutching to Photoshop because it is familiar to you, lots of things are just the same as in Photoshop –  some keyboard shortcuts, toolbars, panel layouts, etc. The design environment feels very similar.

Click to see full size.

2. Pages.

The way that Fireworks does its layer groupings is incredibly inclusive compared to Photoshop. One Fireworks file, like an InDesign file, may contain many pages. Each of those pages contains a unique set of layers including but not limited to a web layer where you make your slices (toggle those on or off by pressing the number 2 on your keyboard) and a locked master layer (so you can’t mess it up). If you make a master page, much like InDesign, those design elements will transfer to every page designed after. This is incredibly useful after you design the navigation, for example.

3. The Web Layer.

Click to see full size.There is more to it than just slicing and optimization. If you’re a non-coding designer, you can set up links and even rollovers for a working demo version of your site. Coders, you just keep doing your thing. The code it spits out is in no way clean, but it works for instant gratification. Which is nice ‘cause it’s instant.

4. Pixel-perfect sizing.

Do you need to make a box 697 pixels wide? With Fireworks’ inspector (reminiscent of Flash, isn’t it?) you can type in exact amounts. You can even tell it what degree to round the corners. No messy measuring or dragging handles. Simple.

Click to see full size.

5. Reactive Gradients.

Interactive Gradients

Gradients are all the rage ever since web2.0, right? Aren’t you tired of fighting them in Photoshop? In Fireworks, the gradients have handles. You can grab and drag the points so your gradient starts and stops exactly where you want it to within the object.

Don’t get me wrong. There are some things that can only be done in Photoshop- any kind of bitmap editing, actions, quick mask mode, to name a few. To some degree some of these things can be imitated in Fireworks, but it’s not made to edit everything under the sun- it’s specifically made for building websites.

It’s not like I hate Photoshop. Photoshop is good at what it does. We’ve been good friends for many years and I still use it in conjunction with Fireworks for bitmap editing. It’s just that designing a site in Photoshop always, to me, feels like using a fork to eat soup. Use the tool that was designed specifically for the job. Use Fireworks.

The Fireworks Advantage

By Dave Roach on January 22, 2009 at 4:14 pm in Design,Development,Reviews

Adobe Fireworks CS4 BoxFireworks is often overlooked. Many (most) web designers today use Photoshop to design their websites, and a lot of them have never considered or (*gasp) even heard of Fireworks. Adobe Fireworks is made for creating websites. That is what it was built for, and it does it well. Fireworks enables you to rapidly prototype and design for the web. With it you can create a clickable PDF that will act as a prototype. Also, you can quickly create export and optimize slices (Fireworks is better at optimizing images than Photoshop).

Now don’t get me wrong, Photoshop is an extremely powerful tool and is amazing; it has way more features than Fireworks, but if all you are doing is designing websites, then you should use software that was specifically made for doing just that. Another excellent feature to note about Fireworks is that it is compatible with Photoshop. For the most part, you can open a psd in Fireworks, and it will recognize all of your layers and styles, and with CS4, compatability between Adobe’s programs have been further improved.

If you are a web designer and have not looked into using Fireworks, you should at least try it out and see for yourself how efficient it really is. There are hundreds of other excellent features Fireworks has to offer, read more about them at Adobe’s site.

Free Photoshop brushes

By Dave Roach on September 23, 2008 at 6:30 am in Design

A great way to shortcut some ideas or at least get a design started, is by looking at some custom photoshop brushes. There are thousands, if not more of bushes out there customized in tons of ways. For instance, I found two amazing brush sets from Smashing Magazine that are freebies. Check them out:

These brushes also can be handy in that they can can be scaled as large as needed, and can be edited in illustrator and re exported as your own customized brush. Brushes can help add the fine details to your design that you may not have time to create from scratch. They are excellent tools that in my opinion should not be overlooked.

Podcasts have helpful tutorials

By Dave Roach on August 11, 2008 at 3:07 pm in Design,General,Mac

So as an aspiring designer in the digital world, I am always looking for ways to increase my knowledge about the programs I use to design, mainly Photoshop, Illustrator and Flash. Personally, I got my footing through school, and then started reading books and looking at tutorials online. All of these have helped me gain knowledge, but recently I found out another excellent source for learning about these programs. Podcasts!!

The other night I was looking through the free podcast directory for some videos for my ipod, when I stumbled upon all sorts of podcasts that had video tutorials for pretty much anything I would ever need! There are hundreds of these video podcasts that have tips and tricks from professionals and they are all free! So if you are ever in need of some Photoshop knowledge in advanced layering on 3D objects or just need to know how to touch up an image, check out the free podcasts!!! Here is a link to get you started with Photoshop, it will open up itunes and send you to the podcast directory (you don’t have to have an itunes account to get podcasts).

Bridge and Photoshop Batch Process Integration

By Dave Roach on July 21, 2008 at 6:30 am in Design

Ever have to do a simple task such as put a watermark on a picture? This can easily be done in Adobe Photoshop by inserting your image or text that you want to be your watermark over the original image and setting the transparency to whatever you wish. Now one image is simple and easy, but what if you have 500 images in separate folders at different sizes, resolutions and orientations? Now that can be time consuming. Recently I found an excellent way of speeding up this process.

First off, in Photoshop, you can record a certain set of actions, and save them to be repeated automatically later to a batch of files. What I did was record and save my actions for different pictures at different resolutions, so I had different presets for landscape and portrait orientations at different resolutions. Now that this is finished, how will I run these scripts on all of the pictures if they are in different folders and how will I be able run the scripts on specific images based on resolution and orientation? The answer is Bridge.

In Bridge, under the filters panel, there is an option to view the files in a folder and all of its subfolders, so by doing that you are able to view all of the images together without moving them. The filter panel also allows you to sort images by resolution, orientation and much more. So here is how this all comes together. Bridge allows you to perform a Photoshop batch to files you have selected in bridge. So, select the files you want to modify, and in Bridge so up to tools/photoshop/batch and select the action you recorded earlier. It’s that simple! Yes, I know it does take a bit of time to set up, but if you think you can put watermarks on 500 individual pictures manually then be my guest!

Animated Favicon

By Emily Spirek on July 14, 2008 at 6:30 am in General

As Tim stated previously, incorporating a favicon with your site can reinforce branding for your business. At T&S, we wanted to take it a step further by adding an animated favicon. I created ours in Photoshop, saved it as a .gif, and renamed it as favicon.ico. Here is a website that will guide you in the process:

http://www.virtualmarketingblog.com/index.php/20070827/animated-favicon/

Here you can find a list of example sites with animated favicons:

http://myvogonpoetry.com/wp/2005/10/10/animated-favicons/