タグ別アーカイブ: photoshop

cindy suen氏の作品は可愛さ、ポップさが非常に伝わってくる。独特のキャラクターで描かれるGIFの世界感は他の3DGIFアーティストとは一線を画している。氏が作った最初のGIFは2012年10月、自身のウェブサイトのためのロゴだったようだ。adobeのPhotoshopを用いられて作られたその作品はGIFのキッチュさとループの楽しさを存分に発揮している作品と言えよう。力を抜いて、楽しむのはいかがだろうか。

[tumblr]

http://cindysuen.tumblr.com/

Photoshop

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

2014年9月4日 gif89a編集部(大野謙介) コメントをどうぞ

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

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

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

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

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

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

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

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

【用意するもの】

・紙

・鉛筆

・カメラ

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

【撮影した素材】

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

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

【作成手順】

１．紙と鉛筆とカメラとPhotoshopを準備する。

２．紙に人の絵を描く。

３．Photoshopに取り込む

４．人を選択ツール等で切り抜く

５．人レイヤーをコピーして貼り付ける

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

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

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

９．なめらかなジャンプにするため人レイヤーを３回コピーする

１０．「編集」「パペットワープ」を選択する

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

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

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

１４．人-2　飛び上がる瞬間のためそのまま

１５．人-3　ジャンプ途中で上がる膝や腕を表現

１６．人-4　膝の曲げや腕の伸ばしを表現する。

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

１８．人-1,2,3,4をコピーする

１９．コピーしたレイヤーを並べ替える。

２０．「ウィンドウ」「アニメーション」でアニメーションウィンドウを起動する。

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

２２．全８フレーム分繰り返す

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

２４．保存形式を「GIF」にして保存

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

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

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

Photoshop

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

2014年7月29日 gif89a編集部(大野謙介) コメントをどうぞ

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

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

１．透過GIFにしたい画像を読み込む

２．選択ツールなどでカンガルーを選択する。

３．レイヤーマスクを適用する。

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

５．ファイル、WEB用に保存を選択

６．保存形式をGIFにする。

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

終わりに

いかがだったろうか、透過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アプリ版のダウンロードはこちら

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画像分割・分解方法

【保存版】無料ツール等でGIF画像を分割・分解する３つの方法[ブラウザかPhotoshopでOK]

2014年7月29日 gif89a編集部(大野謙介) コメントをどうぞ

執筆：Daily GIF89a編集部

GIFアニメを分解・分割する方法を解説する。今回ピックアップしたツールは「誰でもできるか」「汎用化されているツールであるか」「無料ツールであるか」という項目を基に独断の評価(最大☆3個)を加えお伝えする。お伝えするツールは以下の３点。

WEBブラウザ上でGIF画像を分解：GIF Explode
WEBブラウザ上でGIF画像を分解：アニメGIFアニメ分解
PhotoshopでGIF画像を分解：Photoshop

今回分割を行ったGIFアニメはコチラ。

via GIFMAGAZINE

WEBブラウザ上でGIF画像を最も簡単に分解：GIF Explode

誰でもできるか　　　　　　　　　　☆☆☆
汎用化されているツールであるか　　☆☆
無料ツールであるか　　　　　　　　☆☆☆

GIF画像の分割方法：GIF画像URL貼り付け、GIF画像のファイルアップロード

WEBブラウザさえあれば、どなたでもGIFアニメをフレームごとの画像に分解することができる。オンライン環境で無い場合は利用することができないが、最も分割が簡単なツールといえる。分割する場合、URLでもファイルをアップロードしてもしてもできるので非常に素晴らしいツールだ。作業手順は以下をご覧いただきたい。

１．GIF Explodeにアクセスし、GIFアニメのURLを貼り付けるか、GIF画像のファイルをアップロードする。

２．これだけで完了。非常に簡単にフレームに分割することができる。好きなフレームを右クリックで、「名前を付けて保存」で保存することができる。一括で保存するには、chromeの拡張機能などを活用すれば可能だろう。

WEBブラウザ上でGIF画像を分解、一括ダウンロード可能：無料画像加工サイト【もじまる】

誰でもできるか　　　　　　　　　　☆☆☆
汎用化されているツールであるか　　☆☆
無料ツールであるか　　　　　　　　☆☆☆

GIF画像の分割方法：GIF画像URL貼り付け

WEBブラウザさえあれば、どなたでもGIFアニメをフレームごとの画像に分解することができる、その場合画像を一括ダウンロードしたいという要望があるはずだ、こちらのサイトだとそれができ、UIも非常にシンプルで使い勝手よいのでご紹介させていただいた。

１．無料画像加工サイト【もじまる】にアクセスし、任意のファイルをアップロードする。

２．「ダウンロード」ボタンを押して一括ダウンロードが可能。

PhotoshopでGIF画像を分解：Photoshop

誰でもできるか　　　　　　　　　　☆☆
汎用化されているツールであるか　　☆☆☆
無料ツールであるか

続いてPhotoshopであるが、WEBや画像制作の現場で最もユーザーが多いと思いピックアップした。PhotoshopでGIFを分割するとレイヤーごとに読み込まれる。各レイヤーごとに加工ができるので、分割後、何らかの画像加工の作業をする方には最適であろう。

１．PhotoshopでGIF画像を読み込み、「ウィンドウ」「タイムライン」で、タイムラインパネルを開く。

２．「ゴミ箱」のマークで、余分なフレームを削除する。

３．保存形式をGIFにして保存。

GIFの分割、最も簡単なのは、「GIF Explod」

今回は、WEBブラウザ上でGIF画像を分解する「GIF Explode」と「無料画像加工サイト【もじまる】」、Photoshopを使った方法を解説した。様々なシーンを切り貼りしたり、独自のアイディアでGIFアニメーションを作成してみてはいかがだろうか。

執筆：Daily GIF89a編集部

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

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を準備する。

２．紙に人の絵を描く。

３．Photoshopに取り込む

４．人を選択ツール等で切り抜く

５．人レイヤーをコピーして貼り付ける

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

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

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

９．なめらかなジャンプにするため人レイヤーを３回コピーする

１０．「編集」「パペットワープ」を選択する

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

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

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

１４．人-2 飛び上がる瞬間のためそのまま

１５．人-3 ジャンプ途中で上がる膝や腕を表現

１６．人-4 膝の曲げや腕の伸ばしを表現する。

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

１８．人-1,2,3,4をコピーする

１９．コピーしたレイヤーを並べ替える。

２０．「ウィンドウ」「アニメーション」でアニメーションウィンドウを起動する。

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

２２．全８フレーム分繰り返す

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

２４．保存形式を「GIF」にして保存

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

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

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

１．透過GIFにしたい画像を読み込む

２．選択ツールなどでカンガルーを選択する。

３．レイヤーマスクを適用する。

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

５．ファイル、WEB用に保存を選択

６．保存形式をGIFにする。

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

終わりに

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

WEBブラウザ上でGIF画像を最も簡単に分解：GIF Explode

１．GIF Explodeにアクセスし、GIFアニメのURLを貼り付けるか、GIF画像のファイルをアップロードする。

WEBブラウザ上でGIF画像を分解、一括ダウンロード可能：無料画像加工サイト【もじまる】

１．無料画像加工サイト【もじまる】にアクセスし、任意のファイルをアップロードする。

２．「ダウンロード」ボタンを押して一括ダウンロードが可能。

PhotoshopでGIF画像を分解：Photoshop

１．PhotoshopでGIF画像を読み込み、「ウィンドウ」「タイムライン」で、タイムラインパネルを開く。

２．「ゴミ箱」のマークで、余分なフレームを削除する。

３．保存形式をGIFにして保存。

GIFの分割、最も簡単なのは、「GIF Explod」

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

国内外の自主制作映画・アニメ・映像制作やGIF画像・情報を配信する、クリエイターのためのアート系メディア

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

１４．人-2　飛び上がる瞬間のためそのまま

１５．人-3　ジャンプ途中で上がる膝や腕を表現

１６．人-4　膝の曲げや腕の伸ばしを表現する。