Creating a Web Header in PhotoShop
About
In this tutorial we will see how to create a web header in a few simple steps.
Opening the image
First step is to open a new image and create a new layer. Select the 'Rectangular Marqee Tool' and make a 'box' selection. You should now see the "marching ants" on a white background.
Filling the image
Now select the gradient tool, and choose the black/white gradient from the list. Take the arrow and drag it up or down across the box you just created, to fill it with the gradient . The result should look like the picture shown below, a half black / half white box.
Now doubleclick on the layer, and select "strokes" in the window that appears. on the other side of the window,
you can adjust the settings of this effect.
- For the size, choose 2px
- For the position: outside
- For the blend mode: normal
- For the opacity: 100%
- For the fill type: gradient
- For the gradient: Doubleclick the gradient bar, you will see a new window appear. Set the white slider (bottom) to the middle (50%). You can set the black color to anything you want.
- For the reverse option: no
- For the Style: Shape Burst, and align with Layer
- For the angle: 90°
- And for the scale: 100%
Create a new layer, and select the rectangle tool. Using the color white, draw a small narrow box on top of
the earlier created box, filling the whole length of it.
Go to the layers dialogue box, and select "soft light" as the blending mode.
Create a new layer, and select the type tool (indicated by a big 'T'). Write the words that you want to show on the menu bar. Try to make keep equal spaces between the words. You can use any font, size and color as you like here.
Create another new layer and choose the rectangle tool again.
Enlarge your view so you can make an 1px thick line between the 1st word and the 2nd.
Fill in the line with the same color you used for the stroke (the 2nd color, not white).
Now repeat for the space between the following words.
Now press the layer twice to get the layer style window, and select 'drop shadow'.
Set the blend mode to 'normal' and the opacity to 100%. Set distance to 2px, and both spread and size to 0.
Finishing the image
Now your menu is finished. You can use the move tool to adjust the placement of the different objects, or you can use 'Image'> 'Adjustments'> 'Hue/Saturation' to change the colors a bit. Also the font can be varied to your taste.
To create a full working menu from this. You can convert it into an imagemap using Dreamweaver or one of the various free tools that can do this.
To find out more about this topic, start your search here: