Photoshop講座【第４章】WEBデザイン「デザインカンプ作成4」

Photoshop講座

デザインカンプ作成4

今回で完成します。
それでは始めていきましょう。

今回は右サイドメニューを作成します。
ここには動画の一覧を配置することを
想定していますので、
ここに動画講座名と見出しを作成します。

1.右サイドメニューの作成

見出し「＃動画チャプター」を変更して

⇒「STEP1マインドセット講座」としましょう。

2.見出し背景をを長方形ツールで作成し、
カラーをサイトテーマカラーに変更します。
（文字は白）

3.次に「動画タイトル」を入力します。
⇒参考サイトからまとめてコピーしてペースト
（左端揃えにする）

4.文字色をリンク色に変更
⇒カラーピッカーで「＃0000ff」（一般的なWebの設定カラー）
と入力して変更しておきます。

5.動画アイコン（右コンテンツで配置した元画像を使用）を
文字の先頭に配置し、
一番上の動画見出しにサイズを合わせる

6.アイコンのレイヤーを選択した状態で、
「Alt＋矢印キー」で必要な数を複製し、
各動画見出しの先頭に配置していく

7.サイズ、カーニング、位置を調整して完成です。
これでトップページのデザインカンプが完成しました。

8.最後に「書き出し」を行います。
今回は「スライスツール」を選択し、パーツごとに書き出す方法を
お教えします。左側のツールより、スライスツールを選択します。
（ワイヤーフレームは非表示、デザインカンプは表示）にします。

「ctrl＋shift＋S」で保存オプションを立ち上げ「保存」をクリックし、

保存ウィンドウ内のスライスの項目が「すべてのスライス」となっている
ことを確認して「保存」します。

このように、ウエブサイト作成時に、各ページのデザインを
フォトショップでおこして、実際の作成に入りましょう。
フォトショップでウエブサイトのデザインを作成し、
DreamWeaver等のサイト制作ソフトを使って
ウエブサイトを形にしていってください。

これで、デザインカンプ講座は終了しました。