Tags are part of every blog post, some claiming that they help SEO while others use it to keep those articles organize.
When I am browsing around design galleries, I always see tags as links or with tag image background, I was thinking maybe we can create a different kind of tags, more like a breadcrumbs :).
Today I will show you how to create a unique tag design in Photoshop, and maybe we can convert this into a full working design in WordPress on next post.
You can download the PSD at the bottom of this tutorial!
This is the design that we are going to create today.
Let’s Begin!
Open your Photoshop and set the size to 500px by 300px.
Grab your Rectangle Tool (U) and draw a rectangle shape on the canvas. Name this body.
Right Click on the body layer and select Inner Glow, set the foreground color to #fab051, Opacity 22% size 2px.
On Gradient Color Settings, copy the colors above.
Gradient Overlay settings, set the angle to 90.
On stroke, use the foreground color #ad680e set the size to1px.
I set the guides on, make sure that they are even on both sides.
Now we will rasterize the body layer, make sure you have a back up. To create one, duplicate the layer before you rasterize.
Select Pen Tool (P) and draw those points on the end of the guide, see above. Make sure you close the path.
After closing the path, right click and click make selection.
After selecting Make Selection, hit Delete. This is what it should look like now.
I added some text, I use League Gothic 26pt color #a0610e.
This is the text drop shadow, use #ffffff for foreground and blend mode normal, distance and size is 1px.
Inner shadow, use foreground color #b16d0c and distance, size to 1px.
Now, go back to body layer and add the drop shadow. Use #c3bfbf as foreground and the rest is default.
This is our end product, I also added a background image so it will add a nice effect.
I created a duplicate and move it a little closer.
And this is our end product, quite short tutorial but we definitely created a design using basic Photoshop Techniques. This tutorial is just a starting point, you can use this design on breadcrumbs or navigation.
If you found a cool tag design, let me know in the comments below.
