進捗どうですか?

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

Adobe Photoshop を用いて10分でできる「位置」を操作した簡単なアニメーションGIFの作成方法について説明する。画像素材さえ準備してしまえば10分ほどで完成してしまうので、GIF初心者のあなたも簡単にチャレンジできるのではないだろうか。単純に位置が移動するという表現は様々な発想の源だと思うので、読者もこの方法を用いてどんどんクリエイティブな作品作りに挑戦して欲しい。

 

 

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

弊社でもエンジニアに進捗を伺う時は、細心の優しさを持って。そう、細心の優しさを。
弊社でもエンジニアに進捗を伺う時は、細心の優しさを持って接する。そう、細心の優しさを表現しなければならない。

 

 

 

自分が欲しい物を創りだす。これぞクリエイターの鏡ではなかろうか。弊社には優秀なエンジニアが多数在籍している。彼らは忙しいのだ。そう、忙しいのだ。そんな中、どうしてもクリエイティブの修正やバグの修正等の進捗がどうなったのか気になってしまう。そう気になって眠れないのである。クライアントと板挟みの営業がエンジニアやデザイナーに最も聴きやすい状況を創りだすには。。

 

 

 

そう、彼らのコミュニケーションの橋渡しとなるアートが誕生した。

 

 

 

「バカねこ」、その表情からはクライアントから受けた厳しいお叱りを「前向きにチームで打開しよう!」という高い視座、そして大らかで広いこころを表現している。「猫のひたい」とはよく言ったものだ。額の狭さと心の広さを対比的に表現しているのである。そして、それを大きく包むオレンジの光。まるで1秒毎に新年を迎えたような、この高揚感。エンジニア、デザイナーもこれには「賀正。」と高らかに叫ぶであろう。しかし勝負はそこからである。クライアントはお怒りなのである。「進捗どうですか?」と、はんなりフォントで描き、ビジネスとしての厳しさを持って対峙するのである。そんなビジネスの生き様が凝縮されたGIFアートである。

 

 

 

 

【使用した素材】

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

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

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

 

2.夕日の画像

哀愁が漂いすぎてヤバイ夕日の画像。the 黄昏。lalala
哀愁が漂いすぎてやばい夕日の画像。the 黄昏。lalala

http://kurokill.deviantart.com/art/Space-1-256188923

 

 

 

【作成手順】

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

1.キャンパスサイズの設定

 

2.キャンバスが開かれる。300px × 300pxで2MBならtumblrにアップロードも可能だ。 

スクリーンショット 2014-01-15 0.03.11

 

3.用意した夕日の画像をドラッグしてキャンバスにドロップする。

2.素材画像をドラッグアンドドロップ

 

4.宇宙の画像を好みの大きさに拡大し、配置した。

3.適切なサイズにリサイズ

 

5.「選択ツール」で海と山を選択する。

4.夕日と海の断絶

 

6.海と山を切り取る。

5.海の切り取り

 

7.海と山を貼り付ける。

6.海の貼り付け

 

8.夕日とピッタリ合うように「海と山レイヤー」を移動させる。

7.海をいい位置に配置

9.バカねこ画像をドラッグ&ドロップをしてキャンパスに入れる。

8.バカ猫画像をドラッグアンドドロップ

 

10.バカねこのフェイスラインを「選択ツール」で選択する。 

9.バカ猫の顔を選択ツールで選択

 

11.バカねこの顔を切り取り、貼り付ける。

10.バカ猫の顔を切り取り貼り付け

 

12.バカねこの元の背景レイヤーを削除する。

11.バカ猫の背景レイヤーを削除

 

13.「バカねこレイヤー」の順序を「海と山レイヤー」より下にする。

12.バカ猫のレイヤーを海よりしたで夕日よりは上にする

 

14.夕日と馴染むように「バカねこレイヤー」のレイヤーを「輝度」に変える。

13.バカ猫のレイヤーを「輝度」に変更する

 

15.テキストツールで文字を入力し、「レイヤー効果」で境界線を太くする。

14.テキストツールで文字を記述、レイヤー効果で境界線を太く加工する

 

16.「進捗どうですか?レイヤー」と「バカねこレイヤー」をリンクさせる。

15.テキストレイヤーと猫レイヤーをリンクさせる

 

17.リンクさせた「進捗どうですか?バカねこレイヤー」の位置を「海と山レイヤー」に隠れる位置まで移動させる。

16.リンクしたレイヤーの位置を下に移動する。

 

18.「ウィンドウ」の「アニメーションウィンドウ」を起動する。

17.アニメーションのウィンドウを起動する

 

19.アニメーションウィンドウのフレームの間隔を「0.1秒」にする。

18.フレームの間隔を0.1秒にする

 

20.フレームのリピート回数を「無限」にする。

19.フレームのリピート回数を無限にする

 

21.アニメーションウィンドウの現在のフレームを「コピー」する。※アニメーションウィンドウのゴミ箱アイコンの左である。20.アニメーションウィンドウでフレームをコピーする

 

22.コピーしたフレームの「進捗どうですか?バカねこレイヤー」の位置を適切な位置まで移動する。

21コピーしたフレームの猫&テキストレイヤーの位置を適切な位置に移動させる。

 

23.アニメーションウィンドウの「トゥイーン」をクリックし、パラメーターの「位置」にチェックが入っているかを確認し、追加するフレームを「15」にして「OK」をクリックする。

22.アニメーションのトゥイーンをクリックしフレームを15枚追加する。位置パラメータにチェック

 

24. トゥイーンを実施するとこのようになる。

23.トゥイーンの実施後

 

25.バカねこが最上部まで到達した時に余韻を残すために、最後のフレームを5回ほどコピーする。24.余韻を残すために最後のフレームを5回ほどコピー

 

26.バカねこを山と海に沈めるため、最後のフレームの「進捗どうですか?バカねこレイヤー」の位置を適切な位置まで移動する。

25.海に返すために最後のフレームの猫テキストレイヤーの位置を移動させる。

 

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

 

28.保存形式で「GIF」を選択する。

27.GIFを選択

 

29.適切な名前を付けて保存。

28保存

 

 

 

30.完成。

ビジネスはドラマである。
ビジネスはドラマである。

 

 

いかがだったろうか?今回はGIFアニメの作り方だけでなく、そこにストーリーをもたせることにも注力をした。位置を移動するだけでこんなにこじつけられるのである。読者の皆様もあいた10分でGIFアニメ作りに挑戦してみてはいかがだろうか?

 

そしてエンジニア・デザイナーに進捗を確認するときにはこのGIFアニメでコミュニケーションしてみてはいかがだろうか。

 

 

GIFMAGAZINE