Monday, October 26, 2009

Blog Updating

I have no idea why I got the idea recently to re-do the blog layout and background. I really can't even remember where it all started! But, I wanted to put together a little collection of all of the places I learned to do all of the things I did! There are so many helpful tutorials in so many different places that I figured if you were interested in re-doing your own blog, I have all of the resources! (Plus, when - notice it's not if - I decide to do it again, I'll remember where all of the information is.)



First thing you need is a image editing program. Most people use Photoshop, but since I don't have the money to pay for a real version of Photoshop, my wonderful brother told me about Gimp. This is a program, similar to Photoshop and it's completely free! I do have to say it takes some getting used to and navigating practice. I'm not a photo editing freak or anything, but there are so many different ways to change a picture and add things. It amazes me. There are lots of places on the web that provide tutorials on how to work gimp. I know some basics, so if you need a little bit of help, I can probably guide you in the right direction! But everything I know is from googling "how to _____ in gimp"! :)



Next, you need find what you want your background image to be and your theme. I have learned it is much easier to just have a color behind the blog text, not a design. This is all because of the images you use to do all of the other stuff and still make it look pretty! I learned from my brother that JPEGs don't let you do transparency, and GIFs don't let you do shadows, so in order to get both of those things on your blog, I would just use a color as the background and save as JPEG. It really will save a lot of time in your perfecting process. I found most of my backgrounds that I loved at Shabby Princess and Kevin & Amanda. I just searched for free digital scrapbook kits and found lots of places. I tended to lean towards these 2 styles, but there are lots more out there!



You also need to find some fun fonts! I found some really cool fonts at many different websites, but my favorite site is from Kevin and Amanda. If I had really fun handwriting, I would definitely have her do my font, but I don't, so I got to find lots of cool handwriting from all kinds of people!



Once you've made all of your selections, you can follow this tutorial from Amanda to learn to make your own background.

I also made my header at the top with Gimp. I kind of took Amanda's idea from her site, and just used the coordinating pages from my background to make mine. I put beveled and round edges on my shapes after cropping them to the appropriate size (I made my entire header picture 600 x 400.) I figured out that it's easiest to scale it down to where the paper is the same width (600 pixels) and then I cropped the section I wanted out of it. This kept everything in proportion. Once again, since GIFs don't like shadows and JPEGs don't like transparency, I choose to use the background color of the main text area and then saved as a JPEG.

While you're in Gimp, you can also make cute little buttons for your side bar as well if you'd like. I used this tutorial to get me started with putting them on the page. Once I figured out the HTML coding, I was able to do the rest of the side bar categories as well. The only one I had trouble with was the "Blog Archive". I had to just piggy back an extra widget on top of the blog Archive with he picture I wanted and then made the Blog Archive widget without a title. There's a little more space in between them than I would really like, but it works, and it looks fine! (I think I'm the only that bothers anyway!)

I also didn't like the lines in between the side bars, so I got rid of them by following this tutorial. I pretty much did the same thing for the border around the header. Once you get familiar with the HMTL coding, you really start to figure out these things on your own as well.

I added a divider in between posts using this tutorial.

I added a signature to every post using this tutorial.

I added the cute fonts to the titles using Amanda's help here.

I think that's about it. Just some pointers from different things I learned:

  • Figure out what the maximum dimension your picture can be (pixels, not MB) and go at least 100 pixels less than that (for instance, if your header can be 600 pixels wide, make it at the most 500 pixels wide)
  • The more you add, the more time your site takes to load
  • Save your original template with all of the layers as a gimp file first (unmerged), then save it as a merged file (JPEG) so you have both copies to work with.
  • Make sure when you edit a picture size, you keep the proportions connected. Otherwise it turns into all kinds of fun....

I hope someone else takes a leap into making their own background! But if anything, this will have a place for me to come back to in order to do it again! :)

Enjoy!

No comments: