アクセシビリティ
デベロッパーリソース
林大輔氏

林大輔氏

『旅』を売るWebデザイナー/ブログ「ProjectDD

作成日:
2009年9月10日
ユーザレベル:
初心者
製品:
Fireworks

オリジナルのテクスチャを作って、デザインの幅を広げよう

はじめに

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

必要ソフトウェア

Fireworks CS4

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

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

完成イメージ

(完成イメージ)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テクスチャを書き出す

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

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

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

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

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

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

[テクスチャ]のプルダウンから一番下にある[その他]を選択

([テクスチャ]のプルダウンから一番下にある[その他]を選択)

書き出したテクスチャファイルを選択

(書き出したテクスチャファイルを選択)

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

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

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

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

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

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

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

著者について

林大輔

『旅』を売るWebデザイナー/ブログ「ProjectDD

大学時代は建築を学んでいたものの、大学4年の時からWeb制作会社にて見習いデザイナーとしてアルバイトを開始。その後、2004年8月から現在の『旅』を売る会社に在籍。あるときはプロデューサーとして、あるときはデザイナーとしてお仕事中。
デザインカンプを作成する際は、もちろんFireworksで作成。Fireworksで使えるテクスチャファイルを無料で配布する「Fireworks texture gallery」を運営。