TOP > web creators > デザインどおりのWEBに組み立てる表現技術

  • このエントリーをはてなブックマークに追加
  • Twitter
  • Clip to Evernote

web creators

 
 

連載記事 web creators



完成したモックアップをスライスする

スライスの切り方・設定を工夫してから書き出す

最適なスライスの切り方を検討する


スライスのシンプル化を図るために、モックアップ画像のすべてをスライスするのではなく、必要最小限のエリアのみをスライスしよう【3】。スライスの余白部分や背景画像のリピートなどは、HTMLで記述したほうがWeb最適化の観点からも作業効率化の点からも効果的である。

では、実際にPhotoshopのスライスツールを使って作業してみよう。まずは、ガイドを使って、それぞれのスライスの位置を調整する。このとき、ビューメニューの“スナップ”がオンになっていることを確認しておく。ヘッダーエリアでは、クリックのしやすさを考慮し、ロゴの周囲をスライスする【4】。余白部分はCSSで調整する。次に、メニューエリアをスライスしよう。ここでもクリックのしやすさを考慮し、それぞれのメニューごとにスライスする。これらは、マウスカーソルを合わせた時に変化する個所であるので、それぞれのサイズを同じにしておくとよいだろう。その際、スライスを分割ツールも有効な手段である。プロモーションエリアでは、クオリティと更新性を考慮し、イメージ写真を丸ごとひとつスライスする。コンテンツエリアでは、背景となるイラストの個所をスライスし、その上でボタンの箇所だけをスライスする。それから、ドロップシャドウ用の画像をスライスしよう。縦方向のリピートを想定し、[縦:8px]、[横:850px]に設定している。



【3】必要最小限のエリアをスライスし、なるべくシンプルなスライスを心がけよう。コーディングしやすいように、それぞれのスライスの位置を調整しよう。その際、ガイド機能を使うと効率的である



【4】Photoshopのスライスのオプションバー。ここには「スライスの順番」、「スライスオプション」、「スライスを分割」などがある

 
 




この記事をチェックした人はこんな記事も読んでいます。

  • 【Web デザイン】

    Webデザイン超基本のお作法50選

  • 【web creators】

    今度こそ挫折しない! CSS入門

この記事をチェックした人はこんな書籍も見ています。

おすすめの記事

  • 【MdN】

    グラフィック表現の技、まるごと全部教えます!

  • 【MdN】

    Photoshopプロセスノート/写真にドットを重ねて表現するグラフィカルなイメージ

MdN出版物のご案内

MdN定期購読のご案内
近刊発売の新刊情報
訂正とお知らせ・ダウンロード
MdNの電子書籍

MdN のデザイン求人情報

ログイン

メールアドレス
パスワード