In this tutorial I am going to show you how to make content boxes with rounded corners which you can use in your web design. In the example below I made a series of content boxes which were made 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

 

Create a new layer, then hide your background layer. Select the Rounded Rectangle Tool and then set the radius to 10px and check anti-alias. Under options choose “Fixed Size” with 180×130 px dimensions

Now draw a white rounded rectangle in the new layer you created. Now you need to center the rectangle 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. Now deselect by hitting CTRL+D. Now you need to create the border around your rounded rectangle using a layer style. Click Layer > Layer Style and add a Stroke blending option to your rounded rectangle 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.

 

You will need to create a new layer (name it accordingly eg butterfly) and copy and paste your image in to the new layer. Now position your image where you want it to go on the layer.

 

Now you can add your heading text. Choose your font and type your heading. (I have used the font Segoe Print, Bold, 12pt, Color #003366)

Now type your main text using a smaller font. You will need to hit enter to go to each new line. I have used Trebuchet Ms, Regular, 11pt, Color #333333)

Now add your text to “Click Here” or “Read More” if it is appropriate for your content box. ( I have used Trebuchet Ms, Bold, 11pt, Color # 003366). Your content box should now look similar to this:

 

Now we will add a couple of drop shadow effects and you will be finished. Click on your Heading layer to select it, then click Layer > Layer Style and add a Drop Shadow to your text using the settings below:

Blend mode: Multiply
Opacity: 75%
Angle: 23%
Distance: 3px
Spread: 0%
Size: 5px

 

Now select your image layer and add the same drop shadow effect to the image (in this example it is the butterfly). Your clickable content box is now complete.

You can now go ahead and create the rest of your boxes.

Tags: Photoshop CS4, Tutorials, Website Design

This entry was posted on Wednesday, May 20th, 2009 at 12:20 am and is filed under Photoshop CS4, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.