Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Vista Themed Software Box Tutorial

Vista Themed Software Box Tutorial


Firstly create a new layer above your background layer, select the pen tool and create a shape like this.

image 1

Might take you a few attempts to get the shape right. Color the shape black.

image 2

Double click your new layer with your black shape on and add a gradient overlay using the settings below.

image 3

Your shape should now look like this.

image 4

Duplicate your shape layer, then right click your new layer and goto "clear layer style" you should be left with your black shape again, ive done it this way as you dont have to create another shape with the pen tool, alternativly you could define a custom shape. Press "ctrl + T" to enter into free transform mode, just drag the top of the shape down abit making it abit smaller.

image 5

Double click your new shape layer and add this gradient overlay and stroke.

image 6

image 7

You should be left with this.

image 8

Create a new layer above your background layer but under everything eles, make a selection (see image below).

image 9

Fill with the color black, and you should be left with this.

image 10

Duplicate one of your shapes then right click your new layer and goto "clear layer style" make sure this layer is above everything eles, press "ctrl + T" to enter free transform mode, make this shape abit bigger than the others and color this shape with the color #777777 and set opacity to about 15%-20%.

image 11

Duplicate the layer you created above this time drag the layer down above your background layer, press "ctrl + T" to enter free transform mode, make this shape abit smaller than the others color this shape with the color #777777 and set opacity to about 15%-20%.

image 12

Thats it all done, all thats left to do now is add your content, once you have added your content goto "edit > transform > persepective" and adjust the perspective to suit.

Vista Themed Software Box Tutorial



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


Like us to: