Fireworks was built with the web designer in mind

Last week I pointed out Photoshop’s issue with opening layered pngs. Photoshop also stumbles in the way of web editing because the feature sets have always been an afterthought. Let’s start to add up the seconds you can save for each time you edit a graphic or slice within a web document. Let’s assume that in the course of a layout, you edit all of your aggregate slices 30-50 times.

If you are creating even remotely graphic intensive designs in your firm or your day to day life, you know the importance of slicing. I won’t get into a long explanation if you don’t know what slicing is, but generally know, slicing is the idea that you define square and rectangular areas of your layout to export as individual images with potentially different image qualities based on their graphical makeup.

Slicing your layout

Photoshop has a slice tool in the toolbar and you can easily click and draw a rectangle over an area to prep for export.

Here I’ve drawn a Photoshop slice over a flyer for an arcade game called Extra Bases. You can barely see the brown (selected) slice outline, as well as the other slices in light dotted blue. If memory serves me, there is a way to chance the visual look for slices in Photoshop, but this is the default look. (Meaning: You have to spend extra time on every install changing it if available.)

Now let’s look at how slices look in Fireworks using the same image.

It is so easy to see the slice you’ve made, it’s in light green. In both Photoshop and Fireworks the power user shortcuts make it easy to turn slices on and off. Fireworks, you just hit the number 2, and in Photoshop it’s Ctrl + H. But Fireworks, in my opinion, makes it easier later to select the slice. You just your ubiquitous ‘Pointer Tool’ to select any and all objects on a Fireworks canvas. With Photoshop, you have a special slice select tool, that is the secondary option in the slice menu option and you have to cycle through (Shift button modifier) to get to it.

Time saved: 1-2 Seconds

Naming Slices

Fireworks and Photoshop are fairly comparable in this regard. If you are smart, you will name your images will specific names that will bring you image search traffic. To name your images when slicing them within a larger layout, you actually give the slice a name. In Photoshop, you have to break out the slice selection tool and double click the slice to change the name.

In Fireworks, use that same ‘point tool’, click the slice and in your properties panel in the lower left you just start typing and hit enter when you are done and the slice is named.

Fireworks even goes a step further and adds the slices as an editable object in your layers palette under a sub folder called ‘Web Layer’. At any point in time you can just click the double slice layer and rename it, going right now the list. No doubleclicking each slice. It’s that extra thought in editing that makes the workflow much better for web developers.

Time saved: 1-2 Seconds

Exporting Slices

Holy cow does Photoshop fall down flat here. When coding an HTML page from scratch, I know I may adjust my layout to allow for repeating graphics, alignment, etc. etc. I only want to target one slice, and export that one slice.

In Photoshop (remember you have to cycle through to a specify slice selection tool), you select the slice and then you have to ‘Save for web’. Poweruser shortcut of Ctrl + Alt + Shift + S

Now, if you want to save just that slice, you have to click on it, hit ‘Save’ and then by default Photoshop wants to save every slice. You have to choose from the dropdown menu that you only want to export the one selected slice.

And done! Only five easy steps to click through. Wow.

Let’s compare that to Fireworks.

You are using your general ‘pointer tool’, you right click on a slice and you choose ‘Export Selected Slice’ like so;

If you notice, by default you will see that Fireworks has understood you only want to export this one slice, not the whole document and has checked the according box.

You’re done. Plus, the other great thing is that once you export the document as a whole once to a folder, Fireworks remembers your export location and when you right click to save that slice, it will place you in the same directory as before. Photoshop will do the same thing, and it will remember if you choose ‘selected slice’, however….by default Photoshop will always stick your image inside of an ‘images’ folder. So, if you want to export your image to images > arcade > extra bases, Photoshop will add an extra ‘images’ directory inside of there to put your image for no reason at all. Memory serves me that there is a way to change this, but again, not a default setup.

Time saved: 7 Seconds

Many more web graphic advantages to Fireworks

You can see, you can save on average over 10 seconds of time per slice, or possibly 3-5 minutes over the course of your layout.

Granted, 3-5 minutes may not seem like much, but a power user will really appreciate that. 3-5 minutes can save you some money, but it also means you have to spend less time making something work and more time designing or just relaxing because you are more efficient. This is just one tiny granual of why Fireworks is better than Photoshop for building out website. Even at 3-5 minutes per feature and 10-20 better features, you are looking at a ton of time saved.

Prior to the Macromedia / Adobe merger in 2004, a designer could use the excuse that they didn’t have Fireworks and they weren’t going to buy it. That’s fine, a good argument. However, Fireworks now comes with the design package branded as a ‘rapid prototyping tool. So if your excuse is that you are heavily vested in Photoshop, and would rather something take more time than learn something new then you may be in the wrong industry. Technology moves too fast to stay stagnant and there is too much to know already.

Have other thoughts? Think I’m wrong? Have another piece of software that is even faster for exporting web graphics? Leave a comment, let me know.

You're reading Save time exporting web images using Fireworks is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.

Gradients are a great tool to give a website color and interest, and simple usage can turn a couple of flat colors into a three dimensional area of interest.

In this entry, I am going to show you how to create a simple button. This button, our “More Info” button is pretty commmon on the web, I took mine from cue on the Tiger Direct website. The nice thing about this button is that it is completely scalable and editable at any time later on.

Being self taught, some things that seem so simple to other designers are things that I may have totally missed in my own training. Gradients with transparencies was one of them.

Let’s get started

Step 1: Open Fireworks, and choose File > New (New Document)

Step 2: Make your new document 77 x 24 pixels, set your resolution to 72 DPI, and set your canvas to “White”.

You're reading How do I make a gradient with transparency in Fireworks? is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.

Well, there is no need for that nested of tables. You can just create a new page in Dreamweaver, and place the Fireworks HTML in directly.

You're reading Inserting a fireworks HTML file is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.

I think that most everyone probably already knows this, but if you right click on a slice you can save it individually as whatever you want to name it. Change frames to change the content on the slice, if you have set up rollovers using shared content on frames. If you need to save a handful of slices, and the export is defaulting to the wrong directory, then export a whole .html document to the location so that it remembers the correct location, later going back and deleting that document.

You're reading Exporting Individual Slices is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.

Another one I have recently learned that really helps me along is the rotate shortcuts and the fit to All and fit to Canvas shortcuts.

In Fireworks under the modify menu there are “Fit Canvas” and “Trim Canvas” options as well as rotate options.

I have set mine to Ctrl+Alt+F to Fit Canvas, and Ctrl+Alt+T to trim canvas, the latter of which I don’t use too often.

What Fit Canvas will do is remove any part of the canvas that there are no objects on, and if part of your image is off the canvas viewing area, it will fit to that dimension too.

But I will often use the two rotate commands in conjunction with the fit Canvas command when opening, trimming, rotating, saving, and closing a file.

You too can set your own shortcuts commands and save your shortcut presets in a file by going under Edit > Keyboard Shortcuts > and either Menu Commands or Tools.

You're reading Using the “Fit Canvas” shortcut. is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.