Clean Rounded Content Box
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.
http://psdvibe.com/tutorials/rounded.../Picture 1.jpg
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
http://psdvibe.com/tutorials/rounded.../Picture 2.jpg
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
http://psdvibe.com/tutorials/rounded.../Picture 3.jpg
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
http://psdvibe.com/tutorials/rounded.../Picture 4.jpg
http://psdvibe.com/tutorials/rounded.../Picture 5.jpg
http://psdvibe.com/tutorials/rounded.../Picture 6.jpg
6. You should now have something that looks like this
http://psdvibe.com/tutorials/rounded.../Picture 7.jpg
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
http://psdvibe.com/tutorials/rounded.../Picture 8.jpg
8. Now insert the following blending options onto its layer
http://psdvibe.com/tutorials/rounded.../Picture 9.jpg
http://psdvibe.com/tutorials/rounded...Picture 10.jpg
http://psdvibe.com/tutorials/rounded...Picture 11.jpg
9. You should now have something that looks like this
http://psdvibe.com/tutorials/rounded...Picture 12.jpg
10. Now we want to add a shine to our rounded rectangle. To do so, CTRL+CLICK on your heading layer to select it
http://psdvibe.com/tutorials/rounded...Picture 13.jpg
11. On its own layer, fill it with #FFFFFF and then use your rectangle marquee tool to clear out the bottom half of it
http://psdvibe.com/tutorials/rounded...Picture 14.jpg
12. Go ahead and set its blending options to Overlay, and then lower the opacity to 20%
http://psdvibe.com/tutorials/rounded...Picture 15.jpg
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
http://psdvibe.com/tutorials/rounded...Picture 16.jpg
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
http://psdvibe.com/tutorials/rounded...Picture 17.jpg
http://www.psdvibe.com/wp-content/th...s/down_psd.jpg
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
