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

Software Layout #3


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

image 1

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.

image 2

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.

image 3

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

image 4

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

image 5

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

image 6

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

image 7

image 8

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

image 9

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

image 10

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

image 11

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

image 12

Under your search box add your navigation and small divider.

image 13

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.

image 14

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

image 15

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

image 16

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

image 17

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

image 18

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

image 19

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

image 20

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

image 21

image 22

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

image 23

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

image 24

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

image 25

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

image 26

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

image 27

Now add some text for your members.

image 28

That's it all done, here's a full preview of the final product.

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

Only registered users can write comment

Reader's comments