33000 Premium resources for designers

Create an awesome software layout

in Tutorials, Web layouts by Razvan on April 21st, 200911 Comments


software-layout

Sowtware layout

Welcome to another tutorial here on grafpedia.com.
Today I will show you how to create your own software PSD layout. If you have a digital product it I will show you how to create a simple website to sell your product faster. It is very important to allow users to see better your product. The software you want to sell must be visible. In the same time you have to allow your users to test your product and to be able to purchase it in a few steps.

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

129

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

Huge collection of Photoshop Gradients

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

227

On my layout I will create 2 shapes

320

For each shape I will add the following layer styles

417

516

68

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

77

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

417

516

68

This is my result

87

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

98

Then I will go to Edit > Transform > Warp

106

I will place the button under the big shape

1112

For some buttons I will add the following layer styles

1210

137

147

157

167

177

This is my result

187

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

197

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

207

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

2111

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”

228

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

237

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

247

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

257

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

267

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.

277

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

288

Go to Edit > Transform > Flip vertical

296

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

306

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

3110

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

324

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

334

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

344

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

354

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

363

Then I will add some text over this layer

373

This is my final result.

385

I hope you like my tutorial, and you will find it useful.Register and download this PSD layout

Download Demo

Responses to “Create an awesome software layout”

Trackbacks

  1. psaddict.com
  2. 40 best photoshop tutorials for web layouts - Gfx Toolkit

Leave a reply