HOME　>　Illustratorでの入稿方法

Illustratorでの入稿方法

Illustratorで作成したデータをWebとしてコーディングしていくにあたって、環境によってかわりますが、下記のような問題点が出る場合があります。

できる限り意図したデザインに近づけるため、以下を参考にコーディングページに最適なデータでのご入稿をお願いします。

1.データの確認

カラーモード

RGBモードになっているか確認してください。
→ファイル＞カラーモードから確認できます。

CMYKモードで作成されている場合、RGBに変更する必要があります。
変更後は、意図したものと異なった色味となってしまうため確認が必要です。

単位の設定

単位がピクセル、解像度は72dpiになっているか確認します。
確認方法は以下を参照してください。

またピクセルに設定後、デザインデータがピクセルのラインからずれる場合があるので、細部の確認を行ってください。

環境設定の単位をピクセルに設定する

表示形式をピクセルプレビューにする／ピクセルにスナップにチェックする

※これで1ピクセル単位の表示ができ、ピクセルに沿った作業が可能です。

デザインの確認

拡大表示した際に意図した通りの表示になっているか確認をしてください。
にじみやマウスオーバー画像のずれなどは、この段階できれいにしておかないと、このまま再現されてしまいます。
下記の例を参考に意図した表示と差異がないか確認してください。

例）数値の端数から起こるにじみ

オブジェクトのサイズや位置を指定する際は、基本的には整数で作成してください。小数点で指定した際にふちがにじむことがあります。

テキストと画像の指示

文字を、「テキストで表現する部分（閲覧者のPCにインストールされているフォントでよい部分）」と
「画像で表現する部分（デザイン通りのフォントで表示したい部分）」をわかるように作成してください。
下記のような指示例を参考に、明確に区別できるようにお願いします。

例）アンチエイリアスのオン／オフで指定する場合

※効果＞ラスタライズでアンチエリアスをオフにすることができます。

例）同ファイルの中で指示をする場合

マウスオーバー画像がある場合

マウスオーバー画像や現在地を表すカレント表示画像などがある場合は別レイヤーに重ねて作成し、
下記のようにわかりやすいレイヤー名をつけ、通常時とマウスオーバー時などの区別がつくようにしてください。

ページの先頭へ戻る

2.入稿に必要なもの

Photoshop形式で書き出したPSDデータ

PSDデータをもとにコーディングを行いますので、下記を参考に書き出しを行いご用意ください。

※書き出し後は、マウスオーバー画像や、テキスト指示などが別々のレイヤーに分かれているかご確認ください。
　 他のデザイン部分とレイヤーが一枚に統合され、コーディングの際に画像が取れないことがあります。

ファイル＞書き出しからPSD形式で書き出す

解像度：72dpi、オプションからレイヤーを最大限保持して書き出す

Illustratorで作成したデータ

Photoshop形式でPSDデータとして書き出した際に、一部レイヤー機能が保持できず、
コーディングの際に必要な背景画像等が書き出せない場合があります。
そのため、Illustratorのデータも必要になりますので、必ず一緒に入稿していただくようお願いしております。

※CS5以上で作成の場合は、CS4として保存してください。
※配置した画像は埋め込みをするか、埋め込みしない場合はリンク切れの無いようにご用意ください。
※テキストのアウトライン化を行うなど、フォントの見た目を保持できるようにしてください。
　 →テキストを選択し、書式＞アウトラインの作成 から実行できます。

テキスト原稿

弊社で制作するにあたって、テキストを入れ込む際に必要になりますので、
下記の例のようにテキストデータとして取れる（選択できる）原稿をご用意ください。

例）
・テキストの取れる（選択できる）状態のIllustratorファイル（CS4以下／.ai）
・テキストの取れる（選択できる）状態でaiデータをPDFに書きだしたもの（.pdf）
・エクセルファイルや、テキストファイル（.txt、.ppt、.xls）
　※デザイン上のどこの内容のテキストかが、わかるように明記してください。

ページの先頭へ戻る