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
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:
My result
For navigation, I have selected first Rectangle Tool and I have created a similar shape
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:
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:
My result
Because this will be a slideshow I will create some arrows.
Select Ellipse tool and create a similar circle
Then apply this layer styles:
Then with pen tool create an triangle. Right click on it and choose “Make a selection”
Then select paint bucket tool and fill the selection with this color #c0c0c0
Here is my final result for Header
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:
Step 4 – Creating the footer
Again here is quite easy. The first 2 section I have created with type tool. My result:
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:
My final result for footer:
Well the tutorial is finished now. I hope you have a great time reading it.
