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 #1

Software Layout #1


Create a new document sized 800x800 pixels with a white background. Start off with our site title and slogan and a little quick navigation. Add the title and slogan at the top left hand corner and the quick navigation at the top right hand corner. You should have something like this.

image 1
Click to enlarge

Lets also add some phone support underneath our quick navigation.

image 2
Click to enlarge

Select the rectangular marquee tool and draw out a rectangle under your title and text.

image 3
Click to enlarge

Fill the rectangle with a gradient having the color "#e5e5e5" as your foreground, also draw out 2 1pixel lines above it coloring one line black and one line white. Put the white line under the black line.

image 4
Click to enlarge

Place your software box & CD display over the rectangle, slightly in the middle. If you don't have a software box you can create one from a tutorial I've previously created. The CD was made using "elliptical marquee tool".

image 5
Click to enlarge

Lets also add a reflection under our software box and CD, if you don't no how to do reflections then i suggest you do "my reflections tutorial". Lets also add some text and titles to sell our product.

image 6
Click to enlarge

Now lets create our buttons. Duplicate your rectangle you created in step2 and scale it down to button size and add a 1pixel stroke using the color "#cfcfcf".

image 7

Now duplicate you button 4 times so you have 5 buttons, then place them under each other.

image 8

Place all 5 buttons next to your software box and label them.

image 9
Click to enlarge

Lets also add some logos next to them, go to your custom shapes from the shapes menu.

image 10

Select "custom shape tool" then at the top in your tool bar select shape then the type of shape you would like. Once selected drag it out onto your canvas on a new layer, select your desired color, select the pen tool then right click and go to "fill path".

image 11
Click to enlarge

Yet again duplicate your rectangle we created in step2 and place it under your software box & information.

image 12
Click to enlarge

Label out 3 columns for your information that you will add later.

image 13
Click to enlarge

Then add some kind of a separator to separate the 3 columns and a footer. The separators are just gray lines with a masked added to them and the footer is the same but without the mask.

image 14
Click to enlarge

Now add the all important information onto the footer.

image 15
Click to enlarge

That's it all done, here's the final piece.

Software Layout #1
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 "Software Layout #1"

Captcha