2014-10-02

2014-10-02

PS - 背景画像を作る

CSS

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

（1）Photoshopで新規画像を作成

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

（3）薄い色を塗る

（4）レイヤーを複製し濃い色を塗る

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

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

（6）レイヤーを結合する

（7）フィルター → その他 → スクロール

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

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

【演習】

• 以下の画像を作りなさい

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

（1）Photoshopで新規ファイルを作成

（2）新規ガイド作成：50、850

（3）新規レイヤー作成

（4）選択範囲をつくる

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

（6）レイヤー（画像）を統合する

　※影も含めて１枚の画像にする。

（7）幅900,　高さ10でトリミングする

（8）Webデバイス用に保存（JPEG）

透過PNG

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

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

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

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