Sign In Mobile App Animation In After Effects | ⚡️ Sergey Basharin | Skillshare

Sign In Mobile App Animation In After Effects

⚡️ Sergey Basharin, Motion Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (37m) View My Notes
    • 1. Introduction

    • 2. Ps File Review

    • 3. Import Ps File Into After Effects

    • 4. Logo Animation

    • 5. Sign up Title Mask Animation

    • 6. Email And Password Layers Anination

    • 7. Create And Animate Sign In Button

    • 8. Create And Animate Text Layer

    • 9. Create and Animate Shape Screen Tap

    • 10. Create and Animate Email and Password

    • 11. Keyboard Animation

    • 12. Add Background

    • 13. Export GIF With Photoshop

    • 14. Export Gif With After Effects 2018

    • 15. Thank you


About This Class

"UI Animation Camp" is a series of classes for the animation of mobile interfaces. You are a web designer, a designer of mobile solutions and want to improve your skills or you are the one who is interested in the motion design welcome to the camp! Classes will be published 1 time in 2 weeks. We will create many cool cases.

In this class, we will make the sign-up screen animation. You will learn about shape layers, paths, masks, key framing and key frame velocity.


What You'll Learn

  • Ps file. Organize layers for animation.
  • Import in After Effects. How to correctly import a Ps file for further animation.
  • Animation in After Effects. I'll walk you through the process of animation of Sign in. Add a background to the scene and prepare the animation for export to the GIF.
  • Export your animated GIF. I'll show you two ways to export for getting your animation shareable and out there!


1. Introduction: Hey, this is a game assuring and this is user interface animation camp. In this class, I'll show you how to animate Logan Mobile Interface screen in effort Fix. I walk in through every step of my process. PS pile Rare import file animation expert in it as a looping gift. By the end of this course, you'll have a log in mobile screen animated GIF. You can design your own logon screen or you can use mine. All of my project files are available for you to download. Anyone can take this clears and follow my instructions. Even if you never use after face, I'll see you in class. 2. Ps File Review: Hey, let's review PS file. The project file got iPhone eight display Resolution 3 75 by 6 67 And here we got the local later Land shape title text layer email, text layer and email shape lion Best work, text layer Best were shape line Keyboards folder. Okay, let's open it. And here is numbers, letters, folders and other buttons. Sand symbols. What's next? Sing in button title in button. Cheap arson in with Facebook Total big round shape and big round image. This file is available for download and as a result, we get these animated GIF. Okay, lets go. 3. Import Ps File Into After Effects: double click on Project Panel Area. Let's import food shop file. Choose footage and we got While air. It's not good for animation. We need separate layers like in 40 Shop File, and we need same structure. Sorry, let's deleted import file again. And now we choose composition. Open composition, all layers in right order. Let's solo logo lion later. Small elements and big later. All layers are with same resolution. It's not good for information to I'm sorry. There's dilated one more time. Imports file a gay. Now we choose. Retain leader sizes. Okay, double click on composition. Select layer, and you can see that element size are the same with layer size. Perfect. Let's mark layers in different colors. Select a logo and logo line and change color of this layers. Selects email and email. Lion and change color. Select password and password line and changed color. Select keyboard composition and change color. Select. Seen in an seen button. I'll change color. Select sinning with Facebook and change color. Okay, select big round and background photo layers and lock it 4. Logo Animation: Let's make logo animations, select local ear and zoom in time light. Use the slider or press plus button on your keyboard. Open transform manual Click on position wash, we added. Keep cream. Go fugitive Reeves forward and at one more key frame back to the first and change first value you can. You can see it that a layer moving. Okay, move the layer out of free. Move marker to the second key frame press and on your keyboard catwalk area and press plea button and let's see what we got. Okay, select key frames. Go to Griff editor, and let's change type of graphics. Click on this button and select auto Select graph Type Select points and click easing Press plea button and you can see now movement off the layer Much better. Select, gruff, buoyant and move right handle to the left and press play button on your keyboard. Now it looks nice and smooth. Rule number one off animation don't use default speed graphics. Okay, if you want to increase the speed of the layer, move the second key frame closer to the first press play button and see what we got. Awesome Loga Lion animation Frampton's select logo line layer open trends for Manu. And now we need skill parameter. If you need skill, just only scale printer. Select a layer and press s on your keyboard, its key frame and change failure to zero. Go 30 frames forward and change whale you to 100 press play button. And what if we need moving, not from center dill? It keep reams. Zoom in preview and choose Pam behind tool and move anchor point to the lift Movement is coming from these point. It works for on lier renters. Okay at keep cream and change failure to zero 30 frames forward and change value to 100. Okay, play preview. But now the layer is killed in two exes. We need only X X animation. Go to scale and delete key frames. Switch off constrained proportions a key frame and change X value to zero. 30 frames forward Aunt Change Baylor Toe 100. The software will at the key free and automatically select key frames. Go to grave headed or select points. Using and move handle to the left is a good scaling now 5. Sign up Title Mask Animation: if you like what you hear so far, if you enjoy my teaching style. If you're feeling productive, if you want to be the 1st 1 who know about the upload of the new class, please click these buttons and follow B. Okay, lets animate seen up. Ah, title selects in a player and set rectangle tool and double click on it. We added the mask exactly the size off the layer open MISC settings. Miss Quan Settings at MISC Beth Key Frame. 30 frames forward. It keeps cream and Becht first. Activate transformed box off the mask, breast control teeth and move it to the left. Select key frames go to graph editor Select points easing as move right handle to the lift press. Play Watson on keyboard and let's see what we got. 6. Email And Password Layers Anination: Let's enemy to email password text. Selecting male layer open transform menu at a bus sticky frame and change failure to zero 20 frames forward and changed value to 100 to open only a positive renter of the layer. Press T button on keyboard to open up. Rendered Bremner's with key frames. Press you on your keyboard. Okay, copy key frames. Find password layer and selected and paste key frames. Go to the beginning off layer, and the key frames will be cup it at the moment where the marker will replaced. Move password layer forward Press play button and let's see what we got. Select logo lane. Open key frames selected. Keep dreams and copied. Find email line layer. Select pen behind tool and move anchor. Point to the left open scale and switch off constraint proportions and paste. Keep Freed's press play button and let's see what we got. Duplicates Emiel line. Zoom in preview and move the layer to the original layer place. Okay, delete original passport. Lionel Layer, Antal. It's of a name it Andrew and type passwords line and move were forward on the timeline. Right here. Press play bots and aunt. Let's see what we got 7. Create And Animate Sign In Button: Okay, lets animate CNN button. Select. Ah, big red button layer. Go to view and actuate Rulers, pull guide to the center Off these bottom Go to view and look Gates. Okay, Alok layer, choose pan tool and make sure that no layer is selected on the timeline at left point ad right point and move layer near original press. Enter and rename it to a senior button. Okay. And let's ah, peak some color different with red green, maybe. OK, open settings and open contents. Open shape, open stroke and change, but cap to round cape and let's change stroke with awesome Choose selection tool, Open path A selected and move right point aunt Move left point. Okay, close shape top. Go to Ed, me and you. And at dream Path we can dream out path from start and from aunt at Keep cream and change Well, you're too 50. Go 30 frames forward and change well. You 20 go to the beginning it and give free and change. Well, you do have to You go 30 frames forward and change. Wailer to 100 selects key frames. Go to graph Editor select points using select points and move handles to the left. I mean right handle to the left. Switch off layer. Open stroke settings and peak color from original layer on a bloke Original layer and deleted and switch on shapely. Okay, I love this bottom, but we can make it better. Really better selects layer open, keep reams, Go to the first, give frame and change. Well, you 2 49 Now we got perfect ellipse. Go to the lost key frames and moved here. Okay, breast P on your keyboard and position. Perimeter will open at key frame. Go to the beginning and move this layer to the bottom out of frame. Select key frames and go to graph. Editor selects points easing and put marker to the middle off the layer. Select right point and move. Handle to the center. Select left point and move Handled to the center Press play button and let's see what we got. Find password lier open key frames and copy. Give ring, paste it to sitting later and move later Forward. Okay, press play button and let's see what we got 8. Create And Animate Text Layer: Okay, let's Ah, anime. These legal text, uh, at the bottom off for be red button, find this small text layer ism in prayer view window and choose type toe type this text or seen and with Facebook go to get extra window and a two character panel. Deactivate this window, go to window and choose character. Okay, choose Malta. Right? Sammy Bolt. Hint. Go to Barrow, Griff and center text Move lier to the center and switch off caps changed. Wrecking value to five. Change size value to 10. Analysts peak grief from original layer and align newly or we's photo shop Later Original and Elise Original from timeline Guilt to FX and find typewriter and applied to the later select layer on the time land and press you batten on keyboard. You can see that these effect already come. Teens keep screams. Okay, go 30 frames forward from the beginning and move last gift dream to this point. Find the moment when the button jump into place and to move text layer to the to this moment. Okay, let's brace. Ah, preview. But, um I mean, press play and let's see what we got 9. Create and Animate Shape Screen Tap: Okay, let's add tap. Go to layer. You shapely go to admin you at al IBS at stroke, and now it's white. Let's speak. Read from button. Enter and let's rename it to Tep. Okay, open shape Rangers open helps pass at Sisisky frame and change the value to zero 20 frames . Forward and change whale you to 100. Open stroke at stroke with Give cream and change Well, you 20 guilt. 20 frames forward and keep cream to keep from 00 Okay, 10 frames. Ah, back and change Well 12. Select top key frames. Go to ref editor. Select Point using and select left point and move handle to the right and select right point and move. Handled his left press Play modern and let's see what we got. Select with GIF Reams. Go to graph editor. Select points and let's build these kinds of grave all handles moving to the center. Okay, lets dream only go to the first key frame. Select earlier and press out plus square break it. Guilt is the last key frames and selects layer and press out square. Break it, and I want to make of the movement faster. In the beginning, let's cut the layer a little more right here. Play button and let's see what we got 10. Create and Animate Email and Password: Okay, let's create email. Aunt passport dots choose type toe and type female. Go to the paragraph menu and align Text to the left. Change size 2 15 Change letter space to 16. Zoom in preview top part and peak color from top title is a mouth preview and go to character and said that most right formed link to this Fonte will plant in the description . Okay, Change font style to medium Find Ah, the tep layer and go to the middle of this layer. Find mea layer and cut the layer. Here. Go to the effects and find typewriter applied to the email text. Just drag and drop into layer and open key frames. Ah, these effect contains key frames. So you don't need to add key frames to this later. Just press you want to go keyboard hand all keep reams. Ah, well open. Go through the frames forward from first key frame and move last key frame to this point. Go back to the Thirsk Ephraim and cut the leader. Okay, Duplicate tape player and find the moment when the text is already typed and move layer to these point of the on the timeline. Okay? and move the layer to passport line right here. Find the password layer and cut it in this point. Okay, let's create dots. Points we will. You shape layers and ah, repeater modifier. Go to the layer, you Trey Blair, zoom in preview. Go To add Manu, it helps it feel and peak. Dark color from seen up title open settings. Contents open helps path and change size to value to seven. Okay. Ago two at menu Andrew Peter, these modifiers clone shapes. We believe this modifier to create password dots, open settings and change corpus value to eight. Okay, this layer has ah two trains for menus. We need the repeater. Want transform and open it and change point position value to 15. We need toe. Make it closer. Each clone go to repeater. Transform at scale. Keep cream 30 frames forward. He had to keep cream back to the first AM Change value to zero. Okay. Ah, press play button. And you can see it that the skill for first doesn't works for first clone. I mean for first lips to fix it. Go to the L s path at size. Keep cream now we work in. Ah, Elspeth. Not in repeater menu. So at SISE, keep cream change. Well, you 20 30 frames forward and change failure to seven breasts You on your keyboard and open all key frames. Select first key frames. I mean, top give dreams go to rep. Editor selects points using and move right. Handle to the left. Okay. Ah, select Left a point and move left. Handle to the right. Every handle goes to the middle off. These, um, graphic this middle of flavor. Okay, you can do same grave with values is much faster. Select second key frames. Right. Click. Ah Gohlke freeing velocity am change will use to 99 99. Select key frames. Go to ref editor and you can see that we got same riff. Okay? And cut layer in the beginning. Off animation breastplate. Button it. Let's see what we get 11. Keyboard Animation: okay. Ah, you can't create a folder on the timeline when we import for the shope file. With folders inside it comes composition in after effects switch own keyboard layer. Opening it. Find Barton. Open it. And here we got search composition. Nothing going preview. But we got layers. If there is a shape, were inside for the shope after effects recreated with masks, open mask settings and change mask juan mode to subtract second moat mask changed to intersect and we can delete second layer. Now it looks correct. Back to the mean composition. Find moment when finger Tefft on email. Open position. A key frame. 10 frames forward. Keep cream back to the first and move later to bottom. Select key frames, right. Click and change values to 85 and 85 Select key frames. Copy it. Find the moment when passport done based it right click, key frame assistant and time reversed key frames. Is it okay to add a motion blue for keyboard lier, switch off collapsed transformation mode and to each own motion blur. And don't forget to switch it on for all composition. Also, we don't need three minutes. Timeline go to five second press. And on your keyboard, right click and Treem comp toe work area less press preview and see what we got. 12. Add Background: Let's add a big round select Simeon composition and we need these in for creating. You can position choose these, press it. This press it consists was free size and frame per second value when it 12 80 by 7 20 pixels. Correct and we need 30 frames per seconds. All compositions should have the same value change. Duration off composition changed to five second and let's rename it to Siemian. Made drop seen in composition inside Main composition Double Hogan Project Panel. Imbert This photo. Drop it on timeline open scale and scale the layer down. Go to effects and find drop shadow and a blood to the leader. Go to effect controls and change distance to 35 and softness to 80. Press play button and let's see what we got. 13. Export GIF With Photoshop: find the moment when the keyboard has disappeared. Got the board career opened their seeming main camp setting saying change values to 800 by 600. This is a science for up applauding to dribble. So like the layer on timeline opened Skill and skill it down. Also select the big round Clear on the timeline open scale and Scalea don't go to the composition Adds to render queue output Morial Ah said the former PNG sequence. Okay, out food too. Selects folder and illegal Orender button and wait open for the shop file open. Find folder with sequence. Select the first image. Activate image sequence. Frame rate 24. Okay, go to the first. Freeman, do you can see that it's Sam too. So a user will CMT thumbnail off your gift. Let's fix it open folder with as a PNG sequence and find the last free the last image. Now let's take it and drop it to the PS project. Move these layer to the left and cut it to one free. Go to the file expert safe for rep. Set looping options to forever click safe. Choose a folder and click safe. Wait a little bit and let's see what we got 14. Export Gif With After Effects 2018: opened their seen up com setting centuries dwellers to 800 by 600. Ah, this is a size four applauding to dribble. Select the layer on the timeline open scale and scale it down. Select the big round later on the timeline and open skill and scale it down to okay to Fikse. The first free problem. Ah, the problem is thumbnail. Go to the last free a duplicate the layer and cut it from the beginning. And from the end, we need only one free. So Prius out plus square breakage and also plus another square. Break it, zoom in timeline and move this layer to the beginning. Off layer and move mean the main lever to the left. Okay, fine. The moment when the keyboard here dispirit and caught the work area. Now the looping is perfect. Go to the composition Air to median Quarter set animated GIF. Okay, let's check expert setting settings and ah, here we go and customize your settings. Okay. Ah, segregation on the file and rename it and click play button. Let's see what we got 15. Thank you: All right, This is the end of this class. And now you can create a class project. Let me know what your place project He's and share as much information about the class issued like. And if you'd like feedback, let me know if there is anything that you can still have questions. I'll be happy to answer. Thanks so much for taking this class. If you liked it, I'd love if you gave me a review. Thanks again. And I'll see you next time.