Gradient practice

() (  2025.05.25  )
Gradient practiceのアイキャッチ画像

こんばんは。マイです。

今週は勝手にグラデーション週間と題して、PintarestにストックしていたXのポストを参考に模写していました。

  • 色をスポイトで採取して、模写元のようになるように色数や配置をする
  • カラーコードをHSBで並べ、それぞれの色に関連性はあるかを見る
  • 色違いや形違いを試して、全く同じ手数だけでできるかどうかを把握する
  • Xのポストにあったグラデーションの作り方を真似してみる

一部グラデーションでないものも混ざってますが、こんな感じで模写&軽い分析をしていました。

Figmaで作っていたので、ここではメッシュツールで作るグラデーションはできず割愛…。

ただ、プラグインにランダム配色で作れるメッシュグラデーションツールがあったので使ってみると、結構楽しい!

ノイズもプラグインツール内で指定できるみたいで、欲しい配色のものがあればあっという間にいい感じのグラデーションが作れてしまいます。

使用したプラグインはこちら。

個人的に、

  1. 写真や画像を大胆にぼかす
  2. プラグインでグラデーションを作る
  3. ぼかした写真の上にグラデーションをオーバレイで重ねる

の手順で作ったグラデーションが、単調なグラデーションに独特な印象を追加してくれて、作っていて楽しかったです。

少しずつFigmaの操作に慣れてきて、楽しくなってきたマイでした。

オートレイアウトやコンポーネントもうまく使えるようになりたい。途中で止まってる書籍を進めよう…。

それでは、また。

匿名でメッセージを送れます
マイ さんは質問を募集しています | mond マイ はmondでメッセージ/質問を募集しています!
mond.how