Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Tutorial Layout

Tutorial Layout


Create a new document 900x900 pixels, Select 2 shade of dark gray as your background/foreground, select the "rectangular marquee tool" and draw out a rectangle at the top of your canvas, fill it with a linear gradient dragging from the top to the bottom. Now add these layer styles to your rectangle.

image 1

image 2

Heres how it looks so far.

image 3

Select your type tool and type out your sites title and slogan.

image 4

Add this layer style to your "title".

image 5

image 6
Click to enlarge

Select the "rounded rectangle" tool and draw a small rectangle underneath your header.

image 7

Add these layer styles to your little rectangle.

image 8

image 9

image 10

image 11

Your little rectangle should now look like a nice button.

image 12

Duplicate this button as many time as needed and place along side the bottom of your header, you might also want to label your buttons.

image 13
Click to enlarge

Duplicate your header then goto "edit > free transform > flip vertical" and position the duplicated layer at the bottom of your canvas this shall be the footer. Select the type tool and add your footer information.

image 14
Click to enlarge

Now lets create a our content boxes. Select the "rectangle marquee tool" and draw out 2 separate boxes.

image 15

Add these layer styles to both boxes.

image 16

image 17

Position the boxes on top of one another. You should have something like this.

image 18

Now duplicate both boxes and create individual content boxes.

image 19
Click to enlarge

Label all your content boxes.

image 20
Click to enlarge

Thats it all done, and with some content it shall look similar to this.

Tutorial Layout
Click to enlarge


Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Tutorial Layout"

Captcha