tonesright.blogg.se

1. #Animate my logo gif how to
2. #Animate my logo gif mp4
3. #Animate my logo gif full
4. #Animate my logo gif software
5. #Animate my logo gif series

It’s just a simple touch to a website-and my client loved it! Your logo animation shouldn’t play looped, just like GIF would-that would be too much! I don’t want to make this intrusive to website visitors and their experience.

Then, I also set some animation triggers in the interaction panel on Webflow.įor example: I want the animation to play on page load, but also when you hover your cursor over and out of it. You can either drag that GIF into Photoshop to see how it’s done frame by frame.Īlternatively, you can screen-capture that animation with Quicktime and then analyze it in slow-motion. I'd just recommend you to embrace some basics (watch free tutorials on ) and the rest you can learn on the job.ĭo you remember the inspiration board from the first step?-Now you can actually reverse-engineer animations that you liked.

#Animate my logo gif how to

Now I won’t go into details here on how to use After Effects-because that’s a topic for a whole new video. Later on, I can also add some opacity effect and I can also add some Ease In and Ease out effects so that the animation looks smooth and realistic. I'm basically telling After Effects something like: Hey at this keyframe the square is one place, and then it moves up X amount of pixels. I do it in reverse-first I set the end state (since the logo will reveal, not disappear) and then I change properties and set the initial state. To achieve that I simply use the position property and I set keyframes on a timeline changing position of the ball and square.

That way I can adjust the speed and duration of each scene and synchronize them later on.įor example: On my first scene of the storyboard I suppose to drop the orange ball from the top and also make the purple square show up from the bottom. So here I’m basically looking at my storyboard (from the first step) and I’m trying to animate in After Effects the different elements of my logo. Since my logo animation is pretty simple, I will be working here (for the most part) with transformation attributes like: position, rotation and opacity. Next, you can either sketch out your idea on a piece of paper, or you can use Illustrator to create a few scenes digitally. You can simply create a mood-board and take some notes on what motion effects you like and why. Just search on websites like Behance and Dribbble for “logo animation” to find some inspiration for yourself. I recommend you to check out some logo animation examples to get some ideas on what’s possible, or rather what are common solutions or effects that can be used for logo animation. The way in which you animate your logo will depends of course on the type of logo you have. Sixth, we have the name reveal effect and that’s it!įairly simple animation, but it looks absolutely iconic-doesn’t it?.

#Animate my logo gif full

Fifth, we have the symbol slightly moving to the left (to center the full logo).Fourth, we have an orange square sliding in from left and smashing into the orange ball (transformation) and therefore forming the Periti symbol.Third, we have the ball bouncing off (again), this time of the purple square.Second, we have the orange ball bouncing off the ground once and the purple square rotates to the left.

#Animate my logo gif series

Storyboard is simply a visual outline for your video that consist of a series of images that convey what happens in your animation-how elements are being put in motion.įor example: The logo I designed for my client Periti is composed of just a square and half a square/half a circle. That's why learning how to animate a brand logo can be a very valuable skill to all graphic designers, and especially logo designers. Lately, we can see more and more brands that animate their logos in order to delight their audiences and to stay competitive.

#Animate my logo gif mp4

you can render an mp4 for your YouTube videos- intro or outro. You will also be able to export your animation for other purposes e.g. They’re also vector-based so you don’t have to worry about the quality. On the other hand- Lottie Animations (files with JSON extension) are very small and they work on all devices. You can build and host your website wherever you want, because ultimately the JSON file with your logo animation can be used on any website.Īlternatively, there is also the old-school way of using a GIF, but they tend to be heavy and the animation itself won’t be as smooth.

#Animate my logo gif software

‍However, you can successfully use my guide with other animation software like Cinema 4D or Blender. To animate logos I use Adobe After Effects with Bodymovin extension, and I build websites on Webflow.