ArtBox7.com

Create a colorful web layout in Photoshop with resources from ArtBox7.com

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.