|
Dark Design Portfolio Website |
|
Thursday, 10 August 2006 |
|
Dark Design Portfolio Website This tutorial with guide you through how to make this dark design portfolio website layout: 
| 1. | 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. |
| 2. | Fill the background with #1f1e27, then go to Filters » Noise » Add Noise. Set to 0.6% Gaussian and tick the Monochromatic box. |
| 3. | 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
|
| 4. | 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:

|
| 5. | 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. |
| 6. | 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
|
| 7. | Add your content and you are finished. Here is my result:
| |