In this tutorial l will show you a how to create a header for a webpage. This technique will hopefully teach you a few tricks, as well as open your mind to some new ideas when designing your next web layout.
Lets get started.
Page 1 of 1
Start a new document that is: 770 x 150 and fill the background layer with: #A7A78B
Create a new layer. With the rectangular marquee tool, make the following selection:
Fill this selection with: #859B50
Double click this layer, and apply the following blending options: Gradient Overlay:
Next set your foreground to #DDE3D5, get out the pencil tool and change the size to 3 pixels:
and draw the following line all the way across the page:
Create a new layer, and with the rectangular marquee tool make the following selection for the navigation buttons:
Now go to "Select->modify->smooth" with a setting of: 11 pixels
Fill this selection with: #DBDAC8
Double click this layer, and apply the following blending options: Inner Glow:
Next add the text to your buttons. Heres what l used: Verdana Bold, 10 pt, #6F6A64
Next get out the pencil tool again, set it to 2 pixels, and your foreground to white (#FFFFFF)
And draw small dividers between each of your buttons:
Next set your foreground color to #511424 set the pencil tool to 1 pixel. We're going to make some small arrow icons under the buttons.
Zoom in real close by pressing the CTRL and the '+' key on your keyboard to zoom in good and close. Using the pencil tool draw this arrow one click at a time.
There's 1 dot on top, 3 dots in the second line, and 5 dots at the bottom of the arrow.
Next I applied the logo and company name in the top left corner of the header.
At this point the layout is pretty much done, just continue to refine and add some details. Here's how mine ended up looking after adding a little content, and a "techie" image.
I hope you've enjoyed this tutorial, and that you've learned some new tricks & ideas.
Related Tutorials: Alien Embryo This tutorial will explain the how the Alien Embryo render was created using pho ... Classy Header Learn how to create a simple, clean business header that will work great for nea ... Contemporary Layout In this tutorial l will explain how l created this contemporary layout for a tra ...