メインコンテンツまでスキップ

色の流れを安定させる

パレットは単なる色の一覧ではありません。どの色をどう拾うか、陰影の段階をどう並べるか、プリセットをどう再利用するかまで含めて、制作全体のリズムを支えます。まずは基本操作を押さえ、そのあとで補間、サンプリング、プリセット、高度な置換機能へ進むのが自然です。

基本操作

パレットウィンドウ
パレットウィンドウ
  • 色をクリックすると、そのスウォッチが選択され、現在のペンカラーになります。
  • ドラッグで並べ替えると、パレット内の配置を直接整理できます。
  • スウォッチや空きスロットをダブルクリックすると、現在のペンカラーを書き込めます。
  • 色の削除は、iOS ではパレット外へドラッグ、デスクトップ / Android では選択後に削除操作を使う形です。
  • スクロール表示にも対応しているので、色数が増えても一覧しやすく保てます。
パレットのスクロール

まずはプラットフォームごとの全体像を見たい場合は、次の2枚がいちばん把握しやすいです。

iOS のパレット全体
iOS のパレット全体
デスクトップのパレット全体
デスクトップのパレット全体

色を生成して整理する

色名、タイトル、よく使う操作

  • パレットのロックで、誤編集や誤削除、意図しない並べ替えを防げます。
  • 色名の表示を有効にすると、スウォッチ上に色名を出して整理しやすくなります。
  • 現在の色名を変更して、チーム内や長期運用でも分かりやすい名前にできます。
  • パレット名の表示を使えば、保存されたパレット名をウィンドウタイトルにも出せます。
  • アクションバーのショートカットから、ロック、色名表示、横 / 縦補間、プリセット読み込み、現在色の削除などを素早く実行できます。

デスクトップ向けの整理機能

デスクトップとAndroidでは、キーボードやマウス、ペンタブ前提の整理機能も強化されています。

  • 複数選択と一括操作で、まとまった範囲を移動、コピー、切り取り、削除できます。
  • Shift による範囲拡張で、現在の選択を手早く広げられます。
  • Alt / Option + マウスホイールで、描画の流れを止めずにパレット色を前後へ移動できます。
  • HEX のコピーと貼り付けを、デスクトップ版の色入力入口から行えます。色編集ボタン、Pen Color、パレットスロット、マテリアルスフィアのベースカラーに対応し、パレットの単色コピー時は HEX 値もシステムクリップボードへ書き込まれます。
デスクトップの複数選択と一括操作
デスクトップの複数選択と一括操作
色入力入口での HEX コピーと貼り付け
色入力入口での HEX コピーと貼り付け

パレットの Reorder/Sort(iOS R56+、デスクトップ / Android v1.30.2+)

色を一つずつドラッグせずにパレット構造を整理したい場合は、Reorder/Sort を使います。 このダイアログでは、適用前に結果をプレビューでき、昇順 / 降順の切り替え、色相、彩度、明度、輝度(Luminance)、RGB チャンネルによるソートに対応しています。複数セル選択を使える流れでは、選択範囲だけをソートすることもできます。

スマートグループ化を使うと、並べ替えた色をより自然なグループ単位で行分けできます。ソート後も色階段や色相グループを読み取りやすく保ちたいときに便利です。

iOS R56+ では、GPL パレット読み込みプレビューでも同じソート操作を使えます。置き換えまたは追加を選ぶ前に、最終的な並びを確認できます。

iOS のパレットソートとスマートグループ化
iOS のパレットソートとスマートグループ化
パレット Reorder/Sort のプレビューとソート設定
パレット Reorder/Sort のプレビューとソート設定
パレット Reorder/Sort のスマートグループ化
パレット Reorder/Sort のスマートグループ化

色補間(iOS R51+、デスクトップ / Android v1.32.1+)

色補間は、2つの基準色から中間色を自動生成する機能です。横方向にも縦方向にも使えるため、空きを埋める用途にも、既存の色階段をきれいに整え直す用途にも向いています。

色補間の例
  • 横 / 縦補間は、アクションバーからでもメニューからでも実行できます。
  • HSV / RGB モードで補間に使う色空間を選べます。HSV は色相、彩度、明度に沿って変化し、RGB は赤、緑、青の各チャンネルを個別に補間します。必要な色相経路に合うモードを選択してください。現在の設定は保持されます。
  • 明暗段階の整理では、始点色と終点色が決まっていると特に効果的です。
パレット補間の RGB モード
パレット補間の RGB モード
パレット補間の手順

キャンバス、参考画像、画像ファイルから生成する

メニュー ▸ パレットから、iOS ではから生成します、デスクトップと Android では生成元を選び、抽出元を指定します。

  • 画像:Windows と macOS では直接ファイル選択画面が開きます。iOS と Android では先に画像の読み込み元を選びます。
  • キャンバス:現在表示している合成結果だけでなく、通常の描画レイヤーの各フレームから色を抽出します。
  • 参考画像:iOS は最前面の参考画像、デスクトップと Android は選択中の参考画像を使います。

案内に従って色数の上限を指定します。半透明色が多い場合は、それらを除外するかどうかも選べます。続いて 1 行の色数を指定し、既存のパレットと置き換えるか、追加するかを選びます。確認の順番はプラットフォームによって異なります。置き換えボタンは iOS の交換、デスクトップと Android の置換です。追加を選ぶと既存の色を残し、その下に生成した色が加わります。どちらも描画済みのピクセルの色は変えません。

画像からの操作手順は、画像から色を抽出してパレットを作る方法をご覧ください。

作品からパレットを生成
サンプリングのヒント
  • JPEG 圧縮による細かな色の違いを避けたい場合は、PNG が適しています。
  • パレットで半透明色を使いたい場合は、除外せずに残してください。
  • 上限に合わせて色を絞り込むため、元画像のすべての色や色見本の順序が残るとは限りません。デスクトップと Android では、大きな外部画像に近似サンプリングを使う場合もあります。既存の色表を使うなら、GPL または RPL ファイルを読み込んでください
半透明色を除外
半透明色を除外

以下のメニュー画像で、抽出元の選択肢を確認できます。

パレットの生成元メニュー
パレットの生成元メニュー

プリセット、インポート、エクスポート

Menu ▸ Palette から、保存、読み込み、インポート、エクスポート、クリア、再配置をまとめて行えます。よく使う流れは次のとおりです。

  • プリセット保存で、よく使う配色を次の作品にも使い回す
  • ファイル出力で、RPL または GPL として書き出す
  • ファイル読込で、外部パレットを現在のドキュメントに入れる
  • クリア / 再配置で、パレット構造を整理し直す

対応形式:

  • RPL (.rpl) は Resprite 独自形式で、グリッド上の位置情報も保持します。
  • GPL (.gpl) は他ツールとの受け渡しに向いた汎用形式です。

特定の素材や用途向けに用意されたパレットは、パレット素材ページからダウンロードできます。

作品を開き、iOS ではRPL/GPLファイルをロードします、デスクトップと Android ではRPL/GPL ファイルをインポートを選びます。GPL ではプレビューで配置と 1 行の色数を指定でき、RPL は保存済みの配置を保持します。iOS の交換、デスクトップと Android の置換は現在のパレットを置き換え、追加は既存の色の下に読み込んだ色を加えます。iOS の自動置換がオンでも、読み込みで作品のピクセルを新しい配色に変換することはありません。GPL/RPL の読み込みと Lospec のトラブル対処をご覧ください。

iOS、デスクトップ、Android では、常に置換し、確認しないを使うと、外部パレットの読み込みで置き換え/追加の確認を省略できます。パレット設定の現在のファイルに読み込むときは常に置換から解除できます。この設定はサンプリングで生成したパレットには適用されず、生成後も置き換えか追加かを選べます。

パレットプリセットマネージャー

Preferences ▸ Palette または Menu ▸ Palette ▸ Load から開けます。

主な使いどころは次のとおりです。

  • 自作パレットを保存して繰り返し使う
  • ユーザープリセットを名前変更 / 削除して整理する
  • 新規スプライト用のデフォルトパレットを決める
  • 選んだプリセットを現在のファイルへ直接読み込む
  • デスクトップではプリセット保存フォルダーを直接開いて手動整理する

リンクからパレットを取り込む

Resprite は、対応するWebリンクやアプリのディープリンクからパレットを取り込むこともできます。

  • 取り込み前にプレビューして、色数や雰囲気を確認できる
  • 取り込み先を選択して、現在のファイルかプリセット保存かを決められる
  • PixelArtPalettes、Lospec、MoonPX などのパレットリンクを直接開けるので、事前にファイルを書き出す必要がない
  • iOS では信頼済みWebサイトを管理可能で、許可したサイトをあとから設定で見直せる
  • 外部で見つけた配色を収集しやすいため、再利用の流れが滑らかになる
対応サイトのリンクからパレットを直接取り込む
対応サイトのリンクからパレットを直接取り込む

iOS専用のパレットオプション

自動置換

iOS で メニュー ▸ パレット ▸ 自動置換 をオンにし、既存の色見本を選んでから、カラーピッカーでペンの色を調整します。同じ色見本をダブルタップして新しい色を書き込むと、作品の色も置き換わります。ペンの色を変えただけでは実行されません。

元の色が完全な透明色でない場合、通常の描画レイヤーの全フレームで、元の色に完全一致するピクセルが置き換わります。現在のフレーム、レイヤー、選択範囲に限定されず、似た色も対象外です。タイルマップレイヤーの色を置き換える操作としては使えません。

Resprite はフルカラーのピクセルとして編集し、インデックスカラーの Aseprite データも読み込み時に変換できますが、ピクセルとパレット番号の対応は保持しません。パレット全体を読み込んでも自動置換は実行されません。これらの違いと iOS の手順は、インデックスカラーモードとパレットによる色の置換をご覧ください。

パレットの色見本を編集せずに色を置き換えるには、色調整色の置換を使います。

ピッカー表示と見た目の調整

パレットとカラーピッカーは別々に考えるより、まとめて整えたほうが使いやすくなります。

パレットまわりの設定

細部はプラットフォームごとに少し異なりますが、重要なのは次の項目です。

  • スウォッチサイズを変えて見やすさを調整する
  • パレット名表示でウィンドウタイトルの見え方を決める
  • 枠線表示をデスクトップで切り替えて区切りを見やすくする
  • 現在色の表示位置を調整して、手に合うレイアウトにする

カラーピッカーのレイアウト

Resprite には、色の選び方に合わせて複数のピッカーレイアウトがあります。

スライダー型カラーピッカー
スライダー型カラーピッカー

材質カラースフィア

材質カラースフィアは、ハイライト、中間色、影を素早く組み立てたいときに便利で、構造を意識した塗りにも向いています。

材質カラースフィア
材質カラースフィア

iOS R57+ とデスクトップ / Android v1.31.0+ では、材質カラースフィアに ベースカラー更新モード が追加されました。ベースカラーを現在のペン色に追従させるか、取得色と同期するか、パレット選択と同期するかを選べます。設定操作は profile メニューへまとまり、球体表示もよりピクセル UI に合う描画になりました。

iOS R57+ とデスクトップ / Android v1.31.1+ では、profile メニューから段階色をパレットへ追加できます。段階表示がオンのとき、Resprite は球面の代表色を暗い色から明るい色の順に新しいパレット行へ追加します。材質のプレビューを、そのまま再利用しやすい色階段にしたいときに便利です。

材質カラースフィアのベースカラー更新モード
材質カラースフィアのベースカラー更新モード
材質カラースフィアの段階色をパレットに追加
材質カラースフィアの段階色をパレットに追加

HSL スペクトル

HSL スペクトルは、まず色相から色を探し、そのあと彩度と明度を詰めたいときに扱いやすいレイアウトです。

HSL スペクトルモード
HSL スペクトルモード

色相全体の流れを見ながら細かく調整したい場合は、特に相性がよいレイアウトです。

HSL スペクトルのカラーピッカー
HSL スペクトルのカラーピッカー

ホイールと円形レイアウト

色相環ベースで色を探したいなら、ホイールや円形レイアウトへ切り替えられます。

円形パレットとブラシコントロール
円形パレットとブラシコントロール

円形レイアウトは、色選びとブラシ調整を一体で進めたい人に向いています。より一般的な色相環に近い操作感がよければ、ホイールレイアウトのほうが自然です。

カラーホイールピッカー
カラーホイールピッカー

よりシンプルな画面にしたい場合は、パレットやトップバーの現在色表示を残し、独立したカラーピッカーを閉じる構成も使えます。

続けて読む