色、ブラシ、およびマスクの設定

オブジェクトの外観の変更は、Microsoft Expression Blend で行う基本的な操作です。[プロパティ] パネルの [外観] および [ブラシ] にあるプロパティを使用して、選択したオブジェクトのストロークや塗りつぶしの色、不透明度を変更したり、表示と非表示を切り替えることができます。プロパティの [外観] および [ブラシ] カテゴリは、Expression Blend プロジェクトで選択したオブジェクトの種類に応じて、そのオブジェクトのコンテンツを動的に変更し、適切な表示属性を反映します。

外観を定義する一般的なプロパティ

多くの場合、オブジェクトの外観を変更する際には、特定のプロパティにブラシを適用します。次の表では、これらのプロパティについて説明します。

ブラシ

ブラシは、アートボード上のオブジェクトの外観を設定するために使用されます。たとえば、下に示す最初のイメージのように、青の単色ブラシを使用して四角形の塗りつぶしを実行できます。単純な単色ブラシやグラデーション ブラシからより複雑なタイル ブラシまで、各種のブラシがあります。次の表では、Expression Blend で使用できるブラシについて説明します。また、[ブラシなし] を使用して、選択したプロパティからすべての色を削除することもできます。たとえば、四角形の輪郭を作成するには、四角形の [Fill] プロパティを [ブラシなし] に設定し、[Stroke] プロパティを [単色ブラシ] に設定します。

ブラシ	外観			説明
単色ブラシ				単色のブラシ。
線状グラデーション ブラシ				色の線状グラデーションのブラシ。
放射状グラデーション ブラシ				色の放射状グラデーションのブラシ。
イメージ ブラシ				イメージから作成されたブラシ。左から右に、元のイメージ ブラシ、並べて表示したイメージ ブラシ、反転させたイメージ ブラシ。
描画ブラシ				ベクター描画から作成されたブラシ。左から右に、元の描画ブラシ、並べて表示した描画ブラシ、反転させた描画ブラシ。
表示ブラシ				ボタンなどのコントロールから作成されたブラシ。左から右に、元のボタン、[並べて表示モード] が [Tile] に設定されているブラシ。表示ブラシの作成に使用されるコントロールは複雑であるため、表示ブラシを使用すると、実行中のアプリケーションのパフォーマンスが一時的に低下する場合があります。

ブラシ リソース

オブジェクトにブラシを作成したら、そのブラシをリソースに変換して他のオブジェクトに適用できます。

ブラシ リソースは、単一のブラシ プロパティまたは色プロパティに限定されません。アートボード上の複数のオブジェクトを使用して、ブラシ リソースを作成できます。さらに、基になっているオブジェクトが実行時に変化すると、それに合わせて外観が実行時に更新される、[VisualBrush] と呼ばれるブラシを作成することもできます。

作成したブラシをプロジェクト全体または他のプロジェクトで再利用できるように、ブラシのリソース ディクショナリを作成できます。

詳細については、「ブラシ リソースまたは色リソースの作成」および「オブジェクトから再使用可能ブラシ リソースへの変換」を参照してください。

リソースについては、「再利用可能リソースの作成」を参照してください。

色と色空間

Expression Blend には、[プロパティ] パネルの [ブラシ] の下にカラー エディターが組み込まれています。カラー エディターは、[リソース] パネルでブラシ リソースを変更する場合にも表示されます。カラー エディターには、次に示す 4 つの色空間と 16 進数モード (#AARRGGBB) があります。

• RGB   赤 (0 ～ 255)、緑 (0 ～ 255)、青 (0 ～ 255)

• HLS   色相 (360 度の色相環)、輝度 (0 ～ 100%)、彩度 (0 ～ 100%)

• HSB   色相 (360 度の色相環)、彩度 (0 ～ 100%)、明度 (0 ～ 100%)

• CMYK   シアン (0 ～ 100%)、マゼンタ (0 ～ 100%)、イエロー (0 ～ 100%)、ブラック (0 ～ 100%)

色空間を切り替えるには、現在の色空間で下線の付いた文字のいずれかをクリックし、別の色空間のポップアップ メニューを表示します。

スポイト ツールとペイント ツール

Expression Blend には、オブジェクト間で属性をコピーして適用するための専用ツールが 2 つあります。次のプロパティは、スポイト ツールとペイント ツールを操作してコピーまたは適用します。

• ブラシ   Foreground、Background、BorderBrush、Fill、Stroke、OpacityMask

• 外観   Opacity、StrokeThickness、StrokeMiterLimit、StrokeStartLineCap、StrokeEndLineCap、StrokeLineJoin、StrokeDashCap

• テキスト   FontFamily、FontSize、FontWeight、FontStyle、TextDecorations、LineHeight、TextIndent、TextAlignment

	スポイト ツール	別のオブジェクトの外観を、現在選択されている 1 つまたは複数のオブジェクトにコピーします。
	ペイント ツール	現在選択されている 1 つまたは複数のオブジェクトの外観を別のオブジェクトにコピーします。

[スポイト] ツールおよび [ペイント ツール] ツールの詳細については、「オブジェクトへの属性のコピーまたは適用」を参照してください。

[単色ブラシ] または [グラデーション ブラシ] でグラデーションの分岐点を変更する場合は、[カラー エディター] の右下隅に [スポイト] が表示されます。このスポイトを選択すると、デスクトップのどこからでもカラー サンプルを取得し、選択したブラシにその色を適用できます。Esc キーを押せば、いつでもスポイトの操作をキャンセルできます。

グラデーション

複数の色を徐々に混ぜ合わせて滑らかな色のグラデーションを作成し、オブジェクトに適用してその外観に深みを与えることができます。このオブジェクトを背景として使用して、左側の単色が右側に向かって次第に白くフェードアウトしていくようにすることができます。これにより、普通の状態では平坦なオブジェクト上に明らかに区別できる 2 つの領域が生まれます。

[プロパティ] パネルの [ブラシ] で [線状グラデーション ブラシ] と [放射状グラデーション ブラシ] をクリックして、2 種類のグラデーション ブラシを切り替えることができます。

この 2 種類のグラデーション ブラシを使用して、グラデーション塗りつぶし、グラデーション ストローク、[Foreground] プロパティにグラデーションが指定されたテキスト、または [Background] プロパティを持つ任意の要素に適用できるグラデーション背景を作成できます。外観を定義するプロパティにグラデーションを適用すると、境界と呼ばれる小さなアイコン がグラデーション スライダーに表示されます。各グラデーション境界の色は変更できます。また、グラデーション スライダー上をクリックするだけで、スライダーにいくつでも境界を追加できます。境界が不要になった場合は、グラデーション スライダーの下部から外側にドラッグして、簡単に削除できます (スライダーの横または上部から外側にドラッグしても削除されません)。

グラデーション ブラシを使用するときは、いくつかのオプションも設定できます。[プロパティ] パネルの [ブラシ] で [詳細プロパティ オプション] をクリックし、[SpreadMethod] プロパティを次のいずれかに設定します。

• Pad   グラデーションの一番外側にある分岐点の色をオブジェクトの端まで伸ばします。

• Reflect   グラデーション塗りつぶしを反転します。

• Repeat   グラデーション塗りつぶしを繰り返します。

これらのオプションは、[ブラシの変更] ツールを使用してブラシを変更するときに、線状と放射状の両方のグラデーションに適用されます。詳細については、後述の「ブラシの変更ツール」を参照してください。

ブラシの変更ツール

オブジェクトに適用する塗りつぶし、ストローク、不透明度マスク、または他のブラシを変換するには、[プロパティ] パネルでブラシのプロパティを選択してから、[ツール] パネルの [ブラシの変更]  を選択します。ブラシ変更矢印がアートボードに表示され、マウス ポインターで変更できるようになります。グラデーション ブラシを使用している場合、変更矢印の終点は、カラー バーのいずれか一方の端のグラデーション境界に対応しています。ブラシの変更ツールの動作は、次の方法で変更できます。

• Shift キーを押しながら端点をドラッグすると、移動が端点間の直線上に制限されます。

• Shift キーを押しながら矢印全体を移動すると、移動が X 平面または Y 平面に制限されます。

• Shift キーを押しながら端点を回転すると、15°間隔でスナップされます。

• Alt キーを押しながら端点をドラッグすると、両方の端点が同時に移動し、中心点の位置が保たれます。

次のイメージは、[Fill] プロパティのグラデーション ブラシにさまざまな変換を適用した後の四角形の外観を示すものです。

四角形の線状グラデーション ブラシに適用された変換

四角形の放射状グラデーション ブラシに適用された変換

[プロパティ] パネルの [ブラシ] で [詳細プロパティ オプション] をクリックしたときにグラデーション ブラシで塗る方法を設定してから、[SpreadMethod] を設定することもできます。前のイメージでは、[Pad] オプションが選択されています。[Reflect] または [Repeat] オプションを選択し、次に、変換矢印をオブジェクトよりも短くすると、波形になって表示されます。

グラデーション ブラシ以外のブラシの種類を変換することができます。ブラシの変更の詳細については、「グラデーション ブラシまたはタイル ブラシの変更」を参照してください。

クリッピング

ブラシを変換するとき、オブジェクトの一部が切り取られ、境界ボックス外の部分が消えることがあります。切り取りの問題を解決するには、次の方法で行います。

• [プロパティ] パネルの [外観] で、[ClipToBounds] プロパティのチェック ボックスをオフにします。

• [プロパティ] パネルの [変換] で、[RenderTransform] カテゴリではなく、[LayoutTransform] カテゴリのプロパティを使用します。これは、表示ブラシを変換するときに特に有効です。

ストローク

ストロークとは、オブジェクトの枠線のことです。オブジェクトのストロークに適用されているブラシ (単色、グラデーション、またはタイル)、不透明度、幅、マイター リミット、および角の結合や線端のスタイルを変更できます。オブジェクトのストロークは、そのオブジェクトに塗りつぶしが適用されているかどうかにかかわらず、必ず塗りつぶしの上に適用されます。オブジェクトのストロークを変更するには、[プロパティ] パネルの [ブラシ] の下のリストで [Stroke] を選択する必要があります。

• ストロークの幅   オブジェクトのストロークの幅はピクセル単位 (デバイスに依存しない単位で、約 1/96 インチ) で指定します。0 を最小値として、該当するシェイプの幅または高さの半分までの値を指定できます。通常、ストロークの太さがシェイプの幅と高さの半分に達すると、ストロークで塗りつぶし部分全体が覆われます。ストロークの幅の値は、[プロパティ] パネルの [外観] にある [StrokeThickness] プロパティで設定できます。

• 角の結合   四角形などの角が尖ったオブジェクトでは、各頂点のストロークの形を、[Miter Join]、[Round Join]、[Bevel Join] の 3 つの結合スタイルのいずれかを適用して変更できます。角の結合スタイルは、[プロパティ] パネルの [外観] にある [StrokeLineJoin] プロパティで設定できます。

  

• マイター リミット マイター結合の角を伸ばせる長さを制御します。この値を超えると、自動的に面取りされてベベル結合になります。マイター リミットは、[プロパティ] パネルの [外観] にある [StrokeMiterLimit] プロパティで設定できます。次の図は、[StrokeThickness] を 40 にして、[StrokeMiterLimit] を 1 、2.2 、および 4 に設定した 3 つの角を示しています。角度のサイズとストロークの太さにより、マイター リミットの視覚効果が決まります。

  

• 線端   線端が他の線端とつながっていない直線などのパスについては、ストロークの各線端の形状を、[Flat Cap]、[Round Cap]、[Square Cap]、[Triangle Cap] の 4 つの線端スタイルのいずれかを適用して変更できます。線端スタイルは、[プロパティ] パネルの [外観] にある [StrokeEndLineCap] プロパティと [StrokeStartLineCap] プロパティで設定できます。

  

不透明度と表示

オブジェクトの不透明度を下げると、逆に透明度が増し、その背後にあるオブジェクトが透けて見えるようになります。不透明度は、オブジェクト、グラデーション、または不透明度マスクのすべての透明度情報を格納するアルファ チャネルによって制御されます。次の表では、オブジェクトの不透明度を変更するために選択できる 3 つの方法について説明します。

方法	結果
Opacity   オブジェクトのすべての表示属性を含め、オブジェクト全体の透明度を変更します。右の図では、不透明度の値が 60 パーセントに設定されています。
Transparency   オブジェクトのすべての属性を変更するのではなく、塗りつぶしやストロークなど、オブジェクトの個別のブラシ属性のアルファ値 (A) を単独で若干高く設定できます。右の図では、楕円の塗りつぶしのアルファ値が 50 パーセントに設定されているため、塗りつぶし部の透明度がストローク部よりも高くなっています。楕円のストロークのアルファ値は 100 パーセントのままです。
Visibility   状況に応じてオブジェクトの表示と非表示を切り替えることができます。これは、特にアニメーションでアートボードからオブジェクトを完全に削除したくない場合に役立ちます。右の図では、青い塗りつぶしと黒く太いストロークが適用され、同じ表内の前の 2 つのイメージの一部を成している左側のオブジェクトが、Hidden (非表示) に設定されています。

関連項目

概念

エフェクトの適用