カテゴリー別アーカイブ: Photoshop

After-Effectsの動画をGIF化する方法

After Effectsで作ったこだわり動画をPhotoshopでGIFアニメにする方法【GIFアニメの作り方】

After-Effectsの動画をGIF化する方法

After Effects CS5以降ではGIFアニメをレンダリングすることができない。今回はPhotoshopを用いて、After Effectsで作りこんだ動画をGIF化する方法をご紹介する。要点は以下の3STEPである。

 

STEP1.After Effectsで「QuickTime」mov形式でレンダリングする。

STEP2.Photoshopでレンダリングした「◯◯.mov」のmovファイルを開く。

STEP3.「ファイル」「Webおよびデバイス用に保存」で「GIF」を選んで保存

 

※ちなみにAdobe公式のAfter Effectsヘルプサイトでは以下のように指示がある。 Adobeの公式After Effectsヘルプサイトに記載されたGIFレンダリングができない旨 公式でも同様な作業をおすすめしているようだ。それでは以下に実際の作業を説明する。 【今回作成したGIF】

After-Effectsの動画をGIFアニメ化
After-Effectsの動画をGIFアニメ化

【After Effectsの動画をGIFアニメ化する方法】 1.After Effectsで動画を作成する。1     2.「コンポジション」「レンダーキューに追加」をクリック2     3.「出力モジュール」をクリックし、形式を「QuickTime」にする。今回はtumblrやGIFMAGAZINEにアップロードしやすいように横幅を400pxに変更した。3     4.出力先を指定し、「レンダリング」をクリックし、レンダリングを開始する。4     5.Photoshopを起動する。Photoshopを起動する。     6.Photoshopで「ファイル」「開く」をクリック。
18
        7.先ほどのmovファイルをクリックする。5   8.movファイルを開くとこのようになる。スクリーンショット 2014-02-23 23.47.43   9.「ファイル」「Webおよびデバイス用に保存」をクリックする。 20     10.「GIF」、「アニメーションのループオプション」を【一度】か【無限】を選択し、保存を押す。 21     11.任意の名前を付けて保存する。22     12.完成

After-Effectsの動画をGIFアニメ化
After-Effectsの動画をGIFアニメ化

いかがだったであろうか。After Effectsで非常に高度な動画作成しているユーザーは多いだろう。今回のような簡単な方法で今まで作成した動画をGIFにして遊ぶことができる。ぜひPhotoshopをもちいてGIFライフを楽しんでもらいたい。

バカ猫

【衝撃】あえて読込時間をイライラさせるローディングGIFを作成してみた。【GIFアニメの作り方】

 今回はphotoshopを使い5分でローディングGIFを作成する。ローディングGIFとは画像の読込時間での離脱を防ぐ。UXを研究しつくした先人の知恵である。グルグル回る画像を見るだけで数秒の時を忘れることができる。

ローディングのイライラを軽減。
ローディングのイライラを軽減。

 

今回はあえて読込時間をイライラさせるローディングGIFを作成する。時代逆行の革新的なUXである。挑戦的なその試みは新たな芸術を確立する人間の営みのそれと何ら変わりはないのである。時代が早すぎてついていけない挑戦的なその試みは死んでから認められる芸術家さながらである。近代芸術家に入るゴッホはきっと、評価されようがされまいが関係なかったのである。「芸術家」は自分が描きたいから、自分のために描く。貴族や教会に評価されることが至高ではない。高尚で利己的な精神がそこにある。他人の評価は副産物でしかない。そんな深い意味がこのGIFにあったかは定かではない。

 

【使用した素材】

以前、ぜんぶ雪のせいだ。Photoshopで10分、簡単GIFアニメの作り方【位置&透明度テクニック】こちらの記事で使用したバカ猫を用いる。

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

 

 

これでもかとイライラさせる表情である。

バカ猫
むき出しの目玉は乾燥を続ける。

 

 

【作成手順】

1.「ファイル」「新規作成」でキャンパスサイズを2000px * 2000pxで作成した。そう、サイズがでかいのである。読込時間をあえてたっぷりとる。それがイライラの源泉である。

スクリーンショット 2014-02-22 8.27.18

 

 

2.キャンバスにバカ猫をドロップする。むき出しの白目。すでにイラっとしたのではなかろうか。2

 

3.レイヤーをコピーした。2匹のバカ猫が見つめるその先は……白目だから見つめてはいないのである。

3

 

 

4.下側のバカ猫を「編集」「変形」「180°回転」で回転させる。そう、仮に逆立ちをして閲覧するユーザーのため、きちんと逆さまにも対応するのである。素晴らしきUXである。4

 

 

5.2つのレイヤーを結合する。そう、バカ猫2匹を融合するのである。5

 

 

6.結合完了である。6

 

 

7.バカ猫×2レイヤーを3回コピーする。7

 

 

8.移動ツール(v)でレイヤーの角をつかんで回転させる。さながら分身の術である。伊賀の忍者気取りだ。8

 

 

9.コピーしたレイヤーを全て回転させて、8方向全てにバカ猫を配置した。どこから来ても安心のイライラ度である。9

 

 

10.背景を削除した。この作業は単純に忘れていただけである。
10

 

 

11.全てのバカ猫レイヤーを結合する。魔法陣の完成である。11

 

 

12.「レイヤー効果」をクリックする。

13

 

 

13.「グラデーションオーバーレイ」「グラデーション」をクリックする。バカ猫が見えなくなるひとときである。14

 

 

14.「描画色から透明に」をクリックする。8匹のバカ猫が見え隠れする絶妙な演出である。15

 

 

15.黒よりも白である。16

 

 

16.このバカ猫魔法陣レイヤーを7回コピーする。19

 

 

17.全てのレイヤーのグラデーションの角度を変更する。レイヤーごとに45°ずつ角度を変えることで、全てのバカ猫に平等に閲覧者をイライラさせるのである。「0°、45°、90°、135°、180°、225°、270°、315°、360°」18

 

 

18.「ウィンドウ」「アニメーション」でアニメーションウィンドウを表示させる。
22

 

 

19.一番下のレイヤーだけを残してそれ以外を「非表示」にする。目玉のボタンをクリックすればいい。25

 

 

 

20.アニメーションウィンドウでフレームをコピーする。
23

 

 

21.今度は2番めのレイヤーを「表示」させ、1番目のレイヤーを「非表示」にする。

24

 

 

22.それを7回繰り返す。そう7回である。
27

 

 

23.これで平等にチャンスがやってくる。むき出しの白目は乾燥しっぱなしである。28

 

 

24.完成。 

イライラするローディング
むき出しの白目はあなたの心をより一層イライラさせる。そうUXのイノベーションの誕生である。革新的なローディングGIF

 

 

いかがだったろうか?今回はあえて読込時間をイライラさせるローディングGIFを作成した。読者の皆様も独自のローディングGIFの作成に勤しんでみてはいかがだろうか。さらなるイライラに今後も挑戦をしていく。ご期待を。

 

ローディングGIFの作り方photoshop

Photoshopで5分、ローディングGIFを自作する簡単な方法【GIFアニメ作り方】

 今回はphotoshopを使い5分でローディングGIFを作成する。そう、画像読み込み中のくるくるする、あれである。ローディング画像を生成するジェネレーターなどのWEBサービスは改めてご紹介する。今回は可能な限り簡易で応用が聞くような解説になれば幸いである。WEBサービスのイメージを特徴つけるローディング中のグルグルで遊んでみてはいかがだろうか。

 

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

ローディングのイライラを軽減。
ローディングのイライラを軽減。

【使用した素材】 今回、画像素材は用いなかった。  

 

 

【作成手順】 1.「ファイル」「新規作成」でキャンパスを作成する。今回は200px * 200px とした。 1

 

 

2.楕円形選択ツールで適当な位置に円を描いた。このとき「Shift」を押しながら正円を描いた。 ※作業がしやすいようにグリッドを引いてある。 2

 

3.「塗りつぶしツール」で任意の色で塗りつぶす。3

 

4.現在のレイヤーをコピーし、「移動ツール(v)」で円形の反対側に配置する。 4

 

5.作成したレイヤー2つを「下のレイヤーと結合」で結合する。 5

 

6.結合が完了した。   6

 

7.レイヤーを3回コピーする。7

 

8.「移動ツール(v)」でレイヤーの端をクリックして回転させる。「Shift」を押しながら回転するときれいに配置できる。8

 

9.同様に次のレイヤーを回転させる。9

 

10.さらに次のレイヤーを移動させる。10

 

11.全てのレイヤーを「表示レイヤーを結合」で結合する。11

 

12.レイヤーを右クリックし、「レイヤー効果」を選択する。12

 

13.「グラデーションオーバーレイ」を選択し、「グラデーション」の項目をクリックする。13

 

14.「描画色から透明に」を選択し、「OK」をクリックする。14

 

15.それらしいものができた。後は回転させるだけである。 15

 

16.レイヤーを7回コピーする。 18

 

17,一番下のレイヤーを選択し、「レイヤー効果」「グラデーションオーバーレイ」の「角度」を「0°」にし「OK」を選択する。 上のレイヤーを順々に選択し、残りの7枚のレイヤーそれぞれの「角度」を45,90,135,180,225,270,315,360にする。

16

18.一番下のレイヤー以外を「非表示」にする。※目玉のマークをなくす。

17

19.「ウィンドウ」「アニメーション」を選択する。

20.アニメーションウィンドウが表示される。アニメーションウィンドウのフレームをコピーする。

20

21.コピーしたフレームを選択し、表示するレイヤーを下から2番めにする。21

22.またフレームをコピーし、今度は3番目のレイヤーが表示になるようにする。

22

23.8フレーム分それを繰り返す。24

24.「ファイル」「Webおよびデバイス用に保存」を選択する。25

25.「GIF」を選択し、「保存」をクリックする。26

26.完成

ローディングのイライラを軽減。
ローディングのイライラを軽減。

  いかがだったろうか?ローディング画像はそのWEBサイトやサービスのキャラクターを色づけるものである。ぜひ独自のローディング画像を作成してみてはいかがだろうか。次回はローディング画像本来の目的である「ロード中にイライラさせない」を根本から覆す、いらいらさせるローディングGIFを作成する。ぜひお待ちいただきたい。

イライラするローディング
そう、イライラさせる革新的なローディングGIFである。
ぜんぶ雪のせいだ。

ぜんぶ雪のせいだ。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アニメ作りに挑戦してみてはいかがだろうか?

 

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