As we all know, Alight Motion is the best smartphone-based video and animation editing application for now. In one of the best animation editor applications on Android, you as a smartphone user will definitely find several features that you can enjoy like the Adobe Premiere desktop version. If you want to get maximum results, then you also have to do maximum animation editing. This means you can’t get maximum results if you only want to do animation editing with a one-tap-finish process (one-touch finish).
In this tutorial, we will show you how easy it is to design fake music player using a smartphone. So, Today's Blog is really interesting and cool. We made this video in Alight Motion App whatever design and animation effect we create in this video we share with you in text format and as well as video format. We also share with you watercolor spatter element file in xml & project preset file. If you do not have a Alight Motion App, you can download the app by clicking on the Download button below.
For more details, please see the features tap or click directly on the Preview Video Link below.
Watch Video
If you are interested to know how this fake music player looks like, This video will give you full views about this template. We will show you every single steps that we have followed to create our fake player. Also, do check out our other tutorials and templates on the YouTube channel of Quick Design. If you face any difficulties to understand any step, you may contact us on telegram.
To make this kind of animation effect video, you have to first open the alightmotion app. After that tap on the green color plus icon button to make a new project. Here you can adjust the project settings. The resolutions available will depend on your phone. For this tutorial, We choose the square aspect ratio and make sure the frame rate is set to 30 frames per second, then tap create.Then it show you the editing screen.The top part is the preview, which shows how your video will appear. The bottom part is the timeline, which holds the layers of audio visual content that make up your project. In the middle is the playhead align, which indicates the point in time shown in the preview.
How To Create Fake Music Player Template In Alight Motion
- Let's start by adding a background rectangle shape. Tap on plus icon to add a new layer, then choose shape or you can import background from Media layers. Media layers can hold photo video or audio content, we'll use a rectangle shape from shape layer. after adding shape layer it's opens automatically the layer editing panel. Whenever you create a new layer. While the panel is open. You can drag in the preview to move the layer or pinch to change the layer size. Resize the layer now so it fills the screen. We use stretch to screen option from 3 dots on top right side. Now The layer we made is only two seconds long, but we want to make a sixty second animation. So we need to make these layers longer. Tap the background layer on the timeline. To open the layer options panel. Press the arrow at the end of the layer and drag it to the right until the duration reads sixty seconds.
- Now we'll add watercolor splatter element which we create in advance. First, close the layer editing panel by tapping the backarrow or tapping anywhere on the timeline or preview outside of the layer and tap plus icon, choose elements and tap the spatter. As before the layer editing panel for the new layer opens automatically. Let's make change the splatter color look more attractive. We'll start by setting the layer color, tap color and fill we want a gradient fill. If the color you want is not shown, you can tap the palette icon to manually adjust the color. So tap the Gradient icon. Use the two color swatches to set the colors used in the gradient. Set the first color code #111726 and the other to #231F20. Then tap the back icon to return to the main layer editing panel. Now we'll adjust the layer tap on move & transform. The icons on the right side allow you to switch between adjusting the position, angle, size and skew of the layer. The central area is called the control pad. You use this area to transform the layer. And finally, on the left side of the control pad, you will find the most important feature in a light motion the keyframe button. This button allows you to mark certain points in time as keyframes. Any property of a layer from its size or position to its color or opacity can be adjusted separately at each keyframe, and a light motion will automatically animate between these keyframes, so you don't have to. Let's set up the splatter position for the layer in the centre. Drag on the control pad to place the layer at the centre of the screen.
- Now We'll take a rounded rectangle shape. Then tap on move & transform option and tap the scale icon to adjust the layer size, we increase layer size upto 738px. Then tap the back icon to return to the main layer editing panel. Now Tap color and fill option and tap the Gradient icon. Set the first color code #111726 and the other to #9F918E. Then tap the back icon to return to the main layer editing panel.
- Duplicate the layer from copy plus icon then select edit shape option on main layer editing panel then increase radius 100. Then tap the back icon to return to the main layer editing panel select color and fill option and set white color
- Then Duplicate the circle layer 3 times. Go to move and transform and select scale icon. Decrease size 102px , 69px and 39px. Now fill black color on 69px circle shape.
- When you're done then select blending mode and add mask effect on main circle layer. Now import your music poster from media layer and drag down the mask circle layer and adjust your poster. Then select all circle and poster and circle group. After that adjust group layer in the centre of the screen.
- Let's create fake play buttom. Tap plus to add rounded rectangle and select edit shape option form main layer editing panel. Then increase X value to 310 and decrease Y value 8. Then tap the back icon to return to the main layer editing panel. Now set fill color white. Add circle shape then decrease scale icon size 64px. Now tap move icon option and Let's set up the starting position for the layer. Tap the keyframe button to add a keyframe. Notice that a diamond shape appears on the timeline to indicate that there is a keyframe here, drag on the control pad to place the layer at the top of play line corner of the rectangle. Now scroll the timeline to the zero 60 position. Then drag on the control pad to place a layer at the top of center right corner of the play line rectangle shape. Notice that the second keyframe was added automatically. As long as you have at least one keyframe for a property. Additional keyframes are added automatically when you adjust the property.
- Add one more rounded shape rectangle then select edit shape option and adjust X value 10 , Y value 30 and Radius Size 6. Then Duplicate 3 times. Now Adjust 2 shape like Pause Sign and remaining two shape decrease X value 5. Then move shape both corner of main rectangle shape.
- Tap on plus icon to add play button shape. Tap on move and transform and select size icon and decrease size 43px and 39px. Then tap the back icon to return to the main layer editing panel and select border and shadow option then on shadow option. After that create 3 more duplicate copy. Then out of 4 rotate any 2 shape 180°. Now set both side of corner.
- Tap on plus icon then choose text layer. Now type your text and select Poppins font. Then select font size 16px and fill color white.
- Now animate our disc poster. Tap on layer then go to move and transform. Then select roatate icon keyframe value at zero sec is zero and at sixty second is -1x 360°.
Feature of Fake Music Player Template
- Fully Customisation
- Fake Music Player
- Disc Rotation Animation
- Video Preview
- Customize Editing Video Tutorial
- File Size - 55Kb
- Video Length - Unlimited
- Customise Option Colour, Text, green background
- Customize Video & Audio Track
- No Copyright Issue
- Requires any Alight Motion Version 3.8
- 2160p Resolution 30 Frame Per Second FHD & 1:1
- Alight Motion Xml Download Link
- Fast & Easy Export
Get this Fake Music Player Template Preset
You can download elements we use in this template Project at free of cost. Just click on the download button below to start download this Template. After that import file to Alight motion.
Name | Fake Music Player Template |
---|---|
File | Free And Fully Customisation |
Preset | Preset Project File & XML Preset |
Date | 03 June 2021 |