Progress and the Process of Gifs

Right off the bat, I feared how my final products would turn out since I hadn’t worked with gifs at all before. I researched inspiration on Tumblr and Pinterest before diving into making my ideas into a reality.

I knew I want to make one in a more masked/Photoshop style and another in a more flat, colorful and Illustrator style. I first started with my Photoshop-style gif, which was initially supposed to be of the lunar cycle. I made multiple attempts to mask each moon the same way but unfortunately, it didn’t work out smoothly or accurately, so it had to be trashed in the end.

I wanted to include the moon in some way, so I came up with the idea of the silhouette of a witch flying over the moon. I researched pictures to mask and overlay together to create a believable background for the witch to fly over.

After creating the background in Photoshop, I created the silhouette and used a clipping mask to make it so that the witch could only be seen over the moon png. I then created multiple layers of the same silhouette. I made each layer visible on a different frame to simulate the witch moving over the moon.

I made each frame last about 0.05 seconds to make it a little bit faster. Unfortunately, I had to make a few changes to what I thought was the finished gif to make it look presentable. I deleted a few frames to make it more web-friendly and released the clipping mask entirely because a few of my classmates wished to see the witch more than just the time she was over the moon.

I made the silhouette slowly appear and disappear over time with the use of the opacity bar on each layer. I also used this technique with the text “Happy Halloween” on the bottom of the gif. I added multiple additions to the text such as drop shadows, outer glows and much more to emphasize the words and make them stand out against the dark background.

This was what ended up being my final attempt for this specific gif. For the illustrator style gif, I used a different creative process. I found a calligraphy font that would create the perfect visual effect for the word “love” on dafont.com. I wanted to create a gif where the word love was written with a swirly pen.

We were shown a tutorial on how to create a similar gif in class, so I had a much more solid idea of how I wanted to go about this project. I typed up the word “love” and used the magic wand tool to select the word and brush over certain parts in separately made layers. Each layer/frame made the word slowly appear as they were added.

The brush I used was a bit too feathered and was easily noticed by any amateur animator. I left a white version of love in the background to fill overtime, but it didn’t look the way I wanted, so I didn’t include that element in the final version.

I was informed that I should redo the writing motion with a more solid brush to give the gif a more professional feel. I removed the white text from the background to give the main focus to the pink text. After not looking at the project for a few days, I wanted to add another aspect to the piece.

I added x’s and o’s to the background and changed their font every frame to create contrast and a more creative feel. The color of the letters was once a deeper pink closer to the color of love, but it was too close, so I changed it to a lighter pink. In the end, I enjoyed the final state, but some people didn’t. I may change it in the future for the better and learn from my mistakes, so I won’t make them in a future career.