Home Photoshop Web Layout Create a Dark Portfolio Layout or a CSS Design Showcase Layout

Create a Dark Portfolio Layout or a CSS Design Showcase Layout

Added: May 16, 2011 Level: Beginner Software: Photoshop

I will create a new document with the following size: 1000 pixels wide and 1200 pixels height. I will set my foreground color to #1d1d1d, and then with Paint bucket toll I will press one time inside my document.
With Rectangle Tool I will create two shapes on the bottom and on the top of the layout. The color I have used for these two shapes is #222222.

For both shapes I will use the following layer styles:

This is my result so far

I will create a placeholder for logo. For this I will use Rectangle Tool and I will create a shape on the top left side

For this shape I will add the following layer styles

After you add all the settings your shape will look like this one

I will create another rectangles in the middle of the layout, and I will use the same layer style from above. Please click on the image to see better the result

Now I will use a few icons from this set of Mono vector icons

I will open the eps file inside adobe illustrator and I will select some random icons. To copy an icon you need to select it in adobe illustrator with Selection Tool, and then press on CTRL+C ( to copy the icon to clipboard )
The next step is to paste ( CTRL+V )the icon in Photoshop. After you add some icons to the layout it will look like mine

For all icons I will add the same layer style from below

After I will use the same layer styles for all my icons it will look like this

For the orange icon you have the layer style below

Now I will select all layers with icons in my layer palette ( hold down CTRL key and with your mouse click on each layer you want to select )
After I have the layers selected I will drag them to the " Create a new layer " button from the bottom of the layer palette.
This action will duplicate all icons and will create separate layers for each icon. You will see that all duplicated icons will be selected. This is a very good because I will press on CTRL+E to merge all the selected layers into a single one.
After that I will go to Edit - Transform - Flip Vertical, and with Move Tool I will place the layer like in the following image

I will change the opacity value to 10 % and with Eraser Tool ( use a smooth round brush ) I will delete the bottom of the icons. in this way you will create a nice reflection for these icons.

I will place our logo and on a new layer I will create some thin lines with Pencil Tool ( please note that your pencil brush size should have 1 pixel )

I will add alone some text and images on this layout. please click on the image to see the full size layout.

I will create a new layer ( press on CTRL+SHIFT+ALT+N ) and with Pencil Tool I will create another thin line. I will use two colors: orange - fe9901 and a dark gray - 313131 and I will draw a horizontal line with Pencil Tool.