Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Side-a-Side Box
rss

Side-a-Side Box

Author: Alexandra Groza More by this author


1. Open a new document 400 x 400 and fill it with (#72828b). Now make a new layer from Layer - New Layer. With your Rounded Rectangle Tool make a shape not very big, as big as your box should be. Fill it up with (#e7ebeb).

2. Now Rasterize the Layer. You do that with a right click on the layer and you have an option there "Rasterize Layer". Now Ctrl+click on the layer to select it all. Pick the Rectangular Marquee Tool, hold Alt, and select the upper part of the shape.

image 1

3. Fill it with (#c6cfd0). Now do the same thing but this time select the half down part. and fill it with (#f5f7f7). Now this is the third time but the last. Do the same thing and select the half down part of the new white part. And fill it again with (#e7ebeb). You should have this:

image 2

4. Now with the Single Row Marquee Tool selected, we will divide the box. Be careful to divide it equally. For this you may wanna go to View - Extras. Put the selection were do you want to cut and press "Delete" and after that Ctrl+D to deselect.

image 3

5. Divide it like this.

image 4

6. Next go to Layer-Layer Style - Drop Shadow.

image 5

Add some text and content and here we are

Side-a-Side Box Tutorial: Final Result

`


About the Author:

Alexandra Groza, 20, junior web-designer and journalist. Contact informations: alexis-design.info and alex.groza@gmail.com


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Side-a-Side Box"