iOSのクロス風テクスチャを作ってFireworksで使いたい

iOS風のクロステクスチャを作る

最近のWebデザインでは、iOS風の布地っぽいテクスチャを色々なところに使っているのをよく見かけます。(例:Realmac Software
フィルタ一発で作れるような感じでもないし、昔流行った「アクアグラス風」みたいな名称がついているわけでもなさそうだし、どうやって作るのかなー、自分が普段使ってるFireworksで使いたいなあと思ったので、いろいろ試行錯誤して使えるようにしてみました。

といっても、このテクスチャをFireworksだけで作るのは難しいので、Photoshopで作ったものをFireworksのテクスチャに登録する流れです。

1. Photoshopで新規ファイルを作成

サイズは何でも良いと思いますが、Fireworksのテクスチャに登録する時は正方形だと都合が良いので、ここでは200×200pxとしました。

iOSのクロス風テクスチャを作る-1

2. キャンバスをグレーで塗りつぶす

ここでは#333333としましたが、お好きなグレーで。もう少し薄い色でも大丈夫かも。

iOSのクロス風テクスチャを作る-2

3. フィルタ→ノイズ→ノイズを加える

分布方法は「ガウス分布」、グレースケールノイズで、3~5%ぐらいの適用量が良さそうです。

iOSのクロス風テクスチャを作る-3

4. フィルタ→スケッチ→ウォーターペーパー

ノイズを加えたレイヤーに、さらにフィルタをかけます。

iOSのクロス風テクスチャを作る-4

iOSのクロス風テクスチャを作る-5

「ウォーターペーパー」の適用量ですが、私が見たチュートリアルでは「長さ42/明るさ53/コントラスト77」となっていました。恐らくこの数字と前後していれば、まあまあなテクスチャが作れるのではないかと。
最初に塗りつぶしたグレーの色が気に入らなかった人は、ここで「明るさ」と「コントラスト」を少し調整できます。

5. 画像をトリミングする

そのままだと、画像のフチの部分が白っぽくスカスカした感じになってしまうので、その部分をトリミングしました。

iOSのクロス風テクスチャを作る-6

6. テクスチャの完成

作ったファイルをPNG形式で書き出します。

iOSのクロス風テクスチャを作る-7

7. テクスチャをFireworksに登録する

このファイルを、Fireworksのテクスチャが登録されているフォルダに入れます。
大体、Fireworks本体が入っているフォルダの中にある「Configuration」っていうフォルダの中にある「Textures」フォルダです。

Adobe→Adobe Fireworks CS3→Configuration→Textures

Macも同じです(私の環境では)。

Fireworksが起動中の場合は再起動してください。テクスチャのリストに、今入れた画像が入っていればOKです。

iOSのクロス風テクスチャを作る-8

このテクスチャの作り方、ネットでいろいろ検索したのですが、Photoshopで新規ファイルを作ってからノイズを加える→フィルタ(移動)をかけるものが多かったです。どれが正解というわけではないと思うのですが、人によって手順が少しずつ違っていて面白いなーと思いました。

  • 元の画像サイズ
  • ノイズの適用量
  • ウォーターペーパーの「長さ」の適用量

の組合せで、かなり違ったものができそうです。

参考にした記事:

コメントを残す