初心者から始めるPhotoshopでWEBデザインその②

どうもこんにちは。 WEBデザイナー・ディレクターのやったんです。

今回も前回と引き続いて、初心者・未経験から始めるPhotoshopデザインについて紹介していきたいと思います。
前回は、Photoshopの制作準備までを行いましてので、2回目はヘッダーとメインビジュアルを作るとこまでやりたいと思います。

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

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!

ヘッダーを作ろう

ヘッダーとメインビジュアルの配置場所を決める


前回学習しました定規からガイドを引き出して来て、ざっくりとヘッダーの位置とメイン画像の位置を区切っていきます。
今回は、ヘッダーの高さを140pxとしてメイン画像のサイズの高さを600pxとしてガイドを区切りました。(ここら辺は、大体でOKです。後から変更もできます)

ヘッダーにロゴを設置しよう

上部メニュー「ファイル」から「配置」を選択します。するとファイル選択画面が出ますので、ロゴを選んで配置します。(大体ロゴは支給してもらうことが多いです)

グローバルナビゲーションを作ろう

最近のグローバルナビゲーションは、比較的テキストだけのシンプルなデザインが多いです。今回のデザインもシンプルなテキストメニューにしています。

まず、メニューの配置場所にテキストを打っていきます。メニューごとの間の間隔は最初は大雑把でもOKです。あとで微調整をすればOK。

電話番号とSNSボタンを設置しよう

まずは電話番号を作りましょう。こちらは通常テキスト打ちでOKです。
次にWEBの予約ボタンを作ります。今回はワインレッドのグラデーションボタンを作ります。

まず、始めにグレーの横長のボタンを作ります。角丸長方形ツールを使って作成します。
次に、ボタンにグラデーションカラーをつけますが、手順は上記画像の番号順に作業します。
1、レイヤーパレットのボタンレイヤーをダブルクリックします。
2、レイヤースタイルが立ち上がるので左メニューから「グラデーションオーバーレイ」をクリックします。
3、グラデーションオーバーレイの右側のメニューから「グラデーション」の色をクリックします。
4、グラデーションエディターの「プリセット」からイメージ近いもの選びます。今回は、ワインレッドのボタン色を採用しました。

※グラデーションファイルは、あらかじめ色々と揃えておくと良いです。WEB上で無料配布しているものもありますので積極的に活用しましょう。
「保存版!Photoshop用無料グラデーション750個+まとめ」

次に、作成したボタンの上に「WEB予約」とテキストを入力して配置します。
ボタンの右側にある矢印は、パレットメニューの「ラインツール」から1pxでカラーを白にして線を作っています。

facebookとインスタのアイコンですが、アイコンのフリー素材サイトから入手して配置しています。
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト

メイン画像を作る

メイン画像を配置する箇所にパレットメニュー「長方形ツール」を使って四角形を描きます。縦635px、横1400px以上(横は画面幅以上であればOK)としています。

次に画像を配置していきます。

画像を配置すると、先に作った四角形よりも大きく表示されるのがわかります。
これを画像を先にメイン画像の四角形に合わせてマスクをかけます。

「レイヤーパレット」の写真レイヤーの位置を確認します。ここで写真が必ず先に作った四角形の枠レイヤーよりも上にあることを確認してください。
次に「option(alt)」を押しながら”店内画像”と”メイン画像枠”間のクリックします。

すると、”店内画像”レイヤーの左に矢印が出て、少し右側にずれたことがわかります。これで”メイン画像枠”似合わせて写真にマスクがかかったことになります。

キャンバスにも画像が綺麗に枠に合わせてサイズが合っていることが確認できると思います。

画像の色を明るくする

ここまででいわゆる”メインビジュアル”は、ほぼ完成なのですがちょっと画像が暗いかなという印象がありますので、画像を明るくします。

「レイヤーパレット」の一番下にアイコンが並んでいるのが見えます。その中で丸いアイコンがあります。これは「調整レイヤー」と言い、色を明るくしたりする機能などが使えます。
まずこれをクリックして、出てくるメニューから「トーンカーブ」を選びます。

「トーンカーブ」のパレットが表示されるので、今回は明るいところをより明るくしたいと思いますので、右上の方を掴んで上に引き上げます。すると下記のように画像が明るくなったのがわかります。
※トーンカーブの使い方は、Photoshopのトーンカーブをなんとなく使っていませんか?改めて基礎や活用方法について学ぼうを参考にしてみてください。

はい、大分明るくなりましたね。
最後に今のままだと画面全部が明るくなった状態(ロゴとかボタンとかメニューとか)になってしまっているので、画像だけにトーンカーブがかかるように、先ほどの画像にマスクをかけたようにトーンカーブも画像だけの範囲に適用されるようにマスクをかけます。

“トーンカーブ”レイヤーと”店内写真”レイヤーの間をクリックすると”トーンカーブ”レイヤーの左に矢印ができて、カラーについてもメイン画像枠に合わせてマスクがかかったことがわかります。

以上、Photoshopで作るWEBデザイン第2回目、ヘッダーからメインビジュアルまでの作り方
となります。
皆さまのデザインの参考になれば嬉しいです。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!


スポンサーリンク







シェアする

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

フォローする

スポンサーリンク