Photoshop初心者を爆速で即戦力に変えるバナー制作講座

Photoshopを購入してデザインの勉強を始めようとしても、何をしていいのかわからない…。操作を覚えるにしても素材がないと何もできない。現場に飛び込もうにもWEBデザイナーのアルバイトなどの面接にはphotoshopのスキルがわかる作品が必要。だいたいの人がこのような形だと思うのです。

手っ取り早くデザインを上達させるには現場に入って先輩の技術をパクるのが一番なのですが、そこまでのハードルが結構高かったります。
そこまでのステップとして、私と一緒に簡単なWEBサイトのバナー作りましょう。

サンプルのPSDはこちらからダウンロードして下さい。
banner_01

Photoshopを起動して新規ファイルを作成する

Ctrl+N

新規ファイルの設定

1. 幅575px 高さ160px
2. 解像度72
3. カラー：RGB
4. カンバスカラー：白

表示されたカンバスがバナーの大きさになります。ここでデザインしバナーを作っていきます。
途中で変更できますが、カンバスカラーは何色でも構いません。今回のバナーのように最終的に黒くなるようなイメージが固まっているのでしたら、カンバスカラーを黒にしましょう。

写真をPhotoshopにドラッグアンドドロップする

Ctrl+O

上記ショートカットで写真ファイルを開く人もいますが、デザイン現場でやる人はまずいません。画像ファイルをPhotoshopのカンバスにドラッグアンドドロップすることで画像がキャンバスに読み込まれます。

「レイヤー」を見てみよう

ここでレイヤーの説明をします。
Photoshopの特徴として、何枚もの層（レイヤー）を組み合わせていくことで最終的なデザインを作っていきます。こうすることで文字だけを移動させたり、写真だけを移動させることができデザインの自由度とやり直しがいくらでもでいるようになっています。

読み込んだ画像は「背景」の上にあります。ですので背景を選択している状態では位置を移動させようとしても背景が移動するだけで、読み込んだ画像は移動しません。かならず作業するレイヤーをクリックしてアクティブの状態にします。

画像がスマートオブジェクトになっているかを確認しよう

最近のPhotoshopはドラッグアンドドロップで画像を読み込むと「スマートオブジェクト」という形で読み込まれます。これは非常に便利な機能で拡大・縮小を繰り返しても画像が劣化しないのです。そのかわりファイルサイズが大きくなり作業がもっさりしたり、Photoshopの保存ファイルであるPSDのファイルサイズが大きくなります。デザインの初期段階ではスマートオブジェクトで画像拡大を繰り返して全体のバランスを調整していきます。

画像ファイルのポイント

1. スマートオブジェクトは画像を拡大・縮小しても画質が劣化しないファイル

画像を移動させてみる

V

またはツールバーの矢印ボタンをクリックすることで「移動ツール」を選択できます。この状態で画像を好きな位置に移動させてみましょう。

画像を縮小させる

Ctrl+T

画像が大きすぎますね。
バナーに合うサイズまで小さくしましょう。ショートカットキーを押すとバウンディングボックスと呼ばれるものが画像の枠に表示されます。この四隅のどこかをドラッグすることで画像を拡大・縮小させることができます。

拡大・縮小のポイント

1. Shiftキーを押しながら縮小すると縦横比を維持しながら縮小できる
2. Altキーを押しながら縮小すると中心を維持しながら縮小できる

背景を塗りつぶす

Shift+F5

いい感じに画像を配置できましたか？
そうなると今度は右端の白の余白を黒く塗りつぶしましょう。どうみても白じゃなくて黒ですよねこの場合。「背景」レイヤーを選択して黒で塗りつぶします。
それっぽい雰囲気になってきましたね。

シェイプツールを使い長方形ををつくる

U

次に「東京牛」「2倍増量」「3月末まで限定」「540円OFF」のテキストが入るエリアをシェイプツールで作ります。
塗りと線を分けることができますので、黒で塗、白の枠線を1px作りましょう。設定が完了したらドラッグして長方形を作ります。ここからいろいろな作業が同時に行うようになってきます。

シェイプツールの調整

1. 長方形のレイヤーがアクティブになっているか確認する
2. シェイプツールで長方形を作ったらCtrl+Tで拡大縮小をし、大きさを微調整する
3. Vで長方形を移動して右端に配置する

今までやってきたことをすべて使って大きさと位置を調整していきます。

テキストを打ち込む

T

まずは画面をクリックして「東京牛」のテキストを打ち込みます。ここで注意するのが文字を入れる長方形レイヤーをアクティブにしたままテキストツールを長方形の上でクリックしてはいけないとういうことです。
そうするとテキストは「範囲指定のテキスト」に変更されて扱いづらくなります。長方形の中に均等な文章を流しこむ際には便利ですが、キャッチコピーなどを作る際はあまり使用しません。

テキストの調整

1. 長方形ツールレイヤーがアクティブの状態でテキストツールをその上で使用すると範囲指定になる
2. テキストツールで画面をクリックではなく、ドラッグしても範囲指定になる

テキストのフォントや大きさをを調整する

「東京牛」の文字レイヤーを選択したらPhotoshop上のタブの「ウィンドウ」＞「文字」を選択します。そうするとフォントの設定画面が表示されます。

ここで好きな文字に変更していくのですが、今回はPhotoshopに入っているフォントでキレイな「小塚明朝Pro B」を使用します。ない場合は明朝体のフォントを選ぶフォントの太さをボールドにしてください。フォントサイズは53px、VA（文字と文字の感覚）は100に設定します。

またカラーで好きな色を選択できます。色を選んでから入力してもいいですし、入力後にテキストレイヤーを選択して色変更することも可能です。

「東京牛」「２倍増量」はグラデーションを掛けますからどんな色でも大丈夫です。「540円OFF」は黄色、「３月末まで限定」を白にしましょう。

この作業を繰り返して、残りの「2倍増量」「3月末まで限定」「540円OFF」を拡大ツール・移動ツールを駆使して配置しましょう。

テキスト入力時の注意

1. 日本語入力のあとは半角を押して英語入力に切り替えないとショートカットキーが使えなくなる

レイヤースタイルで文字にグラデーションをかける

レイヤーの右端をダブルクリック

「東京牛」のレイヤーをダブルクリックすると、「レイヤースタイル」の画面に入れます。立体にしたり影をつけたりと色々は効果をレイヤーに与えることができます。
まずは「グラデーション」にチェックをいれましょう。そうすると文字にグラデーション効果が現れます。設定画面のグラデーション部分をクリックすると詳細設定に入れます。

左右に上下と２つのスライダー、合計４つがあります。このスライダーを調整してグラデーションを作っていきます。スライダーを追加して複雑なグラデーションを作ることもできますがそれは上達してからにしましょう。

まずは左下のスライダーをクリックします。そうするとカラーの選択画面のカラーピッカーが表示されますので好きなカラーを選択します。サンプルのものだと「#c71a1a」です。画面したの部分に直接入力することも可能です。
次に左下のスライダーの色を決めますサンプルのものは「#5a0000」です。この２つを決めると明るい赤から暗い赤へとグラデーションします。

「ベベルとエンボス」でほんのり立体にする

次にベベルのエンボスをクリックして詳細画面に入ります。画像の例にならって設定してみてください。

そうすると黒背景に赤と可読性があまり良くない組み合わせに白が入ることでグンと見やすくなりました。枠線を入れると野暮ったくなることも多いので、ベベルとエンボスでエッセンスを加えるのは現場でよく使うテクニックです。

同じように「２倍増量」もグラデーションを掛けてみましょう。

文字を枠線の中に入れる

U
この作業もシェイプツールで行います。やり方は先ほどと一緒ですがレイヤーの重なりに注意しましょう。
入力した文字の上に、シェイプツールで枠線になるように塗りを黒、線を白で長方形をつくります。そうすると文字が黒くつぶされてしまします。

これは文字レイヤーの上にシェイプレイヤーがあるからです。レイヤーの順番を入れ替える作業が必要となります。

レイヤーの順番を入れ替える

レイヤーを下に：Ctrl+[レイヤーを上に：Ctrl+]

テキストレイヤーを上にあげるか、シェイプレイヤーを下に下げるかになります。レイヤーのウィンドウで任意のレイヤーをドロップすることでも可能です。試しに文字の上にシェイプレイヤーを選んで下に下げてみましょう。枠線の中に文字が収まると思います。

バランスが悪いようでしたら、拡大縮小や移動を駆使して調整してみてください。

だいぶ形になりましたね。しかしちょっと肉の画像とコピー（文章）のバランスが悪いかなぁと思うので、ここで最後の一手間を加えます。

新規レイヤーを作成する

Ctrl+Shift+N

まず一番上のレイヤーをクリックしてアクティブにしてから、新規レイヤーを作成します。レイヤーのウィンドウの下にある新規レイヤー作成ボタンを押しても大丈夫です。レイヤー名を入力しますが簡単なバナー程度だとそのままデフォルトのままが多いです。WEBサイトのデザイン案などを作る際はきちんと名前をつけないと大変なことになります。

選択範囲ツールを使い好きな範囲を塗りつぶす

選択範囲ツール：Ctrl+M
塗りつぶし：Shift+F5

選択範囲ツールを使用して縦の長方形になるように形を作ります。このときカンバスの外からドラッグすればカンバスの端に合うように調整されます。範囲が決まったら塗りつぶしツールで塗りつぶします。カラー選択で「#7cbb57」あたりのグリーンが理想的です。

選択範囲のポイント

1. 選択範囲も右クリック＞選択範囲の変形で拡大縮小できる
2. レイヤーをctrlを押しながらクリックすると、そのレイヤーの選択範囲が表示される

レイヤー合成モードを「乗算」に変更する

緑が明るすぎますので、レイヤーを「乗算」に変更します。
レイヤーパネルの「通常」と書かれている部分をクリックして乗算にします。下のレイヤーの色と掛け合わせるモードで、色味を維持しつつ下のレイヤーの色の要素を引き継ぐことができます。よって重ねるほど色が暗くなります。

レイヤーを複製する

Ctrl+J

まだ少し明るいので、乗算レイヤーを複製します。レイヤーパネル下の新規レイヤー作成ボタンにレイヤーをドロップすることでも作成できます。
これでいい感じの暗い緑の色合いになりました。

縦書きのテキストを入力する

いよいよ最後です。テキストを縦書きで入力します。
ツールウィンドウのテキストツールを長押しするとオプションが表示されますので、縦書き入力ツールをクリックします。
先ほどつくった緑の入力スペースに「六種薬味で味わう」と入力します。ここまできたらフォントの種類や大きさはおまかせです。

バナーの完成。ファイルの保存

ファイルの保存：Ctrl+S別名でファイルを保存：Ctrl+Shift+S

これがバナー作成の一通りのやり方です。まずは保存をしましょう。作業中にPhotoshopが強制終了することも環境ではありますので、キリの良い処で保存しする習慣をつけましょう。最近のPhotoshopはリカバリ機能があり強制終了してもある程度の復元は可能ですが３０分くらいをロスすることもあります。

WEB用に保存

Ctrl+Shift+Alt+S

最後に実際のWEBサイトに載せるJPGEやPNG形式に直して保存します。JPEGは画像の品質を高ければ高いほどファイルサイズも大きいので、「やや高画質」あたりが無難です。

これができればスタートライン

WEBデザインにおけるバナーの作り方の一連の流れです。Photoshopの機能のうち5%も使っていないと思います。
この他にもアルファチャンネルや透明度を駆使して様々なデザインを作ることができますが、まずはこの一通りの作業を迷うことなくできるようになりましょう。

独学でもバナー制作やWEBデザインができるレベルまでいくことは可能ですが、ゆっくりと勉強できる学生向きです。最低限のこと覚えてWEBデザインの現場に入り仕事としてWEBデザインをやっていきたい就活生や社会人の人は、TechAcademyのWebデザインコースのようにオンラインスクールを使用すると時間の短縮になります。