In this tutorial , we'll learn how to make the most popular web graphic in the modern websites.
I made it as a price tag but you can use it for almost everything, like we did in PSEffect (the free templates icon on the top) so, let's start, I hope you'll learn new techniques.
Here is the final result of this tutorial:
1. Open a new document sized 230x230 pixels and make a background fills with #464b52.
Name this layer as "background".
2. Pick the polygon tool (U) as you can see in the next image:
PS : if you want to make this object to be vector (means that you can resize it without loosing quality) choose this option anytime you make an object in this tool:
Next, add the next values and then draw the object.
Add stroke effect with the following settings:
Name this layer as "base object".
3. Pick the ellipse tool (U) and choose the following option:
It will make a perfect circle, and that's exactly what we need.
Draw a circle (if you're not doing the object vector, you should add a new layer first)
Add a gradient effect to this object and copy the following settings:
Don't place it exactly in the center.. place it like here:
Name this layer as "gloss".
4. Pick the horizontal type tool (T) and write whatever you want to. I wrote 14$ as I want this to be a price tag.
Fill this text with #FFF600 - bright yellow.
Right click on the text layer and then click on the "convert to shape" option.
Then, go to : transform path-rotate and then do the followings steps:
Rotate this object, rotate: 10
Bend- 20.0
One last step for this layer is to add a stroke effect. here are the settings I added:
Name this layer as "text".
5. Duplicate "base object" we have created in step 1.
Remove the effects of the duplicated layer and locate it in above the "background" layer.
Fill this layer in #292D33.
Name this layer as "shadow"
6. In addition for this object, I added a big circle (perfect circle like we did in this tutorials) filled in the color #4C5056
You should place this layer under the "shadow" layer. name this layer as "bottom ellipse"
** If you got messed in the layers order, here is the layers box of this tutorial:
Here is my final result:













More Photoshop: