タグ別アーカイブ: 作り方

カー用品店タイヤボーイ

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アニメを一瞬で埋め込むChrome拡張機能【Search in a GIFMAGAZINE】

GIF画像検索から記事挿入が効率よくできる無料Chrome拡張

執筆:Daily GIF89a編集部
無料画像素材やアイキャッチ画像検索できるserach-ina-gifmagazine

「イラスト 無料」や「写真素材 アイキャッチ」と素材サイトを検索しているあなたへ

記事を書く際、アイキャッチ画像やイメージ写真を探すのに苦労をしているのではないだろうか。ブログやメールの文中に使う画像や動画動画を見つけるのに非常に苦労しているのではないだろうか。今回は、ブログやメールなどに一瞬でGIFアニメをアイキャッチやイメージ挿絵として挿入(HTMLコードでの埋め込み)ができるchrome拡張機能「search in a GIFMAGAZINE」をご紹介する。

 

GIF画像検索&埋め込み機能「Serch in a GIFMAGAZINE」がリリースされた背景

「Youtubeの埋め込み機能」によって多くのクリエイターの作品がメディアやブログに簡単に紹介でき、クリエイターに還元される仕組みとなった。

GIFMAGAZINEでは多くのGIFアニメクリエイターが自分の作品を投稿するプラットフォームである。youtubeやvine動画をブログにHTMLコードで埋め込めるように、GIFMAGAZINE内の画像クリエイターの作品が挿絵やアイキャッチとして利用された記事内で閲覧され、最終的に参照元のクリエイターのページに戻ってきて作品の閲覧、クリエイターの紹介という形でview数に還元することによって、クリエイターを応援する仕組みを作っている。

 

Search in a GIFMAGAZINEによりブロガーやライターの皆様が記事内のコンテンツを乱すことなくクリエイターの皆様の作品を紹介するという形でクリエイターの皆様に貢献することを目指すようだ。

 

 

 

ブログやメールにGIFアニメを一瞬で埋め込むChrome拡張機能【Search in a GIFMAGAZINE】
このようにドラッグ&ドロップで検索した画像をhtmlコードのまま埋め込むことが可能。[Search in a GIFMAGAZINE]

拡張機能の追加はこちらをクリック【Search in a GIFMAGAZINE】

 

埋め込み用GIFアニメ検索ができるChrome拡張「Search in a GIFMAGAZINE」追加方法手順

1.【Search in a GIFMAGAZINE】にGoogle chromeでアクセスし、右上の「無料」という青いボタンを選択。

ダウンロードリンクはこちら:【Search in a GIFMAGAZINE】

1.【Search in a GIFMAGAZINE】にGoogle chromeでアクセスする。

2.「Search in a GIFMAGAZINE」を追加しますか?で「追加」をクリックする。

2.「Search in a GIFMAGAZINE」を追加しますか?で「追加」をクリックする。

 

 

3.アドレスバーの右にアイコンが追加されたらダウンロード完了。

3.アドレスバーの右にアイコンが追加されたらダウンロード完了。

 

4.Chromeで右上のアイコンをクリックすると、検索フォームが登場し、名詞(色や動物)、動詞(走る・悩む)、形容詞(おもしろ、かわいい)など、状況に応じたGIF画像を検索することができる。

ブログやメールにGIFアニメを一瞬で埋め込むChrome拡張機能【Search in a GIFMAGAZINE】
このようにドラッグ&ドロップで検索した画像をhtmlコードのまま埋め込むことが可能。[Search in a GIFMAGAZINE]

 

 

Search in a GIFMAGAZINEの使い方動画

 

 

GIFMAGAZINEはクリエイターとライター双方にとって創造性が発揮できる仕組みへ

今後は検索精度向上、コンテンツの拡充にもつとめていくようだ。今回の仕組み(search in GIFMAGAZINE)でブロガーやライターの皆様が記事内のコンテンツを乱すことなくクリエイターの皆様の作品を紹介するという形でクリエイターの皆様に貢献する世界ができるのは非常によいことだろう。多くのブロガーの方や、GIFクリエイターの方がそれぞれの創造性を発揮して、良質なコンテンツ(記事・動画)制作できるような仕組みとなるだろう。 

【Search in a GIFMAGAZINE公式ダウンロードリンク】

https://chrome.google.com/webstore/detail/search-in-a-gifmagazine/eophboegjhcgkopdmkibfpcplcjhpemb

 

 

 

執筆:Daily GIF89a編集部