Icon Finder

I find myself using the same crappy buttons on websites because that is all I have. Everyone knows that buttons and icons are a integral part of any website. So it’s always back to the drawing board and start making new icons!

Time and time again I have to create custom icons and buttons for clients. Now with IconFinder that is a thing of the past. IconFinder is a search engine that will return icons or png files of free website icons. They allow you to change the background of each from either black, white or transparent as well as filter results for a commercial website or just for personal use.

Let’s take a look at Icon Finder:

Just like any other search engine the search bar and options are at the top. Type in a search term and hit that search button. It will then search through their 109,067 free website icons and 206 icon sets. Not too shabby for a new site.

After hitting that search button you will be shown your results. They will look like this:

Now you can click on one to download or view it but check out these features. Click on the transparent or black button under background color and watch the free website icons change to meet your requirements:

You can also narrow down your results to only show commercial images or ones you can use personally by hitting this:

Once you see the image you want to download click on it and it will bring up another screen that looks like this:

You see from this screen that you can grab the PNG file or the ICO file. It also has the dimensions – in this case it is 128×128 – a nice size for an icon. There is a link to show all icons in this set and tags/ratings.

When we click on the show all icons in this icon set button we get this:

These images are free for commercial use! WOOT! That means I do not need to pay any royalties or fees to use these in a website that makes someone money. I can’t express how awesome this is. Consider this the equivalent of Creative Commons for icons!

I ran a few other searches before I bounced, including this left arrow search:

These icons are great for small buttons designating back or forward.

The site is pretty new and I can only assume that as time goes on the site will get bigger and be filled with more and more icons. If you create icons I am sure you can get some recognition by uploading them to their site. You can browse all those sets by hitting the browse sets button.

That will take you to a page that looks like this:

You can then click on the entire set and view all of the icons in it. This is great for sticking with a static theme throughout the website.

Where do you grab your icon files from? We would love to hear about more icon download sites in the comments! Don’t be shy guys!

Coloring Your Art

1. Open up your sketch or a downloaded sketch (whatever you want)



2. Create a new layer beneath your sketch layer and name it face(or skin) color



3. Roughly color the skin parts (I used #eed4bd)



4. Create a new layer beneath your sketch layer(and above your skin layer) and name it hair color



5. Roughly color the hair parts (I used #917352) (Repeat this for eyes, clothing, whatever you want/need)



6. Now create a new layer above the face/skin color layer and do the same for the hair



7. Now color in the shade parts of the skin (I used #b99e82), the hair (I used #53402b), and repeat this for eyes or whatever you want/need



8. Repeat steps 6 and 7, only use a lighter shade color then the first time





9. I forgot to do the lips and eyes, so repeat steps 6 and 7





10. Select the first shade layer (I am showing the skin in this tutorial) and apply a 3.0
Gaussian Blur to it


11. Do the same for the second shade layer



This should give you the following effect:



12. Repeat steps 10 and 11 for the hair, eyes, lips, etc



13. My hair shade wasn't dark enough so I duplicated the shade layer a few times to get a darker shade



14. Adding highlights/some more light. Create a new layer above the sin layers you have so far, name it face/skin highlights or something like that



15. Roughly color in the highlights with white.



16. Blur this highlights layer to something that looks natural and drop the opacity (I dropped mine by about 60 percent)



17. Repeat steps 14, 15 and 16 for the lips , hair , etc (whatever you want)



18. Create a layer called final edits, or something like that



19. In this layer make some final edits, I added some more darkness to the eyes, brushed up the hair on a few parts and added a reflection in the eyes



20. Duplicate the sketch layer, blur the copy by 0.5 pixels and drop the opacity a bit (mine dropped roughly 50 percent)



This should leave you with the following result:



My final product (a lot more steps are involved in this image):



Source