Create clean black website layout in photoshop

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

Step 1:

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

Step 2:

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

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.

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

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..”

Step 5:

Design a cool logo in left side of header.

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

So, it looks like this now.

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

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

Step 6:

Create a new layer and select “Rectangle tool”.

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

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

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

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

So, it looks like this now.

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

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

Step 7:

Below the rectangle box, add some icon and text.

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

And apply following blending layer style.

It looks like this:

Add more text boxes.

Step 8:

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

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

And at last add company copyright text in right bottom.

Final image

Below is our final image.

Posted in Photoshop