How to use Illustrator for Web & UI design – Illustrator Advanced Training [51/53]

Articles, Blog

How to use Illustrator for Web & UI design – Illustrator Advanced Training [51/53]

How to use Illustrator for Web & UI design – Illustrator Advanced Training [51/53]


Hi YouTube, this is a free extract
from my larger Illustrator Advanced Course. You can check that out on
bringyourownlaptop.com Also, there’s a link in the description
for the exercise files. Those are free to download,
so go and download those. All right, enjoy the video. Hi there, in this video
we’re going to look at… using Illustrator for Web & UI App design. Now Illustrator is one of the tools
that gets used a lot… by UI/UX designers
to build things like websites and apps. We’re not going to go through
everything possible… for Web and UI for Illustrator. I’ve got a completely other course
that’s dedicated to it. It’s another 50 videos… so if you want to go in,
like full board and do it… go check out that course. You’re looking for that little
smiley man icon. It’s the Web & UI design in Illustrator… but this is the advanced course,
I don’t want to kind of leave you hanging. So I’m going to give you that kind
of high level stuff that you need to know. The first one is exporting
these graphics… that you’ve created for
a website or an app. We’re going to work on the
mobile version first. What I’d like to do is– let’s say we’ve drawn this tick
in the circle. I want to export that for my website. So there’s a couple of ways. I’m going to ungroup this first,
because I don’t want the text. I want these two, so I’m going to
zoom in, and go to you. So I’ve got both of them selected,
they’re not grouped. I can right click them… and go to ‘Collect for Export’,
‘As Single Asset’, or ‘As Multiple Asset’. I want this to be Multiple Asset first,
and just see what it does. So it’s opened up my Export Panel,
it’s already got a Kiwi in there. Hello. Goodbye. There is the circle
and the text separately. So what I might do is I might undo that.
The Kiwi comes back. Right click, and say,
‘Export’ for ‘Single Asset’. What I tend to do, is let’s say,
this logo at the top here… I just drag it in. If you drag it in while it’s grouped
it will kind of do a Single Asset. If it’s ungrouped, ‘Ungroup’,
and I drag it in… it does that kind of Multiple Asset.
Depends on what you need. The next thing is, I’m going to
select on this Asset here… I’m going to give it a name. It’s important, not important… but if you give it a name now… when you export it,
this is the name it’s going to get. So let’s call this my ‘Tick’. Down the bottom here, you get
to decide on the format. Now when you’re exporting for Web,
there’s three main formats. JPEG, PNG, and SVG. Basically JPEG’s good for images. PNGs are good for things
that have transparency… and SVGs are new, and fancy, and vector. It’s Scalable Vector Graphic,
that’s the acronym. They’re getting more and more popular. When I’m building a website,
as a Web Designer… I’ll use SVGs wherever I can
because they scale nicely. They look great on all screens. Talk to your Web Designer
or Web Developer for what they need. Some websites have to support
older browsers, and SVGs don’t work… so as a safe bet, you can do both. So what you do is, I want a PNG,
I want to add– don’t think Add Scale, think Add Version. So this has made a bigger size for me. I don’t want a bigger size,
I just want to go to SVG… so I got 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 this guy… and say, I’m going for iOS,
which is your iPhone… or Android, which is pretty much
everything else, if I click on that… it’s going to give me– this is what
my App Designer 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 click them all of. Let’s say we go for Web Design,
so I’ve got ‘Add Scale’. I’m going to not add a suffix,
just going to make this ‘1’. This guy down here, ‘SVG’. This is kind of really common
grouping to send up… but again, talk to your Web Developer. Now once you’ve got it,
you click on ‘Export’. Give it a folder, it’s going to
lump mine on my ‘Desktop’, click ‘Choose’. We’re going to have to check
on the Desktop. I’ve got this junk from
when I was practicing. There’s the Kiwi. I’ve got my ‘tick’, which is my PNG… and my SVG. So that’s how to export
just single graphics. You’ll do that a lot, the text will get
built in HTML, in CSS. If you are interested in
this kind of thing… I’ve got quite a few Dreamweaver courses
for building websites. If you want to get into a bit
of HTML in CSS, go do that one. One thing you might notice is… if you are a big fan of
using Clipping Masks… there is something pre-made. It’s got no Fill. Let’s go, give him a Fill. I want to crop it down to say
this size, for some reason. I’m going to hold down ‘Command 7’,
or ‘Control 7’ on a PC. So I’ve cropped it down. Problem is, when I drag it
into my Assets Panel… can you see, it’s got my graphic there. It’s a little hard to see,
you might have to zoom in. Here we go, but it’s actually got
this kind of– can you see, all the stuff
around the outside here… it’s actually included it in the thing. So it’s not going to be a nice trimmed box. It’s going to have a
junk around 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. Select it. I like to use
my Shape Builder Tool… which is ‘Shift M’, here he is there. And I’m just going to delete
this stuff off. It’s a better kind of way
of preparing graphics… because now, that thing there,
if I drag it in… it’s actually all the way to the edges. There’s a little bit of gap at the top,
don’t worry. For some reason I really
like to show a square… but that’s all trimmed up now. Now that happens as well with images. So you do a lot of cropping of images
in Illustrator… so I’m going to bring in an image,
just a random one from my Exercise Files. Let’s say I want to crop this down
to a circle. I do a tiny circle around his head. I crop it, it’s the same principle here,
if I drag it in… it’s made this big graphic
with this little circle in the middle. The outside’s transparent,
and that might be okay 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. And I’m going to select on this guy,
and there’s one that says Crop Image… and I can drag it, so it… it should snap it,
it’s not snapping at the edges. Go to ‘View’, ‘Smart Guides’,
turn those on. So get it kind of where you want it first,
hit ‘Return’. Cool thing about that, that is cropped… there’s like, pixels are gone.
Photoshop cropping. 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 save that one probably as a JPEG. Another interesting thing
to know is that… this guy over here is being added,
so we’re going to call him ‘Blob’. And this guy has been added. And he is ‘Man’. What ends up happening here is that,
it’s not a one way street, right? So this guy, if I update him,
and give him a different Fill color… you’ll notice that he updates up here. That’s true of all these graphics. So you can kind of name them,
spend some time. Work out what kind of versioning you want. So, I want to select all of these guys. Hold ‘Shift’, and click them all. I want PNGs, I want some JPEGs… and I want some SVG goodness. If I hit ‘Export’… Select them all again. It will only export the ones
you have selected. Click on ‘Export’. Back in the same place. It will override
the ones you already have, which is cool. So my Blob now, ‘Blob’,
there’s two versions. JPEG, PNG, and SVG… but if I go and quickly update this… the designer comes back
and says, “It’s not working”… or you are the Web Developer,
and you’re like, “I don’t like it”… come back into here, and I just
click on this one guy, click ‘Export’… and he’ll go back out now. Replace all those fellas. It’s a nice cool,
like little system to get going. Good work, Adobe. Next thing is– so we got the graphics out, but the text
doesn’t want to be included as graphics. Your Web Designer doesn’t want
the actual graphic. The text will be the actual text,
and the styles that you’ve used. So you could obviously go in here,
and tell him it’s Open Sans, and it’s 14… but they want to know
all sorts of things about it. That can be problematic, unless you go
to ‘Window’, and go to ‘CSS Properties’. The cool thing about it is,
especially text is easy. You can see, it tells you the– this is the CSS code, if
you’ve not used it before. That’s the code that says, “I am Open Sans,
I’m Bold, and these are the colors.” So it’s super handy,
you can just copy and paste it… and zoom in and say, this title is this. You can get super fancy
and start naming Character Styles… and it will give you Classes. Often I just copy and paste this
as I’m building. You can do it for– text is really easy,
just click on it, and you can see… this is Playfair Bold,
and it’s all the code. Now let’s say there’s kind of red box
in the background here… say I want to export this as a graphic. I probably wouldn’t, I’d build that in CSS,
but anyway… let’s say you did, it says
there’s no code generated… because there’s no name for it. It needs a name.
You do it in your Layers Panel. So twirl this down,
it should show me in here. See that blue dot? That blue dot indicates,
that’s the thing you’ve got selected. If I double click it, and give it a name,
and call this one ‘Red_Box’. When you’re naming things like this
in Web Design… it’s often hyphen ‘_’, no spaces. And you can see, now it is selected,
it says– my Class with Red Box
has got a background color of this. So there’s just some really cool stuff. If you want to get a bit
more hard core into it… you can go into the ‘Burger
Menu’, go to ‘Export Options’. At the moment it’s only
telling me the basics. That’s what I want. Yours might be on by default, I can’t
remember if I’ve turned this on or off… but you can ‘Include Dimensions’
and the ‘Absolute Positioning’. So click ‘OK’, and it’s giving me
how far it is from the top and left. There was another option in there,
let’s have a look, ‘Export Options’. Generate CSS for Unnamed Objects. Instead of having to go and name them,
to be all official… just tick that on, and that will
let you create CSS for everything… without having to go and name them. Next thing to know is… we’re going to go,
something called Pixel Preview. Down the bottom left
of this desktop version… let’s go down here, to him. Let’s close down my CSS Properties. Let’s talk about pixels… because in Illustrator,
it’s a vector drawing program. So it scales, everything looks
super sharp on the edges… but when I go to images,
in Web Design, often– JPEGs or PNGs, they use pixels. And pixels, not as sharp around the edges. So what we need to do is, before we–
say I want this to be a PNG. I need to preview it in ‘Pixel Preview’. So ‘View’, ‘Pixel Preview’. What you’ll find is, a lot of graphics… will end up looking really good
in Illustrator… but when you export a PNG… they’re kind of fuzzy along
the sides, or one side. So what you can do is you can
turn that on first of all… it shows you what this would look like
if it was pixels. So you can see, my lines,
it’s turned that on and off. Couple of things you can do,
let’s say this line here– I’m going to turn on
my Pixel Preview again. It’s not looking great,
because it’s kind of– the problem is, the Stroke is not– Is it 1pt, I’m not sure.
It is 1pt, which is cool… but it’s kind of straddling
two pixels here. So what you can do is
you can right click it… and say, ‘Make Pixel Perfect’. So just kind of adjusts it.
Now it has moved, literally has moved… but for me, that’s better having it fuzzy. So you can decide. This guy here, same thing,
you, ‘Make Pixel Perfect’. Everything will just kind of tidy up. That box is a slightly different size. Text is a little hard. Adjusting Type can really–
it depends on how… how precious you are with Type. Especially small Type, it changes it
quite a bit, 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 one’s
a little bit higher. Big fonts you won’t notice… smaller fonts you might,
so be careful there. The other thing you can do… is if you know you’re going
to use it for Web Design… just draw stuff that– you can see, ‘View’ there’s one called
‘Snap to Pixel’, make sure that’s on… because what happens is, with that off
I can draw something… like a rectangle here, and it will
just kind of appear wherever it likes… whereas if I do the exact thing,
and say, ‘Snap to Pixel’, and draw him… he will 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 rounder corners,
everything is rounded… if I go and make Pixel Perfect… it kind of works,
but sometimes it just messes up. It’s really easy for lines and squares,
but really complex shapes, not so good. I’m going to turn off my Pixel Preview,
and let’s look at two more things. One is exporting, actually no,
it’s symbols. Let’s say that– as good as you guys were,
I’m putting you up here. I need to make a– when you’re doing UI design… in this course, we just kind of
made Desktop, Tablet, and Mobile. When you’re doing Mobile, you end up
creating like 50 Mobile mock ups. All the different pages. On an App, you might have a
hundred different screens. What you don’t want to do,
is let’s say I want to duplicate this. I’m going to grab my ‘Artboard Tool’,
hold ‘Alt’ while I’m dragging… and if I make adjustments to this… and this is now the Contact Us page… the problem is, if I adjust
this heading now… I’m going to have to go back,
and copy and paste it on every page. So what you do, once you got
like a base level going… you got to create a symbol. 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 this little turned up page. I’m going to give it a name,
this is going to be ‘Mobile Nav UI’. Click ‘OK’. Nothing really changes,
it’s kind of like a group now… but what ends up happening is– I’m going to close down my Symbols Library. I’m going to zoom out,
grab my ‘Artboard Tool’, make a duplicate. And now what’s going to happen is,
let’s say, client comes back and says… “Actually there’s been some usability
problems with the sizes and fonts.” So I’ve double clicked it
with my ‘Black Arrow’. And it says, “Be careful,
you’re editing a symbol.” I’m like, “Awesome, I know.” I’m going to ungroup these,
and I just want this guy. So you my friend now, is going to be
something else, like Open Sans, Extra Bold. I’m going to click this arrow,
until I get back out. What you’ll notice is, it updates. So great for Navs, and like, Footers. Anything that’s kind of consistent
on your website. Logos, that type of thing. All right, before we finish,
the last thing that’s kind of useful. 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 XD
or InVision… which kind of allows you to
add interactivity to things like JPEGs. So what we’re going to do is
export the screen. So ‘File’, go down to ‘Export’. They call it Screens,
so all the different screen sizes. And not Assets, okay?
You can kind of do it from here as well. But under ‘Artboards’, I can say,
I want all of these guys exported. What do I want to export them as? I want them exported as JPEGs at 80%. So you can fiddle around
with what you want to do. Export that, and either just– Over down here is a PDF option,
that could be quite helpful… because then it’s a multi-page PDF. Or if you want to add interactivity
in XD or InVision… you can export maybe JPEGs to send it up. All right friends, that is
the key version… of being a UI Web Designer
with Illustrator. Know that there’s a lot more you could do. So check out that course if you’re keen. Otherwise let’s get on to the next video. Hey there, I hope you liked it. If you did, give me a thumbs up,
it really helps out what I do. I’ve got lots of other stuff
here on YouTube, so consider subscribing. Also, I want to see what you made. You’re obviously doing
something, don’t be shy… I’d love to see what it is. If you put it up on Instagram,
I’d love to– If you were to mention me,
I’m bringyourownlaptop on Instagram. And on Twitter, I’m danlovesadobe. Also, if you like my teaching style… and you want more advanced
Illustrator stuff… there’s the full course,
it’s on bringyourownlaptop.com There’ll be a link in the description. Also on bringyourownlaptop… there’s a Resources tab,
there’s a free Cheat Sheet in there. Free, totally downloadable. It has all the, kind of– we did the keyboard shortcuts,
and stuff for Illustrator… It’s a PDF, you print it off,
stick it next to your computer. It’s awesome. All right, continue on. Bye now.

9 thoughts on How to use Illustrator for Web & UI design – Illustrator Advanced Training [51/53]

Leave a Reply

Your email address will not be published. Required fields are marked *