High there in this video we're going to look at using illustrator for web and UI app design.
Now Illustrator is one of the tools that gets used a lot by UI design is to build things like Web sites
and apps.
Now we're not going to go through everything possible for you for illustrator.
I've got a completely other course that's dedicated to it like it's going to it's another 50 video so
if you want to go in like full bore do it go check out that cause you're looking for that little smiley
man icon the case of the web in UI design in Illustrator.
But this is the advanced course and I don't want to kind of leave you hanging.
It's going to give you the kind of the high level stuff that you need to know.
The first one is exporting these graphics that you've created for a web site or an app.
So we're going to work on the mobile version first.
OK.
And what I'd like to do is let's say we've drawn this like a little tech in the circle and want to export
that for my web site.
So there's a couple of ways.
So I'm going to group this first because I don't want the text.
I want the two zoom in I got you go.
So I've got both of them selected the not grouped.
I can right click them and go to explore click for export as a single set or multiple sets and saying
last to multiple Les's first and to see what it does.
So I opened up my expert panel already got to keep in there.
Hello goodbye.
And this is the circle and the tick separately.
OK so what I might do is undo that comes back is right click and say export.
For singles it or like what I tend to do is let's say this logo at the top here and I just drag it in.
OK and if you drag it in while it's grouped it will kind of do a single asset if it's ungrouped and
grouped.
And I drag it in.
It is that kind of multiple exits.
Depends on what you need.
And the next thing is is I'm going to select on this I said here I'm going to give it a name that's
important not important but if you give it a name.
Now when we export it this is the name it's going to get.
So let's call this my tech.
And then the bottom he you get to decide on the format.
Now when you exporting for with this three main form is J pig p n g and SPG now.
AB basically depicts images P and Gs are good for things that have transparency in SVGA and new and
fancy and Victor it's scalable vector graphic is that acronym.
And they're getting more and more popular when it's on building a web site as a web designer.
I'll use a species where ever I can because they scale nicely.
They look great and all screens but talk to a designer a web developer for what they need.
Some web sites have to support older browsers.
CDs don't work so as a safe bet you can do both.
So what you do is I want a PC I want to add.
Think don't think Ed scale think adversion gazes made a bigger size for me.
I don't want a bigger size I just want to go to is Ficci.
So two options here.
Now this is kind of for web design if I wanted to go for app design the easiest way is to click on the
sky and say I'm going for iOS which is the or iPhone or Android which is pretty much everything else.
I click on that.
It's going to give me this is what my app design or app developer wants.
They want a small size the regular size and a bunch of other different scales.
So goes up and down.
So it's just done for you.
Can I undo.
I can't.
I'm going to have to clear them all off.
Let's say we go for web design so I've got Let's go.
I'm going to add a suffix.
It's kind of like this one one guy down here is Viji this is kind of a really common kind of grouping
to say now.
But again talk to your web developer.
Now once you've got it you click on export and give it a folder on the desktop click Choose.
We're going to hitchhike on the desktop and I've those junk from when I was practicing.
And there's the Kiwi.
So I've got my tick which is my PNB and my SPG.
And so that's how to export just single graphics and you'll do that a lot.
The Takes will get built in extreme L and C Ss if you are interested in this kind of thing I've got
quite a few Dreamweaver courses for building web sites if you want to get into a bit of a thesis go
to that one.
And one thing you might notice is if you are a big fan of using clipping masks there is something pre-made
but I've got a block game and it's going to fail.
OK let's go get him a film.
And I want to crop it down to say the size.
For some reason I'm going to hold down commands given all controls even on a PC case or cropped it down.
Problem is when I drag it into my assets panel can you see it's it's got my graphic there's a lot seem
to zoom in.
There we go.
But it's actually got this kind of you can see all the stuff on the outside here.
It's actually included in the thing so it's not gonna be a nice trimmed box.
It's going to have a junker on the outside.
So what you need to do is with it selected actually before you do it before you kind of clipping mask
or Right-Click and release the clipping mask selected.
I like to use my shape build to tool which is shift him.
There he is there and I'm going to delete this stuff.
If it's a bit kind of a way of preparing graphics because now that thing then if I drag it in it's actually
all the way to the edges.
OK.
There's a little bit of get at the top don't worry.
For some reason I really like to show Square but that's all trimmed up now.
Now that happens as well with images.
Case you do a lot of cropping of images in Illustrator.
So I'm going to bring in an image just random one from my exercise files.
OK.
And let's I I want to crop this down to a circle and I do a tiny circle round his head.
OK and I crumpets the same principle here if I drag it in.
It's made this big graphic with this little circle in the middle.
It also is transparent and that might be OK for you but what you need to do is with this guy selected
what you need to do is I'm going to release the clipping mask again k and slicked on this guy and this
one this is Krop image OK and I can drag it so it it should snap if it's not snapping to you.
Just go to View smartcards into his own case to get a kind of we want it first rutin and the good thing
about that that is cropped is like pixels gone like Photoshop cropping.
OK so it's a cool new feature in Illustrator.
Now I get to make my mask drag it in and it should be an entire circle.
Give it a name and in this case we'll shave that one out probably as a joke.
Now the interesting thing to know is that this guy over here is being added.
So we're going to call him gay and this guy's been added and he is man.
Great you see Odin what ends up happening here is that that's not a one way street.
Right.
So this guy.
Update him and give him a different color.
You'll notice that he updates up here.
OK so that's true.
All these graphics so you can kind of name them spend some time work out what kind of versioning you
want.
OK so I want to see all of these guys hold shift and click them all and I want pink one some pigs and
I want some goodness.
And if I head exports and it's like the mall again I learned what the ones you have selected.
OK click on export.
Back in the same place it'll override the ones you already have which is code.
Ok so my blog now log there's two versions.
Pig punji and it's Fiji Kaiba.
If I go and quickly update this OK the designer comes back this is not working or will the Web developer
and you like I don't like it can beckon to here and I click on this one guy click export and Hugo back
out now replace all those fellows.
It's a nice cool like little system that I go and work it out.
Next thing is we've got the graphics out but the text doesn't want to be included in as graphics a web
design it doesn't want the actual like graphic of the text they want the actual text and the styles
that you've used.
OK so you could obviously go in here until it was open Saens and 14 but they want to know all sorts
of things about it and yeah that can be problematic unless you go to a window and go to s.c.s properties.
OK.
And the cool thing about it is she takes as easy you can see it tells you the this is the CCs for it
if you've not used it before.
OK that's the card that says I am open Saens and bold.
These are the colors.
So super handy you can just copy and paste that and in them and say this title is this thing is super
fancy and that naming character styles can ever give you classes.
Often I just copy paste this as I'm building and you can do it for text is really easy you click on
it and you can see this as Playfair bold and it's all the code.
Now let's say this kind of red box in the background here say I wanted to export this is a graphic.
I probably wouldn't build that NCSA.
But anyway they say you did and this is there's no code generated because there's no name for it.
It needs a name.
You do it in your layers peno.
OK so tulis down it should show me in here.
See the blue dot that blue dot indicates that's the thing you've got selected.
If I double click it can give it a name and call us 1 red red on the square box.
When you're naming things like this and webdesign design it's often hyphen no spaces.
Hyphens are in the schools.
And you can see now with it's like this is my class of red boxes.
Got a background color of this.
OK so this is some really cool stuff if you want to get a bit more hardcore into it and you can go into
the big I mean you could explore options.
The moment it's only telling me the basics.
That's what I want my own body for I can't remember if I turn this on or off or not but you can include
the dimensions and the EPA's absolute positioning case OK click OK and it's giving me how far it is
from the top and left.
There was another option in there to have a look export options and generate CCs for unknown objects
instead of having to go and name them to be all official.
Just take that on and it let you create s.c.s everything without having to go and name them all writes.
Next thing to know is we're going to go some called pixel preview.
So I've generally done the bottom left of this top version.
And let's go down here to him.
It's closed down my CACs properties and let's talk about pixels because in Illustrator right it's a
vector during programs so it scales everything looks over shop on the edges.
But when I go to images in webdesign often J pigs are Pean Geez they use pixels and pixels not as you
know I'm not a shopper on the edges.
So what we need to do is before we say I need this to be PMG I need to preview it in pixel preview so
view pixel preview because what you'll find is a lot of graphics will end up looking really good in
Illustrator.
But then you export the gene the kind of fuzzy on the sides of one side you like a case of what you
can do is you can turn that on verst and it shows you what this would look like if it was pixels.
Casey you can see my lines that turn that on and off go.
And so there is there's a couple of things you can do.
Let's say this line he can turn on my pixel preview again.
It's not looking great OK because it's kind of the problem is the stroke is not.
At one point I'm not sure it is one point which is cool and but it's kind of straddling two pixels here.
So you can do as you can right click it and say my friend make pixel perfect.
Ok so it just kind of adjusts it.
Now it has moved like literally has moved.
But for me that's better than having it fuzzy.
So you can decide.
And this guy here.
Same thing.
You make pixel perfect.
Everything will just kind of tidy up that box is a slightly different size.
Takes is a little hard right and adjusting type can really depends on how how precious you are with
type like especially small type.
It changes it quite a bit because you can see that it's actually quite like things have happened to
that font.
Depends on if you can live with that or not.
You can see that top ones a little bit higher.
So you get big phones who won't notice smaller fonts.
You might.
So be careful there.
The other thing you can do is if you know you scan for web design just draw stuff that you can see view.
There's one called snapped pixel.
Make sure that's on OK.
Because what happens is when they're off I can draw something and like a rectangle here and it would
just kind of appear wherever it likes whereas if I do the exact same thing and say stamped pixel and
jorum and he will you know try and be in the right spot.
Now this works for simple shapes like this really complex shapes.
It just kind of doesn't know what to do.
It's rounded corners everything's rounded If I go make pixel perfect kind of worked.
But sometimes it just messes up.
It's really easy for lines and squares really complex shapes and also it can go.
Turn off my pixel preview and let's look at two more things.
One is exporting actually no symbols.
Let's say that's as good as you guys we're giving up here.
I need to make.
You know when you're doing UI design in this course.
We just kind of made a desktop tablet and mobile but when I'm doing mobile you'll end up like creating
50 mobile like mockups.
OK of all the different pages or an app OK you might have a 100 different app and screens.
What you don't want to do is duplicate this right thing or grab my iPod to hold alt while I'm dragging
to another version.
And if I make adjustments to this and I this is now the contact us page.
The problem is just hitting now I don't have to go back and copy and paste on every page.
So what you do once you kind of get like a base level going you're going to create a symbol.
OK so I'm going to select all of this and I'm going to go to window go down to symbols and I'm going
to make a symbol by clicking that little turned up page and I'll give it a name.
This is going to be my mobile nav UI.
OK click it came and nothing really changes it's kind of like a group now.
But what ends up happening is I'm going to close down my symbol's library.
I'm going to mount my iPod to make a duplicate.
And now what's going to happen is let's say Klein comes back and is actually and there's been some usability
problems with the size of this font right.
So I've double clicked up with my black hair and it says Be careful you're getting a symbol.
Awesome enough.
And I'm going to ungroup these and I just want this guy to you my friend now is going to be something
else like I've been sans extra bold.
OK.
And I'm going to click this area until I get back out and what you'll notice is that updates.
OK so great for navs and like foot is anything that's kind of consistent on your Web site logos that
type of thing.
All right.
Let me finish the last thing we.
That's kind of useful is let's say I've got this and I want to send it to the client to proof or I want
to add some interactivity maybe with something like a D or envision which kind of allows you to add
interactivity to things like date things.
And so what we're going to do is we're going export the screens so file go down to export and they call
it screens gaze all the different screen sizes and not assets.
OK.
You can kind of do it from here as well but and upwards.
I can say I want all of these guys exported what are on them exported as one of them exported as de
pigs at 80 percent.
OK so you can fiddle around with what you want to do but export that and either just or maybe down here
there's a PDA function that could be quite helpful because then it's a multi-page PDA or if you want
to add interactivity and XTi or does it envision you can export maybe take pigs to sing to that.
All right friends there is the skinny version of being a web designer with Illustrator.
No that's it.
There's a lot more you could do.
OK so Ticketek was of yoking.
Otherwise let's get on to the next video.