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

Software Layout #2 Tutorial



Create a new document 810x610 pixels with a white background. Select your "rectangular marquee tool" and draw out a rectangle about 800pixels wide leaving two 5 pixel gaps either side. Place at the top of your canvas. Fill with a gradient using two shades of light blue.

image 1

Add a "2 pixel stroke" using the color #3b6a9a. Holding "ctrl" on the keyboard click on your rectangle layer, then make a new layer above it. Fill with a pattern of your choice, if you dont know how to make patterns i suggest you do my custom patterns tutorial. Fill your header with your pattern and add a layer mask so it blends in at the top. Heres how my header looks at this stage.

image 2

Now lets add some text, grab your type tool and type your slogan and site title.

image 3

 

Now lets add some buttons, select the "rounded rectangle tool" and draw a small rectangle fill with any color as this will change in a minute.

image 4

Add these layer styles to your button.

image 5

image 6

image 7

image 8

Your button should now look like this.

image 9

Duplicate your button as many times as needed, label them and place under your header like so.

image 10

Now hide all your layers apart from your buttons, then goto "layer > merge visable" UNHIDE everything, then select your buttons layer which should all be on one now layer now they'be been merged. Duplicate them then goto "edit > transform > flip vertical", place your buttons just underneath the original ones creating a mirror image. Add a layer mask to your mirrored buttons and set opacity to about 50%. You should have something like this.

image 11

 

Select the "rectangular marquee tool" and draw a rectangle in the middle of the canvas, fill with a light grey and add a 2 pixel dark grey stroke to it.

image 12

Select the pen tool and create a shape like below.

image 13

Add the following layer styles to your shape.

image 14

image 15

image 16

image 17

image 18

Your shape should now look like this.

image 19

Duplicate your shape you created previously and change the "gradient overlay" to a diferent set of colors. im going to use orange.

image 20

Place the shapes next to each other like the above image. Select the "ellipitcal marquee tool" and add two orbs to your shapes.

image 21

Make two rectangles at the bottom of your shape, add the same layer styles as your shapes but change the "gradient overlay".

image 22

Add your footer information at the bottom of the page using the type tool.

 

Thats it all done, and with some content it can look like this.

Software Layout 2 Tutorial



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


Like us to: