ArtBox7.com

Create a nice business/company related web layout in Photoshop

Hello and welcome to another tutorial on our blog! On this tutorial you will see how you can create an nice web layout, where you can showcase your products.
For this tutorial you will need:
1. Photoshop
2. Complete Designer Set
Open Photoshop and create a new document with this sizes: 1020 by 1020px.

Step 1 – Creating the logo

First I will select Rectangle Tool and I will create this shape:

Mine has the following dimensions: 80X1020px and as a color I have chosen #2a363b
Next I will select Ellipse tool and I will create a similar shape (as a background I will choose white)

Then I will go to: Filter>Blur>Gaussian Blur

Here I will choose a radius of 34.5px

Then with type tool I will add some text. For Art I have used Bookman Old Style, 36 px in size and a pinkish color (#e84a5f), and for Box7 I have used Tahoma font (30px). Here is my result:

Next I will select again Rectangle Tool and I will add some text on the right side,  on the same line with the logo.
Here is my final result for this step

Step 2 – Creating the Header

With rectangle tool I will create a similar shape. Mine has this dimensions: 1020X309, as a color I have used: #e84a5f. With Type tool I will add some dummy text. Exactly below the text I will use an button (so called “Call to action” buttons)
To create this button I will select Rounded rectangle Tool  with a radios of 12 px

Then I will apply the following layer styles (only for the button):

With Type Tool I will add some text. Here is my result:

The final step for header would be to add an image with my tutorials
Final result for header:

Step 3 – Navigation

Select Rectangle Tool and create a similar shape

Then apply the following layer styles

Select again rectangle tool and create a similar shape

Then apply the following layer styles

Next using type tool I will add links for navigation

Step 4 – Creating the content area

I will select Rectangle Tool and I will create a shape at the bottom of the content area

Then using type tool and some vector icons from Complete Designer Set I will fill the content area
Here is my result:

Final result for this web layout