A Word About Slicing and Exporting Pages

A Word About Slicing and Exporting Pages
Both Macromedia Fireworks and Adobe Photoshop provide image
slicing and exporting functions. However, I prefer the
slicing and exporting tools found in Fireworks better than
in Photoshop. On the other hand, I like the typographic
effects, image editing features, and overall design control
I get with Photoshop. Navigation and button bar in
Macromedia Fireworks (You can make navigation bars and
buttons in Macromedia Fireworks quickly and easily. Buttons
can be sliced and exported to make navigation bars for use
in Macromedia Dreamweaver.) As well, in many cases, I have
legacy documents that are in Photoshop file format. My
point here is that I use both applications when I design
Web site screens. You might favor one over the other. But
for slicing, exporting, and integration with Dreamweaver,
Fireworks wins hands down in my opinion. Not to worry
though, Fireworks opens native Photoshop files with layers
and the text is completely editable.

As long as versions are up to date, the integration is
seamless. You could design all your pages and navigation
graphics in Photoshop and then open them in Fireworks to
optimize, slice, and export. If you create pages in
Photoshop, you can save the files as PSD format. Then, you
can open the PSD file directly in Fireworks. You can tweak
the page and slice and export. Lastly, you can save the
file as PNG so that it is easily edited and re-exported in
the future. Macromedia was purchased by Adobe in April
2005, but Fireworks and Photoshop still remain individual
products.

In the future, it will be interesting to see how Adobe
integrates the applications to create a Web graphics tool
that will enable even the newest Web portfolio designer to
create Web screens and output them to Web pages quickly and
easily. The process is good now, however there always be
improvements made to digital workflows as technol- ogy
progresses. We have overviewed various pieces in the Web
production process up to this point.

We covered several approaches to creating Web pages. Web
screens and using Dreamweaver for creating Web pages from
scratch are main points that we discussed. Also, we covered
various graphic file formats used for Web images and we
establish which formats to use for various types of
artwork. We also established basic designs for our Web
portfolio pages and developed storyboards to guide us
through the development process. In the next sections we
take a closer look at the tools and explore some of the
most important techniques used to create Web portfolio
pages.

Don't expect to learn the applications and each technique
immediately after reading the tutorials. You should become
familiar with techniques by reading about them and then
attempting to execute them repeatedly on your own while
tackling a Web portfolio design project. As I mentioned
previously, you will develop your own personal workflow and
technical approach as your practice and experi- ence
preparing assets and creating Web pages expands. With that
said, let&rs quo;s begin by using Macromedia Fireworks to
design, slice, and export a Web page.

Make a Web page layout in Macromedia Fireworks MX 2004:

1.Open Macromedia Fireworks and immediately go to
Window>Properties and Window>Tools to show the tool bar and
property inspector. Both palettes may be open on start up.

2.Go to File> New and create a document at the size you
want your Web pages to be: use 800 x 600.

3.Set the resolution of the document to 72 dpi and choose a
Web safe background color from the palette.

4.Start by creating a page header and navigation bar. If
you are using HTML text-based navigation, you can skip this
section. Your navigation will not be graphical. That's fine
and very appropriate for a Web portfolio. But if you want
get a bit fancier, the following are a few steps on how to
create page headers and graphical navigation buttons. To
make a page header, create a box that spans the top of your
Web page (800 wide by 75 high). Set the header box to the
desired color and then add text to the bar or open an image
and drag it into the Web page document directly from its
window (see next). Scale the graphic accord- ingly in the
Web page document and then place it on the navigation bar.

The header text should state the page name, for example bio
or resume would be typical headers (categories). To make
the navigation buttons, create boxes or circles (around 50
x 50 pixels) and align them vertically or horizontally.
Then overlay the corre- sponding category text. Be sure to
align the text and the buttons correctly so that the visual
appeal is consistent. If you need help with alignment, you
can go to the menu item View> Grid and View>Guides - Drag
guides from the rulers on to the page. Align elements using
the guides. Leave the rest of the page blank. We will add
layers to this content area later on when we open the newly
sliced Web pages in Dreamweaver.

5.If you want to push the pages further in Fireworks, you
can open the Web graphics you created into your screen
designs by dragging and dropping from window to window,
copying and pasting, and by importing. The easiest way is
to drag and drop. You can open images in Macromedia
Fireworks and drag from one window to the next. Each image
comes over on to its own layer. Use the scale tool or
simply click CRTL+T and you will get a free transformation
bounding box around the graphic. Hold the corner node and
shift key and scale the graphic; hit return to complete the
operation. You can design pages with g raphics completely
using Fire- works or place the individual images on the Web
pages later using Dreamweaver. We will show both techniques
in this web design tutorial, the choice of design methods
will be yours.

----------------------------------------------------
For more info visit http://www.webdesignoffice.us