PS - 背景画像を作る

ラップアラウンドで巻き戻す(body背景画像)


(1)Photoshopで新規画像を作成



(2)高さの値 34px の正円を新規レイヤーに 描く



(3)薄い色を塗る



(4)レイヤーを複製し濃い色を塗る


※透明部分をロックをしてから塗る


(5)自由変形で上のレイヤーの幅を狭くする



(6)レイヤーを結合する



(7)フィルター → その他 → スクロール



高さの半分の値をスクロールする




Illustratorでも作ってみましょう。

【演習】
  • 以下の画像を作りなさい



ドロップシャドウでつくる(body・container背景画像)

(1)Photoshopで新規ファイルを作成



(2)新規ガイド作成:50、850




(3)新規レイヤー作成



(4)選択範囲をつくる




(5)選択範囲を白く塗りつぶし、ドロップシャドウ効果をかける





(6)レイヤー(画像)を統合する
 ※影も含めて1枚の画像にする。



(7)幅900, 高さ10でトリミングする




(8)Webデバイス用に保存(JPEG

透過PNG

どの背景の上にのっても、ドロップシャドウのグラデーションを活かすような画像にします。(containerの背景画像として利用する。)


スマートオブジェクトに変換


トリミング後、背景レイヤーを不可視にしてWeb用に保存する。


  • 透過PNGは、IE6対策が必須
  • 通常のモダンブラウザでは、問題なく表示されます。