3 Ways to Animate Your iPad Lettering using iMovie, Procreate, and RoughAnimator | Liz Kohler Brown | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

3 Ways to Animate Your iPad Lettering using iMovie, Procreate, and RoughAnimator

teacher avatar Liz Kohler Brown, artist | designer | teacher | author

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

10 Lessons (1h 5m)
    • 1. 3 Ways to Animate Your iPad Lettering using iMovie, Procreate, and RoughAnimator

      2:15
    • 2. Downloads & Backgrounds

      2:54
    • 3. Intro to RoughAnimator

      8:34
    • 4. Making an Animation

      12:50
    • 5. Starting in Procreate

      7:39
    • 6. Moving Elements Off the Canvas

      6:09
    • 7. Recording Your Animation

      6:54
    • 8. Editing and Cropping Your Animation

      6:28
    • 9. Multi-Colored Lettering

      5:14
    • 10. Clipping a Multi-Colored Animation

      6:01
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

997

Students

8

Projects

About This Class

5edab838

In this class, you'll learn how to turn your hand lettering into animations that make your lettering really stand out online.  I’ll show you several different types of lettering animation, so you can choose the method that works best for your personal style.

You'll learn:

  • how to create a simple animation with moving decorative elements
  • the basics of the RoughAnimator app
  • a few different ways to make your hand drawn elements move across the page.
  • how to turn an image made in Procreate into an animation using RoughAnimator
  • how to create a hand drawn animation that shows the movement of your pencil or stylus
  • how to use multiple colors in an animation, so you can turn any quote into a multi-colored animation.

Materials:

All you need to take this class is your iPad, Procreate, and a stylus.  The RoughAnimator app is optional, but it’s only a few dollars in the app store, so once you see how fun it is to use, you’ll probably want to buy it. If you’re growing your hand lettering business or online following, animating your lettering is a great way to get noticed online.  I’ll be using the Apple Pencil in this class, but you could use any stylus, or even your finger. Let’s get started!

Here is a link to the class downloads & resources (the password is in the first lesson)

Meet Your Teacher

Teacher Profile Image

Liz Kohler Brown

artist | designer | teacher | author

Top Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 3 Ways to Animate Your iPad Lettering using iMovie, Procreate, and RoughAnimator: Hi everyone. I'm Liz. I'm an artist, illustrator, and teacher. Today I want to show you how to turn your hand lettering into animations that make your lettering really stand out online. I'll show you several different types of lettering animation so you can choose the method that works best for your personal style. First, we'll use an app called RoughAnimator to create a simple animation with moving decorative elements. I'll show you the basics of the app and show you how easy it is to start turning your lettering into moving animations. We'll look at a few different ways to make your hand-drawn elements move across the page so you can start getting creative with your animations immediately. Next, we'll turn an image we make in Procreate into an animation using RoughAnimator. I'll show you a few different methods for animating the parts, so you can play around with different methods for each lettering piece you create. Next, we'll create a hand-drawn animation that shows the movement of your pencil or stylus. We'll use the free app iMovie to turn a simple photograph into a captivating quote. Next, we'll look at how to use multiple colors in an animation, so you can turn any quote into a multi-colored animation in a few minutes. All you need to take this class is your iPad, the app Procreate, and a stylus. I'll be using the Apple Pencil, but you could use any stylus or even your finger. The RoughAnimator app is optional, but it's only a few dollars in the App Store. Once you see how fun it is to use, you'll probably want to buy it. If you're growing your hand lettering business or online following, animating your lettering is a great way to get noticed online. Let's get started with animating our hand lettering. 2. Downloads & Backgrounds: The first thing I want to do is show you how to find the downloads that you'll need for this class. You can find a link to get to this page in the about section of the class, and if you're on the Skillshare app, you'll have to switch to a browser on your iPad because the about section doesn't show up on the Skillshare app. You'll also need a password to get into this page, and I'll show the password on screen right now. Once you get into this page, you'll see that there's a whole list of downloads here at the top. I've listed all the apps that I'll be showing in the class today. I've also listed a link to the Pinterest board that has all of the backgrounds that I'll be using, and you'll also see a link to download the brushes. These will just link you to other pages, and then the last one we'll download the brushes for you. I'm going to click, and hold that link open in a new tab. Once that new tab opens, you should see the option open, and procreate. If you don't click more, and then you can find procreate on that list. I'm going to click open and procreate, then it'll just open whatever page you had opened last, and procreate. When you go to your brushes, you'll see at the very top of your brushes now there'll be a new set called animation, and that'll have your brushes in it. Next time you need go back to that downloads page, and show you this background's Pinterest board. I'll click on that one time, and if you have the Pinterest app, it'll open the app. If you don't, it'll just open browser, whatever your default browser is. I've saved a ton of backgrounds that I thought would be nice for lettering projects, and all of the backgrounds that I use in the class today are linked on this page. All of these images are from the site on splash. This site has free images that are free for personal, and commercial use, and you can make changes to them as well. If you want to download one of these, click on it, click again to open the unsplash page. Then you'll see the option to download for free. If you log in, it's a little easier because you don't get the capture message every single time we try to download something. I always log in, and then you can just click download, and it should save it to your photos. If it doesn't save it to your photos, you can click download, and then it'll just open a web page, and you can click save image. All of the backgrounds you see me use today, I got onto my iPad using this same process. Now I have them all saved in my iPad photos. 3. Intro to RoughAnimator: For our first project, we're going to use the app RoughAnimator. This is a really easy to use once you get to know the basics. I'm just going to take you through the basic settings here and then we'll get started on our first project. This app is only about $5 and it allows you to create unlimited GIF images and animations that are really easy to use with Procreate. We're going do one in RoughAnimator and then we're also going to create one in Procreate. Let's get started by opening the app. When you first open the app, you'll see on the left side all of your projects you've created. You can click on one of those to change the settings. If I click on an image, I can open it, open project, delete it, rename it, duplicate it, or I can just create a new project. I'm going to click "New project" so we can look at all of the settings that you'll get started with. First thing you'll do is set your project name, so I'll call this class test, and then you can set your resolution. This is the number of pixels you'll have left to right and top to bottom. So 1080 by 1080 is the max, so that means you couldn't make an animation that was big enough for a laptop screen, but you could easily make one that was for Instagram, Facebook, your website, something like that. 1080 by 1080 is really about three-by-three inches if you're working at 300 DPI, but for the web, you could really work at 200 DPI so it can be five-by-five inches. Then you can set the frame rate, 24 frames or 24 images per second, is the standard number that they work with in the industry, I like to work with 20. I find that 24 is a little excessive for lettering. For me, 20 is plenty. You can change this now, or you can change it later on. It really just changes the speed and smoothness of your animation. We'll get deeper into that later. I'm going to click "Okay" and then it opens my new document. You'll see that this has a lot of the same tools that Procreate has so if you're comfortable with Procreate, this won't be a huge jump for you. On the left you have all of your options for drawing, like the paintbrush, the eraser, selection tool, paint bucket, which just fills the whole Canvas. Then when you click on the paintbrush or the paint bucket, you can then change the color by just clicking on that little color switch and changing it here. I'm going to stick with black as my color and click "Okay". One thing you'll notice about this app is that you cannot draw with your finger, with the settings that come with the app it does not allow you to draw with your finger so you need a stylus, whatever stylus you have or your Apple pencil. I'm just going to draw a circle here with this brush, you'll see on the left here there are other brush options and you can also add a brush shape. On the left side here you'll also see some options for your layers. Here there's a button to modify layers, if you click that you get the option to add an empty layer. Copy timing to blank drawings that means, let's say you have a frame that's five seconds long. You want to create a new layer that's five seconds long, you would click that. Or you can just copy the drawings that are on an existing layer and move them to a new layer. I usually just click "Add empty layer". You'll also see add drawing so you can think of this as your layers going horizontally and your time going vertically. If I add a drawing, let's say I add a drawing after the current drawing you can see it added to the right a new drawing. In time I added a drawing but it's still on the same layer, because I set this to 20 frames per second at the beginning of the video. This is a little less than a 20th of a second. Let's say I do this, change my drawing to 20. Now this is exactly one second long, so whatever I put in this time span is going to be one second long. If you want to undo what you've just did, you've got your undo and redo buttons here. Now I have two drawings I have the first drawing I created, and then I created a new drawing by clicking "Add drawing, Add after". Now I have two drawings, but you'll see this one turned red. This red circle is a guide called onion skin. Onion skin just means you can see what you drew before and after. Let's say for example, I draw circle on this drawing. Now I can see the drawing that I did on the first drawing, the one I did on the second drawing and if I click " Add drawing, Add after". Now I've got three drawings, three circles. If I step back to my middle drawing, I can see the circle before and the circle after. This is really helpful when you're animating because you want things to move smoothly so you need to see where your previous mark is. We can also move our drawings around, so if you don't like this circle in the middle, let's say it needs to move to the right or the left. You can use these buttons up here and move over to the left, move over to the right. You can also just skip around on your drawings with these tools here or you can move up and down to see what your animation would look like in slow motion or you can click play and actually see your animation. You can see I only drew three circles so this isn't a very good animation, it's just a circle bouncing back and forth but you get the idea. You can draw something and immediately preview it. With every tool you use here, you can click "Tool Options" to show or not show the options for that tool, that's really helpful when you're drawing and you just need a little bit more space. You don't need to see all your paint brush options. But then when you're ready to have it back, just click that button to see the options. One last thing you might want to do is go to Project options and app preferences. A few things that I like to change on the app preferences is the onion skin. I don't play with the preview or the buttons here, I left all of that as default. But the onion skin, what you see before and after on each layer can be really important depending on the drawing, you may need to change the colors here. You saw that my onion skin was red before and green after. You may want to change for previous drawings, I could do blue or green change for following drawings, I could change that as well. If you were doing a red lettering project, you probably don't want red as your onion skin color because it's going to be really hard to see. I don't play with any of these other settings, they just change what you see when you open the app. But you may want to change the interface. If you're a left-handed person, you can put all of the buttons over here and once you get going with making animations, you'll probably be doing this with both hands, where you're creating a new layer drawing. You want to have it so that your hands are really comfortable on the screen. I'll click "Done" to save those settings. Let's go ahead and do our first project. 4. Making an Animation: The first thing I'm going to do is just delete all of these circles. I can do that by clicking on the drawing and clicking delete drawing, and I'll do that for each one. Or I could just make a new layer, add empty layer. Then if I click here, that'll select my first layer. Then I can just delete that first layer by clicking modify layers, delete layer. Now I have a brand new layer. You have to always have your background layer and another layer. You wouldn't be able to delete this layer here unless you create a new one. I'm going to go ahead and name that layer, background. Just so I can stay organized. Then I'm going to put a background image into this document. I'll click project options, import image, choose photos. Then I'll go to my photos and find this image. At first place this image down, it'll look red like this, and you can zoom out, and just move the image. If it's not a square image, you may have to change the size. I'm just going to pull these little bars on the corners to resize this, and then just orient it on the canvas. Once everything looks good, you can just click over and a blank area to set that movement. Next, I'm going to create a new layer, and that will be for all my drawing. I'll click modify layers, add empty layer. Let's change the name of that layer to, drawing or let's call that text. Now I'm going to get my brush and I'll change the color here to white. I'll click white and click a color, and you can also save colors. You can see I have a few colors saved here. If you want to do that, just pick the color and then click and hold in that area and that color will be saved for you. I'm going to use white and I'll click the rush options here. I'm just going to use that first symbol brash. I'll go ahead and just write my quote and I'm making sure I'm on this top layer, not my background layer. When I write the name of the person that did this quote, I'm going to reduce my brush size a little bit because I want that text to be a little bit smaller. I'm just doing this with the brush size option here. You can also change the opacity and how far apart the brush components are spaced. Now that I've finished writing my text, I feel like it's a little bit too big on the canvas. There's not enough space around it for the decoration. I'm going to click my selection tool and I'm just going to circle all the way around this text just making sure every little bit of the white is captured within that selection. Then I can use the little bars on the corner to make it smaller. Then I can use the move tool to move it. I can also use the rotate tool, to it rotate a little bit. I tend to write sideways, so sometimes I need to adjust that rotation a little bit. Once you're happy with the way that looks, you can click over here to clear that selection. Now I'm going to create a new layer, add empty layer and I'll call this, my decoration layer. If you need to switch back between other layers, you can just click on that little bar wherever the drawing is. Right now I want to be sure I'm on that decoration layer and I've got my white brush. I'm just going to go through and add some little marks all the way around the quote. Now I have all of my drawing taken care of, but you can see here I have three layers, but when it comes to my timeline I don't have a lot of time. I have 120th of a second. What I'm going to do is, go to my background layer and change that to 20. Now I have one second with my background layer. I'll do the same thing on my texts layer. Now you can see if I click the preview button, I have one second that shows my background and my texts, and 120th of a second that shows my drawing. I'll click stop. Let's change the decoration to five seconds or five frames. That's one quarter of a second. Now if I press play, my lines last a lot longer. You can play around with that, adjusting how long each element appears on the screen to get it to display exactly as you want it to. That's fine if you want it to just flash. But what if you want these lines to move around the page? If that's your goal, you can click the decoration layer. If you ever forget which layer is which, you can use these little opacity tools on the left to just slide it over. Then that'll make that layer opaque or transparent, so it makes it easier to understand where you are on your drawing. I'm making sure that drawing is selected. Then I'll click add drawing, and rather than adding a drawing after, I want to duplicate a drawing after. I'm duplicating the same drawing, now that same drawing showing for ten seconds, or one second 20 frames. I'll click on that drawing and zoom in. You can really see here, I'm going to click my selection tool and select one of these little decoration marks and then move it slightly and then turn it a little. If I click over here, that'll clear out that selection, and you can see the frame here and the frame here. When my animation gets started that'll just move slightly. I'm going to repeat that same process with all of my lines. I'll circle it, move it up a little bit, and if you make a mistake just press the back button and start over. Move it up a little bit and turn it. I'm going to try to turn it in different directions each time. This time I'm going to turn it left, the next time I'm going to turn it right. I'll speed up my video while I repeat this process with all of the decoration marks. Now I have moved every single dot and turned it a little bit. If I press the play button, you can see that these just dance back and forth and come in and out on the page. You could do the same thing again with that same drawing, so they would have three different movements to four different movements. It's totally up to you here, how long you keep each of these frames going, and how many drawings you do. Another thing we can do is shorten our first drawing to five, and shorten our second drawing to five as well. Then we can duplicate each of these, so we have shorter and more frequent movements. I'll duplicate the first one, add drawing, duplicate after. But then I want to move it over here. I don't want it to be two of the same right after each other, so I'll click my shift button here to move it over. Then I'll do the same process with my second drawing, duplicate after, move it over. Now if I click play, it's the same drawing, but they're a little bit faster and a little more frequent with the movements. That's one option for the decoration. I'm going to make that decoration layer invisible by reducing the opacity. I'll create a new layer. This is a nice thing to do if you're just not sure exactly how you want your animation to look like, you can leave that decoration there. You can always go back to it, and then we can start with a new type of decoration here. What I'm going to do for this one is, create a drawing that's five frames. I created a new layer and changed it to five by changing the drawing duration. I'm going to change the name of this to, decoration two. Next I'm going to get my brush and just draw one mark. Then I'll click, add drawing, duplicate after, and draw another mark. I'll repeat that same process, duplicate after draw one mark, so you'll get the idea here. This is going to show a progressive drawing where each line is added one at a time. The only problem we run into here is that, your background and your text aren't going to be big enough for all of these dots. Let's just go ahead and set this to 100 frames. That's going to be five seconds since we have 20 frames per second. I'll set my text layer and my background layer to 100 frames per second. Then I'll continue with decoration two, clicking and drawing, duplicate after, and then draw one mark. I did a 100 frames adding one stroke at a time. Let's click play. This will be a five second animation, where each line is added one at a time. That's the basics of this program. There are so many things you can do just with those few little steps. You may just want to start by playing around with all of these options and getting really comfortable with the format. Once you're happy with their animation, you can export it. I'll click project options, you can export it as an MOV video or GIF file. If you export it as a GIF file, it'll be repeating on a loop. If you put this on your website, for example, it would repeat on a loop, and you'll see that's what I did on the downloads page where you can get the brushes that you'll need for this class. Whereas on MOV video, that's what you're going to use for like Instagram, Facebook, anything that you want to play one time. Also, some of those sites don't accept GIF files. You'll just have to play around with which file type works best for the use that you are going for. You'll see that the main downside of this program is that there aren't a lot of brush options. There's three brushes and they're not that great, and it's also hard to do clear, smooth lines. You can see I'm not a professional letterer, but even in here my lettering just looks bad. I usually make my stuff and procreate and then bring it into this program. Let's go ahead and do that for our next project. 5. Starting in Procreate: For this next project we're going to start out in Procreate, we're going to make our whole image in Procreate and then import it into RoughAnimator, so we can play around with the movement a little bit. First I'll click the ''Plus Symbol'', create custom size and I'm going to work at five-by-five inches here, because that's really the maximum that you could do with RoughAnimator so there's no need to go above that and use up space on your iPad. I'll stick with 300 DPI here and click ''Create''. Next, I'm going to import the image that I want to use for the background, and I got these onto my iPad using the same process that I showed in the first video. I just did the new Procreate update, so if you haven't done that yet, yours might look a little different but I'll click ''Add'', insert a photo, and then I'll find the image that I want to use. Next, I want to go to a new layer so I want to be sure with this document, everything I do is on a separate layer. I have my background layer, then I'll have my text layer, then I'll have my decoration layer and I'm going to import those separately in the RoughAnimator. This will be my text layer, I'm going to use the OverApp to find some texts that I want to use, Over is a free app that makes it really easy to add text to your Procreate images, and I'll just click ''Create'', use transparent as my background, and then you square as my ratio, then I'll click ''Text'' to add in some text and then I'll just slide over here to find a font that I like. I'm using the Hello Beautiful Font, and then I'll change the size here to bump that up, and I'm going to change the color to black just so it's a little easier to see but my final color will be white. I'll press the ''Check'' symbol to set that type, and then I'll do the same thing with the name for the person who made this quote. I'm happy with how that looks, I'll click the ''Share Button'', save to photos and then I can go back to Procreate, click the ''Tool Symbol'', insert a photo, and then find that image. As long as you use the transparent background in Over, you should have a transparent image here. The next thing I'm going to do is make my background invisible so it's a little easier to see this. Make sure this is in the center of the Canvas, create a new layer and get my texts layer to about 30 percent opacity, then on that new layer, I'll get black as my color and I'm going to use the fuzzy marker here that's in the set that you can download and I'm just going to go through and change this text a little bit so it's a little closer to my personal style. I like using fonts as a guide but I don't like just totally copying the fonts, sometimes it looks a little too much like a graphic design piece. I'm just going go through with this fuzzy marker and just add a little bit of texture. Now that I've written down all of my text, I can make my original texts layer invisible, so now I just have my handwritten text and then I can bring my background layer back. Next, I'm going to change this to white because I really want a white on this dark background. To do that, I'm just going to go to Hue Saturation Brightness and bump the brightness all the way up to get a white. You can do that again if it's not white enough and you can also duplicate the text layer if you want a little bit more bold. I think I'm going to go with the duplicated version, I like that bold text, and then I'll just merge those two texts layers together. Now I'm going to create a new layer for my decoration and the background, and I'm going to use this thick Chinese ink brush that comes along with the animation downloads. I'll change my color to white and get a medium-sized brush. I like this brush because you can really start out and then make it get larger as it goes out. I'll just continue the same process all around the Canvas, making sure I'm on that new layer. As I'm doing this, I'm thinking about my animation. I'm thinking about how this look with my animation. Is it giving enough room for the text? Is there going to be enough space between the decoration and the text? If not, we can go to the text layer and make sure magnetic is selected and just make that a little bit smaller, so maybe it needs a little bit more room to breathe. I'm happy with how this is laid out, so I'm ready to put this into RoughAnimator. What I'll do is make two layers invisible, so I just have the background layer, then I'll click the ''Tool Symbol'', ''Share'', ''JPEG'' and ''Save Image''. I'm just saving this image to my photos. Next, I want to make that layer invisible and make my background layer invisible so that I have a totally transparent Canvas. Then I'm just going to reveal my text.. Now you can see my text layer here and nothing else. I'll click the ''Share Button'' again, but this time I'm using PNG. PNG is a file type that allows you to have a transparent background so we need to use that for our RoughAnimator image. I'll click ''Save Image'' to save that PNG to my photos and I'll do the same process with my decoration layer. I'm making sure there's nothing on the Canvas except for my decoration and I'll click ''Share'', ''PNG'', ''Save Image''. Now I have one solid background layer and two transparent images. 6. Moving Elements Off the Canvas: Next, I'm going to open up RoughAnimator and click "New Project". Let's call this Ruin to Transformation. I'm going to stick with the same settings, 1080 by 1080 and 20 frames per second. Then I can start dropping in my images that I just saved. "Project options", "Import an image", "Photos". There's my first image. This was a square image already, so it fits perfectly on the canvas. I'm going to rename that layer Background. Next, I want to create a new layer for my other images. I'll click "Modify layers", "Add empty layer". Let's call this Text. "Project options", "Import an image", "Photos". Because this is a white piece of text on a white background, it doesn't show up here. It's just transparent. I know that I just need to click here where that square is, and that'll import that text. That'll be a little easier if you use a colored text. Now I'm going to do the same process with my decoration. I failed to create a new layer before I did that. I'm just going to click the "Back button", "Modify layers", "Add an empty layer". Call that Decoration and then import that image again. Now I have all three layers, my background layer, my text layer, and my decoration layer on separate layers. Now I'm ready to start animating. Let's start by setting our background layer to 20 frames and setting our texts layer to 20 frames. Now our drawing is exactly one second long. Let's set the decoration to 10 frames, so that'll be half a second long. Then I want these dots to move slightly on the page or off the page. The first thing I'll do is click on that layer, click "Add drawing", "Duplicate after". Now I have two of the same drawing. On the second line, I'm going to make some changes. I'll click "My selection tool" and then go to each one here, circle it, and then just make it go slightly off the page. I'll continue that same process around the canvas with all of these. Unlike in the first one where I rotated it a little bit, with this one I'm just pushing it off the canvas a little bit. You're not going to get that wiggling effect. You're just going to get a little bit of movement out. I moved all of my dots. If I click "Play", you'll see they just move in and out. Now I want to make these go all the way off the page. I'm going to continue the same process. First, I need to increase my background. Let's just go ahead and change the background to 60. That'll be three seconds. The same thing with the text. I've got 60 frames for each: the text layer and the background layer. Now I can go to my dots layer, add drawing, duplicate after, and then repeat the same process that I just did. I'm going to go to each one and skew it slightly off the page. Now I have three different layers, three different drawings, in, middle, out. I'm going to repeat that again. These are just slowly working their way off the canvas. Add drawing, duplicate after, and move them a little bit more off the canvas. Some are going to go totally off the canvas in this movement. I'm going to do that same process one more time, maybe two more times to get all of these pieces off the canvas. Now that I've moved everything off the canvas, I'm going to check and make sure that my dots end at the same point as my text and drawing. For example, if my background was 100 frames, then I scroll over here and you can see that my background goes way too far. We want the background and the drawings to end on the same frame. I'm going to make sure my background layer is set to 60. Now all three drawings end at the same point. Now I can click the "Play button" and see how this turned out. You can see that's a really fun way to give a lot of emphasis to your quote. It's almost like the decoration is making way for the quote and clearing the space. It really draws a lot of attention to the center of the canvas. 7. Recording Your Animation: For this next project, I really want to bring a lot of movement into my animation. I want the viewer to be able to see how my pen moves across the page without seeing my actual hand, obviously. We're actually going to do a recording for this. You will need to double-check that you have screen recording setup on your iPad. Go to your settings, click Control Center, click Customize Controls, and then make sure that screen recording is on the include list. If it's not, if it's down here, you'll just need to click it to move it up to your include list. What that's going do is move it to this little menu that you get by just dragging your finger down. Here's the screen recording button, just this little circle, and that's going to allow you to record everything that you do on your screen. Next thing you are going to open, Procreate and make a new document. Create custom size, and I'm just going to do 10 by 10 inches to get a high resolution for this one. I'll click Create. Then I'm just going to drop my background image by clicking Add, Insert a photo, and find that image on my iPad. The image is a little bit light. I'm going to darken it up slightly by clicking Hue saturation brightness and then just move down the brightness a little bit so that my white text looks better on this background. Next thing I'm going to create a new layer and I'm also going to go to my background layer, swipe left and click Lock. I never want to write on that background layer because I'm going to give myself a few chances to do this animation. I'm going to write it three or four times and each time I'll write it on a new layer, so I never want to mess with my background layer. I'm want to keep that safe. The next thing I always do when I start one of these, is some practice runs. You want to know exactly how you're going to lay out your lettering before you press Record. Take your time, practice this, depending on how comfortable you are with lettering. If you're a total newbie, do it 30 or 40 times, just get really comfortable with this particular quote. If you're a pro letterer, one or two times is probably fine for you. But just feel it out, work on it until you're comfortable and then you can go ahead and press Record later. I'm just going to do a couple of practice runs before we get started with recording. There's a few things I'm thinking about as I'm practicing. Am I dotting my Is consistently? Am I crossing my T's consistently? Is my lettering going up this way or is it going straight across the page? Mine is going up a little bit so I need to be aware of that and shift it so that it's straight horizontal across the page. If this was my first time doing this quote, I would practice this over and over, make sure the spacing looks really good before I move on to the recording step. But I've already practiced this one a lot, so let's go ahead and move on to recording. I'm going to make that layer invisible, click Plus to make a new layer, and then I can go ahead and turn on my recording. If you're in Procreate, you can pull down one time and then pull down again. You'll notice if you pull down too far to the left, you just get this home screen so you need to do it really over far and the right, especially if you just did the new iPad update, which moved way over in the corner here. I'm going to do that twice, over in this right corner, and then I'll get that option. Then I'm just going to click the Record button here. That's going to start my recording and you'll notice as soon as you press Record, you probably feel a little bit more pressured, but don't worry about it. You can do this three or four times, you can take a few takes within each recording so there's really no pressure here. Just take your time and try to practice a lot beforehand so you feel comfortable once you get to the recording stage. Go ahead and press Record and then I'm going to get three, two, one, and then I'll get that record symbol. Now I can click over here and I want to remove all of the stuff on the top. First I'm going to double check that I'm on the right layer, I've got the right brush and the right color. Then I can tap four fingers, and that puts me in full screen mode. Now I'm just going to pinch here to make this bigger and make it fit on the canvas, and I really want to be sure that I'm cropping the top and bottom of this image. Especially if you're going to use this for Instagram, you don't want the gray background to be visible. Now I'm going to go ahead and take a few tries at doing this quote. This is okay, I'm not crazy about that F, I'm not crazy about that M so I'm going to to do another pass. I'll click four fingers to get back my Procreate menu, click the Layers panel, make a new layer and make that first one invisible. Click four fingers again to go back to full screen and then do another pass, same thing. That one's a little better, but I'm not a 100 percent happy with it, so I'm going to do the same process that we did last time. Make it invisible, make a new layer, tap four fingers and try again. I'm happy with that one. I may be able to use one of the other two, so I'm going to go ahead and stop my recording. I'll pull down one finger here two times. You can see that's still flashing because it's still recording. I'll click it one time and then you should get a little message that says screen recording saved to photos. Now it's saved in your gallery. 8. Editing and Cropping Your Animation: Next I'm going to open this up in the free app iMovie. You'll have to download this if you don't already have it on your iPad, it's totally free. It's an Apple product. I'm going to click that one time and then click "Plus" to create a new movie. I'm going to make a movie not a trailer. Click "Movie." Then I just want to select that recording that I just saved. Here it is. It's three minutes and 25 seconds. I'll click that one time and then click "Create Movie." It automatically starts me at the end of the movie here. But I can scroll over and see the whole movie and you can see how it's changing here as I work. I remember that I didn't like the first two, so I'm just going to scroll to the very end and find the last one. The first thing I want to do is trim out all that stuff where I was like stopping the screen recording and anything where you can see the menu is showing up. I'm going to click on this clip one time and then it gives me this little yellow bar here that I can use to just shift over and remove the part of the recording that I don't need. I'm watching this screen. I'm watching for all the stuff that I don't need and there we go. That's where I want to stop my recording. Now I can just slide over with my finger to find the beginning of this movie. There it is right there it's after I pull up that menu and before I start writing. You just need to get your little white cursor here right on that spot. Click one time and make sure Actions is selected down here, and then click "Split." Now I can click this first part of the movie and just click "Delete." I don't need that. Those are just my extra tries. Now I'm just going to click "Play" to watch this. You can see it's really slow. This is probably slower than most people would be willing to watch on Instagram so I'm going to click "Plus." I'm going to click on it one time. Click "Speed" and bump up the speed. That doubles the speed of this. That should be enough. If it's not, you can export this from iMovie and then import it again and increase the speed. They won't let you increase it more than two times with this particular app, so you would have to actually export it and import it back in and increase the speed again. But for me, I find that two times is enough. It's fast enough for most people to watch. Let's go ahead and test this out. Okay, so that looks good. I'm happy with the speed of that, I'm happy with my writing. I'm going to click "Pause" and I'm going to click "Done." That saves that as it is, and then I'm going to click the little "Share Button" down here and click "Save Video." That's just going to save it to my iPad or you may just want to go ahead and put it on Instagram or e-mail it to yourself, something like that. Whatever you want to do with that here you can do, I'll click "Save Video," and then you can choose a size here. I'm going to go with the 720 pixels. You may even want to go with the larger one depending on what you're finally use is, so I'll go 720 pixels here, and then you just have to wait until that exports. Then it'll say the movie was exported to your photo library. Now let's say for example, you want to put this on Instagram. You can click the "Plus" symbol and you'll see it's the very first one at the top here and all that gray stuff that was on the side that gets cropped out when we use Instagram. You just have to make sure you're placing this correctly, and then it'll be just fine for posting on Facebook or Instagram. One more thing to be aware of though, is that if you want to use this for anything else like your website or you want to e-mail it or something where you need to remove those two gray pieces on the side. You may want to get another app, this apps called Video Crop. I put a link to this and the class resources page. This is an app that allows you to actually crop your video to whatever size you want it to be. Let's go to the very top here, the video we just created, and you can see there's the gray sides and if I was going to put that on my website, for example, that would look unprofessional to just have the procreate background. This app, I think was $299 for unlimited video cropping, or $5 for all the features and no ads so it's all very expensive if you do this for a living and you need it for your site, it's definitely worth the cost. I'm going to click "Crop" and you can just choose Instagram so you get a square. Then I'll just put this here in the middle and click "Done." Now my video is cropped into a square so I could put this on my website. I could put this on Facebook, some other site that you want to post it on. You may or may not need this app depending on what your final uses for these animations. 9. Multi-Colored Lettering: You may also get to the point where you want to add a little bit of color into your animations with the same style. That's easy to do. You just have to do a little bit more editing. Let's go ahead and do a piece with a little bit of color. Click "Create Custom Size" in procreate and set that to 10 by 10 inches. Then I'm going to insert a photo by clicking "Add," "Insert a Photo." I really liked this picture with clouds and water on the bottom, so I'm going to use this one. I'm going to click the adjustments tool, hue, saturation, brightness and just bump up the brightness a little bit just that my lettering is a little easier to see. Next time we're going to go to that background layer, swipe left and click lock. I never want to draw on that layer, so I'm just going to make sure it's locked. Then I'll click the plus symbol and that will be my drawing layer. I'm going to use the colors that I've already laid out here on my color palette. I do recommend doing that in advance because it's hard to choose colors while you're recording and it'll take a lot of extra recording time. I recommend going ahead and just selecting some colors that you want to use. Now I'm on that new layer. I'm going to get my first color and go ahead and draw my quote. I went ahead and drew out my text, "When you can't find the sunshine, be the sunshine." Then I created a new layer and I'm putting that below my text layer. I'm just going to do a little drawing to accent this quote. I'm going to let it be just a really simple sun ray drawing. This looks really nice when you do it as an animation, because you can really just see the sun rays speckling across the whole drawing and it looks really nice. You could do this with a sign or any kind of decorative element. Now that I'm happy with my layout, I'm ready to go ahead and turn on my recording and do this recording. The first thing I'll do is just delete those layers that I just created, so now all I have is my background layer and now I can turn on my recording and start drawing. You want to see that little recording symbol and then you can get started. I'm on a new layer, I am going to make sure I've got my correct brush and my correct color and then I can click four fingers to put that in full screen. I'm just going to zoom in to crop that top and bottom. This is where I just want to be really careful to never shift this canvas. I'm going to have to change my colors and change my layers each time I do a word. But I want to be sure that I just don't shift this canvas at all. If you do, just stop and start over. Because if you've already shifted your canvas, that recording is ruined so you might as well just start back at the beginning. I'm going to go ahead and get started. I'm ready to change colors, so I can click four fingers. Now I'll get my new color, click four fingers again and do my next word. I'm just going to repeat this same process for the whole quote. Now I'm ready to do my sun illustration in the background, so create a new layer, move that below my text layer, get my sun color, and then draw that after clicking four fingers. I'm happy with that layout, but you could certainly record this again. If you're not happy with how it turned out, just do another try. You can do this a million times until you get it exactly as you'd like. I'm going to click four fingers to get out of full-screen mode. Pull down that recording menu, click that one time. Then I should get that message that says, "Save to Photos." I'm going to click my home button and open up iMovie. Now we'll start our editing process in iMovie. 10. Clipping a Multi-Colored Animation: I'm going to click the "Plus symbol", click "Movie", and then it'll be that first movie on the top of the list here, click "Create Movie". I've got a lot of different pieces for this recording, so I'm just going to start at the beginning and go really slowly. I've clicked this clip one time and now I'm just dragging it until I see that I've got everything in full screen, and I'm just going to keep dragging it until I see that first word being written. That's where I started writing, you can see where my word starts appearing. So I'm going to move my cursor until just before that happens and then stop. Then we'll just let that run to write the word when, as soon as it finishes writing that first word, you want to click one time and click "Split". Now I've written that first word, now this is selected, I can pull my little yellow editing bar to clip out. All this time when I'm choosing my new color, I'm making sure I'm on the right layer, I'm going back to full screen, and there's where I start writing the word you, and so I'm going to make sure my cursor is right before that, and then I'll click the "Play symbol". As soon as it stops writing the word you, I'm going to go back a little bit here to make sure I stop it right after I get to the end of that word, I'm clicking, pause, click on that clip and click split. I'm just cutting out all the pieces where I was actually writing something and not choosing colors or anything like that. I'm going to continue the same process, I'm dragging to clip out all that space where I changed colors, I'm stopping right where I started writing the next word, click "Play" to watch that word, click "Pause" as soon as I finish writing that word, click one time and click "Split". Once you get into this process, it doesn't take very long, you just have to get comfortable with cutting your video and then clipping off the parts that you don't need. So I'm going to continue the same process for each word. I can see that this video is 49 seconds long, that's a little bit long for someone to watch a lettering animation. I'm just going to go to each clip and click "Speed" and then bump up the speed all the way to two times. Now my whole videos is 24 seconds, if that's not short enough for you again, you can export this video, import it back into iMovie and do the same process to speed it up again. But for me, I think 24 seconds is nice, so let's go ahead and test it. Again, you could go ahead and post this to Instagram or you could download it, e-mail it to someone, or you could use the cropping program like we did in the last video. It's totally up to you how you use this, but you can see there are so many different uses and it really makes your lettering stand out online. I hope you enjoyed this class and that you feel inspired to start turning your lettering into animation. If you liked this class, you may like some of my other classes where I covered a lot more ways to design and paint on your iPad. Like how to paint realistic watercolors using the free downloadable brushes I created. Check those out on my profile if you want to see more. Also, I share a lot of free downloads on my blog, so if you want to get more downloads and tips like the ones you got for this class, check out my site. I would absolutely love to see the final project that you create for this class, so please share what you make. You can do that here on Skillshare in the project section by sharing your gift file, or you can tag me on Instagram or Facebook if you share your MOV file. You could also share your work in the Facebook group that I created for iPad artists, illustrators, letters, and digital planners. It's a place to get opinions and advice on iPad drawing, painting, and digital planning, and get inspired by digital creations from around the world. If you love creating things on your iPad and you want to join other people around the world in conversations, sharing ideas and seeing each other's work, check out the group. If you have any questions about the process you learned in this class, please feel free to reach out to me. You can reply to my discussion here on the Skillshare, or you can contact me through my website. Thanks so much for watching and I'll see you again next time. Bye bye.