グラフィックデザイナー
こんにちは、yoenです。
今回はweb業界御用達のニューモーフィズムの作り方です。イラレのドロップシャドウでは光の当たる部分の表現が出来ませんので気をつけましょう。
それでは見ていきます。
イラレで作るNeumorphismの作り方【ニューモーフィズム】
浮き出させる
まずは任意の角丸四角形を書いてください。(下の図は見えなくなるのでフチに黒を入れています。)
つぎにその四角に白から黒のグラデーションを適用します。
![グラデを作る](https://iyoen.com/wp-content/uploads/2020/12/Illustrator_neumorphism-01-1024x474.png)
設定は角度を-45°、帯の左のスライダーをK0で位置を45%、右のスライダーをK30で位置を55%で設定すると上記の右側のようになります。
![グラデ詳細](https://iyoen.com/wp-content/uploads/2020/12/Illustrator_neumorphism-02.png)
アピアランスで塗りを増やし前面に持ってきます。色は背景色にして「効果→パス→パスのオフセット」を選択します。
パスのオフセットはマイナスで設定します。(オブジェクトの大きさにより数値は調整してください。)
これだけだとエンボスのようになっていますのでもう一つ手を加えます。
![オフセット](https://iyoen.com/wp-content/uploads/2020/12/Illustrator_neumorphism-03.png)
アピアランスでグラデーションのレイヤーを選択し、ぼかしを加えます。
![ぼかし](https://iyoen.com/wp-content/uploads/2020/12/Illustrator_neumorphism-04.png)
どうでしょう。雰囲気でましたね。
![完成](https://iyoen.com/wp-content/uploads/2020/12/Illustrator_neumorphism-05.png)
![](http://image.moshimo.com/af-img/2262/000000036329.png)
へこませる
つぎは、へこませてみましょう。
同じグラデーションを作って今度は明度の位置を反転させましょう。
![グラデーション](https://iyoen.com/wp-content/uploads/2020/12/Illustrator_neumorphism-06.png)
ここからは塗りを足してオフセットを適用するまで同じです。
今度はグラデーションにではなく追加した塗りにぼかしをかけていきます。
![完成](https://iyoen.com/wp-content/uploads/2020/12/Illustrator_neumorphism-07-1024x449.png)
まとめ
![まとめ](https://iyoen.com/wp-content/uploads/2020/12/Illustrator_neumorphism-08-1024x542.png)
いかがでしょうか、雰囲気出てるんではないでしょうか。このやり方では複雑な図形では陰影を付けるのは難しいですが、アイコン程度なら良いものが作れると思いますので是非試してみてください。
グラスモーフィズムも記事にしていますのでよければどうぞ。
![](https://iyoen.com/wp-content/uploads/2021/01/irare-glassmorphism-top-160x90.jpg)
イラレで作るGlassmorphism【グラスモーフィズム】
今回は、Web Designのトレンド、グラスモーフィズムです。前回に続きイラレで完結できるように作成していきます。是非参考にしてください。
それでは、よきデザインライフを。
リンク
コメント