Photoshopのデザインカンプからコーディングする

XDで作成されたデザインカンプに慣れていると、最初はPhotoshopからのコーディングに戸惑うことがあると思います。
ここではPhotoshopのデザインカンプからコーディングする際に覚えておくと便利なことを紹介していきます。

コーディング用に環境を設定する

単位をpxにする
1.左上の編集タブから環境設定をポイントし、単位・定規を選択する
2.環境設定画面が開いたらpixelに変更する
単位設定

ワークスペースを設定する
1.レイヤー、プロパティ、カラー以外のコーディングに使わないパネルを閉じる
パネル設定

2.文字、情報パネルを表示させる
ウインドウメニューから文字、情報をチェックする
パネル設定1
文字パネルをプロパティの隣に、情報パネルをカラーの隣にそれぞれドラッグ&ドロップする
パネル設定2

3.コーディング用のワークスペースとして保存しておく
※呼び出す時はウィンドウ→ワークスペース→コーディング用
パネル設定

コーディングで最低限使うツールを紹介

コーディングでよく使うツールは以下の通りです。
1.移動ツール:オブジェクトを選択するとプロパティで幅、高さを確認できる。このツールでほとんどの値が取得できる。
2.ものさしツール:線を引いてその長さを確認できる。細かい隙間を測りたい時に使う。ものさしツールとスポイトツールは同じ場所にある。長押しすると選択できる。
3.スポイトツール:カラーコードを確認できる。移動ツールで選択しても確認できる。
4.文字ツール:文字を選択してコーディング用に貼り付けることができる。移動ツールでダブルクリックしても選択できる。
ツール

値を取得する方法

1.オブジェクトの値を取得する 
移動ツールでオブジェクトを選択するとプロパティパネルで幅、高さ、ボーダーなどの値を確認できます。
値の取得

色のアイコンからカラーコードを確認できます。
カラーピッカー

ボーダーが設定されている場合、オブジェクトを選択すると線の太さや色、border-radiusを確認できます。
ボーダー

透過画像はレイヤーパネルの不透明度で確認することができます。 不透明度80%ならCSSはopacity0.8になります。
不透明度

2.文字の取得
文章を文字ツールで選択するか移動ツールでダブルクリックします。文字パネルを開くとfont-family、太さ、文字サイズ、行間line-heightなどを確認できます。
文字の取得

3.余白の取得
移動ツールでオブジェクトを選択した状態でctrl(command)を押すと近くのオブジェクトとの距離が表示されます。
余白の取得

画像の書き出し

一つ一つのレイヤーから書き出す方法
対象の画像を移動ツールで選択するとレイヤーがハイライトで選択されます。レイヤーの上で右クリックし書き出し形式を選択します。
書き出し
PNGやJPGなどの書き出し形式、 ファイルサイズ、画像サイズを指定して保存することができます。ファイルの保存先を指定して保存します。
書き出し

一括で保存する方法
レイヤーの名前をjpgや.pngなど画像の拡張子をつけて保存します。レイヤーをダブルクリックすると名前を変更できます。画像の拡張子になったものが一括で書き出しできます。
一括書き出し01

ファイル ⇒生成 ⇒画像アセットにチェック ⇒保存(ctrl+s) 
一括書き出し02

開いているpsdファイルと同じ階層にassetsファイルが生成され、中に画像が書き出されます。
一括書き出し03
上記の方法だと基本的には等倍で書き出されますが、2倍サイズで書き出すこともできます。
2倍サイズで書き出したいときはレイヤー名を変更するときに200%と入力し半角スペースの後に名前を付けて@2xとつけて保存します。(ctrl+s) 例)200% mv@2x.png

すべての画像に対し同じ作業をするのが大変なので、まとめて書き換える方法があります。
名前を書き換える用のレイヤーを作る:右下のプラスボタンを押して一番上にレイヤーを作ります。
名前 1倍の方を書き出すファイル名をつける:「default 1x, 200% 2x/@2x」 ⇒保存します。
全部のレイヤーにこの設定があたる:全部の画像が1倍、2倍のサイズで保存されるようになります。
一括書き出し2倍

Contact

猫と本棚

エクスフィールドへのお問い合わせ。

ホームページやポスター、LINEスタンプ等々何かを作りたいけどなかなか作れずに困っている皆様。
エクスフィールドに相談してみませんか?ご相談は無料ですので、いつでもお伺いいたします。

メールでのお問い合わせ

お電話でのお問い合わせ

TEL:052 - 938 - 4891

受付時間:10:00~18:00(平日)

PAGE
TOP