2016/06/17 10:07

Sketchでカラーパレット作成

STEP1: ファイルダウンロード

try

comment

SketchファイルとプラグインのSketch Palettesをダウンロードする。Sketch PalettesをインストールしたらSketchファイルのColorページを開く。

response

no response

STEP2: ベースカラー

try

image

image

comment

まずはベースカラーを選定し、HEXの値を横にコピペする。
ここで色のモードをHSB(色相[Hue]、彩度[Saturation]、明度[Brightness])に切り替える。デフォルトではRGBになっているので文字をクリックすることでHSBに変更できる。

response

no response

STEP3: リンクカラー

try

image

comment

リンクカラーはベースカラーを元にHSBのBの値を75%にし作成する。作成したら同様にHEXの値を横にコピペする。

response

no response

STEP4: バックグラウンドカラー

try

image

comment

バックグラウンドカラーはベースカラーを元にHSBのBの値を50%にし作成する。作成したら同様にHEXの値を横にコピペする。

response

no response

STEP5: テキストカラー

try

image

comment

テキストカラーはベースカラーを元にHSBのSの値を5%、Bの値を20%にし作成する。作成したら同様にHEXの値を横にコピペする。

response

no response

STEP6: その他テキストカラー

try

image

image

image

comment

テキストカラーを元にHSBのBの値が50、75、95%の3種類のグレイ系の色を作成する。作成したら同様にHEXの値を横にコピペする。

response

no response

STEP7: アクセントカラー

try

image

image

comment

アクセントカラーは任意で決める。今回はグリーン系の色を選定する。アクセントカラーが複数ある場合は番号をつける。作成したら同様にHEXの値を横にコピペする。

response

no response

STEP8: ドキュメントカラーの登録

try

image

comment

作成したカラーを全て+ボタンを押してDocument Colorsに登録する。

response

no response

STEP9: ドキュメントカラーの書き出し

try

image

comment

プラグインのSketch Palettes >Document Colors > Save Paletteを選択しファイル名をcolorで保存する。

response

image

STEP10: カラーパレット完成例

try

comment

カラーパレットの完成例をダウンロード。

response

no response

Track list including this course