Join Justin Seeley for an in-depth discussion in this video Solution: Sketching your ideas, part of Creating Icons with Photoshop.
- All right, if you're watching this video hopefully that means you have completed your first challenge video and you're ready to watch the solution to see exactly what my thought process was as I was sketching out my icons for the icon set that we're going to be building in this course. So I've opened up the rough sketches.pdf document directly here in Photoshop. You could open it up in Acrobat, or Preview if you're on the Mac, or whatever program you have that will open up a PDF file. Once you have that open I'm just going to zoom in and I'm going to start up here in the left hand corner. Let's just talk about these each individually.
So the first one here is a heart icon. If you'll remember from the list that I gave you, I wanted something to signify a like button. In most modern UI elements that's usually denoted with a thumbs up. Well I wanted to break away from that a little bit. I think that thing's been played to death, so I wanted something a little bit different. I figured a heart would be a great way to do that. It's also very simple, and so that was an easy one that I could just knock out of the park pretty quickly. So you can see here it just starts right here, goes up x amount of dots, goes over x amount of dots, it comes back. So I made sure that it was even across. These dots are not on here just for the heck of it.
These dots are on here to help you get a better idea of exactly where your icons are going to be placed once you get them inside of Adobe Photoshop. It's also helping me keep my sketches consistent so that I get everything roughly the same size, shape, and weight when I'm creating these things. The second icon, the pencil icon right over here, this one was a little bit more difficult because initially I had it straight up and down. I didn't like that, so I wanted it to have a little bit of a tilt. Obviously on the grid that didn't really play very well, so I was stuck with a sort of really rough sketch.
I cleaned it up a bit with the pen, as you can see. Let me zoom in here. You can see I started off with pencil and then went over it in ink to kind of give myself a better idea. This is unfortunately what happens sometimes when you're going through with that one to two minute sketch window. You wind up with something a little messy. This does give me an idea of what I need to create, and I think based on the other shapes that I used for these other icons I can create something meaningful for this, but this does give me at least a rough idea of what I'm looking for. This is just going to be a triangle right here, these are going to be several rectangles right here, and we're going to give it roughly like a 45 degree slant when we're finished with it.
The third one right here is a calendar icon. A calendar is very simple to do. It's just a bunch of rectangles hooked together in different ways. So here we have this rectangle, the base shape right here. You can see I started out a little bit wider on this thing, but I decided to go a bit smaller than that once I had it in there because I figured some of these other ones might need to be a little bit wider, and I don't necessarily think that the calendar's the widest thing that I'm drawing. So here I just went in and created a basic rectangle that went just like that. I had these come up one dot pattern higher, the little rings, and then I just created these.
These don't necessarily fit the grid pattern, but I can take care of that once I'm inside of Photoshop. Again, that's one of those things that I don't necessarily have to worry about the fine details because that's something I can clean up at a later time. For the camera icon over here I took the same basic rectangle. You'll notice this is the same height and width as the calendar icon. I also went up one level of dots just like I did over here to keep a consistent look and feel. I then used this same base line right here that goes all the way across. I used that for the top and the bottom of the circles that make up the interior parts of the camera as well.
So we're starting to get a consistent look and feel across the board, making it easier for me to reproduce these icons and for these things to have a really good consistent feel across the board whenever I finish them up. Here's where I ran into some trouble when I was sketching. You can see here I've created two gear icons. They're both roughly the same size. My problem here was that I did this one first and it was way too big. I then said okay, I need to revisit that and draw something a little bit smaller. I wound up drawing something that was almost exactly the same size, which is unfortunate. So this is something that happens sometimes when you just can't get that bad idea out of your head, and that's okay.
I drew both of these just to get this out of my head and get them on to paper, and since that's all I could come up with I moved on to the next one. What I'll do with this is I'll use some other shapes from things like the camera icon up here and also maybe the clock icon down here to create a more consistent look and feel with the gear once I get back into Photoshop. The chat icon was relatively simple to create. I used a little bit wider of a look than the calendar, but I went in the same height as the calendar overall.
You'll also notice I threw in these little speech bubble areas here. So I'm going to just add those in after the fact. The envelope, very, very simple. It's the same basic shape as the chat icon over here. I figured they're both about communication, so they could both be the same size. Then finally, down here for the mobile icon, I went with a similar shape for the phone as I did with the camera and also the calendar. I just turned it up a little bit and shrank it down on each side. So it's one or two dots in on each side, but it's the same exact height, and then I just added that little circle down there to indicate a push button.
The clock was another really simple one. It is a circle which is roughly the same size as everything else. You can see here it fits right there on the dot pattern exactly where it's supposed to, and then the interior element was just like a little L shape to indicate the hour hand and the minute hand, like so. So when I zoom back out, you can see here. I spent about 10 minutes total sketching these out and then another three or four minutes refining them in with pen to give me a better idea of exactly what I wanted them to look like. So this is going to act as the basic blueprint for all of the icons that we create in this course.
Now of course, if you went through and you created your own sketches that look totally different than this, I applaud you for that number one, and number two, you can use those as we continue to go throughout the course. You will just use what I'm showing you on screen as sort of a rough reference to yours, and then you can re-create your icons sets as well, because what I'm going to be using in the course are these icons right here. But if you want to develop your own, be sure and do that, and also, when you're finished at the very end of the course, I want you to share those with me because I'm always interested to see how people go in and develop their own icon set.
What did you think a like button should look like versus what I thought it should look like? So hit me up on Twitter or Facebook later on and show me what you've created. I'd be really interested to see it. So there you go. Here is our finished sketches. We're now ready to take these sketches and run with them as we finally begin to start building our icons inside of Photoshop CC.
- Exploring file formats, sizes, perspective, and platform guidelines
- Choosing an icon style
- Creating sketches and assigning color schemes
- Building a grid system for icons
- Redrawing icons with shapes
- Saving icons
- Generating icons for different operating systems