How to make a Hive Gif - Beginners tutorial

doze(75)
Published in
#diy
Words
787
Reading
4 min
Listen
Play
3y

Hi guys!

Today I will try to explain mainly by images how you can start making some Hive gifs (or other gifs).

There are a sort of Apps that can make gifs and some are even easier than the App I use.

Let's explore GifMaster App for Android

Like I said there are easier Apps to use but if you get use to GifMaster you will understand the roots of animation frame by frame, yes you can actually use AI to animate something but it's not bad to understand how things work and GifMaster give you that.

GifMaster have an approach to animation that is also the approach of After Effects, it lots of limitations compared with AE of course, this is a mobile App.
GifMaster is based in key framing, it means that there are a number of frames in one gif and the animations flow based on frames where the frame where starts a movement or a certain property change is called the key frame.

Let's say we have an animation of 2 sec with 20 frames per second, it makes a gif with 40 frames, that makes a collection of 40 images all together. When gif runs it will show one of the 40 images in sequence at rate of 20 per second, from image 1 till 40 and if it is looped will start again at image 1, endless.
Now let's imagine a text moving from point A to point B, starting that move at frame 5 and stoping at frame 15, frame 5 and 15 are the key frames where you have to edit values, all frames between 5 and 15 (the movement it self) are processed automatically by the app when rendering the gif.

Let's take a look how things work

I will try to explain by images the basics, sorry for the menus in Portuguese but I think it will not be a problem.

Animation have 2,05sec and 20 frames per second


1

I have add 4 layers, layers have order, also blending mode and properties that can be changed, haven't choose any special blending mode. Top layer is a text layer, then HIVE word layer, then logo layer (with visibility set to 10%) and last layer is a background layer
The animations will be based on top layer (the text layer) and is where key frames will be

IMG_20230329_104307.jpg


2

Let's select top layer and use "Transformar" (Change)

IMG_20230329_105502.jpg

Now with are in the place where everything happens, there are some layers properties that can be changed and the timeline, each time you change anything there, you are creating a key frame
Main properties that can be changed are: position, size, rotation, visibility

IMG_20230329_110644.jpg

We will key frame the size property of the layer to generate a zoom in zoom out animation. Because the layer is a text layer it means we will change the size of the text


3

Let's change the size, there will be 3 key frames
We will start on frame 1 of timeline and define layer size clicking in the pen icon to open values area

IMG_20230329_111732.jpg
Let's change the size to 31% of original size and with that we have our first key frame

IMG_20230329_112506.jpg
Each key frame is a change of anything and that change goes until you define a new value and new key frame. That flow can goes at same speed for each frame, can start fast and end slow or can start slow and end fast. You can define the animations flow in Easein or Easeout, "in" means animation start slow and end faster, "out" means the opposite

IMG_20230329_113409.jpg


4

Creating 2 key frame, with key frame 2 we have an animation, key frame 2 is defined at second 1 and size will be 41% of original size
This means that the text size will be zoomed from key frame 1 (sec 0) to key frame 2 (sex 1) in 10%

IMG_20230329_114953.jpg


5

3rd and last key frame
3rd key frame will be in last frame of the gif and value will be again 31%
It means that text zoom 10% from kf 1 till kf 2, then zoom out 10% (same size in gif's frame 1) and then start again in a new loop

Let's see the result

2023_03_29_10_49_34.gif

Not sure if I was able to explain it the way it will be possible to you to create your first gif with GifMaster App, please let me know if you have any doubt or didn't understood something.

If you appreciated this mini tutorial please reblog the post, let's let others also learn something new

1588511876842.png

Thanks for following me!

JOIN THE REVOLUTION!

How to make a Hive Gif - Beginners tutorial | Ecency