Piskel

Piskel の概要や使い方を紹介しています

Piskel を紹介しているページです
 はてなブックマークに追加  Twitter でつぶやく  Facebook でシェア  mixi でつぶやく  Pocket に登録

“ GIF アニメ ” や “ スプライシート ” を作ることができるドット絵エディタ!「Piskel」。

Piskel
制作者 Julian Descottes
対応 -

Download (デスクトップアプリ)
Download (ウェブ版)

Piskel

“ GIF アニメ ” や “ スプライシート ” の制作を行うことができるドット絵エディタ。
ドット絵キャンバスを使ってフレーム(静止画)を複数枚作成し、それらを元に GIF アニメやスプライトシート(PNG)を作成することができます。
指定したフレームを複製する機能や、前後のフレームを薄く表示する “ オニオンスキン ”、アニメをプレビュー再生する機能、レイヤー、左右対称ペン、回転 / 反転、パレット... などの機能が付いています。

「Piskel」は、GIF アニメやスプライトシートの作成に対応したドット絵エディタです。
専用のドット絵キャンバスを使い、GIF アニメやスプライトシート(PNG)※1 の制作を行うことができる 2D アニメ制作ツールで、パラパラマンガを描く要領で手軽にアニメを作成できるところが最大の特徴。
1 作成したフレームを連結せず、個別に保存することもできる。
インターフェースは英語ですが、基本的に静止画(フレーム)を作成していくだけなので操作は簡単。
また、

  • 作成したフレームを複製する機能※2
  • 前後にあるフレームの内容を、半透明で薄く表示する “ オニオンスキン ”
  • アニメのライブプレビュー機能※3
  • レイヤー
などが付いているため、作業を効率よく進めていけるようになっています。
2 指定したフレーム(の特定レイヤー)の内容を、既存の全フレームを上書きコピーする “ クローン ” 機能もある。
3 作成しているアニメの内容が、常に自動でプレビュー再生される。
(プレビューをOFF にすることも可能)

ドット絵タイプのアニメーションを作成したい時にはもちろん、単なるドット絵エディタとしてもおすすめです。
尚、デスクトップアプリのほかにウェブ版も用意されているので、ブラウザ上から直接作業を行うことも可能となっています。
(ウェブ版 “ も ” あるというか、どちらかというとウェブ版が本家のような感じ)

操作の流れとしては、大まかに下記のような感じです。

  1. 「Piskel」を起動し、キャンバス上に絵を描いていきます。
    Piskel
    ホットキー “ 「Ctrl」+「Z」 ” で、アンドゥを行うことも可能です。
  2. 左上にある /Add new frame ボタンをクリックし、新規フレームを作成します。
    新規フレームを作成
    作成済みフレームの右下にマウスカーソルを合わせて /Duplicate this frame ボタンを押すことにより、該当のフレームを複製することもできたりします※4
    フレームを複製
    4 フレームの右上部分にマウスカーソルを合わせて Delete this frame ボタンを押すと、該当のフレームを削除することができる。
    (先頭のフレームは削除不可)
    フレームを削除
    ついでに、作成したフレームはドラッグ&ドロップで並べ替えることもできる。
    フレームを並べ替えすることも可能
  3. 新しいフレームが作成されます。
    新規フレーム
    そのまま、キャンバス上に絵を描いていきます。
    画面右上にある 玉ねぎ ボタンをクリックすることにより、前後にあるフレームの内容を薄く表示させることもできたりします。
    (オニオンスキン)
    オニオンスキン
  4. ある程度フレームが完成してきたら、右上のプレビュー画面の下部にある「○ FPS」欄で、アニメーションの速さを設定します。
    フレームレートを設定
    ここの数値を大きくするほど、アニメーション速度も速くなります。
  5. アニメーションが完成したら、画面右端にある EXPORT ボタンをクリックします。
  6. 保存画面が表示されます。
    エクスポート画面
    ここで、
    • Scale - 拡大率
    • Resolution - 画像の幅 x 高さ
    • 保存形式※5 - GIF / PNG(スプライトシート) / ZIP(個別フレーム)
    を設定し、「Download」ボタンをクリックします。
    5 PNG で保存する時は段組み(行 x 列)を、ZIP で保存する時はフレームの接頭辞を指定することができる。
    エクスポート画面
    エクスポート画面
    「Others」を選択することで、C ファイルとして保存することも可能。
    エクスポート画面
  7. 「名前を付けて保存」ダイアログが表示されるので、ファイルの保存先フォルダ&ファイル名を指定すればOK です。
  8. 現在の作業状況を保存したい時は、画面右端にある SAVE ボタンをクリック → 保存オプションが表示されるので、「Save as...」ボタンを押してファイルの保存を行います。
    保存画面
    保存した .piskel ファイルは、画面右端にある IMPORT ボタンをクリック → 「Browse .piskel files」ボタンから読み込めるようになっています。
    インポート画面
  9. その他、画面右端にある PREFERENCES ボタンをクリック → 「Pixel Grid」欄で、グリッド線の太さを指定することも可能となっています。
    (デフォルトでは、グリッド線が無効化されている)
    設定画面
    グリッド線を表示

ちなみに、画面右側にある「Layers」パネル内では、レイヤーに関する操作を行うことができます。

「Layer」パネル
ここでは、
  • 新しいレイヤーを作成する
  • 選択中のレイヤーを、一つ上に移動する
  • 選択中のレイヤーを、一つ下に移動する
  • 選択しているレイヤーの名前を変更
  • 選択中のレイヤーと、該当レイヤーの下にあるレイヤーを結合
  • 選択中のレイヤーを削除
といった操作を行うことができます。
また、その下にある「Transform」パネル内では、アクティブなレイヤーを
  • 左右反転 - 左右反転
  • 反時計回りに 90 度回転 - 反時計回りに 90 度回転
  • 既存フレームにクローン - 既存の全フレームにクローンコピー
  • 中央寄せ - 中央寄せ
したりすることができます。
「Transform」パネル
ついでに、一番下にある「Palettes」パネル内には、よく使う色を登録しておくことができます。
「Palettes」パネル
色の登録は、右側にある Manage this palette ボタンをクリック → 「Edit Pallete」という画面が表示されるので、上部の + ボタンをクリック → 右側にあるカラーピッカーを使い、登録したい色を選択します。
(登録した色の削除を行う時は、目的とする色の右上にある × を押す)
Edit Pallete
色の登録が終わったら、右下にある「Save」ボタンをクリックします。

最後に、ツールボックス内にある各ツールの機能は、大体次のようになっています。

  •  - ペンツール
  •  - 塗りつぶしツール
  •  - 消しゴムツール
  •  - 矩形描画ツール
  •  - パン(移動)ツール
  •  - 選択ツール
  •  - 明るさ調整ツール
  •  - カラーピッカー
  •  - 左右 / 上下 対称線描画ツール
  •  - 同一の色領域塗りつぶしツール
  •  - 直線ツール
  •  - 楕円ツール
  •  - 連続した領域一括選択ツール
  •  - 投げ縄選択ツール
  •  - ディザリングツール
このツールボックスの上部にある を使うことで、ペンサイズを調整することも可能となっています。

 はてなブックマークに追加  Twitter でつぶやく  Facebook でシェア  mixi でつぶやく  google+ で共有  Pocket に登録
Piskel TOPへ

Piskel を紹介しているページです