ウェブデザイナーのためのホームページ考察ブログ

WebデザイナーのためのWebページの考察を行うブログ。またはウェブページの作り方Tipsを語るブログ。

【Illustrator】PhotoshopのパターンファイルをIllustratorで使いたいとき

f:id:Keiro:20140711232558j:plain

ネットでフリー素材などを集めているときによさげなパターン画像を見つけることがあります。

パターン素材はベクターデータだと最高に嬉しいのですが、
実際にはPhotoshopのパターンファイルのみというのが多いです。

そういうときに、
PhotoshopのパターンファイルをIllustratorで使えないかなぁ
と思いましたのでやってみました。

注:もし、もっとうまい方法がありましたら教えてください!!
注:バージョンはCS6を使っています。


まず最初にやったのが、Photoshopのパターンファイルである.patファイルを
Illustratorで直接読み込めないかということ。

これは無理でした!!
全然読めない!!

というわけで、
地道にやります。

【いちおう、予備知識】
Illustratorは基本的にベクター情報なので拡大しても画質は衰えません。
ただし、Photoshopのパターンファイルはピクセルデータなので、
Illustratorで使用した場合、拡大によって画質は衰えます
その点は注意して使用しましょう。

Photoshopのパターンをpsdで保存する
f:id:Keiro:20140711234212j:plain

Illustratorで使用したいパターンファイルをpsdにします。

今回使用するパターンファイルのサイズは256x256なので、
バケツツールでパターンを塗り、そのサイズにして保存します。

サイズが分からないという場合でも、適当にバケツツールでパターンを敷き詰めると大体分かります。(キリの良いサイズなので)

Illustratorでパターンを作成する
f:id:Keiro:20140711234220j:plain

オブジェクト → パターン → 作成

から、新規パターンを作成します。

f:id:Keiro:20140711234226j:plain

このパターン作成画面で、先ほど作成したパターン画像のpsdファイルを
ドラッグ&ドロップします。

f:id:Keiro:20140711234304j:plain

パターンオプションで、幅と高さをパターンのサイズにします。
今回は256x256にします。

そのまま完了を押したくなりますが、押してはいけません。

もし押した場合は以下のようなウインドウが出ますのでキャンセルします。

f:id:Keiro:20140711234419j:plain

パターンはリンク画像といって画像を参照している状態はNGなので
画像を埋め込みにする必要があります。

ウインドウからリンクを開いて、読み込んだpsd画像を埋め込みます。

f:id:Keiro:20140711234545j:plain

これで完了してOK!!

f:id:Keiro:20140711234605j:plain

これでIllustratorでも無事に使えるようになりました!

ただ、このパターンファイルはベクターデータではなくあくまでもピクセルデータですので、
拡大されることが分かっているような場合はあまり利用をオススメしません

その際には、地道にIllustratorベクターのパターンファイルを作った方がいいと思いますが、
最初のプロットの段階ではイメージを伝えたいといったときには使えると思います。

f:id:Keiro:20140711234925j:plain

また、

ウインドウ → 画像トレース

から画像をトレースしてみるのも、もしかしたら使えるかもしません。
(ピクセルを自動的にベクター情報にする)

完全に一致させるのは中々条件がありますが、もしかしたら使えるレベルでトレースできるかもしれません。

色数を減らしてみるとかパラメータを変更してみると面白いと思います。