15 October 2008
This tutorial shows you the process of creating a website application in Adobe Fireworks CS4—from sketching the original page design to developing wireframes, to creating the final design. All the essential tools and instructions will be covered in this article to help you begin creating websites and designs within Fireworks CS4 right away. If you are already familiar with Fireworks, you'll get a tour of some new features included in Fireworks CS4 as you follow along.
You will be designing the web page for a fictitious company called Ignition Carshare. This company offers membership to a car sharing service—allowing members to reserve and use vehicles for a couple of hours or as long as multiple days. The website requirements include presenting the car share services available to potential customers and providing existing members with an interface to reserve vehicles and manage their accounts.
Before you start working with Fireworks, it's a good idea to become familiar with the interface. A good way to do this is to customize the interface and make it your own.
As you continue to use Fireworks, it is likely you'll adapt the interface to suit your own unique workflow needs and personalize it further, but here are some tips to get you started:
Panels are an essential element of the Fireworks design workflow. Familiarizing yourself with all of the available panels will allow you to work more efficiently. Let's begin in the iconic mode with only the panel names displayed.
From the drop-down menu in the dark gray bar in the upper right corner of the screen, select Iconic Mode with Panel Names (see Figure 2).
This option displays all of the standard panels so that you can see them and select them when needed. Depending on the type of designs you create, you may find that you use these panels frequently:
Fireworks CS4 gives you a great deal of control over how the panels are arranged on your interface. Later in this tutorial we'll discuss some other recommended strategies for organizing your workspace.
When the rulers are displayed, you can drag out guides on to your document. Guides are an excellent design aid when working in Fireworks, so it is a good idea to show the rulers as you are working. It's important to note that rulers may be shown only when a document is open in Fireworks.
Every design starts out as an idea. Sometimes that idea is sketched out on paper; other times you've only envisioned it in your mind. In either case, it is a good idea first to solidify your thoughts in a wireframe format before you begin the design phase. A wireframe gives you the flexibility to make changes without worrying about design details. It also provides an opportunity to get approval from your client on the design direction early in the process.
In this section we'll take a rough sketch of an idea and turn it into a simple but flexible wireframe. At the same time, we'll use several new features available in Fireworks CS4 that increase productivity and reduce your production time.
If you haven't already, be sure to download the sample files at the start of this tutorial.
Now import the sketch:
Alternately, you can simply drag and drop the file from your file system onto the Fireworks canvas (see Figure 3).
To quickly create an accurate layout use guides and tooltips:
Tip: Press Shift as you drag out a guide (or anytime after guides are placed on the canvas) to see the distance between the current guide, all other guides, and the edge of the canvas.
Creating the wireframe involves drawing some basic rectangles and text. The full design will be added later, after the overall layout is more developed.
Make sure the rectangle is perfectly centered horizontally. To do this, open the Align panel (Window > Align). Select the "To Canvas" icon and choose the option "Align horizontal center" (see Figure 5).
Tip: When you are finished typing in a text box, press Control-Enter (Windows) or Command-Enter (Mac) to quickly exit type editing mode.
With the sketch layer turned off, your image should look like Figure 10.
Now that you have created the very basic wireframe of the site layout, the next step is to create a few pages showing various content. Fireworks CS4 allows you to create as many pages as needed, with shared and unique items on each page.
Now that you've added the overall wireframe structure and pages, it's time to finish off the content on each page. This web app consists of a series of familiar interactive controls, such as scrollbars, drop-down menus, and text input fields. We can use the included Common Library assets to mock these up quickly.
You can repeat this process to add the other Common Library UI assets. In the sample files folder, open the file named Ignition_Carshare_Source.png to view the other wireframe pages.
Now that you have created the basic wireframe of the application flow and structure, it is useful to export the entire document as a multiple page document complete with interaction to send to the client for review.
Tip: Alternately, you can select the three rectangles that comprise the buttons, right-click, and choose "Insert Hotspot" and then choose "Multiple." This will add a hotspot around each of the selected objects.
Since the hotspots are located on the Master Page, every page will be linked to each other when the interactive PDF is exported.
Now you can view the PDF, click through the pages, and make comments as needed using all the tools available in Adobe Acrobat. An interactive PDF is ideal for facilitating the client review process because the client can click through the flow of the site. This allows them to experience the presentation of pages as site visitors will experience them in the final product.
Now that you've created the wireframe and defined the application flow and layout, it's time to add an attractive skin onto the design. This is usually the most involved part of creating a layout, but Fireworks CS4 has many useful features to speed up the creative process while maintaining the ability to edit the document to make future changes.
If you created the wireframe in the previous section of this tutorial, you've already experienced how guides, smart guides, and tooltips help you precisely line up the elements on the page. You can continue to benefit from using guides, smart guides, and tooltips as you follow along with this section, but these features will not be called out directly.
At this stage, we recommended that you save a copy of your complete wireframe as a backup. This way you can work with the original wireframe file directly to turn it into a complete design, using some of the already created elements and structure.
The first task is to create a background design on the Master Page you made in the wireframe:
You have now separated the wireframe from the new layer where you will draw the design. The wireframe is helpful because it can serve as a reference, but it will not get in the way since it is on a separate, locked layer.
Tip: You can click the eyeball icon in the Layers panel to hide the wireframe layer whenever desired.
Tip: When you copy and paste an element in Fireworks CS4, the pasted item is placed in the same location where it was copied, if that location is still fully visible on the screen. If that location is not fully visible (due to zooming or panning), it will place the pasted item in the center of the screen. Using Edit > Clone will create a clone of the selected element(s) that will always be placed in the exact same spot as the original, regardless of canvas display or position.
Tip: If you move the image, both the image and the mask will move together. However, if you click the link icon in the Layers panel you can move either the image or the mask separately, allowing you to reposition one without moving the other.
Tip: With an object selected, you can press Control-Up Arrow (Windows) or Command-Up Arrow (Mac) to move the object up in the Layers panel. Control-Down Arrow (Windows) or Command-Down Arrow (Mac) will move the object down. You can also use Control-Shift-Up Arrow and Control-Shift-Down Arrow (Windows) or Command-Shift-Up Arrow and Command-Shift-Down Arrow (Mac) to move an object to the very top or bottom of the layer stack.
In any design, the more attention you give to the details, the more polished the results will appear:
At this point you have a good start, but there's a lot more that can be done to refine the pages:
Tip: Fireworks measures all font sizes in pixels, not points.
Tip: You can also use the method described earlier in this tutorial: Create one text box, Alt-Shift-drag (Windows) or Option-Shift-drag (Mac) to create a duplicate copy. Then choose Edit > Repeat Duplicate. This action creates a second copy with the same gap space between copies.
Note: If you are unsure about the spacing of your text boxes and dividers, select all of them and open the Align panel (Window > Align). Make sure Align to Canvas is turned off, and select the icon to Space evenly horizontally.
Tip: If a 1 pixel line appears blurry, choose Pencil > 1px Hard from the Stroke drop-down menu in the Properties panel.
Fireworks CS4 includes both traditional filters and "live" filters. Live Filters are effects and styles—such as shadows, glows, and blurs—which can be added to objects and edited or removed at any time later. They are called "live" because unlike traditional filters which permanently alter your objects, the filters can be modified later. Live Filters can be applied to any visible object in Fireworks, including bitmaps, vectors, and text.
At this point the background design is complete. You may remember that the main button tabs are on the Master Layer in the wireframe. In this series of steps, we'll put them on the pages in the design.
Tip: You can use the Swap Fill/Stroke Color control to quickly and simultaneously remove the fill and set the stroke color.
Tip: In addition to holding down the Shift key while dragging with the Pointer tool to lock objects to 45 degree angles of movement, you can simply use your keyboard arrow keys to "nudge" objects across short distances. If you press Shift as you press the arrow keys, the object will nudge 10 pixels at a time.
Now you have the active, and inactive graphics for the tabs. Change the text of the new tab to CHECK RATES. Then duplicate a third tab, and change its text to MORE INFO.
At this stage, the design of the interface is complete. The only remaining task is to populate the design with content.
Fireworks CS4 includes many components in the Common Library. Additionally, you can make your own components complete with editable properties.
Tip: Some edits you make to a symbol will propagate to all instances of the symbol. Other changes will be overridden by the Symbol Properties and will use the values that have been entered there.
You have almost completed the process of designing a web page in Fireworks CS4:
If you would like additional practice using the Ignition Carshare assets, navigate to the page Find Cars – locations in the Pages panel and use it as a guide. Start by creating a new page in your tutorial work document titled Find Cars – locations. Then copy the layers onto the new page to use them as the background (see Figure 16).
To find more articles and tutorials to help you get up to speed using Fireworks, please visit the Getting started section of the Fireworks Developer Center.
If you'd like to learn more about training options, check out the Fireworks training page.
For additional information on using Fireworks, please see the Fireworks Developer Center.