Part 2: The Neck
Covers the making of the navigation bar and the ad boxes.
1. Start off by making a new layer, and make a selection using the rectangular marquee (m) under your separator lines and fill it with #838383, like so:
2. Next take, name that layer 'nav.bar' and take out the layer style window for that layer, use the following settings:
You will need to download the gradient that I'm going to use because you can't make it out, too complex for the eye, so you can download it here.
3. Now make a new layer, and make a selection around the nav.bar layer, but make sure your still on the new layer. So now, get your gradient (g) tool and just make a light White to Transparent gradient from the bottom of the selection to the top, like the following screen shot:
Make sure to lower the opacity of your gradient and set the blending mode to screen!
4. Next I'm going to add another shine to it, using the rectangular tool (m) make a small selection from the top of the nav.bar layer to about a quarter of it. After you had done so, fill your selection with white and lower the opacity to 20%.
5. Now, all you need is some text and some separators, i will leave the text part for you guys, but ill show you how to make very cool looking separators. So make new layer, you may want to zoom in too about 500% would be good. Now, using your rectangular marquee tool (m) make a one pixel selected rectangle with the height of your navigation bar, but not including the strokes! This is very important, if you do not know what i mean, look at this screen shot for an example:
6. After you've made your selection, fill it with white. Do NOT de-select! Now, make a new layer and move your selection one pixel to the right of your last selection. And fill it with #737373. Next merge both layers, ctrl+e, and then give it the following layer style options:
7. Now go to Layer > Layer Mask > Reveal All , Now using your gradient tool (g) set your foreground color to black and using a Black to Transparent gradient, start from the bottom of your separator and pull your gradient all the way to about half the header we had made earlier, so it should look somewhat similar to this:
8. Next add some text and duplicate your separator layer to how many buttons you have, and align it and viola!
9. We are now finished with the navigation bar and we're going to start on the ad bars, i will be showing you how to make one ad bar, and then all you have to do is just duplicate the layers and you'll have as many as you want! So start off by making a new layer and then using your rectangular marquee tool (m) make a rectangle and fill it with #9d9d9d, like the following screen shot:
10. Next take out the Layer Style window of that layer and use the following settings:
11. Now lets spice it up a bit. So make a new layer and using your rectangular marquee tool (m) make a selection on top of the rectangle we just made and fill it with #b4c75c.
12. Next open up the layer style window for that layer and use the following settings:
