【Photoshop】Photoshopのデザインカンプからドロップシャドウを読み解きCSSでコーディングする方法

Photoshopのデザインカンプからドロップシャドウを読み解きCSSでコーディングする方法

最近Photoshopのデザインカンプからコーディングすることが多いのですが、Adobe XDと比べると画像の書き出しや各数値を取得するのが厄介で、手間に感じることがとても多く感じます。

今回はそんなPhotoshopのデザインカンプのドロップシャドウの数値を読み取り、コーディングする方法を書き残しておきます。

ドロップシャドウがある部分はレイヤーで確認できます。

ドロップシャドウをダブルクリックすると下記のようなウィンドウが出てきます。

正直この数値が出てきたところで、ドロップシャドウのどの数値をbox-shadowのプロパティに指定すればいいのかさっぱりわからんですわ。

上記の画像を例にすると、チェックすべき数値は

ドロップシャドウはプロパティ値の詳細はこんな感じ。

○○○ {
box-shadow: 右側の影px　下側の影px　ぼかしの量px　影の広がりpx　色　内向き;
}

今回の例の数値を当てはめるとこんな感じに。

box-shadow: 3px 3px 8px rgba($color: #6d6d6d, $alpha: 0.09);

角度によって右側（左側）の影や下側（上側）の影の数値が変わってくるので、そこは微調整が必要になってくる。（あまりよく理解していない）

もし左側や上側に影がある場合は、右側と下側の影の数値部分をマイナスで指定すればOK。

「サイズの数値」＝「ぼかしの量」になるので、8px。

今回はスプレッドが０％なので省略。

右側に3px、下側に3pxのシャドウを内側に入れたい場合は以下のようにプロパティを指定する。

box-shadow: -3px -3px 8px rgba($color: #6d6d6d, $alpha: 0.09) inset;

この「inset」を記述するのがポイント！

あとは検証ツールを使用しながら調整すればどうにかなります。

PSD-TO-CSS-SHADOWS.COMというPhotoshopのシャドウをCSSに簡単にコンバートしてくれるサイトを見つけました。

こちらのサイトでPhotoshopのシャドウの情報を入力すると、CSSのコーディングする数値を表示してくれます。

box-shadow: 1px 3px 8px rgba(109, 109, 109, 0.09);

こちらの方が角度の入力もあり正確なので、便利で正確なものを利用しましょう。