Tech Site Layout


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 ( image 1 )

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

Click to enlarge

Click to enlarge

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.

image 3

Step 4

Now get out the rectangular marquee tool ( image 4 ) 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:

image 5

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:

image 6

Step 5

Get out the rectangular marquee tool ( image 7 ) and make a square selection similar to that shown below for our navigation bar:

image 8

Fill this selection with #666666 (or the same color of your background.

Double click this layer and apply the following blending options:

Outer Glow:

image 9

Bevel & Emboss:

image 10

Satin:

image 11

Gradient Overlay:

image 12

Inner Shadow:

image 13

Drop Shadow:

image 14

Result:

image 15

Step 6

Create a new layer. Now get out the pencil tool ( image 16 ), set your foreground color to black (#000000) and set the pencil tool up like so:

image 17

Draw a 1 pixel vertical line down the navigation box as pictured here:

image 18

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.

image 19

Change the blending mode of this layer to “Soft Light”:

image 20

Press Ctrl + E on your keyboard to merge this layer with the previous layer.

Result:

image 21

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)

image 22

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 ( image 23 ), and make a selection like so above the navigation buttons made in the previous step(s).

Fill the selection with #33353E.

image 24

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.

image 25

Step 9

Now we’ll create the content area for our webpage. To do so, go ahead and get out the rectangular marquee tool ( image 26 ) and make a selection on the canvas like so:

image 27

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:

image 28

No go to “Select->Modify->Smooth” with a setting of 5 pixels:

image 29

Fill this selection with white (#FFFFFF):

image 30

Step 10

Double click this layer, and apply the following blending options:

Drop Shadow:

image 31

Inner Shadow:

image 32

Outer Glow:

image 33

Color Overlay

image 34

Result:

image 35

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:

image 36

Type out your text onto navigation bar, between each of the dividers we’d made earlier:

image 37

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:

image 38

Change the blending mode of this layer to “Soft Light”:

image 39

Result:

image 40

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:

Final Result (Click to enlarge)

Click to enlarge

Thank you for reading!

 

Author’s URL: www.photoshopforce.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s