Create your own blog background

As graphics are a big hobby of mine, I thought I would create a blog to share some of the things that I've learned while playing around with Photoshop and Illustrator and other Adobe programs. I think a fitting start will be "how to create your own background" and I'll follow it up with creating a blog foreground which is pretty much the same process. Making your own backgrounds and foregrounds will let you break free of the standard template look.

First, I need to admit that I'm not the best coder of html, but I know enough to get into trouble, so when it comes to actually coding, I use the trial and error approach most often until it works. That being said, I think the easiest of the "blogger" templates to change around is the "Minima" style. So before you do anything, it would be good to pick a minerva style from the template list.

Once you have done that, you can open up illustrator or photoshop to make your new graphics.

Backgrounds
1) You can make small graphics that repeat in the x (horizontal) and y (vertcal) direction and tell the code to do so. So you need to picture the design or pattern you are looking for and then realize how it will look when it multiplies across the screen to the right and down.

• Background Width: I usually like to make a canvases about 1000 or so pixels wide as this will cover up the majority of monitors. This typically will make a nice wrap size for the foreground where you write your blog which, in minerva, is 660 pixels. I like to make backgrounds a full screen wide because I prefer the fluid look of gradients to the checkered effect you get from repeating a small graphic horizontally, but you can also get some cool effects playing around with small graphics patterns that propagate horizontally too. You can test how it will propagate by making it your desktop background and set its position to tile.

• Background Height: Vertically, you typically only need to make the graphic as wide as the pattern needs. If you create a fluid gradient that changes horizontally over the 1000 pixel width, then you really only need about 4 or 5 pixels the vertical direction because this will propogate in the vertical direction repeating endlessly creating a solid looking background. Now, if you have a patter that has vertical strokes or marks that are larger than 4 or 5 pixels, then you'll want to make your canvas taller to accomodate. Sometimes you might even want to make it page size of up to about 1000 pixels vertically. The only downside is that it may take a bit longer to load than the thin 4 or 5 pixel graphic.

• Another option is to just use the Settings menu and change the background color to a color you like and then just use that solid color as a backdrop for your graphic foreground. This is what I did with this Elgan Art blog. I chose a black background and then just created a graphic foreground.

2) Once you decide what you would like to make and created a canvas size you like, then you can play around with gradients and other tools to make the backgound look as you wish. I like to use simple or complex gradient colors and then play around with the filters to get neat effects. In these examples I created in illustrator I used the gradient tool first and then applied a water paper sketch filter.




In both of these examples I went a bit overkill in the vertical direction, I probably only needed to go about 50 pixels or so to capture the pattern effect correctly, but it doesn't hurt really either way unless you still use a dialup connection.

3) Insert your new background graphic into your blog. Now that you have created your background graphic you can upload it to your own FTP site if you own a website or know someone that does, or you can load it into photobucket.com or something and then just copy or write down the direct link to that photo so you can link to it later. An easy way to get the link is to right click on the picture and go to its properties and you will see its address link in there. Once you have your picture on an FTP site or on a picture sharing site, then you are ready to put the link to that picture into your blog code. Now again, don't get scared by the word "code". If you can cut and paste-- you can code.

(Note: the following instructions are specifically for the minima template)

You go to the layout tab in your blogs customizations and then click on the "edit html" tab and then find the line of code that looks like this:

body {
background:#ffffff;
margin:0;

Ok, now all you need to do is paste or type in the red text below as shown between the background line and the margin line ensuring NO SPACES and substituting your picture link from your FTP or picture site for my yellow link. I left "elganart.com/blogger/background.jpg" in there for example only.

body {
background:#ffffff;
background-image:url(http://elganart.com/blogger/background.jpg)
;background-repeat:repeat-xy;

margin: 0;

Ok, that should do it. Click on the preview button to make sure it worked and if you don't see your background then make sure you typed or pasted in the correct link to your picture. A good way to check is to paste the link into your browser address bar to see if your graphic comes up that way. Then be sure to "save template" when you are finished to lock in the change to your new template.