Software Layout #3 Tutorial

Create a new document 800×800 pixels, fill the background with the color #c4c5c0. Select the color #374254 and the rectangular marquee tool, draw a small rectangle across the canvas at the top.

Now select the rounded rectangle tool and draw a small rectangle, fill with the color #374254. Place at the top of the canvas over your blue bar.

As you can see i have a rounded edge at the bottom of my rectangle, to do this make a curve with the pen tool and delete the selection. Alternatively leave it as it is. Add your website text and slogan in your blue rectangle.

Now select the rounded rectangle again and make a box next to your header, fill with same color.

This is going to be our search box, add the word search and a white rectangle to represent the search form.

Now head over to your custom shapes and select this shape.

Make it fairly bigish as its better to resize it down than up. Fill with any color then add these layer styles to it.

Now create a new layer above your shape and make a white circle.

Now with the pen tool, make a selection like this.

Goto “select > inverse” then hit delete key on the keyboard. Set the opacity of the white cirlce to about 40-50%. Merge the 2 layers then press “CTRL + T” and rotate it slightly, You should be left with this.

Stick this shape by the search box, also adding the word go!.

Under your search box add your navigation and small divider.

Now for this bit your going to need a softwarebox, i currently already have made 2 tutorials on how to make a software box. GO HERE

Once you have made your box place it on your canvas, then duplicate it 3 times. Then add this drop shadow to all 3 of them.

Move one of your software boxes slightly to the left away from the top one, Slightly resize it down and add a 1 pixel guassian blur to it. You should have something like this.

Do the same with the 3rd box only adding a 2 pixel guassian blur to it and resizing it down abit smaller.

Now duplicate your shape you created earlyier for your search box, duplicate it 3 times and place next to your software boxes. Also add the numbers 1-3.

Add your text giving 3 reasons why to buy your product. Also add your software title and version information.

Select the rectangular marquee tool and the color #b1bac3 and draw a box around your infortmation.

Do the same again only make a smaller rectangle under the one you just made, fill with the color #babfc2.

Now select the rounded rectangle tool and make a rectangle under your 3 reasons. Add these layer styles.

Once you have added the layer styles set the buttons opacity to 60%. Now add your download text. You should have something like this.

Select the color #cccccc and make a rectangle at the bottom of your canvas, this will be our footer.

Above our footer to the right add, some text, like testimonals, or client information.

Now create another rounded rectangle, with the same layer styles as your download button. Only this time change the colors to navy blue.

Duplicate your shape in the search box and place it over your blue rectangle.

Now add some text for your members.

Thats it all done, heres a full preview of the final product.

One thought on “Software Layout #3 Tutorial”

Leave a Reply

Your email address will not be published. Required fields are marked *