Thursday, August 1, 2013

How I did my own blog design



 My blog does not look professional by any means. Like most other things I do, it's amateur. Very fitting with my blog title, right? Ha! Anywho, I think it looks decent, and I'm pretty proud that I did it all by myself. If you're like me, and don't have the extra cash to drop on a gorgeous, custom designed blog, then you hopefully the links that I share will help you create something beautiful.

First thing to do is to choose a picture, or a few, that you'd like to use. From this, I decided on the colors. As you can see, I chose this super gorgeous picture that I took of my daughter at the Knik River. Blue and grey seemed like the prefect color combo to accompany this picture. If you don't want to include any pictures, no problem. Just decide what colors you're loving at the moment... and what colors you can live with for a while, because if you're not a pro as graphic design, it's going to take you a while.

It took me about 2 weeks to get my design together. I totally understand why blog designers get so much $$ now! This was fairly time consuming. It might have gone faster if I wasn't so darn indecisive. It also doesn't help that I have a 16 month old who I can't neglect. Plus, she has already ripped one command key of my Macbook, so I try to only get on it when she's napping.

HEADER
Once you have your theme, you can go ahead and make your header. I used THIS tutorial from Mama Whimsy as a starting point. I checked out picmonkey, but I wasn't finding the fonts that I wanted, so I ended up scrapping it and doing it in Photoshop Elements instead. (On a side note, if you like photo editing, you can normally find Photoshop Elements on sale around black Friday at staples for close to $60. Which is a steal! Its a smaller version of Photoshop, and so far, I havent found anything that its lacking in comparison to its much more expensive original)

Time to put it on your blog. Difficulty level: easy if you know how to work the picture editing software

First click on LAYOUT (I made a "tester blog" so I didn't totally destroy my current layout)

It should open up like the picture above. Then you'll need to click EDIT to the right of your header box

This pop-up will allow you to upload the header you made in picmonkey or photoshop. Make sure you click the second box to use instead of a title

When you install your header, it will be left aligned. Follow THESE tips from Keren (snoop around her blog too, she's got some pretty neat freebies!) on how to center your header. All you have to do is paste a little code. Difficulty level: super easy!

BACKGROUND
I did a little googling (I typed in light grey background) and found this cute polka dot image. To install your background you want to go back to your main page, click on TEMPLATE then CUSTOMIZE(under the picture of your blog) and then click on background. It will bring up the picture below.
Just upload your background image here

PICTURE BIO
The next thing I wanted to do was the cute little picture bio that people have on their blogs. I again went to PSE, but you can use picmonkey for this too. Once you get the bio to your liking, click on LAYOUT again, and you're going to ADD A GADGET on the right side

click on ADD AN IMAGE, and upload your bio. Difficulty level: easy if you know how to work the picture editing software.

SIGNATURE
Then I went to work on a signature. Installing this was a little more difficult, but still doable for the novice blogger. I used my trusty friend google to find THIS easy how-to. You'll need to host the image somewhere. I used photobucket. Difficulty level: easy if you know how to work the picture editing software.

SOCIAL MEDIA ICONS
If you're feeling really ambitious, you can make your own social media icons. This is a little time consuming, as you have to open a million windows to link up all your buttons. I was lucky enough to find grey polka dot buttons on google. They had tons of colors and styles to choose from. I just photoshoped out the ones I didn't want. I used THIS tutorial which walks you through how to use THIS website. You'll need your photobucket for this one too. Difficulty level: easy if you know how to work the picture editing software... just time consuming!

When you finish go back to your LAYOUT. Add an HTML/Javascript gadget and paste in your code.

PINTEREST BUTTON
If you post a lot of crafts or recipes, you can add a cute little Pin It button to your post really easily. Go HERE and grab the code and follow the same directions you used to add your post signature. This will put it on all of your new posts. Difficulty level: easy

BLOG BUTTON
You can use THIS site to make a grab box for your button. I hosted my button icon on photobucket as well. Generate your code, and paste it into a GADGET (html) like you did for your social media icons. Difficulty level: easy if you know how to work the picture editing software.

ADDING CUSTOM FONTS
I used THIS tutorial. Difficulty level: maybe I'm just not tech savy enough, but this was hard for me. Mostly because I dont know HTML, so I didnt know the codes, so I was having to do a lot of googling for them. If you look at my history it has a lot of "CSS code for" this and "CSS code for" that.







 photo Signature2_zps9a1e9a3d.jpg

4 comments:

  1. I'm impressed. I have a freebie design...wish I was ambitious enough to do my own!

    ReplyDelete
  2. I love that you broke this down! And thanks for sharing all of your resources! I love the way yours looks and the polka dots/colors are what I was hoping to do to mine very soon :) but I guess I will rethink don't want to be a copy cat lol.

    ReplyDelete
  3. Great tips! I will hang onto this post when I am ready for a redo. I'm like you, I just can't justify spending money on a blog design. Happy Weekend! XOXO

    ReplyDelete
  4. I love that you were able to make yours! I'm not talented enough even with the directions!

    ReplyDelete