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. Now we are going to start working on the navigation bar buttons and the banner. Please know that I will only be showing you how to make one button [the home button] and then you can just duplicate the layers and look back here to see how you make the rest of your buttons. So begin with a new layer, get your rectangular marquee tool (M) and change the style to 'fixed size' then insert the measurements of 118px (width) and 49px (height). This is the size of the button so make this selection 1-3px. And then fill it with #464f54.

Click to enlarge
Click to enlarge

2. Next we will create another one for a rollover button; this is only if you want a rollover button! If you wish not to have a rollover button, then you can skip this step. So duplicate the button layer and take out the blending options window. Go to Color Overlay and change the color to #5a6469. Now just make the layer invisible so that we put it back to its original state.

3. Once you've finished, now we are going to work on the bottom of the layer. So hold ctrl and click on the original button layer. This will select the whole layer. Now using your rectangular marquee tool set it as 'subtract from selection' and change the style to normal. Now deselect everything ONLY leaving about 2px at the bottom. Then make a new layer [with the selection still active] and fill it with #10c5da.

Click to enlarge
Click to enlarge

4. Next add some text; I used 'Century Gothic' at size 12px. Then I aligned it near the bottom right corner. And this concludes our steps in making the buttons, now you will have the repeat the steps for four more buttons. Do not worry; it shouldn't take long as you can just duplicate the layers.

Click to enlarge
Click to enlarge

5. Now we are going to make work on our banner [image]. Of course I will not show you how to make your banner, so make sure you have a banner before hand. So begin with a new layer and get Rounded Rectangle Tool (U). Now first, set a horizontal guideline about 1-3px under the buttons. Then using the rounded rectangle tool [make sure the color is set to #2f373b], make one starting from the top left corner of the guideline you just made and ending about 140px below it. It is preferred that you get it at 140px, but a few pixels off won't do much.

Click to enlarge
Click to enlarge

6. Next using your rectangular marquee tool, with a new layer, select [inside the rounded rectangle] leaving about 5-10px of space and then making a rectangle selection. Make sure you keep the 5-10px of space on all sides of selection. This selection will be where your banner is, so put in your banner there.

Click to enlarge
Click to enlarge

7. Next with the selection still active, you can add a 1px stroke. So right click on the selection and click 'stoke'. Make sure the settings are the same as the following.

Click to enlarge
Click to enlarge


Author's URL: Akpro.net
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: << < 1  2  3  4  > >>
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 "Extreme Template"

Only registered users can write comment

No comments yet...