Adobe
サインイン 注文状況 ユーザー登録

著者 林大輔氏

林大輔氏

作成日

9 September 2009

ページ ツール

Tags

ユーザーレベル

初級

必要な製品

はじめに

Fireworksには、あらかじめたくさんのテクスチャが用意されています。もちろん、自分でオリジナルのテクスチャを作ることも出来ます。
オリジナルのテクスチャを作ることにより、用意されているテクスチャよりも太い斜線・間隔が広い斜線を実現する、チャックの大きさをより大きくするなど、デザインの幅が広がっていきます。
今回は、オリジナルテクスチャの作り方・適用の仕方を紹介します。

オリジナルのテクスチャを作る

今回は以下のような星形のデザインを、テクスチャを使ってデザインしていきます。

完成イメージ
完成イメージ

オリジナルのテクスチャを作る際にポイントとなる点が2つあります。

ポイント1.「白」と「黒」を意識する

今回のデザインでは、青い背景に白い星が散りばめられています。ですので、背景色が「黒」・星の色が「白」のテクスチャを作りました。
このテクスチャを塗りが青のオブジェクトに適用させます。すると、背景が「白」・星の色が「青」と色が反転してしまいます。（テキスチャを適用させる方法は、後述します。）

（背景色が「黒」・星の色が「白」のテクスチャを適用させた場合）
（背景色が「黒」・星の色が「白」のテクスチャを適用させた場合）

Fireworksではテクスチャを適用させると、テクスチャファイルの白黒が反転して適用されます。
ですので、青い背景に白い星が散りばめられているデザインを実現するためには、背景色が「白」、星の色が「黒」のテクスチャを作る必要があります。

背景色が「白」・星の色が「黒」のテクスチャを適用させた場合
背景色が「白」・星の色が「黒」のテクスチャを適用させた場合

テクスチャは基本的に「白」「黒」「グレースケール」で作成します。色を持ったテクスチャファイルもテクスチャとして適用させることはできますが、色は引き継がれません。

（色を持ったテクスチャを適用させた場合）
（色を持ったテクスチャを適用させた場合）

ポイント2.繰り返しを意識する

テクスチャは繰り返して適用されます。繰り返されることを意識して書き出さないと、テクスチャを適用させたときに余白が生まれたり、オブジェクトが一部に寄ってしまったりすることがあります。

（ 画像・ 繰り返しを意識していないと余白が生まれたり、寄ってしまったりする）
（ 画像・ 繰り返しを意識していないと余白が生まれたり、寄ってしまったりする）

テクスチャを書き出す前に、繰り返して適用され際にどのように表示されるのか・・・を確認しておくことをオススメします。

（ 書き出す前に、どのように適用されるかを確認しておく）
（ 書き出す前に、どのように適用されるかを確認しておく）

テクスチャを書き出す

テクスチャとして書き出したい範囲にスライスを適用させます。ツールパネルからスライスツールを選択し、スライスを適用してください。
書き出すテクスチャファイルの形式は「PNG」「GIF」「JPEG」「BMP」「TIFF」「PICT（Macintosh のみ）」のいずれかを指定し、適切な場所に書き出します。

（スライスを選択し右クリックから[選択スライスの書き出し]をクリック）
（スライスを選択し右クリックから[選択スライスの書き出し]をクリック）

画質を落として書き出すと、劣化した部分もテクスチャの模様となってしまうので注意してください。また今回の例では正方形に書き出していますが、長方形になっても問題ありません。

作ったテクスチャを適用させる

テクスチャを適用させたいオブジェクトを選択します。プロパティインスペクタの[塗り]にある[テクスチャ]のプルダウンから、一番下にある[その他]を選択します。ファイルを選択するウインドウが表示されるので、先ほど書き出したテクスチャファイルを選択します。

（[テクスチャ]のプルダウンから一番下にある[その他]を選択）
（[テクスチャ]のプルダウンから一番下にある[その他]を選択）
（書き出したテクスチャファイルを選択）
（書き出したテクスチャファイルを選択）

ストローク（線）に対しても、同じようにテクスチャを適用させることが出来ます。

一度選択したオリジナルのテクスチャは、Fireworksを終了するまで[テクスチャ]のプルダウン上に表示されています。

（一度選択したオリジナルのテクスチャが[テクスチャ]のプルダウンに表示される）
（一度選択したオリジナルのテクスチャが[テクスチャ]のプルダウンに表示される）

また、よく使うテクスチャはFireworksのフォルダ内の[Textures]フォルダに保存しておくと、 都度[その他]からファイルを選択しなくても、常に[テクスチャ]のプルダウン上に表示されます。

[Textures]フォルダの場所の一例（インストール先が異なる可能性があります）
Windowsの場合：
Macintoshの場合：[アプリケーション]-[Adobe Fireworks CS4]-[Configuration]-[Textures]

和風のテクスチャ、チェック模様のテクスチャなど、オリジナルのテクスチャを作ることにより、デザインの表現が広がっていきます。是非、ご自身でテクスチャを作ってみてください。

Tutorials & Samples

Tutorials

  • Creating and exporting Fireworks graphics as FXG files for Flash Catalyst
  • Creating jQuery Mobile website themes in Fireworks
  • Extracting CSS properties from Fireworks design objects

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

国・地域および言語の選択

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー（2011年9月30日更新）にご同意いただいたものとみなされます。

Reviewed by TRUSTe: site privacy statement