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

content要素に背景画像左図のように、content要素に背景として表示させる画像をphotoshopで作成し、cssで定義します。photoshopでの作業が工数が多く、グラデーションや光彩などの効果がポイントとなります。

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

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

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

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

  1. カンバスを用意

    カンバスを用意
    1. photoshopを開き、新規カンバスを用意
    2. 600×300pxのカンバスサイズ、解像度72pxで作成
  2. 背景色を描画

    背景色を描画
    1. 背景色をカラーを白#ffffffに設定し
    2. カンバス全体をベタ塗り
      ※ツールボックス⇒バケツツール
  3. 角丸のシェイプレイヤーを作成

    角丸のシェイプレイヤーを作成
    1. 上左右に20pxの余白を残し、
      ※余白位置をわかりやすくするため、エクストラ(ガイド線)を表示
    2. 角丸長方形ツールで560×23px、角丸3pxのシェイプレイヤーを作成
      ※ツールボックス⇒角丸長方形ツール
  4. 長方形のシェイプレイヤーを作成

    長方形のシェイプレイヤーを作成
    1. 先に作成した角丸シェイプと合成するため(下左右の角丸を直角にする)、同じ幅で高さ3px以上の長方形シェイプレイヤーを作成
      ※ツールボックス⇒長方形ツール
  5. 二つシェイプレイヤーを統合

    二つシェイプレイヤーを統合
    1. 作成した二つのシェイプレイヤーの下位置を同じ位置に合わます
    2. レイヤーパレットで二つのシェイプレイヤーを選択し
    3. スマートオブジェクトに変換
  6. 統合したスマートオブジェクトにグラデーション効果

    統合したスマートオブジェクトにグラデーション効果
    1. レイヤースタイルから「グラデーションオーバーレイ」を開き
    2. 描画モードを通常
    3. 不透明度100%
    4. スタイル線形
    5. 角度90℃
    6. グラデーション逆方向
    7. グラデーションエディタを開き、左側カラーを#a0a0a0位置が7%、右側カラーを#ffffff位置が70%
  7. レイヤースタイルの光彩(内側)効果

    レイヤースタイルの光彩(内側)効果
    1. レイヤースタイルパネルから「光彩(内側)」を開き
    2. 描画モード、通常
    3. 不透明度、75%
    4. カラー、グレー系#eeeeee
    5. テクニック、さらにソフト
    6. サイズ、5px
  8. 新規レイヤーを作成(両サイドのボーダー用)

    新規レイヤーを作成
    1. レイヤーパレットから新規レイヤーを作成
    2. 先に作成したオブジェクトと同じ幅の長方形を選択ツールで作成
      ※ツールボックス⇒長方形選択ツール
    3. カラーを#ffffffでベタ塗り
      ※ツールボックス⇒バケツツール
  9. 作成したオブジェクトに境界線

    作成したオブジェクトに境界線
    1. レイヤースタイルパネルから「境界線」を開き
    2. サイズ、2px
    3. 位置、内側
    4. 描画モード、通常
    5. 不透明度、100%
    6. カラー、#c8c8c8
  10. スマートオブジェクトに変換し、オブジェクトをラスタライズ

    スマートオブジェクトに変換
    オブジェクトをラスタライズ
    1. レイヤーパレットからスマートオブジェクトに変換
    2. レイヤーをラスタライズ
  11. 重なり部分を削除

    重なり部分を削除
    重なり部分を削除
    • ラスタライズしたオブジェクトの左右ボーダー部分を残し、先に作成したオブジェクトとの重なり部分を削除
      1. 長方形選択ツールで選択
      2. 選択範囲上で右クリック
      3. 選択範囲をカットしたレイヤー
      4. カットしたレイヤーを削除
  12. グラデーション効果

    グラデーション効果
    1. レイヤースタイルから「グラデーションオーバーレイ」を開き
    2. 描画モードを通常
    3. 不透明度100%
    4. スタイル線形
    5. 角度90℃
    6. グラデーションエディタを開き、左側カラーを#dedede位置が0%、右側カラーを#ffffff位置が0%、両端の交差位置が87%
  13. ここまでの二つのオブジェクトをスマートオブジェクトに変換

    二つのオブジェクトをスマートオブジェクトに変換
    1. レイヤーパレットから二つのレイヤーを選択し
    2. スマートオブジェクトに変換
  14. レイヤースタイルの光彩(外側)効果

    光彩(外側)効果
    1. レイヤースタイルパネルから「光彩(外側)」を開き
    2. 描画モード、通常
    3. 不透明度、40%
    4. カラー、グレー系#1b1b1b
    5. テクニック、さらにソフト
    6. サイズ、5px
  15. gif画像に書き出し

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

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

作成した画像をcssで定義するポイントとして、

  • 作成した背景画像デザインに合わせて、content要素のpaddingを再定義
content要素に背景画像
/*レイアウト*/
#content{
width:540px;
padding:30px 30px 20px 30px;/*paddingを再定義*/
}

/*カラー・背景*/
#content{
background:url(../cmn/css_design01/bck_content.gif) no-repeat 0 0;
}
  • Posted : カナキ |
  • カテゴリー:csshtml

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