Last month I posted a showcase of incredibly realistic neon signs that were made using 3D software. I’m much more of a 2D guy so I wanted to have a go at producing a similar neon effect using Illustrator and Photoshop, but with the addition of movement via an animated GIF. Follow this tutorial to see my process of how I created a fun neon sign for Pizza Planet, using Illustrator’s vector tools to create the initial sign layout, then Photoshop to bring it to life with vibrant layer styles and framing for the animation.

Animated Neon Sign Effect

The neon sign effect we’ll be creating makes use of Photoshop layer styles to create the colourful neon glows, as well as a darker layer that depicts the lights being turned off, which comes into play when the sign is animated to add an extra level of realism. Neon signs rely on the bending of tubes to form the shapes of the design, so we’ll use Illustrator to craft the vector paths so no two lines intersect.

Open Adobe Illustrator and create a new document. Draw a circle on the artboard with the Ellipse tool, then clear out the fill, leaving just a black stroke. Change the Stroke settings to 5pt with round cap and round corners.

Become a member to unlock this tutorial
(And gain access to 100s of premium design resources!)

Regular Updates

Regular Updates

New content is continuously added every month, so keep an eye on your inbox for updates!

Unlimited Access

Unlimited Access

Download as many items as you want for the duration of your membership, with no restrictions.

Cancel Anytime

Cancel Anytime

There's no small print! You can cancel your payment subscription anytime you want.

Find out more about Access All Areas Membership

Example Access All Areas products

29 Comments

  1. hello, i don’t know how to add aditional drop shadow effect. it only let me do it once.

  2. Fantastic Tutorial Admin. You Are Greate It is very helpful and most beneficial for making another animated banners and much.

  3. WOAH! This is sick! Thanks for showing! But personally for me it would be easier in a 3D program :) But still, this is really cool!

  4. Thanks Chris this is an awesome tutorial – will keep this bookmarked as I think this will be very useful for e-shots and the like

  5. As a Graphic designer i think its really great tips for me. Really i read your post attentively.Thanks a lot for your Informative post

  6. Creating animation effect is not a easy job but your step by step tutorial is very helpful to teach beginners about these kinds of attractive effects. After visiting your couple of tutorials i found theme very helpful and simple to understand. Keep it high and keep teaching people via tutorials.

  7. loved this tutorial, but when I try to save in GIF format it doesnt save like an animation, its just a picture! Help please

Comments are now closed