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.
