How to Make Your Own Scrolling Blog Background

Every blogger wants his or her blog to stand out from the crowd. This means stepping away from the generic blog templates that get you started. A couple of weeks ago I was surfing blogs and noticed a few scrolling type blog designs made by The Cutest Blog on the Block. The many designs were indeed cute and placing the backgrounds on the blog involved only the of a simple script. Adding the background in this method meant you would not lose any of your sidebar information which was a real plus. However, I saw two immediate problems for me. First I wanted to create and use my own designs and second by using one of their designs the script pointed to their Photobucket Album which meant if they closed that album the background would immediately disappear. So I wanted control of where the background was. With all this in mind I set about making new backgrounds for my blogs with the exception of my cooking blog that is using one of their designs temporarily [now my own © design].

I'm always looking for ways to use Photoshop® so as soon as I saw their backgrounds, I knew I could easily make my own. Making your own scrolling background and customized headers are easily done using Photoshop®, Photoshop Elements® or Paint Shop Pro®. This technique can also be used to create custom made backgrounds and elements for digital scrapbooking. I'm going to give you the basics of what I did so you can see how easy it is along with the script needed to install the background in Blogger. Their instructions said you set your template to Minima but I got my backgrounds to work using Rounders 2.

Background

Note: This background is © Garden Gnome and is for illustration purposes only. Please do not copy.

The first thing I did was to determine the necessary sizes by opening one of their backgrounds. After that I was on my own. Note that creating the background uses layers so when saving save as .psd file for later modification and as a .jpg for using as the background.

Create a new image 1450 x 1100 pixels. This will be your main background. Fill this layer with white. Create a new layer. Fill this layer with a pattern of your choice from the pattern selector. In this case I used a basket weave pattern. Create a new layer and fill this layer with the colour of your choice. I used a red that I liked using the colour picker. When you decide on the colour you want write the colour code down so you can co-ordinate other elements on your background, header and blog. Adjust the opacity on this layer to get the effect you want. Create a new layer and click on gradient overlay. Draw the gradient from top to bottom and adjust the opacity to get the effect you like. Leave the image open and create a second image 795 x 1100 pixels. This will be the panel where your header, posts and sidebar appear. Fill this layer with the colour or pattern of your choice. In this case I chose white and adjusted the opacity to the desired effect. Save this image as a .psd file for further modification. Merge the layers then use the move tool and drag the image onto the maid background. Centre the panel. Add a drop shadow to the centre panel adjusting as desired. Using the line tool create a line 20 pixels wide spanning the entire length of the centre panel. Fill with desired colour. Bevel and emboss as desired. Duplicate this layer. Use the move tool to move the duplicated layer to the other side of the panel. At this point you can now add any further embellishments you desire using additional layers. I chose not to add any but if you check out my personal blog you can see how I added a ribbon I made and use that as a guideline for placement. Other embellishments such as flowers, buttons and etc. can be found on a lot of scrapbooking websites or you can make your own using the shape tool.

Very important: Save your file as a .psd for Photoshop® and Photoshop Elements® or as a .psp for Paint Shop Pro®. This will preserve the layers so you can later modify any layer you choose to create a new background. Save the file again as a .jpg for uploading to a photo hosting website. If using Photobucket, upload the image at the 1 meg setting.

To install your background, upload it to a photo hosting site such as Photobucket. Copy the url location. Paste the location into the following script and save. Open the layout tab of your blog in Blogger. In the top header section, click on add a gadget. Click on html/javascript. Copy and paste the script into the box. Click save then preview to see your new, custom made background then click save.

Here's the code you need to install the background on Blogger:



Header

Now that you have made a custom background you can make a custom header. This is also very easy to do. Create a new image 700 x 300 pixels. You can leave this transparent if you want to use the background colour of your blog. If left transparent, the final header should be saved as a .gif and uploaded to a photo hosting site then placed on your blog using the header tool on your layout and the url. This will preserve the transparency on Blogger. In this case I used the colour of my blog background that came from the lightest pantone of the red. To get to the pantone I put the colour code of the red into the colour selector then clicked custom to bring up pantone. The border was created using stoke with the red I wanted. Then I duplicated the layer and used the marquee tool to outline the inner section and deleted that on one layer. This created the red frame. Then I inversed the selection to work on the frame and used the bevel and emboss style to create the raised effect. To get the vellum effect I created a new layer and used the marquee tool to create a smaller rectangle. I filled that with white. Then I used a fuzzball brush to go around the edges and added a drop shadow. I used the font brush script to write the title of my blog then beveled and embossed it and added a light drop shadow. Save the file as either a .psd or .psp as well as .jpg.

To install the header: Go to layouts, page elements for your blog and click on header. Click on add picture from your computer or you can choose from url if you uploaded to a photo hosting website. Click on your header file .jpg. In a couple of seconds you should see your header. Under placement click instead of title and description then click save. Hit preview to see how your new blog header looks. The blog header background will still be present around the image. There are three ways of dealing with this. The first is the easiest by just leaving as is. The second method is to go into layout then html and expand widgets. Change the background colour as desired. The third method is to delete the header background

I hope you found this method useful for creating your own uniquely designed backgrounds and headers for your blogs. If you use this method please leave a comment with your url so I can see what you came up with.


Garden Gnome
©2006-2008

The Dryer Vent Dilimna

If you have been following this blog you will know that we bought this house in 2007 so last winter was our first winter in this home. All of our renovations for this home are reflective of the importance of saving energy. As with the other homes we have owned the first priority was sealing to make the house more energy efficient. In today's economy this is even more important in terms of energy savings but this is not the only reason. It is very important to do whatever we can to reduce our carbon footprint.

Our laundry room is in between the family room and furnace room on the lower level of the house. Last winter I noticed that our gas dryer was abnormally cold when not in use. Since our dryer was less than a year old and an energy efficient model I knew the problem had to be the dryer vent. The dryer vent is not exactly in a convenient location but once we remove the brush it will be fine. Upon investigation we found an old dryer vent cover that was very brittle with half of the cover missing and the flap barely working. This vent cover obviously needed to be replaced but we wanted to do an energy efficient replacement.

A quick online search showed us that there were energy efficient vent covers on the market. We opted for the Broan® EcoVent because of its design and the fact that it was Canadian made. Our winters are cold so we felt that a Canadian company understood the problem that normal vent covers tend to be drafty. At the same time while some are designed to keep rodents and larger insects out, smaller insects can still get in.

Pictured is the Broan® EcoVent as compared to a normal dryer vent cover (1, 2, 3). The first thing you will notice is the size. The EcoVent is larger because it is insulated and the plastic is heavier! That means there is a lowered conduction of cold air from the vent cover to the duct. The second thing you will notice is the ball (1, 3). The floating ball check valve creates an airtight seal with no back draft. When the dryer is turned on the exhausting air will cause the ball to float up, opening the vent so the air can exhaust outdoors. When the dryer is finished exhausting the ball will fall back into its resting position preventing air leakage. Unlike other vent covers the Broan® EcoVent is noiseless even in strong winds so you won't hear any flapping either. We also opted to change out the existing vent pipe for a thicker walled one (4) meant to go with the Broan® EcoVent but this was optional.

The first step for preparation was removing the remaining vent cover and the existing vent pipe. This was actually a bit more work than anticipated. We used a large flat head screw driver to bend the pipe on the outside and on the inside then tapped it out. We were left with a clean opening outside and inside.

After the old vent cover and vent pipe were removed we cleaned up the old caulk from the outside wall. Inside there was very little clean-up but you may find a bit more clean-up if you decide to do this project. There should be no caulk on the inside wall around the vent exit. The reason for this is practical both in terms of access and redecorating. Instead the vent cover should be properly caulked on the outside making it airtight.

Our installation was on an existing concrete wall just above grade. Now ideally with our snowfall this is not the best location however, this is in a very protected location that has very little snow accumulation. In locations where snowfall could be a problem the dryer vent should be located at least 3 feet above ground level. My husband drilled pilot holes in the concrete (5). The vent pipe was put into the vent cover, secured with self tapping screws and then sealed with caulk. Then a heavy bead of concrete caulk was placed around the inside perimeter of the vent cover (6). The vent cover was attached to the vent opening using concrete anchors (7).

The installation resulted in a clean and neat outside appearance. In our location it really wouldn't have mattered what the installation looked like but really if you are going to do it, do it right. Make it look neat and tidy even if you are the only one who will ever see it. On a scale of 1 to 10 this project would rate a 10 as far as easy installation for anyone with the proper tools. In respect to energy savings this project would rate a 9 or a 10 depending on the location.

Garden Gnome
©2006-2008

We Remember

I come from a strong military family with ancestors that were instrumental in shaping the history of Canada. I grew up surrounded by relatives who had fought for this country. Some of them made the ultimate sacrifice and while they are no longer here they live forever in our memories. If this video does not bring tears to your eyes, nothing will. On the 11^th hour of the 11^th day of the 11th month we honour our fallen with 2 minutes silence from shore to shore of our great nation, Canada. Please join our nation in showing our respect and how thankful we are for enjoying the freedom they fought so hard for.

Remembrance Day Tribute

courtesy of
Global TV Edmonton

Garden Gnome
©2006-2008

Garden Gnome
©2006-2008

Updating

I'm have been in the process of updating all of my blogs. This blog is the youngest so is last to be updated but not so much for that reason as much as I really am struggling for the look I want for this blog. The only thing I know is I will make a custom design using Photo Shop CS based on scrapbooking techniques. So over the course of the next few days you will be seeing a lot of strange things going on mainly because I really am flying by the seat of my pants here. I will post updates of the progress and let you know when the update is complete. Thanks in advance for understanding a putting up with the mess.

Garden Gnome
©2006-2008