In this video, we're gonna look at icons. Now in this video, we're gonna need, uh, four icons used for our services. When looking for icons. Let's say in this case, we're looking for free icons. There's, there's lots of free icons online. Quite often though, when you're searching for them, there could be, it's hard to find some good stuff.
I really like this site here called icon finder.com. Um, this site's really good for, uh, finding free commercial use as well as, um, commercial icons. So I'm gonna type in, in this case, art, what we are looking to do is we're looking to switch it to free. And instead of no licensing, we're gonna go back to no back link. Okay? That just means we'll get to use it and we don't have to add any links to it.
So you can obviously, um, add a back link and there's a bit more to choose from. And what I'm gonna do is, I'm gonna use this one here. The best thing about Icon Finder is often when you find one that you do like, it's part of our largest set that is also free. I am going to use, uh, 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 four icons for you to start with. If you wanna play along though, this one, what you do is you say, we pick this camera here.
Before you download it, what you wanna do is pick a size that you want. Now I like to pick the largest size I can find, um, 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 allow around. So, and then to download, we're gonna use the p and g version, okay? 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 let's import the images that I've already downloaded. So we're gonna go to file place embedded, and there's icon 1, 2, 3, and four.
So we're gonna bring in all of these. So first of all, I'm gonna place the first one. Okay? I'm just gonna leave it at the size it came in at and hit enter. The reason I do this is I'm gonna scale them all down together. So I want them all on the page, select them all and scale them all down the exact same size.
And rather than trying to do it separately and trying to match them. So let's go to File Place embedded. Let's bring in Icon two. Hit enter file, place embedded icon three, hit return file, place embedded. And let's bring in the last one. Great.
So I've got four icons here. You can see them all in my layers. I'm going to command select all of these, or hold on the Ctrl key if you're on a pc. And just click each individually. Now they should move along together and we're gonna use our actual shortcut Command T or Control T. And I'm gonna scale 'em down all to be the same type of size.
Now, actually, before I do that, I might head escape. And what I want to do is I wanna see my four com guide just to get a sense of what size they should be guides on. I've got the four icons selected. I'm gonna use my Transform tool. I'm gonna scale 'em down till I fit. Okay, they fit across 1, 2, 3 columns.
So across three columns and four little groups. All right, so I'm gonna zoom out a little bit. I'm gonna distribute them basically Just to get them in kind of a rough sort of position to get started. And the last one. Alright, the way, uh, to get 'EM centered within the guides, what you'll watch out for is say a select icon. One is that you'll notice that when I drag it around, can you notice you see that little blue line that appeared Okay if I move it across again and back.
We're looking for those, it's kind of like telling us that it's in the middle of something. So I'm gonna grab icon two, drag it around, so 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 is if it gets it far off, just use your arrow keys to tap it along okay. Till you feel like it's pretty close to there. Now what we need to do though is get them to line up center. So I'm gonna select all of these guys one holding down the command key.
Select four of these and I've got these options along the top here. You can see I can align them along the top. I'm gonna line them along the bottom where I can align them along their centers and that's what I'm gonna do, align them along their centers. Next thing I need to do is color them. So we're gonna color one first. So we'll color icon one first.
Turn off my guides zoom in a little bit. I'm gonna color this guy. I'm gonna use this option down here called a layer style. Okay, with icon one selected, click on fx and then go in and pick color overlay. Now color overlay. At the moment you can see it's overlaying it with gray.
Um, what I can do is I'm gonna click this little color one and I am going to pick one of my colors and my color libraries. Now this little color picker doesn't have your swatches, so what I'm gonna do is I'm gonna make sure of the top here that I can see my swatches, especially the three that I've imported. Okay? So the greens and these guys, so that when I click gray, I can use my eyedropper tool to pick the color that I want. I'm gonna click okay, click okay again. And you can see the color's been overlaid.
Now I want to apply that color 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 ones. 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. Okay?
Drag it onto the camera and I click and hold and drag it onto the TV set there. Great. That's a way to bring in icons for our design.