Embedded Files
What are gifs?
Gif stands for graphic interchange format, which is a bitmap image format that was developed by a team at the online services provider and released in 1987. Gifs are short series of images that can be animated to look like they are moving in one continuous cycle.
Why do we use gifs?
Gifs are low sized animations which make them very popular for use on advertisements, blogs, social media, and instant messaging apps.
Inspiration
Creating Gifs was something new to me so when starting this project I did some research to see what style and ideas I would come up with to create my gifs. I started by looking on pinterest and pinning some of my favorite ones from there. Below are some of the animations I pinned as inspiration as well as the link to the rest of my pinterest page.
Pinterest has so many different gifs all in different styles, but my favorites were the cartoon styles as shown here. However most of these were centered around food so I wanted to do something different than that with my own gif. After doing my research and finding what styles I wanted to use when creating my own gifs I started making a list of ideas and sketching out some options of gifs I could make.
After sketching out my ideas, I tried out making my first gif. This was a square that would zoom in and out as shown below, which was honestly not very good. However it was my first one I ever made so I was just using this as a tester to get my bearings on how to make one. So after creating that one I started to get to work on my real gifs. The first one I made was the ferris wheel gif.
I started this one by creating a design in illustrator, and tweaking it until I got it correct.
I then created layers with copies of the wheel that were turned slightly on an angle until it made a complete circle. In creating these many layers when it is inserting into photoshop I will be able to hide all other layers but one, so when it is animated it will look like it is spinning.
Make Frames From Layers
Make Frames From Layers
After uploading your design into photoshop, you then select the three lines on the lower right corner which will give you pop up options and select the one that says "make frames from layers"
Adjusting the Frames
Adjusting the Frames
Once the frames are created they will appear the the bottom on the timeline. Here the order of them and how long they are can be adjusted using the drop down bar under the picture of each frame.
Play Your Animation
Play Your Animation
After arranging the frames how you want, you can use the play button at the bottom and see your animations come to life!
FERRIS WHEEL
FERRIS WHEEL
This is the completed ferris wheel animation. After making my original design I wanted to add something more to it so I went and created the background with the flashing lights! The lights and that dark background add something more to a simple gif and make it stand out.
To create my next animation I went back and looked at all my sketches and chose from those designs which ones i wanted to bring to life, and for the one I chose the sun and moon phases.
Creating the Designs
Creating the Designs
To start this gif I first made my sun and moon designs in illustrator. After creating the basic designs arranged them in layers of how I wanted them to move, so when they were imported into photoshop they would be ready to make into frames.
Importing Into Photoshop
Importing Into Photoshop
Once the images were imported into photoshop I created the four different background for the different phases, and placed the background behind the desired images.
Making Frames
Making Frames
I then went ahead and did the same steps as I did with the previous gif in created frames from the layers, and then changing the time for each frame in order to animate the images
SUN & MOON
Page updated
Google Sites
Report abuse