主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!


How to create an animated GIF in Photoshop

使用ソフト: Illustrator CC 2018、Photoshop CC 2018  

An animated GIF, used on websites and personal work pages, are simple yet deep expressions that keep people engaged.
It’s possible to create some pretty interesting expressions depending on how you make them.
In this article, I’ll show you how to create an animated GIF in Photoshop.

What’s a GIF?

To begin with, What is a GIF?
A GIF is one of the file formats for storing images.
While there are many file formats, the outstanding characteristics of GIFs are their lightness of data size and ease of use. There is a strong demand on the web because the number of colors that can be used is 256, and although there is no sound and no high quality audio, it is easy to display without tapping, and it can be displayed quickly on a smartphone.

How is it made?

The structure of a GIF animation is quite simple.
If you ask me, it would be similar to flip-book.
The difference between GIF and the flip-book is that the looped image is continuously displayed as a video.

Sounds interesting, does’t it?
Let’s try it!

Creating an animated GIF in Photoshop

First, prepare the images for the animation.
You can use a photo, but I’d like to use an illustration created in Illustrator.


1. Create a document of the same size as your animation in Photoshop CC.
Open the layers panel of the created document, create the same number of layers as the image,and import the image into each layer.

layers panel

2. Select [Window] > [Timeline] and display the Timeline panel.

Timeline panel

3. Select [Create Frame Animation] from the Timeline panel.

Select the first layer of the animation (make sure the layer is not in the background at this time) and click [Create Frame Animation].

Timeline panel

4. The first layer has been selected for the timeline frame.
Before selecting the second layer, click the [Duplicate Selected Frames] in the lower right corner of the Timeline panel to prepare the next frame.

Timeline panel

5. Click the second layer with the next frame selected.
Repeat this process, putting all the images to the frame in the order you want them to be displayed.

In the Timeline panel, set the time to be displayed for each frame.

Timeline panel

Now, are you ready?
Click the play button in the Timeline panel to see the result!


You can save the frame animation as a GIF by choosing [File] > [Export] > [Save for a Web]

We were able to create an animated GIF easily.
Check out how it works on the PC screen or on your smartphone!
You can also use it to edit your favorite photos or create banners for websites.

That’s the end of my explanation of “How to create an animated GIF in Photoshop”. Thank you.


  • このエントリーをはてなブックマークに追加
hulu dTV

Related post

  1. 昔の映像風な画像加工をしよう


    How to Create VHS Glitch Effect in Photoshop

    There are many ways to add vintage …

  2. Photoshop

    How to Enlarge Pixel Art Without Blurring

    When you enlarge a pixel image, som…

  3. Photoshop

    Add Hair and Improve Photo Quality

    I took a picture of the men, but I …

  4. 描画モードについて


    Photoshop Blending Modes Descriptions -Part1-

    Do you know how many types of are …

  5. Photoshop

    Creating a Cartoon Effect with “Cutout”…

    You can use many filters to edit im…

  6. Photoshop

    Easy Photo Retouching: Natural Removal of Objects

    Have you ever wanted to erase or mo…


  1. There is no registered post.
  1. オブジェクトを切る消す


  2. Photoshop

    Create 3D Text with Photoshop Layer Styl…
  3. GIF


  4. 遠方の山と手前の山の重なり


  5. 夜景


    How to Create a Water Reflection with Ph…