This is part 5 in a 5 part tutorial to easily create a render layout out of a simple render in about 20 minutes. This is by far the fastest way to develop a layout for a website and equally as easy to accomplish.
In this installment we will be finishing up our layout design and create the content boxes and sidebar. To see how the final product, go here: Final product | Another variation.
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.
fill the selection with: # and add the following layer options:
hold CNTRL and click this layer to select everything, then create a new layer. go to select -> modify -> contract, with a setting of 1 pixel.
deselect about half of the area with the rectangular marquee tool. Here's how your selection should look:
fill this selection with #FFFFFF (white) and drop the opacity down to 75 percent.
now duplicate these two layers, go to ''edit -> transform -> flip vertically'' and position them at the bottom of the sidebar as l've done here:
next l used the pencil tool to draw several small 1 pixel "lines" at the top and the bottom of the sidebar.
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:
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. Thank you for reading and please be sure to check out our other tutorials.