How to Create a Software Website Layout – Tutorial
This tutorial will show you how to design a web layout where you can sell your software. If you have a downloadable item on your website ready for sale, then you will also need some tools to create 3D software boxes.
If you don’t know how to create a 3D box then please go to 3D Software Box, and view the video to see how easy is to create unique 3D boxes in Adobe photoshop.
The above step is optional in this tutorial, and you can use any other 3D software you have already.
Download resources – Optional
Optional for logo creation you can use Ultimate 3D generator
If you’re a member, you can download the PSD Layout for this tutorial at the bottom of the page. For this tutorial you will need to create a new document with the following size: 1100 pixels x 1250 pixels.
With Paint Bucket Tool fill your background layer with the following #d8d8d8
Duplicate the Background layer and then go to Fill > Noise > Add noise. Use the following settings:
On the top side of the background layer i will create a new shape with Rectangle Tool
For this shape I will add the following layer styles.
You can see on the following image the result. As you can see this layer style has an indented look. Try to save this preset because you will need later in this tutorial. In case you want more layer styles we have a huge pack with over 16,000 Photoshop Layer styles.
On the top of the website I will create another shape with Rounded Rectangle Tool. I will use the same pressed layer style settings.
The next step is to add some lines with pixel tool. I will set the line weight to 1 pixel. You can make this setting after you select the Line Tool, and then you will find the value on the Option bar.
I will continue working on the horizontal menu. Here I will create a new shape with Rounded Rectangle Tool. After you use this tool, right click on the layer inside your layer palette, and choose Rasterize Shape.
Delete the top part of the shape with Eraser tool, or you can create a selection with rectangular marquee tool, and the hit the Delete key on your keyboard ( Clear )
Please use the following layer styles
With pen tool create the following shape. I will use this shape to create a nice shadow under this button in my following steps.
I will drag the layer under the orange button.
Now you need to lower the opacity for this shape to 10-15 %. Another tip is rasterize the shape ( right click on the layer inside your layer palette ), and then you can erase the shape with a smooth round brush.
On the top of the layout I will create an area where you can add very important texts. These type of text which are very visible are very important because you can transform a normal usual in a customer.
As you can see I have used the same pressed layer style, and with horizontal type tool I wrote some text. I will create also a text logo. You can create also a 3D logo with the help of our 3D generator
In the middle of the layout I will create 4 boxes with Rounded rectangle tool, and I will add the same pressed layer style I have used over and over in this tutorial.
Under each area i will add some text with Horizontal Type tool
After you add the text, you will need to write some minus signs with Horizontal Type Tool.
The last step is to fill the bottom part of the shape with text and some other simple elements. Please take a look on the following image to see the full result.
If you want to download this PSD layout you need to register for an account.