ArtBox7.com

Create a product/software/presentation web layout using Photoshop with resources from ArtBox7.com

Hello. In this tutorial you will learn how to create an eye catching web layout using Photoshop and some resources from ArtBox7.com
To create a similar web layout you will need:
1. Photoshop
2. Vector Icons from Complete Designer Set
Let’s start it
Open Photoshop and create a new document (Ctrl + N) with the following dimensions: 1020px by 1020px and as a background choose white

Step 1 – Creating the logo

First I will select ellipse tool and I will create a similar shape:

Then I will go to Filter>Blur>Gaussian Blur

And here select radios of 15.8px

My result

Next select rectangle tool and create a shape above the shadow created in previsions step

Now I will add the logo. For “Art” I have used TOSCA ZERO font (36px) with the following layer styles:

Here is my result

Step 2 – Creating the navigation

With rectangle tool I will create a similar shape:

Then I will add the following layer styles:

With type tool I will add the links for navigation
Here is my final result for navigation:

Step 3 – Creating the header

First I will select rectangle tool and I will create a similar shape. Mine has the following dimensions: 1039X309. As a color I have used # 646a7a

Next I will add this texture on my layout. On my layer palette I will  create a Clipping Mask (to have the image fitting exactly on my shape)

than I will change the blending options to Overlay and I will lower the opacity to 88%.

My result

With type tool I will add some text and then an image.

Next I will select ellipse tool and I will create this shape:

I will go again to Filer>Blur>Gaussian Blur (exactly the same steps used to create the shadow for Logo). Here I will use a radius of 15px

I will select rectangle tool (as a color I have used: # ededed) and I will create a shape just above the shadow created on previous step

Next with type tool and with some vector icons from Complete Designer Set I will finish the header. Here is my final result:

Step 4 – Creating the content area

It’s quite easy. To create this area I have used (Type Tool) and some vector icons from Complete Designer Set. Here is my final output for this layout: