Flock

How to Make a Neon Sign Animation

design team - kelley procreate Jul 27, 2021
How to make a neon sign in Procreate

Today we’re creating a fun and easy neon sign animation using the Procreate app. This GIF tutorial is beginner-friendly. Even if you’ve never created an animation in Procreate, I’ll talk you through every step and share tips and tricks as I go. We’re using Procreate tools like the drawing guide and then Selection Tool to get great results. If you’d like to hand letter your neon marquee sign, you can! Otherwise, you can use fonts in Procreate. 

I’m Kelley Bren Burke, a member of The Pigeon Letters Design Team, and I’ll be sharing new blog tutorials about creating digital art every month. 

 

Supplies:

  • iPad
  • Procreate app
  • Stylus, such as the Apple Pencil 
  • Brushes: I’m using the MonoPigeon Procreate Brush from the TPL Brush Lettering Pack
  • Font: I’m using the font Quicksand, which is a free Google Font. You can download it for free here

 

Grab your iPad and let’s get started!

 

Psst...if you prefer watching a video walkthrough instead, we've got that, too!

 

 

Step 1: Create a Canvas

I’m using a canvas that’s 3000 x 3000 pixels with an sRGB color profile. 

Generally, I like the P3 color profile on Procreate. That offers the widest variety of colors. However, when you export your animation as a GIF, the colors will be reduced to an sRGB color profile. So if you don’t want to be surprised by the colors when you export, start with an sRGB color palette. 

 

Step 2: Create a Rectangle

Create a rectangle. Procreate makes this really easy with their Selection Tool. Tap the ribbon symbol on the upper left corner and then choose rectangle from the bottom Selection toolbar. Use your stylus to draw a rectangle and after you draw your rectangle, color fill it with the color of your choice. I’m using a deep midnight blue. 

 

 

 

Step 3: Let's Add Text!

Let’s add the words for our neon sign! You can letter them or use a font. I’m using a free Google font called Quicksand. If you’d like that font, click here for a free download. 

To add text in Procreate, tap Wrench > Add > Add Text. Group the text layer with the rectangle by swiping right on both layers and tapping Group. 

 

 

 

 

Step 4: Turn On Drawing Guide

Add a new layer for the dots that will frame the inside of the rectangle. 

Next, turn on the Drawing Guide to help you line up your dots nice and straight. Wrench > Canvas > Toggle Drawing Guide On. After you toggle the drawing guide on, you can edit the drawing guide by tapping Edit Drawing Guide.  

 

Step 5: Choose Your Brush

Choose a Monoline brush on Procreate. I’m using The Pigeon Letter’s MonoPigeon with the brush size brought up. You can use a Monoline brush as a stamp, by tapping the brush on the screen once. Adjust the size until you get a dot that’s right for you. 

 

 

 

 

Step 6: Make Dots and Duplicate, Duplicate, Duplicate

Use the drawing guide to line up your dot right in the middle of where two lines intersect. Next, duplicate that dot by swiping left on that layer and move the new dot over to the next line intersection. Now you have two dots in a row, spaced perfectly. Merge those two layers together with a pinch and do it again. Duplicate the two dots, then move them so you have four dots in a line. Merge the two layers and duplicate. Keep doing that until you have a row of dots filling the top of your rectangle. 

 

 

Once you have a line of dots, duplicate that layer. Bring the new line of dots to the bottom of your screen so it’s lined up with the top row.  

Duplicate one of the horizontal lines of dots to create our vertical line of dots. Tap the arrow on the upper right part of your screen and then Rotate 45° on the bottom toolbar twice to make your row of dots perfectly vertical. Erase any extra dots! 

Guess what we’re doing next? If you guessed that we’re duplicating the vertical row of dots, you’re 100% right. Let’s do that, and move the vertical line to the opposite side of the rectangle. You should have a frame of dots inside your rectangle. 

 

Step 6: Duplicate and Recolor

Duplicate your dot frame layer. Tap on the new layer, and click Alpha Lock on the menu that pops up to the right. Choose a new color for this dot layer and then do it again, with a third color for your third layer of dots. 

TIP: label your layers with the color of your dots. That will help us later. 

 

 

 

Step 7: Animate!

It’s time to animate! Go to Wrench > Canvas > Toggle Animation Assist On. You’ll see a new toolbar at the bottom. Believe it or not, we’re ready to play the first animation. Hit play on the toolbar at the bottom. Adjust the frames per second to your liking with the slider under settings. Choose Ping-Pong as the type of animation. To export your new animation, go to Wrench > Share > Animated GIF. 

 

 

 

Step 8: Create a New Variation

Ready for a fun variation on the first animation? To make things easy, we’re going to duplicate the first animation. Go to the gallery, swipe left on the canvas, and choose duplicate. Change the text if you’d like a new message for your marquee sign.  

Group the three dot layers together on your new canvas. Make sure you label them with the color of the dots. To make this animation, we’re erasing away the dots on top to reveal the colors underneath. My top layer is cream, the second is pink and the third is orange. Start at the top left corner and erase the second and the third dot, keeping the first dot cream. Keep going like this all around the marquee sign. 

 

 

 

Step 9: Erase the Dots

Go to the second layer (mine's a pink one!) and erase away the third dot. In my case, it’s the dot before the cream dot. This will reveal the orange dot below the pink dot. 

 

 

 

Step 10: Change Colors

Duplicate this group of three colored dots twice. The hard part is done - all you need to do now is change the colors for the new layers using Alpha Lock and Color Fill. My original layers are cream, pink and orange. The first duplicate layer will have the layer colors in this order: orange, cream and pink. On the third new group of layers, I’ll change the layer colors to pink, orange and cream  - in that order. 

 

 

 

Step 11: Adjust the Speed and Export

And we’re done with our second animation! Adjust the speed to your liking and export.  

Thanks for creating with me today!

 

Kelley is a self-taught illustrator, animator, doodler and educator. She creates art on her iPad with Procreate and is excited to share her love of the illustration app with artists of all levels. Check out more of Kelley's tutorials here

 


 

Pin for later if you want to test out your animation skills.