HTML/CSS

Photoshopのデザインカンプから画像を切り出す(アセット)

コーダーとして技術を磨くためには、デザインカンプからコーディングを行えることが大切です。

今回は、HPcodeを運営されているはにわまんさんのnoteで、Photoshopからのデザインカンプコーディングの練習をしてみました。

 

コーダーでもPhotoshopの基本操作は必要、ということで、早速Macに入れました。

Photoshopのデザインカンプを元にコーディングする場合の基本操作はこちら

  • 画像の切り出し
  • フォント情報の確認
  • 要素のサイズ、余白サイズ確認

 

今回は画像の切り出しについて、忘れないように書き残しておきます。

 

Photoshopから画像を切り出す

Photoshopから画像を切り出す方法です。

デザイナーさんが作ったデザインカンプには、当たり前ですが画像が貼り付けてあります。そこから、コーディングに必要な画像を切り出していく作業です。

 

この作業は、コーダーがやることが多いらしく、確かに求人を見ても「Photoshopの基本操作(画像切り出し)」などが書かれていることがおおかったです。

 

具体的な切り出し方法をまとめておきます。

[ファイル]→[生成]→[画像アセット]をクリックしておき、画像の切り出しが行える設定に変更します。

 

[ウィンドウ]→[レイヤー]にチェックを入れ、レイヤー画面を表示させます。

 

 

切り出したい画像をクリックすると、レイヤーパネルの背景がグレーになります。

 

この状態で、画像のタイトルをダブルクリックし、「名前.拡張子」と拡張子を入れて名前を変更します。

 

すると、デザインカンプのファイルがあるフォルダに「design-comp-assets」というフォルダが生成され、中には切り出した画像が入っています。

 

これを全ての画像にやっていくだけです。

結構めんどくさいですが、操作としては簡単ですね。

 

 

Photoshopのショートカットを覚えよう

画像切り出しで使うショートカットは数えるほどですが、Photoshopを本気で使うなら、よく使うものは覚えておきたいですね。