How to Make a Music Interface Motion Design

Preparation before class

 

Today we will use AE to make a motion effect about a music app. It took 3 nights to design this motion effect file, and then spent 5 hours writing this tutorial. Since this article is a graphic description, so Beginners may encounter problems at some point that I did not consider.

 

Materials that must be downloaded

Materials needed for this article 

Network disk download: https://pan.baidu.com/s/1vLNAnalWpwing9whetI_vQ

 

Plugin download

Particular particle plugin

WIN download: https://pan.baidu.com/s/1Jl_RHw1saRXpOF-Oj-EO8w%20target=#list/path=%2F  

MAC download: https://pan.baidu.com/s/1Z-zz3cFVCAo-ZYu2M5JVTw%20target=#list/path=%2F

 

1. Determine what needs to be done

 

1. Dynamic background of starry sky

2. The dynamic effect of spectrum jitter

3. Circular time progress

4. The dynamic effect of time

5. Overall interface design

 

2. How to set up a new project file

 

Let's set up a new document for our project (Composition > New Composition) with the following settings:



width: 750px;

height: 1334px;

Frame rate: 25 frames/sec

Background color: #151422







3. Introduction to plug-in Particular



"Layer - New - Solid Color" creates a solid color layer







After installing the plug-in, select Particular in RG Trapcode in "Effect" to open the particle plug-in, and you can see the style of the effect control on the left.

Press the "spacebar" to browse the initial particle styles.









Translation of the main functions of the Particle part:



Particle (Master): Particle (Master)

Life [sec]: particle lifetime (seconds)

Life Random [%]: Particle existence time jitter (percentage)

Particle Type: particle type

Sprite: Child screen

Sphere Feather: Particle Feather

Texture: structure

Layer: layer

Time Sampling: Time sampling

Random Seed: random number

Number of Clips: Number of clips

Subframe Sampline: Subframe sampling

Rotation: Rotation

Aspect Ratio: ratio

Size: size

Size Random [%]: Size jitter

Size over Life: The way to change

Opacity: Transparency

Opacity Random [%]: Transparency jitter (percentage)

Opacity over Life: Transparency property changes

Set Color: set color

Color: color

Color Random [%]: Color jitter (percent)

Color over Life: Color property changes

Blend Mode: Blend Mode

Unmult: plugin

Blend Mode over Life: Blend Mode Changes

Glow: Particle glow

Feather: the degree of edge feathering

Streaklet: Showcase

Number of Streak: The number of impressions

Streak Size: Display size





4. How to set the starry sky background



1. Modify the Particle



life is modified to: 10 (to make the particles last longer}

The size is modified to 1.5 (to make the particle size smaller)

Opacity over life choice







Can make the particles not particularly dense, and can weaken part of the starlight

Set Color opens Over Life so that you can set the color

Open Color Over Life and set the gradient color #00B4FF - #0000FF









2. Modify the Spherical Field under AIR in Physics



Strength:100px;

Radius: 970px; (Strength is similar to Radius, one is the strength of diffusion and the other is the range of diffusion)



After adjusting this step, the starlight will be very weak. For the time being, you don't need to continue to adjust one.









3. The last step



Since the starlight in the middle is too weak, change the Positions of the Sphere Position to [960,540,0] and the Positions of the Emitter to [960,540,0] to move the overall coordinates to the edge







Note: The first 6 seconds is the particle appearance time, so you can click the timeline to move the time forward











Five, how to set the sound spectrum sound wave



There are three lines of sound spectrum, inner and outer, the outer side is the sound spectrum, the middle layer is the progress, and the inner layer is a fixed stroke.



1. First download a piece of audio into the project

Drag and drop mp4 files from a folder directly into the composition







2. Create sound waves



Again "Layer - New - Solid Color" to create a solid color layer, open "Effects - Generate - Audio Spectrum"









Select the audio layer in the upper left corner and change the file to a music file







Then choose "Effect - Distort - Polar Coordinates"







Change the interpolation to: 100

Conversion type changed to: Rectangle to Epipolar







3. The last step



Next, modify the spectrum parameters



Start point changed to: 0,400

End point changed to: 750, 400

End frequency changed to: 300

Change the frequency band to: 80

Thickness changed to: 5

Softness changed to: 0

Side option changed to: B Side











6. How to set the circular time progress



Next, create the middle progress and the inner stroke

Right-click Mask on this layer - New Mask,







And click the small arrow on the left to open the mask and modify the blending mode to add to none







Click on the shape in the mask path and modify the right and bottom to 330px

Check Reset to Ellipse and click OK





Then place the mask path in the middle of the score







After selecting the mask CTRL+D, you can copy a layer, then double-click the circular mask of the artboard, Ctrl+Shift reduces the copied circular mask

 



Next open "Effects - Generate - Stroke"







Click the stroke on the upper left to modify the path to mask 1 (this mask is the middle progress)

After Ctrl+D, modify the path to mask 2 (this mask is the inner stroke)



Next, modify the stroke parameters



Stroke 2:

The brush size is: 10px

Brush Hardness: 100

You can slide the "start" data, you can see the change of the stroke, if you can't do animation, it is recommended to watch the "AE Dynamic Effect Basics" released before



Stroke:

The brush size is: 2px

Brush Hardness: 100

Change the opacity to 20%











7. How to set the dynamic effect of text time



Create an empty text layer







Hold Alt and click the time icon in front of the source file and paste the script below to create a walkable time







Copy the code in the comments below





You can modify the data of the characters on the right to 24px and change the font to Impact















Eight, put the dynamic effect into the overall interface to modify the color



Put the cut graph into the project in ae, drag it into the composition for typesetting, as shown below:







Next, I will use the spectrum waveform to do a demonstration of adjusting the color:



Adjust color and add texture

add sequentially



"Effects - Generate - Four Color Gradient" to adjust the color to your liking (adjustable overall layer color)



"Effects - Generate - Lens Flare" adjusts the blending level (allows the overall layer to be light and dark)



"Effects - Stylize - Glow (makes the overall layer brighter)







Follow the previous steps to add to







The effect after finishing adjusting the color





This tutorial is also what I am learning and selling now, I hope everyone can make progress together

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325950325&siteId=291194637