Web屋のーりー

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

powered by 36℃社

  • twitter
  • Facebook
  • Linked in
  • RSS

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

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

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

WebデザイナーとPhotoshop【後編】 基礎の「き」を修めよう!

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

前回のWebデザイナーとPhotoshop【前編】に引き続き、この【後編】でもウェブサイトをPhotoshopで作っていく流れを追っていきましょう!

もくじ

レイアウトがだいじ、というお話

前回からの続きを作り始めるその前に……。

この記事の目的は、完成しているデザインデータがどうなっているのかを知るためのチュートリアルですので、レイアウトを考える部分は省いています。でも、ウェブに限らず、プロダクトでもグラフィックでも、デザインの大部分はレイアウトで良し悪しが決まります。
単なる見栄えの良さだけじゃなく、使いやすさや読みやすさもレイアウトが鍵を握っています。
ウェブデザインでのレイアウトは、ワイヤーフレームと呼ばれる、骨組みような設計図をはじめに作ります。住宅の見取り図みたいなものですね。

ワイヤーフレームを作る際に参考になる記事をご紹介。

レイアウトは、とにかくだいじです

ワイヤーフレームをどんなルールで作るのか、って点は、初心者だと難しいのは確かです。「感性で自由に作って」と言われて作ったとしても、型破りなものじゃなくて形無しなものになってしまうことが多いです。

なので、そういうときには先人が残した素晴らしいルールを踏襲するといいんですね。

たとえば、グリッドシステム。画面をある程度の大きさのグリッドに分割して、そこにコンテンツをしきつめていくことで、きれいに揃ったレイアウトがつくれる仕組みです。

「どう作っていいのかわからない!」という方は、ぜひこういった仕組みをベースに、レイアウトにチャレンジしてみてください!

写真素材をそろえる

サイトのデザインに使う写真をそろえましょう。写真は自分で撮りに行ったり、お客さまからもらったりすることも多いのですが、写真素材サイトから買うことや、無料写真素材サイトからDLすることもあります。
今回はぱくたそさまの写真を使わせてもらっています!

※写真素材をDLして使う場合は、必ず規約を確認しましょう。

メインビジュアルとして使う画像を一枚、それ以外の写真を複数枚選んで、DLします。
メインビジュアルは画面中央に使う大きいサイズの画像となりますが、今回は幅を960ピクセルで作っているので、それ以上のサイズの写真を選びます。大きいサイズの写真は縮小できますが、目的のサイズに足りない写真を引き伸ばそうとすると、デジタルの写真は画像が劣化しますので、ご注意を。

写真の配置

メインビジュアル用写真のサイズを縮小しましょう。

DLしたjpgを、作成中のPhotoshopに配置します。
ただし、Photoshopのファイル→配置のコマンドから画像を入れるときに、画像のサイズがPhotoshopのカンバスサイズよりも大きい場合、カンバスサイズに収まるように縮小されます。
たとえば、縦が3000pxで、横が2000pxの写真を、縦1000px、横960pxのカンバスに配置しようとすると、縦が1000、横が666pxのサイズで表示されます。
上部に表示されている○か×を押すと配置したことなるのですが、まだ○を押す前ならまだ確定していませんので、画像をカンバスをはみ出すように、目的のサイズまで拡大してあげれば問題ないです。

design_kakudai

画像の右すみをShiftキー+Alt(Mac:Option)を押しながらドラッグしましょう。Altキーは中心を基点に拡大、Shiftキーは比率を保ったまま拡大です。

写真にマスクをかける

写真を拡大したことで、カンバスすべてが写真になってしまっていますが、不必要な部分を隠すためにマスクを使います。

不必要な部分は消してしまったり、切り取ってしまってもいいのですが、マスクをかける方法だと隠しているだけですから、修正に強いデータとなります。
マスクをかける前に、レイヤーの目玉マークをクリックし、いったん写真を非表示にしたら、基準の位置を作るためにガイドを引いておきます。

Ctrl(command)+Rキーで定規を出せるのですが、定規の部分をクリックしてからカンバスに向けてドラッグで、ガイドが引けます。ガイドとは、整列をするときや、図形を設置するときの基準になるもので、実際に出力するときには表示されない線です。
上部の定規をクリックして、下にドラッグし、水平なガイドを引きます。ロゴから30ピクセルくらい下に引きましょう。ガイドの位置から下を、メインビジュアルのエリアとします。

design_guide

同様に、メインビジュアルの底となる部分を決めるために、もう一本ガイドを引きます。先ほどのガイドの位置から、下に300pxほどの位置に引きましょう。
ふたたびメインビジュアル用の画像を表示させ、長方形選択ツールを使って、選択範囲を作ります。ガイドをひいておくことで、ガイドにぴたっとくっつくように選択範囲が決まります。また、左右については、今回は960pxちょうどでデザインデータのカンバスを設定しているので、幅いっぱいの選択範囲となります。

写真が選択されていることを確認して、日の丸マークみたいなのをクリックすると、選択範囲の外側が消えて、マスクがかかりました。これがマスクなのですが、Photoshopには複数のマスクのかけかたがあって、こちらはレイヤーマスクと呼びます。

design_layermask

もう一つ、よく使うマスクがクリッピングマスクと呼ばれるものなのですが、それはのちほど。

シェイプツールでパーツを作る

まるやしかく、さんかくなどの簡単な図形を作るときには、Photoshopのシェイプツールを使います。

四角のアイコンをクリックで長方形ツールを選べますが、長方形ツールを長押しでほかの図形ツールも選べます。
コンテンツ部分に見出しを作たいので、まずは楕円形ツールで円をひとつ作成します。

つぎに、レイヤースタイルで色を変えましょう。fxのアイコンをクリックして、カラーオーバーレイを選びます。表示色が初期ではたぶん赤になっていますので、そこをクリックすると色の変更ができます。
今回は上下に作成した線と同じ水色にしたいので、#(シャープ)の欄に8de6e6を入れます。

円ができたら、左のツールボックスからテキストツールを円の上に被せるようにServiceの文字を入れます。
同様に、Serviceの文字の右に「こんなもの作ってます」と入力します(別の文にしても構いません)。上部に表示されるオプションパネルから、ヒラギノ角ゴシック、サイズは18px、太さはW6色は濃いグレーを設定しました。
フォントの種類はWindowsとMacで異なりますので、テイストに合った文字を選びましょう。小塚ゴシックであれば、Adobe製品にはハンドルされていますので、そちらを選ぶのも手です。

design_headline

見出しは4箇所に使いたいので複製します。円と文字二つを同時に範囲指定して選択しましょう。
複製は、Alt(Option)キーを押しながら、ドラッグすることでできます。
また、Shiftを押しながらドラッグすることで、水平や垂直の位置をずらさずに複製ができます。

design_headline2

このときの注意点は、図形などのオブジェクトを選ぶときに、中心点に近い部分でのAltキー+ドラッグは、図形を回転させるときの中心点の変更になってしまってうまく複製ができません。また、四つのすみの近くだと拡大縮小になってしまいます。
黒いカーソルの右下に白いカーソルが出ている状態だと複製ができますので、右下の表示を確認しながらツールを使ってみましょう。

写真のサムネイルを作る

ServiceやNewsの項目に3つずつある、写真のサムネイルを作成しましょう。

メインビジュアルを配置したときと同様、写真素材を用意して、配置します。メインビジュアルのときよりもさらにサイズが小さいので、事前に縮小しておくのもよいです。
今回は85pxの円と正方形を作るので、写真の縦横のサイズは85px以上にします。
このとき、写真のサイズが正方形でなくてもだいじょうぶです。

design_thumb

ちなみに、複数の手順をいちどに処理できるアクションや、複数のファイルをいちどに処理できるバッチ処理などもありますので、数十枚ファイルがある場合などは、それらの機能を使ってみてください。

つづいて、クリッピングマスクを使って、写真を正方形や円形に型抜いてみましょう。
まずは楕円形ツールを選び、85pxの円を作成します。カンバス上をクリックして、数値を入れれば作成できますが、Shiftキーを押しながら、85pxになるようにドラッグで作成してもよいです。

つぎに、レイヤーの順番をドラッグで変えて、型抜きたい写真を先ほど作成した円のすぐ上に持っていきます。
そうしたら、レイヤーパネル上で、写真と円のあいだくらいの位置にカーソルを持っていき、その上でAlt(Option)キーを押すと、下向きの矢印に変わりますので、クリックします。

design_crippingmask

円形に画像がくり抜かれました!

写真のサムネイルに、枠線と影をつける

円形や長方形に写真がくりぬかれましたが、今度はこちらの写真に枠線や影をつけていきます。

方法はかんたん、これまでにも何度か出てきている、レイヤースタイルを使って効果を加えてあげることでできます。
クリッピングマスクがかかっている対象の円形の図形のレイヤーを選択します。
枠線をつけるときは、レイヤースタイルの境界線を設定します。サイズは3px、位置は内側、カラーは真っ白にしたいので、カラーピッカーでいちばん左上を選ぶか、数値入力で#FFFFFFを入れてあげましょう。

design_border

つづいて設定したいのは影。影は、ドロップシャドウで作れます。単なるシャドウだと、内側にできる影になってしまいますのでご注意。ドロップシャドウの設定では、描画モードを乗算、不透明度は30%くらいにします。影の濃さは、この数値を上下すると変更できます。距離、サイズはそれぞれ3pxに減らします。Webサイトを作る場合だと、初期設定の5pxはすこし大きいのです。

design_drops

2つの設定が終わったら、今度はこの設定を他のサムネイルでも適用させます。このとき、レイヤーパネルの設定したレイヤースタイルの「効果」と書かれた文字上でAlt(Option)キーを押しながらドラッグすると、この設定をコピーできます。(Altキーを押さずにドラッグすると、コピーせずに効果を他の図形に移動できます)

design_alt

ちなみに、「効果」の文字じゃなくて、他の「ドロップシャドウ」などの文字をドラッグした場合だと、その一つの効果だけをドラッグできます。

コンテンツ部分の真ん中にある大きめの画像を設定しよう

コンテンツ真ん中上部の、「私たちについて」部分に写真を配置して、先ほどと同様に長方形を作成しクリッピングマスクで繰り抜き、境界線、ドロップシャドウを適用させます。
長方形のサイズは○pxとしました。

design_img

さっきやった機能を使えば、問題なくできるはずです!

整列ツールでそろえよう

いま、サムネイル画像が合計6個できて、見出しも4つある状態になっていますが、それぞれのすき間がまちまちになっているんじゃないかと思います。なので、これらを揃えていきます。

実際のところ、Photoshopでのデザインが上達してくると、整列ツールを使う機会を最小限にするような作り方ができるようになるもので、勘所みたいなのが働いてくるんですが、まずは整列ツールを使うことや、なるべく揃えることなどに慣れていきましょう。
左側3つのサムネイルを選びたいのですが、このとき、パターンを適用した背景画像を選んでしまってうまく選択できないことがありますので、まずはレイヤーパネルから背景画像を選び、レイヤーパネル内上部にある「ロック」の項目から、カギマークのアイコンをクリックしましょう。十字の矢印でも構いませんが、それらをクリックすることで、位置固定になります。

design_lock

背景画像だけじゃなく、メインビジュアルとして使った写真が選択できてしまう場合もあるので、そのときは同様に、写真のレイヤーにロックをかけましょう。

背景画像が動かないことを確認したら、左側3つのサムネイルをドラッグで選びましょう。すると、画面上部にテトリスみたいなマークが複数出てきます。左の6つのテトリスマークは、整列です。その右は分布といって、均等の距離に散らせるボタンとなっています。
まずは3つのサムネイルを左揃えにしたいのですが、クリッピングマスクをかけている場合、クリッピングマスクをかける前の写真の位置を基準に、左揃えになってしまって、うまくいきません。
レイヤーパネルから、マスク用の図形だけを選択したいので、レイヤーパネル上でCtrl(command)キーを押しながら図形を選択していくと、複数が選択できます。
3つの図形を選択して、「左端揃え」ボタンを押すと揃います。
そのあとに、今度は「垂直方向中央を分布」ボタンを押すと、均等に散らせました。

design_seiretu

ただ、テキストを配置したあとにすき間をもう少し増やしたい場合や、その逆のすき間を詰めたい場合もあるので、そのときは最後に調整しましょう。
3つ目のサムネイルを下に移動させて、3つサムネイルを選んで分布をすれば、再度均等に散らせます。

テキストを設定

つぎに、サムネイルの横などにテキストを追加しましょう。

ウェブサイト上でのテキストは、画像になっているものと、HTMLで表示させられるデバイスフォントで作られたテキストがあります。
デバイスフォントというのは、パソコンに入っているフォントのなかから選んで表示されるフォントなのですが、これがWindowsとなると、綺麗に表示させられる日本語フォントがほとんどのパソコンには入っていないので、日本語のウェブサイトでは、文字を画像で表示させるか、デバイスフォントで表示させるのかが大きな悩みどころとなります。

デザイナーさんや、デザイン会社なら優れたきれいなフォントを購入しているので、いくらでもきれいに見せられるんですが、そうじゃないユーザーさんのパソコンにはフォントが入っていないので、そういった悩みが出てくるんですね。

今回は、4つの見出しで作ったテキストは画像、それ以外のテキストはHTMLのデバイスフォントにします。
デバイスフォントとして表示させる場合は、実際のユーザーさんの表示に合わせたほうが完成のイメージがしやすいので、フォントはメイリオにしてあげましょう。Macで制作している方で、メイリオがない方は、Osakaかヒラギノ角ゴとします。
中見出しとなるテキストはそれぞれ10文字前後、本文はそれぞれ30文字前後で記述します。
また、メインビジュアルのすぐ右下にある「Home」という文字は、パンくずリストと呼ばれる、現在の階層を知るためのリンクテキストとなります。ただ、トップページでは特に機能しない部分なので、Homeの文字だけを置いておきましょう。

文面はなんでもよいので、ダミーテキストを入れてあげてもよいです。

リスト用のアイコン作成

ニュースの部分がまだ手付かずだったので、3つの写真もクリッピングマスクをかけましょう。
右側の3つの画像は、正方形のクリッピングマスクをかけます。長方形ツールで85pxの正方形を作り、レイヤーを写真の下に移動させる手順でマスクをかけていきます。

クリッピングマスクができたら、ニュース項目のリストの日付の左に、小さいひし形のマークをいれます。

こういった小さいサイズのパーツを作るときは、拡大できる限界まで画面を拡大して、鉛筆ツールでポチポチと点を打っていくのが早かったりします。
まずはレイヤーパネル右下のアイコンをクリックし、新規でレイヤーを作成して、ズームツールを選んでクリックすることで拡大します。Photoshopの拡大倍率の最大は3200%なので、そこまで大きくしてしまいましょう。
鉛筆ツールは、ブラシツールとはちがって輪郭のはっきりとした線や点を描けるツールなのですが、1pxの点を打っていくにはちょうどいいです。鉛筆ツールはツールバーのブラシツールアイコンの下に隠れてますので、長押しで選びます。
上部パネルに直径のサイズを設定できるので、鉛筆のサイズを1pxにして、ひし形状に塗っていきましょう。

design_pencil

もしはみ出してしまった部分を消したい場合は、消しゴムツールを使います。このとき、はっきりとした輪郭を持った線として消したいので、上部のパネルに表示される項目のうち、「モード」をブラシではなく鉛筆に、直径を1pxにして、はみ出した部分を消していきます。

ひし形マークができたらその横に日付のテキストを、それらの下に本文を配置します。
そして、日付テキスト、本文、そしてひし形マークをセットで、複製します。このとき、ちょうどよいすき間になるよう、うまく整列や分布をつかってあげてください。

アイコンを追加

今回のデザインでは、いくつかのSNSのアイコンとツール系のアイコンを配置しています。
初心者さんのうちは、なるべく多くの素材を自作なり自分で撮影するなりしたほうがいい、というのはあるんですが、無料配布の素材も数多くありますので、今回はそれらを使わせてもらうのもよいです。

※素材をDLして使う場合は、必ず規約を確認しましょう。

これらの中から、テイストに合うアイコンを見つくろいます。
アイコン素材には、データの種類が複数あることが多くて、EPS形式かAI形式のものを配置するとよいでしょう。それらのデータなら、Photoshopで「配置」をしたときにベクターデータ(拡大縮小しても形が保持されるデータ)として読み込めます。
「配置」、「拡大・縮小」、「整列・分布」などを使って、ちょうどよい位置に配置します。

フッター部分を作成

最後に、残りのフッター(最下部のパーツ)部分を作成します。
コピーライト表記を右側に、ナビゲーションのメニューを左側に記述して、整列・分布でそろえます。

design_icons

レイヤーを整理して完成

ここまで、けっこうな枚数のレイヤーを作って来まし、どこに何があるのかわかりにくくなっていますので、このレイヤーを整理しましょう。自分だけがさわるのなら、整理しなくても何とかなるんですが、コーダーさんにデータをわたしたり、別会社のデザイナーさんにデータをわたすこともありますので、なるべくきれいなデータをわたせるようにしましょう。

Illustratorでは、レイヤー一枚に複数のオブジェクトを入れることでまとめられるのですが、Photoshopではフォルダに複数のレイヤーを入れて整理します。ちょっとした違いではありますが、単に用語の違いと考えてもらって問題ないです。
レイヤーパネルを開いて、まとめたいレイヤーをShiftを押しながらクリックで複数選択します。そして、Ctrl(command)+Gキーでグループ化となります。

グループ化されると、フォルダのようなアイコンに変わって、右向きのさんかく矢印をクリックすることで、まとめたグループ内のレイヤーが展開されます。
何と何をグループ化させるのかは、決まりがあるわけじゃないのですが、そのデータごとにルールを決めておくとやりやすいです。
今回はウェブサイト用のデザインデータなので、ヘッダー(ロゴとナビゲーション)、メインビジュアル、コンテンツの左右、フッター(下部のナビゲーションとクレジット)といったカテゴリごとにわけます。

グループ化ができたら、さらにデータをわかりやすくするため、各グループを色でわけてあげるとべんりです。
グループの目玉マークのうえで右クリック(Mac:Control+クリック)すると、ブルー、バイオレットなどの色名が出ますので、好きな色を各グループにあたえてあげましょう。

カンプデータを作るだけが、ウェブデザインじゃないってお話。

去年あたりから、スマートフォンとPC用のウェブサイトの両方に適したデザインになる、レスポンシブデザインという手法が多くなってきています。

画面のサイズによって、レイアウトを変更するデザインを、そう呼ぶんですが、もしレスポンシブデザインを厳密にPhotoshopで作ろうとすると、デバイスの数だけのカンプデータを作ることになっちゃって、それってすごく非効率的ですよね。
ですので、最近では「何でもかんでも、カンプデータを作ればいい」って話でもなくなってきています。

もちろん、Photoshopでデザインを作ることの価値は下がることはないので、ぜひ、状況によって柔軟に選べるようにしましょう!

コメントする

ページの先頭に戻る