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%」にします。

今回はここまでです。




おすすめの記事