To create Fireworks web ready images for use in our website we will need to slice the required parts of our layout.

Create the Slices

To do this we will use the ’slice’ tool.

Makes slices for:

• Logo
• Header background (this will tile horizontally so just a small vertical slice will do)
• Menu options – Home, About Us, Services, Contact Us (this is required because the menu buttons use a special font which whill not be available on all computers and therefore should be images rather than HTML)
• Menu background (will tile horizontally)
• Submenu background (will tile vertically)
• Submenu top background (required because of the curved edges of the rectangle which cannot be created in HTML)
• Subment bottom background
• Picture
• Footer background

This is how it will look:

Click on the picture above for a larger view

Name the Slices

In the ‘Layers’ window you will notice that a new layer is created for each slice in the ‘Web Layer’. Give each slice an appropriate name.

Optimize the Slices for the Web

The images used in a website have to be optimized to load quickly yet look good. The smaller the file size of the image the quicker it will load. The commonly used image formats are .gif and .jpg. A good rule of thumb is to use .gif compression for images with flat colors and .jpg compression for images with lot’s of colors like photographs etc.

To optimize the images:

• Select the slice
• Open the ‘Optimize’ window (Window > Optimize)
• Select JPEG or GIF from the drop down menu and adjust the quality settings

• You can preview how the slice will look wit those settings by selecting it in the ‘Preview’ mode. You can also see the size of the slice at the bottom of the ‘Preview’ window.

Export the Slices

You are now ready to export the slices for use in your website. To export the slices:

• File > Export
• Select the folder you want to export the images to. Usually a folder called “images”
• Select ‘Images Only’ for the ‘Export’ option
• Select ‘Export Slices’ for the ‘Slices’ option
• Deselect ‘Selected slices only’ and ‘Include areas without slices’
• Click the ‘Save’ button
• Your sliced images will be exported

Congratulations! You have used Fireworks to create your website slices. Now that you have your website layout and images ready you can use an HTML editor like Dreamweaver to create your website page.  Visit the Dreamweaver CS4 Tutorial.

Now it’s time for more Fireworks tips.

We have created the logo and the header area along with the main menu area. We will now create the submenu area.

To do this we will use the ‘Rectangle’ tool to create a rectangle with rounded edges. We will give it a gradient from left to right (as opposed to ‘top to bottom’). Then we will put in some sample link text and bullets.

Step 1: Make the Rectangle with Rounded Edges

To do this:

• Use the ‘Rectangle’ tool to create a rectangle.
• In the ‘Properties’ window, give it a corner roundmess of 11.

Step 2: Linear Gradient from left to right

To give the rectangle a linear gradient from left to right instead of top to bottom:

• Give the rectangle a linear gradient with the colors desired.
• Click on the rectangle. You will see a black line with 2 points (one on either end).
• To change the direction of the gradient, move the black gradient line to appear from left to right. You will notice that moving the circle end will move the entire line (and therefore the gradient), while moving the square end will allow you to increase or decrease the size of the gradient and rotate the gradient direction.

Step 3: Put in the sublink text with the bullets

• Use the ‘Text’ tool to type out the sublink text.
• Select the required font, size and color from the ‘Properties’ window.
• To insert the bullets open the ‘Special Characters’ window (next to the ‘Properties’ window) and select the required bullet.

Sample Text for the Content Area

We will now put in sample content to get a better idea how our layout will look with textual content. Fireworks makes this really easy.

To insert sample text:

• Commands > Text > Lorem Ipsum
• Sample text will be inserted
• Give it the font, size and color you want in the ‘Properties’ window

To adjust the size of the text area click and drag the blue nodes at the corners and sides of the text area.

Insert an Image

To insert an image into Fireworks:

• File > Import > browse for the image file > Open
• Your cursor will change
• Click on the canvas where you would like to place the image
• The image will be placed there

You can get cheap stock photos for use in your website.

Add some more sample text and decide on the styles for the main heading as well as the subheading.

Create the Footer Area

• Create a rectangle with a linear gradient
• Put in the copyright text “© 2009 Company Name. All Rights Reserved.” Insert the copyright symbol from the ‘Special Characters’ window.

You website layout is now complete. Congratulations!

Now that you have created the logo in Fireworks designs for the website can be created.

Remember the website design we set out to create in Fireworks? Here it is again:

Let’s first create the header area. To do this create a rectange using the ‘Rectangle’ vector tool.

Since we already creates the logo you will notice that the rectangle is created over the logo hiding it from view.

To take the rectangle behind the logo:

• Open the ‘Layers’ window. You can do this from Window > Layers
• You will notice that the ‘Rectangle’ layer is right on top.
• Drag this layer to the bottom
• It will move behind the logo

You will notice that the color of the header area behind the logo is not a flat color – it is actually a gradient between 2 colors. To give this gradient effect:

• Select the rectangle
• Open the ‘Properties’ window (Window> Properties)
• Next to the ‘Fill’ color, click on the fill category drop down menu and select ‘Gradient’.
• From the ‘Gradient’ subselection options that opens up select ‘Linear’.

To choose the gradient colors:

• Click on the tiny arrow below the fill color in the ‘Properties’ window (marked with a small red circle as the bottom of the image above).
• In the panel that opens up, choose an orange color by clicking on the little marker on the left (circled in red in the picture above) and a yellow color for the little marker on the right.
• You will get a nice gradient for the header area behind the logo.

Now create another rectangle for the menu area. Give it a linear gradient from a red to an orange color.

Use the text tool to create the menu options with appropriate spaces between the options – Home, About Us, Services and Contact Us. In the ‘Properties’ window select the font, size and color you want.

Logo making with Fireworks is extremely easy since it has image editing as well as vector drawing tools. You can insert an image and edit it however it is better to use the vector drawing tools as well as the text tool to create your logo. This is so you can expand the logo to any size you might need in future.

Let’s make this logo in Fireworks:

Step 1

Using the text tool, choose a good font and type out the word “logo” . In this case I have used the font “28 days later” however you can use any font you like. You can change the font, select the font size and color in the ‘Properties’ window. If you cannot see the ‘Properties’ window you can access it from Window > Properties.

Click to enlarge the above picture

Step 2

Use the Pen tool to create the the 4 arrowheads. Fill them with the colors red and orange respectively.

To close the shape you create with the Pen tool, double click. You can then give it the color you want by first selecting the entire shape with the ‘Pointer’ tool.

Then  choose the desired ‘Fill’ color.

Use the ‘zoom’ tool to enlarge the canvas so you can clearly see and easily manipulate the vecor shape to suit your needs. Double click on the ‘zoom’ tool to get back to the actual view (100% scale).

To move an individual point (node) in the shape you create with the pen tool, select and move it with the ‘Subselection’ tool. That particular point will get a blue fill color while the other points will only have a blue stoke color.

That’s it! You’re done! Congratulation – you have made you first logo with Fireworks.

Now it is time to create our Fireworks website templates. This will form the basis for the website we design. It will also provide us with any graphics we will need for the HTML pages of our website.

This is the website layout or template that we will create with Fireworks:

Download Fireworks CS4 Template Source File

Download the Fireworks Template source file here for your reference  throughout the rest of the tutorial.

It is now time to design how your website will look. What will the layout of the pages be? If the home page looks different you will need to design it seperately.

You will need to design a logo, a menu area, maybe a submenu area, decide on which photos to use if any and how they should look (size, dimensions and special effects if any).

You might want to design bullets for your website and icons for your menu options as well.

You will also want to decide on the style of your content including headings, sub-headings, body text, links and so on.

You will want to design a footer area with some basic website copyright information and maybe even a few links as well.

Let us create a web design in Fireworks CS4.

Once you create a new document in Fireworks CS4 you will get a a blank canvas. Take a look at the tools panel. If you cannot see it, open it from:

• Window > Tools

Take some time to explore the various tools. Additional tools can be found in some cases by clicking on the tiny triangle below the tool.

The first step to creating a web design in Fireworks CS4 is to create a “New Document”.

To do this:

1. Open Fireworks CS4
2. File > New
3. In the panel that opens, specify the width, height, resolution and background color of your web design.
4. The width depends on what screen resolution you are designing for e.g. 1024×800 is the most commonly used screen resolution right now so you can design for a width of 1000 pixels and a height of 800.
5. When designing for a website specify the value 72 pixels/ inch for Resolution.

Save the document with an appropriate name like “Layout.png”. Fireworks File are in the PNG format.

This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website.

Fireworks CS4 is the best graphics editing software for the web. It is easy to use and allows you to quickly create images optimized for the web.

Some of the latest features in Fireworks CS4 is the ability to export your layout into HTML, CSS and sliced images – completely web-ready.

In this tutorial we will create a website layout and slice the images for use in a website.

You will need the Fireworks Software. Download a trial version of Fireworks.

This is the layout we will create: