CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
「CSSでブログに影をつける(ドロップシャドウ)」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる(かもしれない)方のために、Photoshop 6(CSは持ってません)を利用した作成方法を紹介します。
|
|
|
|
|
|
|
|
2006.12.02
記事を全面変更しました。
- ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法
- CSSで3D画像を実現するサンプルいろいろ
- CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
- CSSでクラスセレクタをくっつけて並べる方法
- pre要素で折り返しをするためのCSS
- Google Chromeでfloatレイアウトが崩れる件について
- IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ
- IE6/IE7/IE8/IE9のCSSハック
- ColumnResizerリニューアル
- ドロップシャドウつきの画像をセンタリングする
- CSS で table に斜線を引く方法
- IE7 で pre 要素が適正に表示されない不具合を修正
- CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)
- Highslide JS でサムネイル画像を拡大表示する(設定方法の変更)
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- グローバルナビゲーション(その1:基本スタイル)
≫ ブログでも出来る!画像に影を付けるCSS from WEb2.0*Human
アップした画像に簡単に影を付けられます
以前の記事でも紹介したのですが、導入方法などもっと詳しく紹介します。
ただベタベタと画像を貼るのではなく、影付... [続きを読む]
お久しぶりです。
この場合の影の作り方ですけど、レイヤースタイルの「光彩(外側)」で、色を#000000とかにすれば、もっと工程少なく出来ますよー(*^_^*)。
最初から必要なドキュメントサイズで作れますし。
私はWは任意で、Hは20pxとかにしておいて、最後にカンバスサイズで1pxに切り落としてます。
最初から1pxでも出来るんですが、作業しにくいので……。
>yuki。さん
こんにちは。
ご無沙汰してます。
ご教示ありがとうございました。別途記事に反映させたいと思います。
これで苦手な Photoshop の質問は来なくなるでしょう(笑)。
採用いただきありがとうございますm(__)m (笑)
影の付け方は、ブログデザインによってさまざまなように、
フォトショの使い方もさまざまなので正解はないので、
いろんな切り口があって面白いですよね。
……とか云っておきながら、最近アプリケーションのバージョンアップの速度に
なかなかついていけないのですけれど(*^_^*)
この度は、いつも以上にご足労おかけしたようですみません! 画像の方もエントリーして頂きありがとうございます。 早速とりかかっていますが背景色がグレーの場合とか貴Blogのようにエントリーの両脇にも影を作りたく思いまたまた試行錯誤しています。
しかし、この度はわかりやすくエントリー頂いたので大変助かりました。ありがとうございました。
>yuki。さん
こんばんは。
またなにかありましたらご指導ください(笑)。
>panserさん
こんばんは。
両サイドにつくる場合は上記の工程を異なるファイルで2つ作り、それらを横長のファイルに貼り付けると良いでしょう。
ありがとうございます! なんとかエントリーの両脇に影をつけることができました。 それでまたまた今度は、Blog全体の背景を画像などで表示させた時に影をうまくつける浸透させる方法はないものか?と試行錯誤しています。Photoshopで作成の際、影の背景を画像模様にできればうまく浸透できるんでしょうけど その方法が・・・・?
これができれば結構いい感じになるんでしょうけどね(^^♪ ほんと難しいですね
>panserさん
こんばんは。
「影をうまくつける浸透させる方法」の部分が不明ですが、「画像を透過させる」ということでしょうか?
すいません、文言の意味が理解できておりません。
説明が不充分ですみません。Blog全体の背景を色などを使う場合は、影をつけて背景色にあわせてなじます事はできるのですが背景を画像などを使った場合影と背景がうまくなじみません。影の画像が単なるライン状になってしまいます。具体的に表現しにくのですが
参考に下記URLのような背景と影との感じにしたいのですが・・・・
ただ、少し疑問に思うのは下記BlogはIE6ではうまく背景画像が表示しないようです。
Mozilla Firefoxでは、背景画像が表示しております。ということでMozilla Firefoxで表示している背景画像と影との感じにしたいと思っています。
ただ、このBlogのようにブラウザーで不具合がおきるようでは困りますけど・・・・・
http://siesta.co.jp/nat/archives/001270.html
>panserさん
こんばんは。
ご質問の件ですが、そもそも背景画像とドロップシャドウは1つのファイルに合成したものをCSSで設定、という認識ですが、合ってますでしょうか。
つまり、Photoshop で背景となる部分に背景画像を設定し、その後に光彩を設定すればうまくできそうな気がします。
その上で「IE6で正常に表示されない」という不具合につきましては不明です。
それではよろしくお願い致します。
新規作成のウィンドウはこんな感じになります。
これで最初の画像の左右に余白が出来上がります。この状態では余白は透明ですが、背景色を設定したい場合は以降の背景色の設定を行ってください。必要でない方は、5つ下にあるドロップシャドウ設定に進んでください。
また画像の左右余白の部分に背景色(ここでは白)が設定されます。背景色は予め設定している背景色が適用されます。
これでドロップシャドウが出来上がりました。あとは画像の高さを短くするだけです。
これでドロップシャドウ画像の完成です。
