Publishing System Settings Logout Login Register
Making a complete website header and exporting it in fireworks
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on July 23rd, 2005
26074 views
Adobe Fireworks
Hi,

This tutorial will explain how to design a complete web template that you can use with your favorite web page editor software (ex.: Dreamweaver).

Most of new Fireworks users can only makes basic shapes design but i'll show you that you can make much more because this software as many capabilities. Note that almost any plugins made for Photoshop can be used within Fireworks.

So, let's start with the planning part. You normally need a small idea of what you want as a final product before starting to design. Important points to know are the title, menus and content parts (ex.: Main textbox, shoutbox, ad space, etc). Once you know all the required informations, you can start with the design. Because of the occasion, we'll make a Pixel2Life style design :) .

Always start with the header. The header is the most important part in the design view. Guests are first looking at it and it's really important to have something that looks nice but that is well representing what you are trying to show. From this point, i'll go with steps to it's easier to follow.

1) Open Macromedia Fireworks MX 2004. (Note that some features i'm using might not be available in the MX only version)

2) Make a new document. Set the size to 1000px by 1100px. (This is the standard resolution which is 1024x768)

Fig. 1.1


3) Click OK, you now get a blank document to start with.

4) We'll first put a top navbar for "login links". Take the Rectangle tool.

You can choose the rectangle tool by click and hold your mouse on the button to get a list of available shape formats.

Fig. 1.2


5) Draw a shape that takes all the width of the document and about 1 cm of height. Then choose a gradient color style so it's not only a simple uniform color.

Select the shape, in the properties menu, click the "Solid" menu then choose Gradient > Linear. You can now click the color square to change the colors to blue gradient.

Fig. 1.3


5) It's now time to make the base style of the header which will looks like wave. In order to do this, take the circle tool (in the Vector > Shapes menu). And draw a big circle that is 3/2 bigger than the document width.

6) Now, take the sub-selection arrow (the white arrow button in the left menu) and click the bottom coordinate point of the circle. You'll now be able to deform the circle to makes it looks like waves. You can also move the direction lines to make it looks different.

Fig. 1.4


7) You can copy that shape and place it below the current one, to make a better effect, put a brighter color for that background shape. You can also deform it on the edge to put a cool effect.

Fig. 1.5


A nice feature in Fireworks are Masks. Masks are used to hide or show different part of a shape without having to deform or cut anything.

8) Put a big circle on the right. Now it looks weird but we'll hide some part of it to make it looks nice.

Fig. 1.6


The next steps are more difficult so i'll do my best to explain in details.

9) Copy the top wave shape and put it completly on top (right-click > Arrange > Bring to front), so it covers to circle. Now copy the big circle shape and press CTRL + Up Arrow to move it to the front of the original circle. Now put both copied shapes to Solid Fill and the put the wave shape to White and the circle to Black. As you can see now, White means Show and Black means Hide. It should looks like this:

Fig. 1.7


10) Now group the two black and white shapes (CTRL + G). Now select the Group and the original circle (You can select them in the object list on right, hold CTRL to select both). Now select Group As Mask in Modify > Mask menu (on top). There's the nice final product of the mask!

I reduced the transparency and made a copy of that shape to move it to the left to make a better effect.

Fig. 1.8


11) You can now add your own logo or title. Adding more shapes will also make it looks even better.

Fig. 1.9


11) It's now time to add menus that users will be able to click in the HTML of the website. You can also add HTML objects to see what it will looks like (search menu, login text, etc).

I added the menus and i placed a background (you can use your own wallpapers. To give the right color to the wallpaper, click the + button in the effects box, choose Adjust Color > Hue/Saturation. Check the Colorize box so the color is uniform everywhere. The settings I used are 203, 66, 0 which gives a aqua blue tint.

Fig. 1.10


We are now at the export part. We need to slice the template before exporting it or it won't be optimized for web. You always need to think to make your webpage so it's fast to load and compatible with most browser. For exemple, exporting in bmp would takes about an 20 mins to load your website which is not what we want.

Fireworks has a nice and complete slice tool.

Fig. 1.11


Now you can slice your template in small part. Remember that too large parts will takes longer to load and browser can acts like a unique image with the save menu which is not what we want. Parts must be small and group as less colors as possible. If you have a part with the same color, it's a good place to make a slice part.

A little theory for JPEG :) : This format is a compressed image designed for web. The great features of this format is it's quality and small size. It also regroup part with the same colors in the picture which makes it faster to load since you don't need to attribute a single color to each pixel, but to a bigger part. Remember to slice also the menus so we can attribute a link to them.

Final Example of Slicing Part:

(I have set the buttons in red so it's easier to see)

Fig. 1.12 - Resized to fit forums width


It's now time to export your work. You don't need to slice the bottom part of the document since we won't use it in this exemple.

Open the Optimize panel (in the right panel, click the little arrow if that menu isn't opened). Then select JPEG in the second-left drop-down menu. Then set the quality to 90%.

Fig. 1.13


You are now ready to export. Select File > Export

Use these settings:

Fig. 1.14


Then click the Options button. In the "Document Specific" tab, use these settings and click Default so you don't need to set them each time. Click OK.

Fig. 1.15


You can now export your document!
Done!
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
NGPixel

Lead Programmer at Pixel2Life

My tutorials are mostly about PHP, MySQL, XHTML, CSS and Fireworks.
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top