15
Feb
2013

Create clean black website layout in photoshop

Posted in: Photoshop , Comments Off

Hello friends, Today I will show you how to create a nice looking black website layout in Photoshop. This layout can be used for company website, portfolio, hosting website, SEO service provider etc.

Below is the final image of the layout we will design in this tutorial.
31

Step 1:

Create a new document in Photoshop (File >> New) of size 1200 X 1100 pixels and choose “Transparent” background.
1

Step 2:

Fill the background with #262424 color using paint bucket tool.
paint-bucket-tool

3

Step 3:

In this step we will separate header part. Create a new layer. Select “Rectangle marquee tool” and select around 300px height. Fill the selected part with color #49453c using paint bucket tool.
4

Tip: To select fixed size area, see below image.
5

Step 4:

In this step we will leave equal margin of 100 px from both side. Create two guide leaving margin of 100px from left side and right side from “windows >> New Guides..
6

7

8

Step 5:

Design a cool logo in left side of the header.
9

In right side I will add some icons and links text. Also apply following layer style to each icon to give inset look.
10

So, it looks like this now.
11

Under each icon add some lights using soft brush tool and of diameter 130px.
12

Now add a vertical line between each links. Apply same blending style as we have applied for icons.
14

Step 6:

Create a new layer and select “Rectangle tool”.
rectangle tool

With color #12100a draw a rectangle shape as shown below.
15

Now we will add shadow to this rectangle shape. Select “Elliptical tool” and create a shape in black color as shown below.
16

Now apply motion blur (Filter >> Blur >> Motion Blur) to this elliptical shape.
17

And then apply Gaussian blur (Filter >> Blur >> Gaussian blur).
18

So, it looks like this now.
19

Add two arrow shape using custom shape as shown below. And add following layer style to these arrow shape.
21

22

20

Add a thumbnail image and some text in the rectangle shape box.
23

Step 7:

Below the rectangle box, add some icon and text.
24

Select “Line tool” with 2px weight and black color and draw a line as show below also apply Motion blur to this line.
25

And apply following blending layer style.
26

It looks like this:
27

Add more text boxes.
28

Step 8:

Now we will design footer part. Fill the lower part with #000000 color.
29

We will divide footer part in three equal parts. First part will have about us. Add an icon for about us part. Next footer part will have company news. And third part will have company address.
Use Arial font, 12pt size and color #7b7b7b for footer text.

And at last add company copyright text in right bottom.
30

Final image

Below is our final image.
31

download psd file

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
Both comments and pings are currently closed.

Comments are closed.