RSS Feed About Tutorials Blog

All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
create-a-sleek-content-box-in-photoshop

Create a Sleek Content Box in Photoshop

1-31-08Category Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 700×400 pixels canvas set at 72dpi, and I filled my background with a white color. Then on your tools palette set the foreground color to #EBEFF2 color shade.

Step 2:
Select the Rounded Rectangle Tool from your tools palette then above your screen under the options palette choose Fill Pixels, set the radius to 20 px and check anti-aliased. Create a new layer and draw a #EBEFF2 color shade rounded rectangle, exact size 208×168 px.

Step 3:
Under Layer Style(Layer > Layer Style) add a Stroke blending option to your rounded rectangle layer.

Step 4:
In a new layer draw a black rectangle with size 208 x 26 px at the bottom of your rounded rectangle.

Step 5:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your duplicate shape layer. Then set the layers blending mode to Lighten.

Step 6:
In a new layer draw a tiny black circle on the bottom corner of your content box.

Step 7:
Under Layer Style(Layer > Layer Style) add a Stroke blending option to your tiny circle layer.

Step 8:
Duplicate your black circle and move it to the other side of your content box.

Step 9:
Create a new layer, above your content box draw a white rounded rectangle, exact size of 209×26 px. Then cut the bottom corners of your white rounded rectangle.

Step 10:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your cut out rounded rectangle layer.

Step 11:
Your content box should look like this thus far.

Step 12:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 11pt, none and #008DFF color shade. In a new text layer type the name of your content box.

Step 13:
In a new layer draw three small circles side by side. Then under Layer Style(Layer > Layer Style) add a Stroke blending option.

Step 14:
That’s it your done.

Pages: 1 2
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

2 Responses to “Create a Sleek Content Box in Photoshop”

  1. mailman Says:
    February 1st, 2008 at 1:45 pm

    I found this tutorial useful, but I think your numbers are off. Non of my shapes matched up when I used your exact numbers, and my main box color was way off as well.

  2. admin Says:
    February 1st, 2008 at 2:05 pm

    Hey mailman,

    your correct!, i dont know what I did there but none of the color shade and sizes matched with the psd file. I fixed it and you should get exact results. :)

Add a Comment