Web 2.0 Content Box

20.3.2007, 3:29
Submited in: Photoshop | Total Views: 34850

In this lesson, you will see how to create simple fresh web 2.0 style content box. You can use this web content box for every web sites. You will also learn how to apply some icon on content box, how to use Rectangular Marquee tool, to create some selection and more.

Step 1

Create a new Photoshop document and for background color set #F8F8F2. For this tutorial, I will use 300x271px dimension.

For Foreground color set white and using the Rounded Rectangle Tool, create a selection for the content box. See the picture below.

We will embelish a little our content box by adding:

Outer glow


Our content box now looks like this:

Step 2

Now, it's time for content box header.

Press and hold down Ctrl key and click on the content box layer to select it.

Step 3

Using the Rectangular Marquee tool, drag it from the bottom to the top of content box, to delete the part of selection (subtrackt), to only remain the part of selection on the top, for heading. See the picture below.

While the selection for heading is still active, choose Select - Modify - Contract.

After that, create a new layer, select it and fill the selection for header with #86C620. See the picture below.

Step 4

Add a mild gradient on our selection ( reduce its opacity) and a little shadow to down. See the picture below.

Step 5

Now, we will add a icon and header.

Step 6

Find some appropriate icon somewhere.

Decrrease the icon and place it on the top and type a header.

I have used Gill Sans font, size 25px.

On the icon and text add a white stroke of 2px. See the picture below.

Step 7

Now, it's time to add a gradient on our content box shape.

So, select that layer and add the following gradient.

Only one thing that you must to do, is to cut your content box and insert it into the your xhtml/css layout.


Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials