web-layout-tutorials/how-to-design-an-elegant-website-in-photoshop ~ Sigma Tuto

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 Tutorialssection. 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 andPSD 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

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

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

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

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

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:

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:

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

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

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

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:

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

With Ellipse Tool I will create this shape:

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

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

My result

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

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

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:

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

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

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.

With Type Tool I will add some text

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:

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

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.

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

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: