Don’t be afraid: making icons for your blog

Ever spent an hour looking for the perfect set of social media icons for your blog? Um, yeah…me neither *coughcough*. The good news is that it’s really, really easy to make your own. Yay! Read on for a full tutorial on making your own icons using a program called GIMP. The first thing you’ll want to do is download a free graphic design program called GIMP. GIMP looks complicated, but it’s actually really user-friendly, so don’t worry. So once you’ve downloaded GIMP & opened it, you’ll see three windows that look like this:

We’re going to start with the middle window, which I’ve labeled IMAGES in the pic above. Click on FILE in the upper left-hand corner, then select NEW. Here’s where you’ll decide on the size of your icon. The icons I’d been using before were 50 pixels by 50 pixels square. I knew that I wanted long, rectangular icons, so in the WIDTH box I’ll put 200, and in the HEIGHT, 50. Make sure you put in whatever size your icon should be, then hit OK. You’ll get this:

That little white box in the middle of the image window is the beginning of your icon. Now we’ll add a background color. See the black square on top of the white square in the middle of the TOOLS bar? Double-click on that to bring up the color menu. There are a few different ways to get to your color; you can poke around with values and the color menu until you find one you like (great if you’re starting from scratch). If you have something that you’re trying to match (say, your header), you can “pick” a color from that. Go back to the IMAGES window and select OPEN (NOT OPEN AS LAYER). Then open the document that has your header. On the TOOLS menu, select the COLOR PICKER (looks like a tiny eye dropper). Click on your header in the spot that has the right color.

Go ahead & close your header doc, so that what’s left is the little box of your icon. You’ll see that the black box in the middle of your TOOLS now has the color you “picked” from your header. Now you can select the BUCKET FILL (looks like a paint can), then click your icon in the IMAGES window. It will fill with your color.

I want my icon to be pretty simple, so all I’m going to do at this point is add text. You can experiment with adding different colors, shapes, or textures, though. First, click on the color menu in TOOLS to select your text color (in this case, white). Then select the TEXT tool (looks like an A). Click in your icon- you’ll see that a text box appears. Type whatever you’d like (in my case, rss feed). You’ll also see that in the TOOLS menu, the bottom of the menu has text settings that you can adjust: font, text size, etc.

Once your text is adjusted how you’d like, go ahead & close the text window. You’re almost done! If you’ve done everything you want, all that’s left is to save. I always save two copies. The first is in GIMP’s file format, .xcf. This is a copy that I can come back & edit later, if I want to change something. The second is the “finished” copy that I’ll upload. For simple, text-based icons like the one we’ve made, .gif is usually the best choice. So click FILE in the upper left-hand corner, and then click SAVE. Choose the location you want to save to & the correct format, and you’re finished! Now you’re ready to upload it to your blog. Kira at Her New Leaf has a great tutorial on adding social media icons to your blog.

Questions about this tutorial (or anything else)? Just let me know!

About these ads

6 thoughts on “Don’t be afraid: making icons for your blog

  1. Hiya Kate! I wanted to thank you for sharing my tutorial – I’m glad you’re enjoying my Primp My Blog tutorials. If you ever have any suggestions for new tutorials, please let me know! Thanks for following : )

    • Oh, I’m sorry it’s not working for you! There are a few different programs you can use. If you have the money, of course, Photoshop is a great option. Inkscape is a free vector-based graphics program; it’ll function a little differently, but you can accomplish many of the same things. Paint.net is a free graphics program (for Windows only, though) that’s fairly user-friendly.

  2. I love this tutorial! Thanks so much for posting! I’m relatively new to blogging and I’d like to have links to all my social media on my blog but I’m at a loss for linking everything to the appropriate place, especially my instagram. Any tutorials for that?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s