Where to get commercial use, free icons for your design

In this vidoe we’re going to look at icons. Now in this video we’re going to need 4 icons used for our services

When looking for icons, let’s say in this case we’re looking for free icons. There’s lots of free icons on line, quite often though when you are searching for them there could be, it’s hard to find some good stuff. I really like this site here called “iconfinder.com”

This site is really good for finding free commercial use, as well as commercial icons. So I’m going to type that in, in this case Art. What we’re looking to do is we’re looking to switch it to free, and instead of no licensing, we’re going to go back to no backlink. ok, that just means we get to use it, and we don’t have to add any links to it. So you can obviously add a back link, and there’s a bit more to choose from, and what i’m going to do is, I’m going to use this one here. The best thing about iconfinder is often when you find one that you do like, it’ part of a larger set that is also free. I’m going to use this camera one, this desktop one, and a couple of others.

Now if you’d like to you can skip ahead, and in the exercise files I’ve got 4 icons for you to start with. If you want to play along though,with this one, what you do is, say we pick this camera here, - before you download it, what you want to do is pick a size that you want.

Now I like to pick the largest size I can find so that later on, if I need to use it for something else, or a super graphic, or a big kind of tile for something, I’ve got a large version of it around. To download it we’re going to use the PNG version. Ok, and download it to your desktop, and then import it into photoshop. What I’ve done for you though, is let’s go to photoshop and lets Import the images I’ve already downloaded, so we’re going to go to file, place embedded, and there’e icon 1, 2, 3, and 4, so we’re going to bring in all of these. So first of all I’m going to place the first one, ok, I’m just going to leave it the size it came in at, and hit enter. The reason I do this is, I’m going to scale them all down together so I want them all on the page.

Select them all. and scale them all down to the exact same size, rather than trying to do them all separately, and trying to match them, so let’s go to file, place embedded, and bring in icon 2, hit enter, file, place embedded, icon 3, hit return, file, place embedded, and let’s bring in the last one. Great. So I’ve got 4 icons here, You can see them all in my layers. I’m going to command, select all of these, or hold down the control key if you are on a PC, and just click each one individually.

Now the should move down all along together, and we’re going to use our shortcut -command T or control T, and I’m going to scale them down, all to be the same type of size. Now actually before I do that, I might hit escape, and what I want to do is, I want to see my 4 column guide, just to get a sense of what size they should be.

The guides are on, I’ve got 4 icons selected. I’ll use my transform tool, and I’m going to scale them downhill they fit. They fit across 1, 2, 3, columns.

So across 3 columns in 4 little groups. Right, so I’m going to zoom out a little bit. I’m going to distribute them basically , just to get them in a rough sort of position to get started. The way to get them centred within the guides - what you watch out for is say I select icon 1, you’ll notice that when I drag it around, can you notice - see that little blue line that appeared, ok if I move it across again and back.

So I’m going to grab icon 2, drag it around until it’s kind of in the middle there because it has a tendency to lock onto loads of different things in the document.

What you can do if it gets too far off, just use your arrow keys to tap it along, until you feel it’s pretty close to there. Now what we need to do though, is get them to line up centre, so I’m going to select all of these guys, while holding down the command key, and selecting the 4 of these , and I’ve got these options along the top here, you can see I can align them along the top. I can align them along the bottom, or I can align them along their centres, and that’s what I’m going to do, align them along their centres.

Next thing I need to do is colour them, so I’m going to colour 1 first, we’ll colour icon 1 first, we’ll turn off my guides, zoom in a little bit. I’m going to not colour this guy, I’m going house this option down here called a layer style. ok with icon 1 selected, click on effects, and then go in and pick colour overlay. Now colour overlay at the moment you see it’s overplaying it with grey, and what I can do is I’m going to click this little colour one, and I’m going to pick one of my colours in my colour libraries. Now this little colour pick, it doesn’t have your colour swatches, so what I’m going to do up the top here, is make sure I can see my swatches, especially the 3 that I’ve imported, so that when I click grey I can use my eyedropper tool to pick the colour I want, click okay and click okay again, you can see the colour has been overlayed.

Now I want to apply that colour effect to all the different icons. There’s a couple of different ways. You can right click it, and say copy, layer style, and then paste it on the different ons, or this is a nice easy trick, is that if you can see your icons - watch this - I can click, hold and drag it. Just drag it onto the phone ok, drag it onto the camera and I can click , hold and drag it onto the TV set there. Great that’s a way to bring in icons for our design.