Hello. In this tutorial I will try to create a colorful web layout and I think the output will be a really nice one.
For this tutorial I have used:
1. Photoshop
2. Complete Designer Set
Let’s start the tutorial
Open Photoshop and create a new document. Mine has the following dimensions: 1020 by 1020px.
Next with rectangle tool I will create 3 colorful shapes. For the first one I have used this color #a0e1da and the following dimensions: 1020 by 350px.
For the second one I have used this color #f5e7ca and the shape has the following dimensions : 1020 by 650px
The third one has the following dimensions 1020 by 200px and as a color I have used #b8d758
Image may be NSFW.
Clik here to view.
Step 1 – Creating the logo & navigation
With type tool I have written Art (using orange – #f9882a, the font used is Agency FB – 36px) and then I have typed Box7 (color – #626262, font Arial – 32px) and I have applied the following layer styles:
Image may be NSFW.
Clik here to view.
My result
Image may be NSFW.
Clik here to view.
For navigation, I have selected first Rectangle Tool and I have created a similar shape
Image may be NSFW.
Clik here to view.
As a color I have used #a6efe7
Then With type tool I will add the links for navigation and I will apply the following layer styles:
Image may be NSFW.
Clik here to view.
Step2 – Creating the header
Well the header is quite easy to create. On the right side I will add some images and on the left side I will add some text. For the text I have used this layer styles:
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
My result
Image may be NSFW.
Clik here to view.
Because this will be a slideshow I will create some arrows.
Select Ellipse tool and create a similar circle
Image may be NSFW.
Clik here to view.
Then apply this layer styles:
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Then with pen tool create an triangle. Right click on it and choose “Make a selection”
Image may be NSFW.
Clik here to view.
Then select paint bucket tool and fill the selection with this color #c0c0c0
Here is my final result for Header
Image may be NSFW.
Clik here to view.
Step 3 – Creating the content area
Well to create the content area is quite easy. All you have to do is to use Type tool with some vector icons from Complete Designer Set. Here is my result:
Image may be NSFW.
Clik here to view.
Step 4 – Creating the footer
Again here is quite easy. The first 2 section I have created with type tool. My result:
Image may be NSFW.
Clik here to view.
I have a newsletter area, here I will use rectangle tool and I will create 2 shapes
And I will apply the following layer styles:
Image may be NSFW.
Clik here to view.
My final result for footer:
Image may be NSFW.
Clik here to view.
Well the tutorial is finished now. I hope you have a great time reading it.
