Fireworks
Save time exporting web images using Fireworks
There are so many loyalists to Photoshop among the design community that feel like Photoshop is the be all – end all to any graphic editing needs. However, as a designer we all know that reducing time = better efficiency = greater profitability. So why don’t more designers use Adobe’s Fireworks for exporting graphics instead of Photoshop? Slicing in Fireworks can cut your time in half – here’s the comparison between Photoshop and Fireworks. (more…)
How do I make a gradient with transparency in Fireworks?
Not often do I learn something new about Fireworks. Granted, this may be one of the lowest areas of entries on this blog site, but I use Fireworks on a daily basis. The other day I realized something so simple that I can’t believe I didn’t notice it before, and it saves me a ton of masks on very basic vector shapes.
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”.
Inserting a fireworks HTML file
In the past, when I inserted a fireworks HTML, I drew a table, and then drew a cell size that fit the Fireworks graphics table I had just sliced and exported. I then placed it inside the cell, and went on my merry way.
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.
Exporting Individual Slices
After a couple of years of exporting a document out of Fireworks as an HTML page and inserting it in an HTML page where I needed it, I finally figured out a way that I have more control.
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.
Using the “Fit Canvas” shortcut.
As I have already mentioned, the more shortcuts you can learn as a designer and implement them into your work flow the more productive you can be.
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.
