Wednesday, May 26, 2010

CoffeeShop Drop Shadow Blog Background!

I have had so many people ask me how I add a drop shadow background to my blogs. Well, here is the tutorial!

This is a simple colored background with a white drop shadow area behind your posts. You can download it HERE and follow along with the tutorial.  This file has two layers and can be opened in Photoshop or Photoshop Elements. The bottom layer is a simple color fill layer and the top layer is the white drop shadow area that goes behind your posts.


This background white area is perfect if you have the standard 2-column Blogger Minima template installed, but it will be too narrow
if you have a different template.  If you don't know how wide your blog is, just go to Layout, Edit HTML and look at your template code (don't worry about explanding widget template).  Find the code seen below in your Outer-Wrapper and note the width.  This will tell you the minimum pixel width you need for your white drop shadow background.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Click on the top "post background" layer on the background you just downloaded and then click Ctrl-T (to free transform) and then drag the sides of the white drop shadow to the final width you need. 

If you don't see a ruler on top, simply go to View, Rulers and make sure your ruler preference is set to pixels (Edit, Preferences, Units and Rulers).  Make sure the tiny middle box on top (circled on my screenshot below) stays right under 1000 so your background will be centered correctly!  If you are using Photoshop you don't have to hold shift because you don't need the height to change the same percentage, and if you are using PSE just drag and don't worry.  :-)

I made this white background 1000px wide and made sure it was centered.


Now you might want to adjust the drop shadow settings.  Simply double click on the little icon by Drop Shadow (or the fx on the top layer if you are using PSE) and the little box seen below will pop up.  All I adjust is the Opacity, Distance (I keep it at 0 for blogs), and Size (this setting depends on how dark and obvious you need your shadow).   Then click OK. The first screenshot is from CS4 and the second is from PSE.


Now you can simply change the color that goes around your blog and you are done! Simply click on the little colored box on the "Background color" bottom layer and adjust the color to taste as seen in the screenshot below. Then click OK and you are done! Flatten and save your new background as a .jpg.


Finally, you will want to install your new blog background with a drop shadow! These instructions are for Blogger only. :-) Upload your new flattened background to ImageHost and copy the Hotlink (the last link on the bottom). Then copy the code below and add it anywhere on your blog's Page Elements as a html/javascript gadget. I usually put this on the bottom so I can find it later. Then replace the # in the code with the Hotlink you copied and save the gadget. Your new background should be installed!


<style type="text/css"> body {background-image: url"#"); background-position: top center; background-repeat: no-repeat; background-attachment:fixed; }</style>

You might have to go back and center your white area (using Photoshop) if it seems off. And this background will not work with the Blogger Stretch templates.  If you want a black or colored background behind your posts just change the color on the layered file.

My next tutorial will show you how to make a lovely custom textured background with drop-shadow as seen below. I used a free paper from Pixels & Ice Cream on this background.

6 comments:

  1. Thank you so much!! I just tried it and it actually worked for me! I did try saving it as a .png at first and it didn't work so when I tried .jpg it did work! Thank you so much!

    ReplyDelete
  2. I did you tutorial to make my blog wider and also added the "blog wrapper" color to my HTML code. Do I need to delete that in order for this drop shadow to work? I doesn't seem to be working for me.

    ReplyDelete
  3. Anonymous, you shouldn't need to delete the blogwrapper code from the Outer-Wrapper, but make sure that your background's dropshadow is slightly larger than your blog so that you will see it. Otherwise it will be hidden behind the outerwrapper! Rita

    ReplyDelete
  4. For some reason when I posted the code in my html gadgets it left the entire background white. Any suggestions about what I may be doing wrong?

    ReplyDelete
  5. I just redid my background and this time it made mine all white. When I inserted the code from imagehost into my background code in the Edit HTML section it worked.

    ReplyDelete
  6. Why couldn't I make this work? Bummer. I tried to use Photobucket instead of that other place as image host...is this why? The one you metioned said site closed. I've used photobucket before and it worked...???HelP! Thanks.

    ReplyDelete

Thank you for taking the time to leave a message, I love reading them! All comments are personally moderated by me and I will post and answer them them as soon as possible.
Rita