タグ別アーカイブ: photoshop

10

女の娘ウケ良し。GIFだからできるキャライラストの可愛さ【cindy suen】

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

 

 

1 2 3 4 5 6 7 8 9 10

 

[tumblr]

http://cindysuen.tumblr.com/

パペットワープで作る鉄拳風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

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

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

執筆:Daily GIF89a編集部

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

GIFアニメを分解・分割する方法を解説する。今回ピックアップしたツールは「誰でもできるか」「汎用化されているツールであるか」「無料ツールであるか」という項目を基に独断の評価(最大☆3個)を加えお伝えする。お伝えするツールは以下の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でもファイルをアップロードしてもしてもできるので非常に素晴らしいツールだ。作業手順は以下をご覧いただきたい。

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

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

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

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

 

 

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

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

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

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

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

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

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

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

 

 

PhotoshopでGIF画像を分解:Photoshop

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

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

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

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

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

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

3.保存形式をGIFにして保存。

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

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

 

 

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

今回は、WEBブラウザ上でGIF画像を分解する「GIF Explode」と「無料画像加工サイト【もじまる】」、Photoshopを使った方法を解説した。様々なシーンを切り貼りしたり、独自のアイディアで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