Electric Letterland: Building Animated Neon Lettering for Blogs & Websites
- 1x (Normal)
Introduction to the class1:38
Choosing your foreign language word(s)1:59
Research: Neon & Lettering Styles1:39
Lettering in Illustrator7:25
Photoshop phase I: Glows and Colors9:12
Photoshop phase II: Animation7:46
Saving, exporting & posting your GIF6:04
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 !
Class Projects 25 See All
29 of 29 students recommendSee All
Awesome class, Absolutely loved it. This has inspired me to create designs for potential real neon signs! Thanks Kate!! Love your work and inspiration.
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.