How to design header graphics for your website in PhotoShop

PhotoShop CS3 Designer series

How to design header graphics for your website in PhotoShop

This tutorial will show you how to design a header graphic for your website using Photoshop

This tutorial assumes you already have Photoshop open

First, we will need to create a new document for the web

1) Go to File…

2) …and select New

3) Select Web from the presets

4) Set the size to 1024 x 768

5) Click OK

6) For this tutorial, we will need the Layers palette open

To begin, we will create a simple rectangle

7) Right click and select the Rectangle Tool

8) Click on the foreground color to open the Color Picker

9) Select the background color for the header

10) Click OK

11) Click and drag to create a rectangle

Now, we’ll add a gradient and some embossing

12) Right click the layer and select Blending Options

13) Select Gradient Overlay

14) Click on the gradient to change the colors

We’ll need to edit the colors of the stops

15) Click the first stop

16) Click on the color

17) Use the eyedropper to select the foreground color

18) Click OK

19) Select the second stop

20) Click the color

21) Again, select the foreground color

22) Click OK

To add variation to the gradient, we’ll need to add a third stop in the middle

23) Click underneath the gradient to create a stop

24) Click the color

25) Choose a shade of blue that is slightly lighter than the current one

26) Click OK

27) Click OK

28) Select Bevel and Emboss

We will leave the default settings

29) Click OK

Now, we’ll add the company name to the header

30) Select the Type Tool

31) Swap the colors so white becomes the foreground color

32) Type the company name

33) Click and drag to re-position the text

Depending on the length of the name, it may need to be put on 2 lines

To make the text stand out a bit more, we’ll add some embossing and a drop shadow

34) Right click the layer and open the Blending Options

35) Select Drop Shadow

We’ll leave the default settings

36) Select Bevel and Emboss

We’ll leave these default settings as well

37) Click OK

Now that the text is easier to see, we’ll position it in the header

38) Select the Move Tool

39) Click and drag to position the text

Now that the company name is in place, we’ll add a slogan

40) Select the Type Tool

41) Type the slogan

42) Move the layer into place

The text is a little big and draws away from the name, so we’ll shrink it a bit

43) Click and drag over the text to highlight it

44) Choose a smaller size for the text

Next, we’ll add a simple button under the slogan

45) Right click and select the Rounded Rectangle Tool

46) Change the radius to 5 px

47) Click the color box

48) Choose a color for the button

49) Click OK

50) Click and drag to create a small rectangle

We’ll add some embossing to the button

51) Right click and open Blending Options

52) Select Bevel and Emboss

We will leave the defaults

53) Click OK

Now, we’ll add some text to the button

54) Select the Type Tool

55) Swap the colors so blue is in front

56) Type some text for the button

57) Click and drag the text to position it over the button

The text is a little large, so we’ll resize it

58) Highlight the text and choose a new size

The last step for the button is to center the text

59) Select the Move Tool

The best way to ensure the 2 layers are perfectly centered is to use the Align Centers buttons

60) Hold down the Control key and select both layers

61) Click Align Vertical Centers

62) Click Align Horizontal Centers

The last thing we’ll do is add the company logo to the header

63) Open the document from the File menu

64) While holding down the ALT key, click and drag the layer onto the header

65) Click and drag the logo into place

That’s it! We now have a nice header for our website

This is the end of the tutorial. You now know how to design a header for your website using Photoshop

Leave a Reply