Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Butterfly Content Box

Butterfly Content Box


1. Start Photoshop.Open a new document 300 x 300 with transparent background. Then with your Rectangular Marquee Tool make a shape as big as your content box should be and fill it with white (#FFFFFF).

2. Then go to Layer- Layer Style and choose Inner Shadow. the color i choose is (#DDDDDC), really easy to remember when you need a light grey.

image 1

3. Go to Layer-New- Layer. With your Rectangular Marquee Tool create a little rectangle in the upper part, in this rectangle you will add the title. Now fill it up with white (#FFFFFF) and then go to Layer-Layer Style again and choose the Gradient Overlay. For the light blue use (#718CBB) and for the darker one choose (#3F5783).

image 2

4. The box is almost done. With your Single Row Marquee Tool cut a line, just put it on the bottom of the second rectangle and press delete. Add some text and the final result will be this.

Butterfly Content 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

Author's URL: Alexandra Groza
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Butterfly Content Box"

Only registered users can write comment

No comments yet...