WEBVTT 00:00.120 --> 00:06.990 High there in this video we're going to look at using illustrator for web and UI app design. 00:07.170 --> 00:13.560 Now Illustrator is one of the tools that gets used a lot by UI design is to build things like Web sites 00:13.560 --> 00:14.520 and apps. 00:14.520 --> 00:19.880 Now we're not going to go through everything possible for you for illustrator. 00:19.890 --> 00:25.740 I've got a completely other course that's dedicated to it like it's going to it's another 50 video so 00:25.920 --> 00:30.990 if you want to go in like full bore do it go check out that cause you're looking for that little smiley 00:30.990 --> 00:34.680 man icon the case of the web in UI design in Illustrator. 00:34.890 --> 00:37.750 But this is the advanced course and I don't want to kind of leave you hanging. 00:37.750 --> 00:41.600 It's going to give you the kind of the high level stuff that you need to know. 00:41.790 --> 00:46.630 The first one is exporting these graphics that you've created for a web site or an app. 00:46.680 --> 00:49.640 So we're going to work on the mobile version first. 00:49.640 --> 00:49.930 OK. 00:49.940 --> 00:55.330 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 00:55.350 --> 00:56.790 that for my web site. 00:56.820 --> 00:57.870 So there's a couple of ways. 00:57.870 --> 01:01.450 So I'm going to group this first because I don't want the text. 01:01.770 --> 01:05.870 I want the two zoom in I got you go. 01:05.970 --> 01:08.310 So I've got both of them selected the not grouped. 01:08.370 --> 01:15.120 I can right click them and go to explore click for export as a single set or multiple sets and saying 01:15.120 --> 01:18.000 last to multiple Les's first and to see what it does. 01:18.000 --> 01:20.650 So I opened up my expert panel already got to keep in there. 01:20.720 --> 01:22.290 Hello goodbye. 01:22.650 --> 01:25.730 And this is the circle and the tick separately. 01:25.890 --> 01:30.820 OK so what I might do is undo that comes back is right click and say export. 01:30.870 --> 01:37.850 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. 01:37.960 --> 01:43.050 OK and if you drag it in while it's grouped it will kind of do a single asset if it's ungrouped and 01:43.120 --> 01:43.590 grouped. 01:43.620 --> 01:44.600 And I drag it in. 01:44.760 --> 01:46.700 It is that kind of multiple exits. 01:46.710 --> 01:47.550 Depends on what you need. 01:47.670 --> 01:51.490 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 01:51.540 --> 01:53.790 important not important but if you give it a name. 01:53.790 --> 01:56.590 Now when we export it this is the name it's going to get. 01:56.610 --> 01:59.150 So let's call this my tech. 01:59.270 --> 02:01.930 And then the bottom he you get to decide on the format. 02:01.950 --> 02:07.820 Now when you exporting for with this three main form is J pig p n g and SPG now. 02:07.920 --> 02:14.910 AB basically depicts images P and Gs are good for things that have transparency in SVGA and new and 02:14.910 --> 02:19.410 fancy and Victor it's scalable vector graphic is that acronym. 02:19.410 --> 02:23.230 And they're getting more and more popular when it's on building a web site as a web designer. 02:23.250 --> 02:26.660 I'll use a species where ever I can because they scale nicely. 02:26.670 --> 02:32.340 They look great and all screens but talk to a designer a web developer for what they need. 02:32.400 --> 02:35.580 Some web sites have to support older browsers. 02:35.680 --> 02:39.060 CDs don't work so as a safe bet you can do both. 02:39.060 --> 02:41.540 So what you do is I want a PC I want to add. 02:41.760 --> 02:46.600 Think don't think Ed scale think adversion gazes made a bigger size for me. 02:46.650 --> 02:48.810 I don't want a bigger size I just want to go to is Ficci. 02:48.820 --> 02:50.690 So two options here. 02:50.730 --> 02:56.610 Now this is kind of for web design if I wanted to go for app design the easiest way is to click on the 02:56.610 --> 03:02.390 sky and say I'm going for iOS which is the or iPhone or Android which is pretty much everything else. 03:02.400 --> 03:03.270 I click on that. 03:03.270 --> 03:07.630 It's going to give me this is what my app design or app developer wants. 03:07.650 --> 03:12.070 They want a small size the regular size and a bunch of other different scales. 03:12.210 --> 03:13.270 So goes up and down. 03:13.320 --> 03:14.890 So it's just done for you. 03:14.940 --> 03:15.810 Can I undo. 03:15.810 --> 03:16.560 I can't. 03:16.680 --> 03:18.140 I'm going to have to clear them all off. 03:18.480 --> 03:22.990 Let's say we go for web design so I've got Let's go. 03:23.100 --> 03:24.980 I'm going to add a suffix. 03:24.980 --> 03:29.940 It's kind of like this one one guy down here is Viji this is kind of a really common kind of grouping 03:29.940 --> 03:30.410 to say now. 03:30.420 --> 03:32.650 But again talk to your web developer. 03:32.700 --> 03:38.770 Now once you've got it you click on export and give it a folder on the desktop click Choose. 03:38.950 --> 03:43.150 We're going to hitchhike on the desktop and I've those junk from when I was practicing. 03:43.230 --> 03:44.260 And there's the Kiwi. 03:44.370 --> 03:49.560 So I've got my tick which is my PNB and my SPG. 03:49.900 --> 03:54.570 And so that's how to export just single graphics and you'll do that a lot. 03:54.570 --> 03:59.150 The Takes will get built in extreme L and C Ss if you are interested in this kind of thing I've got 03:59.790 --> 04:05.370 quite a few Dreamweaver courses for building web sites if you want to get into a bit of a thesis go 04:05.370 --> 04:06.190 to that one. 04:06.330 --> 04:12.160 And one thing you might notice is if you are a big fan of using clipping masks there is something pre-made 04:12.320 --> 04:15.460 but I've got a block game and it's going to fail. 04:15.870 --> 04:17.890 OK let's go get him a film. 04:18.420 --> 04:21.420 And I want to crop it down to say the size. 04:21.420 --> 04:28.040 For some reason I'm going to hold down commands given all controls even on a PC case or cropped it down. 04:28.060 --> 04:33.440 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 04:33.570 --> 04:34.860 to zoom in. 04:34.860 --> 04:35.440 There we go. 04:35.490 --> 04:39.660 But it's actually got this kind of you can see all the stuff on the outside here. 04:39.690 --> 04:42.890 It's actually included in the thing so it's not gonna be a nice trimmed box. 04:42.890 --> 04:44.830 It's going to have a junker on the outside. 04:44.880 --> 04:51.270 So what you need to do is with it selected actually before you do it before you kind of clipping mask 04:51.330 --> 04:54.360 or Right-Click and release the clipping mask selected. 04:54.360 --> 04:57.420 I like to use my shape build to tool which is shift him. 04:57.560 --> 04:59.640 There he is there and I'm going to delete this stuff. 04:59.780 --> 05:06.330 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 05:06.330 --> 05:07.700 all the way to the edges. 05:07.710 --> 05:08.410 OK. 05:08.510 --> 05:10.290 There's a little bit of get at the top don't worry. 05:10.290 --> 05:13.830 For some reason I really like to show Square but that's all trimmed up now. 05:13.830 --> 05:15.470 Now that happens as well with images. 05:15.480 --> 05:18.230 Case you do a lot of cropping of images in Illustrator. 05:18.240 --> 05:23.500 So I'm going to bring in an image just random one from my exercise files. 05:23.510 --> 05:23.870 OK. 05:23.870 --> 05:29.910 And let's I I want to crop this down to a circle and I do a tiny circle round his head. 05:30.130 --> 05:33.280 OK and I crumpets the same principle here if I drag it in. 05:33.390 --> 05:36.080 It's made this big graphic with this little circle in the middle. 05:36.080 --> 05:41.310 It also is transparent and that might be OK for you but what you need to do is with this guy selected 05:41.430 --> 05:45.930 what you need to do is I'm going to release the clipping mask again k and slicked on this guy and this 05:45.930 --> 05:51.950 one this is Krop image OK and I can drag it so it it should snap if it's not snapping to you. 05:51.950 --> 05:58.500 Just go to View smartcards into his own case to get a kind of we want it first rutin and the good thing 05:58.500 --> 06:02.070 about that that is cropped is like pixels gone like Photoshop cropping. 06:02.200 --> 06:04.440 OK so it's a cool new feature in Illustrator. 06:04.440 --> 06:09.240 Now I get to make my mask drag it in and it should be an entire circle. 06:09.510 --> 06:13.760 Give it a name and in this case we'll shave that one out probably as a joke. 06:13.830 --> 06:17.730 Now the interesting thing to know is that this guy over here is being added. 06:17.760 --> 06:24.590 So we're going to call him gay and this guy's been added and he is man. 06:24.970 --> 06:29.670 Great you see Odin what ends up happening here is that that's not a one way street. 06:29.670 --> 06:30.000 Right. 06:30.000 --> 06:31.430 So this guy. 06:31.470 --> 06:33.540 Update him and give him a different color. 06:33.570 --> 06:35.560 You'll notice that he updates up here. 06:35.730 --> 06:36.760 OK so that's true. 06:36.780 --> 06:41.160 All these graphics so you can kind of name them spend some time work out what kind of versioning you 06:41.160 --> 06:41.850 want. 06:41.850 --> 06:49.410 OK so I want to see all of these guys hold shift and click them all and I want pink one some pigs and 06:49.410 --> 06:51.710 I want some goodness. 06:52.080 --> 06:58.610 And if I head exports and it's like the mall again I learned what the ones you have selected. 06:58.690 --> 07:00.190 OK click on export. 07:00.450 --> 07:04.130 Back in the same place it'll override the ones you already have which is code. 07:04.590 --> 07:08.210 Ok so my blog now log there's two versions. 07:08.310 --> 07:11.120 Pig punji and it's Fiji Kaiba. 07:11.130 --> 07:16.290 If I go and quickly update this OK the designer comes back this is not working or will the Web developer 07:16.290 --> 07:22.200 and you like I don't like it can beckon to here and I click on this one guy click export and Hugo back 07:22.200 --> 07:24.450 out now replace all those fellows. 07:24.450 --> 07:28.490 It's a nice cool like little system that I go and work it out. 07:28.680 --> 07:35.040 Next thing is we've got the graphics out but the text doesn't want to be included in as graphics a web 07:35.040 --> 07:40.020 design it doesn't want the actual like graphic of the text they want the actual text and the styles 07:40.020 --> 07:41.260 that you've used. 07:41.280 --> 07:46.770 OK so you could obviously go in here until it was open Saens and 14 but they want to know all sorts 07:46.770 --> 07:53.190 of things about it and yeah that can be problematic unless you go to a window and go to s.c.s properties. 07:53.430 --> 07:53.760 OK. 07:53.790 --> 07:58.260 And the cool thing about it is she takes as easy you can see it tells you the this is the CCs for it 07:58.260 --> 07:59.630 if you've not used it before. 07:59.790 --> 08:02.760 OK that's the card that says I am open Saens and bold. 08:02.760 --> 08:03.880 These are the colors. 08:03.990 --> 08:09.000 So super handy you can just copy and paste that and in them and say this title is this thing is super 08:09.000 --> 08:13.300 fancy and that naming character styles can ever give you classes. 08:13.470 --> 08:18.210 Often I just copy paste this as I'm building and you can do it for text is really easy you click on 08:18.210 --> 08:20.970 it and you can see this as Playfair bold and it's all the code. 08:20.970 --> 08:24.710 Now let's say this kind of red box in the background here say I wanted to export this is a graphic. 08:24.720 --> 08:26.520 I probably wouldn't build that NCSA. 08:26.550 --> 08:30.980 But anyway they say you did and this is there's no code generated because there's no name for it. 08:30.990 --> 08:32.120 It needs a name. 08:32.160 --> 08:33.690 You do it in your layers peno. 08:33.870 --> 08:36.820 OK so tulis down it should show me in here. 08:36.890 --> 08:40.690 See the blue dot that blue dot indicates that's the thing you've got selected. 08:40.740 --> 08:45.850 If I double click it can give it a name and call us 1 red red on the square box. 08:45.930 --> 08:51.400 When you're naming things like this and webdesign design it's often hyphen no spaces. 08:51.570 --> 08:52.710 Hyphens are in the schools. 08:53.100 --> 08:56.630 And you can see now with it's like this is my class of red boxes. 08:56.650 --> 08:58.590 Got a background color of this. 08:58.590 --> 09:04.890 OK so this is some really cool stuff if you want to get a bit more hardcore into it and you can go into 09:04.890 --> 09:07.230 the big I mean you could explore options. 09:07.230 --> 09:09.180 The moment it's only telling me the basics. 09:09.180 --> 09:13.860 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 09:13.860 --> 09:20.580 the dimensions and the EPA's absolute positioning case OK click OK and it's giving me how far it is 09:20.580 --> 09:22.000 from the top and left. 09:22.020 --> 09:27.300 There was another option in there to have a look export options and generate CCs for unknown objects 09:27.330 --> 09:30.120 instead of having to go and name them to be all official. 09:30.210 --> 09:36.540 Just take that on and it let you create s.c.s everything without having to go and name them all writes. 09:36.600 --> 09:39.450 Next thing to know is we're going to go some called pixel preview. 09:39.450 --> 09:43.670 So I've generally done the bottom left of this top version. 09:43.710 --> 09:45.560 And let's go down here to him. 09:46.280 --> 09:52.250 It's closed down my CACs properties and let's talk about pixels because in Illustrator right it's a 09:52.250 --> 09:56.330 vector during programs so it scales everything looks over shop on the edges. 09:56.480 --> 10:05.300 But when I go to images in webdesign often J pigs are Pean Geez they use pixels and pixels not as you 10:05.300 --> 10:07.070 know I'm not a shopper on the edges. 10:07.070 --> 10:13.940 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 10:13.940 --> 10:18.440 view pixel preview because what you'll find is a lot of graphics will end up looking really good in 10:18.440 --> 10:18.960 Illustrator. 10:18.980 --> 10:24.320 But then you export the gene the kind of fuzzy on the sides of one side you like a case of what you 10:24.320 --> 10:29.000 can do is you can turn that on verst and it shows you what this would look like if it was pixels. 10:29.060 --> 10:33.730 Casey you can see my lines that turn that on and off go. 10:33.870 --> 10:37.050 And so there is there's a couple of things you can do. 10:37.060 --> 10:40.370 Let's say this line he can turn on my pixel preview again. 10:40.510 --> 10:45.150 It's not looking great OK because it's kind of the problem is the stroke is not. 10:45.310 --> 10:50.950 At one point I'm not sure it is one point which is cool and but it's kind of straddling two pixels here. 10:51.100 --> 10:55.230 So you can do as you can right click it and say my friend make pixel perfect. 10:55.300 --> 10:57.210 Ok so it just kind of adjusts it. 10:57.220 --> 10:59.400 Now it has moved like literally has moved. 10:59.410 --> 11:02.280 But for me that's better than having it fuzzy. 11:02.410 --> 11:03.340 So you can decide. 11:03.490 --> 11:04.450 And this guy here. 11:04.450 --> 11:05.170 Same thing. 11:05.170 --> 11:07.240 You make pixel perfect. 11:07.360 --> 11:10.990 Everything will just kind of tidy up that box is a slightly different size. 11:10.990 --> 11:20.470 Takes is a little hard right and adjusting type can really depends on how how precious you are with 11:20.650 --> 11:22.540 type like especially small type. 11:22.540 --> 11:26.770 It changes it quite a bit because you can see that it's actually quite like things have happened to 11:26.770 --> 11:27.380 that font. 11:27.460 --> 11:29.290 Depends on if you can live with that or not. 11:29.290 --> 11:31.480 You can see that top ones a little bit higher. 11:31.480 --> 11:34.030 So you get big phones who won't notice smaller fonts. 11:34.030 --> 11:34.700 You might. 11:34.750 --> 11:35.770 So be careful there. 11:35.770 --> 11:41.660 The other thing you can do is if you know you scan for web design just draw stuff that you can see view. 11:41.680 --> 11:43.510 There's one called snapped pixel. 11:43.510 --> 11:45.450 Make sure that's on OK. 11:45.550 --> 11:49.800 Because what happens is when they're off I can draw something and like a rectangle here and it would 11:49.810 --> 11:55.200 just kind of appear wherever it likes whereas if I do the exact same thing and say stamped pixel and 11:55.210 --> 11:59.720 jorum and he will you know try and be in the right spot. 11:59.830 --> 12:03.520 Now this works for simple shapes like this really complex shapes. 12:03.520 --> 12:04.840 It just kind of doesn't know what to do. 12:04.840 --> 12:09.640 It's rounded corners everything's rounded If I go make pixel perfect kind of worked. 12:09.640 --> 12:13.060 But sometimes it just messes up. 12:13.060 --> 12:17.060 It's really easy for lines and squares really complex shapes and also it can go. 12:17.140 --> 12:21.840 Turn off my pixel preview and let's look at two more things. 12:21.970 --> 12:24.620 One is exporting actually no symbols. 12:24.640 --> 12:28.390 Let's say that's as good as you guys we're giving up here. 12:28.450 --> 12:29.600 I need to make. 12:29.980 --> 12:32.610 You know when you're doing UI design in this course. 12:32.610 --> 12:37.870 We just kind of made a desktop tablet and mobile but when I'm doing mobile you'll end up like creating 12:37.870 --> 12:40.040 50 mobile like mockups. 12:40.060 --> 12:45.970 OK of all the different pages or an app OK you might have a 100 different app and screens. 12:46.030 --> 12:51.850 What you don't want to do is duplicate this right thing or grab my iPod to hold alt while I'm dragging 12:51.970 --> 12:53.010 to another version. 12:53.050 --> 12:57.160 And if I make adjustments to this and I this is now the contact us page. 12:57.280 --> 13:02.250 The problem is just hitting now I don't have to go back and copy and paste on every page. 13:02.260 --> 13:07.020 So what you do once you kind of get like a base level going you're going to create a symbol. 13:07.030 --> 13:13.630 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 13:13.630 --> 13:17.110 to make a symbol by clicking that little turned up page and I'll give it a name. 13:17.110 --> 13:20.660 This is going to be my mobile nav UI. 13:21.340 --> 13:25.250 OK click it came and nothing really changes it's kind of like a group now. 13:25.390 --> 13:29.440 But what ends up happening is I'm going to close down my symbol's library. 13:29.440 --> 13:34.820 I'm going to mount my iPod to make a duplicate. 13:34.850 --> 13:40.300 And now what's going to happen is let's say Klein comes back and is actually and there's been some usability 13:40.300 --> 13:42.120 problems with the size of this font right. 13:42.130 --> 13:46.410 So I've double clicked up with my black hair and it says Be careful you're getting a symbol. 13:46.510 --> 13:47.470 Awesome enough. 13:47.800 --> 13:53.260 And I'm going to ungroup these and I just want this guy to you my friend now is going to be something 13:53.260 --> 13:55.920 else like I've been sans extra bold. 13:56.040 --> 13:56.740 OK. 13:56.830 --> 14:02.850 And I'm going to click this area until I get back out and what you'll notice is that updates. 14:03.080 --> 14:09.190 OK so great for navs and like foot is anything that's kind of consistent on your Web site logos that 14:09.190 --> 14:10.090 type of thing. 14:10.090 --> 14:10.370 All right. 14:10.370 --> 14:12.360 Let me finish the last thing we. 14:12.510 --> 14:17.290 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 14:17.290 --> 14:22.690 to add some interactivity maybe with something like a D or envision which kind of allows you to add 14:22.690 --> 14:25.380 interactivity to things like date things. 14:25.390 --> 14:31.810 And so what we're going to do is we're going export the screens so file go down to export and they call 14:31.810 --> 14:35.290 it screens gaze all the different screen sizes and not assets. 14:35.330 --> 14:35.820 OK. 14:36.010 --> 14:38.190 You can kind of do it from here as well but and upwards. 14:38.200 --> 14:43.980 I can say I want all of these guys exported what are on them exported as one of them exported as de 14:43.990 --> 14:45.480 pigs at 80 percent. 14:45.490 --> 14:51.900 OK so you can fiddle around with what you want to do but export that and either just or maybe down here 14:51.910 --> 14:56.590 there's a PDA function that could be quite helpful because then it's a multi-page PDA or if you want 14:56.590 --> 15:03.990 to add interactivity and XTi or does it envision you can export maybe take pigs to sing to that. 15:04.090 --> 15:09.080 All right friends there is the skinny version of being a web designer with Illustrator. 15:09.120 --> 15:10.380 No that's it. 15:10.390 --> 15:12.820 There's a lot more you could do. 15:12.880 --> 15:15.020 OK so Ticketek was of yoking. 15:15.220 --> 15:17.100 Otherwise let's get on to the next video.