Let's start applying our same grade so right now this is a path.
So you see how its path and it's not outlined yet.
So when we apply to make a little bit bigger it gets really skinny if we make it small like it's really
thick.
So we need to get an outline that path.
So I'm gonna go up to object path outline stroke but since once it's outline that's it you won't be
able to change the thickness of it very easily.
So just kind of be ready for that to be committed to that thickness so same thing with these little
squares.
Go ahead go to object path outline stroke.
So those are now objects set up a path so I can go and select all.
Let's go ahead and take the Eyedropper tool be able to sample or gradient and then let's go and get
a gradient tool and change the direction of it so we can have it be purple than the blue or we can have
it be the other way
kind of like a purple down to blue.
Leave it at that.
These are individual lines if you want one to be change shorter than the other you can do.
You have my new control over each one of these little objects that we selected.
Not sure if we want to make those a different color to really bring out the checkboxes we go got our
swatches and make it a solid orange color something that's really got to pop out maybe keep it a bright
green.
It's pretty dynamic.
Just depends on the look we went to go for.
So let's say we want to create some action icons.
So for instance there is an addition icon there's a subtraction icon something they're doing on the
website where they're going to be interacting with something.
So let's create a few icons that help the user kind of have a symbol for addition and subtraction of
certain objects.
So for example I'm going to do a circle now and apply a thickness to it.
Let's do like a light gray switch to stroke and new kind of the same thickness as we were using with
the tool over here the icon over there get a little more thick.
Let's say I want to do an addition sign.
So it'll be as simple as taking a rectangle tool.
Switching that to fill and then I'm going to copy and paste that same rectangle tool and I'm going to
go to object and I'm going to I want to make it I can always rotate it or I can do it perfectly by going
to transform rotate.
And I want to rotate this 90 degrees.
So now I'll be able to make a perfect addition sign with these two objects.
And what I want to do is I want to make sure they're aligned horizontally.
But I also want to make sure they're aligned in other ways as to so we can do all the center alignments.
So that's a perfect perfect alignment horizontal and vertical.
So I just made kind of like a little addition little icon.
Let's do a little iPhone icon to indicate maybe a cell phone number over to download a mobile app list
just like it do like a little iPhone or Android phone type outline.
So now that we know some of these tools start going a lot quicker it's going to get a rounded rectangle
tool.
It's going to go ahead create a rounded shape.
This will be our phone we go up to shape and maybe reduce the size of the corners.
So it's not as dramatic.
You should do that manually cutting that in half.
That's probably about the size.
Can one look at a phone for a reference or bring up a photo of a phones and get some reference.
Let's go ahead and draw a rectangle box on top it's going to be our screen.
We can make it a new phone and not have the button more we can do an older phone and have a little button
icon down there.
So let's do an older phone.
Let's go and grab a circle just doing shapes at this point not even working with the pen tool yet.
So just like that we have a little iPhone icon.
But I want to make this punched out.
So I want to put this icon on any colored background and not have this white shape here.
I want to punch this white shape out.
So for example let's go and get.
I'm just doing this to show you an example.
Let's do a red color to sending this to the back.
Arranged in the back.
So right now I want that red to show through.
I want this to not be a white thing.
So how do we do that.
Two things we do the Pathfinder tool we could select our two white objects and group those together
and then we're gonna select our object below.
We're going to punch it out and go to Pathfinder.
So do I have Pathfinder listed.
Nope.
So it's got a window and find it.
There it is Pathfinder and we can do.
Let's see if we can't do an exclude.
There we go.
We punched it out but it's going to Pathfinder and doing the exclude option or you could do what I like
to do if you have the option available do the shape build or tool and then you can just hold down the
option key you're going to switch into subtraction mode you'll see a little subtraction sign and you
get to click once to delete the screen and then you're going to delete the button.
And so now we have our icon that's ready to go to go ahead and sample our gradient color we've been
using go to the gradient tool and find the right gradient flow and just like that we have a little icon.
So we can adapt some of these little things to indicate text on the phone maybe it's a chat we could
do bubbles.
So that's like reading an article or I could do a little bubble chat bubbles so let's go ahead grab
the rounded rectangle tool we did create a couple of text bubbles Well let's not make such a dramatic
curve so we're going to shape up here kind of reduce that a tad it's half that's due in 0 5.
There's our little chat icon.
We can even put take our pen tools is when we finally grab our pin tool.
I'm just going to create a little triangle which could indicate our chat bubble net could take my direct
selection tool and make it a smaller chat bubble.
And then all I'm going to do is go to object group or shortcut right click group.
I'm going to copy and paste this object and I want to flip it around.
So I'm going to go to object transform and I going to reflect it.
So I'm just going to reflect it looks that wasn't a true reflect off.
That's why change up the night usually defaults by 90 degrees.
You go ahead and apply your gradients to this as well.
Or you can make that gray
light gray to add a little more contrast to the piece
so that can indeed indicate chatting.
Make that a little bit bigger it's more obvious remember we've got to make things as simple as possible
with little small icons going to make sure those are aligned left.
So there's our little phone icon.
You can also do a tablet.
So let's say we do a tablet.
We're gonna make it a lot thicker maybe about like an iPad Pro or something could be really thick.
Change this less thick.
Let's do like a point 0 6.
Same thing we're gonna add a square screen.
We're going do like an iPad Pro and make not have a bubble or a button.
They got rid of the buttons so there's like an iPad Pro and you could put grab our little icons here
that indicate text maybe an article
maybe you could do a square that indicates a photo and bring this down so we have the photo on the top.
Like they're reading an article right.
I'm going to go ahead.
When did the same thing.
We have this it's going to make these really crazy colors so we have this red object here and we have
our object here we want to punch it out.
We don't want to have that blue box we want that to be transparent just like both objects.
I need to use the shaped older tool this time me to hold down option key in windows.
Go ahead put up what that is.
I'm in subtraction mode.
I'm just going to subtract the metal object and then go back and put our gradient back on this K to
make this less busy we can make this gray so not too many colored gradient things going on.
You don't want to overwhelm people stretches all the way across to look like they're reading an article
and just like that we have a little tablet option we can add a button if we want to make it an older
tablet so there's kind of our icons we created really quickly let's say we were ready to export our
icons and I think what I'm going to do I'm personally going to make this decision.
I just wanted to show you the drop shadow.
But I'm personally going to remove that because I really want to keep this flat design and flat designs
when you don't really add a whole lot of shadows.
And if you do they're flat they're not blurred like that.
So I'm going to keep them really simple.
I just wanted to really show you how to do that.
So I think I'm going to make the decision that these are nice and clean over here because I use gray.
Let's make this gray as well.
I think this icon is just too busy with everything being a gradient it's select all of these options
click the gray and that simplifies that list quite a bit.
It can also make the squares Gray loops.
I need to zoom in on that one.
One two three eyedropper tool Gray.
Now you just see the checkbox marks and that much more clean you might need to darken that a little
bit but let's not mess with that another time.
OK.
So I'm ready to export these icons to go ahead and save and I'm going to go ahead and go to export.
I'm going to export as to where to do what I showed you earlier but I'm going to go into a little bit
more detail so pages are great because you could have a transparent background if you export as a jpeg.
Go ahead bring up JPEG.
If you export of as a jpeg you'll have the white background connected with it and you won't be able
to punch out that white background.
So if you want to have the white parts of these art board to be transparent which is what you're going
to want to do a G.
Just go ahead make sure you click on art ports because it's going to export it and crop it according
to the art boards you got to export.
I'd like to do high resolution but with web you want to make sure you keep your file size down.
So I'm going to go ahead and do 150 people by 300 is standard for print but for web it's 72.
But with the invention of higher resolution screens I don't mind pushing that number higher than 72
and doing like 150 to 300.
So just work out with your web designer whoever is going to be making this happen click OK I'm just
replacing the icons because I've already exported once.
Here's all my digital icons.
You can click on the pages and they're all on transparent backgrounds which is exactly what we wanted.
So there you go.
We just developed an entire icon set and we'll be ready to do our next project.