Illustratorでウェブデザインを組む場合のコツをお届けするシリーズです。レイアウトが固まったら、次はHTML化するために画像が必要です。今回は、その画像の書き出しについてのお話です。一般的ではないかもしれませんが、niaoはこんな方法で一気にスライスを書き出しています。画面も見やすいんです。名付けて......「黒四角法」ああっ、なんか中2病っぽくなっちゃった!こんな方法です。新しいレイヤーを作る。名前は仮に「スライスカバー」。他のレイヤーはロックする。画像で書き出したい部分に、四角形を描く。黒で20%くらいの透明にしておく(←これは好み)。「スライスカバー」レイヤーを非表示にして、「web用に保存」で一気に書き出す。この方法のメリットは、全部Illustratorで完結できることと、なんとなく扱いづらいイラレのスライスツールを触らなくていいことと、黒四角を動かせばいっしょにスライスもついてきてくれるので、移動を伴う修正が入ったときに扱いやすいことです。ほんまに世界で一番カンタンかどうかは置いといて、方法のひとつとして覚えておいてください。実はレイアウト中のオブジェクトに直接スライスを付けることもできます。私は好みでレイヤーを分けていますが、この方法でも移動についてきてくれるので、おススメです。四角を描くときには、レイアウト時と同じように「ピクセルにスナップ」を効かせた状態にしておきます。イラレにも「web用に保存」、ちゃんとありますよ!ところで、スライスの書き出し方法にはこれぞという正解が無く、人それぞれにいろんな方法を使われているようです。ビットマップ化する派イラレのスライスや「web用に保存」は使わず、一度全体をpsdやpngに書き出しするんです、というお話はよく耳にします。(Photoshopのほうがスライスツールが持ちやすいから、かな?)アートボードを使う派スライスを切る代りにアートボードを切り、それぞれの画像を書き出すというもの。(画像の最適化は、あとで改めてやるのかな?)でも、イラレのウェブ機能、できる子ですよはっきり言って、どの方法が間違っているとか「こうすべし」ということはありません。Illustratorでもスライスや「web用に保存」が使えることを忘れているというか、無視してしまう方が多いような感じがします。紙もののレイアウトを作るソフトでしょ、というイメージが根強いのでしょうか。Illustratorの「web用に保存」機能はPhotoshopと同じようにちゃんとしていますから、せっかくなので使ってあげてみてくださいね。ホームウェブサイトづくりのあれこれ大丈夫やで☆イラレでウェブデザイン【その4】たぶん世界で一番簡単なスライスの書き出し方シェアしてみんなに教えるシェアツイート大丈夫やで☆イラレでウェブデザイン【その3】「ピクセルグリッドに整合」は使わない。[まんがでまとめ]関空発LCC早朝便に間に合う電車☆前乗り宿泊必要なし!関連記事クリエイター丙についてこんにちは、鯛のマークのクリエイターブログです。クリエイターさんやフリーランサーさんに向けて書いています。IllustratorのTipsです。そのほかウェブのこと、WordPress、仕事術、旅行やゲームや趣味の話も雑多に取り扱っています。あなたのお役に立てれば嬉しいです。@creatorHeyこのブログについてこんなこと聞きたい。著書「Illustratorおいしいネタ事典」、イラストレーターさんの仕事を増やすウェブサイト制作サービス「いしつく!」代表など。[アウトドア料理]40代で運転免許取得してみた。[独学?スクール?資格?]フリーランスは全てが自己責任、何かあってからじゃ遅いから。「フリーナンス」に登録だけでもしておきなよフリーランスで仕事がない......って不安ならエージェント登録してみればいいのにホームサイトマッププライバシーポリシーお問い合わせコンテンツの無断使用は固くお断りします。