Building Graphics on a Saturday


New Icon.pngWhen I retired in October of 2015, I started building apps and mobile friendly, mobile responsive websites.  One of the toughest parts of the job, especially with app designing and building, is finding the right button and icon in the right color, with the proper contrast from the rest of the app color scheme.  After looking around and trying lots of different ways to modify or create content on my own, I can now share with you a way you can build your icon or icon sets own using Creative Commons licensed icons, images and free software.

flaticon-ssFirst, let’s discuss icons.  I had an app client who was looking for specific icons in a specific color scheme.  Short of having a gra[hoc artist go in and generate icons that would require us to go back and forth to get right, I started looking for Creative Commons licensed free icons and icon set.  The best site I found is at Flaticon.  This site has nearly 300,000 icons that you can search for by keywords, and then download and use WITH CREDIT TO THEM for FREE.  You have to create a free account, and there are a few limitations such as how many sets you can download per day, and how many personal sets you can create, but it is not something that most people would have a difficult time dealing with.  They also have a premium account for $100 a year, which removes those restrictions.  You can make that call yourself, but Flaticons is a great spot to begin your searches.

iconmaster-ssNow if you search through Flaticons and can’t find exactly what you are looking for, fear not.  I had the same problem.  So a little more research, and viola…I came across Iconmnstr.  This is a site that has about 3,200 individual icons, but there’s something special about it.  While the previous site has icons that have already been customized and colorized, Iconmnstr provides the user with basic clipart style images that you can color as you like, and either leave it on a transparent background, or place in a shape to use as a button.  You can then download the image in multiple formats that you can then use as a completed icon, OR as a component to be used in other images.

google-search-ssAlso, you can do a Google search for “Round Button Icon” images, then set the license to “Labelled for re-use” and locate various round button icons that you can download as a transparent image.  This is important, as if you want to place a button on an app, you probably want only the round button part of it to show up, not the button on a square background.

Let’s say that you searched Flaticon and did not find what you needed, but you did find the icons you needed on Iconmnster, and a button you wanted to use as the background in a Google search.  Download a free graphic program called GIMP.  You will need to spend a few minutes familiarizing yourself with the program.  Once you do, you will be ready to composite your button background graphic with the icon images you found in one single transparent graphic.  All you will do is bring the button image and the icon images into the same file as different layers.  Then Colorize the button, colorize the icon, and export it for use.  I will be creating a video tutorial on how to do that a little later this week.

So there you have it.  How to locate image ready icons and/or icon sets at Flaticon, clipart style icon components at Iconmnstr, round or square button icons on transparent backgrounds through a search, and a way to colorize and composite the icons on the buttons using GIMP.

Let me know what you think.  And if you have any sites with free icons you want to share, please feel free to do so.

Advertisements

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