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

Travel Mobile App Animation In After Effects

⚡️ Sergey Basharin, Motion Designer

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

    • 2. Photoshop File Review

    • 3. Menu Swipe Animation

    • 4. Menu Elements Scale Animation

    • 5. How To Use Preserve Underlying Transparency

    • 6. Description Panel Animation

    • 7. Description Text Animation

    • 8. Integrate Animation In Mockup

    • 9. Isometric View With Corner Pin Tool

    • 10. Gif Media EncoderHow To Export GIF Animation Using Photoshop

    • 11. Gif Media EncoderHow To Export GIF Animation Using Adobe Media Encoder 2018

    • 12. 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! We will create many cool cases.

In this class, we will make the swipe hotel menu animation. You will learn about shape layers, paths, masks, key framing, null object 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 way to export for getting your animation shareable and out there!


1. Introduction: Hey, this is so gave a Sharon and this is user interface animation camp. In this class, I'll show you how to animates wife. Many your screen in after effects. I walk in through every step of my process PS file radio import file, animation, integrate animation, inter iPhone mocha, exporting it as a looping gift. By the end of this course, you have a swipe manu screen animated give you consent your own, swipe many, or you can use mine. All of my project files are available for you to download. Anyone can take this cliffs and full of my instructions. Even if you never use after face, I'll see you in class. 2. Photoshop File Review: Okay, let's review footage. Profile. The PS file Got iPhone Eggs Display resolution 3 75 by 8 12 Here we got the top segment with the title Three Cards with Hotel that we will intimate and let's open the hotel one. It consists off the preview image of the mask shape inside the Info folder title price. Whether rating Lions players inside the dots folder ellipsis trips inside the bottom menu the Aiken's And as a result, we get these animation before we import PS file, create tempo composition and change duration to 12 seconds and set 30 frames per seconds. Okay, and let's deleted. Ah, when will make new importing aftereffects takes these settings from the less composition. In this project, we need 20 seconds duration and 30 frames per seconds. My last project was five seconds and ah, 60 frames per seconds. So many words to change the duration off each composition in this project, less imports. The foot shop file Choose retained later sizes import. What did their layer options open? Footage Hope. Find the son layer. We applied to the sheep color overly effect. We painted the black Aiken in yellow. Okay, back to the aftereffects and choose the edit table Earlier styles. Okay, open this white man. You composition opened the portal one opened the info and find the sun layer. Open it. This file contains lier sales. Open it and opened the color only. And here we can edit the color like in photo shop. If we choose the merge layer styles into footage, it will be a layer without editing couple tips. Go to the edit preferences. What? The safe and switch on these Moz aftereffects will save your project every five minutes. Edit this numbers If you want it. Go to the media and this cash. And here you can clean cash. Do this from time to time and effort X will be works faster. 3. Menu Swipe Animation: Let's at many asswipe, go to the main composition. Go to the view antic To eat the rulers zoom in prayer Leo and pulled the guy to the center . Go to the view and to lower the gates, zoom in preview, select all hotels compositions and opened this scale. I changed the values to 85 actuate their tight election free. Select the first hotel Kump and move it to the left. Use these outside rectangle to align it. Select the third total comp and move it to the right. Go to the layer. New now object. An object isn't an invisible layer that has all the properties off visible layers so that it can be apparent. Toe any layer in the composition. Enter an tra naming to this white control. Select total layers and parented to the Now Also, you can parent L. A. Or to L a er using this menu just set layer here so like their control layer and opened the position and we can control all ears by only one nal object. We don't need the square so we can switch off the layer ever sink. Okay, it is still working. Ah, go! 20 frames forward. This is the start. Point is only in preview at the position. Give him change the first whale, you, and to move the menu to the right. Use these central line to put the later in right place. Okay, 20 frames for Bert and move Miniatures left. Fife Rapes forward at key frame. 20 frames forward. Move The man U two's a lift and one more time. Five frames forward. Add the key frame 20 dreams forward and move the menu to the right. Okay, we need these Sandra cart. And also we need these five seconds pauses so that the viewer has time to understand what he saw here. We need same speed, Griff's. And so we need to use values. Select sel the key frames, right. Click kifri in velocity and change values to a 75 and 75. Go to the graph editor and you can see that we got same graphics, press the play button and let's see what we got 4. Menu Elements Scale Animation: Let's as scale enemy shin Open the the null key frames. Okay, lets workers quartile One solo. The first total card opened the scale perimeter at key frame and change Wailua to 100. Go to the second. Keep cream. Change the failure to the 85. Select the key frames, right. Click and click Kifri and Velocity. I changed the values to the 75. It should be the same with the swipe controls Key frames Kotal Tomb Solo The second total card. Go to the first key free. Open this kill. Ask if cream go to the next key frame and change the value to 100. Go to the next swipe section. It keeps cream. Go forward. Change the value to 85. Select and copy first keep reams and based it. Here. Select all the key frames. Right. Click capering velocity. You don't change the values to 75 75. It also should be the same with the swipe controls Key frames Hotel three Go to the seconds wipe segment at Keefe cream. They'll change the value to eight. Fife, go to the next. Keep cream. Don't change the value to 100 next Web segment. Asquith cream. Go forward and change the failure to 85. Select the key frames, right click different dost and changed the values to 75. It also should be the same with this Web Controls Key frames Ah, let's see what we got. Press the play button. OK, and now let's at shadows. Because hotels compositions go to the effects, find drop shadow effect. Go to the effect controls and change softness to 60. Change Busted 2 30 Select the effect and copied. Go to the time plan and select the other hotels, camps and pasted Cool. Let's work with these dots. The dose at the bottom are almost invisible. Let's make it brighter. Open PS Project Open Dots folder. Double click on Ellerbe's and go to the Brightness and let's make it Ducker safe, RPS Project and go Go! Go back to the after effects file and agency changes in the PS file Works for current aftereffects project. Go to the PS project and we could set the color overly to this folder and Mueller sales will add to these projects, but in you layer styles don't add in current effort. X file. It will not work. Okay, Go back to the aftereffects file. Select dots composition on the timeline. Go to the effects and find field applied to the composition. Go to the effect controls. L change color. Pick some some shade off. Great. Okay, let's add swipe marker. Go to the layer. New shape, layer at menu at ellipse at fuel open color settings. I pick some kind of blue. Okay, press. Enter on your keyboard and rename the layer to swipe marker. Open skill and change. Will you to eight. Zoom in preview and move the shape down. Okay, Find first swipe and catch the layer. Duplicate the layer and move it to the right. Also change the layer position. Find second swipe and cuts the layer. Duplicate delayer and move it to the right on the timeline. Also change the the layer position. Find 1/3 swipe and cut the layer double. Icka duplicate the layer and move it to the right all the time line. Also change the layer position off the layer and list. Stretch the layer. Celeste later on the timeline. Okay? And Chris the blade button. And let's see what we got 5. How To Use Preserve Underlying Transparency: 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. Let's add the total description. Open the hotel to composition, opened the in four, and we will work in this company. We'll add the solid and the text animation in the Info Kump. We will have the image animation, but it's uncomfortable to work in the separate compositions. Open Miss Kump. So that clears. Copy it. Go to the inn for camp and pasted. And don't forget to delete their composition from the timeline. Okay, now they're photo has activated the mood. Preserve underlying transparency to find this mold. Ah, you need to activate the comb with masking modes. If there is a masking for the shop after effects automatically turns on this mode when importing and foods these layers in a separate compositions, the photo is missed by layers with light colors that a lower on the timeline. The regional MISC has Ally a tint and the background for information. Layer also has a light in okay Let's fix it. Select the in which layer and move it under the mask layer on the timeline. Okay. And choose alphabet mask. Perfect. 6. Description Panel Animation: go to the main composition. Go Fife. Raves from Last key frame. Go to the info, comp and pool marker. This is the point where animation wheel starts. Select the background player opened The Masked Man You at the MSK, Beth Keefe, Ream and Gold. 30 frames forward. Select the top mask points and holding shift. Move it on the top. Select key frames, right click and change rail Use to 85 85. Go to the first key frame. Select makes clear. Open Miss Quan settings at mask path. Give free go three frames forward. Yes, select the bottom points and move it to the top right here. Select key frames right click and changed the values to 85 85. Find the image layer opened the position perimeter. It keeps cream. Go 30 frames forward. Move the layer on top right here so that the user sees the house. Select key frames right click and changed the values to eight wife and age five. Select price layer. Open a busty at key frame. Go three frames forward and changed the value to zero. Select the key frames. Copy it. Select the information leaders and paste the key frames. Okay, As you can see, the stars layer does not work correctly. Switch off collapsed Transformation. Mote it will be. It works in right way. Okay, so leg of the title later. Open their position at the key frame. Go 30 frames forwards and move the layer to stop right here. Select key frames. Right Click and changed the values to 85 85. Breath the play button and let's see what we got. 7. Description Text Animation: Let's it. It takes truth. The type tool copy paste Some text. Go to the character menu, said the front Monserrat style medium size 14 leading 23 and taking 16 and planet with the title. Go to the first key frame and pull the guide here. Open text position Brender and go through difference for it. It keeps cream 30 frames back and move layer to the top right here. Select the key frames, right Click said the values to 85 and 85 overcapacity perimeter get keep cream and change the value to zero. Go 30 frames forward and change value to 100. Select the layer ProComp the layer and you name it to text. Double click on the rectangle to select the composition on the timeline and ah, double click on rectangle to select the top mask points and move it to the lane and move the layer a little bit forward on the timeline. Go to the main composition. Make 100 Preview. 100% Aunt Breast Plea button and let's see what we got 8. Integrate Animation In Mockup: okay. Linked to the smoke up you will find in project description. Double click on the project panel area set. Retain lier over the iPhone comp. We will work in 12. 80. Bite 7 20 Composition. Drove the manual. Drop this white man, You come inside. Markup composition, Aunt Liz Deleted is a smoke up. 2000 500 by 16. 59. It's to be for our composition. We need to scale all the layers down inside these composition selected opened scale changed well, you to 55%. This kind of scaling doesn't works every layer His own anchor point. And it's not work back to the original skill. Okay, go to the leader. You it nal object and select all their PS layers and parented to the no open now skill and change value to 55. Now all layers got one skill point and how it works. Correct. Go to the project panel, go to the iPhone composition settings and change values to their 12. 80 by 7 20 opened now scale and change the value to 56. Or find the value this well and we can dilly it parent. Select all layers and set known in the parent venues and delete the null object. You can see nothing wrong with this scale. Everything works correct. 9. Isometric View With Corner Pin Tool: Let's is a metric view to our composition. Okay, drop this. Why? Swiped Manu composition inside Mokaba composition. Switch off display color in which player? Go to the effects and find the corner peen effect. And now we can edit corners of the layer. Zoom in preview and move the left top corner here. Move the right top corner here. Now move the right bottom corner here and move the left bottom corner here and switch on the cower. Clear. Go to the swipe mania composition. Right. Click and dream Kump Toe work area back to the iPhone composition and cut the work area here the right click and dream come to work area. 10. Gif Media EncoderHow To Export GIF Animation Using Photoshop: select work area on the Tamerlan. Go to the composition and at to render queue. Okay, Output model format. PNG's sequence actuate rece ice and change. Second to I Mean change second value two or 3 60 Output to select folder and let's rename it to swipe menu and click the Render button Open for the shop file Open and find the folder with sequence and select the first image. Actuate the image sequence. Moat frame re 24. It's OK and let's resize it for applaud to the dribble. Go to the image canvas, Seiss said pixels and changed the values to 403 100. Yes, it's not to be image small, not HD, but if we would render it in a h. D. The quality off image will be so bad, but you can play with the whale. Your sound fine to your settings. Okay, Selected earlier. Click Control T. I mean a press controlled T on your keyboard and precise the layer click. OK, go to the file expert and safe for whip. Set looping options to Forever and click safe. Choose a folder and click safe and let's see what we got 11. Gif Media EncoderHow To Export GIF Animation Using Adobe Media Encoder 2018: if you got F for fixed 12 18 you can, ah render your GIF animation through adobe in media in quarter. So let's resize it for dribble creating your composition and let's rename it to dribble and change will use to 403 100 job iPhone. More cup to the composition. Select the layer, Aunt. Open skill. Ah, and Scalea don't go to the composition. It's to meeting media encoder here. Set animated GIF yo to go to the expert settings. And here you can customize your values. Change values, customize your settings. Ah, click. OK, click a button. Wait and let's see what we got. 12. 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.