Web Tags are crazy cool and super useful when designing your own website! Learn how to create your very own custom tags using Photoshop CS5 and a combination of Shape Layers and Layer Styles in this quick and easy tutorial! Use these in a web design project or file them away for future use in UI projects! Have fun with these!

Tutorial Inspiration: http://365psd.com/day/2-198/

Step 1:

Create a new Photoshop document sized 1280px by 720px. Simply darken the gray background a little bit or drop in a nicer background.

Step 2:

Grab your Rounded Rectangle Tool (U) and set the corner radius to 2px and also set it to draw a Shape Layer as I have done. Drag out a nice little shape in the middle of your document.

Step 3:

Grab your Rectangle Tool (U) and press your minus (-) button. Make sure you have selected the Vector Mask and drag out a small square just like I have.

Step 4:

Grab your Path Selection Tool (A) (Black Arrow) and select the new square we created. Hit Cmd/Ctrl + T and rotate the square by 45 degrees (Check out the Tool Options Bar as you rotate.) then hit the little “check” icon to commit those changes.

Step 5:

Select that shape using the Path Selection Tool (A) and hit the “Combine” button up in the Tool Options Bar.

Step 6:

Select the shape again using the Path Selection Tool (A) and hit Cmd/Ctrl + C to copy the path and then hit Cmd/Ctrl + V to paste it into place. Hit Cmd/Ctrl + T and right click on the shape and choose “Flip Vertical”. Select the “Intersect shape areas” icon and then hit the “Combine” button to merge these two paths into one.

Step 7:

Go ahead and apply the Drop Shadow, Inner Shadow, Gradient Overlay, and Color Overlay that I have added.

Step 8:

We want to punch a little hole into this tag. Grab your Ellipse Tool (U) and select the Vector Mask of our Shape Layer to highlight the path of our tag shape. Press your minus (-) button and drag out a small ellipse as I have. NOTE: Because we’re cutting through Layer Styles they will automatically style the punched out spot.

Step 9:

Add some text to your tag and align it to the right using the Paragraph panel (Window>Paragraph) and drag it over so it is just touching the edge of the punched out hole.

Step 10:

Grab your Move Tool (V) and hold your Shift key and nudge this bit of text to the left 10 pixels by tapping your left arrow key once. Add the Drop Shadow, Inner Shadow, and Color Overlay that I have.

Step 11:

Select your Vector Mask on the Shape layer and then grab your Direct Selection Tool (A) (White Arrow) and drag a selection over the left side of your tag shape to highlight all the anchor points over there. Hold down your Shift key and nudge these anchor points toward the text until they are touching it. With the Shift key still held down nudge them back to the left one click. This will roughly center our text within our tag shape.

Step 12:

Go ahead and use your Rectangle Tool (U) feel free to add a little pop of color on the left side of the tag by drawing a small shape and filling it with a very bright and vibrant color as I have. Drag this new Shape layer right above our tag Shape layer and hold down your Alt/Opt key and create the Clipping mask when you see the cursor change to mask this color to the layer below. NOTE: You’re going to see a color change because of the Gradient and Color overlays affecting the layer colors!

Step 13:

Duplicate and tweak to your heart’s delight! That’s it!

Follow Me On Twitter!

Like Tutvid on Facebook!