Tuesday How To: Creativity & Coding

I like change, I really do. Everything from my wardrobe to my interior design regularly fluctuates. I've moved more times than I can count, and I've lived in 4 different states just because I could. I've been known to repaint rooms yearly. I am not one of those women who thinks designing/decorating/fashion is ever "done." Its why I do so many different crafts & projects. Well, that & I get bored easily, love to learn new things, and don't get emotionally attached to things.

Anyway.

I've been wanting to figure out how to design my own blog backgrounds so I can change them up & personalize them as I so desire. I had been using some great sites to find free backgrounds: Shabby Blogs, Hot Bliggity Blog and The Cutest Blog on the Block are good ones & I even looked in to having one designed-- but again, I wanted to be able to change it out, and my blog isn't generating income, so there was no point in investing the sort of cash that numerous blog designs would require.

And therein began my quest.

As I was saying yesterday, I am by no means a master at this. I'm not hugely invested in the background I've created. It has a nursery school vibe that I don't dig-- too pastel. I like things colorful & cheerful, but it came out a little too...twee. If you follow. I got too excited & tried to do it all at once. I figure its best to leave it sit for now & take some time designing a new one for the spring.  Yeah.  I went ahead & redid it.  I'm such an instant gratification type... 

Anyway.

I did figure a few things out that I want to pass along.  Its actually fairly straight forward. The most time consuming part is designing & creating the background itself.

You can create your background using whatever program you use for photographs. I actually picked up Photplus X4 on sale {Serif has launched X6) and used it to create the background images. As I've said a couple times, I usually use PowerPoint to create images, but for the background I wanted to be sure to keep everything crisp, & a program designed for photo editing seemed the logical answer. I paid around $40.00 for it a few months back, and obviously it has applications beyond web-page-background-design, so the expense was justified~*
I'm not going to walk you through the designing process {though I'd be happy to answer any questions you might have} because it would vary according to what program you use.   Most photo editing software come with tutorials-- take some time to run through them.  They won't take too long, and it will save a lot of time later on.

While I won't be specific about how to create designs, I will pass on a little generic advice:

1. Digital scrapbook sites are a wealth of papers and embelishment designs perfect for blog decoration. I used Pixel Scrapper, which uses a credits system-- you are given a certain amount of credits just for signing with which you can download items. They offer both commercial and personal use-- the number of credits an item costs varies accordingly.  You can get more by liking designs, posting about yourself & so on or you can opt to buy credits. 

2. The average computer screen in April in America in 2012, according to 247 & Statcounter was 1366 x 768 pixels.  I haven't found a more recent survey, so I'm going with that.  Create your backdrop to be 1366 x 768 pixels.  That said, I set mine at 1600x900 because that is the resolution of my computer & I have to look at it all the time & its all about me after all lol.  

3.  The portion of the background where your posts will go can be whatever size you like.  I tend to like mine wider, but if you prefer it more narrow, whatever makes you happy.  You can adjust column and layout widths in blogger by clicking on Template, then  Customize, then Adjust Widths.  You can tinker with them to make them fit the design you create.

4. For reasons I am unclear on, Google+ kept re-sizing when I tried to upload my background to it. I'm not sure if this is inherent to Google albums, or if it is a mistake on my part. I tried to figure it out, but then gave up. Did I mention I get bored easily? I used ImageShack instead. They offer free storage, though ads may pop up, or you can pay a monthly subscription fee, $2.00 a month for basic, up to 10 MB storage. Since that is literally the price of one cup of Starbucks coffee sacrificed per month, I figure it was cool & went ahead & signed up month-to-month. If I ever get Google+ figured out, I may change-- though I do like the user friendliness of ImageShack. When you upload, be sure to click "Do Not Resize."

5.  Save your images as .png, not jpegs.  They come out clearer & crisper.  Which I discovered entirely by accident.  Sweet!

Now for the easiest bit.


Just as with the button design, click Layout:

Now if you've already added a blog background from a site outside of blogger, I recommend you copy it & past it in notepad or whatever software you use to paste things in :).  Then paste the new code in its place. If used a blogger background, you'll need to create a new HTML/JavaScript Gadget. Add a Gadget:

Now here is the code you'll want to paste:

<style type="text/css"> body { background-image : url("INSERT DIRECT LINK HERE"); background-position: center; background-repeat: no-repeat; background-attachment : fixed; } </style> <script type="text/javascript"> var div = document.createElement('div'); div.setAttribute('style',"position: absolute; left: 0px; top: 30px; z-index: 50; width: 150px; height: 45px;"); div.innerHTML = '<a target="_blank" href=" "></a>'; document.getElementsByTagName('body').item(0).appendChild(div); </script>

Where it says INSERT DIRECT LINK HERE post the url of the background image you uploaded.

Hit save & take a deep breath & click Preview {in the upper right corner}.  Don't panic if it doesn't come out the way you'd like, you can always delete the code, paste your old code in its place {or return to the original layout you used} & start again!

Please let me know if you have any questions!  Remember, its your blog-- it can look however you want.  Just through up a quick post explaining to your readers that things may be getting freaky, & go to town!  If you do change your background, please through me a comment with your blog address-- I'd love to check it out!