目次
Photoshop講座
【第4章】WEBデザイン
https://www.youtube.com/watch?v=ypPiyXUPAxU
「デザインカンプ作成1」
今回はデザインカンプ作成について説明を行っていきます。
デザインカンプはワイヤーフレーム(レイアウト)に
具体的な色や画像の指定を行ったもので、
モックアップとも呼ばれます。
ワイヤーフレームは要素の位置関係を指定したものです。
【ヘッダー画像の配置】
1.「ぱくそた」から教室関連の素材を探し、
その「Sサイズ」をDLします。
2.DLした画像をワイヤーフレームのヘッダーに配置
3.画像レイヤーをヘッダーの長方形レイヤーの上に
置き、「クリッピングマスク(ctrl+Alt+G)」する
⇒画像が下の長方形の形でマスクされるので、
あとは画像の位置を調整すればOK
【第3章で作成したロゴとテキストを配置】
1.第3章のPSDデータを開き、ロゴレイヤーを選択
2.その状態のままで、第4章のヘッダー辺りに
ドラッグ&ドロップ
3.コピーされたロゴをヘッダーの左側に移動
4.テキスト(Web Creator Academia)も同様の操作で
ロゴの右横に配置し、
高さと大きさをロゴと同じになるよう調整します。
5.高さは、選択ツールでロゴとテキストのレイヤーを選択し、
上部メニューの「整列」の「上端揃え」を使用すれば
ピッタリ合います。
6.ロゴとテキストは透かしのようにしたいので、
レイヤーを選択した状態でレイヤーパネルの不透明度を
「30%」にします。
今回はここまでです。