ArtBox7.com

Create a portfolio web layout in Photoshop using resources from ArtBox7.com

Hi! Today I will create another layout tutorial, here on ArtBox7.com and hopefully it will be useful for you.
To create a similar web layout you will need the following:

1. Adobe Photoshop

2. Some vector icons from Complete Designer Set
Let’s start the tutorial.
Open a Photoshop and create a new document (Ctrl + N) with the following dimensions:

As a background color i have used: #f3f3e7

Step 1 – Creating the logo

First select rectangle tool and create a similar shape:

Then apply the following layer styles:

Select ellipse tool and add a similar shape (using black). Make sure that you place the layer below the layer created on the step above, then apply a Gaussian blur

with a radios of 9.1

I will proceed the same way for the left and right and I will add some text for logo and in the right side a phone number (toll free)
Here is my final result for logo:

Step 2 – Creating the navigation

Select Rectangle tool and create a shape like mine (1020X56). I have used a blue color (#00bfe4)

Then I will add some links for navigation

For each link I have used the following layer style:

To see witch page is selected in navigation I will add small triangle using the pen tool.
First select pen tool and draw a triangle:

Right click on it (make sure that pen tool is still selected ). Here choose “Make Selection”

Then create a new layer (to create a new layer from your keyboard push Ctrl+Alt+N).
Once a new layer is created, select Paint Bucket Tool (as a color choose #f3f3e7)
Final result for navigation

Step3 -  Creating the header

To crate this, first I will add an image. I have found a good one on my hard-drive (all I have to do is to place it on my layout) then with type tool I will add some dummy text. And voila!
The header is finished!

Step4 – Creating the content area.

Here again is a really simple task. All you have to do is to add first the text. You will need to be patient and to make it looks good. For paragraphs I have used Tahoma font with 12px. Then for title I have used the same font title, but with 14px. The vector icons used are from Complete Designer Set

Next I will create the Portfolio area, wich is really easy. With type tool, some images from my tutorials and rectangle tool using #66d5e5 color you can create a similar area in no more than 2-3 minutes.
Here is my final result: