フリーランスエンジニア営業なしで案件受注

Photoshopからコーディングする方法【10分】

Photoshopからコーディングする方法を10分で紹介します!

コーディングの実案件ではデザインデータをAdobe XDではなく、ほぼ全ての案件でPhotoshopでデータをもらうので、必須の知識です。

動画で見たい方は、以下をどうぞ

Photoshopからコーディング:準備

Photoshopをインストール

Photoshopを持っていない人はこちらから無料インストールしましょう。

7日間無料体験できます(その後お金を払いたくない人は期限内に解約しましょう)。

購入する場合は月額980円で使えます(年間契約するともっと安いかも)。

illustratorはコーディングメインで仕事する人はあまり使う機会がないので、最初は契約せず、案件で使うようになってから契約しても良いかもしれません。

(案件によってはillustratorからコーディングすることがありますが、稀です)

無料のPhotoshopデータを準備

最初にわかりやすいように無料のPhotoshopデータを準備しましょう。

今回事例として使わせていただいたのは、ねこポンさんのこちらの記事から無料ダウンロードできるphotothopデータです。

単位をピクセルへ

Photoshopからコーディングするときは、ピクセルという単位で要素の長さなどを測ります。

なのでまず単位をピクセルに変更します。

  1. Photoshop>環境設定>定規をクリック
  2. 単位をpixelに変更

水色のガイド線の消去

Photoshopのデザインデータを開いたときに、水色のガイド線が出て邪魔だと思う場合は、

上部のバー>表示>ガイドを消去をクリックしてください。

これでガイド線をなくすことができます。

Photoshopからコーディングする方法5選

次に実際によく使う、Photoshopからコーディングする方法を紹介。

文字情報を取得する

  1. 上部バーのウィンドウ>文字
  2. 対象の文字をクリック

文字情報でコードに反映させるところ

  • font-family
  • font-size
  • font-weight
  • line-height(後ほど説明)
  • letter-spacing(後ほど説明)
  • color

これらは最低限コードに反映させてください。

文字間の間隔:letter-spacing

  1. 文字の情報を見る
  2. VAと書いてある部分を見る
  3. この数字/1000でemを算出

例:170/1000=1.7emなので

になるという感じです

行間:line-height

  1. 対象の文字をクリック
  2. 行送り/フォントサイズの割り算で算出

フォントサイズ:22px 、行送り:44pxの場合44/22=2なので

画像の書き出し

  1. ファイル→生成→画像アセット
  2. 対象の画像を選択
  3. 画像に拡張子(jpgやpng)をつける
  4. assetsフォルダと画像ファイルが自動生成されている

より詳細な方法を知りたい方は、adobe公式ブログをどうぞ。

ほとんどの場合、クライアントからPhotoshopデータが送られてくるので、コーディングで実装できない部分を画像で「書き出し」をする必要があります。

どこまで画像で書き出しすべきかは、

という感じです。

要素の長さwidth・heightを測る

  1. ウィンドウ>属性をクリック
  2. 対象の要素をクリック

余白の測り方

  1. 長方形ツールを選択
  2. 測りたいデータの大きさに合わせて長方形作成→長さ測る

ちょっと原始的ですが1番簡単な方法です。

もっと効率化できる方法はあるのですが、最初はこれができればOK。

ものさしツールで測ってもOK。

Photoshopからコーディングまとめ

コーディングで稼ごうと思ったら、Photoshopは必須のツールだと思います。

まずは今回紹介した最低限の知識を押さえてみてください。