Design A Colorful Web Tempate: Create a software web layout

Today I will create a new dark website layout, where you can sell your software. The tutorial is very easy to follow, and I promise you that everybody can create a layout like this in less than 2 hours. If you are a software manufacturer and you need a great design to represent your company and your products then you need to design an eye catching web layout.

Want to download ALL our Layered PSD layouts including this one? Register for a VIP account

Before you start….

Download Gradients

Follow tutorial for bokeh effect

As usual I will start with a new document with the following size : 1000 pixels width and 1100 pixels height. This size is very good because the website will fit good on all monitor resolutions.
I will change the foreground color to #202020, and with Paint Bucket Tool I will fill the document.
I will change the foreground color to #191919, and then I will grab Rectangle Tool to create two shapes.

For both shapes I will add the same layer style

This is my result so far.

I will select Rounded Rectangle Tool, and I will create 3 shapes in the middle of the layout.

For all these shapes I will use the same layer styles

This is my result so far. In the middle of each shape I will place some image later in this tutorial

I will create another shapes under these ones, and I will rasterize them. As you can see I will choose darker color.
To rasterize la layer you need to right click on the layer inside your layer palette, and then choose Rasterize Shape from the menu.

The reason I have rasterized this shape is because I will delete the bottom part of the shape. In this way you will have a nice reflection for this layer. Here is the result. Click on the following image to see the reflection for all shapes.

I will create one more time another round shape with the following color: #191919.

For this shape I will use the following layer style.

Here is my result

I will create another shapes. Please click on the following image to see the real size layout.

For the smallest shapes I will add different layer styles. I have used different gradients, from this set of 27.000 Gradients.

I will not show you the settings for each style. be creative and choose any color you want. Here is my result

I will select Horizontal Type Tool, and I will write some text over this layout.

Now I will add some images in the middle of the layout.

I will use the same awesome digital bokeh effect I have used in this tutorial. If you want to see how it’s made I recommend you to follow that tutorial.

On the right side I will create a Green button. As you can see the button has a nice call to action, and it is very visible. If your product or software is good I am sure the ones who will download your
product will become customers.

For this button I will add the following layer styles.

This is how my button will look like.

I will create a text menu at the top, and between text buttons I will create some lines with Line Tool. Please create the two lines with different color. The first one is a light gray, and the second line is
a black.