blog

top > 學展blog

2014.11.28 (Fri)

制作

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

Nものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

みなさんこんばんは!さめちゃんです。

先日当ブログでご紹介した君はゲームウォッチを知っているか…。懐かしのあのゲームがやり放題!休憩のお供に最適!を紹介してから、ドット絵というものを作りたくなってきた今日この頃。

見つけてしまいました。どっと絵を作れるwebサービス。

しかもものすごく簡単に。そしてアニメまでサクッとつくれるサービスを!

今回はそんなドット絵アニメを簡単に作成できる「Piskel」をご紹介していきたいと思います!

SNS等のアイコンや、ドット絵GIFアニメなど、色々作成&活用できるシーンがあると思うので是非お試しください。

Piskel

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

http://www.piskelapp.com/

まずアクセスすると最初に飛び込んでくるのがロックマン!

ドット絵だらけだったあの時代のヒーローですね。

マリオやドラクエなんかも全てこの感じのドット絵でした。なつかしぃーー!!

まずは、黄色いボタン(Create a Sprite)をクリック。

すると…

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

はいこちらがインターフェイス!

分かりやすいですね。

PhotoshopやIllustrator等の画像編集ソフトを普段使っている方なら、アイコンだけでなんとなく何ができるか分かるかと思いますが、よく使うツールや機能を中心に簡単に解説していこうと思います!


ツール編

まずはこちら↓

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

ペンマークは勿論ペイントを意味しています。
ドット絵に特化しているアプリなので、1px単位で描画していきます。
※ショートカット”P”

続いては↓

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

こちらは消しゴムです.1px分づつ消していきます。
※ショートカット”E”

続いては↓

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

ミラーペンですね。
単純な構造のドット絵においてこのツールは大変便利!
左右対称に描画できるので、素早くドットを打てます。
※ショートカット”V”

続いては↓

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

ラインツール。
直線を作るときはこのツールでサッと線を引きましょう!
※ショートカット”L”

続いては↓

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

選択カラーをクリックすればカラーピッカーが表示され、自由に描画色を選択できます。

ツールの解説は以上ですが、他のツールも便利なのでドット絵を作りながらお試しください。


機能編

アニメーションを作るための機能を紹介していきます。

ドット絵はアニメーションにしてこそ、その真価を発揮すると私は認識しております。

下の画像の左の方に “+Add new Frame”というボタンがあると思います。

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

ここをクリックすると…

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

はい、フレームが増えました!

単純にこの動作でフレームを増やすのも良いのですが、”+Add new Frame”ボタンではなく、
すでに存在しているフレームにマウスをのせると、下のようなアイコンが出てきます。

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

これをクリックすると複製したフレームができるはずです!

この複製したフレームの絵を動かしたり編集したりしながら、フレームをどんどん増やすことでアニメーションが作れるのです。

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

試しにこの赤いボールを動かしてみました。

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

背景が透明だったので、少し寂しいですね。
このような時役に立つのがレイヤー機能です。

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!

上の画像のレイヤーパレットの”+”ボタンをクリックするとレイヤーが追加されます。

今回はこの新しくできたレイヤーに背景を作ります。

ものすごく簡単!ドット絵アニメがサクっと作れるオンラインエディタ「Piskel」をご紹介!
※ドラクエの戦闘シーン(7以前のヤツ)の背景をイメージしました。

2つのレイヤーを合わせて作ったのがこちらです。

New Piskel-6

背景とボールは全く関係ないですが、にぎやかになっていい感じ!

本気を出してみた

どんどん楽しくなってきたので、本気を出してみようと思います。

自分のGIFアニメを作ってみました。

New Piskel-2

続いてよねちゃん!

New Piskel-10

二人ともポケモン(金銀くらいまでのヤツ)とかに出てきそうですよね。
我ながら力作ではないかと満足しております。

〆(まとめ)

いかがでしたでしょうか!?

ドット絵かわいいですよね。「Piskel」を使えば、ボールのアニメだと20分、キャラクター系のアニメだと1時間くらいで完成します。
ドット絵を書く事自体に慣れればもっと早く作れるかもという感触を得ました。

ちなみにこの「Piskel」はオンラインだけでなく、自分のPC上にダウンロードして使う事もできます。
Win版、Mac版ともに用意されています。

ダウンロードページ

是非みなさんもドット絵アニメにチャレンジしてみてくださいね〜

學展の開催概要はこちらから >