![]() Home | Inset Sidepanel Inset SidepanelFor Use With Web Creation or Graphic DesignBelow you will find various graphic design instructions as they relate to web design.
Step-By-Step Instructions: Create this shape with rounded rectangle tool. Fill it with #4B604D. Add two dark colored #101922 lines with high feathered brush.
Add default inner shadow and drop shadow in it.
Press control+j to duplicate the layer. Control+click on its layer name to select it. Move the selection as shown :-
Press shift+control+i to inverse the selection and alt+ctrl+click on its layer name.
Press control+j to duplicate the layer.
Again control+click on the layer to select the layer.
Go to select>modify>contract selection and contract it by 1 pixel.
Keep the selection active, inverse the selection and alt+control+click on its layer name to select outline of the layer. Create another layer. Use brush tool to add some white shades as shown.
Dulicate and place the layer as shown :-
Click on the first layer which we duplicated. Keep the drop shadow and inner shadow sattings same but apply this gradient overlay.
Now, group and merge all layers to have a single layer. Duplicate this layer as shown.
Draw a line either with rectangle tool or with rounded rectangle tool. The upper rounded shape is not important here because we will send it back. Apply same layer style as we applied to the third layer (drop shadow, inner shadow and gradient overlay).
Send this line back by pressing shift+ctrl+{. Duplicate this layer for 7 times.
Draw these buttons with ellipse tool. Apply same layer style.
Draw these half rounded shapes with ellipse tool and if you like than you can fill the background with ##8A988C color. Our left navigation pannel is ready :)
|
|||||