【備忘録】Photoshopでコーディングに必要な値を取り出すための知識まとめ【web制作】

 

PSDデータからwebサイトをコーディングをするためには、フォトショップを使いこなし、必要な値を抜き出す必要が出てきます。

その方法に関して自分が得た知識を、備忘録としてここに残します。

主な参考サイト

Photoshopでコーディングに必要な値を取り出すための知識まとめ

文字情報を抜き出す方法

下の画像は、Photoshopで文字選択した時に現れる文字タブの情報です。

ここから、コーディングに必要な文字の値を抜き出します。

一番上にある「游ゴシック体、ボールド」というのは、font-familyfont-weightのことです。

 

フォントサイズは下の赤丸を見れば分かります。

 

line-heightですが、これは下記の数字を見ます。

そして、その数字とfont-sizeの値で割り算をします。

この画像の場合は、

38px ÷ 15px = 2.5333333 なので、

line-height:2.5333333;

となります。

 

次に字の間隔であるletter-spacingですが、

これは下記の数字を見ます。

そしてその数字を1000で割り、単位にemをつければOKとなります。

この場合、150÷1000=0.15 なので、

letter-spacing:0.15em;ということになります。

フォントについて

デザインの製作者が指定したフォントを自分が持っていない場合、webにあるフォントを利用することで、自分でインストールしなくてもそのフォントを利用できます。

例えば下記のような場合、[NotoSansCJkjp]というフォントが自分側にないので、webフォントで探すか、何かしらの処置を行う必要があります。

グーグルフォントの使い方

グーグルが提供する無料webフォントサービスを例にします。

こちらのサイトにアクセスし、目当てのフォントを探します。

目当てのフォントの画面をクリックし、ペアリングのタブにて、下記の部分にチェックを入れます。

さらに、右上の四角い部分をクリックすると、

次のように埋め込みコードが出てくるので、これをそれぞれHTMLのheadタグ内と、cssに貼り付けます

これで、webフォントが反映されます。

なお、

ほかにも、無料のフォントサービスには次のような「Adobeフォント」や、Google Noto Fontsなどもあります。

google noto fontsの使い方
Adobeフォントの使い方

いずれも、使い方はグーグルフォントと同じ感じです。

フォントを検索し、HTMLのheadにコードを貼りつけ、CSSに指定されたコードを貼り付ける。というのを覚えておけばいいのかなと。

また、フォント知識ついてはこちらの記事に目を通しておくと、かなり参考になります。

 box-shadowの調べ方

PSDデータでは、ボックスに影をつける効果が施されていることがあります。

これをCSSで再現する方法です。

まず、影のついている要素をクリックして、レイヤータブにあるドロップシャドウという部分をダブルクリックします。

そうすると下記の画面が出てくるので、この画面の情報を基にしてbox-shadowを指定していきます。

まず結論からお見せすると、この情報をもとにbox-shadowを指定した場合、こうなります。

box-shadow:   0     0     10px     0   rgba(157, 157, 158, 0.4);

(box-shadow 右方向の影 下方向の影 ぼかし半径 広がり 色)

これを上の画像の情報に当てはめると、

box-shadow:  0   0    10px    0   rgba(157, 157, 158, 0.4);

(box shadow  角度  距離 サイズ スプレッド rgba(R,G,B,不透明度)

角度90というのは、影の角度が90度、つまり、横には影がないことを意味するので最初の指定は0になります。

距離というのは、下向きの影の距離を表し、それが0ということなので、下方向の影の指定は0です。

サイズ10pxとは、ぼかし半径が10pxということなので、指定は10px

スプレッド0%とは、影の広がりが0%ということなので、指定は0

なお、rgbaの調べ方は、描画モードの文字がある部分の横にある、色がついているブロックをクリックすることで調べられます。

また、rgbaの最後に指定した0.4というのは、不透明度の40%を表した数字です。

また、影がボックスの内側に入っているケースですが、これは

box-shadow:   0     0     10px     0   rgba(157, 157, 158, 0.4) inset;

box-shadow 右方向の影 下方向の影 ぼかし半径 広がり 色                                   内側の指定

最後にinsetを指定すると内側に影を入れることが可能となります。

参考にさせていただいたサイト

 画像の書き出しについて

つぎは、画像の書き出しに関する備忘録。

ファイル→生成で画像アセットにチェック

レイヤーの名前をダブルクリックして

.jpg

.gif

.png

.svg

このいずれかの拡張子をつけて保存する。

書き出した画像は、PSDデータが存在するフォルダに保存される。

この流れだけメモっておけば大丈夫なはず。