2016/06/18 08:58

Sketchでワイヤーフレームのカラーリング

STEP1: 前提

try

comment

Sketchでカラーパレット作成を終了していること。

response

no response

STEP2: Screenページの作成

try

image

comment

新規でScreenページを作成する。

response

no response

STEP3: アートボード作成

try

image

comment

ワイヤーフレームを参考にアートボードを作成する。アートボードは、PCブラウザのサービスであればMaterial DesignのDesktop Landscapeを選択、スマホブラウザの場合は対応するサイズをiOS Devicesから選択する。アートボード作成のショートカットは「A」。

response

no response

STEP4: アートボードの名前

try

image

comment

アートボードの名前はワイヤーフレームのMapページを参考にする。

response

image

STEP5: 各ページのデザイン

try

image

image

image

comment

ワイヤーフレームを参考にカラーリングをする。

response

no response

STEP6: Materialの追加

try

image

comment

新規でMaterialページを作成する。Materialページに画像として書き出す素材を実際に使ったサイズで並べておく。画像の名前は英単語で2つ以上からなる単語はハイフンでつなぐ。

response

no response

STEP7: 素材の書き出し

try

image

comment

imagesフォルダを任意の場所に作成する。Materialページの素材を全て選択しsketch右下にあるExportの+ボタンをクリック。Formatはpng形式を選択し、Export Layersを選択し先ほど作成したimagesフォルダに保存する。

response

image

STEP8: 完成ファイル

try

comment

完成ファイルはこちらからダウンロード

response

no response

Track list including this course
Sketchでカラーリング
2016/06/18
teranishi
4
course