Summary
Animated GIFs have become a popular digital content type for both personal use and brand marketing. See how I researched this content type and applied Liz Blazer’s 6 steps of pre-production work from her book Animated Storytelling: Simple Steps For Creating Animation & Motion Graphics to create 3 different styles of summer-themed GIFS for marketing purposes using Adobe Photoshop and Animate.
Reading & Writing
We’re often told to plan ahead, whether it be for travel or meal prep or finances, but when it comes to more creative pursuits like animation and motion design, we sometimes mistakenly believe that planning will stifle the muse. As Liz Blazer explains in Animated Storytelling: Simple Steps For Creating Animation & Motion Graphics, exactly the opposite is true. She likens the animation muse to an “anxious planner” who won’t be pleased or cooperative if you aren’t properly ready when she arrives at your door.
In order to be prepared to reap the benefits of your muse when you start animating, you must be able to answer 3 key questions about your project before you begin: “What is it?”, “What does it look like?”, and “What is it made of?” If you cannot clearly and succinctly answer these, then you risk wasting time and energy in building your project and more than a couple frustrations. To answer these questions, your pre-production phase should consist of engaging in concept development, previsualization, and asset building.
Concept development answers the question “What is it?” by requiring you to have clarity about what you project is about, who it’s for, what it’s objective is, what form it will take, what it’s timeline for completion is, and any other parameters or goals your project must-have. If you do not have these answers then you cannot move forward.
Once you’ve done this work you can move on to previsualization which answers the question “What does it look like?” In this phase – also known as visual development, concept art, or “previs” – you define the look and feel of your project. You can do so through sketching, fully rendered examples, or the use of any material or method that works best for you and your project. The point here is to begin the process of visually communicating your ideas.
Finally, once you’ve done this foundational work you should begin asset building to answer the question “What is it made of?” Asset building means pretty much what it sounds like: make or collect the assets, or parts, of your project and organize them into a centralized, easy-to-access location to prepare for building your project.
Blazer breaks out these 3 phases into 6 tangible steps you can take for pre-production work:
- Write a creative brief
A creative brief should tell you what a project must be (TV commercial, PSA, etc.), who it’s for (the target audience), how long it must be, its objective, and its deadline for completion. If you’re working on a project for a client you will generally be provided with a creative brief, but for self-directed projects, you’ll need to write this yourself. - Identify your big idea and create a storyline
This is essentially your brainstorming step. Don’t hold back in throwing out all ideas and thoughts related to a project. Once you have these written down, review them to start making connections and building possible storylines for your animation. - Develop an elevator pitch and tagline
Once you’ve decided on a storyline it’s time to get to know your project extremely well. First, define the tone, plot, and theme of your intended piece. You can then combine these into one sentence that will be your elevator pitch. Elevator pitches are useful because they help you succinctly communicate a project to others and help you build a tagline. Taglines, in turn, can be very helpful during a project to guide your creation and helpful afterward in marketing and communicating it to the public. - Determine your project’s look and feel through influence and experimenting with design directions
This is another brainstorming step, only for the visual direction of your piece, instead of the storyline. You are free to step away from your computer to play with various mediums and materials to find the right style for your piece. You should not be afraid in this step to do plenty of animation research and allow yourself to be influenced and inspired by others’ work. - Make changes to your story based on design decisions
As any good design thinker would tell you, the best design comes from an iterative process. Allow your piece to change and evolve as you make new discoveries. Just be sure to go back to previous steps to revise work that may be impacted by changes, such as your elevator pitch and tagline. - Begin building and organizing your assets
As referenced before, you can begin to transition from planning a piece to building a piece by getting the parts you intend to use in it in order. Some of these parts may be provided in the planning stage, such as logos, others may have been created in pre-production as products of your brainstorming, and others may need to be marked as still requiring sourcing or creation.
Research to Inform
1. On more than a few occasions I’ve felt just like this bear looks: tired, demotivated, but still pushing forward. In its hand-drawn simplicity, this GIF is able to explain a mood so many of us can relate to.
2. Every time I see this GIF I just start singing “Peanut Better Jelly Time” in my head. It’s just a line drawing of a banana, but it’s perfect at evoking early memories of the internet for those of a certain generation.
3. If you don’t know Pusheen, you need to know Pusheen. This happy, slightly gluttonous, slightly sassy animated cat is one of my favorites to share sticker GIFs of in messages – and not just because I have a similar-looking cat. This particular one is popular whenever my boyfriend and I are starving and deciding on dinner options.
4. Just like so many others online, I have a thing for cats. Not only do I enjoy the absurdity of this cat nightclub/rave concept, but the movement used to create the DJing cat is pretty humorous as well. This is the only kind of club I’d go to.
5. This GIF feels like such a happy, whimsical depiction of Fall. I especially enjoy the mixture of animating photography cut-outs of real leaves with a hand-drawn element to represent the invisible force of the wind. It’s a simple concept, but very clear to understand what it represents.
6. This GIF grabs my attention and makes me smile because it feels almost like these flowers are blooming at lightning speed out of this bicycle’s basket. The color scheme and flower type here make me think this is an autumnal-themed GIF, but change either of these visual choices and you could probably depict every season with this concept.
7. I like the hand-painted/ hand-drawn style of this GIF, but it’s really the symbolism of the movement in it that I think is creatively brilliant. Having gone to a woman’s college, I’ve become familiar with the idea of women empowering and lifting up other women. This GIF does a great job of visually representing that idea. After looking at this loop through a few times I even forget where the beginning and end of it is. It just morphs into an endless string of women helping other women rise up.
8. The way this GIF sends the message of Black female empowerment is also creatively brilliant. Black women continue to struggle to have their natural hair accepted in mainstream American culture. To have the hair in this vintage photo from the era when natural hair began to rise in popularity eat the smaller, naysaying white men not only is surprising but empowering and satisfying. A message about race, gender, history, and culture all communicated in one 5 second loop. It’s hard to think words could do as much in the same amount of time.
9. This is a pretty well-known GIF that by itself is funny in its 90s era dorkiness. However, what I like about it here is that its humor is being used as a vehicle for a message about registering to vote rather than just as a reaction GIF. It’s clever and using this concept makes this sometimes boring PSA topic a little more relaxed and accessible to certain audiences who may be likely to tune out to it elsewhere.
10. With this simple concept, Kate Spade utilizes a GIF to not only feature some of their footwear line up, but it also makes me think of the time-consuming challenge of shoes when it comes to putting an outfit together. I’m sure many women can relate to lining up their shoe options like this and trying each pair on to see how they look in the mirror with an outfit. The little foot pop at the end is also a nice touch that helps make this feel a little less like straight sales content and a little more for entertainment value.
11. I love when artists make connections between recognizable objects like this to add surprise and delight to their pieces. I’m always left wondering “Why didn’t I think of that?” because, of course, lipstick in a tube and the top of a folded beach umbrella have the same shape. With the bright colors evoking a summer vibe and the feminine hands, this is a fun way to say “I’m getting ready to go out . . . to the beach that is!”
Create
Inspired by the many seasonally related GIFs I found in my research, I started ideating plans for creating my own GIFs around the theme of summer. Working in marketing and social media I know that brands often create and have success with fun seasonal content for their advertising and other communications. Fun GIFs can be a great way to stand out from competition using just straight images. With all of that in mind, I was able to build the following GIFs using 3 different techniques.
Technique 1: Cut Out Images in PhotoShop
For this GIF, I cut out sections of existing photos and placed them on a video timeline using Photoshop. I was inspired by the GIF of trying on shoes I’d found during my research and started thinking about what other decisions are sometimes hard to make. With my summer theme, I immediately thought of ice cream and how hard it can be to choose a flavor when going out for a treat in the summer.
First, I went searching for royalty-free photos of ice cream. I settled on this one of a hand holding a cone from Unsplash. Then I had to find images with similarly shaped scoops that I could cut out in Photoshop and superimpose over the image. Since all the photos I selected were from different sources I had to do some resizing as well as editing of lighting and shadowing to make the scoops look like they matched the background photo.
I chose to show 3 scoops because people find the rhythm of 3 natural and satisfying, but I wanted to add an extra beat onto the end of the experience of watching this to make it both more fun and feel like it had a marked ending. So, what better way to crown ice cream than a cherry on top. After cutting out the cherry I accentuated it by using the brush tool to hand draw blinking lines around it that signify excitement and exclamation – a little inspiration I’d been given by the GIF with blowing leaves from my research.
With the timeline tool in Photoshop being so similar to ones in video editing programs it was fairly simple to play and adjust the timing and length of the GIF’s various elements to get it to flow just how I wanted.
As I was building this I imagined this content was for an ice cream or dessert business. This GIF concept could be used in email marketing, on a website, or in social media ads either as just a generic sales pitch or could be employed, for example, if the brand was doing a new flavor launch with the photos featuring the various flavors cycling through. It could be accompanied by copy such as “The hardest decision you’ll make all day has no wrong answer”, “What flavor will be your cherry on top?”, or “Which one will be your new favorite?”
technique 2: Hand Drawn Onion Skinning in Photoshop
With summer treats already on my mind I started thinking about popsicles. I was actually eating one at one point during my brainstorm when in the 90-degree heat it quickly began to melt all over me. Something clicked and I realized the imagery of a melting popsicle connected with me in the same emotional way the hand-drawn crawling bear GIF had in my research.
It made me think of the feeling of being defeated and exhausted, but still trying to hold it together and be optimistic. I decided to use this to create a fun, expressive hand-drawn GIF.
Disclosure: I’d never tried to digitally hand-drawn anything before I made this GIF.
I started by using the onion-skinning method on a video timeline in Photoshop. Initially, I tried to draw with just my finger and a trackpad on my laptop using the brush tool. I wanted a traditional cartoon feel to my GIF so I chose the Classic Cartoonist brush, but the lack of control I had with just my finger caused my effort to initially be too cartoonish for my liking. I switched to a basic Wacom tablet and was able to get the finer, more precise lines I needed for both my design idea and for smoother animation using onion skinning.
I ended up hand drawing about 80 frames which took quite a long time. Without the Wacom tablet I don’t think I could have managed as many in the time I did this. I then changed the timeline to run at 50% speed before exporting to allow for the animation to be more easily discernible by viewers.
This GIF I imagine to be more of the kind that would be built to be posted on something like GIPHY as a means of raising brand awareness. Others would share it because they like it or it fits what they are trying to express. The popsicle itself could be made with brand colors maybe or a logo mark could be placed somewhere on it, such as on the stick. This could even be shared in the form of a transparent GIF sticker which is popularly used on platforms such as Snapchat and Instagram Stories.
Technique 3: Tweening Symbols in Animate
To finish up my trio of summer GIFs I started thinking about one that could express the feeling many have about the season being over – that sad, quiet feeling when you realize the days are getting shorter and the nights cooler. The idea of watching the sunset on the last day of summer came to mind.
I was inspired by the design style of the lipstick/umbrella GIF from my research and decided I wanted to make this GIF a bright, graphic one. I began by finding a vector file of illustrated sunglasses on Pixabay. In Illustrator I edited the color of the glasses and lenses then added various layers for the blue wavy background, the orange sun reflections, the teardrop, and the words “Bye Summer.”
Once I completed my graphic, I exported it as an ai file then imported it into Animate. I’d never used this program before so it was a little bit of a learning curve for me to figure out how exactly the timeline feature worked and how to convert the layers of my file that I planned to animate into symbols.
I used classic tweening to accomplish the animations seen in this GIF. To achieve the sunsetting motion I moved both of the sun reflection symbols down and decreased them in size in order to make them disappear behind the bottom rim of the glasses. The teardrop simply moved down from behind the glasses.
To add a little more of a final note to the teardrop I did add a second motion where I held it in one spot for a second then moved it suddenly down offscreen as if it were falling off the rim of the glasses. I think if I went back to work on this GIF I’d probably like to see if I could make the teardrop wiggle, grow, or move more naturally than just in a straight line.
I imagine this GIF concept could be useful to a brand in both ways as the previous two. It could easily be used as email, web, or social content in an end-of-summer marketing campaign, but it could also be made available as an evergreen GIF the public could use themselves, perhaps for many summers after the initial campaign ends.
Reflections
Having made very few GIFs before in my life and having never used these techniques or style approaches before I’m excited by what I was able to achieve. I think, for me, the crux of this project came down to starting the building process with good, clear ideas. The exact execution of them changed as I adapted to the tools and resources I had, but, as Blazer explains about pre-production work, I defined these GIFs – from their purposes to their feels – before I jumped into creating them. That really did make this an easier, more creative, and more enjoyable experience.
