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

Clean Rounded Content Box


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

Clean Rounded Content Box image 1

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

Clean Rounded Content Box image 2

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

Clean Rounded Content Box image 3

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

Clean Rounded Content Box image 4

Clean Rounded Content Box image 5

Clean Rounded Content Box image 6

6. You should now have something that looks like this

Clean Rounded Content Box image 7

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

Clean Rounded Content Box image 8

8. Now insert the following blending options onto its layer

Clean Rounded Content Box image 9

Clean Rounded Content Box image 10

Clean Rounded Content Box image 11

9. You should now have something that looks like this

Clean Rounded Content Box image 12

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

Clean Rounded Content Box image 13

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

Clean Rounded Content Box image 14

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

Clean Rounded Content Box image 15

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

Clean Rounded Content Box image 16

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

Clean Rounded Content Box Tutorial: Final Result



Author's URL: PSDVIBE
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 "Clean Rounded Content Box"

Only registered users can write comment

No comments yet...