みなさんこんにちは、運営のAdobe神(@adobeshin)です！
今回はこのようなお悩みにお答えしていきます。
結論から言うとコーダーとして仕事をしていく上では最低限、PhotoShopは使える必要があります。
今回の記事では最低限使えるべき機能とその使い方を解説していきます。
・コーダーが使えるべき最低限の機能
・その使い方
前提として下記のようなコーダーを想定しています。
・自分でデザインはしない
・デザイン内の細かい修正は他のデザイナーがしてくれる
・画像は自分で書き出す必要がある
コーダーが使えるべきPhotoShopの機能
結論から下記の機能です
今回はこちらのデータを使いながらそれぞれ方法を解説していきます。
書き出し①
まずは画像の書き出し方法を解説していきます。
２パターンやり方を説明しますのでやりやすい方で書き出していってください。
①「ファイル→生成→画像アセット」をクリック
②画像のレイヤーの名前の最後に好きな拡張子をつける
これだけで元々PhotoShopのデータがあったフォルダ内に画像が書き出されていきます。
書き出し②
①書き出したい画像のレイヤー上で右クリック
②「PNGとしてクイック書き出し」orその下の「書き出し形式」をクリック
③保存先や保存名を設定
こうすることで指定した通りに書き出すことができます。
レイヤーの結合
レイヤーの結合は複数のレイヤーを１つの画像として書き出したい時に使えます。
①command(ctrl)を押しながら結合したいレイヤーを選択します。
②３つを選択した状態で右クリックをし、「レイヤーを結合」を選択します。
上記画像のように１つにまとまりました。
スライス
次はスライスという書き出し方法です。
スライスは
このような時に使える手法です。
①「スライスツール」を選択
②書き出したい範囲を選択（背景も含め、書き出されます。）
③「ファイル」→「書き出し」→「Web用に保存（従来）」を選択
④保存情報を入力
ここで
などの設定を行なっていきます。
最後に「完了」を押せば保存終了です。
数値取得①
デザイン通りのコーディングを行なっていく際にはこちらは必須になってきます。
画面端からの距離や他の要素との距離の関係などを数値として取得できます。
やり方は簡単で「command(ctrl)」を押しながら各要素にカーソルを合わせるだけです。
上記の画像のように数値情報が出てきます。
数値取得②
コーディングをしていると数値取得①では取得できない場合も出てきます。
そんな時にこちらの方法を使います。
①「ものさしツール」を選択
②長さを知りたい場所でドラッグアンドドロップで線を引く。
この際、「shift」を押しながらドラッグアンドドロップすると真っ直ぐな線を引くことができます。
その線の長さが上記画像内の上の方の赤枠のところに数値情報が出てきます。
まとめ
コーダーが覚えておくべき最低限の機能は下記の４つ！
コーダーは他の機能も使えると強いですが、まずはこれらの機能をしっかり覚えましょう！
