Create a Blog Style Background

for Dogster and Catster from Scrapbook Kits

Introduction  |   Removing the Frame  |   Simple Profile Backgrounds  |   Add a Banner or Two  |   Faux Frame Style  |   Making a New Frame

Starting Out

These instructions are for those who have access to image editing software such as Photoshop, Paint Shop Pro, GIMP, etc. Most any image editor will do.

The first thing you need to do is pick out a scrapbook kit. There are TONS of these on Internet. What's even better there are thousands of FREE ones available. One of my favorite places is http://www.digiscrapdepot.com/ for free kits. Just click on the "Freebie" tab then on "Theme Kits" on the left side and start searching for something you like.

The pictures of the scrapbook kits are called previews and show the papers and elements included in the kit. Kits may contain 3 to 20 papers and 3 to 50 elements. Papers are images very much like backgrounds and most likely to be 3600 pixels squares used as a base to hold your elements. An element is anything such as ribbons, flowers, buttons, frames, decorative alphabets and other decorative items. Here are a couple of scrapbook kit previews:

           
(Note: The dimensions given are the ones you should use. All of the examples and diagrams shown here have been reduced by 40% to 60%.)

My First Blog Style Background

One of the earliest scrapbook kits I found was this simple 5 paper, 4 element one called "Purr-fect".

I use an image size of 1024 x 768 for my blog style backgrounds. This will fill the display of a 17 inch monitor which is the most common size.
This is also the size Dogster and Catster pages are designed for at the present time.

There is another reason for using this size. Many of us use the free membership to Photobucket to hold our images. The maximum size image for free members is 1024 x 768.

Note: Anytime you see an image dimension such as 1024 x 768, 250 x 100 or 1200 x 1200, the first number is the width and the 2nd one is the height.

My first step was to choose which paper to start my background with. I picked the purple one with fish and hearts. The original size was 3600 x 3600 which I reduced to 768 pixels to match the height of my finished image.

Next, I created a new image that was 1024 x 768 in size. I filled in the new image with my resized one. This particular paper happened to tile. Not all papers tile, but this isn't as important as you may think as you will be putting things on top of it.

Here are a couple other suggestions you can try to get a starting background to the finish size of 1024 x 768. Also remember only the width needs to be 1024. The height can be whatever works for you. There is no right or wrong way to do this as long as you end up with the finished size for your base.

This base was created by reducing the original image size to 1024 x 1024. Next 256 pixels were cropped off the bottom to create the finished size of 1024 x 768.

The original image here was resized from 3600 x 3600 to 1024 x 768. This squeezed the image some. The squeeze on this image actually looks good, but others may not be suitable for this method. Just try it and see what the results are.

Time for step 2, picking out my center image. I really like this one with the paw prints but it is too dark and busy.

I make adjustments to the image for the results I want by lightening it and desaturating the color some. The last adjustment is to resize the image to be the same height as my background so it is now 768 x 768.

The adjusted center image is placed on top of the background image as a new layer. Adding as a layer will center the new piece over the existing image with most image editors that handle layers. The resulting look will have 128 pixels of the purple background showing on each side of the 768 wide center.

So what is a layer? It is the way many image editors allow one image to be placed upon another without attaching them to each other. Kind of like stacking one paper on top of another to see what it looks like before gluing them together.
Layering allows you to work just that part without effecting the rest of your image. Once the design is complete, "merge" the layers together to finish the image.

 

I decided to add a border to the left and right edges of the center paper. The kit came with a cute frame so I used part of that for my new edges. Note: Anytime you see gray and white check, that represents a transparent area.

I cut out the left side then resized it be 768 pixels high.

I did the same thing with the right of the frame.

 

I put my frame sides on the same layer as the center butting the flat edges together.

I like the look of 3D so I added a drop shadow to the 2nd layer. It's not a big change. Can you see it?

 

We just finished putting the first embellishments on the background. Now it's time to add some more embellishments. I usually just guessed at the placements of these elements, but I did create a template just in case I wanted to be more precise.

The template is designed to be placed as the top layer on an image that is 1024 pixels wide and 768 pixels high. You can find this template for your use HERE.

Now if you happen to have a background image that isn't 1024 x 768, you can still use this template. There is a small 5 x 5 dot of green on the upper left corner. Just make sure that dot is in the upper left corner of your image and the guidelines will be in the correct position.

The guideline placements are as follows:
192px is the left edge of the profile area. The left edge of your uploaded pictures will start here.
792px is the right edge of the profile area, 600 pixels from left.
100px from the top is area where the logo and banner ad are located at.
165px marks the area below the logo which contains the top menu buttonbar and the search tools.
600px is for my use which I will tell you about a little later.
700px marks the bottom of the image for me. I do not want to place elements below this line. How much of the bottom of background image others will depend on how the top of their browser window is set up.


This kit came with two cool cat elements. Almost all elements are file type .PNG  since many of them have some transparent or semi-transparent backgrounds and are to be used on top of other images. Also, just about all elements are huge. These 2 cats were over 2000 pixels tall! I reduced them to be 300 pixels for my use. There is no right or wrong size, just adjust them to what you need.

Why the oversize elements? It is impossible to retain the quality of an image when you resize it to be bigger that the original. Reducing the size will not effect the quality by that much.

It's never a bad idea to make an image larger than you need then reduced it to the final size needed. It's never a good idea to make an image then try to increase the size. An image that has been resized to be bigger will never look as good as the original.

 

I take the purple cat element and add him as layer number 3 on to my background. My next step will be to move him into the position I want him to be at.

Noticed the purple cat hangs a little into the profile. This is OK as long as you don't cover the whole line from top to bottom. I want to make sure I have areas where the visitors can read what is on the right side. Final step with him was to add a drop shadow.

Time to do the same steps with the tan cat. Place her on the image as the 4th layer this time, then move her to the place I want.

I put the tan cat just above my 700 pixel guideline and added a drop shadow from her.

I have created cameo images of my cats that I place on their backgrounds. This acts like a signature or watermark for their backgrounds. Now you can see what the 600 pixel line is for. That is where I placed Velvet Rose's cameo.

My image editor has a way to save my work with the layers. Once that is finished I remove the guidelines layer and merger the remaining ones. I then save my work as a .JPG image file and up load it to my Photobucket account.

 

Screenshots of Velvet Rose's page with the above background. (Taken 2/8/2009)

The "Cool Black Cat" is a banner.
Yes, the ads cover up the stuff I put on the right side, but those will scroll up and out of the way.
Plus doesn't it make you just a little curious to see what is behind those ads?

Here is a shot about half way down the page. Now you can see the whole background.
Notice the one bio field with the label of "Background Credits".
This is where I  list everywhere I found the images to use in my background.
In this case I only used one kit plus some of my own creations.
Always give credit to wherever you find images for your background.

This last screenshot shows the area of the diary.
As you can see (or not see) there is text over the purple cat's whiskers and toes.
You can scroll the text to move it above or below those areas to a spot where it can be seen.
It is always good to make sure there are ways to make all of your text readable.

This is just one of many ways to create a blog style background for your Dogster or Catster page.
There are actually a few who have created their own style of blog backgrounds for over a year.
Look around and let the ideas flow!



To go to Pawsome Pages, click on the cat for the Catster side and on the dog for the Dogster side.