Dark Design Portfolio Website

Open Photoshop and create a new image, 760x500, the height isn't too important but by setting it at 500 it gives you an idea of the structure if it had content in it.

Fill the background with #1f1e27, then go to Filters » Noise » Add Noise.

Set to 0.6% Gaussian and tick the Monochromatic box.

Next create a white rectangle filling up the whole width around 40px or so high on a new layer.

Click for Larger Version

Then apply the following Blending Options to the layer:

Then create a shine effect by creating a new layer above the bar. Make it 50% the height of the bar and fill it with white and change the opacity to 20%.

Click for Larger Version

Next add your companies text to the top left of the bar. I am using Arial Narrow, 30px, with Anti-Aliasing set to Smooth.

If you want you can add an outer glow like this to give it a better effect:

Now create a box that takes up 100% of the height of the bar and set the width to however wide you want your buttons on to a new layer. Set the opacity to 10%.

Repeat this for the whole bar.

Add your text for your buttons. I am using Arial Rounded MT Bold with a font size of 12px and the Anti-Aliasing set to Smooth.

Now to create the content area and footer.

Create a large rectangle on a new layer and fill with #29273a like this:

Ctrl + Click the layer and contract the selection by 5px. On a new layer fill this selection with #1c1b24.

Now Ctrl + Click the new layer that you just filled with #1c1b24. Hold down Shift and press Up twice. Now hold down Ctrl + Shift and press I to invert the selection, press Delete. You should have something like this:

Click for Larger Version

Add your content and you are finished. Here is my result: