How to create a sublime software layout

24 Jun 2010/3 Comments/in Interface Design, PSD Templates, Templates, Tutorials /by admin

Hello. In this step-by-step Photoshop tutorial i will show you how to create an artistic colorful layout for your software. If you don’t know already we have released a new unique product : 3D software box creator and we thought it will be a good idea to create a web layout where you can sell your products. You can see above our latest product which allows you to create a 3D software box in Photoshop in under 30 seconds.

Step 1 – Download Graphstock PSD framework

Always when you create a new layout i recommend you to use a framework, because you will align the elements of your layout very easy. Here is the download link: Download Graphstock Framework

Open the PSD file in Photoshop, and make sure you have the guides visible. To make the guides visible, please go to View > Show > Guides. You will see some blue vertical lines on this psd layout. This is normal and if you wan tto hide them you can follow the same path from above.

Step 2 – Add color over your background

For start we will need a background for this layout. I will set the foreground color to #f0f0f0 and then with Paint Bucket Tool i will click one time over my document.

Step 3 – Create the main area of the software layout

For this type of layouts ( where you want to sell something ) is very important to make your products visible in a unique way. With Rectangle Tool i will create a vertical shape which will fill my entire document. Please see the next image to understand what i am talking.

Even if your users will have big screen resolutions this area will fill their entire screen , if this software layout will be converted to CSS / XHTML in a good way.

For this shape i will add the following layer styles

If you used the same layer styles like me then you should have the following result.

Step 4  – Create the ” Call to action ” area

Each website should have a call to action area. This a special area where you want to make a conversion. Conversion is when your visitor will make an action. For example when they sign up for your newsletter, or when they will buy your product.

For commercial software templates like the one we will create today it is very important to create a visible area where you will offer 2 incentives and a buy now button. i will explain later why these areas are importan.

With rectangle tool i will create a white shape.

For this white shape i have used the following layer styles

Right under this shape i will create two thin lines. I will grab Line tool, and i will make sure the weight for this line is set to 1 pixel.

Step 5 – Create a simple header

We will come back later to this area. Now i will move to the top of this software layout, and i will create a text logo. In my case with graphstock

On the right side of the software layout i will add some buttons as well a BUY button. Right now the header of the layout will be very clean and there you will have a button which will attract the views of your users. This orange button will make you more sales then you think.

For this button i will use the following layer styles

Step 6 – Make the website unique

When you have a unique website design it means you are serious about your business and products. It means you invest money in designers, and in the same time you leave a good impression for your audience.

Now i will show you a simple way to create a very artistic background. With Ellipse tool create some colorful shapes.

If you have a premium account you will be able to download over 11.000 Gradients. In the following screen shot i will show you hot to add a simple layer style for a single ellipse.

Now you need to be creative and add your own colors.

After you create some round shapes, you need to select all these round shape layers in your layer palette, and press on CMD + E. This shortcut will merge all the layers into a single one, and it will allow you to use filters.

After you merge all round shapes you need to go to Filter > Blur > Gaussian Blur and you can use the following value:

Step 7 – Add noise on the main area of your layout

Make sure you have the colorful layer selected in your layer palette, and then go to Filter > Noise > Add noise and use the following settings

Step 8 – Add an artistic touch

Please go to Filter > Artistic > Rough Pastels, and use the following settings:

Step 9  – Clean your software layout

When you applied the blur filter you have noticed that some parts of the layer extended to much on the bottom and on the top of the website. now it is time to delete the top and the bottom part of the colorful layer. Select Rectangular Marquee Tool, and make a selection on the top of the layout like in the following image.

After you make the selection you need to press on Delete key from your keyboard

Do the same steps also on the bottom of the main area and you will have the following result

Step 10  – Add 3D software boxes

I will add 3 Software boxes. These boxes was made in less than 30 seconds with 3D software box creator

Step 11 – Create a featured area where you can present the features of your product

Here you need to create a area where you will present the best features your product will offer to your clients. Before you write the features it is better to outline the area. i will choose to add the features of 3D Software box creator inside a round shape. I will select Rounded rectangle tool and I will create a round shape

For this shape i will add some layer styles

Step 12 – Write down the features you offer for your product

In the next screen shot you will see some of the most important things our product will offer you. Here it is very important to add only the most important features. If you add to many features some users will not read that area at all.

If you add only a few features some users will thing that your product is not so good.

Always is good to choose a middle number of features to make the featured.

Step 13 – Create the call to action buttons

Under this colorful area you need to place the call to action buttons

I will explain you why i have placed the button in this way. One of the most important think when you sell a product is the support you offer. A very visible area is near the scroll bar of the browser. If you have an easy way to offer support , for sure the visitors will convert into customers. Because support is on of the most important think i recommend you to place icons, and text area to the right side of the layout.

The left button is the Trial. If your product is good then you need to offer a free trial. Trials software will bring you the most money because users will download and test your products. if your software is good then for sure the trail period will convert to a sale. This is very important to make the download button for your trails as visible as you can.

The last button is of course the Buy Now button. I have placed the button in the middle of the page because all people will see it. If you have a good product and a small price then for sure you will have a lot of sales.

I have told you a few steps ago about conversions and incentives. Here the trial download and the Live support is an incentive for your users. They will trust your products and they will feel confident to buy it.

Step 14 – Create the body of the layout

Right under this area i will create the body of the layout> i will use only Horizontal type tool to add some text

Step 15 – Create a simple footer

With Rectangle Tool i will create a dark shape

For our footer i will use the following layer styles

Here is how my footer will look like.

Final result

This is my final result. I hope you like it. Please click on the following image to see how it looks.

Want to download ?

Register for a Premium account, and download all our premium resources + you will be able to download the upcoming releases.

If you are a Premium member you can download this Layout from here