Now that you have your vectors ready, it’s time to learn how to animate your vectors in Photoshop. Now we’re ready to animate the artboards over in Photoshop! Step 5: Copy the Vectors to Photoshop
As you can see, we ended up with a large amount of artboards. Repeat this step a few times until you’ve reached the full range of motion you desire. Simply duplicate the new artboard, and make the same changes as before. We nudged the chat box up pixels, the video play button to the right by 2 pixels, and used the Direct Selection Tool (A) to ease the point of the envelope up by 2 pixels, as well. Then starting making subtle changes to each element. This particular icon only took two un-groupings. The chat box is grouped only with the chat box, the envelope is grouped only with the envelope, etc. To make the process faster, ungroup your elements until they are only grouped within each object. Step 3: Make Subtle Changes Frame to Frame Each frame will be slightly different from the other, eventually indicating movement. Think of these duplications as the frames in your animation. We ousted the words “Digital Campaign.” Step 2: Duplicate the VectorĮnter your Artboard Tool ( Shift + O) –making sure that your “Move/Copy Artwork with Artboard” option located to the right of your artboard name is activated-and duplicate the artboard by holding Alt and Shift while clicking and dragging the duplication to the right. Our new file is sized at 200px x 200px.ĭelete any extra elements that you don’t want included. Copy ( CMD + C) and paste ( CMD + V ) into a new illustrator file. eps into Illustrator and click on the icon you wish to animate. Check out our final product below.Īccess the best video tips, design hacks, and deals straight to your inbox. If you want to follow along with the tutorial, just download the vector-it’s already included in your subscription. We chose to get started with this collection of colorful flat SEO and development icons and to add subtle and simple animations like lightly bouncing elements and a simple opening of the envelope. eps to begin editing your vectors in Illustrator and animating your vectors in Photoshop. Once you find your perfect fit, download the. Remember, since we can easily isolate each individual element, you can also look at icons packs and vector compositions. Or a spaceship that is dying to take flight. Maybe there is an apple that could look adorable with a little wiggle movement.
Look for vectors that are begging for animation and movement. We will begin by using a royalty free vector from our membership library. In this tutorial we will show you how to take vector graphics and transform them into delightful, animated GIFs that are guaranteed to impress. If you know your way around Adobe Illustrator and Adobe Photoshop-and have access to high-quality stock vectors-then you’re that much closer to creating animations that are worth bragging about. You don’t need a masters degree in motion graphics or computer animation to make simple animated GIFs.