この記事の役割
Photoshopで作成されたデザインカンプに対して、コーディング時に必要と思われる設定や情報確認方法を自身の備忘録として記録しています。
環境
Photoshop2025
mac
デザインカンプ入手直後に確認/実施しておくこと
・カラーモード→モード→RGBカラーにチェックがついた状態であることを確認。
・Photoshop2025→設定→ツール→ベクトルツールと変形をピクセルグリッドにスナップにチェックをつける。
・Photoshop2025→設定→単位・定規→pixelに設定。
・デザインファイルは保存用と作業用に分けて保管。コーディング情報の取得は全て作業用ファイルで操作(意図しない操作により無意識に要素を移動させてしまったまま保存してしまう→次回開いた際に誤ったレイアウトを元にコーディングしてしまうことを回避するため)。
・余白や特定オブジェクトの縦/横幅の確認用定規として活用できるように、デザインカンプの横幅、縦幅にあわせた長方形オブジェクトを作成しておく。
・ブラウザ拡張:perfect pixel用に画像を書き出しておく(PC/SP)
各種操作メモ(作業中に必要な操作を集約)
■要素間の上下左右余白(スムーズに確認できない場合は、「デザインカンプ入手直後に確認/実施しておくこと」で準備済みの長方形オブジェクトを活用する)
特定の要素を選択
↓
余白を計測したい別要素にマウスカーソルを重ねる
↓
commandキーを押下
■スマートガイド
・表示→表示・非表示→スマートガイドにチェックがついていることを確認
■ガイドの表示/非表示]*全てのガイドに有効
command + h
※注意:表示→表示・非表示→ガイドにチェックがついた状態でないと機能しない
■一部のガイドの表示/非表示*全てのガイドに有効
任意のガイドをクリック→デリート
■xまたはy座標を固定しながら移動
shiftを押下したまま任意のオブジェクトを上下、または左右にドラッグ
■マウスポインタを中心に拡大/縮小
optionを押したまま、マウスホイールを前後にスクロール
■デザインを左右に移動
commandを押したまま、マウスホイールを前後にスクロール
■慣性スクロールを無効化
Photoshop2025→設定→ツール→フリックパンを有効にするのチェックを外す
■参考記事