Orange Layout Tutorial. In this tutorial you’ll learn how to make a nice clean layout.

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 actuall layout. You'’ll make a nice clean navigation menu and a header. Well, That’s for now, so let’s Start!1. Open a 900*1000 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 ligher 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 banenr be in the center, cool method uh?

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 selcet the “Intersect with Selection” Option, and make a selection from the bottom of the Header Layer a bit to top, look in the image:

Fill the Selection with a Darker Gray, #191919.

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:

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

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?:

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

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 gabve 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 comftable 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 Forground 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 selelction, lower the opacity to 75%, and you should have this:

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

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 barly see it, we are just using it for the effect. Do the same thing in the top Line Space, But the Opacity higher untill you think it’s the right way

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

PLEASE DO NOT COPY THIS TUTORIAL, ALL TEXTS AND IMAGES BELONG TO THE AUTHOR, DO NOT TRY! MAKE YOUR OWN, FEEL PROUD OF YOURSELF.