Design Magazine

Have you ever tried finding a golden ribbon inside of a chocolate bar wrapping to no avail? Well that’s obviously because there are none in them! Just joking, but seriously, who needs real ribbons when we can make our own?
In this quick Photoshop tutorial we’ll be designing our own sweet, golden ribbon! This is a basic tutorial, however I won’t exactly be detailing all the tools, etc. in-depth so much, so this might be suitable for new Photoshop users.

You can see what we’ll be designing in the above image. Twist it, lick it, dunk it, eat it. Use it on your site, these are multi-purpose ribbons!

1. Document Creation

Start by making a new document in Photoshop – around 800 x 500 pixels in size, or, you know, whatever you prefer! Best use the default resolution, though (72).
Now you’ve got the canvas, you might want to add a bit more of an interesting background, other than plain white. For my background I applied Filter > Render > Lighting Effects to the white, then faded it to around 15%.

Well, we’re done for our basic background now.

2. Ribbon Shape

Start by creating a new layer (Layer > New > Layer) then enable the grid in Photoshop (View > Show > Grid), now go to Edit > Preferences > Guides, Grid, Slices & Count… and change your grid settings so that their similar to mine, if possible.

Create the rectangular selection on the canvas that you want for the base of your ribbon, then fill it with black (assuming you’re on a new layer!)

Next thing to do is: using the Polygonal Lasso Tool, cut out a triangle shape on the right side of your selection (using the grid if possible) like I’ve done here:

Click the above image for a full size shot. After you’ve made your selection, press delete to remove the selected pixels, now it looks like a ribbon! (kind of, right?)
Finish off by filling your ribbon with a yellow color, do this by locking the transparent pixels, setting a foreground color then filling the ribbon using the paint bucket tool.

3. Ribbon Texture

Start by creating a new layer, then apply Filter > Render > Clouds onto your blank layer. Make sure your colors are reset first though, black and white. Next, apply Filter > Render > Fibers with a random setting

For the last filter, apply Filter > Blur > Motion Blur with an angle of 90, and a distance of 100 or more. We’ll be using the finished product as the texture for our ribbon. Crop your final texture to the ribbon then mess around with the layer mode and opacity.

In the above image I’ve used Multiply as my layer mode and 25% opacity. Duplicate your texture layer and try Overlay with 35-50% opacity.

Looking quite good now.
I finished off by doing a little bit of soft brushing inside of the ribbon. Start by making a new layer. Now select the ribbon pixels (hold ctrl and click the layer’s thumbnail), then add a little bit of brushing using yellow inside of the ribbons edges.

For the sake of actually being able to see my brushing I used black as my color, but be sure to use yellow as your foreground color here. Change the layer mode for your ‘inner glow’ brushing layer to Linear Burn.
Create another new layer then select your ribbon again, using a small-ish brush make a line of yellow near the top of the ribbon, change the layer mode for this one to Overlay.

If you haven’t been able to completely follow the tutorial thus far, please feel free to download the PSD file for the final result at the end of the tutorial, it contains all the layers you’ll need.

4. Finishing Touches

For finishing touches I applied a few layer styles to the original ribbon layer:

1. Drop Shadow
2. Gradient Overlay

And that was it, I have a result like this:

5. Add Text

Last thing to do is add some text to our ribbon, give it some life, right? Get the Type Tool out and write some text onto your ribbon.

In the above image I’ve used Myriad Pro for my font with a very thick weight/setting, if you don’t have Myriad Pro just find a good alternative such as Arial Black. I also used black (#000000) for the font color. After I wrote my text out in black, I then applied these three layer styles:

1. Drop Shadow
2. Inner Shadow
3. Gradient Overlay

I added a second bit of text (much smaller and white as the primary color):

To this bit of text I only applied a Drop Shadow. Now you could probably rotate this and stick it on your website or something like that!

Finished

Thanks for reading this tutorial everyone, I hope you enjoyed it! If you like the blog, please consider subscribing to the RSS feed for updates.