Fireworks CS4 Beta for Web Design

SHARE
, / 2353 17

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.

17 Comments

  • graphic design nottingham says:

    Is this fireworks? Looks like some great new features… I don’t even recognise it compared to the version I still have! (Which I only use for batch processing and creating animated GIFs)

  • David Galavotti says:

    You guys know if the “rollover” behaviour, on the swap image tool still using the javascript approach? It will be remarcable if they’re using the CSS alternative.

  • Stephen says:

    Some great new options… my only question is, why hasn’t this been merged with Photoshop? ImageReady was killed awhile ago and I do miss some of that functionality (though not the clunkiness of it!) like rollover creation. I wish there were a ‘mode’ instead of an entirely new application. It would be cool if Photoshop had a ‘Fireworks Mode’. Photoshop is doing video and 3d now… why not fireworks? 😉

  • Steve Racz says:

    It seems to me that the direction Adobe is taking is to “gently” move users who use Photoshop for web design over to Fireworks. With the demise of ImageReady, i wonder how long it will be before slicing and other web features are removed from Photoshop. I wish this were not the case. Nothing against Fireworks, but i would rather work exclusively in one application (Photoshop) to do my web development and image manipulation.

  • Klime says:

    I’m a huge fan of FW too, as a web designer since version 8 I am using Photoshop only for photo editing and stuff, while FW is my best web layout designing buddy 🙂

    There are few things I miss in FW, to become ultimate one :

    – Vector export. I was designing many logo’s & other stuff and I couldn’t export it to EPS or AI (higher that 8). This really pissed me off and I was exporting it to SWF and than from Flash re-exporting it to EPS but results were not so good. I cannot see reason why Flash can export EPS and FW can’t. Maybe with CS4 I could open a exported PDF from FW in Illustrator and than edit it, but why so much work for a simple job?

    – Good Illustrator, PS and FW integration. I have problems in opening some PSD files in FW, especially ones with masks, can’t realize why Adobe is not fixing this since they are now in the same Studio and the compatability is very important

    – More photo editing tools, filters & actions, I don’t see why FW cannot use PS filters, the implementations of Photoshop Live Effects in CS3 was great job, I hope that the integration will continue

    That’s for now, I still haven’t tried CS4 beta, I hate beta’s, so can anyone let me know were some of these things improved in the beta?

  • nate says:

    Fireworks CS4 beta is really, really buggy-remember it’s in beta format-remember that before you decide to comp out an entire site-I’ve had it crash on me numerous times-refused to save-and stop selecting objects. The biggest pain is it experienceing an unexpected error when I try to save. The pop-up menu creation is not working. The new product is going to be great when it is working properly-but for now from personal experience I wouldn’t try to comp out an entire site with this version of the software

  • L says:

    I have two issues with Fireworks…maybe someone can help..

    Can i divide a slice?

    Can i give an image outpute a manually defined statename?

    Cheers in advance

  • nancy says:

    I cannot get the rollover function to work in my new FW cs4. Can anyone help? I have sliced and selected “Add simple rollover function” and added pop up menus to each. The popups show but the rollover does not.

  • Wellington Almeida - Brazil says:

    I always use fireworks for web designing and some image composition with Photoshop, I don’t think it changed that much when it comes to design but I loved some new features like exporting entire layouts into a PDF file. It saves loads of time when sending projects for my clients.

  • Janet Sams says:

    I’m trying to attach text to path but can’t figure out how to activate Attach to pathon text on menu bar. I am clicking pointer tool, Press and hold down shift, and clicking the text and the path. Then going to menu-text but attach to path is now highlighted to be selected. What am I missing? Please help!

  • Raine Ellise says:

    I realise this question will made me look like an idiot but I would like to make the heading on my home page move in and out of focus, changing alternately between two sets of words, any ideas? Many thanks

  • Laura Kyro says:

    Not sure if anyone is monitoring these, but I’m grasping at straws here.
    I created a site with Fireworks CS2 on a Mac, using rollovers and pop-up menus. Got it to work, no problem
    Last week I installed CS4 suite, with new Fireworks, and suddenly my old sites, upgraded to FW4, no longer show rollovers or the pop-up menus in either preview or when pushed to the server.
    What was done when the CS4 suite was installed that made my rollovers and pop-ups disappear!?! Does anyone know?

  • Blessed Sakwe says:

    This seem to be a nice tutorial but since I am still very green in this design thingy, everything looks like gibberish to me. I have a simple question though, in fireworks 2004 MX I was able to create a bitmap, marquee a section, copy or cut that section and paste in a new window as a separate bitmap but I am not able to do that here with fireworks CS4. I used that handily to prepare images for my rounded conner divs. Can someone please let me know how that is done with fireworks CS4? Thanks in advance.

  • Duncan says:

    All very exiting just a shame Adobe messed up Fireworks CS4. It’s crashed on me over 8 times today… I thought I left this sort of unstable software with Windows 98 and MacOS8… my advice don’t DOWNgrade (sic) to this from CS3 – you’ll regret it – wait for Adobe to sort it’s house out or at least offer some substantial Bug fixes… yes I’ve updated to the latest version and all SP3 fixes etc.

  • scottb says:

    I’ve used FW since several versions back… the latest version (no longer beta) CS4 is pretty painful to use… creating pop-up menus is so slow. Would be nice if there was a text editor for the behind code. To do a pop-up, the only way I can get it to work is to do one or two things, and click done. If I try to do more than 2 processes (especially related to link creation) it doens’t crash, but the changes don’t ‘take’ and I’ve got to do them over and over.

  • This is an awesome post. I didn’t have time to work along in Fireworks, but I did read through everything and I certainly can’t wait to try it out. I really can’t believe I’ve never used it. I’m gonna have to leave this post sitting in my Firefox browser until I get some time on the weekend 😉

  • It seem to be a nice tutorial we get more knowledge. Thanks