カナ･ログ

左図のように、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要素に背景画像

上の背景画像（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画像に書き出し

    

    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;
}

タグ: css, html, デザイン

この投稿は 2009 年 1 月 16 日 金曜日 01:11 に css, html カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。 Posted : カナキ