スポンサーリンク
写真編集

Photoshopでニューモーフィズムの作り方!

どうも!Web制作•動画編集フリーランスのTERUQ(テルキュー)です!

最近、ニューモーフィズム(Neumorphism)という新しいデザインが人気です!
ニューモーフィズムはアイキャッチ画像のように影を使って凹凸を作り、全体的にシンプルなデザインです。

今回はPhotoshopでニューモーフィズムの作り方をご紹介します!

この記事はこんな人におススメ!

ニューモーフィズムって何!?
Photoshopでニューモーフィズムを作りたい!
ニューモーフィズムのデザインが好き!

スポンサーリンク

ニューモーフィズム(Neumorphism)とは

ニューモーフィズム(Neumorphism)とは、影を使って凹凸を表現し、文字などが押し出されているような感じや、窪んでいる感じにするデザインです。

New(新しい)+ Skeumorphism(スキューモーフィズム) =Neumorphism(ニューモーフィズム)という意味です!

Psでニューモーフィズムの『浮き出た感じ』の作り方

円や四角など図形を作る

まず背景色を指定します。
今回はこのような色にしました。(#d8e7ec)
お好みの色にしてみてください。

次に円や長方形を描き、背景色と同じ色にします。(線はなしです)

このままでは円や長方形がわからないので、レイヤー効果のドロップシャドウで影をつけていきます!

明るい影を作る

円のレイヤー効果を開き、ドロップシャドウを調整して明るい影を作ります。
ドロップシャドウをオンにして下記のように設定します。

•描画モードは通常

•色を白にする
•不透明度50%、角度−45度
•包括光源使用のチェック外す
•距離11、スプレッド5、サイズ25

するとこんな感じで左斜め上に白い明るめの影ができました!

不透明度や角度、距離、スプレッド、サイズなどはお好みで微調整してみてください!

暗い影を作る

次にドロップシャドウを調整して暗い影を作ります。
まず、ドロップシャドウの右側のプラスをクリックして1つ増やします。
そして下記のように設定します。

•描画モードは通常
•色は暗めの色を設定します。(今回は#3b3949)
•不透明度15%、角度135度(-45の反対)
•包括光源使用のチェック外す
•距離9、スプレッド5、サイズ25

するとこんな感じで右斜め下に暗い影ができ、円が浮き出ているようになりました!

円をたくさんにするとこんな感じ。ちょっとレゴっぽくなりました笑

色や不透明度や角度、距離、スプレッド、サイズなどはお好みで微調整してみてください!
では次にへこんだ感じの作り方をご紹介します!

Psでニューモーフィズムの『へこんだ感じ』の作り方

円や四角など図形を作る

同様に円や四角を作ります。
(四角をニューモーフィズムにするときは角を少し丸めるといいかと思います)

そして、背景色と同じ色にします。(線はなしです)

明るい影を作る

レイヤー効果を調整して明るい影を作ります。
シャドウ(内側)をオンにします。
そして下記のように設定します。

•描画モードは通常
•色を白にする
•不透明度35%、角度−45度(右下に明るい影ができる)
•包括光源使用のチェック外す
•距離9、スプレッド13、サイズ24

するとこんな感じで右斜め下に白い明るめの影ができました!

不透明度や角度、距離、スプレッド、サイズなどはお好みで微調整してみてください!

暗い影を作る

次にレイヤー効果を調整して暗い影を作ります。
シャドウ(内側)のプラスをクリックして1つ増やします。
そして下記のように設定します。

•描画モードは通常
•色は暗めの色を設定します。(今回は#3b3949)
•不透明度8%、角度135度(左上に暗い影ができる)
•包括光源使用のチェック外す
•距離7、スプレッド10、サイズ9

するとこんな感じで左斜め上に暗い影ができ、円の部分がへこんでいるような感じになりました!

こちらも色や不透明度や角度、距離、スプレッド、サイズなどはお好みで微調整してみてください!

両方表示してみるとこんな感じで、凹凸があるように見えます!

テキストをニューモーフィズムにする

テキストも上記のような方法で、ニューモーフィズムデザインにすることができます。
また色や影の距離などをお好みで設定してみてください!

円や四角やテキストを違う色にしてみる

円を違う色にしても、凹凸があるように見えますね!
また好きな色にするとポップなデザインになりそうです!!

ニューモーフィズムの保存

作ったニューモーフィズムを保存するには、レイヤー効果の右横の『新規スタイル』をクリックし、名前を入力します。

すると、左上の『スタイル』(1番上)に保存されるので、図形やテキストをすぐにニューモーフィズムにすることができます!

ニューモーフィズムデザインのWEBサイト

仙台のIT企業 株式会社SRA東北

トップページがニューモーフィズムデザインで作られていて、シンプルながらもインパクトがあります!

ニューモーフィズムを簡単に作れるツール

最後にニューモーフィズムを簡単に作れるツールをご紹介します!

Neumorphism.io

画像をクリックするとサイトに移ります。

neumorphic.design

画像をクリックするとサイトに移ります。

どちらも色や影などを選択すると簡単にニューモーフィズムを作ることができます!

まとめ

今回はPhotoshopでニューモーフィズムデザインの作り方をご紹介しました!
最近トレンドのデザインみたいなので、WEBサイトやブログのデザインでたまに見かけます。
シンプルですがとてもオシャレでインパクトのあるデザインです!

タイトルとURLをコピーしました