Making a Message Strip in Photoshop

A Tutorial on how to make a message strip using Photoshop
by Collis

In this tutorial we’re going to make a little message strip in Photoshop that you can place in the top right corner of a design. These little strips look very trendy and web2-y, particularly in web designs! It’s quite an easy effect to do and in this tutorial we’ll add some shadow and light to make it pop!

Step 1:

To begin this tutorial as always we will start with a nice radial gradient. I am addicted to radial gradients, so you should too! So anyways, I’m using a combination of nice blues, here are the exact colour codes:

Colour 1 – #0e324f
Colour 2 – #062033

It works well if you put the highlight of the gradient in the top right corner where we’ll be placing our little message strip, this is to do with how we’ll adding light and shadow.

Step 2:

Now this step isn’t really necessary, but I’m going to add a giant “M” so that my message strip has something to go over. When the message strip interacts with the background this way it looks even cooler.

So anyhow I make a giant ‘M’ in white and set it to Overlay and fade it out to like 40% so that it has a bit of the radial gradient and fits in with the light and shadow.

Light and Shadow are your friend, they will make your designs look much nicer. In the real world and in print design you get light and shadow .. from the light (sun light, electric light, whatever), but on screen everything is kinda uniform. So it’s nice when you add a bit of shadow and light to liven it all up. Note that this doesn’t work nearly as well in print.

Step 3:

Next in a new layer, draw a long rectangle with a light grey. Make it really long because when you rotate it later you’ll need the ends to be appropriately long. Also add some text, I’ve written “Made with Love!” in a fun looking font – Gill Sans Ultra Bold. I have a predisposition to fat fonts because they look friendly and loud.

Step 4:

Now I’m going to grab a heart shape from Photoshop’s set of shapes. You can get these by clicking on your Custom Shape Tool (U) in the tool menu. And then go up to the top of your screen and press on the little down arrow next to Shape as shown. If you don’t have lots of shapes already, click on that arrow pointing to the right and add them.

Step 5:

So using that heart shape in a new layer I’ve drawn a nice little red heart. That red, white and blue combination looks great.

The trick with colour combinations like this is two fold. First you want to have a main colour (in this case blue) and then use the other colours to highlight off that main colour. So here we have a lot of blue, a medium amount of light grey and a tiny bit of red that really leaps out.

The second thing to remember is that some colour combinations clash like nobody’s business. Like if you put that red on the blue it’ll be eye-jarring, so here I’ve used the light grey as an intermediary colour.

Step 6:

Now to make the red really pop, I’ve selected the heart layer, created a new layer above it and then using an even lighter red colour drawn a small gradient over in the top right corner. This way our heart has a radial gradient and again we’re using light and shadow!

I’ve also added a faint blurred shadow to the “Made with Love” text using the “Drop Shadow” blending mode. You can do this by right clicking on that layer and selecting “Blending Options”. Then tick “Drop Shadow”. Set the distance to 0 and change the colour to be a light grey so it’s not too full on. Don’t add a regular shadow because we want these letters to be part of the strip not hovering over it.

Step 7:

Now I want to add borders to the strip, so I hold CTRL and click on the strip layer to select it all, then create a new layer and paste in a darker grey colour. Then I go to Select > Modify > Contract and contract the selection by 2 pixels.

Next I hit delete to delete the middle of that dark grey, leaving just the edges. (Note that you have to hit the right arrow a couple times and then hit delete and then hit the left arrow a couple of times and hit delete again to get the left and right edges)

Step 8:

OK So now we have out message strip, it has edges, a message and a nice red heart popping off.

The next thing to do is select all the message strip layers and merge them into a single layer. We do this because we are about to rotate.

If you rotate without merging the text and the edges you can get some odd effects happening. Photoshop tends to blur and jag stuff when you rotate so it’s best to minimize the effects by merging it all together here. Of course this means you have to make sure your message strip is totally finished before you do this!

Merging also has the added benefit that we can use Dodge and Burn later to shadow and light it up. You’ll see what I mean shortly…

Step 9:

So now, hit CTRL – T to transform, hold down SHIFT and turn the message strip to like a 45′ angle.

Step 10:

Now move the message strip up to the top right. It’s already looking great, but now we need to add a bit of shadows and stuff.

So create a new layer on top and select a lightish grey colour. Hold down CTRL and click on the message strip layer to select all its pixels, then draw a gradient going from light grey to transparency, and draw it from the top coming down, then a second one from the bottom going up.

You should get something that looks like above, a bit of grey coming from the top, and a bit more coming from the bottom.

Step 11:

Now change the blending mode for this new layer to “Multiply”. Because we used a nice faint grey it’ll give a good amount of shadow. If you used a darker grey, you might need to fade the opacity back.

Step 12:

Now change back to the message strip layer itself. Then change to the Burn Tool (O) and choose a big soft brush to work with.

Slowly add a bit of burn to the bottom and top of the strip. Up in the settings for the Burn tool you might want to make sure Exposure is set reasonably low (I used 20%), this lets you do a subtler effect without it becoming overexposed.

When you’ve done adding the burn to the top and bottom you can if you like hold down ALT and gently brush the middle a little. Holding ALT when the burn tool is selected switches it to a dodge.

Burn and Dodge are like opposites of each other. Burning darkens and Dodge lightens. They are pretty useful tools though you want to do it subtlely or else you can make a bit of a mess.

Step 13:

So now our message strip is looking good, let’s add a shadow behind it.

Create a layer below the message strip.

Now hold down CTRL and click on the message strip layer to select its pixels and in the layer below fill it with a medium grey.

Then deselect and hit the down arrow a couple of times and the left arrow a couple of times so that your new layer is to the bottom and right of the message strip (as shown)

This will be our shadow layer.

Step 14:

Set your shadow layer to Multiply and then go to Filter > Blur > Gaussian Blur and use a setting of about 3-4px. You’ll get a nice shadow happening.

Step 15:

Now we want out message strip to look like it’s bulging up in the middle, this means that the shadow would get less at both the top and bottom because the message strip is closer to the background. Does that make sense?

Basically if something is far away from the background, its shadow is bigger, and if its closer its shadow is smaller…

Anyways so choose the Erase Tool (E) and with a big soft brush just gently erase a bit of the shadow at the top and bottom so that it gets faint at either end.

Step 16:

And there you have it, the finished product – a nice message strip!

Tags: , , , ,

About jellyblog

Powerful, Easy Online Tools & Web Design

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: