リキッドフロー：エレクトリックブルー、シアン、バイオレットの流れるようなアニメーショングラデーション

リキッドフローは、「フロー」のグラデーションで「ゆがみ」を 70 まで上げ、エレクトリックブルー、シアン、バイオレットを水の中のインクのように折り重ねます。「電光の潮」パレットがミッドナイトネイビーのベースに載り、「アニメーション」がオンで「速度」が 40 なので、流れは絶えず入れ替わり続けます。硬い形を使わずに勢いを出したい場面、たとえば AI プロダクト、開発者向けツール、ローンチページに向いています。

自分好みに仕上げる

• 01

  乱れ具合を調整する

  液体らしく見えるのは「ゆがみ」が 70 だからです。40 では流れがゆるんで幅広い帯になり、85 を超えると小さな渦に分かれてテキストと競合することがあるので、決める前に「プロダクト」プレビューで確認しましょう。

• 02

  リブガラスを重ねる

  このスタイルでは「ガラス」はオフです。「ガラス」を 40 前後、「ペイン」を 12 にすると、動く流れが縦の帯に切り分けられます。同じ色をより建築的な印象にする手早い方法です。

よくある質問

使い方

1. 01

   出発点を選ぶ

   ソフトメッシュ、日食の光芒、リソハーフトーンなど 28 のスタイルのいずれかから始めるか、グラデーションの種類と 24 のパレットのいずれかを選びます。

2. 02

   グラデーションを調整する

   スケール、ゆがみ、渦巻き、柔らかさを調整し、グレイン、ガラスパネルやガラスタイル、ドット、グリッド、線のオーバーレイ、ブレンドした 2 枚目のレイヤー、ハーフトーンやピクセルソートなどの加工を追加します。アニメーションをオンにして、速度を個別に設定することもできます。

3. 03

   プレビューして使う

   ランディングページ、カード、モバイル、新規登録のレイアウトでグラデーションを確認します。その後、無料の UX Pilot アカウントでログインすると、キャンバスで使用したりエクスポートしたりできます。