How to create a sleek dark website layout

In this tutorial i will show you a very simple way to create an awesome dark business layout.

You can see the end result bellow. If you want to see the full size layout i recommend you to press on the Demo button and you will see all the details.
Dark PSD layout

For start you need to create a new document with a dark background. I will use the following color: #212121. To add a color to your document the easy way is to use Paint Bucket Tool.
Dark PSD layout

With Rounded rectangle tool i will create a shape. I will use this shape to create a slide show in the middle of the business layout.
Dark PSD layout

I will add some layer styles for this shape. please try to save each layer style from all my tutorials, because it will save you a lot of time. To add layer styles please select the round shape, and then go to Layer > layer style.
Dark PSD layout
Dark PSD layout
Dark PSD layout

I will create one more time a round shape. This time i will use a white color.
Dark PSD layout

On the header of the layout i will create a new shape. Here i will add a text logo, and a menu. To create the shape please use Rectangle Tool
Dark PSD layout

I will add another shape in the footer with the same tool.
Dark PSD layout

For both layers: header and footer i will add the following layer styles.
Dark PSD layout

I will use Line Tool to create two lines. It is very important to set the line weight to 1 pixel. Please also create the lines with the following colors:
Dark PSD layout

As you can see from the next image, i will add the lines several time.
Dark PSD layout

Right above the footer i will create a round shape.
Dark PSD layout

Please use the following layer styles.
Dark PSD layout
Dark PSD layout
Dark PSD layout

Now it is very good if you turn on the Grid ( if you are on a mac user press on CMD+’, and if you are on a windows press on CTRL+’ ). Then please use Pen tool to create the following shape. Please note that i have used a red color, because you will see better.
Dark PSD layout

I have changed the color to black, and then i will create a similar shape, but this time i will use a white color.
Dark PSD layout

I will create some buttons with different colors. Download the PSD file and then you will find the color codes for each gradient i have used.
Dark PSD layout

I will add over this colorful buttons some text.
Dark PSD layout

On the header of the website i will create a logo : ” Webdevtuts¬† “, and on the right side i will add a simple menu.
Dark PSD layout

On the footer of the website i will create some Round shapes and some text.
Dark PSD layout

Bellow you can find the layer styles i have used for the forms from above
Dark PSD layout
Dark PSD layout
Dark PSD layout

I will add some text inside the forms, and over the button.
Dark PSD layout

I will add also a nice red button, and some text in the dark area.
Dark PSD layout

Under this slideshow i will add some text, and some icons. To add the icons is very simple. Open the icon inside photoshop, and then drag it to the layout. With Move tool you can align the icons.
Dark PSD layout

You can see in the next image also the right side of the layout.
Dark PSD layout

Here is my final results. I hope you like it.
Dark PSD layout

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply