business cardsAbout usRequest a quotationFAQsContact usSearch siteLinksbusiness cards
header
lbordertop
176head

1x1

Photoshop Tutorials

menutop
nb
menudiv
nb
menudiv
nb
menudiv
nb
menudiv
nb
menudiv
nb
menudiv
nb
menudiv
nb
menudiv
nb
menudiv
nb
menudiv
nb
menudiv
nb
   
 

Please use QuickSearch Menu top right for more options

menuclose
372div-trans-176
372div-trans-176
11-1
392head

1x1

A simple, clean content box created in Photoshop

1x1

1x1

A simple, clean content box

Photoshop Tutorials | A simple, clean content box created in Photoshop 1

Step 1:

Let's start out by creating a new file. I used a 400x200 pixels canvas set at 72dpi, and I filled my background with a white color. Now create a new layer set and name it 'Content Box'.

Select the Rounded Rectangle Tool and above your screen under the options palette choose Fill Pixels, set the radius to 14 px and check anti-aliased. Create a new layer and draw a rounded rectangle with 260×181 px dimensions and #7093A4 color shade.

Photoshop Tutorials | A simple, clean content box created in Photoshop 2

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Stroke blending options to your blue rounded rectangle layer.

Photoshop Tutorials | A simple, clean content box created in Photoshop 3

Photoshop Tutorials | A simple, clean content box created in Photoshop 4

Photoshop Tutorials | A simple, clean content box created in Photoshop 5

Step 3:

Now draw a rounded rectangle with 260×26 px dimensions and #7093A4 color shade.

Photoshop Tutorials | A simple, clean content box created in Photoshop 6

Step 4:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your smaller rounded rectangle layer.

Photoshop Tutorials | A simple, clean content box created in Photoshop 7

Photoshop Tutorials | A simple, clean content box created in Photoshop 8

Step 5:

Now choose the Horizontal Type Tool and set the font family to Arial, bold, 14 pt, none and #AEE5FF color shade. In a new text layer type the name of of your content box.

Photoshop Tutorials | A simple, clean content box created in Photoshop 9

Step 6:

Add your content using font Arial, regular, 12 pt and white for color.

Photoshop Tutorials | A simple, clean content box created in Photoshop 10

Results:

Clean Content Box.

Photoshop Tutorials | A simple, clean content box created in Photoshop 11

 

If you found the above Photoshop tutorial helpful, please help to share this with others by using the 'digg' button below.
 
Add to Google
Add to My Yahoo!
   
Add to My AOL
   
AddThis Social Bookmark Button

Other Photoshop Tutorials

Designing an Alien head logo
Metal with Blood Stain effect
Design a Pencil
How to create Glossy Buttons in Photoshop
How to create Metallic, Rusty effects, with Holes
A simple, clean Content Box
Preserving Spot Colours in Photoshop
A Professional Blog Template Design created in Photoshop
A Disney.com style Navigation Interface
A Custom-Fitted Logo
A Futuristic Logo created in Photoshop
A Metallic Content Box created in Photoshop
 
SEE ALL PHOTOSHOP TUTORIALS HERE

moreinfo-back return to previous pagespacer

Page copy protected against web site content infringement by Copyscape

1x1
11-2
176head1

1x1
Photoshop Tutorials
1x1
1x1

QuickSearch Menu
spacer

1x1
Checklist

Remember, if designing for print, set your workspace to 300dpi and at actual size to be used, or larger. Many people use higher resolutions, 600dpi for instance, but this is not necessary, and will not improve the final print quality.

If designing just for the web, then a 72dpi workspace is fine.

Another thing to consider - if designing for print, then make sure 'Mode' is set for CMYK.

Insert > Mode > CMYK

Only use RGB mode if designing for the web.

 

156div
 
1x1
rbordertop
footer1
footer3

spacervisa-sm spacerTelephone: +44(0)1635 522447spacerrorinfospacerFax: +44(0)1635 522449 spacermastercard-smbusiness cards ukhelp pages

footer4
footer2