Make a Custom Seasonal Background for Blogspot/Blogger Blogs using PhotoShop

Literally HALF OF THE STAFF at CraftyGirlSquared and the ENTIRE STAFF at JuBee's Craft Box have been asking me to make a tutorial of how one can make a holiday themed background using Adobe PhotoShop.

I don't know how many of her, er um, I mean their fans, are using PS, but here it goes anyway.

By the way, I'm using Adobe PhotoShop Creative Studio 4 64-bit Edition, so your results may vary if you're on a different version.





PART ONE: MAKING THE IMAGE FILE

Start by making a new document. File - New. 

Fig. 1

A dialog box will appear. I think the default PhotoShop settings will work well for this, so that's what I will select. 

Fig. 2

Fig. 3

This should give you a document with dimensions of seven inches wide by five inches high, and a resolution of 72 dots per inch. Then click OK.

Now that you have your document SAVE IT! You can click File - Save, or press and release [alt] and then [f] and then [s], or my personal favorite, press [ctrl]+[s] simultaneously. Now you don't have an excuse for not saving your work as you go. Do it often. If you're following along this  tutorial, then save after each and every step.

Fig. 4

Now that you have your document, go on over to layers and make a new one. For me, that's in the lower right corner. (See figure four)

Fig. 5

One of the nice things about CS4 is that, like many other versions of PS, it comes with some custom shapes, similar to the ClipArt you find in Microsoft Office. To access these, right click the Rectangle tool, and select Custom Shape from the menu that appears.

Now, up at the top, you'll find the menu where you can select your shape. (See figure six)

Fig. 6

Go through and select whatever shape you want. Since I'm doing a winter theme, I'll select the pine tree, and some snow flakes. Once you have selected your shape, you'll have to "draw" it into the new layer you created. Drag the mouse cursor on your document to make the shape.

Fig. 7

Now I've got a little pine tree. I'm going to make a new layer, and select another shape, and do it again. One shape per layer. Over and over until I'm satisfied. 

You'll note that every shape comes out black, and this is totally fine, as we're going to change that, but we should select a background color first. Light blue. Make yet another new layer, type 0000ff into the little text box at the bottom, and then use the Fill function to make the entire layer your selected color.

Fig. 8

Fig. 9

Now with your background color layer selected, click Edit - Fill... or press [shift↑]+[F5] (That's the F5 key, not the f and 5 keys.) to open the Fill dialog box. For the purpose of this exorcise, just make sure that the dialog box looks like this one, and then press OK or [Enter↵]. (Some keyboards don't have that key, but instead have a [Return↵] key instead. It's the same thing.)

Fig. 10

The result is going to be a very deep blue, not at all what we were after. Head back over to the right side of the screen, and make sure the BG Color layer is still selected (highlighted blue). Below the layers are some buttons. Click the one that looks like a circle that's half black and half white. It's kind of like the cookie from that episode of Seinfield. Or those aliens from Star Trek. Or the Tao. Or maybe even a circle that's half white and half black. It's called the adjustment layer, and it will open a little context window. Select Hue/Saturation. You will see three sliders with text boxes next to them. You'll want their values to be:

• Hue: -62
• Saturation: 0
• Lightness: +61

Make sure the Colorize check box is NOT CHECKED.

We're doing this to make the blue a different shade. "Why didn't we just select that color to begin with?" you ask. Well, if we decide we want to change the color later - maybe for a future project, or maybe because we just don't like the way it looks - we can just go back into that adjustment layer and change the settings. Then, if we decide that we really did like the way it looked originally, we can restore the settings.

Fig. 11

Now that we have the background color, let's change the colors of the tree and snowflakes. Double click the layer with the tree in it. The Layer Style dialog box (Figure eleven) appears. Select Color Overlay and your tree turns red. Click the red box, and type 00ff00 into the text box for pure green. (Figure twelve)

Fig. 12

 Click OK to get out of the Select Overlay Color dialog box, and in the Layer Style box, if you'd like a little extra pazazz (Yes, I said pazazz), check the check boxes for Inner Shadow and Satin. Click OK again to close that box.

Now you'll be repeating the same steps for the snow flakes. I'm going to use white when I select my color. That's ffffff - six letter [f]'s, to type into that little box.

PROTIP: In the Layer Style dialog box for each of your items (in this case, the tree and three snowflakes) check the check box for Drop Shadow and/or Contour to make your items pop out a little more.

So far, we just have four items in our image. We want to rearrange them, move them up or down, make them repeat, and maybe re-size them. I'm going to keep the tree and the third flake their original size, and make the first and second flakes smaller.

To move your images around, select the layer that they're in, and press [ctrl]+[t]. You can now drag them around with the mouse cursor. You can also right-click and select things like rotate or scale to turn and re-size them. When you need another tree, select its layer, right click, and select Duplicate Layer. You'll see another layer pop up, but you won't see another tree until you move it around like you did with the other items.

NOTE: Once you have your item where you want it, you have to press [enter↵] or [enter] before you can do anything else.

Here's how it looks before and after I've made all my changes:

Fig. 13b

Fig. 13a

Fig. 14

Now we're going to "Publish" the image. Click File - Save As... and in the dialog box that appears, select JPEG (*.jpg) and select OK. Figure Fourteen shows the JPEG Options dialog box that appears. You'll want to move that slider until you get the biggest possible size that you can work with. I set mine to 12, the largest possible file-size setting, and this gave me a file-size (or weight) of 148.3kb. That's a pretty small file-size, so we'll use it. 

Now that we have a JPEG file, we're going to open that with PhotoShop. This can get a little tricky, so save and close the PhotoShop file (*.psd) that we were using. Next, open the JPEG file that we created. You can see that the pattern is a little too small for the background, so were going to use the crop tool to fix that.

Fig. 15

Select the area that you want to keep. You can make adjustments by dragging the little white boxes. Once it's to your liking, hit enter. (See Figure Fifteen) Click File - Save As... and append the word "CROPPED" to the file name, and save it as a JPEG using the same procedures as above.

Finished Product

Okay, that was the easy part.

PART TWO: PLACING THE IMAGE FILE IN YOUR BLOG

In order to get your image onto your blog, you'll have to trick Blogger. Blogger does not have native support for custom anything, really, but it does allow you to do customization through editing the HTML source code. You can edit the HTML of your blog's "template" to make the background image an image that is hosted publicly on the internet somewhere. So, assuming that you can host a public image online, you can do this. 

So how do you host an image publicly? Well, you're using Blogger, right? Post your image on a blog post. Maybe you could have a blog post that you edit and add to every time you get a new background image. Or perhaps you could make a new "page" on your blog for just background images. But I don't really like those ideas. Personally, I would host an image on my website, but not everyone has their own website. You can also use Picasa since if you have a Google account, like the one you use to log in to Blogger, you already have a Picasa account. TwitPic, PhotoBucket, Facebook, DeviantART, these are all options too. As long as the PUBLIC can view the image, it will work.

In this example, I've uploaded the image to Picasa. 

Fig. 16

You'll want to view the full size image, right click it, and select "Copy Link Address", or equivalent. Paste that into something like Notepad so you don't lose it. 

Fig. 17

On the front page of your blog, click Design, then Edit HTML. Click into the text box area where you can type your HTML code, and use your browser's "find" function to search for "background". In Figure Eighteen below, you can see the "URL" line has been highlighted. We need to have that line with the image address that you copied into Notepad. 

Fig. 18

Just replace the old URL with the new URL. 

Click SAVE TEMPLATE and then go to your blog's main page. If it doesn't look different, then press the [F5] key to "refresh" the page, or click your browser's "refresh" button. 

Viola!