Illustratorのパターンからファイルを作りたい時に役立つ方法

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. Illustratorのパターンからファイルを作りたい時に役立つ方法

Illustratorのパターンからファイルを作りたい時に役立つ方法

Illustratorのパターンからファイルを作りたい時に役立つ方法

こんにちは、三輪です。

先日、Illustratorのデータからスウォッチに登録したパターンを書き出そうとしたら、情報を得て実際に書き出せるまで思いのほか手間取ったので、忘れないうちにメモ。
正方形ではないパターンでも書き出せるので、お困りの方はぜひお試しください。

やりたいこと

正方形に収まらない柄をパターンにして、ブラウザで並べて使える背景画像を作る必要がありました。
Illustratorのパターン作成機能を使い、配置や重なりを調整して無事パターン化に成功。スウォッチに登録できました。
試しに塗り潰してみて、継ぎ目が気にならないことを確認してから、ハタと気づきました。

あれ、ここからどうやって背景画像として取り出すんだ? と。

パターンを作ったまでは良いものの、スウォッチの中にあるのでは、当然ながらIllustrator以外では使えません。
悪足掻きで右クリックやドラッグをしてみても、書き出せるわけもなく。
諦めきれずに情報を探し回ったところ、ようやく見つけました。やっぱり同じことを考える人、いるんですね。

書き出し手順

まずは適当な大きさの図形を作成して、取り出したいパターンで塗りつぶします。

メニューのオブジェクトからアピアランスの分割をクリックします。
次に、分割・拡張をクリック。
アピアランスの分割がグレーアウトしている場合は、アピアランスの分割を無視して、分割・拡張をクリックしてください。

分割・拡張のダイアログが表示されます。特に変更の必要はないので、そのままOKをクリックします。

見た目には何も変わりませんね。

再びメニューのオブジェクトから、今度はグループ解除をクリックします。

必要箇所を選択しやすいので、メニューのオブジェクトから、クリッピングマスクの解除もしておいた方が良いです。

画像の適当なところでクリックしてみると、おお、何だかパターンぽいサイズで選択されているではありませんか。

Web素材として書き出すべく、アセットの書き出し欄にドラッグしてみると…

できた! やった、やったよ! 僕は勝ったよ…!

あとは名前をつけて、書き出しを実行するだけです。
実際に書き出した画像を敷き詰めてみたWebページ(のキャプチャ)がこちら。白くない部分は透過しているので、背景色を変えるだけで、いくらでもアレンジできます!

まとめ

いかがでしたでしょうか。
正方形に大人しく収まらない柄とはいえ、簡単にパターンファイルを作れるIllustratorからなら書き出しも容易だろうと踏んでいただけに、こんな裏技を使わないと取り出せないことにビックリしました。良い勉強になったと思います。

ちなみに、文章では淡々と手順をご紹介していますが、半分無理かと思っていただけに成功した瞬間は興奮しすぎて涙目でした
またひとつ、Illustratorと仲良くなれた気がします(たぶん錯覚)

もっとナイスな方法があるよ!という方は、ぜひぜひご教授くださいませ。

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!