How to create a great-looking price tag icon

Tutorial introduction

As mentioned in the tutorial description, this tutorial will show you how to make a nice-looking price tag but more important is that you’ll learn new techniques which will help you in the future.

Here’s the end-result of the price tag icon:

Step one, general idea of the icon

First thing you should do is to make an image in your imagination of price tag. if nothing is coming to your mind when you see those words- just google ‘price tag’, go to images and you’ll get a general idea of how should it looks like. ofcource, you can’t copy the exact shape.

Like I said before, in “(Making of TutorialsHot - First part) Logo making“, I recommend you to have a sketch on a peace of sheet. this will help you a lot… at least, it did help for me.

Step two, making the base shapes of the icon

First, open a new photoshop document, white background, sized 200\200px or any size you want to icon to be.

Now, choose the rounded rectangle tool showed below:

Choose the ’shape layers’ option from the top bar.

Next thing you should do is to change the radios from the top bar to about 10px. it’s up to you how rounded you want the shape to be. then, make the rounded rectangle in the size you want it to be (look at your sketch) and paint it in the color you want.

Next step is choosing the ‘convert point tool’ and click on the shape frame, then you’ll see the 8 points. what you need to do next, is to click once on each of the 4 left points. select the 2 most left-handed point , go to ‘edit-transform points-scale’ and change the height (H) to 80% (located on the top bar). play around with the location of those 2 points until it’ll look perfect for you.

Next thing you should do is to create a perfect circle hole in the shape you have just created. you’ll do it by picking the ‘ellipse tool’, hold the ’shift’ button (will keep the ratio 1:1) and make the circle in the size you want.

Next, you need to apply an arc effect on the shape. this is done by the following steps:

1. Go to: edit-transform-warp
2. Choose the arc effect
3. Change the bend value to 5

Last thing you should do it to make a new layer so the order will be like this: background > new layer > base shape layer.

In this layer, create a perfect circle (already explained in this tutorial) a little bigger from the hole. select the path of this, copy&paste it, go to ‘edit-transform path-scale’ click on the lock symbol on the top bar, and change the height (H) value to 70%. then change the status of this path to ’subtract from shape area’ on the top bar. this should give this object a shape like a ring.

The result at this step should look around this:

Step three, styling the 2 shapes and making the tag wire

Let’s start with the ring effect. I used only one effect for creating the 3D effect to this ring and the effect is ‘bevel and emboss’.

one more important thing you should do- paint it in #E0E0E0.

And now the base shape, I used 2 effects. first is the ‘gradient’.

second is ’stroke’

Second step in step 2 is to create the wire, the part I like the most.

First, you need to choose the pen tool and then choose ‘paths’ option from the top bar.

Then, open a new layer, start making the path you draw in the sketch or just improvise , choose the brush tool and choose hard round 2-3px (your choice), choose the pen tool once again, right click on the path and then choose the stroke path.

*Note that the ‘foreground color’ should be in black #000000 before click on ’stroke path’.

To make the wire a bit more interesting, I recommend to do the next steps (optional):

1. Open a new layer
2. Choose the pentool
3. Right click on path > stroke path
4. Set the foreground to dark gray #535353.
5. Mark ‘V’ on ’simulate pressure’

Here’re 2 images that will help you understand we did I mean in above steps (steps 3,4,5):

Step four, final touch up

Last step in this tutorial is pretty short compared to the others..

All you need to do it to select all layers, right click on them and make all of them, one smart layer.

Then you’ll be able to rotate it without changing the gradient angle and other effects.

The rotation is done by going to ‘edit-transform-rotate’ and then you can rotate it as much as you want.

Here’s my final result after changing some color parameters: