PhotoshopでWebデザイン

グリッドシステムの紹介

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グリッドシステムについて。
講師:
03:38

字幕

ここではGrid System というテクニックをご紹介したいと思います。この Grid System はPhotoshop のテクニックではなくWeb デザイン用のテクニックになっています。どういうものかというとここにあるような短冊状にガイドを引いておいてこれに沿わせるような形でデザインを始めていく方法です。この一番有名な Web サイトがこの 960 Grid Systemという Web サイトです。アドレスが 960.gs です。この Web サイトでいろんなソフトウェアのテンプレートをダウンロードすることができます。例えば、InDesignIllstrator、OmniGINP、もちろん Photoshop も入っています。ここの DOWNLOAD ボタンで落とすことができます。なんでこの 960 という数字が使われているかというとほとんどの Web サイトでこの左から右のコンテンツ幅が960 なんですね。ほとんどのスクリーンに映しやすいサイズであるというのとこの 960 いう数字がかなり割り算しやすい数字になっています。例えば、2でも3でも4でも5でも6でも8でもほとんどの数字で割れます。 そうするとデザインの段階で、例えばここ、全体を3つに割っていますよね。一つ、二つ、三つこんな感じにコンテンツを割りやすいんですね。使い方を見ていきましょう。Photoshop にジャンプします。「長方形」ツールに持ち替えます。適当に例えばここに企業のロゴが欲しいとします。一つの幅、二つの幅、三つの幅で取っていきたいと思います。色をニュートラルなグレーにしたいと思います。その右側に例えば、メニューバーがあるとします。では、ここからこれぐらいの分メニューバーとします。なおかつヘッダーですね。その下にでは少し余白を左右に持つ形でスライダーがあるとします。下には、例えばここにはバナーを置こうかなとします。3 つの短冊幅でこうとっていきます。最新の twitter 情報も流したいのでこの辺に twitter の最新情報を置こうかなとかします。幅は 3 つ分かなとします。最新のブログ情報も書きたいので最新の記事を 3 つぐらい配置しようかなとします。幅は1、2、3、4、5、6個でいいかなとこんな感じにですね。簡単に Web サイトのレイアウトを始めることができるこれがGrid Systemになっています。 もしご興味があったら960.gs の Web サイトからテンプレートをダウンロードして使ってみてもよいでしょう。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。