FireworksTutorials

Fireworks CS4 Beta for Web Design

feature_art.jpg

If you’re designing websites using Adobe applications, you probably fall into one of two camps: the one that’s already using Fireworks for fast prototypes or the one that soon will be. Fireworks has undergone an incredible transformation from a Web design application to an RIA (Rich Internet Application) layout prototyping tool. When Fireworks sits side by side with Photoshop and Illustrator, it’s easy to lose sight of what it can do. If you have one of Adobe’s Web suites, however, you’ll see that big yellow FW icon staring at you, taunting you, daring you to click it and find out its secret power.

Instead of listening to my plea for faster prototyping, how about we
go through a sample project, highlighting how Fireworks makes life easier for Web designers? Let’s take that to yet another level. How about we do it in Fireworks CS4, the new public beta released by Adobe at http://labs.adobe.com. Not only will you get a tour of the application, you’ll also get your hands on Fireworks CS4 before it’s actually released! I’ll also be posting a companion video, highlighting these features and showing the detailed creation process for this project—step by step from start to finish. If you’re new to Fireworks, this will convince you to start using it. If you’ve already experimented with Fireworks, it will give you a chance to look at what’s coming down the pike with CS4. Go ahead and download the application at the Adobe Labs site, and follow along as we create a website.

The Interface
Earlier versions of Fireworks had a layout that harkened back to the Macromedia days. Fireworks CS4 has been designed to look and feel similar to Photoshop, Illustrator, and Flash, and the outcome is very clean. If you’ve used any of those applications, this should come as no surprise: a Toolbox sits on the left, the canvas in the center, and there’s a Property inspector at the bottom that lets you modify the contents of your canvas. The Toolbox is separated into vector, raster (bitmap), and Web tools, so there’s no confusion, and new users will find it easier to jump in. New in CS4 is a pop-up menu at the top that lets you switch between different workspace modes.

Inside the vector tools group, there’s a series of prebuilt auto shapes. Choose a shape, click-and-drag it onto the canvas, and you’re done. Also new in Fireworks CS4 is the option to use Smart Guides when working with auto shapes. When you drag out a shape in the center of the canvas, the Smart Guides appear, letting you know when the horizontal and vertical center lines are near. This also works well when trying to align an object to other objects.


Fireworks takes it a step further: every auto shape has resize handles and special yellow control points. Clicking on these control points lets you customize the design of the shape itself, rather than just changing the size. Rounding corners has also changed
in CS4, with the option to change the roundness in pixels as well as a percentage—a boon to CSS designers.

Fireworks CS4 offers a 9-Slice Scaling tool that blows scaling and prototyping out of the water. Let’s say, for example, that you created a website that had a rounded center and buttons. To increase its size you’d have to ungroup these sets of objects and reposition the design. With the 9-Slice Scaling tool, you can set the portions of the image that you don’t want to scale and resize the entire image, knowing that the locked portions won’t scale.

Let’s use the auto shape tools to create the outer portions of the webpage.

Vector Shapes, Colors & Layers
You control the color and stroke of a shape in the Property inspector. Objects you’ve selected can contain a variety of different backgrounds, gradients, and patterns, giving you complete control when laying out the background of a webpage. Fireworks CS4 adds a real-time view of gradients, patterns, and styles, so you don’t have to wait: Changes happen as you make them.
Create a rounded rectangle and then add a regular rectangle at the same width below it. Then, use the Align panel to align both shapes to the center. By highlighting both shapes and choosing Modify>Combine Paths>Union, you can create a simple shape with rounded corners at the top and square corners on the bottom to use as the overall frame for the site. Add a dark gray stroke to this shape.

Let’s add another slightly larger rectangle in the background, with a gradient that goes from black to dark gray, then back to black, taking advantage of the real-time changes to modify the gradient. Finally, make a copy of that shape, and resize it so that it’s the width of the front rectangle and fairly narrow. We’ll use this for our navigation bar. Add the same dark gray stroke to it, then drag it near the top. Lock the background layer, and we’re good to go.

Text Manipulation
Let’s start adding some text. With Fireworks CS4, Adobe has gone to great lengths to incorporate their type engine, with noticeable improvements: groupings of font families in the pop-up menu, adding font weights in another pop-up menu, adding type on a path, distortion—it’s all redesigned from the ground up, and it’s all good.

Here, we used the Text tool (T) to click on the canvas and type out five links to use. We want to take these five text areas and place them at an even distance from one another on the navigation bar. Doing so is as simple as highlighting the text boxes and clicking the Space icon in the Align panel. Notice that moving the boxes around brings up the Smart Guides, making positioning a breeze.

We’ll need some sample copy to place on the page to let us gauge where our other graphical elements need to go. Choose Commands>Text>Lorem Ipsum, and a paragraph of dummy text appears that you can use for the layout. Just add to it by copying-and-pasting and use the selection tools to move the text box to its place.

What if we want to create a block of text that automatically flows around an image? Use the Pen tool (P) to create a path that goes around the image, then select your text layer and path, choose Text>Attach in Path, and the text is now inside your custom shape, flowing around the image, and making your comp more real.

Importing Graphics
Importing files into Fireworks has always been easy and it’s even easier in Fireworks CS4. When importing a PSD file, a dialog prompts you to specify the dimensions of the image and also lets you load a specific layer comp in the file, or convert layers into states, taking into account a multipage workflow. The new version of Fireworks also does a wonderful job of keeping masks, effects, layer groups, custom shapes, guides, and clipping masks in order.

In the dialog when importing an Illustrator or EPS file into Fireworks, you choose the size, scale, resolution, and other settings to maximize the file in your layout. For users who continuously go back and forth between Photoshop and Fireworks, a new panel has been added in CS4 that allows you to specify how Photoshop components will be handled, and whether you want to bypass the import dialog entirely.

For the final portion of this website mockup, we used a copy of the top frame above the navigation bar and grouped it with my mountains picture as a mask so that it created a rounded top corner on the document.

Common Libraries Make Mockups Faster
A website mockup is only as good as its ability to mimic the final product. While text and images are pretty easy to lay out on a page, sometimes you need to place content on a mockup that mimics forms, buttons, frames, and text boxes. In days of yore, screen grabs of other pages were just fine. Making them in Photoshop was also an option, albeit a tedious one. Enter the Common Library panel.

In the Common Library panel, there’s a series of graphical elements that you can drag-and-drop into your layout: bullets, form elements, flowchart graphics, even Flex graphics. Symbol editing is done through the Symbol Properties panel. And in CS4, if you select symbols from the HTML category, they’re represented as actual code on the page for a richer prototyping experience.

To check how you’re doing, choose File>Preview in Browser and send the file to your favorite browser for a quick review.
Now that we’ve looked at developing a mockup, let’s talk about how you take that information and turn it into your HTML site.

Slicing and Rollovers For the Page
Fireworks offers a robust slicing tool for working with PNG files you want to export to the Web. Using it is simple: Just get the Knife tool (K) and click-and-drag out the areas you want to use as separate images. As you slice the image, keep in mind that all of this information will be put back together in Dreamweaver, so slice judiciously. We made slices of only the portions of the image that we’re going to use for the website—all of the other text and graphical information on the page will be replaced by actual code.

If you exported this content now, the filename for the smaller files would be weird, including underscores and numbers, so it’s a good idea to go back to your original file and give each slice a unique name. Press 2 to make sure the slices are showing, select one with the Pointer tool (V), then change the name in the Property inspector.

Optimization at Your Fingertips
Because all of the sections on your website aren’t the same, you’ll have to export different slices on the page at different settings. Click the Preview button at the top of the window and you can look at the file size of a given slice in a specific format. If you aren’t happy with the file size, use the Optimize panel to switch the export format.

If you’re unsure which type is the best choice, use the 2-Up and 4-Up views to make your comparisons. This is similar to the Save for Web function in Photoshop—having it in Fireworks means one less jump to another program.

Now we’ve sliced the main portions of the image, as well as portions of an image that we’ll to use to repeat on the page. So, let’s
get this document ready to approve and go to the Web.

Misbehaving With Pages and Behaviors
I’d much rather spend a short time prototyping than a long time coding prior to getting the okay for the webpage, so let’s make this as easy as we can. We’ve organized the main graphics under the slices into a layer folder called MainPage, and the content of the page into a folder called Content_About. This allows us to select the bulk of the content for the page with one click and cut it from the layout.

With the new Pages panel in CS4, you can take all the interface elements of the website and turn them into a Master Page by Control-clicking (PC: Right-clicking). Then, just create new pages with the Add Page icon at the bottom of the Pages panel or with the new contextual menu.

To add content to separate pages, just paste it into the new pages (it will always place in the same location that you copied it from—another plus). Then change the headers of each section, making new page sections as fast as you can hit the Command-V (PC: Ctrl-V) shortcut.

Let’s tie the pages together: Double-click on the pages themselves and change the names to something more relevant, then click on the Master Page and use the Pointer tool to click on each of the button slices at the top of your webpage. In the Property inspector, the Link pop-up menu will automatically show the names of the pages. Select the pages, and the links are all set.

Previous versions of Fireworks created rollovers using the Frames panel—a throwback to animated GIF images. As it turns out, not many people are creating animated GIFs, and the Frames panel was really a representation of the webpage or interface at a specific state (like mouse over, mouse down, etc.). Fireworks CS4 changes the name of the panel to States to reflect the new workflows. To add rollovers to the site, go back to the Master Page and bring up the States panel. Control-click (PC: Right-click) on State 1 and add a Duplicate State after it. Then, with that state active, highlight the navigation text in it, and change the color to a darker gray, symbolizing a mouse over.

Bring back the slices (press 2) and click on the center of the About button slice. Click on the target at the center of the slice and drag it slightly to the left, then let it go. In the dialog that appears, choose the state you want this slice to swap with when someone hovers over it. In this example, select State 2 from the pop-up menu and your rollover is set.

Earlier versions of Fireworks made it really hard to preview multipage layouts. Fireworks CS4 has added a File>Preview in Browser>Preview All Pages in [primary browser] command, taking all the pages and linking them for review.

Now, we haven’t done any coding, but we have rollovers and separate pages that we can show a client as a prototype. But how do we get all of this packaged for a client?

Exporting the Page
There are a couple of different ways to go about the export. If you choose File>Export, you’ll get a dialog asking you to save the files in a specific location. The Export pop-up menu lets you export HTML and Images, or CSS and Images (newly revamped and a much anticipated upgrade in Fireworks CS4), among others. The new Adobe PDF option takes the cake for me, however. In the past, whenever I exported a Fireworks site, I handed over code to a client who could use it as he saw fit. Not only did I have to collect all of this in a folder, compress it, mail it, and worry about the client’s skill, I also didn’t feel this protected me. In one click, Fireworks CS4 provides the solution: By saving the file as a PDF, the entire layout and all the pages, graphics, and behaviors are exported into an interactive PDF to send to the client. No compression, improved protection, and no fuss. You’ve got to love that!

Where To Go From Here
A special thanks goes to Alan Musselman, Adobe Applications Architect, for his help with this on short notice. We’ll post an interview with Alan about Fireworks CS4, more tutorials dedicated to the new release, and a list of all of the features on the Layers magazine website so you can get up to speed and get designing.

Share: