Electric Letterland: Building Animated Neon Lettering for Blogs & Websites

Kate Widdows, graphic design, illustrative lettering, & type

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (48m)
    • 1. Trailer

    • 2. Introduction to the class

    • 3. Project Primer

    • 4. Choosing your foreign language word(s)

    • 5. Research: Neon & Lettering Styles

    • 6. Brainstorming

    • 7. Pencil Sketching

    • 8. Lettering in Illustrator

    • 9. Photoshop phase I: Glows and Colors

    • 10. Photoshop phase II: Animation

    • 11. Saving, exporting & posting your GIF

    • 12. Closing Segment


About This Class

Light up the internet with a neon GIF !

What would our civilization be without neon signs? Loved by people the world over, these magically glowing messages spark our night time adventuring, serve as welcoming beacons on lonely desert roads, and show us where to go bowling.

In this project we’ll explore language, energy and meaning through expressive lettering and simple animation. We’ll make our favorite foreign-language words in the style of a neon sign, to light up your tumblr feed or webpage.

While on a 6-month residency in Switzerland, I launched a side-project called Neon Franco-Type, which served as a lettering exercise, an exploration of the French language, and an immersion into my love of neon signs. 

While physical neon signs are expensive to produce and need regular upkeep and repairs, your digital neon creation is free to make and share, and will live forever!


What You’ll Learn

You will see my process from start to finish, including unique strategies for achieving a more realistic neon look, tricks to get the animation just right, and examples of physical and digital neon signs to inspire you.

  • Research: picking a word or phrase that has meaning for you.
  • Brainstorming & sketching: learning how neon is structured and allowing that to influence the design of your lettering.
  • Illustrative lettering: approaches to style, linework and pictorial elements that reflect concept, emotion and energy.
  • Achieving a more realistic neon look: exclusive strategies for creating digital neon sign that closely resembles the real thing.
  • Knowing when the design is “done”: demystifying the inevitable magic moment, and how to get there faster.
  • Animating in Photoshop: using the Layer Comps panel, specialized  lighting effects, animation frames, and approaches to timing that mimic how real neon signs behave.
  • Creating a GIF: technical specifications and special parameters to adhere to, ensuring your GIF will look great and play flawlessly on the Web.

You can make your project as simple or as complex as you want. Your final piece will be a unique message, and a wonderful flashing beacon in the vast darkness of the Internet !