Eight free ‘price tag’ vector graphics, including some additional base element shapes to work with for user inspired additions.
Download [download id=”15″].
Once downloaded unzip and open the .png file in Adobe Fireworks. Each ‘price tag’ graphic is isolated onto its own Layer for easy selection. Use as you please.
Also included within this page is a basic walkthrough of the element shapes used – it is shocking simple!
Download at the bottom of this page.
[divider]
How was it Made?
As captured below the base elements comprise nothing more than a ‘Shape’ Layer and/or a Stroked path.
For the shape I used the Rounded Rectangle Tool and configured the individual node handlers for a varying corner radius options.
The simulated rope on the left, the Pen Tool was used to create two open paths (No Fill) with a simple stroke.
The simulated rope on the right I used the Wave auto shape located in the Window > Auto Shapes Panel. In this case I did not need to draw anything except configure a few nodes.
Once the base elements are created (shape and rope) I moved on to creating a ‘knockout’/hole to wrap the rope around. To create the hole I used the new CS5 Compound Shape options. But because the base is an auto shape, it needs to be converted to path outlines in order to perform the path compound.
Select the auto shape, Right/Control Click and from the context menu options choose Ungroup. You will loose the dynamic auto shape capability but at least you can now apply the compound operations.
[divider_top]
Now to complete the knockout! With the base shape selected; activate the Ellipse Tool from the Toolbar; then select the Subtract/Punch from shape compound option in the Property Inspector (PI). Now draw an ellipse directly over the base shape to ‘puch’ a hole right through it.
All that remains is to position the rope graphic in the area of the hole. If the rope element does not line up resort to ‘masking’ to hide areas that should not be visible in the foreground.
For the varying color and textures resort to any Fill or Stroke options from the Property Inspector Panel.
Shockingly simple – Have fun!
A collection of vector price tag UI elements created in Adobe Fireworks.