Step 1
Create a new document in photoshop that is 600 x 800 in size.
Step 2
Create a new layer, and fill the background with the flood fill paint bucket with #666666 or a nice dark grey.
Step 3
Now you'll need to find an image to use to create the sidebars using a technique called "pixel stretching".
Open any picture (3d renders work great for these).
Get out the 1 pixel horizontal marquee tool (
)
Now click once on the canvas to make a selection on your image:
The render I'm using here is available in the download pack for this tutorial
Press Ctrl + C on your keyboard to copy the selected image.
Now go back to our original document, create a new layer and press Ctrl + V to paste this onto our document.
Step 4
Now get out the rectangular marquee tool (
) and make a selection in the center of the canvas over a portion of our pasted sliver. Tap delete on your keyboard to remove this portion of the image.
Your canvas should look like this:
Now press Ctrl + D on your keyboard to deselect the selection.
Press Ctrl + T on your keyboard to open up the Free Transform Tool.
Place your cursor near the top center node (small square) press down the mouse and drag it all the way to the top of the canvas.
Now place your cursor near the bottom center node (smalls square) press down the mouse and drag it all the way to the bottom of the canvas.
This should stretch out the sliver and create some very nice looking sidebars for our website:
Step 5
Get out the rectangular marquee tool (
) and make a square selection similar to that shown below for our navigation bar:
Fill this selection with #666666 (or the same color of your background.
Double click this layer and apply the following blending options:
Outer Glow:
Bevel & Emboss:
Satin:
Gradient Overlay:
Inner Shadow:
Drop Shadow:
Result:
Step 6
Create a new layer. Now get out the pencil tool (
), set your foreground color to black (#000000) and set the pencil tool up like so:
Draw a 1 pixel vertical line down the navigation box as pictured here:
Press Ctrl + J on your keyboard to duplicate this layer.
Press Ctrl + I on your keyboard to "invert" the color, it should change to white (#FFFFFF):
Press 'V' on your keyboard to get out the move tool, and tap the -> (right arrow) on your keyboard once, to nudge this white line 1 pixel to the right.
Change the blending mode of this layer to "Soft Light":
Press Ctrl + E on your keyboard to merge this layer with the previous layer.
Result:
Now press Ctrl+ J on your keyboard to duplicate this layer, then press 'V' on your keyboard to get out the move tool, and position the dividers along our navigation bar as shown here:
(you'll want to duplicate this divider once for each button your navigation bar will need)
Step 7
Next we'll create the header. Header design is exactly like creating a forum signature. You want to place good colors in the header, as well as a nice image that compliments and balances out your web page.
Get out the rectangular marquee tool (
), and make a selection like so above the navigation buttons made in the previous step(s).
Fill the selection with #33353E.
Step 8
Open up a good render or photo you would like to use on your header. Again for tips on creating headers, look for forum signature tutorials (there are 1,000's of them out there) and apply those techniques to your header. If you would like to use the same image I've used on this header, it's available in the download pack as well.
Once the image you want to use is open, press Ctrl + A to highlight the image, press Ctrl+ C to copy it. Then back onto our layout document, press Ctrl + V to paste it into place, and remove any portions of the image that are overflowing onto the navigation bar by selecting that area with the rectangular marquee tool, and tapping Delete on your keyboard to delete that portion of the image.
Step 9
Now we'll create the content area for our webpage. To do so, go ahead and get out the rectangular marquee tool (
) and make a selection on the canvas like so:
Leaving the selection still active, hold down the Shift key, and make two more smaller selections near that top of our current selection, creating small "steps" as pictured here:
No go to "Select->Modify->Smooth" with a setting of 5 pixels:
Fill this selection with white (#FFFFFF):
Step 10
Double click this layer, and apply the following blending options:
Drop Shadow:
Inner Shadow:
Outer Glow:
Color Overlay
Result:
Step 11
Finally we'll add some reflective text to our buttons. Get out a pixel font (if you do not have any, you can download some from the download section of this website). and set the pixel font up like so:
Type out your text onto navigation bar, between each of the dividers we'd made earlier:
Press Ctrl + J on your keyboard to duplicate this layer.
Right click on the duplicate layer, and choose "Rasterize Layer".
Go to "Edit->Transform->Flip Vertically".
Press 'V' on your keyboard to get out the move tool, and position the duplicate layer 1 or 2 pixels bellow our original text layer:
Change the blending mode of this layer to "Soft Light":
Result:
This concludes the frame work of the tutorial. I would suggest adding small highlights and focal points to the layout, paying special attention to not "over do" it. Here is how my final result ended up after adding content, and a few small details to the layout:
Thank you for reading!
Download Tech Site Layout Source Package here.
More Tutorials: 
