Hi there, in this video we're going to look at... 1
using Illustrator for Web & UI App design. 2
Now Illustrator is one of the tools that gets used a lot... 3
by UI/UX designers to build things like websites and apps. 4
We're not going to go through everything possible... 5
for Web and UI for Illustrator. 6
I've got a completely other course that's dedicated to it. 7
It's another 50 videos... 8
so if you want to go in, like full board and do it... 9
go check out that course. 10
You're looking for that little smiley man icon. 11
It's the Web & UI design in Illustrator... 12
but this is the advanced course, I don't want to kind of leave you hanging. 13
So I'm going to give you that kind of high level stuff that you need to know. 14
The first one is exporting these graphics... 15
that you've created for a website or an app. 16
We're going to work on the mobile version first. 17
What I'd like to do is-- 18
let's say we've drawn this tick in the circle. 19
I want to export that for my website. 20
So there's a couple of ways. 21
I'm going to ungroup this first, because I don't want the text. 22
I want these two, so I'm going to zoom in, and go to you. 23
So I've got both of them selected, they're not grouped. 24
I can right click them... 25
and go to 'Collect for Export', 'As Single Asset', or 'As Multiple Asset'. 26
I want this to be Multiple Asset first, and just see what it does. 27
So it's opened up my Export Panel, it's already got a Kiwi in there. 28
Hello. Goodbye. 29
There is the circle and the text separately. 30
So what I might do is I might undo that. The Kiwi comes back. 31
Right click, and say, 'Export' for 'Single Asset'. 32
What I tend to do, is let's say, this logo at the top here... 33
I just drag it in. 34
If you drag it in while it's grouped it will kind of do a Single Asset. 35
If it's ungrouped, 'Ungroup', and I drag it in... 36
it does that kind of Multiple Asset. Depends on what you need. 37
The next thing is, I'm going to select on this Asset here... 38
I'm going to give it a name. 39
It's important, not important... 40
but if you give it a name now... 41
when you export it, this is the name it's going to get. 42
So let's call this my 'Tick'. 43
Down the bottom here, you get to decide on the format. 44
Now when you're exporting for Web, there's three main formats. 45
JPEG, PNG, and SVG. 46
Basically JPEG's good for images. 47
PNGs are good for things that have transparency... 48
and SVGs are new, and fancy, and vector. 49
It's Scalable Vector Graphic, that's the acronym. 50
They're getting more and more popular. 51
When I'm building a website, as a Web Designer... 52
I'll use SVGs wherever I can because they scale nicely. 53
They look great on all screens. 54
Talk to your Web Designer or Web Developer for what they need. 55
Some websites have to support older browsers, and SVGs don't work... 56
so as a safe bet, you can do both. 57
So what you do is, I want a PNG, I want to add-- 58
don't think Add Scale, think Add Version. 59
So this has made a bigger size for me. 60
I don't want a bigger size, I just want to go to SVG... 61
so I got two options here. 62
Now this is kind of for Web Design. 63
If I wanted to go for App Design... 64
the easiest way is to click on this guy... 65
and say, I'm going for iOS, which is your iPhone... 66
or Android, which is pretty much everything else, if I click on that... 67
it's going to give me-- this is what my App Designer or App Developer wants. 68
They want a small size, the regular size... 69
and a bunch of other different scales, so goes up and down. 70
So it's just done for you. 71
Can I undo? I can't. I'm going to have to click them all of. 72
Let's say we go for Web Design, so I've got 'Add Scale'. 73
I'm going to not add a suffix, just going to make this '1'. 74
This guy down here, 'SVG'. 75
This is kind of really common grouping to send up... 76
but again, talk to your Web Developer. 77
Now once you've got it, you click on 'Export'. 78
Give it a folder, it's going to lump mine on my 'Desktop', click 'Choose'. 79
We're going to have to check on the Desktop. 80
I've got this junk from when I was practicing. 81
There's the Kiwi. 82
I've got my 'tick', which is my PNG... 83
and my SVG. 84
So that's how to export just single graphics. 85
You'll do that a lot, the text will get built in HTML, in CSS. 86
If you are interested in this kind of thing... 87
I've got quite a few Dreamweaver courses for building websites. 88
If you want to get into a bit of HTML in CSS, go do that one. 89
One thing you might notice is... 90
if you are a big fan of using Clipping Masks... 91
there is something pre-made. 92
It's got no Fill. 93
Let's go, give him a Fill. 94
I want to crop it down to say this size, for some reason. 95
I'm going to hold down 'Command 7', or 'Control 7' on a PC. 96
So I've cropped it down. 97
Problem is, when I drag it into my Assets Panel... 98
can you see, it's got my graphic there. 99
It's a little hard to see, you might have to zoom in. 100
Here we go, but it's actually got this kind of-- 101
can you see, all the stuff around the outside here... 102
it's actually included it in the thing. 103
So it's not going to be a nice trimmed box. 104
It's going to have a junk around the outside. 105
So what you need to do is, with it selected-- 106
actually before you do it, before you kind of, Clipping Mask... 107
or right click, and release the Clipping Mask. 108
Select it. I like to use my Shape Builder Tool... 109
which is 'Shift M', here he is there. 110
And I'm just going to delete this stuff off. 111
It's a better kind of way of preparing graphics... 112
because now, that thing there, if I drag it in... 113
it's actually all the way to the edges. 114
There's a little bit of gap at the top, don't worry. 115
For some reason I really like to show a square... 116
but that's all trimmed up now. 117
Now that happens as well with images. 118
So you do a lot of cropping of images in Illustrator... 119
so I'm going to bring in an image, just a random one from my Exercise Files. 120
Let's say I want to crop this down to a circle. 121
I do a tiny circle around his head. 122
I crop it, it's the same principle here, if I drag it in... 123
it's made this big graphic with this little circle in the middle. 124
The outside's transparent, and that might be okay for you... 125
but what you need to do is, with this guy selected... 126
what you need to do is-- 127
I'm going to release the Clipping Mask again. 128
And I'm going to select on this guy, and there's one that says Crop Image... 129
and I can drag it, so it... 130
it should snap it, it's not snapping at the edges. 131
Go to 'View', 'Smart Guides', turn those on. 132
So get it kind of where you want it first, hit 'Return'. 133
Cool thing about that, that is cropped... 134
there's like, pixels are gone. Photoshop cropping. 135
So it's a cool new feature in Illustrator. Now I get to make my Mask. 136
Drag it in, and it should be an entire circle. 137
Give it a name, and in this case we'll save that one probably as a JPEG. 138
Another interesting thing to know is that... 139
this guy over here is being added, so we're going to call him 'Blob'. 140
And this guy has been added. 141
And he is 'Man'. 142
What ends up happening here is that, it's not a one way street, right? 143
So this guy, if I update him, and give him a different Fill color... 144
you'll notice that he updates up here. 145
That's true of all these graphics. 146
So you can kind of name them, spend some time. 147
Work out what kind of versioning you want. 148
So, I want to select all of these guys. 149
Hold 'Shift', and click them all. 150
I want PNGs, I want some JPEGs... 151
and I want some SVG goodness. 152
If I hit 'Export'... 153
Select them all again. 154
It will only export the ones you have selected. Click on 'Export'. 155
Back in the same place. It will override the ones you already have, which is cool. 156
So my Blob now, 'Blob', there's two versions. 157
JPEG, PNG, and SVG... 158
but if I go and quickly update this... 159
the designer comes back and says, "It's not working"... 160
or you are the Web Developer, and you're like, "I don't like it"... 161
come back into here, and I just click on this one guy, click 'Export'... 162
and he'll go back out now. 163
Replace all those fellas. 164
It's a nice cool, like little system to get going. 165
Good work, Adobe. 166
Next thing is-- 167
so we got the graphics out, but the text doesn't want to be included as graphics. 168
Your Web Designer doesn't want the actual graphic. 169
The text will be the actual text, and the styles that you've used. 170
So you could obviously go in here, and tell him it's Open Sans, and it's 14... 171
but they want to know all sorts of things about it. 172
That can be problematic, unless you go to 'Window', and go to 'CSS Properties'. 173
The cool thing about it is, especially text is easy. 174
You can see, it tells you the-- 175
this is the CSS code, if you've not used it before. 176
That's the code that says, "I am Open Sans, I'm Bold, and these are the colors." 177
So it's super handy, you can just copy and paste it... 178
and zoom in and say, this title is this. 179
You can get super fancy and start naming Character Styles... 180
and it will give you Classes. 181
Often I just copy and paste this as I'm building. 182
You can do it for-- text is really easy, just click on it, and you can see... 183
this is Playfair Bold, and it's all the code. 184
Now let's say there's kind of red box in the background here... 185
say I want to export this as a graphic. 186
I probably wouldn't, I'd build that in CSS, but anyway... 187
let's say you did, it says there's no code generated... 188
because there's no name for it. 189
It needs a name. You do it in your Layers Panel. 190
So twirl this down, it should show me in here. 191
See that blue dot? That blue dot indicates, that's the thing you've got selected. 192
If I double click it, and give it a name, and call this one 'Red_Box'. 193
When you're naming things like this in Web Design... 194
it's often hyphen '_', no spaces. 195
And you can see, now it is selected, it says-- 196
my Class with Red Box has got a background color of this. 197
So there's just some really cool stuff. 198
If you want to get a bit more hard core into it... 199
you can go into the 'Burger Menu', go to 'Export Options'. 200
At the moment it's only telling me the basics. 201
That's what I want. 202
Yours might be on by default, I can't remember if I've turned this on or off... 203
but you can 'Include Dimensions' and the 'Absolute Positioning'. 204
So click 'OK', and it's giving me how far it is from the top and left. 205
There was another option in there, let's have a look, 'Export Options'. 206
Generate CSS for Unnamed Objects. 207
Instead of having to go and name them, to be all official... 208
just tick that on, and that will let you create CSS for everything... 209
without having to go and name them. 210
Next thing to know is... 211
we're going to go, something called Pixel Preview. 212
Down the bottom left of this desktop version... 213
let's go down here, to him. 214
Let's close down my CSS Properties. 215
Let's talk about pixels... 216
because in Illustrator, it's a vector drawing program. 217
So it scales, everything looks super sharp on the edges... 218
but when I go to images, in Web Design, often-- 219
JPEGs or PNGs, they use pixels. 220
And pixels, not as sharp around the edges. 221
So what we need to do is, before we-- say I want this to be a PNG. 222
I need to preview it in 'Pixel Preview'. 223
So 'View', 'Pixel Preview'. 224
What you'll find is, a lot of graphics... 225
will end up looking really good in Illustrator... 226
but when you export a PNG... 227
they're kind of fuzzy along the sides, or one side. 228
So what you can do is you can turn that on first of all... 229
it shows you what this would look like if it was pixels. 230
So you can see, my lines, it's turned that on and off. 231
Couple of things you can do, let's say this line here-- 232
I'm going to turn on my Pixel Preview again. 233
It's not looking great, because it's kind of-- 234
the problem is, the Stroke is not-- 235
Is it 1pt, I'm not sure. It is 1pt, which is cool... 236
but it's kind of straddling two pixels here. 237
So what you can do is you can right click it... 238
and say, 'Make Pixel Perfect'. 239
So just kind of adjusts it. Now it has moved, literally has moved... 240
but for me, that's better having it fuzzy. 241
So you can decide. 242
This guy here, same thing, you, 'Make Pixel Perfect'. 243
Everything will just kind of tidy up. 244
That box is a slightly different size. 245
Text is a little hard. 246
Adjusting Type can really-- it depends on how... 247
how precious you are with Type. 248
Especially small Type, it changes it quite a bit, you can see that. 249
It's actually quite-- like things have happened to that font. 250
Depends on if you can live with that or not. 251
You can see, that top one's a little bit higher. 252
Big fonts you won't notice... 253
smaller fonts you might, so be careful there. 254
The other thing you can do... 255
is if you know you're going to use it for Web Design... 256
just draw stuff that-- 257
you can see, 'View' there's one called 'Snap to Pixel', make sure that's on... 258
because what happens is, with that off I can draw something... 259
like a rectangle here, and it will just kind of appear wherever it likes... 260
whereas if I do the exact thing, and say, 'Snap to Pixel', and draw him... 261
he will try and be in the right spot. 262
Now this works for simple shapes like this. 263
Really complex shapes, it just kind of doesn't know what to do. 264
It's rounder corners, everything is rounded... 265
if I go and make Pixel Perfect... 266
it kind of works, but sometimes it just messes up. 267
It's really easy for lines and squares, but really complex shapes, not so good. 268
I'm going to turn off my Pixel Preview, and let's look at two more things. 269
One is exporting, actually no, it's symbols. 270
Let's say that-- as good as you guys were, I'm putting you up here. 271
I need to make a-- 272
when you're doing UI design... 273
in this course, we just kind of made Desktop, Tablet, and Mobile. 274
When you're doing Mobile, you end up creating like 50 Mobile mock ups. 275
All the different pages. 276
On an App, you might have a hundred different screens. 277
What you don't want to do, is let's say I want to duplicate this. 278
I'm going to grab my 'Artboard Tool', hold 'Alt' while I'm dragging... 279
and if I make adjustments to this... 280
and this is now the Contact Us page... 281
the problem is, if I adjust this heading now... 282
I'm going to have to go back, and copy and paste it on every page. 283
So what you do, once you got like a base level going... 284
you got to create a symbol. 285
So I'm going to select all of this... 286
and I'm going to go to 'Window', go down to 'Symbols'... 287
and I'm going to make a symbol by clicking this little turned up page. 288
I'm going to give it a name, this is going to be 'Mobile Nav UI'. 289
Click 'OK'. 290
Nothing really changes, it's kind of like a group now... 291
but what ends up happening is-- 292
I'm going to close down my Symbols Library. 293
I'm going to zoom out, grab my 'Artboard Tool', make a duplicate. 294
And now what's going to happen is, let's say, client comes back and says... 295
"Actually there's been some usability problems with the sizes and fonts." 296
So I've double clicked it with my 'Black Arrow'. 297
And it says, "Be careful, you're editing a symbol." 298
I'm like, "Awesome, I know." 299
I'm going to ungroup these, and I just want this guy. 300
So you my friend now, is going to be something else, like Open Sans, Extra Bold. 301
I'm going to click this arrow, until I get back out. 302
What you'll notice is, it updates. 303
So great for Navs, and like, Footers. 304
Anything that's kind of consistent on your website. 305
Logos, that type of thing. 306
All right, before we finish, the last thing that's kind of useful. 307
Let's say I've got this, and I want to send it to the client to proof... 308
or I want to add some interactivity... 309
maybe with something like XD or InVision... 310
which kind of allows you to add interactivity to things like JPEGs. 311
So what we're going to do is export the screen. 312
So 'File', go down to 'Export'. 313
They call it Screens, so all the different screen sizes. 314
And not Assets, okay? You can kind of do it from here as well. 315
But under 'Artboards', I can say, I want all of these guys exported. 316
What do I want to export them as? 317
I want them exported as JPEGs at 80%. 318
So you can fiddle around with what you want to do. 319
Export that, and either just-- 320
Over down here is a PDF option, that could be quite helpful... 321
because then it's a multi-page PDF. 322
Or if you want to add interactivity in XD or InVision... 323
you can export maybe JPEGs to send it up. 324
All right friends, that is the key version... 325
of being a UI Web Designer with Illustrator. 326
Know that there's a lot more you could do. 327
So check out that course if you're keen. 328
Otherwise let's get on to the next video.