１からGIF画像を作ってみよう🐱

初めまして！ watnowのりのです🌸
今回はGIF画像の作り方について書かせていただきます！watnowに入って初めて参加させてもらったプロジェクトで実際に作ったGIF画像を元に記事を書いてみます~♪
初めて記事を書かせていただくので、至らないところもたくさんあると思いますが、楽しんでいただければ幸いです🙇‍♀️☘️

## はじめに
**今回描いたGIF画像はこちら🐱**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/473131a8-87fb-bc02-e7c7-30f0dac4e024.gif" alt="watbox" width="400" height="400" />
watnowで進行中（もうすぐ完成✨）のプロジェクト、"watbox"のローディング画面で使用していただきました。

## 1. イラストを作成する
まず作りたいGIFのイメージに合わせて画像を作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/ac636e71-e6d8-520d-ecbe-70e8f9545f05.png" alt="watbox" width="400" height="400" />

イラストはiPadで、 "ibisPaint X" を使用して作成しました。
[ibisPaint X ダウンロードページ](https://apps.apple.com/jp/app/%E3%82%A2%E3%82%A4%E3%83%93%E3%82%B9%E3%83%9A%E3%82%A4%E3%83%B3%E3%83%88x/id450722833?platform=iphone)

## 2. 動かしたい部分を決める
私は今回しっぽを動かしてみました✨

しっぽの角度が違う5個くらいのイラストを作成し、いい感じに並び替えて9コマにします。ここまでで素材は揃ったのでgif画像に変換していきましょう。

**GIF画像に使用する９コマのイラスト**
<div style="display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;">
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/0b7a89e5-612c-0eae-56fb-8e6c09a1e5de.png" alt="画像1" width="200" height="200">
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/3ad6a45f-cd2e-a314-1e35-6514e0e1c894.png" alt="画像2" width="200" height="200">
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/8db7defc-db51-2c28-63d4-8b4fef095c13.png" alt="画像3" width="200" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/ff298a11-07ca-ffa5-bb09-c22cf1899e10.png" alt="画像4" width="200" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/d9af5291-eb4a-9851-7b2c-1fa11351f7c0.png" alt="画像5" width="200" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/a931dd3e-0a71-524f-b9b5-69c0ba01c871.png" alt="画像6" width="200" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/6e46f144-7c6c-3e8d-6ca5-b93eddd85462.png" alt="画像7" width="200" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/73f825b4-89ec-3949-183e-89c5c1c11442.png" alt="画像8" width="200" height="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/43e0a06c-76a4-ac51-df6a-43f658eaeec4.png" alt="画像9" width="200" height="200">
</div>
先輩の案で、やってみたらめっちゃ可愛かったのでよかったなあって思いました。

## 3. GIF画像に変換してみよう①
私が試してみたGIF画像の変換方法は２種類あります。１つ目は、iphoneで行う方法です。

**メリット**
めっちゃ簡単で手軽にできる。

**デメリット**
ちょっと画像がガタガタになる。（画質は荒いけどそれも味なのかもしれません🙇‍♀️）

**方法**
①iphoneの"ショートカット"を開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/dfc84a00-39a8-c2c0-8f58-1f7778f1d278.jpeg" alt="watbox" width="200" height="200" />

②ギャラリーのボタンを押して、"写真をGIFに変換"を選びます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/19e52904-29d5-815d-513e-0f2d7309b54e.jpeg" alt="watbox" width="200" height="200" />

オレンジ色のアイコンを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/20095404-8894-a1ce-b0c8-2bfb06117ca7.jpeg" alt="watbox" width="200" height="200" />

③ショートカットのボタンを押し、ホームに戻ります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/8f39ef4a-4e36-09f7-776a-758f77dead90.jpeg" alt="watbox" width="200" height="200" />

④オレンジ色の四角"写真をGIFに変換"を押し、写真を順番にアップロードしたら完成です。

**出力するとこんな感じ🐱**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/144e89ff-bddb-91d7-3e19-03772b1c410b.gif" alt="watbox" width="400" height="400" />
手作り感があって可愛いけどアプリなどに使用するには画質が荒すぎるかもです。

## 4. GIF画像に変換してみよう②
watboxで実際に使用したのはこちらの方法です。

**メリット**
画質が綺麗。可愛いGIF画像ができる。

**デメリット**
手軽さは少し減る。動画編集がちょっと手間。

**方法**
①動画編集アプリで写真を繋げて１つの動画にします。私は"CapCut"を使用しました。
②変換サイトを使い、動画をGIF画像に変換します。

・参考
[Adobe Express 動画をGIF変換できるサイト](https://new.express.adobe.com/tools/convert-to-gif?referrer=https%3A%2F%2Fwww.google.com%2F&url=%2Fjp%2Fexpress%2Ffeature%2Fvideo%2Fconvert%2Fmov-to-gif&placement=columns-1&locale=ja-JP&contentRegion=jp&%24web_only=true&_branch_match_id=1350809247404175282&_branch_referrer=H4sIAAAAAAAAAyWOwUoEMRBEv2ZzywwqIghBRFYWT7I3T5LJ1mQym6RDJzPRi99ui1B0PbooqKW1Uh%2FH0V5oQi2Wr4Vq0x3TYEsZYsjXEePDx%2FGM%2BH26P01PjBnMYLP8VQ93z4fbV1HvffBEPmJwlOShNo5GfC1y8FUYtQrNsG1jCO3hAhJ3lHdwE0q060bah1mVaB0ScjOO4pZy1TcqkrMRZrX67V1Jq0l8hg%2BUzVrUz%2F%2BwkP3nxNSrLHxZmBJ%2BAb12%2F43jAAAA)

**出力するとこんな感じ🐱**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950824/473131a8-87fb-bc02-e7c7-30f0dac4e024.gif" alt="watbox" width="400" height="400" />
画質が綺麗🥺プロジェクトに使ってみるならこっちの方法がいいかもです！

## 5. さいごに
半年間watnowで駆け出しデザイン楽しんできました。初めてこのような記事を書けて嬉しかったです。もっと良いGIF画像の作り方などあれば教えてください🥺
来年は技術記事書けるように勉強します😭

これからも頑張ります~♪ここまで読んでくださりありがとうございました！
りのでした🌸