How to Create a Stylish Sales Tag

Hello All!
Today I would like to show you a way to create a stylish product tag that’s useful for giving a product a fun and more realistic look, or in this case, marking items on sale.

To get started, draw two rectangles one on top of the other and make the bigger rectangle green (or whatever color you choose) and the top rectangle white.

Create Realistic Web Shadows

Now, make a hole in the larger rectangle by subtracting a shape out of it. In order to do this click on the little masking icon on the right side of the shape in the layers panel (highlighted in the image), select the Ellipse tool and hold down ALT (to subtract) and SHIFT at the same time while drawing your circle.

Create Realistic Web Shadows

Double click now on the “big rectangle” layer and from the window that opens click on “Pattern Overlay” and select a pattern you like (in this tutorial I used a free pattern downloaded from Brusheezy.com) and lower the opacity to make the pattern very settle, in this case I did 8% opacity.

Create Realistic Web Shadows

Select “Gradient Overlay” and fill with a white gradient 20% opacity on one side and 0% opacity on the other.

Create Realistic Web Shadows

Select “Satin” and apply a white 30% opacity effect, with 3px distance, size 21px.

Create Realistic Web Shadows

Select “Inner Shadow” and apply a black effect with 30% opacity, distance 0, size 6px.

Create Realistic Web Shadows

Now double click on the “small rectangle” layer and in the Layer Style window pop up click “Stroke” and apply a gradient stroke that goes from white 20% to white 50%, angled 120º.

Create Realistic Web Shadows

Click on “Gradient Overlay” and apply a settle grey gradient overlay that goes from #ffffff to #f5f5f5, angled 90º.

Create Realistic Web Shadows

Click on “Inner Shadow” and apply a black shadow of 3px, 65% opacity, 0 distance.

Create Realistic Web Shadows

Write your text inside the white shape (I used Marketing Script, a free font from Dafont.com) Double click on the text layer, click on “Gradient Overlay” and apply gradient that goes from #e47b18 one side to #ec9e54 on the other.

Create Realistic Web Shadows

Click on inner shadow and apply a black 20% opacity shadow, 1px distance, 1 and 2px size.

Create Realistic Web Shadows

Then rotate the tag as you desire – I rotated it just enough to straighten up the italic font that I’m using.

Create Realistic Web Shadows

Now it’s time to create the wire that’s attached to your tag. Let’s do this by drawing an ellipse with a black stroke of 10px and 0% fill opacity.

Create Realistic Web Shadows

Then convert the shape to a smart object by right clicking on the shape in the layers panel and selecting “convert to smart object”.

Create Realistic Web Shadows

Now mask out the part of the wire that should be hidden behind the tag by selecting the area that needs to be erased then select inverse (select > select inverse) and click on the small mask icon on the bottom of the layers panel.

Create Realistic Web Shadows

Double click on the wire layer and apply a “Gradient Overlay” that goes from #474747 to #8b8b8b, angled 90º.

Create Realistic Web Shadows

Click on “Satin” and apply a Black effect, 36% opacity, angled 19º, size 13.

Create Realistic Web Shadows

Click on “Inner Shadow” and apply a white shadow, 50% opacity, 0 distance, size 5.

Create Realistic Web Shadows

And now add the finishing touch by creating a few shadows with a soft brush underneath the tag and between the tag and the wire. For help on creating realistic web shadows, see this previous tutorial.

Create Realistic Web Shadows

To add a highlight to the top of the tag hold Command key (for Mac) or Control key (for PC) and click on the layer, this will select the entire area of the tag, now create a new layer on top of of it and paint a few white highlights on top of the tag with a soft brush.

Create Realistic Web Shadows

You can now use this tag in any size across your site! Happy tagging!

Create Realistic Web Shadows
For those that want to see how it’s done in my PSD file, you can download it here. Source PSD

This entry was posted in Design Tips, Splashing Blog and tagged , by Matt. Bookmark the permalink.

About Matt

Matt Hall is a web developer, marketer, and WordPress enthusiast. When he isn't organizing new WP projects, he can be found enjoying the sun, exotic coffees, and craft beers with friends.

Splash your Comments

Your email address will not be published. Required fields are marked *

*

*