How to Create GIF Images For Your Site

It seems as though the more modern we become, the more nostalgic we are. We are seeking back towards things as they used to be – the quality, the originality, the essence. Music lovers have LPs, Internet geeks have GIFs. GIF images seem to be the new black when it comes to Internet trends and with good reason.

They are an easy way to give your site a trendy and fun touch that your readers will love. They make for interesting content and have endless possibilities of creating something that your readers will find interesting and share with others. If you’re a food blogger for instance, you can make a GIF of a piece of cake disappearing from the plate, or stacking cookies one by one on top of each other.

If you’re a fashion blogger you can showcase a few different colors of lipstick on your lips! All of this makes for interesting and sharable Internet art and there are already websites dedicated to GIFs. Tumblr has an entire section for this type of image while sites like Gifyo solely focus on this trendy, retro Internet phenomenon.

Check out this guide to see how you can create your own GIF.

Step-by-step guide to making gif images

Make sure that you have at least three images and that they are the same size. Once you have the basics ready, you’re ready to start working in Photoshop. Like mentioned above you can make a GIF image that almost becomes a video showing something in motion or you can make a simple GIF showing different images like the one you’ll see in this post. The process is completely the same – the difference is in the pictures!

Step 1 – Getting Photoshop ready

Open Photoshop. Go to Window and make sure that Animation and Layers are chosen and shown on the front page. Your Photoshop should look something like this:

Photo1

Step 2 – Start adding photos

Open one of the photos in Photoshop by going to File and clicking Open. The order of the pictures is not important right now – we will re-order them later. When you add your first picture, your Photoshop should look like this:

Photo2

Now, it’s time to create more layers for you .gif image. Go to Animation tool and drag the little image down to ”Duplicates selected frames”. Now you have two of the same image. In Layers you will also have to drag each image down to ”Create a new layer”. The icon in Layers looks the same as in Animation as pointed out with the arrow in the picture below. gif-tutorial

Next, go to File and choose Place. A box will appear where you will be able to find the next picture. Again, don’t worry about the order of the pictures. When you open the next picture you will see a cross appear over your image. It will look like this:

photo6

In order to remove the cross you will simply have to press enter. After you press enter, you will be able to repeat the same process as with the first picture, namely drag it down to ”Duplicates selected frames”. Continue using Place to add more pictures to your Animation. Once you’ve added all the pictures, it’s time to set the order.

Step 3 – Putting the pictures in the right order

Click on the first picture in the Animation field and once it’s marked blue, go to Layers and remove the eye icon from the pictures that should not be first in line. Once you click on the eye icons you will see the images change in Animation.

Step 4 – Decide on the speed

After you’ve put the pictures in the order you want them to be in, decide how fast your images should change. You do that on each picture in the Animation tool. You’re almost done now!

Go to File and choose Save for Web & Devices. A new window will open. Make sure that the Looping Options is set to Forever. Test out your .gif by pressing play. The only thing left is to press Save! Needless to say, save it as a .gif image!

gif_tutorial