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:05
    • 2. Introduction to the class

      1:38
    • 3. Project Primer

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

      1:59
    • 5. Research: Neon & Lettering Styles

      1:39
    • 6. Brainstorming

      3:55
    • 7. Pencil Sketching

      3:49
    • 8. Lettering in Illustrator

      7:25
    • 9. Photoshop phase I: Glows and Colors

      9:12
    • 10. Photoshop phase II: Animation

      7:46
    • 11. Saving, exporting & posting your GIF

      6:04
    • 12. Closing Segment

      0:58

Project Description

Create a neon-style animated GIF of your favorite foreign-language word or phrase

Assignment:

Your assignment is to create – from scratch – an original, expressively lettered and animated GIF of your favorite foreign-language word or phrase in the style of a neon sign. Inspired by my side-project Neon Franco-Type, you’ll choose a word or phrase that has meaning for you, and convey the concept and energy of the words through expressive lettering. This is a fun, simple exercise in lettering and animation, for designers, illustrators, or type-lovers at any level. You’ll come away with a fresh approach to expressing meaning in your lettering work, solid skills for building real-looking neon letters, and the ability to make a simple animated GIF.

TOOLS for the Class:

  • sketchbook
  • pencils
  • Adobe Illustrator (optional)
  • Adobe Photoshop

Deliverable:

An animated GIF featuring:

  • a foreign-language word or phrase
  • illustrated in the style of a neon sign
  • simple or complex animation

Please share the steps of your process in the image gallery, including  your resource photos of real neon signs, pencil sketches, digital sketches and the final completed GIF.

Resources:

Beyond the neon signs you find in your locale, there are some great videos online that will expand your understanding of neon, including: 

The Making of Neon Signs in Hong Kong 

Let There Be Neon 

Old Las Vegas Spring of 1966 

Vancouver neon signs in 1957 

Student Projects

project card
Luis Caballero
4 comments
project card
Kyndl Rowland
2 comments
project card
Bruce Martin
3 comments
project card
Kate Sypek
1 comment
project card
Kate Widdows
1 comment
project card
Katie Ekins
4 comments
project card
Nina Cornwall
1 comment
project card
Adam Jones
2 comments
project card
2 comments
project card
Ana Menezes
6 comments
project card
Jason Mallett
1 comment
project card
Peter West
1 comment
project card
Vanessa Quijano
1 comment
project card
Jeanna Craig
1 comment
project card
Kat Rybinska
2 comments