• Embed Doc
  • Copy Link
  • Readcast
  • Collections
  • CommentGo Back
Download
 
tipsforwebsitedesign.com 1
Rounded Corners Content Box Photoshop CS4 Tutorial
In this tutorial I am going to show you how to make content boxes with rounded corners which youcan use in your web design. In the example below I made a series of content boxes which weremade in to clickable links to pages on the client’s site.You will need to create each content box as a separate Photoshop file.Create a new document with a white background and 190 x 130 pixels dimensions
 
tipsforwebsitedesign.com 2Create a new layer, then hide your background layer. Select the Rounded Rectangle Tool and thenset the radius to 10px and check anti-alias. Under options choose “Fixed Size” with 180×130 pxdimensionsNow draw a white rounded rectangle in the new layer you created. Now you need to center therectangle on the layer. To do this you need to click on the move tool:You will need to Select All (CTRL+A) then Click on align vertical centers then align horizontal centers(see below if you are not sure how to do this).This will make sure that you rectangle is sitting exactly in the center of your layer.
 
tipsforwebsitedesign.com 3Now deselect by hitting CTRL+D. Now you need to create the border around your rounded rectangleusing a layer style. Click Layer > Layer Style and add a Stroke blending option to your roundedrectangle layer as below. Change the size to 1px and choose your color (I have used grey # 999999).Unhide your background layer and your rectangle should look like this:Now you need to use a picture that has a transparent background like this butterfly I used.
of 00

Leave a Comment

You must be to leave a comment.
Submit
Characters: ...
You must be to leave a comment.
Submit
Characters: ...