IllustratorのパターンをPhotoshopのパターンに変換する方法

POSTED BY  
2016年7月13日

Illustrator CS6以降では、「オブジェクト-> パターン-> 作成」を使えば、結果をプレビューしながらパターンを作ることができるようになりました。難しいシームレスパターンでもを直感的に作成できて楽ですよね。

そんなIllustratorで作ったパターンをPhotoshopで使ったり、Webで使ったりしたいことも多々あると思います。「パターンを書き出す」の機能があってもおかしくないのですが、それがないんですよ…(※2016年7月現在) いずれは書き出せるようにはなるだろうと思いますが、それまではこの記事で紹介している方法で我慢して下さいね。

ちなみに、まだIllustratorでパターンを作ったことがないなら、以下の記事が役に立つと思います。
Illustratorでパターン素材を作成するチュートリアルまとめ

Step 1. 新規でドキュメント

新規でドキュメントを作ります。
最終的にはjpegやpngなどのビットマップ画像で利用するため、詳細(Advanced)セクションのオプションを少々調整します。

Step 2. パターンを用意

今回はうちの愛猫のプーティの写真を使って適当にパターンを作りましたが、既存のパターンを利用する場合はパターンを用意しておいて下さい。

Step 3. パターンをアートボードに配置

パターンをスウォッチ(Swatches)からアートボードにドラッグします。

Step 4. パターンの「境界線パス」を選択

スウォッチから出したパターンを選択して、command + shift + Gでグループ解除します。

「この矩形内のエリアがパターンだよ!」を定義しているパスがあるので、それを選択しておきます。

透明のパスだから見つけにくいと思うので、command+Yでアウトライン表示モードに切り替えると選択しやすいです。

Step 5. パターンを書き出す

先ほど選択した「境界線パス」内のエリアを書き出すためには、まず[オブジェクト(Object)] → [アートボード(Artboards)] → [選択したオブジェクトに合わせる(Fit to Selected Art)]でアートボードのサイズを選択したパスに合わせておきます。

そしたら[ファイル(File)] → [書き出し(Export)] → [Web用に保存(Save for Web)]で書き出します。

① 今回はビットマップ画像(我が家の猫の写真)を使用してパターンを作ったので、アンチエイリアス方法を「アートに最適」にしました。

② 「アートボードサイズでクリップ」をチェックしないとドキュメントのサイズで書き出されるので、チェック!

出来上がったパターンはこんな感じです↓

まとめ

これで、書きだした画像をPhotoshopのパターンにしたり、WebでBackgroundとして使えたりできます!

パターンならIllustratorのほうがお得意分野だし、ネット上であふれるほど転がっています。こんなおいしいリソースを有効利用しない手はないです!

変換するのは簡単…と言えば簡単ですが、早く「パターンを書き出す」機能出してくれないかな?Adobeよー。


Hi, 中国四川出身の王です。2008年に日本に渡り、大学卒業後Web制作会社勤務を経て、現在はフリーランスとしてゆるりと働いています。サイト制作の全般を担当しています。好きな生き物はプーティ(マイCat)です。趣味はアニメ鑑賞です。画家になるのが夢だったりします!

関連記事

Post a comment

Your email address will not be published. Required fields are marked *