Making your own Great Looking Shoutbox

1. Open a new photoshop document with the following values:

width - 400px , height - 145px

2. Pick the rounded rectangle tool (ctrl+U) with 8px radios and draw like the image below (fill color: #2051EF):

Choose the rectangular marquee tool (M) and erase the bottom rounded part of the object. the result should be like this:

3. Go to: layer - duplicate layer , and create clipping mask by pressing ctrl+alt+g (works fine in CS2 , didn't check it in other versions).

Then go to: edit-tranform-perspective and change the values to the following:

and press on the V button to confirm the changes.

4. Add gradient overlay with the following settings:

Also, add a stroke of 1px (outside), color- #2051EF , mode: screen and 25% opacity.

5. Add a new layer that will be also in the clipping mask.

Choose again the rectangular marquee tool (M) and make a selection of 2px height like to image below:

Fill it with this color: #0D39C8.

6. Add a new layer that won't be in the above clipping mask.

Make a selection of 2px height exactly like step 5 and fill it with darker color that the above color- #0F309C.

The result should be something like this:

And we are done with this part of the tutorial, now we will learn how to make the main content area.

7. Make a selection of the same width of the above object and a bigger height like the image below:

Fill it with any color you want and make the layer's fill value to 0%.

Add a stroke effect to this layer with the following values:

size-1px, position-inside, color-#C4C4C4.

Place the above layer in the top of the layer list.

Choose the pencil tool(B) and draw a line of 1px width all over the above selection. the result should be like this:

8. Add a new layer and make a selection like below and make sure you keep 1px separation area:

Choose the gradient tool (G) and change the values to the following ones:

And draw the gradient line when you see the selection. Erase 3 px width. the result should be like the image below:

9. Do the same process like step 8 in the bottom of the box.

10. The final step is to add a content to this box that we have just created. here is my final result: