デザインの勉強

【初心者向け】Photshopで切り抜き画像に影をつける方法

こんにちは、mito@mito_works)です!

webサイト上に写真を切り抜いて使い際、「何だかべたっとしていて決まらないな〜」と
思うこと、ありませんか?

mito
mito
特にカバンや服など商品を単体で見せる時に思いませんか?!
momo
momo
そんな時は切り抜き画像に影をつけると立体的に見えて見栄えが良くなるよ!

簡単に影をつける方法をまとめます。

画像を切り抜く

画像を切り抜きます。


切り抜き方は以下を参考にしてください。

【Photoshop】写真を綺麗に切り抜く(白抜き)する方法こんにちは。mito(@mito_works)です。 境界線がガタガタになってしまい、写真を綺麗に切り抜けない!! そんな経験を...

影をつける

レイヤーの右端をダブルクリックし、レイヤースタイルを表示させます。

レイヤースタイルのドロップシャドウにチェックを入れます。

ドロップシャドウの値を調節して影を入れます。

パターン1

はっきりとした影。

パターン2

ふんわりとした影。

比較

mito
mito
数値を変えてちょうど良い影を見つけてみてください!

おまけ:画像の大きさを倍率指定で変更する方法

写真画像を使う際に、サイズ調整が必要になることが多いと思います。

mito
mito
ドラッグで拡大縮小する以外の方法のご紹介です。

画像レイヤーを選択

画像のレイヤーを選択します。

command+Tをおす

選択した状態でcommand+Tを押すと上部に以下のような表示が表れます。

倍率指定

倍率を指定することで拡大縮小ができます。

完成

momo
momo
画像を一括選択することで、まとめて複数の画像を同じ倍率に拡大or縮小が簡単にできるから便利だよ!
ABOUT ME
mito
こんにちは!mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。