Miraz Tutorials

This tutorial will teach you how to make a Sexy black Web 2.0 header +Menu +Title as a step by step guide using either Photoshop or fireworks. Fireworks has been the main use in this tutorial however the steps can quite easily be replicated in Photoshop. A websites header is like the human mind you use it to pick where in a site you want to go it gets you direct to the information you’re looking for. And for any visitor that spends more than a minute on your site will get a few glances at your header whilst using it to navigate your site.

This tutorial is for people like me who want to learn more about what web 2.0 styles look like so whether you’re a veteran looking for new tips or a newbie this tutorial will have something in it for you in making sure your navigation is up to date with the latest trends and styles.

Load Fireworks/ Photoshop

The background

Create a new document with a white background at 800px width and 160px height. Then in the vector tools section in fireworks (rectangle marquee tool in Photoshop) draw out a large rectangle at 800px width and 160px height, colour this rectangle with
#000000. Then go into the opacity setting and set it to 70. This should make the large rectangle lighter in colour. I feel it’s better to do it using transparency as you can easily adjust it in case you need to set it better with any other colours within the header.

 

 

 

The top

Next draw another rectangle at the top of the larger rectangle with the dimensions 805px width, 20px high and colour fill #000000. Go down into the filters panel in fireworks and insert an

inner glow.

Settings: halo offset = 4

Colour = #999999

Opacity = 65

Softness = 4

Off set = 0

 

 

 

 

 

 

Background bottom

Now draw out a rectangle at the bottom of the larger rectangle with the following dimensions height 15px, width 800px and colour fill #000000

 

 

 

 

 

Navigation

Now get the rounded rectangle tool from the vector tools in Fireworks/Photoshop and set the rounding to 5 and draw a tab with the following dimensions 130 width, 35 height and colour fill #000000. Then in fireworks go into the property panel > filters and insert an

Inner bevel

Settings: bevel edge shape = flat

Width = 3

Contrast = 75%

Softness = 3

Angle = 120

 

 

 

 

 

 

Then just copy and paste along 4 more to the right of the first menu tab and apply the following dimensions colour fill #666666. Use the ruler to make sure the upper alignment is accurate also makes is easier to quickly move the copies into place with the mouse. Try to use a 1 pixel or 2 pixel space between each tab this can be done using the x position selection in the properties panel. All you need to do is make sure that between each end of each tab there is a 1 or 2 pixel difference. It’s a bit difficult to explain but try it out yourself you will understand.

Another thing you can do is go into the window > Align settings highlight all of the menu tabs and evenly space them out.

 

 

 

 

 

Then add the text onto the menu tabs in this tutorial the following text dimensions were used font = veranda, Size = 21.

 

 

 

 

 

The reflective title

A title is also a major part of any web 2.0 style header so I didn’t want to leave making the title out of this tutorial its quick and simple as is, all of this tutorial making your title stand out will embed the name of your site into the users mind making sure they either tell people about it or can easily return to it if they forget the web address.

Type out Miraztutorials.com (or any title you like) and set the following text dimensions font Verdana, Size 35 also go into filters > inner bevel and set the following filter dimensions

Settings

Bevel edge shape = ring

Width = 32

Contrast = 85%

Softness = 2

Angle = 131

Button preset = Raised.

 

 

 

 

 

Copy and past this and place the copy directly under the main text and press F8 and convert this to a graphic symbol naming it reflection, reason being, you cannot add a flip rotate to standard text it has to be a graphic or movieclip. Go into the menu > modify > transform > flip vertical

Adjust the size of this copy to the following width 340, height 10. Then go into filters > Gaussian blur and set it to 1.5

The order of your layers is also important and you may get mixed up along the way so just to make sure your okay I have made a list of the order your layers should be in.

Title

Tab text

1^st tab above the background bottom

Background bottom

Other 4 tabs

Background top

Main background

And the final sexy web2.0 style header with menu and reflective title should look like this.

 

 

 

 

If you liked this tutorial then click the donate button

Subscribe to Miraz Tutorials by Email

 

Similar Posts:

• Photo Viewer tutorial in Flash CS3 using Actionscript 3 Part 1
• Web 2.0 header tutorials resource list
• Photo Viewer tutorial in Flash CS3 using Actionscript 3 part 3
• Easy Electric Sphere Photoshop CS3 Tutorial
• Tutorial Applying filters using Actionscript 3 in Flash CS3