I've been working on my twitch stream UI for a while and I wanted to share this cool trick with you. Its really easy, does not require a graphic tablet or drawing talent. You can make cool animation with photoshop with ease. For this post we are gonna make a cool hive animation which you can use for free ^^
First make the design of your choice. I am gonna make this one as a footer image or a divider for the posts.
Go to;
Windows > Timeline
You'll see a timeline opened on the bottom of the screen. This section looks like your ordinary editing program. Do not fear it is really easy.
Go to ;
Layer > Video Layers > New Blank Video Layers
Now we have our background ( which we can delete later )
We have our design
We have our new blank video layer
Select Brush ( by pressing B key ) and open the vertical symmetry by pressin the little butterfly icon on the top. Now we are almost ready to begin.
Right Click to your Video Layer;
Blending options > Outher Glow > Pick a Blue Color
Now when we paint it will create the same shape on the other side with this cool effect. One more step and we are going to start animating our cool lines on this hive logo. Click the 3 line icon on top left corner of the time line and "Enable Onion skins" this will allow you to see previous step and help you to draw. And set "Timeline Frame Rate" to 12.
Lets start. Just folllow the outer lines of the shapes and make it longer as you do it. it will make sense in a bit. Press Right Arrow key to go to the next step to draw. Each time you press right arrow key, you'll go through each frame.
Start from the corner.
What I am doing here is I am drawing each frame from start to finish but each frame I go I make the line longer. When you play it the line will travel through the path you draw. You can see the previous place of the line thanks to OnionSkin. You dont have to make the lines perfect. Matter of fact you dont want to draw them cleanly. Use your mouse , let each line be different. It will look cool at the end.
As you can see when you play it the lines move ^^ at it will do the same thing with the right side because we have vertical symmetry opened. Remember to turn of the symmetry when you come to the letters. Because HIVE can not be drawn with mirrored effect. Lets continue.
I am starting to delete the lines from the back to give the effect of electricity travels through the bar and goes to the letters. Try different things. And this will be a good drawing exercise. You are gonna draw lots of lines ^^
First finish the side bars while symmetry is open. Draw the lines until it touches to letters. After you finish the sides. Go back to your first frame that touches the letters and close the symmetry to continue. Now you have to draw both sides manually because each letter is different.
The Result of 1 hour of animating.
White Background Transparent Letters
this is how this animation look on my Stream UI I am working on
Have nice Day