スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

チョコイベント終わった




 「こたどら!チョコイベントはとっくに終わってるわ!毎日クエストはしっかり終わらせたの・・・!?」






 「・・・」






 「え、まさか~?やってないとは言わないわよね~?」






 「・・・」








 「・・・」






 「やってるじゃな~い!イエエエエイ!おめでとう!」






 「・・・」






 「イエエエイ!イエエエエエ・・・何で黙るの?」






 「別に」






 「ふ~ん。どの業績が大変だった?」






 「エリモン指定数倒すのを15日かな」







 「日数かかるのは面倒よね~。あれの報酬なんだっけ?」






 「チョコ500個」






 「500個も!良かったじゃない~!」






 「狩りで拾った分数千個単位で捨てた」






 「そ、そっか」






 「ところで」






 「うん?」






 「業績全部達成したんだけど?」






 「え、おめでとう」






 「え?」






 「え?」






 「ないの?」






 「え?」






 「いや、業績全部達成おめでとう報酬みたいな・・・?」






 「ああ・・・そういうのね」






 「そういうの」






 「ないわね」






 「・・・」






 「・・・」






 「・・・今回のイベントは花火イベントよ!ユニ書が貰えるから頑張ってね!」






 「はい」



スポンサーサイト

たのしいGIFアニメ 第4回

第1回
第2回
第3回

第4回





5.GIFアニメにする







前回までで作成した5枚の画像。
今回でこれをGIFアニメとして動かしていきましょう!


GIFアニメの作成は、ブラウザ上の作成サイトで作ったりフリーソフトをダウンロードしたりと色々方法はありますが、
枚数が少ない物なら作成サイトで作るのがお手軽かなと思います。

アニメーションGIFを作ろう!

枚数が少ない物だと、私は大体こちらのサイトを利用させて貰っています。

どこのサイトでもソフトでも基本的にやり方は一緒で、
画像を動かしたい順番で選択1枚1枚の表示時間を決める作成
それだけです!
使い方もしっかり書かれていますので、画像さえ用意出来てしまえば後はもう簡単ですね。


それでは実際に、用意した画像を使って早速作ってみましょう。

1枚1枚の表示時間は自由で構いませんが、今回は全て0.15秒ずつ表示するようにしてみました。
うんこA~うんこEまでの画像を取り込み、表示時間を決めて、作成を押すだけです。


完成!
サイトで作成した場合は、表示された物を名前を付けて保存して作業終了ですね。




■背景を透過させる


サイトにもよりますが、先程リンクを貼ったサイト等はこのように背景が透明になっているアニメを作れたりもします。
せっかくですのでこちらも作ってみましょう。






まず事前に用意したのはこちらの5枚。
どういう画像かと言いますと、森の画像を使わずにオレンジの背景のままうんこの位置だけを揃えた画像ですね。
(サイズだけは少し小さく切り取っています)

先程と同じように作っていきますが、追加の手順として透過表示設定という部分をいじっていきます。
この辺りの設定も作るサイトやソフトによって違うのであくまで上記のサイトでの話ですが、
透過色の画像位置指定というボタンを押し、色を1枚目の左上隅の色と設定します。


1枚目の画像の左上隅の色はオンレジ
この設定で作成した場合、オレンジ色の部分が全て透明になって作成されるよーという事ですね。


こんな感じで完成しました!

ここで背景のオレンジと同じ色が、動く物の中に入っていたらその部分も透明になってしまうので注意です。
第2回で対象物の中に入っている色は背景に使わない方がええよーと言ったのはその為ですね。




■最後に


さて、これで作成は全て終了となりますがどうでしたでしょうか。

正直今は動画からそのままGIFアニメに出来るソフト等、色々と便利なものがあるので
全体的に非効率な方法にはなってしまったかなと思います。
はじめにも言いましたが、1つのやり方ですので、色々とやり易いやり方を探してみるのもいいかもしれません。

では、これでもし興味を持った方がいましたら、製作に是非挑戦してみてください。
それでは!



あと全体を通してすごく汚い言葉を連発してしまい申し訳ございませんでした。

たのしいGIFアニメ 第3回

第1回
第2回
第3回
第4回






4.画像を加工する(その2)

それでは前回の続きからやっていきましょう!
作業途中で保存をした場合は、保存したファイルをpictbearに放り込みます。



さて、今回はレイヤーを使って作業していきますが、現在5枚のレイヤーが貼り付けレイヤーという名前になっています。
これだと少しわかりにくいので、わかりやすいように5枚とも名前を変更していきましょう。

各レイヤーの貼り付けレイヤーと書いているところ辺りをダブルクリックすると、名前を変更する事が出来ます。
貼り付けた順番で、うんこ1~うんこ5としてみました。



名前の変更後はこんな風になりました。
この状態になったら、うんこ1のレイヤーをクリックしてみましょう。
すると、そのレイヤーが青くなります。これでそのレイヤーが選択された事になりました。

基本的に選択したレイヤーのみ編集が出来る状態になります。
今回はうんこ1のレイヤーから加工をしていきますので、この状態のまま作業に移りましょう!



まず今回何がしたいのかというと、各レイヤーのうんこを中央に移動させたいです
完成イメージではうんこは中央で飛んでいるので、それに合わせていきます。

では、左側のツール一覧から移動を選択しましょう。
そして、画面のどこでもいいのでドラッグして右下の方に引っ張ると、うんこ1だけがズズズ...と移動をしていきます。
このうんこ1を、「このへんでうんこ飛ばしたいなー」という位置に合わせます。
(細かい移動はカーソルキーを使うと1ドットずつ動いてくれるので、覚えておくと便利です。)




はい、うんこ1のみが真ん中に移動しましたね。
ではこのうんこは一旦置いておきまして・・・

今度はうんこ2のレイヤーをクリックして同じ手順で真ん中まで持っていき、
うんこ1と綺麗に重なる位置に合わせましょう。

うんこ2が終わればうんこ3・・・と、これをうんこ5まで全て終わらせます。


ちなみに、レイヤーの横に付いている★マークを押すと、そのレイヤーが非表示になります。
また、右上のバーをいじれば、レイヤーの透明度を変更して半透明にする事が出来ます。
ゴチャゴチャして作業がやりにくい場合は、少し調整してみると見えやすいですね。
(終了後は透明度は元に戻しておきましょう)



さて、全て移動が終わるとこのような感じに。
実際に動くのは羽とハエの部分だけですので、そこだけがバラバラに見えますね。

ここまで来たらほぼ作業は終了です。
後は保存をしていきましょう!



まずはGIFアニメの1枚目となる画像を保存します。
うんこ1の画像を保存したいので、うんこ2~うんこ5のレイヤーを非表示にしましょう。
右側のレイヤーボックスのうんこ2~うんこ5の★マークをクリックです。



続いて、レイヤーボックスの上部に、イメージの統合というボタンがありますね。
これを押してみましょう。



すると・・・6枚あったレイヤーが全てまとまって1つのレイヤーとなりました。
あらかじめ見えない様にしていたうんこ2~うんこ5のレイヤーは、非表示のまままとまっています。
要はうんこ2~うんこ5は消えてしまい、うんこ1だけが背景の森に残った形ですね。

これがGIFアニメの1枚目となります。ではこれを名前を付けて保存しましょう。



今回は名前は適当にうんこAとしておきました。
どんな名前でも構いませんが、動かす順番が分かるようにしておくのがいいかと思います。
拡張子は"png"形式がおすすめです。今回は"png"を選択しています。

保存が終わりましたら、今度はGIFアニメの2枚目を保存していきます。

「いやちょっとお前・・・レイヤー全部まとまってうんこ2とか消えとるやん!」

となりますが、ここで"Ctrl+Z"を押してみましょう。


すると、また6枚のレイヤーに戻りました。
"Ctrl+Z"は動作を1動作分戻すショートカットキーですね。色々な場面で使えてすごく便利です。

では、今度はうんこ2を保存したいので、うんこ2のレイヤーだけ見える状態にし、他のレイヤーを先程と同様に非表示にしましょう。

そして同じように、イメージの統合→名前を付けて保存です。
今度は名前をうんこBとしました。

3枚目以降も同じやり方で5枚目まで終わらせましょう!





5枚とも終わったところでこのような感じに。
後はこの5枚の画像を連続で表示させれば・・・イメージ通りのGIFアニメが完成です。


それでは次回でこの画像を動かしていきましょう!次で最後となります。

第4回

たのしいGIFアニメ 第2回

第1回
第2回
第3回
第4回





3.画像を加工する(その1)

では、第1回で用意した画像を、1枚1枚加工していきましょう!
画像を確認して、いらない部分やおかしい部分を修正していく作業ですね。


まず森の画像ですが、これはちょっと完成イメージよりサイズが大きいような気がします。
ということでまずはこの画像を小さく切り取りましょう!



■手順

最初にpictbearを開きます。


恐らくこういう画面になるかと思いますので、この画面に保存した森の画像ファイルをドラッグして放り込みます。





すると、森の画像が取り込まれましたね。
それでは左側のツール一覧から選択範囲をクリックしましょう。
画像の上でぐぐっと引っ張って欲しい範囲だけを選択します。
点線で選択されている状態になったらトリミングを行います。"Ctrl+Shift+T"を押してみましょう。
(基本的にショートカットキーを使わせて頂きますが、上のメニューから探して使う事も出来ます。)




小さくなりました!
これが今回の土台となります。ですが、ひとまずこれは置いておきましょう。
先にうんこの画像を加工していきます。


現在pictbearに表示されている森の画像の上からで構いませんので、
用意したうんこの画像5枚を最初と同じようにどんどん放り込んでいきます。


このようなタブが上のほうに出来上がればOKです。
まずは1枚目から加工していきますので、うんこ1のタブをクリックです。




さて、うんこ1のこの画像・・・おかしいところはどこでしょうか?
基本的に動かしたい物(今回はうんこ)以外の部分は同じ色で塗り潰した状態にしておくのがいいです。

それを踏まえて考えると、まずポニチャイがいらないですね。あとは左上の数字もいらないので消してみましょう。



まず左側のツール一覧から鉛筆等のツールを選択します。
色を塗る事が出来るツールならどれでも構いませんが、
私は大まかな部分は選択塗りつぶし。細かい部分は鉛筆を使う事が多いです。

今回は背景と同じオレンジ色で塗りつぶしたいので、画像のオレンジ色のところにカーソルを合わせて右クリック
すると、ペンの色が背景のオレンジ色になります。この状態でガンガンポニチャイを消していきましょう!

ちなみに、塗りつぶす色は何色でも大丈夫です。(今回はオレンジ色)
ですが、対象物(今回はうんこ)の中に入っている色以外にしておくのが望ましいです。(理由は後述)




さて、塗りつぶしが終わりましたら、うんこだけが表示されているきれいなうんこになりました!
では左側のツール一覧から自動選択というものを押しましょう。

このツールは同じ色で繋がっている部分を全て選択するツールです。
今回は背景のオレンジ色の部分を、どこでも構いませんのでクリックしてみましょう。
画像のようにオレンジ色で繋がっている部分が全て選択されます。

そしてこの状態で、選択範囲の反転というものをします。今度は"Ctrl+Shift+I"を押してみましょう。




このようにオレンジ色の部分が選択されている状態からオレンジ色の部分以外が選択されている状態になりました。
要はうんこだけが選択されるように反転を行ったという事です。

では、ここで"Ctrl+C"選択範囲のコピーをし、上のタブから森をクリックしてそちらの画面を開きましょう。




森のタブを開いたら、今度は"Ctrl+V"選択範囲の貼り付けです。
森の画像のほうに、先ほどコピーしたうんこがやってきましたね。

この状態になったら一旦置いておき、今度はうんこ2のタブをクリックです。
同じ手順でうんこ2~うんこ5も森の画像に貼り付けていきましょう!





5枚とも貼り付けた時点で、このようにうんこが左上に集まった奇妙な状態になったかと思います。
最後に貼り付けたうんこがまだ選択状態になっていますので、選択範囲の解除をしておきます。"Ctrl+D"を押しましょう。

「いやちょっとお前・・・うんこの位置真ん中じゃないし全部重ねたら困るやん!うんこ真ん中やろ!」

と思われる方もいるかもしれませんが、大丈夫です。
ここでpictbearの画面の右側の方を見てみましょう。



レイヤーボックスという部分がありますね。(ない場合は上のメニューから表示→コントロールバー→レイヤー
先ほど貼り付けたうんこの画像は、全て貼り付けレイヤーという形でレイヤーが分かれております。

「いやレイヤーとか知らんし!なんやねん!」というところですが、透明なフィルムと言えばわかりやすいかなと思います。

上の画像を見ると現在レイヤーが6枚ありますね。(背景1枚+貼り付けレイヤー5枚)
一番下の森の画像に、透明なフィルムに描いたうんこの絵を5枚重ねた状態をイメージしてみてください。


これが一枚の絵に5つのうんこを描いた物なら修正は出来ませんが・・・
フィルムが5枚に分かれていれば1枚1枚抜き取って修正が出来ますよね?

つまりそんな感じという事です。
それでは次回からは実際に1枚1枚抜き取って位置の修正を加えていきましょう!


■途中保存

今回でうんこの画像は全て森の画像の中に収めましたので、保存する場合は今表示している森の画像だけで大丈夫です。
森のタブを選択した状態にして、名前を付けて保存で、適当な場所に保存しておきましょう。


加工途中で保存する場合は、拡張子を"pbx"にしておきます。
こうする事で、次回はこのファイルをpictbearに放り込めば続きから作業する事が出来ます。

第3回

たのしいGIFアニメ 第1回

第1回
第2回
第3回
第4回







■はじめに

こんにちは。
突然ですが、皆さんはGIFアニメを無性に作りたくなって夜も眠れない事。
GIFアニメを無性に作りたくなってご飯が喉を通らない事。
そういった事はないでしょうか?

私は全くありませんが、そういった方の為にほんの少しでも需要があれば・・・と思い、
今回GIFアニメの作り方を記事にしてみようかと思います。
実際に作ってみるととても楽しいので、作り方を知らない方には是非挑戦して頂きたいです。

やり方はあくまで私の自己流的なもの。
「このやり方効率わりーな」とか「ここはこうしたほうがいいんじゃねーの」等、そういった箇所もあるかと思います。
ですので「こいつはこういうやり方なのかー」と参考程度にして頂ければ幸いです。

ちなみに、メイプルストーリーを題材とした記事とさせて頂きます。

それでは楽しくGIFアニメを作っていきましょう!

※使用しているペイントソフトはpictbearです。pictbearを使用してのやり方となっております。



1.テーマを決める

まずGIFアニメとはなんぞや、というところからですが・・・


こういった画像の事ですね。
簡単に言えばパラパラ漫画のように動く画像。
普通の静止画とは違い、動きがあるので「こういうアニメーションを作ってみると面白いんじゃないかな?」
と色々と想像が膨らみますね。

さて、それを踏まえてまずは自分が作りたい物をイメージしましょう!



う~む・・・。



う~ん、どうしようかな~・・・。



はい、イメージ出来ましたでしょうか。

それぞれこういう物が作りたい!というのはあるかと思いますが、
今回は私が「うーん・・・なんか森でうんこでも飛ばしたいな・・・」と思い立ったとして進めていきたいと思います。




という事でイメージする完成形がこれになりますね。
これを目指して頑張りましょう!



2.準備

さて、"森でうんこが飛ぶGIFアニメ"ということで必要な物はなんでしょうか?

まずは森の画像、うんこの画像が思いつきますね。
これに加えて、画像を加工する為にペイントソフトが必要になります。

ペイントソフトですが、私はpictbearというフリーソフトを使用していますので、今回はこちらを使用していきます。
とても使いやすいですので興味がある方は是非ダウンロードをして使ってみてください。

使用する画像については、実際にメイプルストーリーにログインして画像を撮影したり、
サイト様から画像をお借りする等、色々と方法はあるかと思います。

今回は私が実際にログインして画像を撮影してきました!









こちらが使用する森の画像とうんこの画像です。

背景の森は静止画。
うんこがGIFアニメとして動く部分になりますので枚数は5枚。これが連続して動く形になります。

おや・・・?
ですがよく見ると使用する画像に何やら不要な部分がありますね。
しかも位置がバラバラです!

これは困りましたが問題ありません。
実際に画像を撮影した場合も、背景等のいらない要素が当然写り込んでしまいます。
後々これは修正していく作業がありますので、
撮影する時は、動かしたい物がきれいに写っていれば他の物が写りこんでいても大丈夫です。
気にせずバンバン撮影しましょう!



では、これらは一旦適当なフォルダを作成して保存しておきましょう。
次回は実際にこれらの画像を使用して加工していきます。

第2回

HomeNext ≫

カレンダー

04 ≪│2017/05│≫ 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

プロフィール


Author:こた

リンク

最新記事

最新コメント

月別アーカイブ

カテゴリ

カウンター

検索フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。