For our first mini project we're going to develop a series of icons that we can use on a Web site and
a mobile app.
And I wanted to do this because I think we can learn a lot of the tools and even further learn the tools
that we just went over by doing projects and kind of showing you how these tools work in a real world
application.
So let's go and get started the first one I want to have really clean simple icons with nice bold thick
lines and a flat style of designs is super simple.
The icon needs to be visible when you zoom out.
So it's got to be an icon that doesn't have super duper thin lines it could be easily read at only 25
by 25 pixels in size.
So we really need these icons to be very simple powerful and bold just kind of the idea behind these
and behind these series of icons and the future of design is digital so learning how to do these digital
oriented projects so much especially when it comes to a web app design and web site design you need
to learn how to do these kind of icons in different and different graphics for the web.
So it's good and get started with the search icon.
I like to use real photos as a reference because it just really helps we get an idea of what that shape
looks like in real life.
So I can be able to simplify that even further.
So I mean he uses real photo and I'm going to go ahead grab the ellipse tool go ahead and hold down
shift to make my little circle go ahead and bring that over here don't have to be perfect.
We're just getting a general idea of what we want the icon to look like.
Go ahead and bold our stroke a little bit some over here.
Got a bolded quite a bit.
I want to make it fairly thick so that you could see it when it's really really tiny.
Have a good idea of the shape of the handle that I maybe want to emulate a little bit.
So I'm going to go ahead and grab.
We can always trace with a pen tool or we can create a series of shapes and join them together.
So that's what we're going to do.
I'm going to get the rounded rectangle tool which if you do not see it on your default panel there's
these little three dots at the very bottom of your toolbar says edit toolbar.
Go ahead and click on that.
And there's many more tools available that you can drag over here and swap out for tools maybe you don't
use.
So what I did as I went down here let me see my shapes there's my shapes and I was able to click on
it and drag it onto the toolbar.
So if you ever see a tool that I'm working with that's not there by default because we did the default
layout workspace when we first started.
And you don't see it just go to these three little dots and you'll be able to pull up any of the tools
I talk about.
You'll be able to drag them over to the shape to I can drag it over here.
And if I don't want it I just drag it back and you can build the toolbar how you like it.
There's probably some tools I might even drag out because I want to simplify my workspace so that less
icons we have the better.
So I just wanted to kind of go over that real quick.
So let's go ahead and grab the rounded rectangle tool.
This is automatically get around have the rounded corners so I don't have to do that manually was kind
of reduce the strokes so I can see my shape a little better.
Now I was going to create a couple of these to kind of get that shape to go up to shape.
And so this already has the rounded corners on it by going up to shape but it's too much.
Let's kind of reduce the amount of curves let's make it less of a curve.
So we're going to cut this in half.
So now it's point four.
Let's do point two.
And I have them linked.
So they're all going to change at the same time so enter and it's going to have a less of less curves
going on there.
I can continue to create different shapes and I might even switch to Phil at this point so I can kind
of see how my shape is looking so I could do another little shape here.
Another one here and maybe with the pen tool we can draw a little bit of details here and take our pen
tool which is going to draw little custom shape.
Go ahead and make this a different color so you can kind of see what I'm doing.
Let's click up here this make a little bit of a curve
cook up here make a little bit of a curve and now I could take the Eyedropper Tool and sample the red.
And right now I have all these little elements but I want to join them together.
But I also want to make them center.
These aren't really center aligned and let me make these all different colors so you can see what I'm
talking about not all align.
So how do I align those so they're all nice and even I'm going to hold down shift and select all of
my items think there's five and total
and I'm going to go up here to my align the align panel you can finally align options up here at the
top or go out and get rid of that update.
You can go over to your line panel and do it that way and just do a simple horizontal line centers.
When I click on this everything's good align perfectly.
And so now I want to group my objects together and now I'm going to align it to the top object because
now we have this aligned within each other.
So let's select our grouped object.
It's go and make that one color now.
And now we're going to group it with our top object.
So now we're going to go back over to our line panel and do a horizontal align center.
Nick could do the same thing there's left alignment there's right alignment and there's Central alignment.
There's quite a bit of alignment options which I'll I'll use frequently throughout the class.
So any of the tools I use are going to see a lot.
So if you feel like adding quite master that too I don't feel comfortable with that tool we're going
to be reusing a lot of these tools over and over and we do these practical projects.
So you're going to have lots of practice.
Don't feel overwhelmed at any point with one particular tool.
I'm just taking the direct selection tool and manipulating a couple of these objects.
It's going to take my handle and that might be too detailed of a handle.
We'll see.
We don't really need the photo reference anymore.
So let's go ahead and delete it.
So now it's all about finding the right balance with our icon.
And so what I'd like to do when I develop icons is I'd like to zoom out every once in a while so I can
kind of really good a good scope of how the object is going to look in real time.
So this icon is probably good to be viewed probably around this size.
So it's good to kind of zoom out to see if I can make out and define all of the major parts of this
icon.
I'm going to go ahead zoom back in and make this a lot thicker.
This little object so we could just kind of pull this out make it just a little bit wider or we could
hold down shift on this corner and just make the entire object bigger
and they could simply cut this object below.
So what we could do is right click and UN group these objects.
So now that we just have this little bar selected I'm going to drag it down to do it since we have this
on the shape it's going to automatic automatically when I make it shorter.
Keep those curves the same.
So I can make this handle shorter very easily without having to change the curves.
So now I'm just kind of adjusting and trying to make this a little more simple of an icon making sure
everything's center aligned as I go along.
And so we can now angle or a little icon.
I think when it comes to a search icon you might need to make this a pretty short handle because when
you have search icons on Web sites they usually put in square kind of boxes.
So we really want to make sure this whole fit well on a square box so let's go ahead and angle it.
If you like it angled we can mess with the color as well.
So we can change the thickness of this outer line.
We can add a little detail perhaps make it look like a reflection.
So I'm just drawing a twisted one point and another point with the pin tool.
And so now I'm going to go down and add my my rounded cap right here with the stroke to add my rounded
cap to get nice smooth caps and I'm going to reduce the weight on this.
I'm just trying to emulate reflection.
So sometimes that's done with lines like this so all I did was did the pen tool drew a line and then
added My rounded cap
OK.
So that's one option what I like to do when I do icon development or local development or symbol development.
I like to make what's called different iterations and iterations is just a fancy word for another version
just to see.
So I can compare several different ones and see which one I think works the best.
So we're going to do just that.
Copy and paste we're going to try a version without the reflection and I think we're going to do like
maybe a glass reflection so what I'm going to do things in a click.
I have the pen tool the click and hold.
And that kind of a curvy shape across just like this.
And I'm going to keep going around my stroke just like this and make a complete shape.
Make that a different color.
You can kind of see what's happening.
So that's the shape that we created.
I want to send this behind everything.
So I'm going to right click range.
I'm going to send it as the back layer.
So I'm going to do this a lot throughout.
Projects is going to be right clicking objects and I'm going to be arranging them the shortcuts study
some of these shortcuts because some of them are really make it instead of having to right click and
go through this process.
You can do shortcuts for now I'm going to do a little bit of the long way so you guys can get comfortable
with that and learn the shortcuts as you do more and more projects.
Just be aware there's always shortcuts that you can do for almost anything in this program.
So I can go a range and I get to send backwards
arrange send to back and I'll send it to back it will it all the way to the last layer.
So that's another option.
We could do of course the colors are not final at this point we're just doing red so you can kind of
see your shape.
We could do another variation where maybe maybe it's upright
and maybe we don't have anything that's kind of our different iterations so one thing I want to do is
I want to change the color.
I don't like this red.
It's not really going to go with the web design I have.
So I'd like to do kind of a cool gradient with this too.
So one thing we are going to have to do any time you add a gradient or you change the size up and down
and you have a shape that has a stroke to it similar to this little circle here.
We want to make sure that path is outlined so that when we make it bigger it doesn't get smaller and
if we make it smaller it doesn't get thick.
So similar to this when it happens.
Right.
We want it to stay the same weight or thickness as we mess around with it.
So one thing I am going to do is I going to select all three of our circles to object path and outline
stroke.
So now that stroke is outlined and now it's a shape.