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.
- Digital photo
- GIMP (free download here) or similar photo editing software
- Open your photo in GIMP. I used the photo from this post.
- 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.
- Mentally divide the picture into different monochrome sections. I divided ours into faces, hair, clothing, hands, and background.
- Choose a place to start. I picked faces.
- 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.
- 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.
- 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. If you’re looking for instructions on how to make a grab-able blog button, I used this tutorial from Manic Mother.