Hello and welcome to another tutorial here on trendyTUTS.com. For today I will show you how to create a nice elegant and colorful business website layout in Photoshop.

If it’s the first time when you came on trendyTUTS, I would like to let you know that we have dozens of other cool website layout tutorials on our Website Layout Tutorials section. Here you will find different kinds of psd templates (for various niche) and I’m sure that it will help you a lot!

If you’d like to download this photoshop template you will need to sign-up for a Premium Membership. As a premium member you will have unlimited access to the entire collection of PSD Templates (the source file for our tutorials), Premium Files and PSD to HTML Tutorials.

Here is my final result:

Let’s start the tutorial! Open Photoshop and create a new document 1020 by 1550px

Step 1

I will select Rectangle Tool and I will create this 2 Rectangles. For the first one I have used this color: #867158 and for the second one, this color: #bd822a

Step 2

With Ellipse Tool I will create this 2 white shapes:

For each of them I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) of about 70px
My result:

Step 3

I will select Type Tool and I will create the logo. I will write: “Business Template” and as a tagline I will add: “a design by trendyTUTS”.

Step 4

On the right side with Rounded Rectangle Tool I will create this white shape:

And with Rectangle Tool I will create an orange shape. I have applied this layer styles:

My result:

Step 5

On this step I will create the navigation. First I will select Rounded Rectangle Tool with a radius of 10px I will create a shape and I will apply this layer styles:

My result:

Step 6

Having Rounded Rectangle Tool still selected I will create another shape (wich will be used as a rollover for our navigation). For this shape I have applied this layer styles:

My result:

Step 7

With Type Tool I will create the links for navigation.
Here is my result:

Step 8

With Pen Tool I will create this 2 shapes. For each of this shape I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) of about 10-12px. Here is my result:

Step 9

Above the shape created on step 8 I will create a large rectangle. With Rounded Rectangle Tool (with a radius of 10px) I will create this shape and I will apply this layer styles:

My result:

Step 10

On the top of the shape created on step 9, I will create another shape, using again Rounded Rectangle Tool with 10px radius. For this shape I have used this color: #06595a
My result:

Step 11

With Ellipse Tool I will create this circles.

For the first one I will apply this layer styles:

The for the rest of them, this layer styles:

My result:

Step 12

With Type Tool I will add some text

Step 13

From our Business Vector Icons, available to our Premium Members I will use an icon showing a chart and I will place it on my document.

Step 14

Using Rounded Rectangle Tool I will create 2 “Call to action” buttons.

For the first button I have applied this layer styles

My result:

For the second button I will apply this layer styles:

My result:

Step 15

With Type Tool and using some images and some vector icons from our Premium Files, available to our Premium Members I will create the content area.

Step 16

On this step we will create the footer. Here I would like to create a contact form (I have created it using Rectangle Tool) and some more paragraphs with text. Here is my result:

Here is my final result:

The tutorial is finished now. I hope your result is the same with mine, if not better! If you’d like to know when we post a new tutorial, you can follow trendyTUTS.com on twitter.

blog comments powered by Disqus