33000 Premium resources for designers

Design a dark business layout

in Tutorials, Web layouts by Razvan on March 18th, 20101 Comment


In this tutorial I will use only a few colors to create a dark business layout.With small modifications this layout can be used also as an wordpress blog.

It is very important to use patterns in your layouts. We have a set with 200 seamless pixel patterns, and this little piece of graphics can change the look of the website very much.

All downloads are available for VIP members only.

For this tutorial you need the following

Create a new document in Photoshop with the following size: 1000×1100 pixels. Change your foreground color to #2c2c2c, and then with Paint Bucket Tool press one time over your document.
Download the following set with 200 Photoshop seamless pixel patterns

Load the patterns inside Photoshop, and then create a shape with Rectangle Tool , at the top of the website.

Add the following layer style

You will find the pattern here

You can try to use also another patterns if you don’t like this one.
Here is my result so far

With Pen Tool I will create a button on the top side of the layout.

I will add some layer styles

Here is my button so far, and as you can see I will add there also some text

I will create another shape with Rectangle Tool ( I will use the following color #131313 )

With Pen Tool I will create another shape under this black shape. ( I will use a red color for this shape to see it better, what I am doing) Anyway I recommend you to use the same color as above ( #131313 )

To create this type of shape it is very easy if you turn the grid on ( CTRL+” )
I will select both layers in my layer palette, and then I will press on CTRL+E to merge them into a  single one.
I will add the following layer styles

This is my result. please press on the following image to see the details better.

With Rounded Rectangle Tool I will create some shapes like in the following image

Select all the grey shapes in your layer palette, and press on CTRL+E to merge them into a single one, then add the following layer styles

Here is my result so far.

With Rounded Rectangle Tool I will create another two shapes. The top one will be used as a search box, and the one from middle of the layout will be used to place there some news

For both shapes I have used the same layer styles

With Pen Tool I will create another shape on the bottom of the website

I have used the same layer style I have used for the slideshow.
I will create two small circles, and I will place them right above the background layer.

Now it is time to add some images. I will use a bokeh effect. You can see how I made the effect in this tutorial.

My final step is to add also some text.

Want to download this layered PSD layout? Register for a VIP account and get unlimited access to our huge collection with over 70.000 items + you will have also 12 months free updates.

Download Demo

Responses to “Design a dark business layout”

Leave a reply