Photoshop  Home Photoshop Web Layout Tech Header
rss

Tech Header

Author: Crunked-Designs.com More by this author


1. Create a new document. Make the width really wide. I used around 700px.

2. For those of you who havent read the tech button and tech content box tutorials please do so. You need them to get the styles for the layers and learn the basics in how to make the tech shapes using the Polygonal Lasso Tool.

3.Ok read the other tutorials, now your set. Start off in the top left and work your way down. Make shapes like below:

image 1

image 2

Make the second bigger shape below the other layer. Add the layer style from the tech and tech content box tutorials to get something like this:

image 3

4. Make another layer thats behind all the other current layers right now. Use the rectangular marque tool and make a thin rectangle like below, fill it in with your color of choice. Notice how I am switching up the greyish blue colors. This is better then using just one color through the layout. (Click on image for a larger view)

image 4

Apply the layer style to it aswell (Click on image for a larger view):

image 5

5. Moving on now to. (Click on image for a larger view)

image 6

Make another layer and use the rectangular marque tool again and fill it in with your choice of color. Click the image to see the fullshot of it, use the Lasso tool to add some angles and take chunks out of it. Apply the layer style to it now.

6.Now onto the making of the buttons. This is pretty basic if you followed the other tutorials. Make 2 square shapes with the rectangular marque tool and use the polygonal tool to make them look like this (Click on image for a larger view):

image 7

Apply the layer styles to each of the button layers. Light layer must be above the dark layer. Now move them to their spot below:

image 8

Make a new layer thats behind those 2 layers. Fill it in with orange or your own color. Apply the same style to this layer:

image 9

Pretty cool huh. Lets keep going, almost there!

7. Keep duplicating the button layers and put them along side eachother like below (Click on image for a larger view):

image 10

8. Make a new layer just above the background layer and use the rectangular marque tool to make a dark box like below (Click on image for a larger view):

image 11

I also changed the color of the background now. You can do so also. Apply the layer style now to the dark layer (soon to be header graphic):

Click to enlarge
Click to enlarge

9. Practically all I can teach you how to do it. Now use your skills to create the header graphic and other techish things. I used to small graphics to spice up the nav area a bit, nothing big (Click on image for a larger view):

image 13

Keep adding stuff, text for the buttons, your site name, logo, header graphic and more tech shapes:

Tech Header Tutorial: Final Result (Click to enlarge)
Click to enlarge


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Tech Header"