Home » Craft » Tutorials » Design your own blog button

Design your own blog button

Blog button made from a photo

I’ve had a few people ask how I made my blog button. It’s really easy and doesn’t require artistic talent, but it isn’t a technique I’ve seen used anywhere else.

MATERIALS:

  • Digital photo
  • GIMP (free download here) or similar photo editing software

STEPS:

  1. Open your photo in GIMP. I used the photo from this post.
  2. Crop your picture if necessary. If you want the text underneath like mine, you will want your photo to be rectangular in shape. Otherwise, you probably want it to be square.
  3. Mentally divide the picture into different monochrome sections. I divided ours into faces, hair, clothing, hands, and background.
  4. Choose a place to start. I picked faces.
  5. Use the color picker tool (looks like a dropper in GIMP) to select the color you need from the original photo. I just chose one of the colors from each person’s face, clothing, and hair. I took the color for the background from one of the leaves behind where we were photographed. I used the same face color to color in hands where applicable. The one part of the photo I didn’t use this technique for was Emma’s hair – I was only getting skin tone colors from her blonde hair in the photo, so I just picked a yellow color from GIMP to use as filler.
  6. Use the brush tool to color in each section from step 3 so that it is one uniform color. If you want to define lines within a single color, you can leave a bit of the original photo on the edges. You can see where I did this to define Johnny’s shirt sleeve from the rest of the shirt. I also used this technique to define Lily’s arms also, but you can’t see it as clearly. I didn’t bother coloring over Mike’s shirt or Lily’s blanket at all; they didn’t really need it by the time I resized everything.
  7. Resize the photo so that it is 125 pixels wide (or 150, if you want a larger button). If you’re adding text below, make the text box just tall enough to make your final button 125×125 pixels. I used the color of my hair as the background for the text box, but any other color from the photo would have worked just fine.

Let me know if you have any questions, or if something doesn’t make sense.

MaryAnne is a craft loving educator, musician, photographer, and writer who lives in Silicon Valley with her husband Mike and their four children.

8 thoughts on “Design your own blog button”

  1. Thanks so much for detailing how you created your blog button. It looks great and I’m excited to make one myself, something I didn’t even know I wanted.

  2. i SO love the gimp as well! i have been doing my digital scrapbooking with it and am very impressed! besides the fact that its free- it is amazing photo editing software!

  3. Valerie @ Frugal Family Fun Blog

    We are big fans of the Gimp, and open source software in general! Have you tried Inkscape? I love drawing illustrations using it. Works great! I love how your new button turned out.

  4. Wow, you’re a little smarter than me when it comes to computer language, I think :) If I ever get brave enough, I will surely try it :)

Comments are closed.

Scroll to Top