How to design an elegant website in Photoshop

Hello and welcome back to trendyTUTS.com. For today I will show you how to design an elegant website layout in Photoshop.You can use this template to  showcase your portfolio for a personal website, for a business one etc.
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

SiteGrinder 3 will automatically convert this Photoshop web design template from a PSD to HTML/CSS website – NO Slicing and NO coding skills required! Click here to see more…

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

Next select Rectangle Tool and create a large rectangle over your document. I have used this color: #e5e4e4

Step 1

I will select ellipse tool and I will create this white shape

Step 2

I will go to Filter>Blur>Gaussian Blur and I will apply a radius of about 35px

Step 3

From Premium Files, available to our Premium Members I will use Hand Drawn Vector Ornaments and I will add an element on my document.
I will lower the opacity to 4% also

Step4

Next I will select Rectangle Tool and I will create this 3 shapes at the top:

Step 5

With Type Tool I will write “Elegant Website” and as a tagline I will use “a design by trendyTUTS”. The font used is Ariston, with 48pt in size.
For “Elegant” I have applied this layer styles:



For “Website” this layer styles:




My result:

Step 4

On this step I’ll make use of our Premium Files again. This time from Universal Vector Icons 2, I’ll select a badge icon and I will add it on my document.

I will apply the following layer styles to my badge:



Here is my result:

Step 5

With Type Tool I will add some text on the right side. I will write “Call us – 1-800-elegant”

Step 6

I will use Rectangle Tool and I will create this black shape.

Step 7

Having Rectangle Tool selected I will create another shape on the top of the shape created Step 6. I have used a red color just for demonstration proposes. When you create this shape you will need to use this color: # e5e4e4

Step 8

Make sure that the layer of the shape created on step 8 is selected on your layer palette,select Direct Selection Tool and drag a little bit from the bottom left corner of the shape. Please see the screenshot:

Proceed in the same way for the right side. Here is my result:

Step 9

With Rectangle Tool I will create this shape. Color used: # d67474

Step 10

With Ellipse Tool I will create this shape:

And I will apply a Gaussian Blur of about 34px. My result:

Step 11

I will surround the navigation with this sign “——————————”. To create a nice effect I will apply this layer styles:

My result

Step 12

With Type Tool I will add the text for navigation
I have used Ariston font with 24px in size

Step 13

With Pen Tool I will create this arrow wich it will act as an selector for navigation.

Step 14

With rectangle Tool I will create this shape on the middle of the page. Make sure that the layer of the shape created is selected on your layer palette, select Direct Selection Tool and drag a little bit from the top left corner of the shape. Please see the screenshot:

I will proceed in the same way for the right corner, then I will apply this layer styles:

Step 15

With Rectangle Tool I will create another shape and I will apply this layer styles:

Step 16

With Pen Tool I will create this triangles at the bottom of the shape created on Step 15

I will apply a Gaussian Blur of about 40px.
My result

Step 18

Next I’ll make use of Premium Files. From Universal Vector Icons 2, I will add a Light Bulb
and from Hand Drawn Vector Ornaments, I will use some ornaments.

Step 19

With Type Tool I will add some text

Step 20

To enhance the title “We Bring Ideas to Life” I have used 2 type of fonts: Arial and Ariston. I have used also 6 lines (3 on the left and 3 on the right side of the title). For this lines I have applied this layer styles:

Step 21

With Pen Tool I will create this 2 triangles and I will apply a Gaussian Blur of about 10px

Step 22

On the top of the triangles created on Step 21, with Rectangle Tool I will create this shape and I will apply this layer styles.

Step 23

Having Rectangle Tool still selected, I will create another shape on the top of the shape created on Step 22, I will apply this layer styles and with Type Tool I will add some text

Step 24

Because this area it will be a jquery slideshow, we will need to create the arrows as well. I will select Line Tool with 10px weight I will draw 2 identical lines, than with Free Transform Tool (Ctrl + T) I will arrange them to create an arrow. I will apply this layer styles also:

Step 25

Now I will create the content area. I will select Type Tool and I will write “Latest Project”. I have applied this layer styles:

Step 25

With Pen Tool I will create this 2 triangles and I will apply a Gaussian Blur of about 10px.

Over this triangles I will add an image. I will repeat the same process and I will create a total of 6 similar thumbnails.