Clean Rounded Content Box

In this tutorial you will learn how to create a clean rounded content box for your website. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

Category:

Photoshop

1. The first thing we need to do is create a new document with the dimensions of 810×800. You can make it larger if you wish.

2. Next we want to us our paint bucket tool to fill our background with #000000.

3. Now, we want to go ahead and create the box that will house our content. Lets go to our tools pallet and choose our rounded rectangle tool and set the radius to 15px and make a rectangle like the following

4. The next thing we want to do is to create a little navigation panel for our box. To do so, use your rounded rectangle tool to make a rectangle similar to the following

5. Make sure you have that rectangle below your content area in the layers pallet and then input the following blending options onto its layer



6. You should now have something that looks like this

7. Next we want to make a heading for our navigation panel. To do so we want to use the rounded rectangle with the radius set to 15px yet again and make a rectangle similar to the following

8. Now insert the following blending options onto its layer



9. You should now have something that looks like this

10. Now we want to add a shine to our rounded rectangle. To do so, CTRL+CLICK on your heading layer to select it

11. On its own layer, fill it with #FFFFFF and then use your rectangle marquee tool to clear out the bottom half of it

12. Go ahead and set its blending options to Overlay, and then lower the opacity to 20%

13. Now just name your header and your done with that. Then use a font like Helvetica to add some links. By each link I made a square using my rectangle marquee tool filled with #0c6aa2

14. Now all you need to do is repeat the same steps for the right side and add some content and you’ll have something that looks like this

 
Get a commercial/public use licence for this PSD (More info)

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

If you enjoyed this tutorial please take a moment to visit one of our sponsors

Show Some Love
Thank you for your support

10 Responses

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors