ドット絵が描けるアプリPiskelの全ツール説明書

イラスト・デザイン

こんにちは、しゃも(@ShamoEi_Shamo)です。

PiskelというWebアプリのツールについて紹介します。

  • ドット絵の基本的なツールを知りたい
  • Piskelで使っていない機能を知りたい
  • 英語がよくわからないから日本語で知りたい

という方におすすめです。

Piskelには、ドット絵の標準的な機能が豊富に備わっています。
さらに、UIもわかりやすく使いやすいと個人的には感じます。

ぜひ、手元でPiskelを動かしながら試してみてください!

ドット絵が描けるアプリPiskelの全ツール説明書

よく使うショートカットキー

ツールを説明する前に、大事なショートカットキーを教えます。

ズバリ、
command/ctrl + z 【Undo】

command/ctrl + y 【Redo】
です!

Undoは特に絵を描く時などでよく使われるショートカットキーなので覚えておきましょう!

ショートカットキーは、画面左下のキーボードマークでカスタマイズできます。

Piskelのツールの特徴

ツールそれぞれ、UIにカーソルを合わせることで付加情報が表示されます。

例えば
「[cmd] 上下反転」など、command/ctrlshiftを押すことで、同じツールでも違う効果を得られます。

便利なものもあったりするので、気になるツールはカーソルをあてて見てみましょう!

この記事ではこの付加情報も載せてあります。

左のサイドバー

サイドバーツール

ペンサイズ

ペンの大きさを変更できます。

  • 1px
  • 2px
  • 3px
  • 4px

この4つから選択できます。

ペン

自由にドット絵を描けます。
選択している色で塗ることができます。

線対称

線対称にドット絵を描くことができます。

デフォルト左右対称
command/ctrl上下対称
shift左右・上下対称

塗りつぶし

連続する同じ色のエリアを、選択している色で塗りつぶします。

同じ色の塗りつぶし

連続していなくても、同じ色であれば全て塗りつぶします。

デフォルト同じ色を塗りつぶす。
command/ctrl全レイヤーの同じ色を塗りつぶす。
shift全フレームの同じ色を塗りつぶす。
command/ctrl + shift全レイヤー・フレームの同じ色を塗りつぶす。

消しゴム

消します。

サイズはペンのサイズに関係します。

直線

線を引くことができます。

デフォルト線を引く。
shift綺麗な直線を引く。

長方形

長方形を描けます。

デフォルト長方形を書く。
shift正方形を書く。

楕円を描けます。

デフォルト楕円を書く。
shift正円を書く。

動かす

選択しているレイヤーのドットを全て移動させます。

デフォルトレイヤー上のドットを全て移動させる。
command/ctrl全レイヤーにも適用させる。
shift全フレームにも適用させる。
command/ctrl + shift全レイヤー・フレームにも適用させる。

連なる同じ色選択

連続している同じ色を全て選択します。

「選択」の使い方としては、
選択 → コピー → ドラッグ or レイヤーやフレームを変える → ペースト
選択 → 選択部分を移動する

の2通りが考えられます。

デフォルト連続している同じ色を全て選択する。
command/ctrl + c選択部分をコピーする。
command/ctrl + v選択部分をペーストする。
shift選択部分を移動する。

長方形選択

長方形で選択できます。

「選択」の仕組みについては「連なる同じ色選択」と同様です。

投げ縄選択

投げ縄で選択できます。

「選択」の仕組みについては「連なる同じ色選択」と同様です。

明るみ

明るさや暗さを変えられます。

デフォルト塗った部分を明るくさせる。
command/ctrl塗った部分を暗くさせる。
shiftドラッグ1回の間に対して、
1ピクセルにつき1回だけ適用させる。

ディザリング

網目のように塗ることができます。

左クリックと右クリックで、それぞれ選択色について逆の色でディザリングできます。

スポイト

色をコピーできます。

左クリックでは左側の方の色を、右クリックでは右側の方の色を変えられます。

色の設定

2色選ぶことができます。

左側の方は左クリック、右側の方では右クリックで色を使用できます。

透明の色を選択することで、実質消しゴムのように使えることができます。

右のサイドバー

表示画面

実際のドット絵が全レイヤーを含めて表示されます。
フレームがあれば、下のFPSのスピードで動きます。

左下のオニオンマークは、前後のフレームの情報をキャンバスで表示できます。

レイヤー

+ペンマージバツ
レイヤーを増やす上へ下へ名前変更下レイヤーと合成消去

右上の「目のマーク」をONにすると、他のレイヤーの色を薄く表示させることができます。

「Layer1」をダブルクリックしても、名前変更ができます。

「α」は透明度です。0~1の間で入力することで、そのレイヤーを透過させられます。

変換

左上から右に紹介していきます。

反転

エディター画面のドットを反転できます。

デフォルト左右の反転
option上下の反転
command/ctrl全レイヤーに適用させる。
shift全フレームに適用させる。

回転

エディター画面のドットを回転します。

デフォルト反時計回り
option時計回り
command/ctrl全レイヤーに適用させる。
shift全フレームに適用させる。

全フレームにコピー

羊のようなマークです。(クローンという意味)

エディター画面を全フレームにコピーします。
ただし同じレイヤーのみです。

中心に配置

エディター画面のドットを中心に配置します。

デフォルト中心に配置
command/ctrl全レイヤーに適用させる。
shift全フレームに適用させる。

トリミング

キャンバスのサイズを使われている長方形のサイズにします。

右のサイドタブ

設定

Misc(色々変更できる)

Background透明背景のカラーを変更できる。
Layer opacity他レイヤーの情報を薄く表示させる透明度を変更できる。
Maximum FPS表示画面におけるFPSの最大値を変更できる。
Color format色のフォーマットをHexかRGBかに変えられる。

グリッド

Enable gridグリッドを表示するかどうか。
Grid sizeグリッドの太さ
Grid spacingグリッドの表示間隔の広さ
Grid colorグリッドの色(デフォルトは透明)

タイルモード

タイルモードでは、左右または上下、もしくは両方を連続させたいと思う時に便利です。
例えば、ゲームのスクロールで連続して背景を表示させたい時などには、左右を違和感なく接続させる必要があります。

リサイズ

キャンバスのサイズを決定できます。

もちろん、長方形のドット絵も描くことができます。

Maintain aspect ratio縦と横の比率をリサイズ前と一致させる。
Resize canvas contentドットを維持してリサイズする。

また、デフォルトのサイズも設定できます。今後新しくドット絵を描く時、64×64で描きたいならそう設定すると楽です。

セーブ

タイトルや説明を加えてセーブできます。
Publicにして誰でもアクセス可能にすることもできます。

Save to your gallery」が断然おすすめです。

.piskelという拡張子のファイルで、自分のPCにダウンロードすることも可能です。

エキスポート(出力)

Scaleで出力サイズを倍数で変えられます。
数字で変えることも可能です。
ツイッターに投稿するものだと、300px以上がいいと個人的には思います。

GIF、PNG、ZIPなどなどで出力できます。

画像ならPNG、フレーム動画ならGIFがいいと思います。

完成したらここでダウンロードして、ツイッターなどで公開しましょう!

インポート

自分で持ってる画像やドット絵をインポートすることもできます。

また、セーブの時にあった.piskelのファイルもここで開けます。

バックアップなども取れます。

まとめ

たくさんの機能がありますね!

ツールを覚えるのは「習うより慣れろ」だと思うので、色々と実験してみてください。

この記事を読んで、新しいツールの発見があったら幸いです。

コメント

タイトルとURLをコピーしました