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

Rounded Content Box


1. Create new document in Photoshop (mine is 300x250),

2. Now, select the Rounded Rectangle tool from the tool bar:

image 1

3. Now, select a light grey for your foreground color, and drag a box from the top left of your document to the bottom right.

image 2

4. A line may appear around your box. Do not worry about it, it wont appear when you save it. Now that we have a simple rounded rectangle, lets make it nicer. Rasterize the layer with the rounded rectangle in it (Layer > Rasterize > Layer).

5. Now add an inner shadow with the following settings:

image 3

Which will make our box look like this

image 4

6. Now Add a Drop Shadow with the following settings:

image 5

And now our box looks like this

image 6

7. Now using your burn tool, brush the top of the box to add a shadow:

image 7

8. Do the same thing with the dodge tool to the bottom of the box to add a highlight:

image 8

9. Now, using a very fine dodge brush (around 5px), make a small highlight at the top corners of your box:

Rounded Content Box Tutorial: Final Result

10. And your done! I will leave the rest of your box up to you. There is a lot you can do to make your box unique to your site!

Example:

image 10

Now put it into your website or interface, and your done!



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

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Rounded Content Box"

Captcha