Unlike most of our tutorials, we won’t be started by opening up a new document. Instead, browse to File > Batch Process.

You should see a screen similar to this one:

When I’m getting ready to batch some photos I’ll typically put everything I need into it’s own folder. In that case with the screen above I could simply browse to the folder and then click the Add All button. If you prefer you can click to highlight the images you want (Ctrl + Click to highlight multiple images) and then hit the Add button. Once you have all the images you want in the white box at the bottom hit the Next button.

We should come to a screen that looks like this:

The options that you have available in Fireworks Batch are shown in the left column. To add one of the options simply click it and press the Add button in the center. If you highlight the option you’ve added in the left column you can configure it further.

Lets go over each individual option:

Export

If you’re working with big images that came right off a camera, this is great way to manipulate them. You can select any of the standard web export choices that come bundled with Fireworks, any custom export options you may have created, or you can choose a custom export option.  We’ll dive into some of the advanced options of image exporting in another post, but here’s a quick guide:

Access the settings by choosing custom… from the dropdown and then clicking the Edit button. From the top left you can select the type of file you’d like to export your images as, JPEG, GIF, PNG, TIFF, etc. Once you select the type you can make additional adjustments such as compression for JPEG images, color pallet for GIF files, etc. You’ll note that you see the file size (on disk) and the estimated download time in real time as you change the file type and adjust the settings. For general photos that would appear in an image gallery or something similar I typically use the JPEG file format with the quality set to 85. Once you have your settings tweaked just press “OK” to return to the batch setup.

Scale

Scale is another batch option I use frequently. Once added to the batch process your options include: Scale to Size, Scale to Fit Area, and Scale to Percentage.

Scale to Size

Set the exact height and width you want your images. If you select Variable in either dropdown Fireworks will retain the correct aspect ratio of the image.

Scale to Fit Area

Similar to the above option but with additional flexibility (my favorite). Set your maximum width or height and Fireworks does the rest. If you have a mix of horizontal and vertically oriented photos this option works great. You can also check the box to have Fireworks only scale images that are larger than your set height/width, that way you can avoid blowing up smaller images and ending up with blurry photos.

Scale to Percentage

As simple as it sounds. If you want to change a 1000px wide photos to 500px change the slider to 50%.

Find and Replace

Find and Replace can be very powerful, especially if you use Fireworks on a day-to-day basis and have hundreds of PNGs floating around. You can run this option only on Fireworks PNG files (as well as Macromedia Freehand files). If for example you wanted to change any instance of the font “Times New Roman” to “Helvetica”, this option makes it effortless. You can also change sections of text, colors, URLs, and more.

Rename

Rename is a great way of removing text from batches of files. For example, my camera adds the letter “p” to the beginning of each image file name – I can easily remove them while batching. You can also add prefixes and suffixes, or replace/remove blank spaces (to “replace” a character or blank space with nothing simply leave the “with:” field blank).

The above options would take a file names img001 and change it to product-photo-001.

Commands

There’s loads of graphical options in the Commands section of batch processing. You can convert the images to greyscale or sepia, rotate images, sharpen or blur, and much much more.

Wrapping up your Batch

If I decide I need to sharpen some large images before resizing them, it’s important I have the batch process in the right order (sharpen then resize). You can adjust the order that batch runs the commands on each image using the arrows in the upper right hand corner. Simply select the option you want to move and click the appropriate up or down arrow.

Once you have your options configured and in the proper order, click next.

The final step of the batch process is to set the output and backup options.  I typically want to keep my original photos untouched, so I choose Custom Location and then create a new folder to hold the post-batch images. If this is a batch you’ll run frequently you can also elect to save the batch script as a JSF file for later use. Click the Batch button to run the process and Fireworks will inform you when it has completed the chore!

Has batch processing saved your butt in the past? Do you have any more advanced techniques using this feature of Fireworks? Feel free to post below!

Before we get started: I’ve switched to Fireworks CS4 for these tutorials for several reasons, the biggest being the text engine bug introduced in the CS4 product release has been fixed. This is a pretty straightforward tutorial, but in the future if there’s any major differences between CS3 and CS4 and how my tutorials relates to the versions I’ll make note of it.

Getting Started

Lets create a new file by going to File > New and setting our canvas size to 1000 pixels wide by 1000 pixels tall. Set your canvas color to white and ensure your resolution is at the standard 72 pixels/inch. Set your zoom to 100% by holding CTRL and pressing +/- or using the scroll wheel on your mouse (if you have one). Now select the rectangle tool from the vector section of the tools panel on the left.  Lets draw a square in the center of the canvas. To force the shape to stay truely square, or “constrain the proportions”, you’ll want to hold down the Shift key as you draw the shape. Depending on what you were doing with Fireworks last time you used it, your new square could be any color. Lets change it to blue by selecting the black pointer from the tools panel and clicking our square to highlight it. In the Properties Panel at the bottom you’ll see the fill color of the selected object. Click the paint chip next to the paint bucket icon and enter this HEX code into appropriate box at the top of the pop-up: #0B4E80. Press Enter to save the color change. Before we move on let’s make our blue square “rounded” by adjusting the Rectangle Roundness setting in the Properties Panel.  Set this as you see fit, but I’m making mine at “8″.

You should have something like this so far:

Layers of Fun

Before we go much further, make sure you’re looking at and are familiar with the Layers panel. If you press F2 on your keyboard this will toggle Fireworks Layers panel on and off. It’s important to understand how layers work in Fireworks (or any graphic design program for that matter), so if you need to brush up I suggest you press F1 to bring up the help screen, search for “layers” and read the section on “Working with Layers”. Why am I worried about your understanding of this concept so much? Because we’re going to be building the effects of our glossy button one on top of another using layers.

With the layers panel open click to highlight our blue square. Now press CTRL-C to copy our square and CTRL-V to paste a new copy onto our canvas. You won’t notice much on the state, as Fireworks will copy the new vector shape directly on top of the existing one. You will however notice a new blue square at the top of the layers panel on the right.

Now, select the ellipse tool (same place you found the rectangle tool, hold down your mouse click to see all of the shapes) from the tools panel on the left. Now draw an oval over the top half of our blue square. Change the color of the oval to anything other than blue for now, and then adjust the opacity to 50% in the property inspector.

Mine looks like so:

I use the opacity slider quite often just to align and manipulate shapes. Since I can see both vectors now along with how they overlap, it allows me to figure out where I want everything.

Making sure you have nothing selected already by clicking a blank area on the canvas. Now click the top blue box, hold down the shift key, and then click the oval on top so both shapes are selected. In the top menu click Modify > Combine Paths > Punch. If you did it correctly you should have two blue shapes left, the top most having the shape of the oval cut out of it. Select that shape and change the fill type from solid to linear. Your gradient will most likey start out wonkey, so click the color chip and set the left (top in this case) to #073252 and ensure the right (bottom) color is set to the original blue #0B4E80.

You should end up with something like this:

Get your Gaussian Blur On

Before we start this step change your canvas color to black. To do so, click a blank space on the canvas and adjust the “canvas color” selection in the properties panel in the lower left to the appropriate color chip. Now select the ellipse tool from the tools panel on the left and draw an oval in the middle of our square shape. Change the color of the oval to white (#ffffff), and then add a Gaussian blur by clicking the plus symbol in the filters panel at the bottom of the screen and selecting Blur > Gaussian Blur. I set my glow to 40, feel free to play around with yours as you see fit. Flatten the new blurred shape by selecting it and clicking Modify > Flatten Selection.

Marquee Effects

Select the black pointer from the tools panel on the left. If you click the towards the edge of the rear blue square (not the half square we created) you should be able to highlight it. Now copy (Ctrl+C) and paste (Ctrl+v) a duplicate square on top of the existing one. With our new square copy highlighted, go to Modify > Convert to Marquee. You now have a “marquee” or mask drawn on your canvas in the shape of our original rounded rectangle. This means that everything inside of the marquee can be manipulated with our tools, and everything outside is protected. Lets inverse this effect go clicking to select > select inverse. You’ll now notice that our marquee is drawn around not only the rounded square but also the canvas itself. We can now delete the “glow” that extends outside of our square shape. Now press Ctrl+D to remove the marquee. Click our new timmed glow bitmap that’s on top of our square and move it down behind the half-square using Ctrl+Down Arrow. While the glow is still selected, change the opacity to 80 in the properties panel. You should end up with something similar to this:

Using some of the techniques we went over in this short tutorial you should be able to create some nice modern graphic web elements. Feel free to experiment and post back here if you run into any questions!

Here’s the link to my final Fireworks PNG.

I’m loving what I’m seeing of your site so far and greatly appreciate the tutorials that you’re making available.  I’ll be picking up your book when it becomes available, but in the meantime might you be able to recommend a reference that deals with using Fireworks for design?  Are there any books that you consider indispensable?  Thanks, and I look forward to future postings!-Chris

Thank you for the kind words Chris! As for your question regarding Fireworks literature, sadly I can’t recommend anything. The bulk of books that have been released for Fireworks over the years typically illustrate how to use the tools individually, as opposed to  demonstrating how to use them in a workflow. If anyone has any recommendations for Chris please leave them in the comments!

I have noticed the following on some blogs:

“This is a preview of Fire Up Your Butt: Part 3. Read the full post (421 words, 5 images, estimated 1:41 mins reading time)”
Please tell me what WordPress  plugin you use for this and where can i download it.

-Boris

The plugin I use that you’re describing is called “Evermore”. You can download it here.

I have a couple of questions:

1. Will your tutorial work with FireWorks MX?

2. Will your series cover how to open WordPress Blog in my site so I am able to see my navigation buttons? Just like your site?

-Lynn

I’ll admit that I haven’t used Fireworks MX in quite a long time, but for the most part in this series we’re keeping things pretty simple. In the event my exact instructions don’t match the version of Fireworks you’re using, it could be that that particular feature or option was moved in later versions of the software. Look around the user interface to find a solution, or if you get stuck just leave a comment or contact me through my form on this site!

As for Wordpress theming, this question comes up quite often. As such, I’ll be writing a tutorial on the basics of Wordpress customization later on. Thanks Lynn!

If anyone else has questions just shoot me a note with the contact button above, or if it’s specific to a tutorial just leave it in the comments. Thanks everyone!

Let’s get going by downloading the last PNG that we left off with here. In the last installment of this series we added a feathered photo to the background of the design using an image we downloaded at sxc.hu. In this new tutorial we’ll add a sidebar to our design to break up the space. Since we already have the coffee cup image on the right hand side of the layout we’ll add the sidebar there.

Before we really get going, I want to introduce a feature of Fireworks that plays a very important role. If you’re familiar with any other popular graphics program you might already be familiar with the concept of layers. First click “Window” in the top toolbar and make sure you have a check next to “Layers” in the drop down menu. You should have two layers so far in the panel, a “Web Layer” and “Layer 1″. We’ll be talking more about the web layer in the future, so ignore that for now. Layer 1 as you can see contains each element that we’ve added to the canvas so far organized by their stacking level. You should be able to click the layer named “Coffee Cup”. You’ll note that when you do so the coffee cup layer is highlighted and the actual coffee cup image on the canvas is selected. This is pretty handy as you can now move the coffee cup around with your arrow keys or preform other actions on it that you normally would.

You can also click and drag the coffee cup object up and down in the layers panel to change it’s stacking order position. In our Bellabean example I could click and drag the coffee cup down past the first “rectangle” object. This would put our coffee cup behind the faded green bar in our masthead. Try experimenting with the stacking order of the coffee cup object if you’re not familiar with the layer concept. Be sure to fix everything back or reload the PNG before continuing though.

When you’re ready, let’s make a new layer! To make things easier to manage for now, collapse “Layer 1″ by clicking on the down arrow to the left of the layer name. Now click the “New/Duplicate Layer” icon at the bottom of the layers panel. Fireworks will automatically name this “Layer 2″. If you double click the text that spells out Layer 2 you can rename the layer. Lets rename ours “Right Sidebar”. Much like we repositioned objects in layer 1, we can click and drag layers around in the stacking order as well. You’re new layer should already be on top of Layer 1, but it not move it there now. Now just lock layer 1 and we’ll be ready to get to work. To do this, click the white space next to the eye icon (if you have layer 1 selected you’ll see a pencil icon). You should now see a lock icon, and you won’t be able to move or interact with any objects in layer 1. Now let’s make our sidebar!

Select the rectangle shape tool and draw a rectangle on the right hand side of the body of the page. I started mine in the very corner of the solid green rectangle that sites atop the green gradient behind the coffee cup. Since we’re working on Layer 2 which sites above all of those other objects, the new sidebar rectangle will be on top of every other object for now. I made my rectangle 300 pixels wide, and positioned it exactly so as to touch the edge or the green bar and the side of the main body content.

If you downloaded the latest PNG and have been following along, you’re new rectangle might have inherited the same gradient that we used before. Let’s change this to a solid fill by changing the setting from “Linear” in the properties panel to “solid”. Change the color to #3D6312. How did I come up with this color? I used the eye dropper tool to select a random shade of green to the left of our new sidebar, then I clicked the new color chip in the properties panel. From there, I clicked the icon that looks like a color wheel called “Sys Color Picker”. I then moved the right hand slider down to darken the shade of green I picked with the eye dropper. I then clicked “Add to Custom Colors”, and closed the window with “ok” (these steps could be significantly different on a Mac).

This is looking a little goofy at the moment with the coffee cup behind the sidebar. Let’s fix that by unlocking “Layer 1″. We can now click on the coffee cup to select it, and cut it from the canvas with CRTL+X or Edit > Cut. If you now click our new dark green sidebar and paste (Ctrl + V or Edit > Paste), the coffe cup will be pasted on top of the sidebar in the “Right Sidebar” layer in the exact same position that it was before. Since it’s already selected and probably annoying you as much as me, use your left arrow key to move the coffee cup into the center of the column.

You should end up with something like this:

Now let’s add a few finishing touches to the sidebar element before we wrap up. Select the darkgreen sidebar shape, and make a copy of it using Ctrl+C (or Edit > Copy). Now paste the copy on top of itself with Ctrl+V (or Edit > Paste). Since we cant tell that anything happened, let’s change the color of the new rectangle. The new rectangle is already selected, so click the fill color chip in the properties panel at the bottom and select black (#000000). Now press Q on your keyboard to activate the scale tool. Use the bottom-center anchor point to drag the rectangle up. Set it to the same height as the top green bar that runs the length of our page body, which is 40 pixels tall. If you can’t eyeball it just right, use the numeric transform in the lower left of the properties panel to set that bar to 40 pixels tall.

Change the opacity to 30% to finish up. A subtle touch sure, but we’ll keep building up this area in the coming weeks.

Next time we’re going to add a few more details to our sidebar, and then dive into text and typography with Fireworks. For now you can download the completed PNG here. Coming up I’m also going to address some reader mail which I’m sadly backlogged in. Thank you for the continued support and encouragement! As always I appreciate your comments, and be sure to point out any problems that I might have over looked. Thanks again.

Let’s start by firing up PNG that we left off in last time. We just added some vector details and worked with the raster cup we imported and masked. What we need now is a more interesting background. We’ll download from the same source we got our coffee mug from, SCX.hu. The photo of a coffee shop we’re looking for is located here. Once you’ve downloaded the full size file, import it into Fireworks by going to File > Import.

Once you click the canvas to place the file, you’ll note that the photo is rather large. Zoom out using CTRL – far enough to get a better view (50% worked for me).

First thing we’ll do to jazz up the photo is feathering the edges. Make sure the photo is selected by clicking it with the black pointer. Now select the oval marquee tool from panel on the left in the “bitmap” section. Draw an oval over top of the chairs in the photo, keeping your oval well inside of the edge of the photo.

This image illustrates the approximate size and shape we’re aiming for. Feel free to experiment with different sizes and shapes in the future.

With your marquee drawn, go to Select > Feather. Enter 100 for the radius, and click OK. You’ll notice the marquee shrink on you a bit. Now go to Select > Inverse, which will flip the pixels that are selected to the outside of the marquee. To complete the feather, press Delete on your keyboard. You should now have an oval shaped portion of the photo that fades to transparency all the way around.

If everything works out you should end up with something like this:

To work this image into the design, we’re going to use a few different tricks. First, let’s resize the image while constraining the proportions. Select the feathered photo with the black pointer and then hold down Alt and Shift. Now click and hold one of the blue corner points and drag it out to enlarge the photo. I got mine to about 1200 pixels wide. With the photo still selected hold down Ctrl + Shift and press the down arrow. This should move the feathered photo to the lowest position in the layer stacking order (behind the rest of the objects).

Select the top tan colored vector rectangle that resides behind our logo and coffee mug. Set its transparency to 80. Now selected the background photo again and use the up arrow to move it up into position. Get the top of the table that’s in the center of the photo in line with the “COFFEE” in our logo. Now select the top most green bar beneath the logo. Press Q on your keyboard to activate the scale tool. Using the center transform handle cut the height of the shape to half what it is currently. Now use the arrow keys on the keyboard to position the vector evenly between the bottom of the logo and the top of the second green bar.

You should end up with everything positioned like so:

The text and content that will eventually be displayed below our masthead could now run into issues with the high contrast photo in the background. Lets remedy that by adding some color to the inner body. Start by selecting the lower green bar. Copy the bar with Ctrl C, and paste it in place with Ctrl V. As the new copy should be selected for you already, press down on your keyboard to move it off top and just below the original. Now press Q to activate the scale tool, and use the center handle to enlarge the height of our new vector to about three times the height of the tan masthead shape. So far so good! With the new shape still selected, change the fill property from solid to Gradient > Linear. Now click the gradient color chip directly to the right of the paint bucket icon in the property inspector. Click the lower left paint chip in the popup, and then click the green color of the bar or logo on the stage above. Click the right hand lower box and change the second gradient color to white. Click anywhere on the canvas to close the gradient properties. The gradient vector shape should still be selected, so make one last adjustment to it. Change the transparency of the shape to 90, which should show a dimmed out version of our background image through the green foreground color.

If it turned out right you should have something like this:

You can download my completed PNG file here (1.5MB Fireworks CS3 PNG) and compare and contrast your version if you like. I think adding another column to the body will be in store for this project next time, stay tuned!

Special thanks to Brendon for pointing out my typo in the last post, sorry about that … and thanks to KiwiBrian for the encouragement

Start out with a fresh canvas by going to File > New. Set the width and height to 2000 PX each, and make sure the background is set to white (#FFFFFF) and click OK. Select the rectangle tool from the vector section of the tools panel on the left. Draw a short rectangle on the canvas that measures 790px wide by 60 px tall. Get the shape in the ballpark when drawing it, and then adjust it in the properties panel numerically (measured in pixels). You’ll find this adjustment in the lower left corner. While you’re down there set the color to #351E7B by clicking the color chip next to the paint bucket and entering the HEX code. Set “Rectangle Roundness” to 40 to complete the basic shape.

With your black pointer selected, click our new rounded rectangle to make sure it’s selected. Now copy the shape using Edit > Copy ( better yet use Ctrl + C), and paste it on top of itself with Edit > Paste (Ctrl + V). Fireworks will automatically place the new copy directly on top of the original. Use the down arrow on your keyboard to move the new duplicate shape down and away from the original. If you hold down Shift while you press the down arrow, you’ll engage super fast movement speed.

Head back to the tools panel and choose the rectangle vector tool again. Now draw a new rectangle that covers the top half of our duplicate. Make sure it covers the entire width and about half of the height. Now we need to select both of these boxes, use the black pointer to do so. You can hold down the shift key and click each shape to select them (note the blue boxes that indicate this). Now go to Modify > Combine Paths > Punch. If you pulled this off, you’ll be left half of a rounded rectangle, and the original above it.

Select our new shape and change the color to black (#000000), then move it up using the arrow keys into a position that covers the lower half of the original shape. You should be left with something that looks like this:

With the black portion of the bar still selected, change the opacity of the shape to 35%. This should result in a darker version of the violet color beneath it.

Select the circle shape from the tools panel on the left, and draw a skinny oval in the middle of our budding navigation bar. Mine ended up 710px by 20px, use the numeric properties to adjust yours so it’s close. You can also adjust the oval using the scale tool (Ctrl + Q). Adjust the position of the oval so it’s in the center of our navigation, then turn your attention to the “Live Filters” (formerly Live Effects) panel, located in the properties panel, on the right hand side). Press the Plus icon (Fireworks CS3) to select from the Live Effects, and choose Blur > Gaussian Blur. Set the slider to “10″ and click OK. With the blurry oval still selected, change the opacity to 35.

What good is a navigation bar with no buttons? Good question! Select the text tool on the left, and set it to Arial, 17, Bold, White (#FFFFFF). Click onto the left side of our bar and type out “HOME” in all caps. Leave the text as is for a moment, and select the rectangle tool one more time. Draw a skinny vertical white line next to our home button. Adjust the size to match my 2px wide by 45px tall shape. Now copy and paste a duplicate shape, and then use the right arrow key to move the duplicate adjacent to the original. With the second shape still selected, change the color to black (#000000). You should now have two skinny rectangles, one white and the other black, next to each other. Zoom into the area using the zoom tool, or Ctrl +. Select both of the shapes by holding down shift and clicking each rectangle. Now group the rectangles by going to Modify > Group (Ctrl + G). Set the opacity of the group to 32%, and move it next to the “HOME” text as depicted in the image shown here.

If you use the black pointer to click and select the “HOME” text, and then hold Shift and click the separator we just made, you can copy and paste a duplicate onto the canvas. Fireworks will place the copies directly on top of the originals. Use your arrow key to move them further down the bar to the right. Once in rough position, change the “HOME” text to “ABOUT”. Continue this process until you’ve entered HOME, ABOUT, OUR SERVICES, HISTORY, FAQ, and CONTACT. Adjust the space between everything with the arrows keys as you go. You should end up with something similar to this:

Looking at this now, I’d say the text is a little big. Holding down shift, click each piece of text until they’re all highlighted. Change the font size in the properties box from 17 to 13. If the text fields are centered in the properties panel, changing the size of the font should keep them centered in each button. If after making the change they look misaligned, just click each one with the black pointer and adjust its position with the arrow keys. Here’s the final graphic:

Now that we have everything finalized, lets export everything. First we have to draw hotspots over each button. For this we’ll need to switch to the Slice tool in the toolbar to the left. You’ll find it in the web section towards the bottom, it looks like a scalpel over a green box. Use the slice tool to draw your green boxes over each button section. Much like the vector rectangle tool you’ve been using, the slice tool will allow you to draw and adjust shapes where you need them. If you need to adjust your hotspots, just switch to the black pointer and zoom into the area that needs attention. Be careful to only cover the pixels that make up the button graphic, keeping the slice area pressed right up to the edge like shown.

The last step, exporting the images, can be done in a variety of ways in Fireworks. Since I’m a pretty hands-on kind of guy, I use this technique: Start by making sure that our button images are set to the correct file type in the properties box. Since we’re using gradients in this example, we’ll choose “JPEG – Better Quality”. Now simply right-click each button and select “Export Selected Slice”. Do this for each individual button. You’ll be asked via a system window where you want to put your new images. I make a local folder for the site, and place the images in an aptly named “images” folder within that. You should also save your original source PNG, typically in a separate folder from whats being uploaded to the web server.

Want to make rollover versions of each button? Of course you do! Simply select the underlying purple bar vector, and change it to different shade of purple, or any other color you like. You can change the color of the text as well (mind the contrast between bar and text). When you export the images again, just name them accordingly. I use this format: nav-home.jpg and then nav-home-ovr.jpg.

If you so choose, you could also automate a lot of this with Fireworks, add drop menus, and even have Fireworks export the final HTML. I’ll save that for another time though. Please leave any questions you have in the comments. Thanks!

The source file (Fireworks PNG) is located here (right-click > Save As).