Where to get commercial use, free icons for your design

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025