IllustratorでWEB用パターンが上手くできない時の確認項目

IllustratorでWEB用パターン素材を作るときのチェック項目

当サイトは「パターン 線が入る」というキーワードで検索1位となっており、訪問して下さる方々がいます。にも関わらずちゃんとした回答記事が無いので、私が確認している事をまとめてみました。パターン作成が上手くいかない時のヒントになれば幸いです。
WEB用パターン作成を前提としています。

WEB用パターンが上手く作れない・・そんな時のチェック項目

パターン作成は正確さが重要となります。ちょっとでもずれていると綺麗なパターンになりません。青海波のパターンを例にチェック項目をまとめてみました。制作環境IllustratorCS6。

画:ずれたパターンの例 

設定に失敗するとズレたパターンになります。

パターンにしたい模様ががずれている

まずはここから。作成したオブジェクトがズレていたら他の項目がOKでも意味がありません。拡大して1pxのずれもないように整えましょう。
下の図はズレている例。大きく拡大するとパターンのズレが分かります。
画:模様のズレを確認する

修正のコツ

定規、ガイド、グリッド、整列、を使用する。

  • 定規の表示方法:[表示]-[定規]-[定規を表示]
  • ガイドの表示方法:[表示]-[ガイド]-[ガイドを表示]
  • グリッドの表示方法:[表示]-[グリッドを表示]

画:定規・ガイド・グリッドなどを利用して綺麗に並べる
キャプチャ:整列パネル

パターンの範囲がずれている

折角綺麗に模様を並べても、作成するパターンの範囲がズレている場合があります。下図の青いガイドはパターンを作成したい範囲です。赤い枠は実際にパターンを作っている範囲。ズレているので、綺麗なパターンは作れません。
画:パターンの範囲がズレている例

Illustratorの環境設定を確認

パターンの範囲がズレていた。ぴったり合わせたいけど・・・ズレてしまう!そんな時はIllustratorの環境設定を見直してみます。
※WEB用パターンを作成する時の設定となっています。

ドキュメントプロファイルをWEBに

Illustratorで新規ドキュメントを作成する際に、プロファイルを選択する事ができます。WEB用のデザインを行うときは[WEB]を選択します。
キャプチャ:ドキュメントプロファイルの選択画面
WEB以外を選択していた場合は、個別に設定し直す事が可能です。

  • [ファイル]-[ドキュメントのカラーモード]-[RGB]
  • [効果]-[ラスタライズ]-[解像度]-[スクリーン(72ppi)]
  • [ウィンドウ]-[変形]-[新規オブジェクトをピクセルグリッドに整合]

ピクセルプレビューをONに

  • [表示]-[ピクセルプレビュー]をONに

ピクセルプレビューは、新規ドキュメント作成時に、プロファイルを[カスタム]にして、[プレビューモード]-[ピクセル]でも設定できます。
このように設定すると、ガイドやオブジェクトがピクセル単位で動くので、ズレているパターンを修正できると思います。

アウトライン化する

パターンを作成した時に、線が入ってしまう時の対処法です。作成した模様をアウトライン化する事によって線が消せる場合があります。

  • [オブジェクト]-[パス]-[パスのアウトライン]

青海波のようにブレンドを使用して作った模様は、オブジェクトを[分割・拡張]します。
画:パスのアウトライン化

パスファインダー[合流]を適用する

これは作成した模様によると思いますが、線が消えない場合は試してみてください。
キャプチャ:パスファインダー合流

WEB用に書き出してみる

Illustrator上ではラインが入っているけど、書き出したら綺麗に出来ていた・・・なんて事もあります。一通りチェックして問題なさそうな場合は、書き出してみましょう。拡大表示で線が入っていても、100パーセントでラインが入ってない場合は、綺麗に書き出せると思います。

如何でしたでしょうか。これらの事を確認すると大体はできると思うのですが・・・他にも「こんな事を注意した方がいいよー」などご指摘あれば教えてください。

コメントを残す

メールアドレスが公開されることはありません。