My Favorite Resources for DIY Blog Design

9.05.2013


I've been blogging now for over 3 years, and in that time I've taught myself a whole bunch of things. Some of these things are helpful and useful in real life; others were a waste of time and will never be useful to me in real life except in blog-related situations.

Examples:
Useful: How to use Photoshop to edit photos -- Useful for real life and blogging!
Not useful: How to make a blog button -- Pretty much only useful for blogging.

When I first started blogging, I didn't know what I was doing. But one thing I did know: my design did not look anything like the beautiful tapestries of other bloggers. I tried hard, but when you don't have the right equipment or the right knowledge, you aren't going to get very far.

My first few blog headers were ugly. Oh, so ugly. But I thought they looked good because, well, because I didn't know what I was talking about. Three years later, I'm definitely no expert, but I've been around a time or two and know some things I didn't. I'm self-taught all the way, and so far I haven't paid one cent for blog design. Not that paying for blog design is a bad thing (I am very impressed with designers and artistic-type folk who can do things like that), but for me there's a huge sense of pride in the fact that I figured this stuff out all on my own. Well, pride and a sigh of relief that I didn't have to spend any money.

Of course, at the end of the day a professional designer will probably save you huge headaches, hundreds of hours, and make it look better than you could have on your own. But for the blogger/photographer hobbyist like myself who doesn't have the extra cash to spend on blog design, it can be useful to know a thing or two about how to make your blog look prettier and more professional. Because for real, The Lady Okie is all out of $ at the moment, so I needed to find out how to make a (semi)cute blog for no more than zero dollars. 

So anyway. For those of you who want to know the secrets of blog design and pretty pictures, allow me to share what I've learned. Maybe you can learn some things too!

1. Photoshop

I bought Photoshop Elements (version 11) when it was on sale at Amazon for $50. That was no joke the best $50 I've ever spent. Photoshop allows you to make fun editing actions, make photo collages, create a watermark brush (so you can easily add your logo or blog URL to photos), add text to images, and create blog buttons, social media icons, and even your very own blog header! There's way more it can do too; those are just the basics.

With Photoshop, I took my design skills from a -2 to a 3.3 (at least that high, maybe even up to a 3.5!). And I know there's still so much I could learn. So whether it's Elements, Lightroom, or the fancy version for "real" photographers, buying some version of Photoshop is the first step to taking your DIY blog/picture design to the next level.

You can also find free photo collage templates online. There are some good ones here to start with. (Also called a "storyboard")

*I'm interested to know what you guys use to edit photos/make buttons and headers. A lot of bloggers recommend online photo editors like Picmonkey for those who don't have Photoshop. I don't have any experience with that specific site, but it might be worth checking out.

2. Google/Blog Tutorials

Designers of blogs probably don't want you to know this, but you can Google almost anything and find out how to make it yourself. As long as you have nerves of steel, eyes like a hawk, and a few hundred hours to spare, you can make anything happen.

Below are a few helpful articles/posts I've used to make headers, icons, etc. 

kevinandamanda.com-- I've been reading this blog for a while now, and I love it. Amanda posts awesome recipes (she's where I discovered Cheeseburger Macaroni) and lovely photos. I used this tutorial to add a Pinterest button on my blog images. (Tutorial includes Wordpress and Blogger instructions.)

somethingswanky.com -- This is where I hit the jackpot. A few weeks ago I used this tutorial to create my new blog header using image mapping! It was super easy (well, okay maybe just easy, not super easy), and I was so excited to show Jordan my new look. This site also has more blog tutorials here. What do you think of my new header? I love it, so if you don't agree, just go ahead and keep that negativity to yourself. Pleaseandthankyou.

I don't remember the site I used to learn how to make a blog button (it was way back in the day before Pinterest was popular!), but if you Google "how to make a blog button," you will be able to find a site that will help you. Here's a good one to start with. Or you might try this one.

3. Photobucket

In order to make a blog button, header, or any other type of DIY design element, you are going to need an online image hosting site. When I first started trying to figure out design stuff, this sounded terrifying, but it's really not! I've been using Photobucket for a few years now, and I have no complaints. It's easy to use and best of all: it's FREE! 

I've also used tinypic, which I haven't had any issues with either.

4. Free Fonts

Did you know there are a TON of awesome, FREE fonts for the taking? They can make editing pictures and making headers and buttons so much fun! They're easy to download and fun to use. KevinandAmanda.com has a lot of awesome free fonts for download. Go here to get started. I love free fonts!

You can also find lots of free fonts on Pinterest. I've pinned a bunch to my blogging board.

**EDIT: Please keep in mind that free fonts are only free if you're using them for personal design. If you're using them for commercial purposes (ie. creating a blog design for a paying customer), you need to make sure they are licensed for commercial use. You can find free fonts with this license at fontsquirrel.com! Thanks, Allie, for the reminder!


* * *

Those are the main resources that I've found to be helpful lately, and I have more blogging-related tutorials pinned on my blogging board if you want to check those out. 

Do you do your own blog design or photo editing? 
Any handy resources you've used that you want to share with the group?
________________________

Aleshea said...

I paid for this design. Mainly because I'm just obsessed with Itbritt and all of her work but before my new design Goggle really was and still is my friend. I have been trying to learn all I can so eventually I can start doing all my own designs. I like all these tips and appreciate them.

Anonymous said...

Love your simple, but super cute design! Your new header is perfect.

Rachel said...

I don't have photoshop, and I've found the free download Picasa to be very helpful for basic photo editing. I ended up just paying for a blog design because investing the time it takes to learn how to make a blog look good wasn't a priority for me--but I'm always impressed by people who figured out how to do it themselves!

The Random Writings of Rachel

Allison said...

Thanks for the link to the storyboards! Usually I painstakingly resize and group pictures myself...haha, it's a little ridiculous, really.

I've spent many a long night with google trying to find the html answers to my blog design woes. My most recent ground breaking discovery was how to make custom widget titles:
http://www.bloggersentral.com/2009/11/replacing-blogger-widget-title-with.html

Question... recently I started seeing blue boxes whenever I clicked on the image maps on my own header. Have you ever had this problem??

Anonymous said...

I'm all about DIY, I need to invest in Photoshop Elements when I have the cash. I just followed your Pinterest board, I love blogging boards.

Anonymous said...

I love Photoshop! It has allowed me to do much more design wise.

Unknown said...

This is FAN-TASTIC! I've only been blogging since February, but have made friends with Google and found a lot of success. I'm also trying to create new blogger-friendly tutorials for Wordpress. Here's the link to the series... http://simply-swift.com/category/blogging-2/wordpress-tips/

Hope it's helpful for someone! :)

Helene in Between said...

thank you for this! I have a couple tools i use (just to help spruce mine up) but I'm always on the hunt for more!

Allie @ Everyday Adventures said...

I do my own design and photo editing, and these are some great tips! I'd just like to add though, that free fonts are only free if you're using them for personal design. If you're using them for commercial purposes (ie. creating a blog design for a paying customer), you need to make sure they are licensed for commercial use. You can find free fonts with this license at fontsquirrel.com!

Christina @ The Murrayed Life said...

I'm always so impressed with people who've done all the design on their own. Not that I haven't, but mine is pppreeetty basic.

But I hear ya on the pride bit. Every time I'd figure something out I would want to run around the neighborhood cheering. The amount of hours I spent on my icons, or learning to make a header, oiii. Painful. I'm excited to try out these suggestions though!

(And I use picmonkey and love it. Will probably get Photoshop soon, but right now it's great!)

Kate said...

AWESOME resources! Sometimes I think I enjoy tinkering with my blog design more than I enjoy writing for it! It's a great way to test out my fledgling HTML and CSS skillz!

BTW, I nominated you for a Sunshine Award on my blog today!

Anonymous said...

Great tips! Thanks for sharing. It's helpful for this newcomer.

J said...

Thanks so much for sharing this! I'm relatively new at blogging, and trying to DIY my blog design. So, I pretty much need all the help I can get :-)

Erin LFF said...

Great tips for sure! I LOVE free fonts- I could look/download them all day, and sometimes I do ;)

From Foothills to Fog said...

Such great advice, thank you thank you thank you!! I love my new design from Kinch Designs, but I would like to learn how to do this on my own at some point. Thanks for all the good tips. And I love your blog header!

Britt and Hive said...

Thanks for the shout out.
I can feel the love.

Anonymous said...

Perfect! I've been dealing with a standard design from wordpress for almost 2 months now, and i've been dying to change it up!

Now... Where to find those few hundred hours... haha!

-Jess
objessions.wordpress.com

Kerry @ Till Then Smile Often said...

Yes, designing it on your own is painstaking but very possible. :) love the new header. I use picmonkey a lot. Will have to check out the others you mentioned!

Becky said...

I'm pretty sure you can read my mind because I've been wondering how to do this for awhile! Erin over at Love Fun & Football did my design :) But I'd love to learn a few tricks of how to do some things myself. Thanks!!

Amy said...

free fonts are where it is AT!

Sarah said...

Thanks for sharing this. Will be so helpful considering I know NOTHING haha!

Rachel Sedaker said...

THIS is an incredibly useful post- I pinned it so I can refer to it later! I'm a cheapo, so I use picmonkey to edit my images, and I'm really happy with it- very user-friendly.

Hannah Scott said...

What great (and timely) advice! My design is "homemade" but I've been wanting to overhaul lately. I found a fantastic series from The Flourishing Abode about creating a great brand for your blog. Can't wait to see what comes from my brainstorming!

Eloise and things said...

Ive become pretty competent on the blog design front, all thanks to my great friend google!!

x Eloise - Jazzlipsandtulips

Eloise and things said...

Ive become pretty competent on the blog design front, all thanks to my great friend google!!

x Eloise - Jazzlipsandtulips

Deidre said...

I really need to learn how to use photoshop - but it's always so expensive when I see it around. :(

Jenni@FlyingOnARainbow said...

This is such a great post, I can't wait to read it properly at home and try out your tips! I feel the same way about my blog design, it's soooo not good at the moment but I want to give it a makeover by myself so that I can feel proud when it's done.

Unknown said...

I have photoshop elements, and I still don't know how to use it... but you have motivated me to figure it out! Thanks!

Holly @ Hello Audrey Ruth said...

I am terrible and design so a while back I had someone re-design my blog for me. These are some great tips, sort of makes me feel like I could design myself, I don't know maybe I can. At any rate, I am loving your new header and now I really want to give photoshop a try.

Beka @ Sunshine to the Square Inch said...

yipee!!!! I can't wait to use some of these (all of these) resources you sent me. I used pic monkey to design my blog header. The only thing I don't like is that you are limited on color and pattern selections. however, for a newbie, it was great. Check out this link for a blog button ... it does the work for you for free! http://www.mycoolrealm.com/sandbox/gbgen/

Betsy said...

I paid for my design, but otherwise I'm totally amateur - I don't have any version of Photoshop! I mostly edit my pictures in iPhoto and then make my collages in Picasa. I know there's SO much else to learn but I'm sort of afraid to start learning because then I'll be overwhelmed by how much I don't know!

kristyn said...

I downloaded the old free version of Photoshop but have yet to actually try it out. It's so intimidating haha, I'm not tech-savvy at all and the concept of layers and how to use them just boggles me--someday I'll get there! ;)

Anonymous said...

Thanks for this fab post some great ideas for me to check out while I am working on a better blog :)

You're a true star!

x

A Labour of Life said...

excellent post, thank you so very much

・ DESIGNED BY ECLAIR DESIGNS