Electric Letterland: Building Animated Neon Lettering for Blogs & Websites Premium class

Kate Widdows, graphic design, illustrative lettering, & type

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

      2:05
    • Introduction to the class

      1:38
    • Project Primer

      1:36
    • Choosing your foreign language word(s)

      1:59
    • Research: Neon & Lettering Styles

      1:39
    • Brainstorming

      3:55
    • Pencil Sketching

      3:49
    • Lettering in Illustrator

      7:25
    • Photoshop phase I: Glows and Colors

      9:12
    • Photoshop phase II: Animation

      7:46
    • Saving, exporting & posting your GIF

      6:04
    • Closing Segment

      0:58

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!

9bc71d9f

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 !

28 of 28 students recommendSee All

This is really a cool class. Learned a lot!
Awesome class, Absolutely loved it. This has inspired me to create designs for potential real neon signs! Thanks Kate!! Love your work and inspiration.
I found it very interesting. Great introduction in the world of NEON signs.
Sebastiaan Destellirer

Graphic Designer, Teacher

431

Students

24

Projects

Kate Widdows

graphic design, illustrative lettering, & type

Kate Widdows is a graphic designer, letterer and neon GIF maker. She has designed typefaces for Nike, is a Giphy featured artist, and has made neon GIFs for the Huffington Post. Kate regularly designs music packaging and t-shirts for the Sublime Frequencies record label. Her artwork lives on a Drag City Records album cover, and she’s hoping to finish a typeface called ‘Oyster’ sometime this century. An adept photographer and illustrator, Kate is also a visual artist in abstract watercolor, calligraphic experiments and neon, and plays the accordion. She’s lived in New York, New England, Seattle and Geneva, and currently resides in Portland, Oregon.