スポンサーリンク
今回はAdobeのPhotoshopからコーディングをする際の
画像の書き出し方法、値の取得方法を簡単にまとめてみたいと思います。
Photoshopのデザインカンプからコーディングするという方の参考になれば嬉しいです。
それではいってみましょう。
スポンサーリンク
画像の書き出し方法
以下の手順で、画像を書き出すことができます。
- ファイル > 生成 > 「画像アセット」にチェックを入れる。
- 右の「レイヤー」から画像のレイヤーをダブルクリックして拡張子をつける。( jpg / png 等)
- ○○-assetsフォルダに自動的に画像が保存される。
値の取得方法
フォントの情報の取得
フォントをクリックして、文字パネルを見ます。
font-family
font-family:1段目の左。
![photoshopのfant-family](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img1.jpg)
font-weight
font-weight:1段目の右。
![photoshopのfont-weight](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img2.jpg)
font-size
font-size:2段目の左。
![photoshopのfont-size](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img3.jpg)
letter-spacing
letter-spacing:3段目右のVA⇄ / 1000 の値にem単位をつける。
![photoshopのletter-spacing](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img4.jpg)
line-height
line-height:2段目の右⇅ / font-size。
![photoshopのline-height](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img5.jpg)
color
color:「カラー」をクリックして値を取得。
要素の情報の取得
情報を確認したい要素をクリックします。
width / height
- width:属性パネルの「W」の値。
- height:属性パネルの「H」の値。
![photoshopのwidth/ height](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img7.jpg)
border-radius
border-radius:属性パネルの角丸マークの値を確認。
![photoshopのborder-radius](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img8.jpg)
background-color
background-color:属性パネルのカラーパネルをクリックし、カラーの値を取得。
![photoshopのbackground-color](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img10.jpg)
不透明度
不透明度:レイヤーパネル > 不透明度
![photoshopの不透明度](https://orange-log.com/wp-content/uploads/2020/07/photoshop-coding-img9.jpg)
余白の情報 (padding / margin)の取得
まず、基準にしたい要素を選択します。
「command」を押しながら他の要素にhoverすると値が表示されます。
以上、Photoshopからコーディングする際の画像の書き出し、値の取得方法でした。
![](http://image.moshimo.com/af-img/2965/000000051311.png)
またXDからコーディングする場合の方法はこちらにまとめています。
![【XDからコーディング】画像の書き出し / 値の取得方法](https://orange-log.com/wp-content/uploads/2020/07/xd-coding_ic-320x180.jpg)
【XDからコーディング】画像の書き出し / 値の取得方法今回はadobe XDからコーディングする際の画像の書き出し方法、値の取得方法をまとめてみます。...
スポンサーリンク
スポンサーリンク