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.

Click to enlarge
Click to enlarge

Lets also add some phone support underneath our quick navigation.

Click to enlarge
Click to enlarge

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

Click to enlarge
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.

Click to enlarge
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".

Click to enlarge
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.

Click to enlarge
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.

Click to enlarge
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".

Click to enlarge
Click to enlarge

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

Click to enlarge
Click to enlarge

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

Click to enlarge
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.

Click to enlarge
Click to enlarge

Now add the all important information onto the footer.

Click to enlarge
Click to enlarge

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

Software Layout #1 Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Software Layout #1"

Only registered users can write comment

No comments yet...