Render Layout Tutorial vol. 5: Content Boxes

Step 1.

This layout is going to be a 2 column layout. We'll have a sidebar on the left side that is about 175 pixels in width, for advertisements, affiliates, shout boxes, new features etc. etc. etc... and then a large content box to the right of that that will span the rest of the layout for articles/tutorials/blog entires .. whatever. Lets start with the main content box. Do your best not to get overly detailed and draw away from the real meat and potato's of your website... which is the content.

Start with a rectangular selection about this size:

Note: place it near the center of the canvas... we don't want this thing anywhere near the drop shadow from our header/navigation bar

Step 2.

next get out the polygon lasso tool, and deselect the following area form the rectangle. You do this by holding down the Alt key when making the selection.

Tip: holding the Shift key along with the Alt key will ensure a perfectly straight selection.

Step 3.

Fill the selection with #2C54C7 and add the following blending options to the layer:

The result should look like so:

Step 4.

Create a new layer, and make a selection like so:

Step 5.

and fill this selection with: #082E9F

Step 6.

Create a new layer, and draw a small rectangle with the rectangular marquee tool

Step 7.

Fill this selection with: #F7FF1C and apply the following blending options:

Step 8.

Now duplicate this layer two times, so you have three blocks, and position them like so:

Step 9.

Next hold the Ctrl key, and click on each layer with a yellow box to select them all. Then go to Select -> Modify -> Expand by 1 pixel.

Step 10.

Next click/highlight the layer with the blue bar on it, and press delete. and press Ctrl + D to deselect.

Step 11.

Next create a new layer, get out the pencil tool, set the foreground color to #082E9F and draw a line that is the same width as our content box heading.

Step 12.

Now for that sidebar. Make a rectangular selection similar to the image above.

Step 13.

Using the polygon lasso tool, deselect the following area while holding down the Alt key.

Step 14.

Fill this selection with #BAC4E4 and press Ctrl + D to deselect.

Step 15.

If your sidebar is right up against the left side of the canvas (like mine is) get out the move tool (press V) and press the right arrow two or three times to move it inward a bit.

Step 16.

Delete the bottom section of the sidebar.

Step 17.

Duplicate the layer, and go to Edit -> Transform -> Flip vertically and position it like so:

Step 18.

Next draw a 3 pixel line with the pencil tool for a divider like so.

Step 19.

Next near the top of the sidebar using the rectangle selection tool, and the polygon lasso tool (to deselect portions) make a selection similar to this.

Step 20.

Fill the selection with: # and add the following layer options:

Step 21.

Hold Ctrl and click this layer to select everything, then create a new layer. Go to Select -> Modify -> Contract, with a setting of 1 pixel.

Step 22.

Deselect about half of the area with the rectangular marquee tool. Here's how your selection should look:

Step 23.

Fill this selection with #FFFFFF (white) and drop the opacity down to 75 percent.

Step 24.

Now duplicate these two layers, go to Edit -> Transform -> Flip vertically and position them at the bottom of the sidebar as I've done here:

Step 25.

Next I used the pencil tool to draw several small 1 pixel "lines" at the top and the bottom of the sidebar.

Step 26.

And the layout is pretty much ready to be sliced up and arranged with HTML. I've gone through and added a few very subtle small details to the content boxes, and the header. Remember you don't want to overwhelm your visitors and draw their attention away from your content. Keep it clean, but make it unique.

Here's how the layout looks before being sliced:

Click to enlarge

and here is how it will look after being sliced and reassembled with HTML and having content added:

Final product

That completes the creation of our layout, you are now ready to begin slicing your layout and applying the page coding that will bind it together.