Pikspire : Blog

Insights of things that we care about

blog-img
GIFs

GIF, an acronym for Graphics Interchange Format, is a commonly used file on the internet, besides other file formats like JPGs and PNG. GIF files use a lossless data compression method, which shrinks the size of the file without any quality loss. Indicated with the .gif file extension, GIFs are normally the best choice for images featuring solid color, simple shapes, and text.

GIF’s are an easy approach to capture any viewers’ attention, and to have serious impacts, hence these itsy-bitsy animations are worth trying out.

How to create a GIF using Photoshop

You can use Photoshop to loop images into one to create a GIF.

Step 1:

Load your images into Photoshop
1. GIFs are made up of a series of images (or frames), and if you already have a bunch of images you’d like to turn into a GIF, open Photoshop, and start with tapping on the ‘Select File’ option. Then tap on ‘Scripts’, followed by tapping on ‘Load Files into Stack’. Once done, select ‘Browse’ and then choose the files that you would like to incorporate within your GIF.

Tip: If you wish to save time, number the files that you want to load, for example, 001, 002, 003, etc. so that they appear in order.

2. Use the Path tool to cut out the individual subject or object and apply that path into a layer.

3. Color correct the subject as per requirement.
4. Choose a suitable background complementing the subject and put that at the bottom of the layer panel.
5. When all your layers are ready, it’s time to move on to Step 2 and create your animation.

Step 2:

Create a Timeline for your GIF
1. Click on ‘Window’ from the top toolbar and select ‘Timeline’ to make the timeline tab appear at the bottom of the screen. Then choose ‘Create Frame Animation’.
2.
3. You can now see your animation frames in sequence in the “Timeline” panel. If you need to reorder them, just drag these around.
4. Create frames one by one, select and then turn on the layer as per the sequence.
5. To convert these photo layers into a group of looping animation frames, select all frames (using the shift and click method), right-click and choose a frame delay as per requirement. The shorter the delay, the smoother the final result.

Tip: Press the Play icon (the triangular button in red below) to visualize the look of your GIF. Besides, don’t forget to select ‘Forever’ from the drop-down menu to the left to set your GIF loop continuously.

Step 3:

Export your GIF
1. Once you’re happy with the way your GIF is looking, it’s time to export it to use on your website, social media profiles, or anywhere you’d like to share. To export your GIF, click on ‘File’ followed by ‘Export’ and finally click on ‘Save for Web’ (Legacy).

2.Once done, you can see the ‘Save for Web’ window, where you can select the type of GIF you’d like to create. By clicking the presets, you can see all of the available options including GIF 32, GIF 64 and GIF 128. Also, you can choose Dithered or No Dither. The number after the GIF indicates the number of colors that’ll be included in your GIF and selecting Dither will help you to alleviate color banding.

3. For this, I have used Select ‘GIF 128 Dithered’ under the Presets tab, ‘256’ under the Colors tab. You can also change the dimensions if necessary. Lastly, click ‘Save…’ and name your file.

If you wish to see how your GIF looks like, click on ‘Preview’ in the bottom left corner. This will lead to opening your default web browser and playing a looping preview of the GIF that you’ve created.

Now you’re ready to export your GIF.