gif89a編集部(大野 謙介) のすべての投稿

GIFアニメに命を握られてます。GIFアニメみたいな人生を送ってます。
カー用品店タイヤボーイ

Photoshopでタイヤを回転させる方法。「止まりすぎてやばいタイヤ」【GIFアニメの作り方】

執筆:Daily GIF89a編集部(大野謙介)

この記事で理解できること(文章量:3分)

・作業時間15ほどで、Photoshopを用いてバナー広告用のGIFアニメを作ることができる。

 

今回制作したGIFアニメ

カー用品店タイヤボーイ

今回は、Photoshopの「ぼかし(放射状)」を活用して、回転するタイヤの疾走感を表現した。もちろんカーライフサポーター「TYREBOY next」は架空のメーカーである。

 

使用した素材

タイヤ

引用元URL:http://www.pakutaso.com/20140254044post-3823.html

 

 

制作手順

0.今回、タイヤの回転のアニメーションのみを解説する。その他コメントは任意で配置をして欲しい。

10131 class=

1.新規作成で幅を336px、高さを246pxに設定し「OK」を選択する。

10132 class=

2.画像素材をドラッグアンドドロップで読み込み、レイヤーの名前を「タイヤ」に変更した。

10133 class=

3.「タイヤ」レイヤーをコピーして「タイヤ回転1」レイヤーをと名前を変更した。

10134 class=

4.「タイヤ回転1」レイヤーのタイヤ部分を「選択ツール」などで選択し、切り取る。

10135 class=

5.綺麗にタイヤ部分を切り取った「タイヤ回転1」レイヤー3回コピーして、「タイヤ回転2」「タイヤ回転3」「タイヤ回転4」と名前を変更する。その後、全てのレイヤーをグループにまとめる。グループ名は「車」とした。

10136 class=

6.「タイヤ回転1~4」のレイヤーを回転させ疾走感をだしていく。

10137 class=

7.「タイヤ回転4」レイヤーは、「ぼかし(放射状)」の量を「80」として「OK」を選択する。

10138 class=

8.「タイヤ回転3」レイヤーは、「ぼかし(放射状)」の量を「60」として「OK」を選択する。

10139 class=

9.「タイヤ回転2」レイヤーは、「ぼかし(放射状)」の量を「40」として「OK」を選択する。

10140 class=

10.「タイヤ回転1」レイヤーは、「ぼかし(放射状)」の量を「10」として「OK」を選択する。

10141 class=

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

10142 class=

12.フレーム1をコピーする。フレーム1は、車グループをまるごと右に「移動ツール」で移動させる。

10143 class=

13.フレーム2は、車グループをまるごと左に「移動ツール」で移動させる。

10144 class=

14.「トゥイーン」をクリックし、追加するフレームを「3」にして「OK」を選択する。

10145 class=

15.フレーム1を選択し、「タイヤ回転4」レイヤーを表示させる。

10146 class=

16.フレーム2を選択し、「タイヤ回転3」レイヤーを表示させる。

10147 class=

17.フレーム3を選択し、「タイヤ回転2」レイヤーを表示させる。

10148 class=

18.フレーム4を選択し、「タイヤ回転1」レイヤーを表示させる。

10149 class=

19.フレーム5を選択し、「タイヤ」レイヤーをのみを表示させる。

10150 class=

20.今回文字を表示させたりすることで最終的に20フレームのGIFアニメーションとなった。

10151 class=

完成したGIFアニメ

カー用品店タイヤボーイ

 

制作を終えて

今回は、Photoshopのぼかし(放射状)を活用して、回転の躍動感を描写した。TYREBOY nextで今年の冬は安心である。

 

 

執筆:Daily GIF89a編集部(大野謙介)

 

【GIFMAGAZINE】http://gifmagazine.net/

GIFアニメ好きのためのGIF作品投稿・共有プラットフォーム

GIFMAGAZINE_appstore_googleplay

 

GIFMAGAZINEアプリ版のダウンロードはこちら

 

android appstore
iOS:https://itunes.apple.com/ja/app/gifmagazine-animated-gif-magazine/id734489230?l=ja&mt=8
Android:https://play.google.com/store/apps/details?id=jp.createbox.gifmagazine

コーヒー

Photoshopで簡単に湯気を描く。幻の悟李羅珈琲(ゴリラコーヒー)はいずこ。【GIFアニメバナー制作】

執筆:Daily GIF89a編集部(大野謙介)

この記事で理解できること(文章量:3分)

・作業時間15分ほどで、Photoshopを用いてGIFアニメを作ることができる。

・食品など特有の湯気表現でのアニメーションバナー広告制作を理解することができる。

 

今回制作したGIFアニメ

GORILLAコーヒー

バナー制作にも生かせるよう、サイズは横336px、縦246pxで制作した。架空のコーヒー店「悟李羅珈琲」極上の珈琲。それにしても湯気が出すぎである。

 

使用した素材

コーヒー

引用元URL:http://www.pakutaso.com/20121241363post-2284.html

 

制作手順

1.画像を読み込む

10051 class=

2.新規レイヤーを作成、新しいレイヤーをクリックして選択する。

10052 class=

3.描画モードをスクリーンに変更する。

10053 class=

3−2塗りつぶしツールでレイヤーを白く塗りつぶす

10054 class=

4.レイヤー2に「フィルター」「描画」「雲模様1」を選択する。

10055 class=

5.このように、全体に湯気が発生する。

10056 class=

6.湯気をゆらゆらとした波状変えるため、「フィルター」「変形」「波形」を選択する。

10057 class=

7.スライダーを任意の数値に変更する。各数値は下図を参考にしていただきたい。

10058 class=

8.湯気の範囲をしていするため、「なげわツール」を選択する。

10059 class=

9.コーヒーカップの液面から上部を投げ輪ツールで選択する。

10060 class=

10.レイヤーマスクを選択し、不透明度を80_にし、湯気っぽさを出す。

10061 class=

11.アニメーションさせるため、湯気レイヤーを2回コピーした。名前を湯気1、湯気2、湯気3とした。

10062 class=

12湯気1レイヤーは不透明度80

10063 class=

13.湯気2レイヤーは不透明度0_

10064 class=

14.湯気3レイヤーは不透明度80_

10065 class=

15.「ウィンドウ」「アニメーション」を選択し、アニメーションウィンドウを表示させる。

10066 class=

15−2.フレームのコピーをクリックし、2番めのフレームを選択する。

10067 class=

16.2フレーム目湯気1レイヤーは不透明度を0_にし、フレーム1の湯気1レイヤーから「移動ツール」を用いて、上に移動させる。

10068 class=

17.湯気2レイヤーはまた発生する湯気を表現するため、不透明度を70_にする。

10069 class=

18.湯気3レイヤーはそのまま不透明度を80_にする。湯気が途切れたように見せないためである。

10070 class=

19.トゥイーンボタンを選択する。

10071 class=

20.「前のフレーム」で「5」フレームを追加する。「OK」を選択

10072 class=

21.このように合計7フレームのアニメーションになる。

10073 class=

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

10074 class=

23.保存形式を「GIF」にして保存

10075 class=

24.完成版には、文字を見やすくするため、「イメージ」「色調補正」「色相・彩度」を選択し、「明度」を「-30」にした。

10076 class=

完成したGIFアニメ

GORILLAコーヒー
訪れてみたいものだ。幻の悟李羅珈琲はいずこ。

 

制作を終えて

いかがだったろうか。架空の珈琲ショップであるが、その他ブログやWEBサイトに独自のバナーを制作してみてはいかがだろうか。

 

執筆:Daily GIF89a編集部(大野謙介)

 

【GIFMAGAZINE】http://gifmagazine.net/

GIFアニメ好きのためのGIF作品投稿・共有プラットフォーム

GIFMAGAZINE_appstore_googleplay

 

GIFMAGAZINEアプリ版のダウンロードはこちら

 

android appstore
iOS:https://itunes.apple.com/ja/app/gifmagazine-animated-gif-magazine/id734489230?l=ja&mt=8
Android:https://play.google.com/store/apps/details?id=jp.createbox.gifmagazine

【やはりGIF時代到来】Youtubeが公式に動画をGIF変換する機能を試験的にリリース

【GIF時代再び。】Youtube公式が動画のGIF変換機能を試験的にリリース

original 【GIF時代再び。】Youtube公式が動画のGIF変換機能を試験的にリリース

posted by razokulover to GIFMAGAZINE

「PBS Idea Channel’s」のチャンネル限定で試験的に動画をGIF変換する機能を公開

YoutubeがPBS Idea Channel’sのチャンネル限定で動画をGIFアニメに変換する機能を試験的にリリースした。PBS Idea Channel’sにアクセスした後、任意の動画を選択する。その後の変換手順は以下のとおり

【やはりGIF時代到来】Youtubeが公式に動画をGIF変換する機能を試験的にリリース

1.動画下部の「共有」を選択する。

2.「GIF」を選択する。

3.スライダーを動かし任意の場所を選ぶ※最大6秒間

4.「GIFの作成」を選択し終了

ポイント

・埋込コードが発行されるので、コピーして、ブログ等に貼り付けることができる。
・GIF内の上部、下部に文字を入れることができる。

2014年さらに大きく盛り上がりを見せたGIFアニメ系サービス

gifmagazine&giphy

2014年はGIFアニメが盛上がった。GIFMAGAZINE&GIPHY

2014年はGIFの年であった。GIFアニメ作品の投稿・共有・検索サービスのGIFMAGAZINE(ジフマガジン)が、2014年6月にFacebook、TwitterでGIFアニメを動いたまま投稿可能にし、GIFの検索エンジンGIPHYの盛り上がり、Twitter公式のGIF対応(MP4に変換して投稿)、pixivのうごイラ、そして年末最後にYoutubeが動画のGIF変換機能を試験的に開始した。

2011年スマートフォンの普及を期に「gif」の検索ボリュームはV字回復か

Googleトレンドによる「gif」の検索ボリューム

「gif」の検索ボリューム推移(2004年~2014年) 出典:Googleトレンド 2014年12月12日16:00時点

モバイルコンテンツの閲覧環境は、トイレでの1分間や、移動中の1分間など、わんこそばのようにぶつ切りでやってくる。また、PCのように通信環境が常に良いとは限らない。その環境下において、GIFアニメは長すぎると重くなりストレスとなる欠点はある。しかし、記事中に差し込こむなど、1秒〜2秒の短時間で用いる場合は、短編、ループ、クリックレスというGIFの3つの性質がうまく効いてくるのではないだろうか。モバイルのコンテンツ閲覧において文を読みながら、タップせずに動くコンテンツ(GIF)が展開されるので、非常にシームレスでストレスの無い閲覧体験になる。スマートフォンの普及が1987年に作られた”GIF”を再復興させている理由なのではないだろうか。2015年もモバイルデバイスの進化と共に、GIFアニメに期待である。

【関連リンク】
PBS Idea Channel:https://www.youtube.com/channel/UC3LqW4ijMoENQ2Wv17ZrFJA
GIPHY:http://giphy.com/
GIFMAGAZINE:http://gifmagazine.net/

木材の質感が温かい。幻想的なモーショングラフィックス作品[Life Cycles]

木材の質感が温かい。幻想的なモーショングラフィックス作品[Life Cycles]

original 木材の質感が温かい。幻想的なモーショングラフィックス作品[Life Cycles]

posted by gif89a to GIFMAGAZINE

アルゼンチンのブエノスアイレスを中心に活動されている、Andres Rosi StudioとKasanaという、デジタルアニメーションや、視覚効果、VFXに特化したスタジオの共同制作作品をご紹介しよう。作品名は「Life Cycles」。木材の質感が幻想的に舞うモーショングラフィックス作品である。
original 木材の質感が温かい。幻想的なモーショングラフィックス作品[Life Cycles]

posted by gif89a to GIFMAGAZINE

Andres Rosi氏はブエノスアイレスの大都会を離れ、自然に触れ合うことによるインスピレーションを大切にされているそうだ。元々はMTVネットワークのプロデューサー、アートディレクターとして活躍され、その後、個人的なプロジェクトを開始するために、トップレベルのイラストレーター、3Dアーティスト、モーションデザイナー、プロデューサーを集めAndres Rosi Studioをリードしている。また、Kasanaはモーショングラフィックス&視覚効果に特化したチームで、米国市場向けに、ハイエンドなテレビ番組や商業映像作品を制作されている。
original 木材の質感が温かい。幻想的なモーショングラフィックス作品[Life Cycles]

posted by gif89a to GIFMAGAZINE

それでは、作品をご覧下さい。

Life Cycles

Life Cycles from Kasana on Vimeo.

【出典】https://vimeo.com/108849278
【関連リンク】http://www.kasana.tv/