![見出し画像](https://assets.st-note.com/production/uploads/images/149909881/rectangle_large_type_2_231c4bf2961b3f739a7c368312c2c530.jpeg?width=1200)
「gifアニメーションは動くかな?」(修正済み)
![](https://assets.st-note.com/production/uploads/images/149880084/picture_pc_afddee0a2fefb10715e3b6ad3719471a.gif)
こんにちわ!
イラストレーターの鹿角時計です!(⭐️ ´ Å ` ⭐️)
昨日は 「記事ネタを生み出す技術 その1」 という記事を書きました。
もうすこし具体例をだしたり、見やすくしたり、イラストを挿入しないとだめかなぁと反省中です。
今日の見出し画像はPhotoshopとPROCREATEをつかってます。
今日はアニメーションgifを作ったことについて書きます。
わたしがつくったアニメーションgifはモデルがあります。
MisskeyというSNSでポストやリアクションとして投稿できるアイコンやgifアニメがありますが、そのなかのaiというネコ耳のセーラー服の女の子です。
Misskey上では27px正方形で表示されていますが、ナチュラルサイズは112px正方形です。
なんかすごくきれいに表示されているんですよね。
どうやって表示されているのか?
![](https://assets.st-note.com/production/uploads/images/149913111/picture_pc_ccce866ab2049737cc58d66dd8da1860.gif)
Misskeyのナチュラルサイズ
おそらくこのナチュラルサイズをシステム側で圧縮すると、
小さくてもきれいになっているのかと思います。
![](https://assets.st-note.com/production/uploads/images/149913282/picture_pc_14ef0a2da3790d11f162cf6cd9aa0e77.gif)
ノートやリアクションで表示されるのは27pxとSafariのWebインスペクタでしらべました。しかし、27pxでアニメーションgifを出力するとご覧の通りとてもぼやけたものになります。
Photoshopでつくった画像データは2000×2000px
記事の冒頭にあるのは500×500px
どうにかならないかなぁって思うんですが、調べてもよくわからない!
アニメーションgifの構成
![](https://assets.st-note.com/img/1723013756914-rBSfsTJtPe.jpg)
![](https://assets.st-note.com/img/1723013765310-6bWfmFdyeR.jpg)
![](https://assets.st-note.com/img/1723013775129-pdqo0aDFvp.jpg)
![](https://assets.st-note.com/img/1723013785098-uOFnGsLlpc.jpg)
![](https://assets.st-note.com/img/1723013797855-SgpXBeyo4g.jpg)
五枚目は四枚目をすこし下にずらしただけです。
6〜10枚目は5.4.3.2.1の順で同じのを使っています。
![](https://assets.st-note.com/img/1723013900047-9YDsuBX6Ju.jpg)
![](https://assets.st-note.com/img/1723013919528-ALCJbmPLFP.jpg)
![](https://assets.st-note.com/img/1723014117878-xgCw7eerAG.jpg)
![](https://assets.st-note.com/img/1723014133907-xyQSytQvQq.jpg)
![](https://assets.st-note.com/img/1723014168126-VXaLfN36pg.jpg)
この順番で無限ループするようになってます。
Photoshopのタイムラインツールで、レイヤーごとに分けた画像を順番に表
示されるように設定し(ちょっとこの辺がむずかしいですけどこんな感じ)
![](https://assets.st-note.com/img/1723015781391-UaPEuzbqcH.png?width=1200)
設定が終わったら「Web用に保存」から「GIF形式」を選び保存すればOKです。
昔ドット絵のgifアニメとかいくつかgifアニメを作ったことがありましたが、ひさしぶりの制作です。
かなりラフな感じで描いたので、その抜け具合が割と気にいっています。
こういうの需要ないんでしょうかね。作りますよ(⭐️ ´ Å ` ⭐️)ノシ
だれかお仕事ください。ふにー(⭐️ ´ Å ` ⭐️)=3
鹿角時計はがんばります(⭐️ ´ Å ` ⭐️)ノシ ではまた🌟
🔶🔶🔶🔶🔶各種リンク🔶🔶🔶🔶🔶
■lit.link
■skima
■ココナラで販売中
■マシュマロ
■お題箱
■Pixiv
■SKIMA
イラストレータ独立一年目のへっぽこ鹿角時計です! 息も絶え絶え、やっております(⭐️ ´ Å ` ⭐️) 可能性ありますよ?成長しますよ?どうかサポートお願いします!