CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

Posted at November 30,2006 2:20 AM
Tag:[CSS, Photoshop]

CSSでブログに影をつける(ドロップシャドウ)」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる(かもしれない)方のために、Photoshop 6(CSは持ってません)を利用した作成方法を紹介します。

新規ウィンドウを作成[ファイル]-[新規]で(固定レイアウトの場合は)ブログ幅のウィンドウを作成。実際の横幅はもっと広いと思いますが、説明上、ここでは 250px に設定しています。

作成した新規ウィンドウ新規作成のウィンドウはこんな感じになります。

[レイヤー]パレット[レイヤー]パレットに表示されている[背景]をダブルクリック。

新規レイヤー開いたウィンドウのレイヤー名は「レイヤー0」になっていると思いますので、そのまま[OK]をクリック。これは、[背景]から任意の名前に変更することで、レイヤーのロックを外してドロップシャドウ等の効果を設定できるようにするための操作です。

[レイヤー]パレットこれで[レイヤー]パレットに表示されているレイヤー名が「レイヤー0」に変更されました。

画像サイズ選択[イメージ]-[画像サイズ](CSの場合はカンバスサイズ)を選択。

画像サイズ設定ウィンドウドロップシャドウ分の横幅を追加します。サンプルでは左右 25px ずつ追加した合計サイズ 300px に設定しています。変更前のサイズはこのウィンドウの上部に表示されています。
アンカーはどの方向に広げるかを決めるものです。デフォルトは中央から上下左右に広げる設定になっていますので操作しないでください。

設定後のウィンドウこれで最初の画像の左右に余白が出来上がります。この状態では余白は透明ですが、背景色を設定したい場合は以降の背景色の設定を行ってください。必要でない方は、5つ下にあるドロップシャドウ設定に進んでください。

[レイヤー]パレット[レイヤー]パレットの下にあるレイヤーの新規作成をクリックして「レイヤー1」を作成。

レイヤーを背景に変更その状態で[レイヤー]-[新規]-[レイヤーから背景へ]を選択。

[レイヤー]パレットこれで「レイヤー1」が「背景」に変更されました。

設定後のウィンドウまた画像の左右余白の部分に背景色(ここでは白)が設定されます。背景色は予め設定している背景色が適用されます。

[レイヤー]パレット次にドロップシャドウを設定します。[レイヤー]パレットの「レイヤー0」をダブルクリック。

[レイヤースタイル]ウィンドウ[レイヤースタイル]ウィンドウが開きますので、光彩(外側)を選択し、[構造]-[描画モード]を「通常」、[構造]の左下のラジオボタンを選択して右側のパレットをクリックしてお好きな色を設定(これがドロップシャドウ色になります)。その他、[エレメント]や[画質]でドロップシャドウを微調整します。
ドロップシャドウの具合は、先程のウィンドウ右側にある[プレビュー]をチェックしておけばリアルタイムで表示を確認できます。
決まったら[OK]をクリック。

ドロップシャドウ完成これでドロップシャドウが出来上がりました。あとは画像の高さを短くするだけです。

[画像サイズ]選択[イメージ]-[画像サイズ](CSの場合はカンバスサイズ)を選択。

画像サイズ設定ウィンドウ開いたウィンドウで高さを変更します。ここでは 3px にしてみました。これで[OK}をクリック。

警告ダイアログ「画像の一部が切り抜かれます」という警告のダイアログが表示されますが、そのまま[OK]をクリック。

完成画面これでドロップシャドウ画像の完成です。

2006.12.02
記事を全面変更しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

ブログでも出来る!画像に影を付けるCSS from WEb2.0*Human
アップした画像に簡単に影を付けられます 以前の記事でも紹介したのですが、導入方法などもっと詳しく紹介します。 ただベタベタと画像を貼るのではなく、影付... [続きを読む]

Tracked on August 15, 2007 2:04 AM
コメント

お久しぶりです。

この場合の影の作り方ですけど、レイヤースタイルの「光彩(外側)」で、色を#000000とかにすれば、もっと工程少なく出来ますよー(*^_^*)。
最初から必要なドキュメントサイズで作れますし。
私はWは任意で、Hは20pxとかにしておいて、最後にカンバスサイズで1pxに切り落としてます。
最初から1pxでも出来るんですが、作業しにくいので……。

[1] Posted by yuki。 : November 30, 2006 4:02 PM

>yuki。さん
こんにちは。
ご無沙汰してます。
ご教示ありがとうございました。別途記事に反映させたいと思います。
これで苦手な Photoshop の質問は来なくなるでしょう(笑)。

[2] Posted by yujiro : November 30, 2006 5:46 PM

採用いただきありがとうございますm(__)m (笑)
影の付け方は、ブログデザインによってさまざまなように、
フォトショの使い方もさまざまなので正解はないので、
いろんな切り口があって面白いですよね。

……とか云っておきながら、最近アプリケーションのバージョンアップの速度に
なかなかついていけないのですけれど(*^_^*)

[3] Posted by yuki。 : December 3, 2006 2:42 AM

この度は、いつも以上にご足労おかけしたようですみません! 画像の方もエントリーして頂きありがとうございます。 早速とりかかっていますが背景色がグレーの場合とか貴Blogのようにエントリーの両脇にも影を作りたく思いまたまた試行錯誤しています。
しかし、この度はわかりやすくエントリー頂いたので大変助かりました。ありがとうございました。

[4] Posted by panser : December 3, 2006 3:21 AM

>yuki。さん
こんばんは。
またなにかありましたらご指導ください(笑)。

>panserさん
こんばんは。
両サイドにつくる場合は上記の工程を異なるファイルで2つ作り、それらを横長のファイルに貼り付けると良いでしょう。

[5] Posted by yujiro : December 4, 2006 11:26 PM

ありがとうございます! なんとかエントリーの両脇に影をつけることができました。 それでまたまた今度は、Blog全体の背景を画像などで表示させた時に影をうまくつける浸透させる方法はないものか?と試行錯誤しています。Photoshopで作成の際、影の背景を画像模様にできればうまく浸透できるんでしょうけど その方法が・・・・?
これができれば結構いい感じになるんでしょうけどね(^^♪ ほんと難しいですね

[6] Posted by panser : December 5, 2006 5:00 AM

>panserさん
こんばんは。
「影をうまくつける浸透させる方法」の部分が不明ですが、「画像を透過させる」ということでしょうか?
すいません、文言の意味が理解できておりません。

[7] Posted by yujiro : December 8, 2006 4:06 AM

説明が不充分ですみません。Blog全体の背景を色などを使う場合は、影をつけて背景色にあわせてなじます事はできるのですが背景を画像などを使った場合影と背景がうまくなじみません。影の画像が単なるライン状になってしまいます。具体的に表現しにくのですが
参考に下記URLのような背景と影との感じにしたいのですが・・・・
ただ、少し疑問に思うのは下記BlogはIE6ではうまく背景画像が表示しないようです。
Mozilla Firefoxでは、背景画像が表示しております。ということでMozilla Firefoxで表示している背景画像と影との感じにしたいと思っています。
ただ、このBlogのようにブラウザーで不具合がおきるようでは困りますけど・・・・・

http://siesta.co.jp/nat/archives/001270.html

[8] Posted by panser : December 8, 2006 9:32 AM

>panserさん
こんばんは。
ご質問の件ですが、そもそも背景画像とドロップシャドウは1つのファイルに合成したものをCSSで設定、という認識ですが、合ってますでしょうか。

つまり、Photoshop で背景となる部分に背景画像を設定し、その後に光彩を設定すればうまくできそうな気がします。
その上で「IE6で正常に表示されない」という不具合につきましては不明です。
それではよろしくお願い致します。

[9] Posted by yujiro : December 10, 2006 3:16 AM

こんばんは。
Elementsでも作れるのでしょうか

[10] Posted by kotorihazumi logo : July 14, 2013 10:19 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)