Photoshop講座

【第４章】WEBデザイン

https://www.youtube.com/watch?v=KfMQ_yEVtpE

「デザインカンプ作成2」

デザインカンプはワイヤーフレーム(レイアウト)に具体的な色や画像の指定を行ったもので、
モックアップとも呼ばれます。
ワイヤーフレームは要素の位置関係を指定したものです。

今回は、ヘッダー画像の作成について説明します。
前回は、画像を持ってきて、ロゴと文字を配置するところまで
実践していただきました。
今回はその続きからヘッダー画像完成まで行います。
前回作成した、ロゴと文字の下に日本語表記を追加しておきます。
フォントは統一感を出し、あまりイメージが変わらないようにします。
作成しましたら、前回と同じく、ロゴと文字レイヤーを選択して
上部メニューからパターンに揃えるを使用します。
ここで、左端のラインがそろいます。
このように複数の要素を配置するときは
整列を意識するとバランスが取れます。覚えておきましょう。
最後に右のスペースにコンテンツのアイコン
を配置してイメージ感をだします。
アドビロゴををウエブから選択してきましょう。
今回使うのはDWとPSですので、この２つを自動選択ツールで選択します。
コピーレイヤーをヘッダーのほうに持っていきましょう。
まずは、DWのアイコンからもっていきましょう。
自動選択ツールに切り替え、DWのアイコンの部分を選択しましょう。
すべての選択範囲が確定された状態で
右クリックします。
コピーレイヤーを作成で選択範囲だけを
コピーしたレイヤーが作成されます。
このコピーレイヤーを選択し、ヘッダーのほうに持っていきます。
フォトショップのアイコン、PSも同様にヘッダーにもっていきます。
2つ揃ったら、選択した状態で、上端揃えをして、スペースに配置します。
背景というのが透過して見えるので、アイコンのレイヤーのほうに、
レイヤースタイルの「光彩（外側）」にチェックをいれて描画としてあげます。
このように、うっすらと見えるぐらいでいいでしょう。
サイトに埋め込むことを想定して、ヘッダーを
ウエッブスタイルで保存し、書き出しておきましょう。
ヘッダー画像の要素をすべて選択した状態で
CTRL+Gでレイヤーを一つのフォルダーにまとめます。
まとめましたら、フォルダーを選択し右クリックします。
そのあと、オブジェクトに変換で1枚のオブジェクト変換して1つにしておきます。
こう一度、選択した状態で右クリックします。
コンテンツを編集で、別タブで編集を行います。
ワイヤーフレーム作成時にひいておいたガイドが
ここで役目をはたします。
新規で切り抜きツールを選んで、ガイドにそって、切り抜きをおこないます。
CTRL+ALT+Iで確認し、1200x280のサイズに切り抜かれて入ればOKです。
CTRL+ALT+SHIFT+Sでヘッダー画像を書き出しておきましょう。
JPEG形式で書き出せばヘッダー画像の完成です。
別タブで作成したデータはctrl＋shift＋Nで「psb」などの名前で別名保存します。
メインのPSDに戻ります。
今回はここまですすめましょう。

1. 「文字ツール」より、「ウェブクリエターズアカデミア」の文字を作成。
2. レイヤーパネルより、ロゴと1で作成した文字を選択をして、メニュー下にある「左端揃え」を選択。
3. Googleより「Ps」と「Dw」のロゴをダウンロード。
4. ドラッグ＆ドロップでコピー。
5. レイヤーパネルより、コピーしたロゴのレイヤーを選択して、右クリック→「コンテンツの編集」
6. 左にあるツールバーから「クイック選択ツール」を選択して、それぞれのロゴの輪郭を囲う。
7. 右クリック→「選択範囲をコピーしたレイヤー」をクリック。
8. 同様にもう１方のロゴもレイヤーを作成。
9. それぞれのロゴをいま作業を行っているキャンバスにドラック＆ドロップ。
10. 2つのロゴを並べて、「上端揃え」
11. レイヤーパネルより、ロゴを選択してfx→「光彩（外側）」をクリック。
12. 不透明度を30%ぐらいに設定。
13. 同様に、もう１方のロゴにも光彩をかける。
14. レイヤーパネルより、ヘッダー画像のレイヤーをすべて選択して、Ctrl + G （１つのファイルにまとめる。）
15. 14で作成したファイルを「ヘッダー画像」と名付ける。（名前はなんでもいい…）
16. レイヤーパネルより、「ヘッダー画像」を選択した状態で、右クリック→「コンテンツの編集」
17. 左のツールバーより、「切り抜きツール」を選択。
18. ヘッダー画像を1200px × 280pxに切り抜く。
（＊ヘッダー画像のサイズを確認するには、Ctrl + Alt + I）
19. Ctrl + Alt + Shift + Sでヘッダー画像の書き出しを行う。（おそらくホームページ用？）
20. 編集したヘッダー画像もpsb形式で保存。(＊Ctrl + S)