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