Advanced Search

The BoxedArt Guide to Using Website Templates

Diagonal Corner Photoshop Message Strip

Here we are going to learn another trendy element of Web 2.0 design, the corner text message strip. In web 2.0 design, this effect is a popular alternative to the the glossy 3D badges to get the message out. The message strip is a more subtle way to introduce your message, while the 3D badge is used to boldy scream your point.

Firstly, let's start by creating a new page of 400X400 pixels. To start, we begin with the layers arrangement, which is basically 4 Layers + the background. Name the layers accordingly, first the background, then shadow, strip, the text and lastly the highlight. Now that we had named the layers, it will be easier to get started.

Now let's give the background layer a nice gradient, to later place the corner strip effect.

Layer Arrangement

Now let's begin drawing our strip. Click on the strip layer and select the Rectangular Marquee Tool from your tool bar. The draw a long strip across and filled it with a light grey (#f8f8f8), just like the diagram below.


Then give your strip a 2 px border, hold on to ALT key and click on the strip layer to make a selection, then click Edit > Stroke and set the stroke width to 2px with the color darker grey (#656565). Delete the both end of the strip as we doesn't need a border on the left and right side.

Stroke Setting

Now add text for the strip. Remember to select the text layer, the message you wish to post, and remember to select the text layer first. As shown here, the text will be “Products from Boxedart” and placed in the center of the strip.

Fonts Setting

Now merge the strip and text layer together, then click Transform>Rotate and set the rotation option to 45 degrees. Then move the strip towards the upper right corner. As you can see, you are almost done with your strip, just will just add some minor additional effects, and the stip will be complete.

Rotation Setting

Now let's add some highlights and shadow for the strip so that it won't look so flat against the background. Select the highlight layer now, hold on to the ALT key again and click on the strip layer to get a selection of the strip. Then click the gradient too and set it to foreground to transparent option with a light grey to transparent. Then give a gradient at the top of the strip and the below the strip and set the layer opacity to 50% and the blending mode to Multiply so is not too dark.

Gradient Setting

Let's give some dodge and burn at the end of the strip. Click on the burn tool and select a brush size of 100px. Click around 3-5 times at the top and bottom of the strip of the strip.


Then dodge a little bit at the center of the text. Just drag from the letter D towards the other D, to give a glow effect.Step08

Now the final shadow, and the strip is done. Click on the shadow layer, and again hold on to ALT key and click on the strip to get the selection, and then fill it with a very dark grey. Then move the shadow down a little bit, and click Filter > Gaussian Blur and give the blur a 5px. There you have your shadow, but it's abit to bold, now add a layer mask on the shadow layer and mask the top and end of the shadow to make the strip a curve feeling, and your strip are DONE!

Add Layer Mask

Why not try it on your web template now, and see the effect. Again colors and font type can be change to matches your web template.

WebTemplate Example

Back to Design Tutorial