Orange Layout Tutorial

In this Tutorial, I hope to teach you some new methods to get things done, just new ways, such as how to center an object in the middle without using rulers and so on. You will be making a banner first, that's the first part of the layout tutorial, and then in the second part you'll be making the actual layout. You'll make a nice clean navigation menu and a header. Well, That's for now, so let's Start!

1. Open a 900x1000 Document in Photoshop, fill it with Dark Gray color, I chose #202020.

2. Ok, so let's start with the header/banner of the layout first. Make a new layer and you are free to call it as you wish.

Select a big part of the top document and fill it with any color to see the differences for now (I filled it with a lighter gray color), we will make it look a lot better (Duh...) later on, then Deselect.

Ctrl+T to Free transform that shape selected. Grab on of the sides and while holding ALT, move it a bit to the center and we got the banner be in the center, cool method uh?

Click to enlarge

3. Make a new Layer,Call it as you wish, it's going to be the Navigation Base. Select the Header Layer, take the Rectangle Marquee Tool, In the top Menu select the "Intersect with Selection" Option, and make a selection from the bottom of the Header Layer a bit to top, look in the image:

Click to enlarge

Fill the Selection with a Darker Gray, #191919.

Click to enlarge

4. Make a new Layer and do the same thing we did above, but now make the space smaller, and move the whole 3 layer down a bit, saying:

Click to enlarge

5. Let's Concentrate on the Navigation for now. Make a new Set/Group, and grab the Navigation Layer to it. Take the Dodge tool, Size 100px Exposure 25% and Dodge the Top part of the Navigation Layer:

Click to enlarge

6. Make a new layer, CTRL+Click on the Navigation layer to load the selection, choose the "Intersect with Selection" Option from above, and make a selection from the bottom of about 4px tall. Fill it with Orange, I chose #c86300. Starting to look better uh?:

Click to enlarge

Do the Same thing to the top part, by just duplicating the Orange Strip layer and moving it to the top. Make the highest of the top strip about 2 to 3 pixels.

Click to enlarge

7. Now it's Your choise whether you want to continue doing the banner, you can simply add some really nice photo there and it will be fine. But I'll go further. I gave the Banner/Header Layer the following Blending Options:

Gradient Overlay:

8. Let make a new layer above the Banner. Call it the Glass effect or anything you feel comfortable with. Ctrl+Click on the Header to load it as a selection, Grab the Circular Marquee tool and Choose on the top Menu, "Intersect with Selection. Make a big circle (when you are on the new layer), that will cover almost the whole banner, then take the Gradient Tool, make sure your Foreground is white, and in the option bar on top it's "Foreground to Transparent" and trace it from bottom of the middle page to the top of the selection, lower the opacity to 75%, and you should have this:

Click to enlarge

Adding a little text, and a title box on the right side, just and extra thing you can include in the tutorial, not a must though

Click to enlarge

9. Let's Get back to the Navigation Again. Click on the Navigation layer and go to blending options, Go to Pattern Overlay and choose a Scan Lines Pattern that goes Horizontal. If you don't Have a pattern like this, then go to this tutorial. Lower the opacity of the pattern to 2%, so you barely see it, we are just using it for the effect. Do the same thing in the top Line Space, But the Opacity higher until you think it's the right way.

Click to enlarge

Now, you can add some text and play with the stuff over there, I added a separating line between each bottom, and added some more extra stuff there

Click to enlarge