WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

WEBサイトのデザインをPhotoshopで行いカンプ(デザイン案)を作成する

Photoshopで作るデザインカンプ

初めてPhotoshopでWEBサイトをデザインするとき、何から初めてばいいのか、実際のWEBデザイナーはどのような手順でデザイン作業をしているのか分からずに困惑しますね。

Photoshopのデザイン作業はWEBデザイナーによって手順がかなり異なりますので、具体例として私が普段行うWEBサイトデザインの手順をご紹介します。WEBサイトとしてはグラフィカルなデザイン例ですが、これを再現できるならばWEBサイトデザインに必要なほとんどのPhotoshop操作はできるということになります。

前回まではワイヤーフレームをPhotoshopに落とし込み、おおまかなレイアウトが決めました。ここから本格的なWEBデザインを開始します。WEBブラウザで閲覧したときのビジュアルをPhotoshopでデザインする作業です。

デザイナーLevel:2 「アルバイト採用レベルのWEBデザイナー」目次

この記事の内容

画像ファイルの読み込み

STEP2で使用したワイヤーフレームをPhotoshopに落とし込んだPSDを使用します。
ファイルのダウンロード

Photoshopに画像を読み込む

メインビジュアルをPhotoshopに読み込ませます。Windowsのエクスプローラー・MacのFinderから直接Photoshopの作業画面の中にドラッグアンドドロップさせるやり方が主流です。
メインビジュアルの作業領域のレイヤーが選択してあることを確認してください。

画像を読み込んでからレイヤー移動をすることはできますが、適当に画像を読み込むクセがついてしますと本格的なデザインをするとき作業しづらくなります。

読み込まれた画像はスマートオブジェクトになる

メイン画像レイヤーを選択しているとその上に画像が読み込まれます。画像レイヤーの下にマークが付いているのは【スマートオブジェクト】というファイルとして読み込まれたということです。スマートオブジェクトは拡大・縮小をしても画質が劣化しないデータです。写真データはWEBデザイン中で何度も拡大縮小を繰り返しますので、スマートオブジェクトで使用するのが一般的です。

難点は画像のファイルサイズが大きくなってしまうことです。問題なければそのまま保存をするのが一番ですが、デザイン作業が終了したらスマートオブジェクトを普通のレイヤーに変換して保存するWEBデザイナーもいます。その際はレイヤーを右クリック>【レイヤーをラスタライズ】で行います。

画像にマスクをかける

画像にマスクをかける

画像レイヤーと、下地になっている「メイン画像レイヤー」の間にマウスを置き、Altキーを押す。そうするとレイヤーマスクのアイコンが現れる。そのままクリックをおしてみましょう。

レイヤーマスクが適応される

画像レイヤーの右に引っ込み、下のレイヤーに矢印マークが向いているように表示されます。「表示範囲を下のレイヤーに属します」という意味です。よってワイヤーフレームを落とし込んだレイアウトである【メイン画像レイヤー】の中に画像が表示されてはみ出ることはありません。

解除方法はレイヤーとレイヤーの間を再度Altキーを押しながらクリックです。

この状態のまま画像レイヤーを選択して移動させることで、表示領域は維持したまま画像の位置調整を行うことが可能になります。

もうひとつのマスクの方法

よい機会なのでもう一つマスクの仕方を覚えておきましょう。むしろこちらの方がよく使われるテクニックです。

選択範囲を指定してマスクする

選択範囲で切り抜かれる

選択範囲で気抜かれます。レイヤーの左にはレイヤーマスクが使用されているアイコンが表示されます。解除する場合はレイヤーマスクをアイコンを右クリックして【レイヤーマスクの削除】選択します。この他にもレイヤーマスクの使用方法はたくさんあります。作業の効率化には必要な知識ですので、初心者の方はPhotoshopの機能を体系的に説明してある本を1冊熟読することをおすすめします。

ラベルのデザイン

ラベルのデザイン

作業が複雑化してきますので、まずはサンプルファイルをダウンロードし、レイヤー構造やスタイル、レイヤーの種類などを確認しながら読み進めてください。

ファイルのダウンロード

まずは簡単なデザインに挑戦してみましょう。メイン画像の上にのるラベルのデザインです。

長方形をつくりレイヤースタイルを適応させる

下地ラベルを作成します。選択範囲ツールで範囲を選択してShift+F5で灰色で塗りつぶしてもよいですし、長方形ツールで灰色で塗りつぶしても問題ありません。長方形ができたらレイヤースタイルボタンをを選択して、このレイヤーにスタイルを適応させます。

塗りつぶしショートカットキーShift+F5

背景にパターンを使用する

パターンオーバーレイを選択して乗算モードにし、パターンを選択します。このパターンによって風味やイメージがガラッと変わりますので和風なものを選択しましょう。Photoshopのパターンはフリー素材としてたくさん手に入れることができますので、必要に応じて探してみてください。

Photoshopを使う際にデザインの幅が広がる無料のパターン素材80選(ferret)

ラベルの完成

装飾にはブラシツールをします。ラベルの上に和テイストのブラシで和クリックし、レイヤーを乗算に変更することで色彩の一体感を出しています。
ブラシツールもグラフィカルな要素の強いWEBデザインでは多用しますので、自分が使うブラシセットをフリー素材で集めておくのも作業効率化の1つです。

スタンプ感覚!Photoshopの高品質無料ブラシ70まとめ(ferret)

ナビゲーションのデザインを行う

ナビゲーションのデザイン

次にナビの装飾に入ります。ここで行う作業を一通り覚えればあとは応用ですべてのデザインをPhotoshopで行うことが可能になります。

ファイルのダウンロード

サブナビゲーションのデザイン

サブナビゲーションのデザイン

グローバルナビのデザイン

ナビゲーションの背景

グローバルナビゲーションの下地を作ります。すけ具合をレイヤーの透明度や乗算レイヤーで調整します。その後にナビゲーションの背景に入る山の画像(イラスト)の意図を調整し、マスクで切り抜きます。レイヤースタイルは光彩(内側)とグラデーションを使用します。

背景画像をマスクする

メインナビ画像で使用したようにここでもマスク機能を使用します。画像を切り抜くときはマスクを使用するときに活用しましょう。

グローバルナビのデザインの完成

背景が作れたら、あとはシェイプツールで縦線を入れ、フォントを入れればグローバルメニューの完成です。

PhotoshopでのWEBデザインでカンプを完成させる

Photoshopでデザインしたカンプ

ファイルのダウンロード

これがPhotoshopでのWEBデザインの流れになります。ヘッダー部分が出来上がったら今度はコンテンツ部分のデザインに入っていきます。ワイヤフレームの枠組みとHTMLコーティングを意識しつつ、クライアントの目的を達成できるデザインを入れていきます。初心者の方はこれほど作り込んだデザインをする必要はありません。

このくらいのデザイン作業を行えるレベルになればアルバイトならほぼ採用されるレベルです。まずは見た目に納得行かなくても色々なデザインを起こしてみることが重要です。バナーの作成など局所的なデザインは参考書で覚えることができますが、WEBサイトの設計からデザインカンプまでの作業を業務レベルまで上げるにはオンラインスクールを使うか、スクールに通うかするほうが最短かと思います。

オンラインブートキャンプ Webデザインコース



スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST