_thumb

Create Slick Web Tags – Photoshop CS5 Tutorial

16,335
views

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!

These tags can be used in your current of future websites, and can be customized to your liking.

tags 13 Create Slick Web Tags – Photoshop CS5 Tutorial

[youtube id="4ZeoRgVfvh0" width="700" height="420"]

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.

tags 1 Create Slick Web Tags – Photoshop CS5 Tutorial

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.

tags 2a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 2b Create Slick Web Tags – Photoshop CS5 Tutorial

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.

tags 3a Create Slick Web Tags – Photoshop CS5 Tutorial

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.

tags 4a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 4b Create Slick Web Tags – Photoshop CS5 Tutorial

Step 5:

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

tags 5 Create Slick Web Tags – Photoshop CS5 Tutorial

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.

tags 6a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 6b Create Slick Web Tags – Photoshop CS5 Tutorial

tags 6c Create Slick Web Tags – Photoshop CS5 Tutorial

Step 7:

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

tags 7a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 7b Create Slick Web Tags – Photoshop CS5 Tutorial

tags 7c Create Slick Web Tags – Photoshop CS5 Tutorial

tags 7d Create Slick Web Tags – Photoshop CS5 Tutorial

tags 7e Create Slick Web Tags – Photoshop CS5 Tutorial

tags 7f Create Slick Web Tags – Photoshop CS5 Tutorial

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.

tags 8a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 8b Create Slick Web Tags – Photoshop CS5 Tutorial

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.

tags 9a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 9b Create Slick Web Tags – Photoshop CS5 Tutorial

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.

tags 10a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 10b Create Slick Web Tags – Photoshop CS5 Tutorial

tags 10c Create Slick Web Tags – Photoshop CS5 Tutorial

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.

tags 11a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 11b Create Slick Web Tags – Photoshop CS5 Tutorial

tags 11c Create Slick Web Tags – Photoshop CS5 Tutorial

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!

tags 12a Create Slick Web Tags – Photoshop CS5 Tutorial

tags 12b Create Slick Web Tags – Photoshop CS5 Tutorial

Step 13:

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

tags 13 Create Slick Web Tags – Photoshop CS5 Tutorial

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

Follow Me On Twitter!

Like Tutvid on Facebook!

  • Brian Marks

    thanks.

  • http://www.webdesigncreare.co.uk/ Bradley West

    Thank you for sharing such really nice subtle tags. I really like these and would like to do something similar in a future website design. The tutorial is very detailed and has some good clear information on it. It is quite surprising how simple doing one of these tags really could be. I also quite like that colour blue.

  • http://Website Michael pacheco

    Very nice tutorial, clear and detailed. It looks great also. What’s the best way To prepare them for web?