gifアニメ作り方の記事一覧

歌って回るミクgifアニメ作り方

photoshopを使っていると、いろんな効果を試してみたいくなります。
今回はスポットライトの中で踊るミク風の女の子をgifアニメで作ってみました
歌って回るミクgifアニメ作り方

まずはミク風の女の子を作る


私の場合コミPo!を使いますが、皆さんはそれぞれのソフトで作成してください。
今回は回転するミク風少女なので、5枚の画像を用意しました。
それぞれでgifアニメを構成します。

コミポで作ったキャラなら3D画像なので、360度回転させるだけでOKです。
オリジナルで書く場合とは違って格段に楽になります。

ここで背景のスポットライトが気になるかもしれません。
ライトの部分はPhotoShopで作成しました。


PhotoShopスポットライトの作り方

スポットライト作り方 作り方は覚えると簡単です。
  1. 地面に円を描き
  2. 円にぼかし(ガウス)を使う
  3. ライトを三角で作って
  4. ぼかし(ガウス)を使う
この順番でスポットライトを作ることが出来ます。

1.新規レイヤーを作成し円を作る

まずはレイヤーを追加
PhotoShop新規レイヤーを作る
楕円方ツールで円を作る
スクリーンショット 2014-08-09 21.40.36

2.ぼかし(ガウス)を使って円を綺麗に見せる

フィルター→ぼかし→ぼかし(ガウス)を使います。
photoshopぼかしスクリーンショット

ぼかしはお好みで調整します
photoshopぼかし調整スクリーンショット


3.多角方ツール:角数3で三角形を作る

※もちろん他の方法でもOK!
photoshop多角方ツールスクリーンショット

形が整わない場合は、「編集→パスを自由変形」でお好みの形に変更します。
※シェイプというらしいです。
パスを自由変形スクリーンショット


4.三角をライトのようにぼかす
先ほどの円と同じように「フィルター→ぼかし→ぼかし(ガウス)」を使います。
数字は先ほどと同じにしています。
フォトショップぼかしスクリーンショット

不自然なのですが、レイヤー機能のオーバーレイを使用すればスポットライトに変わります
フォトショップスポットライトスクリーンショット

作り方を書きながら作成したので、先ほどの物とは違いますがご了承ください。(笑)

色は白でなくてもいいかもしれません。
歌って踊るミク黄色
いかがでしょうか?
スポットライトというのは案外使い道が多そうです。
いろいろ試してみてくださいね。

gifアニメ作り方, photoshop

gifアニメの作り方_001

GIFアニメバナー作り方 gifアニメでバナーを作るのバナー画像さえあれば、すぐに出来ます。
最近では無料配布でリンクフリーのバナー画像も多くなりました。
無料のバナー素材を使うことでを、短い時間で効率よくクオリティーの高いgifアニメバナーを作成することが出来ます。

今回はphotoshopとコミpo!を使った「gifアニメバナーの簡単な作り方」のご紹介です。


photoshop×コミPo!gifアニメ作成手順


YouTube動画で「gifアニメバナーの簡単な作り方」の手順を作成しました。

gifアニメバナーを作る手順は、gifアニメの画像を作る手順と変わりありません。
どちらかというと、大きな動作をしないので凝ったgifアニメを作るよりも簡単です。
  1. photoshopでバナー画像を作る
  2. gifバナーの画像を組み合わせる
  3. gifアニメで出力

photoshopでバナーを作る


photoshopは、世界中のプロからアマチュアまで愛用している画像ソフトです。
そのクオリティーの高い画像データは世の中にたくさんで回っています。

無料で使える画像データを使うことで、効率的に作ることをおすすめします。
※photoshopのデータは「psdファイル」です。

今回はWindows 7 Buttons by easydisplayname on deviantARTというサイトからお借りしました。
Windows 7 Buttons by easydisplayname on deviantART キャプチャ:http://easydisplayname.deviantart.com/art/Windows-7-Buttons-152498192


gifバナーの画像を組み合わせる

コミポアイコン_005
今回もコミPo!の画像を使いました。
コミポにはたくさんのアイコンがありますし、キャラクターをアイコンにする事もできます。

ちょこっといじるだけで、さまざまな動作を再現することが出来るので便利です。
今回はこのような、zzz+ビックリするアイコンを使いました。
3つの寝ている画像は、自分なりに修正しています。(zを消しているだけです)


後はgifアニメとして出力するだけです。

photoshopを使わずにgifアニメバナーを作る方法



もちろんphotoshopを使わなくても、同じように作ることは出来ます。

要は、バナー素材を用意すればいいだけです。
「バナー フリー素材」で検索すれば、たくさんの無料バナー画像が出てきますのでそこから探しましょう

無料でダウンロードしたバナーに画像を貼り付けて、pixivのうごイラやGIFMAGAZINEで投稿するだけでも作ることは出来ます。
作り方が書いてあるサイト
GIFMAGAZINでgifアニメを作る方法
Pixivのうごイラで作る歌うイラストの作り方手順まとめ

ぜひ試してみてください。

gifアニメ作り方

スカートがめくれるgifアニメの作り方_001

風で抑える制服スカート gifアニメを作るときに重要なポイントは自然な動きです。
一番初めに挑戦したいgifアニメといえば、風で揺れるスカートの動きです。
その動きを実現させることが出来るのが、photoshopのパペットワークです。

スカートが揺れて見えるgifアニメを作成する技術さえあれば、カーテンを動かしたり、髪を動かす事もできるようになります。
今回の作り方を見て研究してください。

前回はphotoshopのパペットワークを使って、1枚の画像からgifアニメを作る方法をご紹介しましたが、
今回はパペットワークの応用でスカートがめくれるgifアニメを作ります。

youtube動画も作りましたのであわせてご覧ください。


スカートが動くgifアニメを作り方

スカートが風で揺れるgifアニメ
簡単に手順を書いくとこうなります。
  1. 動く部分と動かない部分を切断する
  2. パペットワークのピンで固定
  3. 動かした画像を複数作ってタイムラインでgifアニメにする

慣れれば10分程度で作れそうですね。


動く部分と動かない部分を切断する

足を切り取る
photoshopのパペットワークを使うときは、動かない画像部分と動く画像の部分をあらかじめカットして、別のレイヤーにしておくと楽に作れます。
特定の画像をカットする方法
[クイック選択ツールで指定]→[別のレイヤーにコピーorカット]
そのまま使うと、手や足などが一緒に動くので不自然な画像になってしまいます。

カットしておくと便利な画像
  • 背景
  • 手や足
  • 髪の毛
など


パペットワークのピンで固定

パペットワープピンで留める手順
パペットワープがある場所
[編集]→[パペットワープ] ※メッシュ(網目)は表示非表示がチェックで選べます

パペットワークを使うときは、画像のようにピンで体を固定することから始まります。
これをしておかないと、他の部分が勝手に動いてしまいます。

ピンを止めるときは、拡大をして細かく止めて置くと確実です。
また、gifアニメは全体を見ながら調整したほうがいいので、動作をつけるときは下の倍率に戻すことをおすすめします。
動画ではそのままやってますが、後から気が付きました(笑)


動かした画像を複数作ってタイムラインでgifアニメにする

タイムラインで仕上げる
イラストや静止した漫画なら一枚でいいのですが、gifアニメの場合少しずつ動作を変化させなくてはいけません。
そんな時は、切り抜いた画像のレイヤーを複数枚コピーしておくと便利です。
※photoshopではコピーの事を複製といいます

もちろんパペットワークで加工した画像を複製してもいいのですが、おおもとの画像と食い違う部分も出てきます。
自然な動きをさせるのであれば、オリジナルに近い画像を使ったほうが確実です。

photoshopにはアニメーション機能がありますので、そのままgifアニメを作ることが出来ます。
gifアニメ用のタイムラインの出し方
[ウインドウ]→[タイムライン]→[フレームアニメーションを作成] ※複製し表示したいレイヤーを選択して作っていきます。(目玉ボタンで表示非表示が可能)

最後にgifアニメとして出力すれば完成

スカートを抑える制服少女gifアニメ
photoshopでは再生回数も選べるので便利です。
大抵は無限でセットしておくことをおすすめします。
もちろん秒数は1枚ずつ選べるので、動きは自由自在に作ることが出来ます。
gifアニメで出力する方法
[ファイル]→[web用に保存]→[gifを選択]

photoshopのようなソフトで作ると、うごイラなどの無料ツールよりも高度なgifアニメも作れます。
この機会に使ってみてはいかがでしょうか?

gifアニメ作り方, photoshop

adobeのphotoshopをご存知ですか?
photoshop ccなら最新版を月額980円で使えるようになっています。
以前のように数万円も出さなくても使えるようになっています。
コストパフォーマンスもいいのでおすすめです。
30日間の無料体験版がで使えるので、まずは試しに使ってみるのもいいかもしれません。
(すべてのadobeが30日間は無料で制限なく使えるので、Illustrator CCなども試してみてもいいでしょう)


photoshopは写真編集だけじゃない


photoshopといえば、写真の編集だけかと思う人も多いかもしれません。

ですが、gifアニメーションや動画なども編集や作成、ロゴやバナーの作成もphotoshopだけで作ることもできます。
耳を動かそう
特に、1枚のイラストや写真からgifアニメを作れるパペットワープ機能があるのでとても便利なソフトです。

photoshopのパペットワープ機能とは?

パペットワーク
パペットワープとは、操り人形のように自由自在にひっぱったり・伸ばしたりして人物や動物・物を他の格好(ポーズ)をさせる機能です。
写真を撮ったり、イラストや漫画をたくさん描くには時間がかかりますね。

gifアニメやパラパラ漫画を作ろうと思ったら、何枚も違う画像を用意しなくてはいけません。
それぞれちょっとだけ動かしながら描こうと思ったら、何時間も時間が必要になってしまいます。

そんな時に便利なのが、photoshopのパペットワープ機能です。
まるで人形のように、動かしす事が出来るので思い通りの動きにする事が出来ます。

もちろん立体的に動かす事が出来ますので、アニメや漫画だけでなく人物の写真でも違和感なく動かす事が出来ます。

photoshopを使う利点とは?


私が作るgifアニメやYoutube動画はコミPo!を使っていますが、ポーズや動きは限定されるのでphotoshopのパペットワープで編集する事があります。
photoshopを使う事で、他の人の作品とは違った動きが出すようにしています。
その他にも、コミPo!の3Dキャラやアイテムを作る事が出来るのもphotoshopの利点です。

パペットワープの使用例
  • スカートが風でめくれたりふわっと浮くgifアニメ
  • 猫ミミやウサギ耳が動く漫画
  • やわらかい部分がプルプル動くアニメーション
  • 写真の小顔修正やほっそりダイエット調整
  • モデル写真のポーズ変更
これ以外にもたくさん使えるので便利です。

photoshopのパペットワープ機能の使い方

パペットワークアミ
パペットワープで動かす時は、「ピン」を打って固定したり・動かします。
ピンとは、虫ピンのように画像を張り付けておく物です。

「ピン」を打つ部分は二種類です。
  1. 動かしたくない部分を固定して
  2. 動かしたい部分を引っ張って張り付ける

photoshopのパペットワープ機能ピン使い方

パペットワークアミ耳2
パペットワープは画像を引っ張って動かしてピン留めします。
その時にピンで体を固定しておかないと体全体が引っ張られます。
※上の画像では、分かりやすいように元の画像も表示しています。
  1. ウサギ耳の付け根にピンを付けて固定
  2. ウサギ耳の先端を下に引っ張って動かしています

パペットワープ機能のピンを使うときの注意点

ピンで固定せずにパペットワープ機能を使った場合
ピンで留めないと画像がそのままの状態で動きます
(左右上下に移動したい時は便利です)
1本のピンで留めていた場合
画像全体が引っ張られ歪んでしまうので不自然な画像になってしまいます。
人やキャラクター・動物の画像をパペットワープで加工する場合、腕や足の関節・肩や腰・頭や顔などにピンを打つことで、自然な画像に仕上げる事が出来ます。


パペットワープのメッシュ(網点)でリアルな動きが出せる

パペットワークアミ
パペットワープはピンだけでも、動かす事が出来ますが、3Dメッシュ(網目上の可動部分)を使う事でさらに自然な動きを実現します。

上の画像は、メッシュを表示した時の画像です。
網のつなぎ目を動かすことで、ふくらみを持たせて豊胸したり、逆にほっそりダイエットさせる事もできます。

スカートのふんわり感を出したい時も、使うことで3Dのように立体感を出す事が出来るようになっています。
もちろんイラストや漫画のキャラクターだけでなく、写真でも使えるので様々な条件も使う事が出来ます。

ですが、欠点もあります。
パペットワープのピン留めできないエラーの原因
それは、メッシュのつなぎ目部分にしか「ピンが打てない」仕様になっています。
その為、パペットワープで細かく修正する場合にはメッシュの強弱を使い分ける事が必要になってきます。

パペットワープは、体の節々をピンで固定して動かすだけで様々なポーズをとる事が出来ます。
使いこなせる事が出来れば、1枚の画像から何パターンでもgifアニメが作れるので便利です。
この機会に使ってみてはいかがでしょうか?

フォトエディター | Adobe Photoshop CC無償体験版ダウンロード
http://www.adobe.com/jp/products/photoshop.html

gifアニメ作り方, photoshop

コミPo!でgifアニメ!ラクラク作成術タイトル_014

コミPo!でgifアニメ!ラクラク作成術タイトル_014 漫画作成ソフトコミPo!をご存知ですか?
読み方はコミポです。

漫画やイラストが描けなくても(画才がなくても(笑)感覚で操作するだけなので、手軽に漫画が作れます。
イラストや漫画を描くためのソフトはたくさんありますが、操作するだけなのはコミPo!だけかもしれません。

大抵はペンタブレットというパソコンに接続してイラストを描くのですが、コミPo!ならそんなことは不要です。
キャラクターを選んで、好きなポーズをさせるだけなので一枚絵なら5分程度で作ることが出来ます。

私はこの漫画アニメ.comだけでなく、ほとんどのブログやホームページの挿絵でも使っているのでとても重宝しています。

今回は、「コミポをどのような操作してgifアニメを作っているのか」をご紹介します。

コミPo!は無料版もあるので、この夏休みにぜひ使ってみてください。
無料ダウンロードが出来るコミPo!公式サイト→http://www.comipo.com/


コミPo!でgifアニメを作る手順

gifアニメをコミポで簡単に作る方法
今回は野球のバッティングをするコミポを作ってみました。
gifアニメのマニュアルはほとんどありませんので、人によって作る方法は変わってきますので絶対ということはありません。
参考にする程度でご覧ください。

コミPo!でgifアニメを作成する流れ
  1. まずは頭の中でイメージしてみる
  2. コミポのポーズを理想の形に変える
  3. 漫画を一度並べて動かしてみよう
  4. 動きが不自然な場所は追加で作る
  5. 実際に画像ファイルで出力して動かしてみましょう


頭の中でどんな動きをさせるかイメージしましょう

まずは頭の中でイメージしてみる_001
まずは頭の中でどんな動きをするのかをあらかじめ考えましょう。
これはある程度経験すれば、なくてもかまいません。

インスピレーションが生まれないときは、他の方の作品を見て参考にしてもいいかもしれません。
いろんな人の発想には、さまざまなヒントが隠されています。


コミポのポーズを選んで理想の形に変化させる

コミポポーズの選択画面
コミPo!にはポーズが多数収録されています。
ですが、大雑把な形しかありません。

野球のピッチングに関する動きは、上のイラストの3枚(構え・ねじる・打つ)しかありません。
それぞれを動かすことは出来ますので、顔を上げたり、ねじりを加えたり工夫をしながら表現を豊かにする必要があります。
ここが楽しいところであり、面倒なところでもあります。


一度並べて動かしてながらイラストを増やす

コミポで動かしてながら作ってみる方法
gifアニメを違和感なく作るには、漫画イラストを増やす必要があります。
アニメのコマ振りのようにちょっとづつ変化をつけて書くとより自然な動きに見えてきます。

そんな時は、コミPo!ならコピペ(コピーアンドペースト)で、同じイラストを何枚でも量産できます。
その後少しずつずらして作る事もマウス一個で出来るので便利です。

これが他のイラストだと、動きをつけた絵を何度も描いたり、色付けをする必要もあります。
コミPo!ならそういった手間がないので、初心者の方にはおすすめです。


動きが不自然な場所は追加でポーズを作る

コミポの基本動作だけでは足りない理由
このgifアニメはコミPo!に収録されている基本のバッティングポーズだけを使っています。
ちょっと大雑把の動きですね。
もう少し滑らかにするために、私は6~7枚追加しました。(2種類作りましたので)

そうすると自然な動きができるので見た目がいい作品に仕上がります。
このように基本のポーズをうまく利用して、自分のイメージに合った動きをさせる必要があります。


実際に画像ファイルで出力してgifアニメソフトで動かしながら最終調整


実際に作った漫画を画像にして動かすと、おかしいところがすぐにわかります。
たとえコミPo!上でうまくいったと思っていても、全体的にガタガタゆれていたりバランスがおかしかったり、はたまた動きが不自然な場所を発見することが多いです。

ですが、コミポならデータファイルを保存する機能があるので、いつでも修正することができます。
こういったデータはしっかりと取っておく必要があります。

私は無料のphotoscapeを使っています。
photoscape初期画面
これなら画像を移動するだけですぐgifアニメに変換されます。
サイズの調整やgifアニメの入れ替えも感覚で出来るのでおすすめです。

この漫画アニメ.comで使っているgifアニメのほとんどがphotoscapeで作っています。
完全無料なので利用してみてくださいね。

gifアニメ作り方

gifアニメに文字を入れたい時ってありますよね。
作成する前から入れておけば、問題ないかもしれません。
1406187554
ですが、作成した後に文字を入れたい時や写真で作ったgifアニメに、文字を入れたいと思ったら、ちょっと面倒な話になってしまいます。
そんな時今まで私は、gifアニメを作り直していましたが、そんなことをしなくてもいい方法があったようです。

GIFMAGAZINEで、gifアニメに文字を入れる方法です。
今回は、「GIFMAGAZINEの文字をGIFに追加機能の使い方」をご紹介いたします。

ちなみにこちらが文字を追加したgifアニメです。



GIFMAGAZINE「文字をGIFに追加」機能とは

文字をGIFに追加 GIFMAGAZINEの上部メニューにある機能の一つです。
これを使う事で、gifアニメに文字を入力する事が出来ます。

速攻で文字をgifアニメに入れる事が出来るので、急いでいる時にはいいかもしれません。

「文字をGIFに追加」の使い方手順

GIFMAGAZIN「文字をGIFに追加」画面
  1. gifアニメをアップロード
  2. 表示したい文字を入力
  3. テキストの位置をxy座標で調整
  4. テキストの色やサイズを調整
  5. 最後に出力です

いたってシンプルですが、xy座標で文字位置を調整するのは厄介ですね。
私のように、分かっていないと難しい気がします。
あと注意をしなくてはいけないのが、テキスト色の変更です。

初期画面では白のカラーコード#ffffffが入力されています。
カラーコードを知らない方には、ちょっと難しいですね。

一応代表的なカラーコードを書いておきます。
  • 黒#000000
  • 赤#FF0000
  • 緑#008000
  • 黄#ffff00

利点としては、ソフト不要ですぐに作る事が出来る事ですね。

文字を太くしたり、フォントをいじる事はできないので限定された機能となっています。
もし、本格的に文字を入れたいのであれば他のソフト利用をおすすめします。

gifアニメ作り方

twittergifアニメ失敗漫画タイトル

twittergifアニメ失敗漫画_001 twitterにgifアニメを投稿する人が増えています。
私もその一人です。
動いている方が、目にも止まりやすいので注目してもらいたい時はおすすめです。

ですが、twitterでgifアニメを後悔する時には、注意をしなくてはいけないこともありますので見ていきましょう。


Twitterにgifアニメを投稿するときの注意点は

Twitter×gifアニメトラブル体験談
いくつかありますが、今回ははじめて投稿した時のトラブル体験を中心にご紹介します。
  • 容量が決まっている
  • 一回しか再生されない?
  • gifアニメが表示されないトラブル

twitterに投稿できる容量は3MBまで

Twitter投稿できる容量は3MBまで
前回のコミポ百裂拳は、3.5MBもありました。
容量に注意説明画像 ※容量の確認方法は、パソコンならgifアニメのプロパティで見ることが出来ます。

gifアニメの容量が大きいと、ブログやホームページで投稿していても、パソコン以外のデバイス(スマホやタブレット)では再生されない場合もあります。

パラパラ漫画を作るときも同じですが、あまりにも凝ったアニメにしまうと、他の人に見てもらうことが出来ない可能性もあるので注意をしましょう。

作るときには、「gifアニメの容量」を念頭に入れておく必要があります。


gifアニメの容量が大きすぎた時に軽くする方法

gifアニメ容量を軽くしよう
まずは、gifアニメの容量が決まる決め手となる方法を説明します。
  • 漫画やアニメの画像量(枚数)を少なく
  • 画像を小さく
  • 画質を落とす
これらの項目が軽く削減できる項目です。


gifアニメの容量を効果的に落とすサイズの変更方法

gifアニメサイズの変更方法
まずは、作成するgifアニメを小さくしてみてください。
画像の大きさはそのままでも、gifアニメの大きさは最終的に出力するときに選ぶ事が出来ます。

小さくする時は、たてと横の大きさの比率を守ればお好みのサイズに縮小する事が出来ます。
半分の画像サイズにする事で、容量も2/3~1/2程度に小さくする事が出来ます。
※アニメによっては変わります。


gifアニメの枚数を減らすとさらに軽くなる

gifアニメ枚数を減らすと軽くなる?
この方法は、結果的にはgifアニメの動きが悪くなります。
クオリティーが高い作品を出したい方にとっては、悩みの種です。
それは、画質も同じですね。

動きが早いgifならば、分からない時がありますが、ゆっくりめで再生するとすぐに分かってしまいます。
その人の妥協点によって変わってくるかもしれません。


gifアニメぼ容量が大きすぎたらVine動画を使おう

gifアニメの最終手段はvine動画
もし、容量が大きすぎて投稿できないと判断した場合には、6秒動画のVineを使いましょう。

Vineはtwitterと連動して使うことが出来ますので、gifアニメのようにリスタート表示されるので、多くの人に見てもらうことも出来ます。

gifアニメ作り方

gifアニメ作り方漫画タイトル

なんとなくまわし蹴りをするにゃんこ娘をgifアニメで作っていたら、サッカー少女になってしまいました。

作っているうちになんとなく違うイメージになることはありますね。
そこで今回は、「gifアニメを作るときは組み合わせから考えよう!」をお送りします。
gifアニメ作り方をコミPo!漫画で説明前編

gifアニメを楽に作るコツはストーリーを組み立てること


gifアニメの組み合わせとは、話の流れ(ストーリー)を考えることです。

普通のアニメーションと同じで、作成時にどのような動きをさせるのかを考えます。
もちろんパラパラ漫画やYouTube動画を作るときも同じです。

すべて話の流れをある程度考えたほうが、楽に作れるようになります。

たとえば、「勢いをつけてジャンプするgifアニメ」を作ろうと思ったら、どんな動きになるのかを始めに考える必要があります。
gifアニメ作り方をコミPo!漫画で説明後編
gifアニメを作るときのストーリー例
  1. まずは駆け足でよってくる漫画
  2. 上(目標)を確認して
  3. しゃがんで力をためる
  4. 思いっきりジャンプ
  5. 最後に着地

この流れをひとつの漫画にまとめて書くと、どんな流れでアニメーションが動くのかがわかりますね。
後は、それをばらしながら付け足して書いていくと、どんなgifアニメになるのかがわかるはずです。
こんな考えを持っていれば、無駄なイラストを作ることも少なくなります。

結果的に作成時間を短縮することもできるので、楽しめるはずです。

今回はこんなマリオ風のgifアニメが出来上がりました。

via GIFMAGAZINE

ブロックをたたいたら、きのこが出てくるgifアニメです(見えないかもですが)

gifアニメ作り方