【Aseprite入門】各種ツールの基本

Asepriteツール

選択ツール【★★★】

選択ツールはエディタ右側のツールバー最上部にあります。全5種。

ピクセルの移動や変形、回転などの様々な操作を行う対象領域を選択する目的で使用します。

種類は多いですが、基本的には単系選択と同色選択を使うことが多いと思います。また、基本的な操作は共通なのでその二種類を使えるようになっておけばほかの選択ツールも簡単にマスターできます。

Point:ほぼすべての選択ツール共通で以下の操作が有効です。
・Shiftを押しながら選択開始:選択範囲の加算
・右クリックで選択:選択範囲の減算

矩形選択【★★★】:M

のアイコンで示される選択ツールです。

・長方形の形で選択を行うツール。

・ドラッグ中にShiftを押すことで正方形スナップ

・ドラッグ状態でスペースキーを押すと形状を保ったまま一の変更が可能(地味に便利です)

・Shiftを押しながら選択を開始することで選択範囲の加算が可能

・右クリックドラッグで選択すると選択範囲の減算が可能。

同色選択【★★★】:W

のアイコンで示される選択ツールです。

・クリックした位置の色と同色で尚且つつながっている領域を自動的に選択するツール

・他選択ツールと同様、Shiftで複数選択、右クリックで選択解除が可能です

円形選択【★★】:Shift+M

のアイコンで示される選択ツールです。

・円形の形で選択を行うツール。スナップや位置変更は矩形と同様の操作で可能。

投げ縄選択【★★】:Q

のアイコンで示される選択ツールです。

・範囲を囲むようにして選択するツール

*始点と終点が離れていると、最短の直線で自動的に結ばれます。

多角形投げ縄選択【★】:Shift+Q

のアイコンで示される選択ツールです。

・多角形を描画して選択できるツールです。少し複雑ですが、以下のように操作します。

  1. 選択の始点を“クリック”
  2. 最初の辺の終点でマウス左ボタンを押し、そのまま離さずにドラッグすると次の辺を描画できます。
    (ここでドラッグせずクリックしてしまうと描画が終了してしまうので注意以下画像は失敗例)
  3. 次の辺の描画が始まったらマウスボタンを離してOK。辺を描画。
  4. 2.3.を繰り返し、描画したい形が完成したらクリックして終了。

・多角形の選択を行いたい場合に有用です。使いこなせばかなりスピーディ。
*操作が難しいので私は矩形の加算/減算選択で代用して済ませてしまうことが多いです。

ペンツール:B【★★★】

:パレットで指定されている色を描画します。そのまんまですね。

ペン先のサイズ変更 【★★★】

ペン先のサイズ変更はエディタ上部のメニューから行えます。(カーソルを合わせてドラッグ)

Pixel-perfect 【★★★】

Pixel-perfectにチェックを入れると滑らかな(=ドットが重ならない)線を描くくことができます。
→ドット絵を作成する際にとても便利な機能です。覚えておきましょう。

ペン先の変更【★★】

エディタ上部メニューからペン先の種類を選択できます。

丸型:

四角型:

直線型:

四角型、直線型は角度調整も可能です。(範囲は-180°~180°)

インク 【★】


上のアイコンではインクの設定を行うことができますが、ここでは詳細な説明は割愛します。公式のドキュメントページを以下に貼っておきます。
(基本的にSimple Inkが選択されていれば問題ありません)

https://www.aseprite.org/docs/ink/

Dynamics(筆圧描画設定)【★】


上のアイコンでは筆圧による描画の設定を行うことができます。基本機能の理解を前提としている中~上級者向けの機能のため、このページでの解説は行いません。
(初心者の方はとりあえずノータッチでOKです)

*そのうち記事を作成予定のため、公開次第こちらにもリンクを貼っておきます。

スプレーツール:Shift+B【★★】

:設定したブラシの範囲内にスプレーのように描画を行います。

スプレー設定【★】

スプレーツールは上部メニューにある「Spray」の各項目で描画設定を行うことができます。
  

  • Spray Width:吹き付けるピクセルの幅を指定。値が大きいほど広範囲。
  • Spray Speed:吹き付けるスピードを指定。値が大きいほど塗りが早くなる。

消しゴムツール:E【★★★】

:消しゴムツールは描画した線を消すことができます。
サイズなどの基本的な設定はペンツールと同様です。(唯一異なるのは以下の透過度設定)

消しゴムの薄さ(透過度)の設定【★★】

上部メニューの「Opacity」の値を設定することで消しゴムをかけたときの透過度を設定可能。

値は0~255で設定可能で数値が少ないほど消すときの濃さ(透過度)が低くなる。

スポイトツール:I【★★★】

:スポイトツールはクリックした位置の色情報を取得します。
右クリック:取得した色を描画色に設定する
左クリック:取得した色を背景色に設定する

Pick設定【★】

上部メニュー「Pick」では取得するカラー情報の形式を指定できます。
詳細な解説は割愛しますが、基本的にはデフォルト[Color+Alpha]で問題ありません。

Sample設定【★】

上部メニュー「Sample」ではカラーを取得レイヤーを指定できます。

・All Layers:すべてのレイヤー。表示上の見た目通りに取得。
・Current Layer:現在作業を行っているレイヤーが対象。
・First Reference Layer:参照レイヤー*(下絵など)から情報を取得します。

*補足:参照レイヤーからの取得は以下のようなイメージです

ズーム・ハンド・移動ツール【★★★】

ズーム、ハンド、移動の三種類のツールは代替操作を行うことでほかのツールを使用中でも同様の操作を行うことができます。ほとんどの場合代替操作で作業を進めるため、以下に操作方法をまとめておきます。機能の詳細については各子項目を参照してください。

ツール名操作説明
:ズームツール
:ハンドツール
:移動ツール
マウスホイール
マウス中ボタン+ドラッグ
Ctrl+ドラッグ
キャンバスの拡大・縮小
キャンバスの表示位置調整
レイヤー要素の位置移動

ズームツール:Z or マウスホイール 【★★★】

:ズームツールは表示キャンバスの拡大/縮小を行います。マウスホイールで操作可能。


ツール選択状態での上部メニューボタンでそれぞれ以下のような位置合わせもできます。
・100%:ピクセル基準で100%表示を行います。遠目に確認したいときに使用。
・Center:拡大値をそのままでキャンバスを中心に合わせます。
・Fit Screen:モニターサイズに合わせて全体を表示します。(一番出番があるのはこれ)

ハンドツール:H or マウス中ボタン 【★★★】

:ハンドツールはキャンバスの表示位置を調整できます。マウス中ボタンを押しながらドラッグで同様の操作が可能。(上部メニューの挙動はズームツールと共通)


ツール選択状態での上部メニューボタンでそれぞれ以下のような位置合わせもできます。
・100%:ピクセル基準で100%表示を行います。遠目に確認したいときに使用。
・Center:拡大値をそのままでキャンバスを中心に合わせます。
・Fit Screen:モニターサイズに合わせて全体を表示します。(一番出番があるのはこれ)

移動ツール:V or Ctrl+ドラッグ【★★★】

:移動ツールはレイヤー内の要素を移動させます。Ctrlキーを押しながらドラッグで同じ操作が可能です。

上部メニューには「Auto Select Layer」というチェックボックスがあります。

これは異動ツールでドラッグする際に始点にあるピクセルが含まれるレイヤーが異動対象として自動的に選択される機能のON/OFF切り替えを行います。(Ctrl+ドラッグでの操作の場合、以下の画像のように選択するレイヤーが青い枠線で表現されます)

スライスツール:C【★】

:スライスツールは、スプライトの領域を分割し、各分割領域ごとに名前やラベルといった情報付与を行うツールです。データを取り扱う際に内部的に登場する機会はありますが、単体で使用する場面は少ない上級者向けの機能になります。

スライス領域の設定【★】

スライスツールを起動した状態で、マウスをドラッグして領域を選択できます。
 

選択ツールなどと同様に、スライス領域の移動や範囲の編集も可能です。
(領域が重なって編集がうまくいかないときは以下の画像のようにいったんキャンバスの外に出して調整するのもおすすめです)

不要なスライスは「Deleteキー」で削除可能です。

スライスプロパティの編集 【★】

作成したスライスをダブルクリックすることで、スライスのプロパティを表示できます。
   

スライスプロパティでは以下の項目を設定できます。

  • Slice Name:スライスの名称を設定します。後で確認したときに分かりやすい名前を設定しましょう
  • Bounds:キャンバス内のスライスの境界座標を設定します。数値で調整したい場合ここを書き換えます。
  • 9-Slices:9-slice scalingの設定を行うための座標情報を設定します。発展的な内容になるため、ここでの説明は割愛し、別記事で詳細に解説予定です。
  • スライス内のスプライトのベース位置(回転軸や重心のイメージ)の座標を設定します。

スライスツールの説明部分の作成に当たっては、以下の公式ドキュメントページを参考にしました。併せて確認することで理解を深めることにつながると思います。

https://www.aseprite.org/docs/slices/

バケツツール:G【★★★】

:バケツツールは塗りつぶしを行います。

閾値の設定【★】


上部メニュー「Trerance」の値を変更することで塗りつぶし範囲の閾値を調整できます。
→値を大きくするほど、似た色を同一範囲として認識して塗りつぶします。
   

同一色の一括塗りつぶし【★★】


上部メニュー「Continuous」のチェックを外すことで、同じレイヤー内にある同色を繋がっていなくても一括で塗りつぶすことができます。(繋がっている領域で塗りつぶすか、色で塗りつぶすかの違い)

詳細設定【★★】

上部メニューのボタンから、以下のような詳細設定を行うこともできます。

・Stop at Grid:チェックを入れると表示されているグリッド線*基準で塗りつぶしを行います。
・Refer only active layer:チェックすると現在選択中のレイヤーが塗りつぶしの対象になります
・Refer visible layers:チェックすると表示状態の全レイヤーが塗りつぶしの対象になります
・Pixcel Connectivitiy:ピクセルの繋がりの判定を切り替える設定です。(4方向or8方向の意味)

*グリッド線表示設定方法は以下の記事で解説しています

グラデーションツール:Shift+G【★★】

:グラデーションツールは、使用することで簡単にグラデーション描画を行うことができる機能です。やや難しい内容ですが、かなり有用な機能なので基本をマスターした後は優先的に覚えたい機能の一つです。

描画領域の設定【★★】


グラデーションツールも、バケツツールと同様の設定項目で描画領域を調整します。
項目名や設定方法はすべて共通ですので、内容は前述のバケツツールの内容を参照してください。
→「特殊な塗りつぶしツール」と認識しておくとわかりやすいです。

グラデーションタイプの設定【★★】


上部メニューにある左のボタンから、グラデーションの形を以下2種類から選択することができます。
・Linear Gradient:線形のグラデーション描画を行います
・Radial Gradient:円形のグラデーション描画を行います

ディザリングの設定【★★★】

上部メニューのプルダウンメニューでは、ディザリング(境界面)の設定ができます。

各ディザリングは実際に試してみるのが手っ取り早いですが、例えば以下のような表現ができます。
  

透過度の設定【★★】



上部メニューの「Opacity」の値を設定することで透過度を設定可能です。
値は0~255で設定可能で数値が少ないほど描画の濃さ(透過度)が低くなります。

図形ツール【★★】

    
ピクセルで様々な図形を作成する際に使えるツールです。書きたいものに合わせて有効に使っていけると効率的に作業を進められます。
基本的な挙動は選択ツールに近いので、他のツールと比べて直感的に習得しやすいかと思います。

直線ツール 【★★】 :L

:ドラッグ操作で直線を引けるツールです。
Shiftキーを押しながら操作すると以下のようにある程度の角度感覚でスナップできます。

曲線ツール 【★★】 :Shift+L

:ドラッグ操作で曲線を引けるツールです。少し操作が独特なのでいかに手順をまとめておきます。

操作手順詳細

  1. 曲線の始点でクリックし、終点までドラッグする。(この時、マウスボタンを離さない)
    →ここでボタンをクリック後に離してしまうと、始点と終点が同じ位置に設定されてしまい、以下のようなループ構造になってしまいます。↓失敗例
  2. ドラッグしてボタンを離すと、その位置が曲線の終点として設定される
  3. マウスを動かしてクリックすることで、始点に近いほうの曲線のポイント(支点)を設定する(ドラッグでなくてOK)
  4. 3.と同様の操作で、終点に近いほうの始点を設定して完了

長方形ツール【★★★】:U (二回押すと塗りつぶし有)

:長方形を描画するツールです。内側を塗りつぶすものと塗りつぶさないものの二種類をUキーを押すごとに切り替えが可能です。

*どちらもShift入力で正方形でスナップが可能です。

円形ツール 【★★】 :Shift+U (二回押すと塗りつぶし有)

:円形を描画するツールです。内側を塗りつぶすものと塗りつぶさないものの二種類をShift+Uキーを押すごとに切り替えが可能です。

*どちらもShift入力で正円形でスナップが可能です。

投げ縄ツール【★】:Q

:範囲を囲むようにして塗りつぶし描画をするツールです。

*始点と終点が離れていると、最短の直線で自動的に結ばれます。

多角形投げ縄選択【★】:Shift+Q

:多角形を描画できるツールです。少し複雑ですが、以下のように操作します。

操作手順詳細

  1. 選択の始点を“クリック”
  2. 最初の辺の終点でマウス左ボタンを押し、そのまま離さずにドラッグすると次の辺を描画できます。
    (ここでドラッグせずクリックしてしまうと描画が終了してしまうので注意)
  3. 次の辺の描画が始まったらマウスボタンを離してOK。辺を描画。
  4. 2.3.を繰り返し、描画したい形が完成したらクリックして終了。

ブラーツール(ぼかし)【★★】:R(ブラー⇔ジャンブル切替)

:ブラーツールはピクセルをぼかすことができます。(解像度高めのイラストを仕上げたい場合などに重宝します)
  

透過度(実質強度)の調整【★★】

上部メニューの「Opacity」の値を設定することで透過度を設定可能。
→ぼかしツールでは実質的にぼかしの強さとして機能します。
(左:255、右:125)
  
値は0~255で設定可能で数値が少ないほど描画の濃さ(透過度)が低くなります。

ジャンブルツール(混ぜ)【★★】:R(ブラー⇔ジャンブル切替)

:ジャンブルツールはピクセルを混ぜるような編集が実現できます。
基本的な上部メニューの設定項目はブラーツールと共通です。

透過度を上げると混ぜながらぼかすような編集も可能です。

最後に

お疲れさまでした。このページでは各ツールの基礎になる部分をかいつまんで紹介しました。各ツールはその特性を理解し、有効に使っていくことで様々な表現が可能です。
このページの内容をすべて完璧に暗記する必要はありません。ツールバーを眺めていて「これなんだったっけな」というときにこのページで再確認するといった使い方かと思います。
今後も適宜更新や他情報のまとめに取り組んでいきますので、何か不明点等がありましたら気軽にコメントをください。
最後に、このようなまとめ情報が皆さんの作業に少しでも役立ていただけていたら、うれしいです。ありがとうございました。

コメント

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