PhotoshopPhotoshopPhotoshopでタイヤを回転させる方法。GIF89a編集部この記事で理解できること(文章量:3分)・作業時間15ほどで、Photoshopを用いてバナー広告用のGIFアニメを作ることができる。今回制作したGIFアニメ今回は、Photoshopの「ぼかし(放射状)」を活用して、回転するタイヤの疾走感を表現した。next」は架空のメーカーである。引用元URL:http://www.pakutaso.com/20140254044post-3823.html制作手順0.今回、タイヤの回転のアニメーションのみを解説する。その他コメントは任意で配置をして欲しい。1.新規作成で幅を336px、高さを246pxに設定し「OK」を選択する。2.画像素材をドラッグアンドドロップで読み込み、レイヤーの名前を「タイヤ」に変更した。3.「タイヤ」レイヤーをコピーして「タイヤ回転1」レイヤーをと名前を変更した。4.「タイヤ回転1」レイヤーのタイヤ部分を「選択ツール」などで選択し、切り取る。5.綺麗にタイヤ部分を切り取った「タイヤ回転1」レイヤー3回コピーして、「タイヤ回転2」「タイヤ回転3」「タイヤ回転4」と名前を変更する。その後、全てのレイヤーをグループにまとめる。グループ名は「車」とした。6.「タイヤ回転1~4」のレイヤーを回転させ疾走感をだしていく。7.「タイヤ回転4」レイヤーは、「ぼかし(放射状)」の量を「80」として「OK」を選択する。8.「タイヤ回転3」レイヤーは、「ぼかし(放射状)」の量を「60」として「OK」を選択する。9.「タイヤ回転2」レイヤーは、「ぼかし(放射状)」の量を「40」として「OK」を選択する。10.「タイヤ回転1」レイヤーは、「ぼかし(放射状)」の量を「10」として「OK」を選択する。11.「ウィンドウ」「アニメーション」を選択する。12.フレーム1をコピーする。フレーム1は、車グループをまるごと右に「移動ツール」で移動させる。13.フレーム2は、車グループをまるごと左に「移動ツール」で移動させる。14.「トゥイーン」をクリックし、追加するフレームを「3」にして「OK」を選択する。15.フレーム1を選択し、「タイヤ回転4」レイヤーを表示させる。16.フレーム2を選択し、「タイヤ回転3」レイヤーを表示させる。17.フレーム3を選択し、「タイヤ回転2」レイヤーを表示させる。18.フレーム4を選択し、「タイヤ回転1」レイヤーを表示させる。19.フレーム5を選択し、「タイヤ」レイヤーをのみを表示させる。20.今回文字を表示させたりすることで最終的に20フレームのGIFアニメーションとなった。完成したGIFアニメ制作を終えて今回は、Photoshopのぼかし(放射状)を活用して、回転の躍動感を描写した。nextで今年の冬は安心である。【GIFMAGAZINE】http://gifmagazine.net/GIFアニメ好きのためのGIF作品投稿・共有プラットフォームGIFMAGAZINEアプリ版のダウンロードはこちらiOS:https://itunes.apple.com/ja/app/gifmagazine-animated-gif-magazine/id734489230?l=ja&mt=8Android:https://play.google.com/store/apps/details?id=jp.createbox.gifmagazinegifぼかしタイヤ作り方回転PhotoshopPhotoshopで簡単に湯気を描く。幻の悟李羅珈琲(ゴリラコーヒー)はいずこ。GIF89a編集部この記事で理解できること(文章量:3分)・作業時間15分ほどで、Photoshopを用いてGIFアニメを作ることができる。・食品など特有の湯気表現でのアニメーションバナー広告制作を理解することができる。今回制作したGIFアニメバナー制作にも生かせるよう、サイズは横336px、縦246pxで制作した。それにしても湯気が出すぎである。引用元URL:http://www.pakutaso.com/20121241363post-2284.html制作手順1.画像を読み込む2.新規レイヤーを作成、新しいレイヤーをクリックして選択する。3.描画モードをスクリーンに変更する。5.このように、全体に湯気が発生する。7.スライダーを任意の数値に変更する。各数値は下図を参考にしていただきたい。8.湯気の範囲をしていするため、「なげわツール」を選択する。9.コーヒーカップの液面から上部を投げ輪ツールで選択する。10.レイヤーマスクを選択し、不透明度を80_にし、湯気っぽさを出す。11.アニメーションさせるため、湯気レイヤーを2回コピーした。名前を湯気1、湯気2、湯気3とした。12湯気1レイヤーは不透明度8013.湯気2レイヤーは不透明度0_14.湯気3レイヤーは不透明度80_15.「ウィンドウ」「アニメーション」を選択し、アニメーションウィンドウを表示させる。15−2.フレームのコピーをクリックし、2番めのフレームを選択する。16.2フレーム目湯気1レイヤーは不透明度を0_にし、フレーム1の湯気1レイヤーから「移動ツール」を用いて、上に移動させる。17.湯気2レイヤーはまた発生する湯気を表現するため、不透明度を70_にする。18.湯気3レイヤーはそのまま不透明度を80_にする。湯気が途切れたように見せないためである。19.トゥイーンボタンを選択する。20.「前のフレーム」で「5」フレームを追加する。「OK」を選択21.このように合計7フレームのアニメーションになる。22.「ファイル」「Webおよびデバイス用に保存」を選択する。選択し、「明度」を「-30」にした。完成したGIFアニメ訪れてみたいものだ。幻の悟李羅珈琲はいずこ。制作を終えていかがだったろうか。架空の珈琲ショップであるが、その他ブログやWEBサイトに独自のバナーを制作してみてはいかがだろうか。【この記事で理解できること】(文章量:3分)・作業時間10分で手書きのアニメーションを作成することができます。・写真を自由自在に動かせる「Photoshopパペットワープ機能」の使い方を理解できます。パペットワープ機能でこのように写真を自由に動かすアニメーションが作成できます。鉄拳氏ような手書きのパラパラ漫画を作成したいと思ったことは無いだろうか。ここまでのフレーム数を描ききるのは並みの体力と技術ではできないであろう。楽して感動を得ようなど世の中甘くないのである。今回は世の中を甘くする方法を解説する。手描きのパラパラ漫画を作成してみたいという方も多いはずだ。今回は、Photoshopのパペットワープという機能を用いて、写真1枚で、絵がどれだけ下手でも作成できるパラパラ漫画GIFアニメの作り方をご紹介したい。作業時間は10分ほどで、動きのあるアニメーションを作成することができる。・カメラ・Photoshop(CS5以上の環境ならパペットワープ機能を使うことができる。)【撮影した素材】こちらからダウンロードしてください。【作成手順】1.紙と鉛筆とカメラとPhotoshopを準備する。2.紙に人の絵を描く。3.Photoshopに取り込む4.人を選択ツール等で切り抜く5.人レイヤーをコピーして貼り付ける6.背景レイヤーを選択し、矩形選択ツールで人型部分を選択し、右クリックで「塗りつぶし」を選択する。7.「コンテンツに応じる」を選択し、「OK」を押す8.綺麗に塗りつぶすことができたことを確認9.なめらかなジャンプにするため人レイヤーを3回コピーする10.「編集」「パペットワープ」を選択する11.人レイヤーをクリックするとピンが打てるようになる12.関節にピンを打つことで人間らしい動きが表現できる。しゃがんだ人になるようピンを打ちドラッグしてこのような形にする。膝の曲げや腕の伸ばしを表現する。17.人-1,2,3,4を移動ツールで任意の高さに配置する。18.人-1,2,3,4をコピーする19.コピーしたレイヤーを並べ替える。20.「ウィンドウ」「アニメーション」でアニメーションウィンドウを起動する。21.1フレームごとに下からレイヤーを表示、非表示を選択してジャンプしているようにする22.全8フレーム分繰り返す23.「ファイル」「Webおよびデバイス用に保存」をクリックする。【完成:いつかは鉄拳。パペットワープで手書きパラパラ漫画GIFアニメが作成できた。】いかがだっただろうか。手書きの絵に自信がない方も多いはずだ、ぜひPhotoshopのパペットワープを用いて手書きパラパラ漫画を作成して友達に自慢してみてはいかがだろうか。TVで流してみてはどうだろうか。多くの方の創造性が発揮されるきっかけとなれば幸いだ。GIF89aPhotoshopで、もともとあるGIF画像から透過GIF画像を作成してみよう。透過GIFとは背景を透明にしたGIFである。以下に詳しい説明を引用させていただいた。GIF形式の一種で、特定の1色を透明に設定したもの。画像を重ねて表示するときに、背景を透明にして画像の継ぎ目を目立たせないようにするために使われる。Webページ上の画像に使用すると、透過色として設定した部分は、背景の色や画像が透けて見える。透明GIFと呼ぶこともある。引用:kotobank透過GIFを最もうまく活用したWEBサービスをご紹介しよう。背景の上に、透過GIFを自由に配置することで非常に面白いサービスに仕上がっている。Party今回、透過GIFにするGIFアニメはこちら。GIFMAGAZINE1.透過GIFにしたい画像を読み込む2.選択ツールなどでカンガルーを選択する。3.レイヤーマスクを適用する。4.optionボタンを押しながらドラッグして全てのレイヤーにマスクをかける5.ファイル、WEB用に保存を選択6.保存形式をGIFにする。7.Photoshopで作成し、完成した透過GIF終わりにいかがだったろうか、透過GIFを制作することはできただろうか。背景を透明にするだけで、WEBサイトやその他表現の場で活用ができる透過GIF。覚えておいて損はないだろう。GIF89a編集部かわいい&おもしろ猫GIF画像がお好きな方はこちらも合わせてご覧ください。国内外の自主制作映画・アニメ・映像制作やGIF画像・情報を配信する、クリエイターのためのアート系メディア。