Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create an Awesome Software Layout

Create an Awesome Software Layout


For start we will open a new document with the following size: 960 x 900 pixels

Select Gradient Tool, and add a vertical gradient on the background layer.

image 1

If you don't like this gradient we have over 27.000 gradients for you in this set.

I will select Rounded Rectangle Tool, and I will set my corner radius size to 6 pixels

image 2

On my layout I will create 2 shapes

image 3

For each shape I will add the following layer styles

image 4

image 5

image 6

One more time I will create a new shape with the same tool: Rounded Rectangle Tool

image 7

For this shape I will use the same layer styles as above

image 8

image 9

image 10

This is my result

image 11

On the top of the layout I will create a single button

image 12

Then I will go to Edit > Transform > Warp

image 13

I will place the button under the big shape

image 14

For some buttons I will add the following layer styles

image 15

image 16

image 17

image 18

image 19

image 20

This is my result

image 21

I will select Ellipse Tool and I will create some small circles.

image 22

Then I will download the following image with a spiral bound

http://www.sxc.hu/photo/490223

I will open the image and I will extract only the following part of the image

image 23

To take only the metal bound you have to make a selection around it with Magnetic Lasso Tool and then press on CTRL+J. It will create a new layer only with the metal bound.
I will duplicate this several times, and I will place it as many times as I want

image 24

Now it is time to add some text and images. On the top of the layout I will add a 3d software box from my last brush package:  Splats Brushes
Please remember that we release each day a new premium download. If you don't want to miss something please come back each day to download the "Give away of the day"

image 25

I will create a new layer above all layers ( press CTRL+SHIFT+ALT+N ) ,then I will select Pencil Tool. I will create a small arrow. I will set my pencil brush to 1 pixel

image 26

Then I will select Horizontal Type Tool, and will write some minus signs

image 27

I will duplicate the small pixel arrow a few times, and I will duplicate also the dotted layer. I will place the layers like in the following image

image 28

Now I will fill also the bottom part of the layout with another text and an image

image 29

Now I will show you how I will create a nice mirror for my text. I will select the layer with the "click here to buy "text.

image 30

I will duplicate the layer (be sure you have the original layer selected, and then press on CTRL+J). With Move Tool place the copy of the layer under the original one

image 31

Go to Edit > Transform > Flip vertical

image 32

Duplicate this layer one more time. The reason I will create a copy is because I want to erase the bottom part with Eraser Tool, and since the layer has some layer styles applied to it, it will look very bad, and we will not have the desired effect.  So please duplicate the layer one more time ( press on CTRL+J).
You can see also that my text has some layer styles applied to it. This aspect is very important

image 33

With the duplicated layers selected, press on CTRL+E ( merge ). You will see that in your layer palette you will have only a single layer

image 34

I will select Eraser Tool, and with a smooth big round brush I will delete the bottom part of my text

image 35

You can see a nice and smooth fading mirror effect. I will make the same effect also for the other text on the left side.
I will create a new layer above the background layer, and with a smooth round brush I will make a simple white point

image 36

Then I will change the blending mode for this layer to Soft light

image 37

I will select Pent Tool, and I will create a diagonal shape in the following spot

image 38

I will add the same layer style as my orange buttons, but I will remove the drop shadow settings

image 39

Then I will add some text over this layer

image 40

This is my final result.

iCreate an awesome software layout



Author's URL: grafpedia
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: