Fireworks入門 第3回 テクスチャとパターンを活用して質感を表現してみよう！
Fireworks入門
Fireworksには、「パターン」と「テクスチャ」という、オブジェクトの質感や柄を簡単に表現できる機能があります。
※Photoshopの場合、機能名が逆の呼び方になっています。
パターン：カラーのデザイン（モノクロもあります）。適用すると、元オブジェクトの塗りを上塗りします。
テクスチャ：モノクロのデザイン。適用すると、元のオブジェクトの塗りとブレンドされた状態になります。
さらに、パターンでは模様の比率を調整でき、テクスチャではモノクロデザイン部分の不透明度を調整できます。本記事では、このテクスチャとパターンを使ってデザインする方法を紹介します。
Fireworks CS6の体験版をダウンロード サンプルファイルをダウンロード
図1 テクスチャとパターンの例 図2 パターン：ハンドルを操作することで、角度や比率を調整できます 図3 テクスチャ：モノクロデザイン部分の不透明度を調整できます
テクスチャとパターンを使ってデザインしよう
テクスチャとパターンを使えば、デザインにさらに深みを加えることができます。以下のフラッグオーナメントに質感を持たせてみましょう。
図4 加工前のサンプル
テクスチャを適用する
旗のオブジェクトを選択して、プロパティインスペクタの［テクスチャ］の横にあるプルダウンメニューからテクスチャを選択します。ここでは［チェック 02］としました。
図5 ［チェック 02］のテクスチャを適用します 図6 テクスチャ名の横の値でモノクロデザイン部分の不透明度を調整できます 図7 ［透明］にチェックを入れると、モノクロデザインの白い部分が透けるようになり、背景（ここでは水色）も含めてブレンドされた状態になります
同様の作業を行い、残りの旗にもテクスチャを適用します。
フィルタ効果を使って立体的な表現にする
フィルタ効果を使ってオブジェクトに立体的な表現を加えてみましょう。旗のオブジェクトを全て選択した状態で、プロパティインスペクタから［フィルター］→［シャドウとグロー］→［ドロップシャドウ］を選びます。
図8 ドロップシャドウの値は図のように設定しました 図9 ドロップシャドウを適用した結果。立体感が出ました
パターンを適用する
背景にもっと質感を持たせてみましょう。背景の水色のオブジェクトを選択して、プロパティインスペクタから［青い布］パターンを適用します。
図10 背景を選択した状態で、プロパティインスペクタの［パターン塗り］ボタンをクリックしします 図11 一覧から［青い布］を選びます 図12 ［青い布］が適用されました。赤丸のハンドルを操作することで、模様の比率、詰まり方を調整できます
フィルタ効果を使ってパターンの色味を変更する
背景に質感を持たせることができましたが、色味は元の水色にしたいところです。そのような場合には、フィルタ効果を使ってパターンの色味を変更できます。これを使えばさらに様々なバリエーションの質感を表現できます。
オブジェクトを選択した状態で、プロパティインスペクタから［フィルター］→［カラーを調整］→［色相・彩度…］を選び、色味を調整します。
図13 スライダーを調整して色味を変更します。全体に対して色を均一につけたい場合は、右側の［色を付ける］にチェックを入れます。好みの色に調整できたらOKをクリックします 図14 色味を変更した結果
以上で完成です。このように簡単に質感を持たせることができました。
テクスチャとパターンを重ね掛けして表現力アップ
パターンとテクスチャは、1つのオブジェクト対して同時に適用することが可能です。例えば、下図のようにレンガにペイントしたような凹凸風のデザインも簡単にできます。
図15 右側のオブジェクトには、テクスチャ［ブラスター］とパターン［チェック2_02］が同時に適用されています
組み合わせ次第で多彩な質感を表現できるのでぜひ活用してください。
オリジナルのテクスチャやパターンを使用する
テクスチャやパターンは、オリジナルのものを作成できます。また、素材集などもあります。こうしたオリジナルのテクスチャやパターンでも同様に使用することができます。
一時的に利用する場合
一時的に使用するものであれば、テクスチャ／パターンのプルダウンメニューの最下部にある［その他…］を選択し、使用するオリジナルのテクスチャ／パターンのファイルを選びます。
図16 最下部にある［その他…］を選択します 図17 使用するオリジナルのテクスチャ／パターンのファイルを選びます
常にメニューに表示させたい場合
お気に入りのテクスチャ／パターンであれば、常にメニューに表示させておきたいところでしょう。メニューに追加するには、以下の2種類の方法があります。
【テクスチャ／パターンがプリインストールされているディレクトリに保存する】
それぞれ、以下のディレクトリにオリジナルのファイルを保存します。
パターン Mac OSの場合：
Macintosh HD -> アプリケーション -> Adobe Fireworks 【バージョン番号】 -> Configuration -> Patterns
Windowsの場合：
C:¥Program Files¥Adobe¥Adobe Fireworks 【バージョン番号】¥Configuration¥Patterns テクスチャ Mac OSの場合：
Macintosh HD -> アプリケーション -> Adobe Fireworks 【バージョン番号】 -> Configuration -> Textures
Windowsの場合：
C:¥Program Files¥Adobe¥Adobe Fireworks 【バージョン番号】¥Configuration¥Textures
- メリット：テクスチャやパターンの一覧を表示する拡張機能などを使用した場合でも、きちんと読み込まれる。
- デメリット：プリインストールされているデータと後から追加したデータの切り分けが難しくなること。バージョンアップの度にそのバージョンのディレクトリに保存しなければならないこと。
【Fireworks起動時に特定のディレクトリのファイルを読み込むようにする】
［環境設定］→［プラグイン］から、Fireworks起動時に読み込むファイルを指定できます。そこで、オリジナルファイルがあるディレクトリを指定します。指定すると、一覧表示されます。
図8 長方形ツールと角丸長方形ツールのみで描画した建物
- メリット：プリインストールされているデータとは別のディレクトリで管理できるのでわかりやすい。バージョンアップの際も新バージョンの管理画面からこのディレクトリを指定するだけでよい。
- デメリット：拡張機能によっては、このディレクトリを参照しない。例えば、テクスチャ／パターンの一覧を表示する拡張機能を使用した場合に、ここで指定したファイルが一覧に表示されない。
基本的には後者の方法がおすすめですが、用途や状況に合わせて使い分けるとよいでしょう。
便利なパターンやテクスチャを配布しているサイト
プリインストールされているものを活用するだけでなく、自作したり、様々なフリー素材を活用することによってさらに表現の幅を広げることができます。商用利用も可能なパターンやテクスチャ素材を配布している国内サイトを紹介します。
これらの素材を活用して、効率よくデザイン作業を進めていきましょう。