Chapter 11: Improving Production Workflow

Chapter 11: Improving Production Workflow
Adobe Fireworks CS4
100 Essential Techniques
Jim Babbage
00_FW_fm.indd 1
9/16/08 11:57:53 AM
Creating a Master
You can only have one
­Master Page per file, and
you can easily set any page
in your design as the Master
Page simply by choosing the
Pages Options button or by
right-clicking on a specific
page and choosing Set as
Master Page.
Sharing Layers
If you have a multipage
design, sharing a layer (or
layers) across pages can be
a real time-saver. Unlike a
Master Page, you can specify
which pages get to share
the layer. The location and
­visibility of a shared layer
is maintained across all the
pages it is applied to.
Using a shared layer makes
it easy to apply changes to
select pages at once. Once
you edit the contents of a
shared layer on any page,
those changes are reflected
on all the shared layer pages.
C HAPTER E l e v e n 11_FW_163_174.indd 170
Adding Structure to
Your Documents
Fireworks calls the individual designs contained in a PNG file Pages and
organizes them in the Pages panel. Pages can have different resolutions,
canvas color, dimensions, layers, and Web layers. Using Pages is a great
way to keep track of the design process. For example, rather than having multiple documents to represent various concepts or designs for a
specific client, you can keep everything centralized with one Fireworks
PNG file. Each design can be put on a distinct Page. You create a new
empty Page by clicking the New Page icon in the Pages panel. You can
then ­create, import, or paste objects into the new Page.
To maintain design consistency, consider dedicating one Page to
­specific client elements, such as color swatches and logos. This makes
them easy to find.
Pages are also indispensable when it comes to creating interactive
PDFs or HTML click-throughs, because each Page can represent a different Web page or PDF page.
Once you have established elements that won’t change location from
page to page, it’s time to consider a Master Page. The Master Page is most
useful for elements that have a common size and position in all pages.
A header graphic and top navigation are good candidates for use in a
Master Page because they will naturally stay at the top of the page in all
cases. Elements such as a footer may not work on a Master Page, because
your mock-up page lengths may vary. Much like shared layers, using a
Master Page keeps your workflow simple and makes it easy to update
common objects.
Multiple objects and sublayers can be placed in a single layer. You add
layers and sublayers using the icons at the bottom of the Layers panel.
You can change the order of layers or move a sublayer out of a main layer
by dragging the layer within the Layers panel.
Keep related objects within the same main layer. Everyone knows
how important it is to set up a navigational—and structural—hierarchy
within a Web site. Well, complex designs can benefit from this manner of
thinking as well.
Locking layers, sublayers, or objects can be useful as well to avoid inadvertently editing or moving an object. Click the lock icon to lock or unlock
layers or objects.
You can use the Layers panel to control the visibility of objects and layers on the canvas. This can help you see how your project is progressing,
Improving Production Workflow
9/16/08 12:41:40 PM
simplify the layout, or see how certain elements interact with others. This
feature is cascading in that hiding a layer hides everything in that layer,
whether it was visible or not. When an object or layer is hidden in the
­Layers panel, it does not appear on the canvas, so it cannot be inadvertently changed or selected.
When to Use Sublayers
There are several reasons to use sublayers in your designs. They can help
­organize and simplify the Layers panel. With objects placed in sublayers rather
than just sitting in a single layer, you can compress the layer stack and still
­recognize the contents by the sublayer name. Naming sublayers is important so
collapsed layers and sublayers remain identifiable.
You can group layers that have related content. For example, you might have a
main layer arrangement that mimics a Web page design. There could be header,
content, and footer layers. Within the content layer, there could be a sidebar
sublayer for navigation or teaser photos. Or you may have three ­sublayers that
represent a three-column design.
In addition, using sublayers can make your designs more compatible
with ­Photoshop, because Photoshop works with hierarchical layers as an
­organizational mechanism.
Seamless Integration
with Photoshop
Photoshop and Fireworks
­layers and layer groups
remain intact in PSD ­format.
To maintain this layer
­structure in Photoshop, a file
must be saved as a PSD.
Power Dragging
If you want to lock or hide
multiple layers ­simultaneously,
click and drag down the lock
or eye column within the
­Layers panel or use the Layer
Options panel.
Single Layer Editing
Single Layer Editing
­(available from the ­Layers
panel Options menu)
­protects objects on all
but the active layer from
unwanted ­selection or
changes. By default, this
feature is turned off in
­Fireworks. The result is that
on the canvas you can click
on any object and select it
regardless of the currently
active layer. Enabling this
feature means that you must
choose the layer you want to
work on by selecting it in the
Layers panel.
#79: Adding Structure to Your Documents
11_FW_163_174.indd 171
9/16/08 12:41:41 PM
Site Prototyping—
The Basics
Using the workflow techniques discussed in this chapter, let’s create a
simple Web site prototype.
1. Create a new document. A typical starting size for a Web page design
is about 760 pixels wide by 420 pixels high. This takes into account
how a fixed width page design will fit within a browser viewport
with minimal horizontal scrolling when the viewer’s monitor is set to
800 × 600 resolution.
2. Set a canvas color for the design.
3. Create a new layer and call it common.
4. To keep things simple, draw a rounded rectangle that is 740 pixels wide
by 100 pixels high. Use Smart Guides to position the shape near the
top and centered side to side. Name this object header (Figure 80a).
Figure 80a Even when creating simple mock-ups, naming objects is important.
5. Locate the Pages panel and right-click on this page. Select Set as
­Master Page. Rename the Master Page to Main Design.
6. Click the New Page icon in the Pages panel. The new page is created
with all the features of the Master Page. Name this page template.
7. Create three new layers on this page. Name them two column, three
column, and footer. Add two rectangles to the two column layer,
three to the three column layer, and a similar rounded rectangle that
is 740 × 30 pixels to the lower part of the footer layer. You may want
to hide the layers as you build your columns, so they are easier to see.
C HAPTER E l e v e n 11_FW_163_174.indd 172
Improving Production Workflow
9/16/08 12:41:41 PM
Name each rectangle appropriately (column 1, column 2, etc.). The
Layers panel should resemble Figure 80b.
Figure 80b Multiple layers set up in the
newly created “template” page. Note that
the objects from the Master Page are visible
but locked.
8. Create two more pages in the same way you created the first new
page. Notice that only the elements from the Master Page are present
in the new pages. Name the pages index and about. Yes, not terribly
original, but work with me here!
9. Go back to the template page and select the two column layer. Choose
Share Layer to Pages from the Layers panel Options menu. When
the dialog appears, select the index page and click the Add button
­(Figure 80c). Click OK. Select the three column layer and choose Share
Layer to Pages again. This time select the about page, click Add, and
then click OK. Finally, select the footer layer and share this layer to both
#80: Site Prototyping—The Basics
11_FW_163_174.indd 173
9/16/08 12:41:41 PM
Figure 80c You have complete control over which pages you
share to any given layer.
Now for the test: Select the index page from the Pages panel. You
should see a two-column design. Select the about page, and the three
column design should display.
In a few short minutes, you have created a simple mock-up design that
utilizes Pages, shared layers, and a Master Page. Chapter 12 takes these
basic concepts even further.
C HAPTER E l e v e n 11_FW_163_174.indd 174
Improving Production Workflow
9/16/08 12:41:42 PM
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF