Photoshop Tutorial : Make a badge for your website

Badges or flashes are a bit of fun decoration that you can add to your site and they are appearing more and more on the web. They’re also very useful for drawing attention to specific parts of your page. It’s a good way to set up a call to action like “Buy Now” or “Join Here”. So in this tutorial I’m going to show you how to make a badge using one of Photoshop’s vector tools.

The Vector tools in Photoshop allow you to create all kinds of lines and shapes and their advantage over raster images is that you can scale the Vector paths up as much as you want and there is absolutely no loss of quality.

  1. Create a new document – 400 x 400 pixels.
  2. Select the Polygon Tool from the toolbox.
  3. On the tool options bar at the top of the screen, select the Shape Layers option.
  4. Again, on the tool options bar at the top of the screen, click on the down arrow for Polygon Options.
  5. Check the Star check box to ensure that you draw a star rather than a polygon shape with lots of sides.
  6. In the “Indent Sides By” field enter a percentage. To get a very pointy star enter a high number such as 60 – 70. For a less pointy star enter a lower number, say 20%. You will get very different effects with these numbers. I’m using 50% for this example.
  7. In the colour picker, choose a foreground colour. I picked a red for mine.
  8. Click and drag out a Star shape to the size you want. When you release the mouse you notice that a new shape layer had been added in the layers palette. This new layer consists of a red fill linked to a star shape mask.


  9. Don’t worry that the edges of the star appear jagged. This is because the path around the star shape is selected. Click on the background layer to deselect the shape and you will see the nice sharp edges of the star appear.

  10. Now it’s time to add some text to your badge. Select the Type tool, set the font colour to white and choose a solid, heavy-looking font. I used Arial Black, size 30. After you have typed in some text, commit it by clicking on any other layer on the layers palette.
  11. Select the type layer again by clicking on it in the layers palette. Press Ctrl + T (windows) or Cmd + T (Mac) to free transform the text. Run your mouse over one of the corner handles so that the cursor changes to a double-headed arrow and drag to rotate the text. Press Enter (Windows) or Return (Mac) to apply the transformation.
  12. The last thing to do is to add a drop shadow to the badge. Click on the star shape layer to select it, then click on the layer style button at the bottom of the layers palette.
  13. Leave the blend mode at multiply, the shadow colour to black and set the angle to 90 degrees. Adjust distance, spread and size to your own taste or use the values I used in the Illustration below.
  14. Click OK and Voila!

Related posts:

Comments

  • koowo

    真是太喜欢了!
    very good!

  • jennyrusks

    Thank you!

  • Very Good.. Thanks Jason

  • Sweet resource, just what I have been looking for.
    I have added you to Stumbleupon.

  • Thanks Bubbila, much appreciated.

Leave a Comment