Design

4 of 10



Rinn

Rinn This tutorial will teach you how to create a simple website header design.

1. I started off by filling my document with #9c9c9c color. Next, I created a rounded rectangle box using the Rounded Rectangle Tool with a setting of 10px:



2. Holding down CTRL + SHIFT, I shifted the box to the right, like the image below:



3. Move the rectangle to the left so that its partly off the page:



4. Add a Layer Style to the rectangle box:









5. Now, create your header text and place it on top of your header. I used Futura font with a drop shadow with an Opacity of 29%, Distance of 2px, and Size of 3px.



6. Create a long rectangle box (without rounded borders) and have it run horizontally across the whole header:



7. Add a Layer Style to the rectangle box:





8. Create a white rectangle box similar to the one we made before. It should look something like this:



9. Add a Layer Style to the white rectangle:



10. Now its time to add the desired text for your navigation bar. I used Futura Font again on mine:



11. You can also add an image beneath the header. I used an image from Shadowness, but you can find images to use on stock sites such as sxc.hu

Jul 4th, 2007 - 4,583 views - - Comment
  • southking how did you divide 'art' 'tutorials' & 'forum' ? i tried this with the line tool but i couldn't get it straight like u did.

    Jun 30th, 2008