Web屋のーりー

ウェブ作ったり、デザインしたり、広告についてかんがえるブログ。

powered by 36℃社

  • twitter
  • Facebook
  • Linked in
  • RSS

初心者さん向け情報の詰まった記事です。デザインのイロハをご紹介

かわいいデザイン・優れたデザイン、広告、コピーライティング

その他のお役立ち情報、たまにおもしろ情報も?

みんなのFireworksで、パターンを使ってきれいなWebデザインを目指す。Photoshopもあるよ!

このエントリーをはてなブックマークに追加
Pocket

みなさん、Fireworksつかってますか? Fireworksを知らないなんてもったいない。Webサイトのデザインを作るのに便利なんですよ。
今回は自分自身のメモ用でもあるんですが、Fireworksでのパターン適用方法です。Photoshopでのやり方もついでにご紹介!

パターンってなに?

そもそも、パターンって何なのかご存知ない方もいらっしゃるでしょうから、用語解説をはさみます。わかっている方は飛ばしてくださいね。

用語解説:パターン

FireworksやPhotoshopで「パターン」と呼ぶ場合、画像に対して、同じかたちの図柄をその画像全面にしきつめることです。布の柄をイメージしてもらえると良いかと。
継ぎ目のないパターンを使うことで、大きいサイズの画像でも一面に同じ効果をかけられます。
※継ぎ目のあるパターンもあります。

パターンありとパターンなし

パターンをもらってこよう

この記事は「じゃあ自分で作ってみよう!」というのはやりません。
すいません、そもそも私、パターンを作るの苦手です……。作れる方を超尊敬してます……!
というわけでパターンをダウンロードする場合は必ず以下の条件を確認してください。

  • 商用利用可かどうか
  • クレジット表記の有無
  • ライセンスは何なのか

そのうえで、使わせてもらう場合は有形無形の感謝の気持ちを持ちましょう。やくそくですよ。

パターン入手先

クオリティの高いパターンを紹介しているブログ記事をいくつかご紹介。

3番目の記事は「PS,AIに対応」と書いてありますが、PNGやJPGのデータ形式ならFireworksでもパターンとして使えます。また、patファイルの場合はPhotoshopでのみの利用となります。

上記のような紹介記事は、海外の配布サイトからのダウンロードになる場合がありますので、その際は以下の2点にご注意です。

  • ひとつは、「ダウンロード」と書いてある画像ボタンが、じつは広告バナーということがあること。
  • もうひとつは、ライセンスです。多いのはGPLやCCといったライセンス形態で、さらには個人利用のみ可(No commercial use)というのがけっこう多いです。

英語でライセンスを確認するのは苦労するので、“free for parsonal and commercial”などと記載されていない場合、手を出さないほうが良いでしょう。

パターンはどうすれば使えるのか。Fireworks版

まず、Fireworksのパターンデータが入っているフォルダを探します。
WindowsのPCなら、以下のフォルダを開いてください。

  • Program Files > Adobe > Adobe Fireworks CS5 > Configuration > Patterns

パターンを入れるdirectory

Macintoshなら、applicationから同様に Fireworks > Configuration > Patterns を開きます。

つぎに、そのフォルダに、ダウンロードしてきたパターンのデータをいれます。ちなみに、Fireworksは最初からけっこうな数のパターンが入っています。

もしこのときFireworksを立ち上げていたら、いったん開き直してください。開いたままだと先ほど入れたデータが反映されませんので。

そしてFireworksをあらためて立ち上げます。長方形ツールなどを使って図形を作り、プロパティの“塗りの選択”のプルダウンメニューから、パターンを選びます。するとそこに、先ほど追加したパターンが追加されています。

パターンを追加

Photoshopでのパターン適用方法

Photoshopの場合、たいていパターンのセットをダウンロードすると、patという拡張子のファイルがついてきます。これが“Photoshopで使えるっぽいサムネイル”になってまして、ダブルクリックすることで自動的にPhotoshopの内部に読み込まれます。
Photoshopでのパターン利用法は二通りあって、塗りつぶしツールの利用時と、レイヤースタイルの“パターンオーバーレイ”として使えるんですが、読み込まれたパターンを選択できるようになっています。

塗りつぶしツールで利用する場合

パターンを選ぶ

レイヤースタイルから利用する場合

レイヤースタイル

Fireworksのテクスチャとパターンの違い

テクスチャとパターンって、Photoshopでは同じ意味として使われているのですが、Fireworksの場合は明確に分けられていて、プロパティにはパターンとは別にテクスチャの項目があります。

テクスチャ

違いとしては、透明部分を含む、白黒素材のデータがテクスチャで、複数色使えて模様っぽいものがパターン、といった認識になるでしょうか。
両方を同時にかけることもできます。
Fireworksを使っていると、「こんなときは、どちらを使えばいいんだろう」ってのが次第にわかってくるので、どんどん使ってみましょう!

FireworksもPhotoshopも、どっちも使えるひとになりたい

え? この前のーりーがPhotoshopでWebサイトをつくろうって言ってたって? そうですね、いっそのこと両方使えるようになっちゃいましょう。
私のまわりでは、Fireworks派とPhotoshop派が3:7くらいです。

Fireworksは、「Illustratorに似ているので使いやすい」との意見が多いでしょうか。一方Photoshopは業界スタンダードと言えるので、就職・転職を目指す方にはPhotoshopでのWebデザイン作成方法を学ばれることをオススメしています。

そんなわけで、WebデザイナーとPhotoshopの記事もよろしくお願いします!

コメントする

ページの先頭に戻る