ホームページのデザインを制作する時、皆さんはどんなソフトをお使いですか？
一般的にはPhotoshopもしくはFireworksでデザインするという方が多いかと思いますが、先日illustratorのデザインデータからホームページを制作する機会があり、いろいろと気付いたことがあったのでこのブログにメモしておくことにします。
普段私はFireworksでWeb用の画像をスライスしてるので、illustratorでのスライスについては全くと言っていいほど知識がありませんでした。
よくillustratorでスライスすると1pxズレが出るとかで、illustratorでデザインしてもスライスはPhotoshopでするなんて話も聞きます。
ですがillustratorでも環境を設定すればちゃんとスライスできるということが分かったのでillustratorでホームページのデザインをしてる方は参考にしてみてください。
※ちなみに以下のやり方はillustrator CS4での説明になります。
単位
まずは【ファイル】→【ドキュメント設定】の単位をピクセルにします。
カラーモード
次に【ファイル】→【ドキュメントのカラーモード】→【RGBカラー】にします。
CMYKのままだとWeb用に画像を書き出した時に色味が変わるので必ずチェック。
表示
次に【表示】→【ピクセルプレビュー】にチェックを入れます。
そうすると同時に【ピクセルにスナップ】にもチェックが入るようです。
ピクセルプレビューにすると擬似的にピクセルで表示されるのでWeb用に書き出した時の仕上がりが分かります。
ピクセルにスナップにチェックを入れると【ウィンドウ】→【変形】のx、y軸、Width,、Heightの数値に端数が出なくなります。
以上でスライス前の準備は完了です。
今回初めて知ったのですがillustratorでのスライスの仕方は何種類かあるので紹介します。
スライスツール
まずは代表的なところでスライスツール。
これはPhotoshopでもFireworksでもお馴染みなので特に説明の必要もないかと。
オブジェクト→スライス→作成
次にオブジェクトを選択した状態で【オブジェクト】→【スライス】→【作成】をクリック。
こうするとオブジェクト元にオブジェクトとスライスがグループ化した状態でスライスされます。
オブジェクト→スライス→選択範囲から作成
次にオブジェクトを選択した状態で【オブジェクト】→【スライス】→【選択範囲から作成】をクリック。
こうすると【作成】と同じようにオブジェクトを元にスライスされますが、オブジェクトとグループ化してない状態でスライスされます。
画像の書き出し
画像の書き出しはPhotoshopと同じく【ファイル】→【Webおよびデバイス用に保存】をクリック。
画像の種類と画像のファイル名を決める
こちらもPhotoshop同様、スライスを選択して画面右のプリセットから画像の種類を選択します。
それからスライスをダブルクリックして画像のファイル名を決めたら保存をクリック。
保存
あとは保存のウィンドウで保存場所を選択し【フォーマット】→【画像のみ】、【スライス】→【すべてのユーザー定義スライス】 にして保存をクリック。
以上でillustratorでのスライスは完了です。
細かいことを言えばもっと注意する点もあるのだと思いますが、なにぶん私もillustratorでのスライスは初心者なもので、あくまで参考程度にご覧いただければと思います。
