【Photoshop入門】Webデザインをはじめよう！第2回 シェイプを駆使してデザインのベースを作ろう
PhotoshopでWebデザインをはじめよう！
PhotoshopでWebデザインする際、最初に行う作業はデザインのベース作りです。ベースとは、背景や写真などの主な要素のアタリを配置したものです。「シェイプ」を使って、各要素に相当するオブジェクトを作成する方法を解説します。WebデザインのためのPhotoshopの環境設定については、前回の「デザイン前に覚えておきたい環境設定とレイヤー機能」をご覧下さい。
いよいよ今回からWebページをデザインしていきます。Webページ（Webデザイン）と言っても、色々あります。本連載ではその「色々」の入り口として、PC用のWebページ（トップページ）をデザインしていきます。
※Photoshopは最新版を使用してください（執筆時のバージョンはCC 14.2）。記事では、Mac OS Xを基本に解説しています。ショートカットは、「command（Ctrl）」のように、Windowsの場合を括弧内で表記しています。
Webデザインのラフを描く
Photoshopを立ち上げる前に、手描きで構わないので、トップページのコンテンツの要素や構造を考えます。このときに各要素のサイズ（pixel）やカラーリング、デザインのトーンなども決めておきましょう。本連載では、次のラフをもとにデザインしていきます。
デザインのベースとは
PhotoshopでのWebデザイン作業において、まず最初に行うのはベース作りです。ベースとは、背景や写真などの主な要素を配置したものです。デザインベースでは、主に以下の作業を行います。
- コンテンツの主な要素に合わせてガイドを引く
- 「シェイプ」というオブジェクトを使って、コンテンツの主な要素のアタリを置く
シェイプは色や形を容易に変更できるので、PhotoshopでWebをデザインする上でよく使われている機能です。
今回は、次の図のようなデザインベースを作ります。
新規ファイルを作成して、ガイドを引く
新規ファイルを作成する
［ファイル］メニュー→［新規作成］を選択します。［プリセット］を一度「Web」にして、［幅］に「960」、［高さ］に「1,500」と入力します。［解像度］が「72」、［カラーモード］が「RGBカラー」と「8bit」に設定されていることを確認して、［OK］をクリックします。表示された白いエリアを「カンバス」と呼びます。
コンテンツの主な要素に合わせてガイドを引く
ファイルを作成したら、第1回で紹介した方法で、コンテンツの主な要素に合わせてガイドを引いていきます。
まずは、横方向の0pxと960pxの位置にガイドを引きます。
※カンバスの端（ここでは0pxと960pxの位置）にガイドが必要なの？ と思うかもしれません。横幅960pxはコンテンツ部分のサイズです。実際にブラウザで表示される際には背景も表示され、背景のことも考えておく必要があります。後で背景をデザインする場合は、カンバスを広げることになります。その場合に備えて、コンテンツ部分の左右端にはガイドを引いておきます。では、上下端というと、デザインの修正で高さが変わることはよくあるので、この段階ではガイドを引かなくても大丈夫です。
次に、ヘッダーの下側にガイドを引きます。［表示］メニュー→［新規ガイド］を選び、［水平方向］にし、ヘッダーの高さである140pxを入力します。青いラインがガイドです。
そして、メインビジュアル部分にもガイドを引きます。［長方形選択範囲ツール］を使ってメインビジュアルと同じサイズの選択範囲を作り、それを目安にガイドを引くといいでしょう。このとき、shiftキーを押しながらガイドを引くと、小数点を出さずに正確なガイドを引けます。
– 拡大縮小に関する小技 –
ガイドを引く際に、細かいところを見たり、全体を見たりするために画面を拡大縮小したい場合があります。その際は、次の方法で拡大縮小できます。
【ズームツールで拡大縮小】
［ツール］パネルの［ズームツール］を選択し、任意の場所をクリックして拡大／縮小できます。
【パーセントを入力して拡大縮小】
画面左下のパーセントで表示されている縮尺をクリックして、任意の数字を入力することでも拡大／縮小できます。
その他にもショートカットも利用できます。command（Ctrl）＋［+］キーで拡大、command（Ctrl）＋ ［-］キーで縮小、command（Ctrl）＋ 1で100％表示、command（Ctrl）＋ 0でカンバス全体が表示されます。
シェイプを使って、コンテンツの主な要素のアタリを作成する
ガイドを引いたら、シェイプを使って、コンテンツの各要素に相当するアタリを作成します。グローバルメニューを例に、シェイプを作成する方法と、ベースを作成する上で役立つ機能を解説しましょう。
長方形のシェイプを作成する
まずは、グローバルメニューの背景となる、長方形のシェイプを作成します。
［ツール］パネル→［長方形ツール］を選び、ツールオプションバーで［シェイプ］が選択されていることを確認します。その状態で任意の場所をクリック＆ドラッグすると、シェイプと呼ばれるオブジェクトとそのレイヤーが作成されます。
［長方形ツール］を選び、クリックだけすると［長方形を作成］ダイアログボックスが表示されるので、数値を入力してシェイプを作成できます。グローバルメニューの背景として、長方形のシェイプを作成してみましょう。
今回は、幅960px / 高さ90px を入力します。
グローバルナビの背景となる長方形のシェイプができたので、ドラッグしてガイドの位置に合わせます。
［長方形ツール］などの矩形（くけい）ツールや［ペンツール］で作成したシェイプは、塗り、ストローク（線）、角などについて設定できます。また、塗りとストロークは、それぞれ単色、グラデーション、テクスチャーなどを設定できます。
– 色の扱いに関する小技 –
コンテンツの各要素のシェイプを作成する上で、様々な色のシェイプを作成することになります。よく使う色は、以下の手順で［スウォッチ］パネルに登録しておきましょう。
まず、カラーピッカーを開き、色を作ります。カラーピッカーは下の図のカラフルなアイコンをクリックすると開きます。次に［スウォッチに追加］をクリックし、名前を入力して［OK］をクリックすると、色が登録されます。
カラーピッカーは［スウォッチ］パネルと連携していて、登録した色は［スウォッチ］パネルに反映されます。
線のシェイプで、メニューの境界線を作成する
次に、グローバルメニューの各メニュー項目の境界線を引きます。レイヤーの選択をいったん解除し、［ツール］パネルの［長方形ツール］を押下し続けて［ラインツール］に切り替えます。
ツールオプションバーで塗りを「なし」にし、ストロークを白にします。グローバルメニューの上部をクリックし、shiftキーを押しながらグローバルメニューの下部までドラッグすると、線が引けました。
ツールオプションバーで［ストロークオプション］を設定すると、破線にすることもできます。破線の太さは［線の太さ］で設定します。各メニュー項目の境界線は破線にしておきましょう。
境界線を複製して、均等間隔で配置する
後は、作成した境界線を必要な分だけ複製し、均等間隔で配置させます。
まず、境界線のレイヤーの名前を「シェイプ１」から「nav_line」などのように変更します。［レイヤー］メニューから［レイヤーの複製］を選択し、［OK］をクリックします。メニュー項目が5つあるので、境界線を6本用意します。先ほどの複製の作業をあと4度繰り返せば6本となります。
カンバス上では重なっているためわかりづらいですが、［レイヤー］パネルの「nav_line」レイヤーの数で複製できたことを確認できます。
次に、「nav_line」レイヤーをどれか1つ選択し、グローバルメニューの右端（960pxの位置）に移動させます。
拡大・縮小をすると、境界線を選択しやすいでしょう。「nav_line」レイヤーをすべて選択し、［移動ツール］に切り替えます。［移動ツール］パレットの［水平方向中央を分布］をクリックすると、選択した6つの境界線が均等間隔で分布され、5つのメニュー項目ができました。
「nav_line」レイヤーをすべてリンクさせ、command (Ctrl) + Gでグループにまとめておきます。これでグローバルメニューのベースが完成しました。後で作業し易いように、レイヤーに適切な名前を付けておきましょう。
– レイヤーを複製する小技 –
レイヤーは次の方法でも複製することができます。
- ［レイヤー］パネルで複製したいレイヤーを選択し、パネル下部の［新規レイヤーを作成］にドラッグする
- 複製したいレイヤーを選択し、command（Ctrl）＋ J を押す
デザインベースを完成させる
あとは冒頭のラフをもとにして、コンテンツの残りの要素についても同様に、ガイドを引いたり、［長方形選択ツール］などでシェイプを作り、ざっくりとレイアウトします。完成したものが、サンプルファイルのphotoshop-web-design-02.psdです。
次回の「Webデザインに文字を配置しよう」で、このデザインベースに文字を入れていきましょう。