Hello and welcome to another tutorial, here on trendyTUTS.com. For today I will create a soft website which can be used for a landing page, to sell your services, your digital products, etc.

This psd template can be used for a landing page but can be used as well for a full website.

If you’d like to see more tutorials on how to create different kinds of psd templates (for various niche), I invite you to visit Website Layout Tutorials section.

Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this psd template in Photoshop, but I will not cover the PSD to CSS/HTML conversion. If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.

As a premium member you will be able to download all our Web Layouts (PSD and CSS/HTML version for each tutorial), all Premium Files and unlimited access to our PSD to CSS/XHTML Tutorials.

Click Here To See The Live Preview (CSS/HTML)

Here is my final result:

To create this web layout I have used:

• From Premium Files available to our Premium Members, I have used Colorful Swirly Vectors and People chatting/Speech bubbles

Let’s start the tutorial
Open Photoshop and create a new document Ctrl + N (dimensions 1020 by 1150).

Next I will set the Foreground Color to #efefef and with Paint Bucket Tool I will click one time on my document.

Step 1- Creating the top part (logo, style switcher and navigation)

First I will select Rectangle Tool and I will create this rectangular shape on the top and I will apply this layer styles:

I will make sure that I have selected this shape on my layer styles and I will go to: Edit>Transform> Wrap

Once you click on Wrap, look on the top menu in Photoshop. From the drop down menu choose Arch and set the bend to 5%.

You should have something like this now:

Next I will create the logo. With Rectangle Tool I will create a square using this color: # f96e11. To create a perfect square hold down Shift + Alt while you are creating the square.

Now go to Edit>Free Transform (Ctrl + T) than while you are holding Ctrl on your keyboard drag from the right corner of the shape using Move Tool (V)

Proceed in the same way for the top left corner of this shape.

Next with Type Tool I will add the text for the logo:

The logo is finished now.

On the right side I will create some links for the rest of the pages (in case you would like to use this template for a website instead of a landing page). To add this links I will use Type Tool.

Now the final step would be to add a styleswitcher. This one it will be used on the coded CSS/HTML template (availabe to our Premium Members) to change the background color.

To create this styleswitcher, I will select Rounded Rectangle Tool with a radius of 5px and I will create a shape than I will apply this layer styles:

On the top of this shape I will add three squares with the colors which will be used for background .

My result:

Step 2 – Creating featured area

First with Type Tool I will add some text

Than to make a separation between the heading text and description text with line tool I will create a line and I will apply this layer styles:

On the right side I will add a nice ornament from Colorful Swirly Vectors. This vectors along with all files from our Premium Files, all source files of our Web Layout Tutorials and unlimited access to our PSD to HTML section are available for our Premium Members.

Next using Ellipse Tool I will create this shape.

I will go to Filter>Blur>Gaussian Blur and I will apply a gaussian blur of 8px. With Rectangular Marque Tool I will make this selection:

I will hit Delete on my keyboard and then I will press Ctrl+D to unload the selection. I will select Line Tool and I will add a small line of 1px height over the shadow.
My result:

Next with Rounded Rectangle Tool with a radius of 10 px I will create 2 buttons:

For the button on the left side I will apply this layer styles:

And on the button from the right side I will apply this layer styles:

My result:

Step3 – Creating the Pricing Area

First I will select Rounded Rectangle Tool with a radius of 5px and I will create this shape and I will apply this layer styles:

Next I will select this shape on my layer palette, I will press on my keyboard Ctrl + J to duplicate this layer. I will right click on the duplicated layer and I will choose Raserize Layer.

Now I will select Rectangular Marque Tool and I will make this selection over the rasterized layer.

Once you have a similar selection, hit Delete on your keyboard and Ctrl + D to unload the selection, than apply this layer styles:

My result

As you can see I have created a nice contrast on the top of the shape. Next I will select Rectangle Tool and I will add few more rectangles:

With Type Tool I will add some text

Now I will select again Rounded Rectangle Tool with a radius of 5px and I will create this shape on the middle

I will apply this layer styles:

Than using the same trick used to for the shape from the backward I will create an orange shape on the top.

With rectangle tool I will create few more grey shapes

Than with Type Tool I will add the text.

The “ORDER NOW” button has been created using the same layer styles like the left button from Featured Area.

Step 4 – Creating the Content Area

In this area I will add some testimonials and a contact form.

First I will like to create a dotted line to make a separation between the pricing area and content area. Because Photoshop does not have a special tool to create this we will need to find a way to do it. The best way to create a dotted line in Photoshop is to use the Brush Tool.

Select Brush Tool (B) using a brush of about 1px in size (use the default brushes), then press F5 to open the Brush Manager or go to Window>Brushes.

Here on Brush Tip Shape, look down at Spacing and set the spacing to 726%.

Than drag a line with Brush Tool. Here is my result

Next under this line I would like to create a Speech Bubble. To do that, first I will create a new layer on my layer palette (Ctrl + Shift +Alt +N) I select Rounded Rectangle Tool with a radius of 10px, then from the top I will select Paths….and I will create this path:

With Pen Tool I will create the second path.

Now I will select Path Selection Tool and holding Shift I will select both paths. I will right click on them and I will choose Fill Path.

A new window will pop up

Hit OK, than hit Delete Button to delete the paths
My result:

Next I will lower the opacity to 0% and I will apply this layer styles:
My result:

Using Type Tool I will add some testimonials and from our Premium Files, available to our Premium Members I will add some peoples from People chatting/Speech bubbles

In the same way I will proceed for the right side.
Here is my result:

On the middle of the content area I will add some forms using Rounded Rectangle Tool.

For the SUBMIT button I have used the same layer styles used for the button from the Featured Area.
At the end, using Brush Tool I will add a dotted line. Here is my final result for Content Area:

Step 5 – Creating the Footer

Footer is really easy to create. Basically here I will follow the steps from the top area (where I have created the logo, styleswitcher, etc)

Here is my final result for this layout:

If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.

Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTs.com.