Web 2.0 Text Box

Step 1: Creating the Workspace:

Start with a 300 x 200 Document and fill in the background color as #EDFFFE.

Step 2: Create the top section

Make a new layer and grab your Rectangular Marquee tool and make a fixed size square with 260px as the width and 50px as the height. Your selection should look like so:

Next right click within the selection and select fill. Fill it in with a neutral White (#FFFFFF):

Finally right click within the selection again and select Stroke. Put in a 1px Stroke with the colour as #E3E3E3:

Step 3: Creating the Cut out

Now for cut out effect. Grab your text tool and set these options:

Font: Webdings Style: Regular Size:48px Anti-Analising: Crisp Font Color: #EDFFFE

Once you have applied all of those settings make a text layer and press 6 on the keyboard. It will give you this shape:

Go to Edit > Transform > Rotate 90 CW and then position it at the right end of the box like so:

Now on this text layer right click on the layer and select blending options. Apply the following settings:

Drop Shadow:

Inner Shadow:

Once you've applied those settings our arrow will have blending into it's surroundings and look like this:

Step 4: Create the Bottom Half

Now to make the content area for the text box. Make a new layer and then select your Rectangular Marquee Tool make sure that the fixed size setting is on and create a box that has a 260px width and a height of 125 px you should get this shape:

Fill in this selection with a neutral white (#FFFFFF) like we did with the title part:

Then whilst the shape is still selected right click within the shape and select stroke, again apply a 1px stroke with the colour of #E3E3E3 and then you will get a nice looking box:

Step 5: Add in some text

Now let's add in some text to show what it would look like with content on it. Grab your text tool and set your font to these settings:

Font Face: Arial Style: Regular Size: 12px Anti Alliasing: None Font Colour: #1CD987

Make some text for the title box like so:

Now for the content box text set your text tool to the following settings:

Font face: Arial Style: Regular Size:12px Anti-Alliasing: None Font Colour: #A3A3A3.

Write some text like so (I decided to make a story up sorry if it bores you!):

The Final Result:

And there we have it a clean looking web 2.0 text box!