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

Round Content Box


Step 1

Open a new document and create a rounded rectangle using the Rounded Rectangle Tool.

image 1

Step 2

Duplicate this layer and change the color of this new rectangle to white. Goto Layer>>Rasterize>>Layer. Now select the bottom half of this layer and press delete. You should now see the top of the white rectangle and the majority of the first rectangle.

image 2

Step 3

Set the opacity of the white rectangle piece to 50%.

image 3

Step 4

Now make a new layer and create another rounded rectangle within the dimensions of the first rectangle. Double click this layer to get to its Layer Style. Apply a gradient overlay with similar colors as the first rectangle. Make sure that whatever you choose, the lighter color must end up on top. I used the same orange as the first rectangle for the bottom and a lighter orange on top.

image 4

Step 5

Now type something up for the header and set the text color to the color of the first rectangle. You can do whatever you want with the header. I added an icon as well.

image 5

Final Result:

Round Content Box Tutorial: Final Result



Author's URL: Amoebic Tutorials
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 "Round Content Box"

Only registered users can write comment

No comments yet...