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



Author's URL: Amoebic Tutorials
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

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

Captcha