現場猫の GIF を作った

これは ZOZO Advent Calendar 2022 カレンダー Vol.3 の 6日目の記事です。昨日の投稿は @YasuhiroKimesawa さんの「FourKeysを捉え直す」でした。

こんにちは、たじまです。

みなさん業務に関係したり新しい技術について語っていますが、私は一旦肩の力は抜いたネタ枠を提供しようと思います。

完成物

はじめに

みなさん、 Adobe を知っていますか?

最近、左利きのエレンという私の好きな漫画で、全ての広告は Adobe から生まれたという名言が生まれたあの Adobe です。

その言葉の通り Adobe はさまざまなクリエイターが使用しており、我々 ZOZO のデザイナー陣をはじめとしたクリエイターも違いはありません。

https://1000logos.net/wp-content/uploads/2021/04/Adobe-logo.png

しかしながら、私は今まで Adobe を使ったことがありませんでした。 デジタルでイラストを描いたことがなければ写真を撮る趣味もないため学割という貴重な期間を逃し、今まで過ごしてきました。

そこで figma や デザインシステムという言葉に敏感になっている今、 Adobe に入信し Hello World をすることをこのアドカレに捧げました。

(このタイミングでブラックフライデーで板タブを買いました)

現場猫を作りたい

そんななか TL は現場猫が流行っていました。

しかしながらただヨシ!という猫の静止画がでてくるだけでは何かもの悲しさを感じたので今回は Adobe を使用し GIF を作ることにしました。

Adobe illustrator の勉強の仕方

なんとイラレにはチュートリアルがたくさんあります。これをいちから行い基本的な使い方を知りました。

helpx.adobe.com

helpx.adobe.com

helpx.adobe.com

もともと figma は使用していたためなんとなくの使用感は似てるな〜と思いながらも画像をベクトル化したり いい感じ にする技術が詰まっていて課金要素感を感じました。

作り方

GIF の作り方はこんな感じです!

  1. 現場猫著作権の調査→ヨシ!
  2. 現場猫の静止画の調査→ヨシ!
  3. 参考にできる体の動きの動画または GIFを探す→帽子をかぶってないバージョンの現場猫の GIF を発見、参考にする→ヨシ!
  4. GIF の一枚一枚のイラストを illustrator で作り、画像にして photoshop で アニメーション化する→頑張った!
  5. 完成!

成果物は上にも貼りましたがこんなかんじです!

完成物

おわり

最初は AA を作ろうと思っていたんですが、普通にイラレを勉強した方が身になると思い技術何も関係ないものになっていまいました!

余裕を持って始めたつもりですが季節病を患ってしまいギリギリになってやっぱり予定調和なんだなという感じです。

今回ブラックフライデーで板タブも購入したので、LP のデザインから始めていこうかなと思います。

板タブ DECO 03
ブラックフライデーで買った板タブ

現場猫著作権について

問題はなさそうですが記述しておきます!

元ネタはくまみね(@kumamine)さんの書いた電話猫です。

これをもとにふたばちゃんねる(日本の画像掲示板)のふたば民が、

を掛けわせてコラージュを作ったことが現場猫の誕生の真相のようです。

また、くまみねさんは現場猫のコラージュについては自身のブログで触れていたため、気になる方はそちらから確認してみてください

どうもこんにちは くまみねです。

●オリジナルのキャラクターに現場猫のポーズをさせてもいいですか
●あれは現場猫のポーズをとっていましたけど許可しましたか

などの質問を受けたりすることもありますので図を描きました

※ちなみに現場猫のポーズに関して私の許可は不要です
※なぜなら私が考えたものではないからです

kumamine.blogspot.com

資料

現場猫(仕事猫)の元ネタは?【謎の猫の真相に迫る!】 - ゼネコン

【公式】Adobe Illustrator グラフィックデザインの定番ソフト