現場猫の GIF を作った
これは ZOZO Advent Calendar 2022 カレンダー Vol.3 の 6日目の記事です。昨日の投稿は @YasuhiroKimesawa さんの「FourKeysを捉え直す」でした。
こんにちは、たじまです。
みなさん業務に関係したり新しい技術について語っていますが、私は一旦肩の力は抜いたネタ枠を提供しようと思います。
はじめに
みなさん、 Adobe を知っていますか?
最近、左利きのエレンという私の好きな漫画で、全ての広告は Adobe から生まれたという名言が生まれたあの Adobe です。
その言葉の通り Adobe はさまざまなクリエイターが使用しており、我々 ZOZO のデザイナー陣をはじめとしたクリエイターも違いはありません。
しかしながら、私は今まで Adobe を使ったことがありませんでした。 デジタルでイラストを描いたことがなければ写真を撮る趣味もないため学割という貴重な期間を逃し、今まで過ごしてきました。
そこで figma や デザインシステムという言葉に敏感になっている今、 Adobe に入信し Hello World をすることをこのアドカレに捧げました。
(このタイミングでブラックフライデーで板タブを買いました)
現場猫を作りたい
そんななか TL は現場猫が流行っていました。
:w したら現場猫でるようにした。 pic.twitter.com/e4ROKGidON
— mattn (@mattn_jp) 2022年11月16日
VSCodeでも保存時に現場猫が出てくる拡張機能作った( 'ω')
— Lapis (@Lapis256) 2022年11月17日
マーケットプレイスhttps://t.co/d01y8cRcOk
リポジトリhttps://t.co/yvdDm7MZQ6 pic.twitter.com/19AZvQwwNf
しかしながらただヨシ!という猫の静止画がでてくるだけでは何かもの悲しさを感じたので今回は Adobe を使用し GIF を作ることにしました。
Adobe illustrator の勉強の仕方
なんとイラレにはチュートリアルがたくさんあります。これをいちから行い基本的な使い方を知りました。
もともと figma は使用していたためなんとなくの使用感は似てるな〜と思いながらも画像をベクトル化したり いい感じ にする技術が詰まっていて課金要素感を感じました。
作り方
GIF の作り方はこんな感じです!
- 現場猫の著作権の調査→ヨシ!
- 現場猫の静止画の調査→ヨシ!
- 参考にできる体の動きの動画または GIFを探す→帽子をかぶってないバージョンの現場猫の GIF を発見、参考にする→ヨシ!
- GIF の一枚一枚のイラストを illustrator で作り、画像にして photoshop で アニメーション化する→頑張った!
- 完成!
成果物は上にも貼りましたがこんなかんじです!
おわり
最初は AA を作ろうと思っていたんですが、普通にイラレを勉強した方が身になると思い技術何も関係ないものになっていまいました!
余裕を持って始めたつもりですが季節病を患ってしまいギリギリになってやっぱり予定調和なんだなという感じです。
今回ブラックフライデーで板タブも購入したので、LP のデザインから始めていこうかなと思います。
現場猫の著作権について
問題はなさそうですが記述しておきます!
元ネタはくまみね(@kumamine)さんの書いた電話猫です。
夜中科学電話相談 pic.twitter.com/tanTFmNuGK
— くまみね (@kumamine) 2016年8月25日
これをもとにふたばちゃんねる(日本の画像掲示板)のふたば民が、
- ソザイングに掲載されている、人型オブジェクト【怒る】
- 中央労働災害防止協会のヨシだ君の「ヨシ!」
を掛けわせてコラージュを作ったことが現場猫の誕生の真相のようです。
また、くまみねさんは現場猫のコラージュについては自身のブログで触れていたため、気になる方はそちらから確認してみてください
どうもこんにちは くまみねです。 ●オリジナルのキャラクターに現場猫のポーズをさせてもいいですか ●あれは現場猫のポーズをとっていましたけど許可しましたか などの質問を受けたりすることもありますので図を描きました ※ちなみに現場猫のポーズに関して私の許可は不要です ※なぜなら私が考えたものではないからです