Adobe Photoshop
Free Tutorials » Adobe Photoshop » Dark Layout Part 2
Finish your dark layout in photoshop in this part 2 of the dark layout tutorial.
Step 1
Make a new layer (name it "top fade") underneath all of the other layers. Make a selection similar to the one below.
Step 2
Fill the selection in with black, press ctrl + D to deselect. Bring up the blending options for this layer and select "Gradient Overlay". Use the options below & press OK:
Step 3
Now duplicate the bottom navigation bar layer (one which has the naviagtion text on top of it) and place it at the very bottom of the layout.
Now duplicate the layer you named "top fade" and open up its blending options & change the settings for gradient overlay and press OK:
Step 4
Your layout should be looking like something below, click image for 100% version:
Step 5
Make a new layer underneath every other layer. Make a selection similar to the size below:
Step 6
Fill the selection in with black and bring up the blending options and use the settings for gradient overlay:
Step 7
Stroke then press OK:
Step 8
Your Layout should be looking like below:
Step 9
Change your foreground colour to #2F2F2F and select the Rounded Rectangle tool. Set the radius to 4 pixels. Now make a simple rectangle similar to the size below.
Step 10
Bring up the blending options, chose Inner Shadow:
Step 11
Now "Stroke":
Step 12
Should be looking like something below now:
Step 13
Now make a new rectangle but filling the rest of the main area and fill it with the same options as the left box:
Step 14
Make a new shape with the rounded rectangle tool and make the radius 2 this time. Position & make it the same size as below.
Step 15
Bring up the blending options, gradient overlay:
Step 16
Stroke:
Step 17
Should look like this:
Step 18
Now duplicate the button shape and place it at the bottom of the rectangle. Now duplicate the layer again & stretch it the width of the main big content box. Duplicate that layer and place it at the bottom.
Step 19
We have basically finished the layout, feel free to adjust it to your liking. Finish off by adding some finishing touches like adding titles for the content boxes, adding copyright text to the bottom bar etc.
The next part (part 3) you will learn how to edit, slice and code your layout. Please select part 3 from the photoshop tutorial listing page!
Tutorial comments
21.02.2008 -
how big should the new file be...
24.10.2007 -
Good tuturial ;]
View all user comments for this tutorial.
Tutorial statistics
- Date added:
- 30.10.2004
- Author:
- Zymic
- User rating:
- 5/5
- Total views:
- 4683
- Total comments:
- 2