HV-Designs.co.uk

October 2nd, 2007 in Photoshop Tutorials by Richard Carpenter

Software Layout #1 Tutorial

• Share

Create a new document sized 800×800 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.

Lets also add some phone support underneath our quick navigation.

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

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.

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 ive previously created. The cd was made using “elliptical marquee tool”.

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.

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”.

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

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

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

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”.

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

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

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

Now add the all important information onto the footer.

That’s it all done
here’s the final piece.

• Share