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

カー用品店タイヤボーイ

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アニメーション

「手書きパラパラ漫画を楽して作りたい!」【Photoshopパペットワープ機能の使い方】

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

パペットワープで作る鉄拳風GIFアニメーション

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

・作業時間10分で手書きのアニメーションを作成することができます。

・写真を自由自在に動かせる「Photoshopパペットワープ機能」の使い方を理解できます。

パペットワープ機能でこのように写真を自由に動かすアニメーションが作成できます。(バルタン星人をこっそりなぐるウルトラマン)

 

【鉄拳のような手書きパラパラ漫画を楽して作りたい!】

鉄拳氏ような手書きのパラパラ漫画を作成したいと思ったことは無いだろうか。

ここまでのフレーム数を描ききるのは並みの体力と技術ではできないであろう。楽して感動を得ようなど世の中甘くないのである。しかし、今回は世の中を甘くする方法を解説する。手描きのパラパラ漫画を作成してみたいという方も多いはずだ。今回は、Photoshopのパペットワープという機能を用いて、写真1枚で、絵がどれだけ下手でも作成できるパラパラ漫画GIFアニメの作り方をご紹介したい。作業時間は10分ほどで、動きのあるアニメーションを作成することができる。

【用意するもの】

・紙

・鉛筆

・カメラ

・Photoshop(CS5以上の環境ならパペットワープ機能を使うことができる。)

 

【撮影した素材】

こちらからダウンロードしてください。

正面を向いた人型の絵をphotoshopに読み込んでパペットワープで動かす

 

【作成したパラパラ漫画GIFアニメ】

photoshopパペットワープで簡単手書きパラパラ漫画を作る。

 

【作成手順】

1.紙と鉛筆とカメラとPhotoshopを準備する。 紙と鉛筆とカメラで作るパラパラ漫画GIF

 

2.紙に人の絵を描く。

正面を向いた人型の絵をphotoshopに読み込んでパペットワープで動かす

 

3.Photoshopに取り込む

3.Photoshopに取り込む

 

 

4.人を選択ツール等で切り抜く

4.人を選択ツール等で切り抜く

 

5.人レイヤーをコピーして貼り付ける

5.人レイヤーをコピーして貼り付ける

 

 

6.背景レイヤーを選択し、矩形選択ツールで人型部分を選択し、右クリックで「塗りつぶし」を選択する。

6.背景レイヤーを選択し、矩形選択ツールで人型部分を選択し、右クリックで「塗りつぶし」を選択する。

 

7.「コンテンツに応じる」を選択し、「OK」を押す

7.「コンテンツに応じる」を選択し、「OK」を押す

 

8.綺麗に塗りつぶすことができたことを確認

8.綺麗に塗りつぶすことができたことを確認

 

9.なめらかなジャンプにするため人レイヤーを3回コピーする

9.なめらかなジャンプにするため人レイヤーを3回コピーする

 

10.「編集」「パペットワープ」を選択する

10.「編集」「パペットワープ」を選択する

 

11.人レイヤーをクリックするとピンが打てるようになる

11.人レイヤーをクリックするとピンが打てるようになる

 

12.関節にピンを打つことで人間らしい動きが表現できる。

12.関節にピンを打つことで人間らしい動きが表現できる。

 

 

13.人-1 しゃがんだ人になるようピンを打ちドラッグしてこのような形にする。

12.人-1 しゃがんだ人になるようピンを打ちドラッグしてこのような形にする。

 

14.人-2 飛び上がる瞬間のためそのまま

13.人-2 飛び上がる瞬間のためそのまま

 

15.人-3 ジャンプ途中で上がる膝や腕を表現

15.人-3 ジャンプ途中で上がる膝や腕を表現

 

16.人-4 膝の曲げや腕の伸ばしを表現する。

16.人-4 膝の曲げや腕の伸ばしを表現する。

 

17.人-1,2,3,4を移動ツールで任意の高さに配置する。

17.人-1,2,3,4を移動ツールで任意の高さに配置する。

 

18.人-1,2,3,4をコピーする

18.人-1,2,3,4をコピーする

 

19.コピーしたレイヤーを並べ替える。

19.コピーしたレイヤーを並べ替える。

 

 

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

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

 

21.1フレームごとに下からレイヤーを表示、非表示を選択してジャンプしているようにする

21.1フレームごとに下からレイヤーを表示、非表示を選択してジャンプしているようにする

 

22.全8フレーム分繰り返す

22.全8フレーム分繰り返す

 

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

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

 

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

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

 

【完成:いつかは鉄拳。パペットワープで手書きパラパラ漫画GIFアニメが作成できた。】

photoshopパペットワープで簡単手書きパラパラ漫画を作る。

 

いかがだっただろうか。手書きの絵に自信がない方も多いはずだ、ぜひPhotoshopのパペットワープを用いて手書きパラパラ漫画を作成して友達に自慢してみてはいかがだろうか。また作成した作品はGIFMAGAZINEに投稿するなどして、世界中のクリエイターに見てもらったり、GIFMAGAZINE TVで流してみてはどうだろうか。多くの方の創造性が発揮されるきっかけとなれば幸いだ。

 

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

【保存版】透過GIF画像の作り方[Photoshop]

【保存版】透過GIF画像の作り方[Photoshop]

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

【保存版】透過GIF画像の作り方[Photoshop]

Photoshopで、もともとあるGIF画像から透過GIF画像を作成してみよう。

透過GIFとは背景を透明にしたGIFである。以下に詳しい説明を引用させていただいた。

GIF形式の一種で、特定の1色を透明に設定したもの。画像を重ねて表示するときに、背景を透明にして画像の継ぎ目を目立たせないようにするために使われる。たとえば、Webページ上の画像に使用すると、透過色として設定した部分は、背景の色や画像が透けて見える。透明GIFと呼ぶこともある。

引用:kotobank

透過GIFを最もうまく活用したWEBサービスをご紹介しよう。それは「GIF Dance Party」である。背景の上に、透過GIFを自由に配置することで非常に面白いサービスに仕上がっている。

透過GIFを有効活用したGIF Dance Party【保存版】透過GIF画像の作り方[Photoshop]
GIF Dance Party

今回、透過GIFにするGIFアニメはこちら。

via GIFMAGAZINE

 

1.透過GIFにしたい画像を読み込む

 1.透過GIFにしたい画像を読み込む【保存版】透過GIF画像の作り方_Photoshop_

2.選択ツールなどでカンガルーを選択する。

2.選択ツールなどでカンガルーを選択する。【保存版】透過GIF画像の作り方_Photoshop_

3.レイヤーマスクを適用する。

3.レイヤーマスクを適用する。【保存版】透過GIF画像の作り方_Photoshop_

 

4.optionボタンを押しながらドラッグして全てのレイヤーにマスクをかける

4.optionボタンを押しながらドラッグして全てのレイヤーにマスクを×【保存版】透過GIF画像の作り方_Photoshop_

 5.ファイル、WEB用に保存を選択

5.ファイル、WEB用に保存を選択【保存版】透過GIF画像の作り方[Photoshop]

6.保存形式をGIFにする。

6.保存形式をGIFにする。【保存版】透過GIF画像の作り方_Photoshop_

7.Photoshopで作成し、完成した透過GIF

7.完成したGIF【保存版】透過GIF画像の作り方[Photoshop]

終わりに

いかがだったろうか、透過GIFを制作することはできただろうか。背景を透明にするだけで、WEBサイトやその他表現の場で活用ができる透過GIF。覚えておいて損はないだろう。
執筆:Daily GIF89a編集部(大野謙介)

 

かわいい&おもしろ猫GIF画像がお好きな方はこちらも合わせてご覧ください。

バカ猫

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト40第一弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト40第二弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト20第三弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト20第四弾

【GIFまとめ】笑えるおもしろGIF画像ベスト20第1弾!!

 

【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