- ブログ
Photoshopのデザインカンプからコーディングする
XDで作成されたデザインカンプに慣れていると、最初はPhotoshopからのコーディングに戸惑うことがあると思います。
ここではPhotoshopのデザインカンプからコーディングする際に覚えておくと便利なことを紹介していきます。
コーディング用に環境を設定する
単位をpxにする
1.左上の編集タブから環境設定をポイントし、単位・定規を選択する
2.環境設定画面が開いたらpixelに変更する
ワークスペースを設定する
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など画像の拡張子をつけて保存します。レイヤーをダブルクリックすると名前を変更できます。画像の拡張子になったものが一括で書き出しできます。
ファイル ⇒生成 ⇒画像アセットにチェック ⇒保存(ctrl+s)
開いているpsdファイルと同じ階層にassetsファイルが生成され、中に画像が書き出されます。
上記の方法だと基本的には等倍で書き出されますが、2倍サイズで書き出すこともできます。
2倍サイズで書き出したいときはレイヤー名を変更するときに200%と入力し半角スペースの後に名前を付けて@2xとつけて保存します。(ctrl+s) 例)200% mv@2x.png
すべての画像に対し同じ作業をするのが大変なので、まとめて書き換える方法があります。
名前を書き換える用のレイヤーを作る:右下のプラスボタンを押して一番上にレイヤーを作ります。
名前 1倍の方を書き出すファイル名をつける:「default 1x, 200% 2x/@2x」 ⇒保存します。
全部のレイヤーにこの設定があたる:全部の画像が1倍、2倍のサイズで保存されるようになります。