How to Create a GIF In Photoshop
06-02-2017 21:36:00

This blog post will look into how to create a GIF in Photoshop as part of a Google Re-marketing Ad Campaign. It's a pretty simple GIF but it has a few steps, so here goes...

Below is an example of the finished product. Yeah, it’s pretty simple but I suppose that’s what you want with a banner at the side of a website? Something that catches the eye and that’s not too busy, with a call to action.

This particular GIF, along with the other sizes (stated below if you’re interested in the specific sizes) was designed for HouseFuel, an on-line Coal Merchant. The original designs were created in Photoshop with the intention to be static image ads. But, an idea came forward to make them to ‘eye catching’, which inevitably led to them being animated. Cue the learning process!

HouseFuel Coal Merchants Google Ad GIF

Where to Start?

A good place to start would be to go through what a GIF actually is. I have to be honest, I knew what one was but I couldn’t have told you what it stood for… or if it is “Giff” or “Jiff”. GIF stands for Graphics Interchange Format and it is a file that shows an image on a web page that moves. Be it moving text or a picture that slides its way off screen, it has a sequence of frames that can be set to loop endlessly.

Just so there’s no confusion, here’s a site that’s dedicated to the proper pronunciation of the word, GIF included.

GIF stands for Graphics Interchange Format and it is a file that shows an image on a web page that moves. Be it moving text or a picture that slides its way off screen, it has a sequence of frames that can be set to loop endlessly.

After searching ‘how to create a GIF?’, I came across a slight issue. The issue was trying to find ‘Animation’ in Photoshop. It’s no longer an option on the newer version of Photoshop (CC). It is now called ‘Timeline’. Bear that in mind! To get to this option, click Window and then Timeline. In the newer version it will bring up an animation bar which looks like something that you’d use to cut and edit a video. Click the button with the two little rectangles to get to the animation (frames) tool.

Creating the GIF

With something like this, I think it’s better to create something simple to begin with and have a play with the different options. Let’s start with the following:

  • Create a new layer (250 x 250 pixels)
  • Draw a small car from the custom shape tool
  • Type the numbers 1-3 and the word Go! (or anything really, it’s up to you)

Something like this…

Example Static Image

Next, hide every layer apart from the number 3 and the car. Set the delay at the bottom of the frame to 0.5 and then create a new frame. Now make the number 2 visible. Repeat this, creating a new frame until all layers are visible. Now for the ‘tween’. This is a feature to enable specific layers to move. In a new frame, select the car layer and move it off the screen.

Go to the top right of the animation bar (to tiny sandwich menu looking symbol) and select the tween option. It should now ask how many frames you would like the movement to span. Select 3 and press okay. Photoshop will have then added 3 frames to compensate for the image moving to the new location off the screen. Have a play with different frame lengths and delay to see what effect each will have.

Frames and Delay

GIF Frames

The Finished GIF

Finished Example GIF

The last step is to save your masterpiece. Just go to the usual ‘save for web’ option and select GIF. You can also set the loop options if you wish to have an endless animation or you can set to a specific number.

As you can see, the above GIF is slightly naff but it does show what you can do with GIFs in Photoshop in a relatively short time. If you spend a bit longer than 5 minutes on it you can create stunning GIFs that effortlessly get their message across.

TIP: If after you've saved your image, it's a bit jerky, increase the number of frames between the two layers. For the bike below I've spanned the tween over 30 frames for the transition from red to blue and another 30 frames for the colour change back to red.

Bike GIF

Back to Google

After I had gotten to grips (or so I thought) with how it all worked I went on to create the image shown above. But, when it was time to upload to Google, it didn’t want to play ball. The error message stated that the problem is either with the file size being too big or that the frame rate was too high.

The limit that Google sets is 5 FPS (frames per second). In my example, I had set the ‘tween’ too create too many frames when making the images appear from the left to the centre of the GIF. To rectify this, I had to change this animation to 3FPS and just play with the speed to get it somewhat right.

For more help on the specifics for Google Ads such as the maximum file size, see their help guide or for specific sizes have a look here.

Hope it helps!


Author: Kieran Brown

Tags:


Leave a comment

Archive

Tags

Archive by Date

Archive by Date

Blog
(Random)

  • Why I Use Perch CMS

    It’s the tiny CMS that’s easy to use, doesn’t get in the way of code and is super quick. Does this sound like something you want in a CMS? Perch may just be the way forward for your next project.

  • Why I Use Perch CMS

    It’s the tiny CMS that’s easy to use, doesn’t get in the way of code and is super quick. Does this sound like something you want in a CMS? Perch may just be the way forward for your next project.