Graphic Design Trend: Animated Gif

This trend is to bring attention to a certain detail without it being overly distracting. These ‘gifs’ have a pleasant combination of stationary as well as motion illustrations (More, 2017). I made my own animated gif in Adobe Photoshop by first drawing a skull with the pen tool. I then went to a new art board to draw one mushroom. I drew the mushroom, saving the file as a .psd file to later be able to edit to manipulate its shape. I then copied the mushroom shape and pasted it onto the skull art board. I did the same thing two more times, now having three mushrooms and a skull on one art board. With one mushroom, I flipped it horizontally so it’s facing the opposite way and rotated it slightly, creating another mushroom. I placed these mushrooms in various locations on top of the skull. I made another layer copy of this mushroom with skulls and moved each mushroom a little differently. Now, I have one Photoshop layer, with a skull and mushrooms, and another layer with a skull and mushrooms moved slightly differently. I did the layer copying process one more time, making three skulls with mushrooms moved a little differently each layer. I then came up with a color scheme that best fit the graphic. In order to bring my illustration to life and add the ‘gif’ effect, I went to Window > Timeline. From the Timeline menu I clicked ‘Create Video Timeline’ then ‘Make Frame From Layers’. To create the endless loop, I made sure the time lapse was set to ‘Forever’ and made sure each frame time was set to ‘0.2 seconds’.

After creating this, I feel that the mushrooms are distracting because of their size, or maybe because of how big of a movement each mushroom had in each transition. If I were to create this again, I would have moved each mushroom a little less each time. I also struggled to be consistent line weight as I was contorting the mushrooms in different sizes. My plans are to make another one to develop the animated gif skill further. I had an idea to, instead of moving mushrooms, move butterfly wings up and down. This will require more layers with less movement from the wings to each transition. Overall, this was a successfully made gif is a great skill to log away for future use.

Sources

AdobeCreativeCloud. (2017, March 8). How to create an animated GIF in photoshop | adobe creative cloud. YouTube. Retrieved April 16, 2022, from https://www.youtube.com/watch?v=omdfcGYEqPY

More, S. (2017, March 9). 10-brilliant-graphic-design-trends-2016-infographic. Digital Marketing Insights. Retrieved April 16, 2022, from https://www.ethinos.com/blog/10-graphic-design-trends-that-influenced-2016/10-brilliant-graphic-design-trends-2016-infographic/