Thursday, February 16, 2012

My New Look & the Secrets of My Color Scheme

I had another post that I wanted to write today, however, I've spent every free second working on giving my blog a new look and so I wanted to share about it. I truly saved the best for last so if you can make it past the techy stuff, there are some really cool sites and apps at the end that I recommend checking out.

This month I really wanted to make an effort to learn new things about blogging. I read somewhere that when your blog has the standard blogger template then people discount it as not a "real blog."

I'm not sure if you recognize my old template...but it's like the first option in blogger's picture series and I've def seen it around town.
When I first read that other bloggers judged you based on your template, I though it was kind of silly but I guess when you are inundated by so many blogs, seeing the same background picture over and over again is just kind of blah.

So I decided that I would try to learn about customizing my template and fonts and pictures, etc. Well...there is SO MUCH to it! After trying to look through everything, I finally gave up and decided to just focus on fonts and a new background picture, as you can now see.

In case you were wondering, I got my fonts using Google Web Fonts and I got my background from Background Labs. I can't say I came to these sources with a lot of know-how, I honestly just googled it and choose the first thing that looked good (there must be a pattern developing...)

I'm going to start with the background because I literally downloaded it and uploaded it. The end.

The fonts took me a much longer amount of time to figure it out (like four naps worth!) I really didn't know you could download fonts from the internet, (apparently I live under a rock) but I've been seeing free font pins on Pinterest (like this, and this) and decided that it must be an okay place to get a font. I was a little bit nervous about just downloading some fonts and slapping them on my blog but I/google discovered that fonts are not copyrighted. I even found this awesome font site that lets you download for a donation/free and encourages their use in commercial products (good to know for your mommy business.)

WARNING - TECHY PARAGRAPH AHEAD, SKIP IF NOT INTERESTED.
Once I found my font, I had to figure out how to get it onto my blogger. Originally, I was not using google so I searched around until I found some directions, but once I discovered Google Web Fonts I combined their directions with this guy's. (Also, somewhere I learned that you need to add a "/" after the final > in the code when adding it to your HTML. I'm not sure why, but I got an error and that fixed it.) Then when you are in the "customize" section of your template, you go in to the "Add CSS" in the "Advanced" tab, (hopefully that wasn't too confusing. From their directions explain how to copy in the new code. (The sad thing is that after learning all this, I ended up just using a font in the "default web" section...that I apparently never knew existed.)

So now to the coolest thing I discovered. So I had my fonts and my new pic but I realized that now all the colors didn't really go and so I individually had to design my color scheme. I spent an entire nap trying to get all the right shades I wanted moving the dot around the really small color box...it took forever, and I eventually gave up. Until I discovered Color Scheme Designer, and Color Stream.

Color Scheme Designer is a website that allows you to select some colors on a large color wheel, move it around, and find colors that complement it. You can check out the link to my first palette here. Then they let you export to HTML + CSS, in the upper right hand corner, and it tells you all of the color code numbers! Lifesaver!

Color Stream is an app for the iPhone. It does about the same thing, however, it makes it super easy to pull colors from a photo. I used Tuesday's pic of the $2 carnations from my husband, and it will initial select colors, but you can also move the little dot along to highlight on a color you want. The number in the corner is the number that you type into the font color box in the advanced tab...yada yada.

Some other ones that I didn't play around with but that may also be equal if not more cooler are Adobe's color site: Kuler, and the iPhone app ColorSchemer.

So, thanks for letting me go on and on about this. I'll prob keep playing around with it, (so if it looks a little colorblind that might be why.) I actually liked learning about all this customizing more than I thought I would and I think this might be something for me to explore (Photoshop next?) If anything if will surely give me lots of naptime projects! I hope this helps you as well. There are so many tools out there - they really make it so easy!

Sincerely,
Jordan

P.S. - Ok, so what feature should I tackle next (header? themed social networking buttons? something else?) and where do I start!? Any cool sites I should check out to help me with these things?



 

No comments:

Post a Comment