Working with Movement

Posted by | December 22, 2013 | advertising, technology | No Comments
Screen Shot 2014-04-27 at 9.30.12 PM

This year, I’ve been doing a lot of print design through my work as a student at the University of Oregon, Graphic Designer at Design and Editing Services, and Web Communications Assistant at the Lundquist College of Business. However, within this year, I have been given various opportunities to work with GIFs and animation. Working with movement is very different from working on print materials. You have to think about timing and sequencing, which is not something you come across when designing for print. Here are two examples — one GIF and one animation — from these past couple of months that I have created.

This is a side banner GIF I created for the Oregon Executive MBA program for Mac’s List, a website dedicated to job search in the Portland, Oregon area. The first GIF I created started with a green ‘O’ and the Oregon Executive MBA logo. However, after confiding in my boss, we decided that the green was too dark in comparison to the background. I revised the logo to make it yellow and the added a dark forest green filter to the background to make the yellow ‘O’ pop. After making the first GIF, I became aware that we couldn’t upload a large file and therefore, I had to cut some scenes and transitions. Instead of the fade, which takes up many frames, I cut from one scene to the next. It is currently on the side banner of Mac’s List’s website.

* The GIF’s do not loop so please refresh the page or right click to view the GIF in a new window.

First GIF:


Final GIF:


This is an animation I created to promote the Lundquist College of Business Twitter handle. For this animation, I really focused on the color, timing, and sequencing. I used an image of the Lundquist College of Business and applied a gaussian blur filter for the background of the animation. I also added a blue gradient to follow Twitter’s brand guidelines. In Illustrator, I created diagonal lines and added it to the background to create a futuristic feel. For timing and sequencing, I decided to start the animation with the Twitter bird enlarging in size. Then, I added text that says “Follow Us on Twitter” to flow in from the left and right. To finish, I added the Lundquist College of Business Twitter handle to fade in. I’m really happy with the way it turned out and am always overwhelmed with excitement when I see it on the displays.

Leave a Reply

Your email address will not be published.