Web屋のーりー

ウェブ作ったり、デザインしたり、広告についてかんがえるブログ。

powered by 36℃社

  • twitter
  • Facebook
  • Linked in
  • RSS

初心者さん向け情報の詰まった記事です。デザインのイロハをご紹介

かわいいデザイン・優れたデザイン、広告、コピーライティング

その他のお役立ち情報、たまにおもしろ情報も?

WebデザイナーとPhotoshop【前編】 君はいかにしてPhotoshopをWebデザインツールとして用いるか?

このエントリーをはてなブックマークに追加
Pocket

ウェブデザイナーを目指す初心者さんにとって、「ウェブサイトって、どうやってデザインしているの?」というのは大きな疑問ですよね。

じつは、多くのウェブデザイナーさんは、Photoshopでデザインをしているんです。

この記事では、どうやってPhotoshopを使えばウェブデザインができるのかを、PSDのサンプルを使って手順をご紹介します。サンプルをいじり倒して、Photoshopのデザインになれましょう!

もくじ

これって、Webサイトじゃないの?

まずはこちらをご覧下さい。

どう見てもウェブサイトですよね?

でも、実はこの画像、すべてPhotoshopで作られています。

このデータはモックアップデータ、またはカンプデータなどと呼びまして、実際の完成形に限りなく近いデザインをPhotoshopで作ってみたものです。実際の現場でも、こちらを元に必要な部分を画像として出力し、HTMLに当てはめていくことでウェブサイトが完成します。

サンプルデータをダウンロード

さて、こちらが上記画像のサンプルデータです。このデータのような完成形を目指して、実際に作ってみましょう。

デザインのベースを作る

サンプルデータはもう完成形なので、もちろんそちらをいじってもらって構わないのですが、この記事ではゼロから完成形までの手順を追ってもらいます。

なので、まず、Photoshopを立ち上げたあと、新規でデータを開きます。

カンバスサイズという、作業するエリアを最初に決めます。するとダイアログが出てきますので、プリセットの覧に「カスタム」、幅と高さはそれぞれ「960」「1000」、単位は「pixel」と入れます。幅が960ピクセルのデータとなるのですが、これはブラウザで表示した際のコンテンツ幅になります。

……と言ってみたものの、言葉では理解しづらいでしょうから下記の画像をご覧ください。

この960ピクセルという幅は決まっているものではなく、作り手側が決めています。そのときのディスプレイのサイズなどに合わせて決めるので、流行みたいなものがあります。最近では、幅が1000px以上のディスプレイがほとんどですので、1000ピクセル前後でWebサイトを作るのが最近の主流なのですが、私はわり算の計算がしやすい数字の960ピクセルで作っています。

960ピクセルなら、3分割・4分割・6分割・8分割としても、整数で(しかも一桁目がゼロで)割りきれますからね。

それから、高さについては中身の画像やテキスト量によって変わりますので、ひとまず暫定で1000ピクセルにしています。

高さが足りなくなったらカンバスサイズを下に伸ばす、というわけです。

背景にパターンを入れる

新規でデータを作ると、Photoshopは自動で「背景」という名前のレイヤーが作成されます。真っ白な下地ですね。このレイヤーをそのまま使います。

レイヤーウィンドウで、「背景」レイヤーをダブルクリックすると、新規レイヤーとしてカンバスサイズいっぱいの背景画像ができます。

背景画像が真っ白だと味気ないので、質感を出すために模様を入れましょう。

Photoshopには、レイヤースタイルという、影をつけたり光をつけたり色を変えたりグラデーションをかけたり調整できる機能があるんですが、そのうちの一つに「パターンオーバーレイ」というレイヤースタイルがあって、これを適用することでパターンとして模様をつけられます。

レイヤースタイル

パターンオーバーレイをうまく使いこなすには、事前にパターンを用意しておく必要がありまして、それらのパターンをゼロから作ることもできるんですが、今回はPoyosicomさんが制作された、Webデザインで使えるフリーシームレステクスチャ100枚のなかから一枚を利用させてもらいます。

こちらのリンク先では、テクスチャをパターンオーバーレイとして適用させるやりかたも解説されていますので、そこまでの方法がわからない方はぜひそちらの記事をご覧ください。

上記の記事を参考にパターンを定義したら、制作中のデザインデータに戻り、レイヤースタイルでパターンオーバーレイの項目を選びます。

レイヤースタイルのパターンオーバーレイ

Photoshopには、最初からいくつかパターンが登録されているのですが、さきほど新しく登録したパターンが選べるようになっています。

それから、透明度を100パーセントにすると、すごく濃く表示されてしまうので、8パーセントまで落としています。

このとき、初心者さんはついつい「自分が適用した効果なので、なるべく濃く見せたい」と思ってしまうようで、濃く設定してしまいがちです。

でも実際は、パターンがわからないくらいのさりげない薄さで十分に質感が出せます。

また、比率という項目はそのパターンのサイズなのですが、ここでは41%としています。これは100%以下なら基本的にOKです。100%以上の比率にしてしまうと、画像が粗くなってしまうので注意してください。

上にラインを入れる

デザインの一環として、ラインをカンバスの上下に入れてみましょう。

ラインを引くには、長方形ツールまたはラインツールのどちらでもできますが、ここではラインツールを使ってみます。

ラインツールは、ツールボックスの長方形ツールの下に隠れていて、長方形ツールのアイコンを長押しすることで、ラインツールが選択できます。

ラインツール

右下に黒い三角がちっちゃく出ているツールは、長押しすると似たカテゴリのツールが選べるようになります。

初心者さんだと「あれ、あのツールってどこにあったっけ?」とよくなるのですが、そういうときはたいてい長押しで出てくるツールなので、いろいろと長押ししてみると面白いですよ。

ラインツールを選択すると、カンバスの上のオプションバーに「線の太さ」という項目が出ていて、なにもいじっていないとここが1pxとなっています。

まずは4pxのラインを引きたいので、ここを4pxにしましょう。

ラインツールの線の太さ

線を引くときには、Shiftキーを押しながら引くと、まっすぐ平行な線になります。

ちなみにShiftは縦・横・斜めの45度ずつの位置で角度を固定できるキーなので、この場合は平行に近い場所で操作すれば、平行に引けるというわけです。

ラインの幅は、960pxを超えるサイズでも問題ないです。カンバスサイズを超える分は自動的に隠れますので。

ラインを引いたあと、ラインがカンバスのいちばん上にくっついてない場合は、移動ツールを使っていちばん上に移動させましょう。

上のラインができたら、今度は同様に下部にもラインを引きます。下部のラインは2本引いていて、そのうち上を1px、下を4pxで作っていて、上下の隙間は2pxとなっています。

ラインがにじんでしまう場合

Photoshopは、カンバスの拡大率を100%以外にして作業している場合、線や矩形(長方形や円形などのこと)がにじんでしまうことがあります。

初心者さんの場合、それらのにじみには気づかないんですが、見る人が見るとすぐ分かってしまいますし、一般のユーザーさんが見たときに「なんだかはっきりしないデザインだな」という感覚を引き起こす原因にもなります。

にじんでいるかどうかは、拡大率をすごく上げる(2000%など)と判別できます。

もしにじんでしまっている場合、移動ツールや変形のオプションバー内の数字を整数値にすることで、にじみを解消しましょう。

にじみ

移動ツールの設定

ところでこの移動ツールなんですが、初期設定だと「動かしたいレイヤーをレイヤーのウィンドウから選択してはじめて、カンバス上で動かせるようになる」という設定になっています。

私はPhotoshopより先にIllustratorをさわったのですが、Illustratorだと「カンバスでレイヤーをクリックしたら、それをそのまま動かせる」というような設定なので、このPhotoshopとの違いに戸惑いました。

で、いちどレイヤーを選択してから、というのにどうしても慣れないので、Illustratorに近い設定に変えて使っています。

変更方法はかんたん、移動ツールを選択すると上部に出てくるオプションバーで、「自動選択」のチェックボックスにチェック、コロン(:)の後を「レイヤー」にします。

そうすることで、カンバス上でクリックしたレイヤーをそのまま移動できるようになりました。

選択

ついでに、自動選択欄の右にある「バウンディングボックス」という項目についても、私はチェックを入れています。

これは、レイヤーを選択するだけで、サイズ変更ができるような表示をするかどうかのチェックで、これが有効になっていると、よりIllustratorっぽい設定になります。

ラインの色を変える

ここまで、特に「描画色」という設定をいじっていない場合、ラインは黒で表示されているのではないでしょうか。

これを、デザインのテイストに合った色に変更します。

まずはラインのレイヤーの左側部分をダブルクリックして、カラーのダイアログを出します。
Photoshopだと、5種類の方法で色を変えられます。

  • RGBカラーで変える
  • CMYKカラーで変える
  • Labカラーで変える
  • HSBを使って変える
  • 16進数の数字を入力することで変える

詳しい解説はまた今度したいのですが、今回は16進数の数値入力で色を変えてみます。

ダイアログの下部に、#(シャープ)のうしろに6桁の数字が並んでいる欄がありますが、ここに数値を入れます。そちらに「8de6e6」と入れてみてください。

Photoshopの色のかえ方

こうすることで(私が個人的な好きな)さわやかな水色になりました。

ナビゲーションやロゴなどの上部を作る

Webサイトでは、ロゴや、上部に横並びで配置されているナビゲーションなどをまとめてヘッダーと呼びます。それらのヘッダー部分を作っていきましょう。

ロゴ

このサンプルのロゴは、Futuraという、欧文書体としては超オーソドックスなフォントをそのまま使っています。目立たせたい部分なので、フォントサイズは大きめの60ピクセルで作成します。

配置は、左端は960ピクセルいっぱいをコンテンツ幅としたいので、カンバスにぴったりくっつけてください。

また、色はラインと同色の「8de6e6」とします。

今回はフォントをそのまま使っていますが、ロゴを作る際にはIllustratorなどを利用して、かなり吟味して、ロゴタイプ・マークを作ることが多いです。

結果的に、「フォントをそのまま使おう」という結論になることもあるんですけどね。

ちょっとだけフォントのおはなし

じつは、WindowsのPCには残念なことにFuturaが標準では入っていないのです。

そのため、当然、Futuraを使っているロゴの作成もできませんし、Windows環境の方だとサンプルデータを開いたときに「フォントがないのでテキストデータが編集できないですよ」といった意味のダイアログが出ます。

そういった方は、お好きなフォントから選んでもらうので良いです。

ただ、ぜひともフォントをいろいろと調べてみて、好きなフォントがあったらぜひ購入してみてください。

フォントの購入、っていう考え方は持ったことがないでしょうけど、フォントに詳しくなると自然とそろえたくなってしまうんです。まちがいない。

ちなみに、日本語フォントを購入する場合、びっくりするくらい高いです。高いんですが、それだけの価値がある、すてきな日本語フォントもたくさんあります。

また、ライセンスには注意しないといけませんが、無料で使える日本語フォントもあります。報告等の必要があったり、漢字が少なかったりする場合もありますが、優秀な無料日本語フォントもあります。

今度また、ロゴの話もしたいですね。

ロゴの右に並んでいるナビゲーションメニュー(各ページに同じ配置として並んでいるナビゲーションを、グローバルナビと呼びます)も、同じくFuturaです。

ナビゲーションメニューの並んでいる右端のContactを、カンバスの右端にぴったりくっつけるのを忘れずに。

それから、フォントサイズについては20ピクセルにしました。

これはジャンプ率という考え方を意識していて、ロゴのサイズとおもいっきり変えることで、メリハリをつけたデザインにしています。

ジャンプ率についても、今度デザインのはなしをするときにあらためてご紹介したいです。

つづきは後編で

ここまでの作業でできたもの

ちょっと長くなってしまったので、後編に続きます。

「まだ全然できてない!」と思われるでしょうけど、……はい、そのとおりです。たくさん機能を使わないとWebサイトのデザインは作れない、ということです。

後編でも引き続きサンプルを使って解説していきますが、ついに、ようやく、メインビジュアルの話に突入します。

また、Photoshopでの図形作成や、レイヤースタイルの効果のかけ方などもご紹介しますので、どうぞお楽しみに!

コメントする

ページの先頭に戻る