15 tutorials in icon, badge and button design

Buttons, Badges, and Icons – Oh My!

It’s time for another tutorial roundup, and this time we’re gonna be a little more specialized. Use this guide to develop your skills to create icons, badges and buttons for both web and app design.

As always – Keep in mind that these tutorials are not here for you to copy and submit! They’re here to teach you the valuable skills you need to make your own original designs.

Getting Started

Ok, technically these aren’t tutorials. But they’re all super useful articles that’ll help you make a game plan for your design before you even start working:

Icon Design

Learn How to Quickly Create Tasty Social Icons using Photoshop

Program: Photoshop
Level: Beginner
Skills: Filters, Gradients, Patterns, Opacity

How to Turn Glasses into a Great Geek Icon

Program: Illustrator
Level: Intermediate
Skills: Turning a photograph into an original vector design, Pen Tool, Gradients, Effect

Create a Star Trek Style Communicator in Photoshop

Program: Photoshop
Level: Intermediate
Skills: Layers, Opacity, Pen Tool, Gradients, Brushes, Clipping Mask, Styles, Paths

Creating Vector Characters in Illustrator

Program: Illustrator
Level: Advanced
Skills: Planning your Design, Vectorizing a Sketch, Tools, Brushes, Fill Color, Gradients

Badge Design

Easy Wax Seal in Illustrator and Photoshop

Programs: Illustrator and Photoshop
Level: Intermediate
Skills: Tools, Layer Styles, Blend Mode, Bevel and Emboss, Filters

Make a Retro/Vintage Style Badge

Programs: Illustrator and Photoshop
Level: Beginner
Skills: Pathfinder, Offset Paths, Effects

How to Create a Knight’s Shield in Illustrator

Program: Illustrator
Level: Beginner
Skills: Tools, Pathfinder, Objects, Color Swatches, Opacity, Transform

Button Design

Design a Beautifully Detailed Web Button

Program: Photoshop
Level: Beginner
Skills: Fill Layer, Tools, Layer Styling, Gradient Overlay, Strokes

How to Create a Mexican Lucha Libre Mask Pink Badge

Program: Illustrator
Level: Intermediate
Skills: Tools, Objects, Effects, Alignment

How to Draw Apple ICloud Icon

Program: Photoshop
Level: Beginner
Skills: Layer Styles, Shapes, Filters

Other Helpful Tutorials

How to Create an iPad 2 From Scratch Using Photoshop

Program: Photoshop
Level: Advanced
Skills: Free Transform, Blending Options, Layer Style, Clipping Mask, Smart Objects, Layer Management

How to Create Inset Typography in Photoshop

Program: Photoshop
Level: Beginning
Skills: Gradient Overlay, Tools, Layer Styles, Blending Options

Create a Wood Grain Texture and a Brushed Metal Texture

ill_tut

Program: Illustrator
Level: Beginner
Skills: Gradient, Effects, Objects, Transforming, Tools,  Graphic Pen

Create Amazing Patterns Using Adobe Illustrator

Program: Illustrator
Level: Intermediate
Skills: Pattern Brush, Objects, Transform, Smart Guides, Effects

See the original 25 tutorials covering everything from logo, to web, to print and beyond here

Do you have great tutorials for icon, badge or button design? Point us to ‘em in the comments :)

Kaitlyn is part of the Community Team at 99designs.com. She grew up in Boulder, CO and went to school at Northwestern University in Chicago. When she's not blogging, she spends her time having adventures and being generally creative. She's all about having new experiences as often as possible!
Kaitlyn Ellison

13 Comments

  1. Ledevil

    lovely lovely lovely

    Reply June 15, 2012 at 12:19 pm
  2. katherine

    grrr I wantd to subcribe via email but the page says this blog doesnt subscribe via email! Im on chrome.

    BTW lets get some tuts using fireworks. I used to be diehard photoshop, however, there are SO many things so much easier and faster to do in FW using photoshop live filters.

    Reply June 15, 2012 at 1:32 pm
    • Kaitlyn

      Hey Katherine,

      The e-mail subscription should be working – we’re looking into it.

      And thanks for the love :)

      I’ll look into some fireworks tuts for the next tutorial post too!

      Reply June 15, 2012 at 2:22 pm
  3. katherine

    oh and I forgot to say: LOVE U for having these tutorials. I am a seasoned veteran designer of over a decade and a half…but even I love getting refreshers and new tips. thank you so much.

    Reply June 15, 2012 at 1:34 pm
  4. Alhuzin

    thanks katlyn, realy very useful. Congratz. Thanks 99

    Reply June 16, 2012 at 5:01 am
  5. Ancel Litto

    Thanks Katlyn for this wonderful post.I used the style of the vintage style badge in one of my designs http://99designs.com/logo-design/contests/logo-threddy-fashion-website-146139/entries/141 :)

    Reply June 18, 2012 at 9:48 pm
    • Kaitlyn

      Love to see you using this in your work! Looks great.

      Just remember to keep changing it up – using the skills you develop in the tutorials, not the designs you see in the tutorial itself :)

      Reply June 21, 2012 at 10:24 am
      • Ancel Litto

        Sure Kaitlyn.I will definitely do better next time :)

        Reply June 22, 2012 at 1:28 pm
  6. chocolate992

    Very nice tutorials.Thanks. :D

    Reply June 21, 2012 at 7:41 pm
  7. Fie

    Please enable email subscription :(

    Reply June 21, 2012 at 8:51 pm
  8. Steve

    Cheers for sharing Kaitlyn, awesome collection of different sort of tutorials, very nice stuff! Great selection too, you’ve included a wide sample of different tutorials that cover many styles and techniques in detail. Particularly found the inset typography and stitched badge ones useful, seeing these kind of designs a lot on the web. Can certainly pick up some tip and tricks by going through each of these. Thanks again, keep them coming!

    Reply June 22, 2012 at 1:01 am
  9. SBJEWEL

    Awesome… :)

    Reply June 28, 2012 at 8:50 am
  10. Beckii

    Hello I seen an ad while searching for fonts of 99 designs has free font managers, fonts, ect..so i clicked on it and I basically found my way here and still am not seeing anything as such, can someone help? Also love these tutorials but I use paintshop pro, does anyone know tutorials, where to get tubes, brushes, ect?

    Reply June 29, 2012 at 10:53 am

Leave a comment