Photoshop講座

【第４章】WEBデザイン

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

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

デザインカンプ作成3

ひきつづきデザインカンプ作成をおこなっていきます。

1．ヘッダー画像の作成が終わったので、次は左コンテンツに入ります。

まずは、見出しとなる部分を変更していきましょう。
「＃ページ名」⇒「トップページ」に変更、分かりやくするために「Uキー」で
「ラインツール」を呼び出し、１pxの線を変更した文字の下に引きましょう。

2.「更新情報の長方形」には、参考サイトから
簡単に画面からキャプチャーすることができます。
トップページの更新情報を
キャプチャ画像を取り込んで配置し、
大きさと位置を調整しましょう。

3.「＃見出し」⇒「ウェブクリの進め方」に変更します。

4.「動画の長方形」には、第３章のPSDデータから
完成形の表紙をJPEG形式で保存した画像を取り込んで
コンテンツを編集します。
位置と大きさを調整し配置します。

5. 4の画像レイヤーを右クリックし、「コンテンツの編集」を選択し、
別ウィンドウにて編集します。
⇒「切り抜きツール」で上下の帯をカットし、このレイヤーを
メインPSDデータの左コンテンツの動画長方形部分に配置し、
大きさと位置を調整します。

6.動画と分かるように、「再生アイコン（YouTubeの）」画像を検索し、
保存して読み込みましょう。

7.アイコンの赤い部分を黒くするために、
「Gキー」で「塗りつぶしツール」に切り替えて、
赤の部分でクリック（画像のラスタライズ化を聞いてくるので
「OK」をクリック）して
黒に塗りつぶし、レイヤーパネルの不透明度を「65％」にしてください。

8.大きさを調整し、
動画レイヤーと再生アイコンレイヤーを選択し、
上部メニューの「水平方向中央揃え」と「垂直方向中央揃え」を
それぞれクリックして、上下左右の位置を合わせましょう。

まとめますと

1. 名前の変更。（トップページ、ウェブクリの進め方）
2. ツールバーより、ラインツールを選択。（ない場合は、長方形ツールで右クリック）
3. トップページの下に、画像ボックスと同じ幅の線を1pxで引く。（＊1pxで線を引くことが多い。）
4. IBAトップページより、「更新情報」の画面キャプチャを取得。
（＊画面キャプチャソフトがない場合は、Gyazoをダウンロードしておく。）
5. ドラッグ＆ドロップで画面キャプチャをペースト。
6. 第３章のpsdファイルに戻り、レイヤーパネル上でレイヤーをすべて選択。
7. Ctrl + G で１つのファイルにまとめ、右クリック→「スマートオブジェクトに変換」
8. 第4章のpsdファイルにドラッグ＆ドロップで貼り付け。
9. レイヤーパネルでいまペーストしたレイヤーを選択して、右クリック→「コンテンツ編集」
10. 上下の帯の部分を「切り抜きツール」で切り抜く。
11. ふたたび第4章のpsdファイルにドラッグ＆ドロップ。
12. 大きさを調整して、適切な位置に配置。
13. Googleよりyoutubeアイコンをダウンロード。
14. コピー＆ペーストして、キャンバス上へ。
15. youtubeアイコンの大きさを変更。
16. 左のツールバーより、「塗りつぶしツール」を選択。
（＊ない場合は、「グラデーションツール」にカーソルを合わせ右クリック。）
17. カラーピッカーで色を黒にして、youtubeアイコンを黒に塗りつぶし。
18. youtubeアイコンのレイヤーを選択して、不透明度を65%に変更。
19. 第3章で使用した画像とyoutubeアイコンのレイヤーを選択して、
　　「水平方向中央揃え」と「垂直方向中央揃え」を行う。

今回はここまでにします。