【Photoshop入門】Webデザインをはじめよう!第2回 シェイプを駆使してデザインのベースを作ろう

by 浅野 桜

Posted on 03-11-2014

連載

PhotoshopでWebデザインをはじめよう!

PhotoshopでWebデザインする際、最初に行う作業はデザインのベース作りです。ベースとは、背景や写真などの主な要素のアタリを配置したものです。「シェイプ」を使って、各要素に相当するオブジェクトを作成する方法を解説します。WebデザインのためのPhotoshopの環境設定については、前回の「デザイン前に覚えておきたい環境設定とレイヤー機能」をご覧下さい。

__
Photoshop CC 体験版
ダウンロード

__
サンプルファイル
ダウンロード

いよいよ今回からWebページをデザインしていきます。Webページ(Webデザイン)と言っても、色々あります。本連載ではその「色々」の入り口として、PC用のWebページ(トップページ)をデザインしていきます。

※Photoshopは最新版を使用してください(執筆時のバージョンはCC 14.2)。記事では、Mac OS Xを基本に解説しています。ショートカットは、「command(Ctrl)」のように、Windowsの場合を括弧内で表記しています。

Webデザインのラフを描く

Photoshopを立ち上げる前に、手描きで構わないので、トップページのコンテンツの要素や構造を考えます。このときに各要素のサイズ(pixel)やカラーリング、デザインのトーンなども決めておきましょう。本連載では、次のラフをもとにデザインしていきます。

ページの構成を描いたラフ。横幅は960px。上から、ヘッダー(高さ140px)、メインビジュアル、グローバルメニュー(高さ90px)、情報エリア、フッターという構成になっている。

デザインのベースとは

PhotoshopでのWebデザイン作業において、まず最初に行うのはベース作りです。ベースとは、背景や写真などの主な要素を配置したものです。デザインベースでは、主に以下の作業を行います。

シェイプは色や形を容易に変更できるので、PhotoshopでWebをデザインする上でよく使われている機能です。

今回は、次の図のようなデザインベースを作ります。

今回作成するデザインのベース。要所にガイドが引いてある。また、メインビジュアル、グローバルメニュー、情報エリアの写真部分、フッターのところにシェイプが配置されている。

新規ファイルを作成して、ガイドを引く

新規ファイルを作成する

[ファイル]メニュー→[新規作成]を選択します。[プリセット]を一度「Web」にして、[幅]に「960」、[高さ]に「1,500」と入力します。[解像度]が「72」、[カラーモード]が「RGBカラー」と「8bit」に設定されていることを確認して、[OK]をクリックします。表示された白いエリアを「カンバス」と呼びます。

[新規ファイル]ダイアログボックス。[幅]を「960」、[高さ]を「1,500」、[解像度]を「72」、[カラーモード]を「RGBカラー」と「8bit」に設定している。

コンテンツの主な要素に合わせてガイドを引く

ファイルを作成したら、第1回で紹介した方法で、コンテンツの主な要素に合わせてガイドを引いていきます。

まずは、横方向の0pxと960pxの位置にガイドを引きます。

※カンバスの端(ここでは0pxと960pxの位置)にガイドが必要なの? と思うかもしれません。横幅960pxはコンテンツ部分のサイズです。実際にブラウザで表示される際には背景も表示され、背景のことも考えておく必要があります。後で背景をデザインする場合は、カンバスを広げることになります。その場合に備えて、コンテンツ部分の左右端にはガイドを引いておきます。では、上下端というと、デザインの修正で高さが変わることはよくあるので、この段階ではガイドを引かなくても大丈夫です。

次に、ヘッダーの下側にガイドを引きます。[表示]メニュー→[新規ガイド]を選び、[水平方向]にし、ヘッダーの高さである140pxを入力します。青いラインがガイドです。

カンバスの左端(横0px)と右端(横960px)と、ヘッダーの下側(縦140px)にガイドを引いている。

そして、メインビジュアル部分にもガイドを引きます。[長方形選択範囲ツール]を使ってメインビジュアルと同じサイズの選択範囲を作り、それを目安にガイドを引くといいでしょう。このとき、shiftキーを押しながらガイドを引くと、小数点を出さずに正確なガイドを引けます。

[長方形選択範囲ツール]を使ってメインビジュアルと同じサイズの選択範囲を作り、ガイドを引く目安にしている。

– 拡大縮小に関する小技 –

ガイドを引く際に、細かいところを見たり、全体を見たりするために画面を拡大縮小したい場合があります。その際は、次の方法で拡大縮小できます。

【ズームツールで拡大縮小】
[ツール]パネルの[ズームツール]を選択し、任意の場所をクリックして拡大/縮小できます。

[ズームツール]を選択し、オプションバーにあるアイコンで拡大モードか縮小モードかを選び、任意の場所をクリックする。

【パーセントを入力して拡大縮小】
画面左下のパーセントで表示されている縮尺をクリックして、任意の数字を入力することでも拡大/縮小できます。

画面左下の縮尺をクリックして、数値を入力すると、その数値に合わせて拡大縮小される。

その他にもショートカットも利用できます。command(Ctrl)+[+]キーで拡大、command(Ctrl)+ [-]キーで縮小、command(Ctrl)+ 1で100%表示、command(Ctrl)+ 0でカンバス全体が表示されます。

シェイプを使って、コンテンツの主な要素のアタリを作成する

ガイドを引いたら、シェイプを使って、コンテンツの各要素に相当するアタリを作成します。グローバルメニューを例に、シェイプを作成する方法と、ベースを作成する上で役立つ機能を解説しましょう。

長方形のシェイプを作成する

まずは、グローバルメニューの背景となる、長方形のシェイプを作成します。

[ツール]パネル→[長方形ツール]を選び、ツールオプションバーで[シェイプ]が選択されていることを確認します。その状態で任意の場所をクリック&ドラッグすると、シェイプと呼ばれるオブジェクトとそのレイヤーが作成されます。

長方形のシェイプを作成するには、[長方形ツール]を選び、オプションバーで[シェイプ]が選択されている状態で、任意の場所をクリック&ドラッグする。

[長方形ツール]を選び、クリックだけすると[長方形を作成]ダイアログボックスが表示されるので、数値を入力してシェイプを作成できます。グローバルメニューの背景として、長方形のシェイプを作成してみましょう。

今回は、幅960px / 高さ90px を入力します。

[長方形を作成]ダイアログボックス。[幅]に960、[高さ]に50を入力している。

グローバルナビの背景となる長方形のシェイプができたので、ドラッグしてガイドの位置に合わせます。

グローバルメニューの位置にシェイプが作成された。

[長方形ツール]などの矩形(くけい)ツールや[ペンツール]で作成したシェイプは、塗り、ストローク(線)、角などについて設定できます。また、塗りとストロークは、それぞれ単色、グラデーション、テクスチャーなどを設定できます。

– 色の扱いに関する小技 –

コンテンツの各要素のシェイプを作成する上で、様々な色のシェイプを作成することになります。よく使う色は、以下の手順で[スウォッチ]パネルに登録しておきましょう。

まず、カラーピッカーを開き、色を作ります。カラーピッカーは下の図のカラフルなアイコンをクリックすると開きます。次に[スウォッチに追加]をクリックし、名前を入力して[OK]をクリックすると、色が登録されます。

カラーピッカーを開き、色を作る。次に[スウォッチに追加]をクリックし、名前を入力して[OK]をクリックすると、色が登録される。

カラーピッカーは[スウォッチ]パネルと連携していて、登録した色は[スウォッチ]パネルに反映されます。

カラーピッカーに登録した色は[スウォッチ]パネルに反映される。

線のシェイプで、メニューの境界線を作成する

次に、グローバルメニューの各メニュー項目の境界線を引きます。レイヤーの選択をいったん解除し、[ツール]パネルの[長方形ツール]を押下し続けて[ラインツール]に切り替えます。

[ラインツール]は[長方形ツール]のグループ内にある。

ツールオプションバーで塗りを「なし」にし、ストロークを白にします。グローバルメニューの上部をクリックし、shiftキーを押しながらグローバルメニューの下部までドラッグすると、線が引けました。

[ラインツール]で、グローバルメニューの左端に線を引いている。

ツールオプションバーで[ストロークオプション]を設定すると、破線にすることもできます。破線の太さは[線の太さ]で設定します。各メニュー項目の境界線は破線にしておきましょう。

[ストロークオプション]では、線の種類や、その線端や角の形状を設定できる。 各メニュー項目の境界線として破線を引いている。

境界線を複製して、均等間隔で配置する

後は、作成した境界線を必要な分だけ複製し、均等間隔で配置させます。

まず、境界線のレイヤーの名前を「シェイプ1」から「nav_line」などのように変更します。[レイヤー]メニューから[レイヤーの複製]を選択し、[OK]をクリックします。メニュー項目が5つあるので、境界線を6本用意します。先ほどの複製の作業をあと4度繰り返せば6本となります。

境界線のレイヤーの名前を「シェイプ1」から「nav_line」に変更する。

カンバス上では重なっているためわかりづらいですが、[レイヤー]パネルの「nav_line」レイヤーの数で複製できたことを確認できます。

次に、「nav_line」レイヤーをどれか1つ選択し、グローバルメニューの右端(960pxの位置)に移動させます。

1つの「nav_line」レイヤーを、グローバルメニューの右端に移動させる。

拡大・縮小をすると、境界線を選択しやすいでしょう。「nav_line」レイヤーをすべて選択し、[移動ツール]に切り替えます。[移動ツール]パレットの[水平方向中央を分布]をクリックすると、選択した6つの境界線が均等間隔で分布され、5つのメニュー項目ができました。

6つの境界線を選択し、[移動ツール]に切り替え、[水平方向中央を分布]をクリックし、均等に配置している。

「nav_line」レイヤーをすべてリンクさせ、command (Ctrl) + Gでグループにまとめておきます。これでグローバルメニューのベースが完成しました。後で作業し易いように、レイヤーに適切な名前を付けておきましょう。

すべての「nav_line」レイヤーをグループにまとめる。

– レイヤーを複製する小技 –

レイヤーは次の方法でも複製することができます。

デザインベースを完成させる

あとは冒頭のラフをもとにして、コンテンツの残りの要素についても同様に、ガイドを引いたり、[長方形選択ツール]などでシェイプを作り、ざっくりとレイアウトします。完成したものが、サンプルファイルのphotoshop-web-design-02.psdです。

完成したデザインベース。要所にガイドが引いてある。また、メインビジュアル、グローバルメニュー、情報エリアの写真部分、フッターのところにシェイプが配置されている。

次回の「Webデザインに文字を配置しよう」で、このデザインベースに文字を入れていきましょう。

Topics: クリエイティブ, UI/UX & Web

Products: