Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Website Header

Website Header


1. Open Photoshop and create a new image. I am using 800x120.

2. Fill the background with #222228

3. Then go to Filter >> Noise >> Add noise

image 1

4. Go to Filter >> Blur >> Gaussian Blur and set to 1px

image 2

5. Select the rectangular marquee tool and create a rectangle covering the whole width of the canvas and fill this with white on a new layer.

6. Change the opacity of the layer to 30%.

7. Select the text tool and type your text in, make it the height of the rectangle you just created. Place it over the rectangle.

8. Select the rectangular marquee tool and delete the part of the rectangle that the text covers.

image 3

9. Select the rectangle marquee tool and make a small rectangle on the end of the bar, like this:

image 4

With the selection still active Ctrl + Alt + Click on the first rectangle you made to select the end.

image 5

10. On a new layer fill this with #336699. Change the opacity to 50%.

11. Duplicate the layer and move it to the other end of the white rectangle.

image 6

12. Add a moto and/or logo and you are done.

Website Header Tutorial: Final Result



Author's URL: Skeletorscorpse
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Website Header"

Only registered users can write comment

No comments yet...