GIFは簡単に作ることができて、Instagram等のSNSで広くそのユーザーが利用することができます。絵のうまいヘタ、技術の習熟に関係なく、ユーザーが表したい気持ちにぴったり合致するものであればどんなものでも受け入れられるでしょう。
web上のサービス、スマホアプリ等作成方法は様々あり、自分にとって使いやすいものを選べばいいと思います。ここでは私が作成した方法をお伝えいたします。
これ作ります
蝶が羽をぱたぱたさせて飛び去っていくイメージです。その軌跡としてきらきらををつけました。
ちなみに背景の手帳/猫/猫の背後の花 は【Adobe Creative Cloud Express】の中の無料素材です。Canvaと同じようなデザイン作成ツールで、ブラウザ版、アプリ版があります。それぞれ一長一短ありますが、Canvaでは有料機能となっているリサイズが無料でできる点は長所と言えます。
How to
Illustrator
動かす元となるオブジェクトはIllustratorで作成しました。
飛び去っていくのを表すために今回は7つのオブジェクトを用意しました。連続した動きですので、ほんの少しずつ形を変えることになります。2つくらいならいいですが、このような場合ですと、Photoshopなどのブラシで作画するピクセルデータより、このようなベクターデータのほうが扱いやすいという意図からです。
白い小さな点の集合で表した軌跡の部分ですが、最初はPhotoshopの星型ブラシを使いましたが、GIFで動かしたときにうまくいかなかったのでやめました。Photoshop上で見るときれいですが、実際に動作させると点の大きさと形が大幅に崩れてしまいました。
Photoshop
1. Illustratorで作成したオブジェクトをコピーしてPhotoshopのレイヤーにペースト。
位置はそれぞれ実際に動きをつけた際の想定で配置します。
2. レイヤーをすべて選択した状態でウインドウ-タイムラインを選択。
この時、最下部のレイヤー（一つ目の動きのオブジェクト）のみ見えている状態にします。
3. レイヤーをすべて選択した状態でウインドウ-タイムラインを選択。
タイムラインバーが表示されるので、再生ボタンを押して動作を確認します。動きが遅かったり速かったりすれば、秒数をそれぞれのレイヤーごとに変更します。
タイムラインバーの再生ボタンを押して動かしてみた様子です。それぞれのきらきらの部分だけ動きを初期設定の0.1秒から0秒にしました（分かりやすいように背景に色をつけましたが、保存時には消します）。
これで問題なければGIFで書き出して保存します。
保存形式
「web用に保存」からGIFを選んで保存します。
透過背景の場合は「透明部分」にチェックを入れます。
これにて完了です。
Instagram等で使用できるようにGIPHYに登録することについては、別にご紹介していますので、よろしければご覧ください。
