Tuesday, July 9, 2013

Make A Thumbnail Icon

Okay, I'm so over the subway art thing... well, at least for now anyway. This time I want to show you how to make your own thumbnail icon. What is a thumbnail icon? Blogger calls it a Favicon. It's that cute little square picture that shows you what webpages you have open in your website tabs. This is what they look like in the web browser tabs:




But did you know that you can make your own icon and have it display for your website or blog? This is this icon I created for my blog:
It's simply a square with a fancy script font. The actual size is only 100 x 100 pixels, but that's all you need!

TIPS
  • Before you start, have an idea of what you want for your icon. 
  • Remember that this image will be VERY TINY so the best thing it so keep it clean and simple! 
  • Stick to 2 or 3 colors max or else it just gets muddied up. 
  • Use a high amount of contrast between the colors you select for maximum pop!

STEPS
1. Open Paint application. (Almost every PC I know of has this program.)
2. Click File-> New.
3. Click Image->Attributes.

4. Type 100 for Width and 100 for Height.
5. Select Pixels for Units.
6. Click OK.

7. You'll get this cute little square as your blank canvas. Now... CREATE!
8. Click a color you want for your background. (I chose light tan for mine.)
9. Click the bucket icon in the toolbar to fill in the background.


10. To insert a font, click the text icon (the letter A) in the toolbar.
11. Click on the canvas and you'll see a text box open up for you to type in. You can move it by clicking and dragging it to the exact place you want it.



12. Right click the text box and select Text Toolbox to open the Font dialog box.



13. Select the font face you want to use. Remember that only the fonts that you already have saved on your computer are the ones you can use. (I used a font called Old Printing Press for this set of instructions. In my blog, I used a font called Kramer.)
14. Select the font size you want to use. You will need to adjust this to fit the box. You can also type in a size. You are not limited to the preset sizes.
15. Enjoy your masterpiece! Be sure to save it for use in the future.


Here's my finished project:

Fun, huh?!

Next time, I'll show you how to insert your cool thumbnail icon so that it displays on your blog or website!

No comments:

Post a Comment