This is part 1 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 creating the frame-work for our layout design. To see how the final product looks, go here: Final product | Another variation.
Download and open the 'blue shatter' image, available here. (or open a render of your own, any render will work for this tutorial)
grab the 1 pixel horizontal marquee tool
make a selection on your render anywhere on the photo, l was aiming for a section with a little bit of black
press CNTRL + C to copy the selection of the render and minimize the window (we'll use the render again later...)
open a new document. Width 777 height 500 (777x500) and name it "layout"
Fill the background with: #F1F1F1.
create a new layer, and press CNTRL + V to paste the 1 pixel snippet of our render. place it near the center of the canvas.
next press CNTRL + T, or go to: edit->free transform. to open up the free transform tool. Move the cursor over the center of the pasted 1 pixel render until you see a dual arrow pointing both right, and left. Hold down your mouse and drag it to the right, you'll notice that this will "stretch" the 1 pixel snip from the render. This is known as "pixel stretching" (incase you didn't know that already). Stretch it out until you can get a good look at the design such as l have done here and press "enter" on your keyboard to finalize the "stretch".
Now press 'V' on your keyboard to get out the Move tool. Highlight a section of the stretched image, and move it up and down to get a good look at the whole thing. What we're looking for are sections that we can use for our pages borders.
Near the bottom l found a good section for the buttons. Get our the rectangular marquee tool and select this area. (or a similar area)
Pay special attention to make sure that the top and bottom are lined up precise with the section you're going to use.
Once you've gotten the area selected, press CNTRL + C to copy it, create a new layer, and press CNTRL + V to paste the image.
press V to get our the "move tool" and position the pasted section approximately 220 pixels from the top of the canvas, off to the left, such as l have here.