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

色の流れを安定させる

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

基本操作

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

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

/new-medias/drawing/drawing-palette-ios-overview.jpeg
iOS のパレット全体
/new-medias/drawing/drawing-palette-desktop-overview.png
デスクトップのパレット全体

色を生成して整理する

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

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

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

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

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

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

色を一つずつドラッグせずにパレット構造を整理したい場合は、Reorder/Sort を使います。 このダイアログでは、適用前に結果をプレビューでき、昇順 / 降順の切り替え、Luminance ソート、複数セル選択中の選択範囲内ソートに対応しています。

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

/versions/d30/1.30.2/da_palette_sorting_has_preview.png
パレット Reorder/Sort のプレビューとソート設定
/versions/d30/1.30.2/da_palette_smart_grouping.gif
パレット Reorder/Sort のスマートグループ化

色補間

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

色補間の例
  • 横 / 縦補間は、アクションバーからでもメニューからでも実行できます。
  • HSV / RGB モードで、より自然な変化か、より機械的な変化かを選べます。
  • 明暗段階の整理では、始点色と終点色が決まっていると特に効果的です。
/versions/r51/color_interpolation_mode_en.png
補間モードの選択
パレット補間の手順

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

Menu ▸ Palette ▸ Generate From を使うと、キャンバス、参考画像、外部画像から直接パレットを作れます。

  • 生成元として、現在の作品、参考画像、個別に読み込んだ画像を選べます。
  • 色数は生成時に指定する方式で、事前に固定しておく必要はありません。
  • 半透明色の除外は、必要に応じて生成途中で選べます。
  • 生成後は導入フローへ進むため、現在のドキュメントへどう取り込むかを最後に決められます。
作品からパレットを生成
サンプリングのヒント
  • JPG は圧縮由来の近似色が増えやすく、パレット生成にはあまり向きません。
  • 半透明ピクセルが多い画像では、用途に応じて除外するかどうかを決めると整理しやすくなります。
  • Resprite 側でも色をまとめ直して、使いやすい形に整えます。
/versions/r46/remove_semi_colors_en.jpeg
半透明色を除外

入口の位置だけを先に確認したい場合は、このメニュー画像がいちばん分かりやすいです。

/new-medias/drawing/drawing-palette-generate-from-menu.png
Generate From メニュー

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

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

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

対応形式:

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

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

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

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

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

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

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

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

iOS で現在使える高度な機能

自動色置換

iOS では Menu ▸ Palette ▸ 自動色置換 を使うことで、パレット上の色と作品内の同色ピクセルを連動させられます。

これは全体的な配色調整に向いています。

  • パレットの色を変更すると、その色を使っているピクセルもまとめて置き換わる
  • 昔ながらのインデックスカラー編集に近い感覚で使える
  • 非常に大きい作品では、再割り当てに少し時間がかかることがある

iOS で最終的な色調整を詰めることが多いなら、特に価値の高い機能です。

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

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

パレットまわりの設定

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

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

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

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

/doc-imgs/color-picker-with-sliders.jpeg
スライダー型カラーピッカー

材質カラースフィア

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

/versions/r53/material_color_sphere_demo_with_isometric_grid_snapping.gif
材質カラースフィア

HSL スペクトル

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

/versions/r52/hsl_spectrum_mode.png
HSL スペクトルモード

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

/versions/r52/hsl_spectrum_mode_color_picker.png
HSL スペクトルのカラーピッカー

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

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

/versions/r48/radial_brush_control.png
円形パレットとブラシコントロール

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

/versions/d28/wheel_color_picker_en.png
カラーホイールピッカー

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

続けて読む