How to create a nice header in Fireworks

As promised in my last post, I will explain how to create/modify the header for the free EDU web template.

What you will need for this tutorial:

• Obviously, you will need Fireworks (you can download a free trial here)
• You will need an image. You can choose one from Flickr: Creative Commons. Here s the image I chose for the EDU template (visit the page):
• Finally, you will need the background image below. Right-click on the image and click “Save Image As” to save it on your computer (or get the sample Fireworks file for this tutorial, at the bottom of this post):

Note: We re going to use the Pen Tool (P) in this tutorial. I am not going to explain how to use it. That s not the purpose of this tutorial. Instead, I invite you to watch this video on YouTube.com. The author explains (in Italian) how to use the pen tool. The video is pretty self-explanatory so you don t need to understand what he says.

The Tutorial - Part I:

1. Open the background image in Fireworks. Image size is 960x213px.
2. Place two guides: one guide at 15px from the left and the other one at 15px from the right.
3. First, Select the rounded rectangle shape and draw a rectangle in your page. Don t bother with the size at the moment.
4. Open the “Auto Shape Properties” panel (in the right sidebar or in the “Window” menu) and change the values as shown below.
   
5. Place the shape at 8px from the top (use the “Properties” panel at the bottom to do that).
6. We will draw the search box at the bottom of the rectangle. Select the pen tool (P) and only draw the left side at the moment. See example below:
   
7. Now, duplicate your image (ctrl+alt+D) . Right-click on it and select Transform -> Flip Horizontal. You should get something similar to this:
   
8. Select the three shapes (Tip: hold Shift and left-click on each of the shapes to select them. See screenshot above). Go to the menu Modify -> Combine Paths -> Union. This will join all the shapes together to create the header:
   
9. We will now add a gradient to our header. Make sure your shape is selected. Select Gradient -> Linear in the “Properties” panel at the bottom.
   
10. The colors we re going to use for the header are #66C110 (for the upper left corner) and #8FF434 (bottom color):
    
11. We will draw a new gradient (see example below) with the pen tool (P). We will use same colors as previously but different direction (see the black line on the screenshot below). Duplicate it twice (ctrl+alt+D):
    
12. Hold Shift and left-click on each of the three gradients to select them all and cut (ctrl+X). Now select the header and hold ctrl+shift+V to paste the gradients into your header.
    In the “Properties” panel, add a white border (1px will be enough).
    Add new Filter. Select Shadow and Glow -> Drop Shadow. Put 0 for distance, set opacity to 80% and 2 for softness. Here s the end result:
    
    You can create a more fancy header if you wish. I want to keep it simple for this tutorial.

The Tutorial - Part II:

In the second part, we will cut out the photo with the pen tool and paste it into our header. That s maybe the most difficult part, so let s get into it.

1. Open your photo in Fireworks.
2. Select the pen tool (P) and draw a path around the outside of the kids:
   
3. Select the Pointer Tool (V) and right-click on the path. Choose “Convert path to marquee” and then feather in the list. Set it to 4 and hit OK:
   
4. Right-click on the image and select “New Bitmap Via Copy”. It will create a new image in your “Layers” panel:
   
   TIP: you can use the eraser tool (E) to finalize the photo with “edge” set to 40 and “transparency” set to 20%.
5. Copy the photo (ctrl+C) and go back to your header. Paste it there (ctrl+V) and resize it (ctrl+T) to fit into your header:
   
6. Cut the photo (ctrl+X) and hold ctrl+shift+V to paste the photo into the header.
7. Last, create a search field and button and you will be done.
   
   TIP: you can easily ungroup the photo from your header by right-clicking on it and choose “Ungroup” (ctrl+shift+G).

Slice the image:

1. To slice your image, select the slice tool (k). Make a rectangle the size of your header.
2. Go to the “Optimize” panel and choose JPEG: Better Quality in the first list. Right-click on your slice and click Export Selected Slice. Name your image “header.jpg” and save it in your folder.
   
   (Since, in our case, the image is exactly the size of our file, there wouldn t be no point to use the slice tool. Instead, we could just go to File -> Image Preview and export our image. I just show how to slice an image for the purposes of this tutorial).
3. Done!

Other examples:

Here s what you could do with other images and some imagination:

And if you wish to get a nice effect, you could fill the header with a large photo:

Download:

You can download the sample Fireworks file for this tutorial:

Download(1.5 MiB, 4,366 hits)

The Author

Want to become a guest author on this blog?