photoshopで画像パーツを作り、CSSを記述 その6container要素に背景画像

container要素に背景画像左図のように、container要素の下に前回作成した背景画像の上下反転したものを定義します。今回のphotoshopでの作業は前回作成画像を上下反転だけなので簡単です(時間が取れず、安易な記事となりまして...)

今日の分のサンプルページ
http://boxboa.jp/weblog/sample/css_design20090219.html
今日の分のCSS
http://boxboa.jp/weblog/sample/css/css_design20090219.css cssファイル 2.91KB
今日の分の画像パーツ
bck_container.gif gifファイル 5.57kB

詳細は以下、「続きを読むRead more…」から

photoshopの作業
container要素に背景画像

bck_container
上の背景画像(gif)をphotoshopで作成します。

  1. contentに定義している背景画像を開く

    contentに定義している背景画像を開く
    1. photoshopを開き、該当ファイルを開く
  2. モードの変更

    モードの変更
    1. 開いた画像はgif形式なのでモードをインデックスからRGBに変更
      ツールバーのイメージ⇒モード⇒RGBカラー
  3. レイヤーを上下反転

    レイヤーを上下反転
    上下反転後の画像
    1. 変形から上下反転
      ツールバーの編集⇒変形⇒垂直方向に反転
  4. gif画像に書き出し

    gif画像に書き出し
    1. ツールバー⇒ファイル⇒Webおよびデバイス用に保存を実行
    2. 編集ウィンドウから「GIF128ディザ」を選択
    3. 最適化または元画像を選択し任意のフォルダに書き出し

cssの記述
作成した画像をcssでhtmlに定義

container要素のbottom側に定義
#container{
width:800px;
margin:0 0 20px 0;
}

#container{
background:#fff url(../cmn/css_design01/bck_container.gif) no-repeat 0 100%;
}

コメント投稿期間が終了しました。