ぜんぶ雪のせいだ。

ぜんぶ雪のせいだ。Photoshopで10分、簡単GIFアニメの作り方【位置&透明度テクニック】

Adobe Photoshop を用いて10分でできる「位置&透明度」を操作した簡単なアニメーションGIFの作成方法について説明する。本内容は前回のPhotoshopで作るGIF作成方法のテクニックを用いたものになる。

1.Photoshopで10分、ハイクオリティGIFアニメの作り方【不透明度テクニック】

2.進捗どうですか?Photoshopで10分、GIFアニメの作り方【位置テクニック】

ご一読頂ければ幸いである。

 

今回のテーマは

JR SKISKIの広告。川口春奈の透明感に吸い込まれてしまいそうだ。

 

山手線に乗れば毎日、目にするであろう、この広告のイメージをお借りしながら、冬の切なさや雪の儚さ、そして、すべて雪のせいにしてしまうこの他責な姿勢。ゆとり世代とはよく言ったものだ。そう、雪のせいにしてしまえばいいのだ。そう、雪のせいに。そんな淡い恋心をGIFで表現をしてみた。

 

 

今回作成したGIFはこちら。

JRのパロディ。ぜんぶ雪のせいだのGIF
そう、ぜんぶ雪のせいにしてしまえばいいのだ。

 

「バカねこ」、その表情からはワンナイトラブですら気にしない、大らかで広いこころを表現している。わずかに口元からのぞく真っ赤な舌は「てへぺろ」よろしく。いたずら子猫そのものである。だまされた貴方が悪いのである。しかし貴方のせいではない。そう、

 

ぜんぶ雪のせいだ。

 

そんな雪も溶けるゲレンデの情事が凝縮されたGIFアートである。

 

 

 

 

【使用した素材】

1.猫の画像(tumblrで最もおばかな表情をした猫の画像をお借りした。)

これでもかというバカな顔の猫。
これでもかというバカな顔の猫。

http://funny-gifs-animated-gif-creator.tumblr.com/post/72077147099/gifmagazine-would-it-be-fantastic-to-experience

こちらの画像の猫の顔の部分のみを用いるので、ご自身で猫の画像をお持ちの場合はそちらを用いても構わない。また、前回の記事、2.進捗どうですか?Photoshopで10分、GIFアニメの作り方【位置テクニック】にて作成したPSDファイルをお持ちの場合は、そちらのレイヤーを複製する形で作成するといいだろう。

 

 

 

【作成手順】

1.photoshopを起動、「ファイル」、「新規」で幅400px、高さ300pxでキャンバスを作成する。

1.キャンバスの設定

 

2.キャンパスを用意できた。

2.キャンバスの確保

 

3.前回のPSDファイルもしくは、新たな画像素材を用意する。今回は前回の記事のPSDファイルのレイヤーをそのまま流用する。

3.前回のPSDファイルを開く

 

4.猫レイヤーを「複製」する。

4.猫の顔のレイヤーだけを複製する。

 

5.先ほど作成した400*300のドキュメントを選択し、「OK」を押す

5.今回のキャンバスを選んでOK

 

 

6.元のキャンバスに戻ると猫レイヤーが複製されている。

6.猫の顔のレイヤーが複製された。

 

 

7.猫レイヤーを適切なサイズにリサイズする。今回は右側にテキストを表示させるので右のスペースを若干開けた。7.適切なサイズに拡大した。

 

 

8.猫に冬の雰囲気を加えるために「フィルター」「アーティスティック」「粒状フィルム」を選択した。

8.雪の切なさを表現するために、フィルターをかけた

 

 

9.粒状フィルムで「OK」を押す。9.粒状フィルター

 

 

10.フィルムをかけるとこのような形になる。なんとも冬らしい。10.フィルター後

 

 

11.背景をつくる。なじませるために「スポイトツール」で猫レイヤの水色を吸い出し、背景を塗りつぶした。11.背景レイヤを色をあわせる

 

12.テキストを入力した。元のJR広告のフォントに近づけるためにフォントは「小塚ゴシック Pr6N」、フォントサイズは「28pt」、「斜体」にした。

12.テキストを入力

 

 

13.テキストが猫に埋もれてしまうため、「レイヤー効果」「境界線」を施す。13.レイヤー効果

 

 

14.境界線の色は「白」、サイズは「1px」に設定し、「OK」をクリックした。14.境界線

 

 

15.ベースの画像が完成した。15.レイヤー効果後

 

比較のために元の作品はこちら。

16.本家都の比較

 

不透明度を50%にするとフォントはぴったり同じ雰囲気である。

17.フォントがほぼ一緒

 

【GIF作成】

18.ベースが完成

 

16.猫レイヤーを右はじに、テキストレイヤーの不透明度を0%にする。

19.画面外に移動、テキストの不透明度を0%に

 

 

17.アニメーションウィンドウを開く。20.アニメーションウィンドウを起動

 

 

18.レイヤーにグリッドを引く。ウィンドウの端のルーラーのところを右にドラッグすると表示できる。右から現れたレイヤーがピタッととまるのではなく、ゆったりと2段階で停止するためにグリッドを引いた。
21.グリッドを入れる

 

 

19.さっそくフレームをコピーし、右端にいた猫レイヤーを左に移動させ、以下の画像の当たりまで動かし、アニメーションウィンドウのトゥイーンをクリックし、「追加するフレーム」を10で、「パラメーター」に「位置」がチェックされていることを確認し、「OK」をクリックする。22.猫レイヤーを移動させトゥイーンさせる

 

 

20.更に猫レイヤーを左に移動させトゥイーンさせる。追加するフレームは「10」23.スムーズに止めるために2段階でトゥイーンさせる

 

21.テキストレイヤーの不透明度を「100%」にし、トゥイーンをさせる。追加するフレームは「10」25.複数回コピーをして余韻をだす。

 

 

 

22.猫レイヤーを左端に移動させる。好みになるが、今回は文字レイヤーを2段階で中心まで移動させてトゥイーンさせた。26.猫レイヤーを左はじに追い出す

 

 

 

23.テキストレイヤーを中心に移動させトゥイーンが終了した。27.文字レイヤーを2段階で中心に移動させる。

 

 

 

24.余韻をのこすために、複数回フレームをコピーした。
28.複数回コピーをする

 

 

25.テキストレイヤーの不透明度を「0%」にし、トゥイーンさせ、徐々にきえるようにした。29.文字レイヤーの不透明度を0%にして画面からふわっと消す。

 

26.「ファイル」、「Webおよびデバイス用に保存」をクリック30WEBデバイス用に保存

 

 

27.GIFを選択し「保存」をクリック31GIF用に保存

 

 

28.適切な名前をつけ保存をする。32適切な名前を付けて完成

 

 

完成

JRのパロディ。ぜんぶ雪のせいだのGIF
そう、ぜんぶ雪のせいにしてしまえばいいのだ。

 

 

いかがだったろうか?読者の皆様もあいた10分でGIFアニメ作りに挑戦してみてはいかがだろうか?

 

退屈な通勤時間。山手線に乗りながら、つまらないのは、ぜんぶ雪のせいにしてはいかがだろう。 

 

GIFMAGAZINE