ホーム > Expression Design > Expression Designで他のオブジェクトからの色を使ったグラデーションを作成する

Expression Designで他のオブジェクトからの色を使ったグラデーションを作成する

Expression IQ 翻訳記事
Elliot[著], わにちゃん@ExpressionTech.jp[訳・編集]
2011年3月10日 from Expression IQ

はじめに

Microsoft Expression Design で作業していて、別のビットマップのレイヤーからの色を使用してカスタム グラデーションを作成するとします。同じラインに沿って、多分すべてがそのオブジェクトから生じる色のグラデーションを囲むオブジェクトがありましょう。何をすればいいかは明らかです。 元のオブジェクトの色をサンプリングすることによって、グラデーションを作成します。しかしそれは、すぐに簡単に行えない場合があります。

一部のユーザーはツールボックスの「カラースポイト」を使ったことがあり、カラースポイトでオブジェクトの色をコピーするのはこの場合、正しい作業ではありません。もう一つの「カラースポイト」ツールの「Coor eyedroper」を使うことでうまくトリッキーにさせることができます。両方のツールは外見が似ていますが、それらはわずかに異なる作業を実行します。

その「Color Eyedropper」を使用して簡単なカスタム グラデーションを作ってみましょう。

ツールボックスの[カラースポイト](左)と、プロパティパネルの[Color Eyedropper](右)

Color Eyedropperを使ったカスタムグラデーションの作成

この例では、私のお気に入りのエイリアンスーパーヒーロー、Captain Zapsterの基本的な装飾をおみせしましょう。放射状の背景を与えてより英雄的存在にさせたいです。このような背景、ただし、実際に放射状グラデーションとなり私のヒーローの肌と制服から直接このグラデーションの色がかかります。それは十分なColor Eyedropperと数回のクリックで簡単です。

  1. グラデーションの色の源にしたい画像を開きます。ここでの使用例の画像は、背景が透明の PNG ファイルです。
    説明:Capten ZapstarをDesignにインポート
  2. [プロパティ]ペインで、必要に応じて[外観]カテゴリを展開します。
  3. [塗りつぶし:なし]タブをクリックし、塗りつぶしの種類から[グラデーションの色]をクリックすると、カラーピッカーの下にグラデーションバーが表示されます。
    [グラデーションの色]をクリック
  4. カラーピッカーの右下にあるものは、[カラー スポイト]ツールの小さなバージョン、「Color Eyedropper」が見えるのを注意してください。これがターゲットツールです。
  5. First, we want to set up some stops for our gradient. Each stop represents a color in the gradient. You can specify as many stops as you can manage, but I decided that I want the gradient to be spread out over five colors sampled from my superhero, so that means that I need only five stops. The default gradient contains the minimum number of stops, which is two, so I just need to add three more. To do this, just click inside the gradient bar. You can adjust the stop to specify how much of the representative color that you want to appear in the gradient, as well as adjust the midpoint of the color change, but we won’t tackle that just yet.

    クリックしてグラデーション境界を追加

  6. Now, it’s time to load our stops with the sampled colors. Click the first stop to select it.

    グラデーション境界を選択

  7. では、その[Color Eyedropper]ツールをクリックします。ポインターがeyedropperに変わります。
    DropperClicked

    ポインターがEyedropperになる

  8. 見本に適用したいオブジェクトの色をクリックします。その色は最初のグラデーション境界に見本が適用されます。

    見本を適用する

  9. 生成したいグラデーション境界を生成するために、手順7と8を繰り返します。終わったら、見本を適用したそれぞれの色がグラデーション境界に表示されます。私はここでは、キャプテンのブーツ、ケープ、ベルトとアウトフィットの色を見本として適用することにしました。

    他の見本が適用された色

  10. Now, let’s draw the gradient. First, decide whether you want a linear gradient, which is a gradient with a series of straight lines, or a radial gradient, which is a gradient consisting of a series of concentric circles. Click the appropriate button in the 外観 ペイン. For the example, I chose 放射系グラデーション.
    RadialGradient
  11. Over in the toolbox, click the drawing tool that represents the shape that you want your gradient to be. You can also select the ペン tool if you want to draw a custom shape.
  12. Draw your gradient. In this example, I created a new layer below the superhero and drew the gradient to spread in a circle around him. Your situation may require that you do something else. For instance, you may want to reduce the opacity of your gradient in order to create a certain effect. Your needs may be radically different, but the key here is that you’ve created the gradient you wanted, using colors from the object.

    Drawing the gradient. In this example, we first created a new layer behind the image and then drew the gradient on it so that it would appear behind the image

  13. If necessary, you can now adjust the stops to change the gradient composition. You can also adjust the midpoints to designate when the colors will begin to change from one to the other. To delete a stop, just drag it down from the gradient bar. For more information on adjusting gradients, see Expression Design Help.

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

  14. For fun, I added some effects to the gradient. Now Captain Zapstar is ready for the world, or maybe even the universe.

That’s all there is to it. If you have the need to use this gradient again, you can save it by clicking More swatches, selecting the Gradients category, and then clicking Add Swatch to Library.

That’s it for now. See you next time.

Expression Design 最新記事

コメント

▲このページのトップへ