Orange Layout Tutorial

Ok, you have reached the second part of this tutorial. Here you will be making the actual layout. Before you continue any further, I would suggest putting all the layers of the banner/header into one group, so you can be more organized. To the work...

1. Let's make a white rectangle with the same width of the banner so we have it equal and well looking. Use any method you know to do it. (I am assuming you got some basics in Photoshop). Do not make it all the way down of the Document, leave some space at the bottom.

Make the Layer Opacity be 5% or how you like it

2. So we got the white space, now we need to make it more alive with stuff into it. So let's make the side boxes. That can include anything you wish. News, Articles, Recent works, Links, Affilties, Categories, simply anything you wish. So let's start making them. Rectangles like in the following image, fill them with #252525.

So now we got two boxes at the right, numbers 1 and 2. and the main content box which is number 3, and his two sub boxes, 3a and 3b. Yes, Yes, you are free to use them for any idea that comes to your mind, but wait, we need to finish those boxes to make them look better.

3. Let's Add a 3 pixel stroke to all boxes, except the small ones on box number 3. Go the the Blending Options, go to stoke, have it 3px stroke, inside, color #ff7e00, opacity: 3%.

Now go to Inner Shadow. Leave the default settings, just lower the opacity to 19%. Good, so now we got this:

4. So let's make the bars of the boxes, right boxes. Ctrl+Click on the top box to load it as a selection, then take the Rectangle Marquee Tool, in the option bar above select the "Intersect with Selection" Option and let's make a rectangle from the top of the box a bit down so we have like a title space for the right Box. Go Select>Modify>Contract>3px. Make a new layer and fill it with a dark gray.

5. Take the Dodge Tool, size 31px, Exposure 29%, make a one move of the top of that dark gray bar we made, so we get this really smooth effect. Now, go the blending options, go the Pattern Overlay, and give it a 1% Scanlines pattern, and that should be it:

Duplicate the Layer and move it to the bottom Box, or any other box you made.

6. For the miniBoxes in Box 3, you can do anything with it. I am only going to add text and an image space there.

7. Well, Now to make it look even better, Put text, make it alive!

Click to enlarge