ArtBox7.com

Create a nice web layout in Photoshop using Complete Designer Set

Hello and welcome to another tutorial here on ArtBox7.com
Today I will create an unusual web layout and I hope it will be useful for your future projects.
To create this tutorial I have used
1. Photoshop
2. Vector icons from Complete Designer Set.
Let’s start the tutorial
Open Photoshop and create a new document (Ctrl+N) with the following dimensions: 1020X 1020px, as a background choose: #8e8e8e
Next I will create the logo, which is quite simple. with type tool I will try first “Art” with Bauhaus 93 font and an orange color #f6b620, for “Box7″ I have used Tahoma font with grey #c6c6c6.

Step1 – Creating the navigation:

Select rounded rectangle tool with a radius of 12px and create a similar shape:

Next select ellipse tool and create 3 similar shapes on navigation:

Now for each shape I will apply a Gaussian blur with a radius of 7px

And with type tool I will write “Home”
Here is my result:

I will duplicate the same steps for the next buttons on navigation.

With Pen Tool I will create a similar shape

Then select Paint Bucket Tool and fill this area with #f2f2f2

Step 2 – Creating the content area:

Select rectangle tool and create a similar shape:

Then with rectangle tool create a similar shape (I have used red just for demonstrations proposes):

Make sure that you have Rectanle tool selected and create another 2 shapes (two black squares) and place them behind the red shape. Please see the screenshots:

Then go to: Filter>Blur>Box Blur

And for each square, apply a Gaussian blur (8-9 radius)

My result

I will duplicate this shape and I will create another two. I will add some vector icons from Complete Designer Set and with type tool I will add some text. Here is my result:

Now I will duplicate the shape used for navigation, I will modify it a little bit (increase the height) and I will place it on the middle of the shape

And I will apply the following layer styles:

Next I will place an image found on sxc.hu. Here is my result:

Now all you have to do is to repet the steps created above, because everything is similar with what we have already created.
The navigation is almost the same (I just changed the links and I have place them on the right side)

Final preview:

Stay tuned and don’t forget to subscribe to our rss updates because some new tutorials  will follow up shortly.