ニューモーフィズムの作り方(応用編)

前回のニューモーフィズムの作り方(基本編)では、いろいろなアプリケーションでニューモーフィズムデザインのボタンを作成しました。
今回は、ニューモーフィズムの基本操作を応用してボタン以外の画像を作成してみようと思います。

目次

ニューモーフィズムの応用デザイン

シンプルかつ洗練されたデザインを表現できるニューモーフィズム。
構造を理解すれば透明感ある背景デザインも自在に制作できます。

数字のデザイン

STEP01

  1. テキストで数字を入力します
  2. 数字を「書式」→「アウトラインを作成」を選択しパス化します
  3. グラデーション」を選択し
    左|#e6eaf6(青みがった薄いグレー)
    右|#FFFFFF(白)
    に設定します

STEP02

  1. STEP01の複製を作ります
  2. グラデーション」から「反転グラデーション」を反映します

STEP03

  1. アビアランス」から「新規効果を追加」→「ぼかし(ガウス)」を選択します
  2. 程よく周囲をぼかします

STEP04

  1. STEP01で作成した「2」をレイヤーの最前面に設定します
  2. 上下を合わせ、レイヤー最後の「ぼかし」をかけた画像を右に10pxずらします

「0」「2」「4」を同じ効果をつけ作成し少し重なるように並べて完成です。
とても洗練されたデザインの来年の年号画像が出来ました。

サークルを組み合わせた背景デザイン

押した(凹んだ)ニューモーフィズムの円を組み合わせるだけで波紋のような背景を作成できます。

STEP01

正円にグラデーションを作成します

STEP02

グラデーションを引いた円の中に一回り小さいグレーの円を作成します

STEP03

内側の円に「ぼかし(ガウス)」をかければ、凹んだデザインの完成です

完成した円を大小複製し組み合わせることで美しい波紋の背景が完成します。

乗算を使い透明感ある背景デザイン

正方形のニューモーフィズム画像を作成し、小さい画像の「不透明度」を通常から「乗算」に変更します。
中央の画像が透過され、透明感ある画像を作成できます。

緩やかなパスをを組み合わせた背景デザイン

ニューモーフィズムは規則正しい形だけではなく、緩やかな波のような形状でも表現することができます。
波形を重ねることで波のような質感の背景が作成できます。

まとめ

いかがでしたでしょうか。
明るい影と暗い影をつける手法を身につけるといろいろな応用デザインを作ることが可能になります。
形式にとらわれず様々な形を組み合わせて独自のニューモーフィズムを作ってみてはいかがでしょうか。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

株式会社トラムが運営するGarageのアカウントです。
デジタルマーケティング担当者、Webサイトの運用担当者、中小企業経営者にとって役立つWebサイトの構築・運用情報を提供してまいります。

目次