グラデーションの使用

グラデーション ツールの概要

グラデーションとは、色を少しずつ変えて塗りつぶす手法です。要素のボーダーと塗りつぶしのどちらにも適用できます。

ただし、ブラウザによってはボーダーのグラデーションはサポートされていません。

 

Google Web Designer では、次の 2 種類のグラデーションを作成できます。

• 線形グラデーション では、2 つの端点を結ぶ直線に沿って色が変化します。
• 円形グラデーション では、ある 1 点を中心として同心円状に色が変化します。

グラデーションを作成するには:

1. カラーミキサーの上部にある線形グラデーション ボタン 、または円形グラデーション ボタン をクリックします。
2. デフォルトでは、上部のグラデーション バーに、グラデーション用の 2 つのカラーマーカーがあります。色を変更するには、カラーマーカーを選択します。
3. 色が変化する間隔を変更するには、バーに沿って、カラーマーカーをドラッグします。
4. カラーマーカーをさらに追加するには、グラデーション バーをクリックします。カラーマーカーを削除するには、カラー フィールドまでドラッグします。

線形グラデーション

デフォルトでは、グラデーションを適用する要素の左端から右端までが線形グラデーションの範囲となります。

線形グラデーションの適用方法を変更するには:

1. 左側のツールバーでグラデーション ツール を選択するか、A キーを押します。
2. グラデーションを編集する要素を選択します。
3. 上部のツール オプションバーでストロークを編集 か塗りつぶしを編集 のどちらかを選択します。
4. 赤色のコントロール ハンドルをドラッグしてグラデーションを調整します。

   • 外側のハンドルをドラッグすると、グラデーションをオブジェクトに適用する範囲を変更できます。下の 1 つ目の例にように、グラデーションを SVG シェイプのボーダーの外側まで伸ばすことはできません。
     

   • 内側のハンドルをドラッグすると、黒の点を中心にしてグラデーションを回転させることができます。グラデーションの範囲は、要素の寸法に合わせて自動的に変更されます。なお、Shift キーを押しながらドラッグすると、45 度ずつ回転させることができます。
     

グラデーションをデフォルトの状態にリセットするには、グラデーション ツールボタン をダブルクリックします。

円形グラデーション

デフォルトでは、円形グラデーションは楕円形の形状に適用されます。この楕円形は、対象の要素の中心点と四隅で定義されます。

円形グラデーションの適用方法を変更するには:

1. 左側のツールバーでグラデーション ツール を選択するか、A キーを押します。
2. グラデーションを編集する要素を選択します。
3. 上部のツール オプションバーでストロークを編集 か塗りつぶしを編集 のどちらかを選択します。
4. 赤色のコントロール ハンドルをドラッグしてグラデーションを調整します。

   • 外側のハンドルをドラッグして、グラデーションの範囲を調整できます。Ctrl キー（Windows の場合）または ⌘ キー（Mac の場合）を押しながらドラッグすると、グラデーションの縦横比を保持したままサイズを変更できます。また、Shift キーを押しながらドラッグすると、グラデーションの形状を円形に保持できます。
     

   • 中央のハンドルをドラッグして、グラデーションの中心点を移動できます。
     

グラデーションをデフォルトの状態にリセットするには、グラデーション ツールボタン をダブルクリックします。