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.
now get back to the layer with our stretched render image, and move it around until you find a nice section for the top of our page such as l have here.
once you've got it selected, press CNTRL + C just like before to copy it. create a new layer, and press CNTRL + V to paste it. Next position it at the very top of the canvas such as l have here.
okay, back to the stretched render one more time. This time we're looking for a piece that will be the footer of our web page. l've found this section here. This section is probably the least important as not many people will even notice it, but just grab a nice little slice and place it near the bottom such as l have here.
now that we've gotten that our of the way, go ahead and delete the layer with the stretched render on it by right clicking, and selecting "delete layer", or alternatively drag it over to the trashcan.
now you should have 4 total layers. Merge the top three (the three pieces we just pasted) by highlighting the top most layer, and pressing CNTRL + E (merge) two times, and name the new merged layer "frame".
once all three layers are merged, press CNTRL + T to open up the "free transform tool", and drag the frame so that it covers the entire canvas such as l have here. You might have to pull in both directions just make sure that all three of them span all the way from the left, to the right. and press ENTER on your keyboard to finalize the transform.
double click on the "frames" layer and add the following layer styles to add a little depth:
That completes the "frame" of our layout, you are now ready to continue on to Vol. 2 of our full layout tutorial, which is where we'll start working on the header. Continue on to vol. 2 Header Creation.