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
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
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:
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:
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:
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.
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:
Now I will create the content area. I will select Type Tool and I will write “Latest Project”. 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.
Over this triangles I will add an image. I will repeat the same process and I will create a total of 6 similar thumbnails.
Here is my result:
Want to Download the Source File?
In order to download the source file you will need to become a Premium Member.
Already a premium member? When you click on the download link please make sure that you are logged in.
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