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

Extreme template

Browse Pages: << < 1  2  3  4  > >>

Part 2: The Neck

Covers the making of the navigation bar and the banner.

1. Lets start by making a new layer and a border line to limit the size of our navigation bar and banner, so using your rectangular marquee tool (m) use the same procedures done in the previous section where we make horizontal border lines, like so:

Click to enlarge
Click to enlarge

2. Now we will work inside the box, so make a new layer and using your rectangular marquee tool (m) make a selection and fill it with a2ca00, in the following screen shot ill show you the sizing and where to put it:

Click to enlarge
Click to enlarge

3. Next add a banner I didn't do much to mine:

Click to enlarge
Click to enlarge

4. Now we will work on the Navigation Bar! So make a new layer, and add in text representing your buttons:

Click to enlarge
Click to enlarge

5. Now, as you can see I haven't done something very graphical this time like in my previous template tutorials as I tried to keep it as simple as possible! So I added small 1 px lines under my buttons which you can make easily with the Single Row Marquee Tool (m) and then just fill them with #535353. Now for the little box-in-box graphic, here's how I did it:

a) Make a new layer and get your rectangular marquee tool (m). Before we even start, you may also want to zoom in to about 500%.

b) Next make a small rectangle that is 7 px in height and 9 px in width, this is just the selection, do NOT fill it with anything!

c) Once you have your selection on, give the selection a stroke with the following settings:

Click to enlarge
Click to enlarge

d) Now make a new layer and using the rectangular marquee tool (m) make a smaller rectangle selection inside the previous rectangle with 3 px in height and 5 px in width. So it should look similar to this, after you had gave it a stroke with the same settings as the previous rectangle:

Click to enlarge
Click to enlarge

e) Now just merge the 2 layers and lower its opacity to 40% and then align it with the buttons!



Author's URL: Akpro.net
Browse Pages: << < 1  2  3  4  > >>
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Extreme template"

Captcha