0 1 00:00:00,039 --> 00:00:02,195 Hi there, in this video we're going to look at... 1 2 00:00:02,220 --> 00:00:06,665 using Illustrator for Web & UI App design. 2 3 00:00:07,046 --> 00:00:10,171 Now Illustrator is one of the tools that gets used a lot... 3 4 00:00:10,405 --> 00:00:14,109 by UI/UX designers to build things like websites and apps. 4 5 00:00:14,931 --> 00:00:17,784 We're not going to go through everything possible... 5 6 00:00:17,809 --> 00:00:19,585 for Web and UI for Illustrator. 6 7 00:00:19,765 --> 00:00:22,994 I've got a completely other course that's dedicated to it. 7 8 00:00:23,868 --> 00:00:25,478 It's another 50 videos... 8 9 00:00:25,503 --> 00:00:27,703 so if you want to go in, like full board and do it... 9 10 00:00:27,728 --> 00:00:28,537 go check out that course. 10 11 00:00:28,562 --> 00:00:31,881 You're looking for that little smiley man icon. 11 12 00:00:31,906 --> 00:00:34,406 It's the Web & UI design in Illustrator... 12 13 00:00:34,788 --> 00:00:37,444 but this is the advanced course, I don't want to kind of leave you hanging. 13 14 00:00:37,694 --> 00:00:41,405 So I'm going to give you that kind of high level stuff that you need to know. 14 15 00:00:41,593 --> 00:00:43,960 The first one is exporting these graphics... 15 16 00:00:43,985 --> 00:00:46,351 that you've created for a website or an app. 16 17 00:00:46,554 --> 00:00:49,382 We're going to work on the mobile version first. 17 18 00:00:49,866 --> 00:00:51,749 What I'd like to do is-- 18 19 00:00:51,774 --> 00:00:54,530 let's say we've drawn this tick in the circle. 19 20 00:00:54,555 --> 00:00:56,585 I want to export that for my website. 20 21 00:00:56,610 --> 00:00:57,835 So there's a couple of ways. 21 22 00:00:58,366 --> 00:01:01,335 I'm going to ungroup this first, because I don't want the text. 22 23 00:01:01,624 --> 00:01:04,811 I want these two, so I'm going to zoom in, and go to you. 23 24 00:01:05,874 --> 00:01:08,163 So I've got both of them selected, they're not grouped. 24 25 00:01:08,188 --> 00:01:09,330 I can right click them... 25 26 00:01:09,355 --> 00:01:13,819 and go to 'Collect for Export', 'As Single Asset', or 'As Multiple Asset'. 26 27 00:01:15,486 --> 00:01:17,780 I want this to be Multiple Asset first, and just see what it does. 27 28 00:01:17,805 --> 00:01:20,506 So it's opened up my Export Panel, it's already got a Kiwi in there. 28 29 00:01:20,531 --> 00:01:21,968 Hello. Goodbye. 29 30 00:01:23,280 --> 00:01:25,530 There is the circle and the text separately. 30 31 00:01:25,812 --> 00:01:28,866 So what I might do is I might undo that. The Kiwi comes back. 31 32 00:01:29,148 --> 00:01:31,944 Right click, and say, 'Export' for 'Single Asset'. 32 33 00:01:33,100 --> 00:01:36,147 What I tend to do, is let's say, this logo at the top here... 33 34 00:01:36,452 --> 00:01:37,694 I just drag it in. 34 35 00:01:37,882 --> 00:01:41,506 If you drag it in while it's grouped it will kind of do a Single Asset. 35 36 00:01:41,531 --> 00:01:44,366 If it's ungrouped, 'Ungroup', and I drag it in... 36 37 00:01:44,647 --> 00:01:47,358 it does that kind of Multiple Asset. Depends on what you need. 37 38 00:01:47,554 --> 00:01:50,397 The next thing is, I'm going to select on this Asset here... 38 39 00:01:50,422 --> 00:01:51,529 I'm going to give it a name. 39 40 00:01:51,554 --> 00:01:52,617 It's important, not important... 40 41 00:01:52,642 --> 00:01:53,956 but if you give it a name now... 41 42 00:01:53,981 --> 00:01:56,320 when you export it, this is the name it's going to get. 42 43 00:01:56,483 --> 00:01:58,499 So let's call this my 'Tick'. 43 44 00:01:58,960 --> 00:02:01,499 Down the bottom here, you get to decide on the format. 44 45 00:02:01,835 --> 00:02:04,507 Now when you're exporting for Web, there's three main formats. 45 46 00:02:04,532 --> 00:02:06,843 JPEG, PNG, and SVG. 46 47 00:02:08,265 --> 00:02:10,046 Basically JPEG's good for images. 47 48 00:02:10,179 --> 00:02:12,999 PNGs are good for things that have transparency... 48 49 00:02:13,024 --> 00:02:16,226 and SVGs are new, and fancy, and vector. 49 50 00:02:16,513 --> 00:02:19,052 It's Scalable Vector Graphic, that's the acronym. 50 51 00:02:19,322 --> 00:02:20,656 They're getting more and more popular. 51 52 00:02:20,681 --> 00:02:22,962 When I'm building a website, as a Web Designer... 52 53 00:02:23,058 --> 00:02:26,596 I'll use SVGs wherever I can because they scale nicely. 53 54 00:02:26,621 --> 00:02:28,307 They look great on all screens. 54 55 00:02:28,463 --> 00:02:32,002 Talk to your Web Designer or Web Developer for what they need. 55 56 00:02:32,283 --> 00:02:36,713 Some websites have to support older browsers, and SVGs don't work... 56 57 00:02:36,738 --> 00:02:38,987 so as a safe bet, you can do both. 57 58 00:02:39,019 --> 00:02:41,221 So what you do is, I want a PNG, I want to add-- 58 59 00:02:42,088 --> 00:02:44,017 don't think Add Scale, think Add Version. 59 60 00:02:44,291 --> 00:02:46,346 So this has made a bigger size for me. 60 61 00:02:46,518 --> 00:02:48,721 I don't want a bigger size, I just want to go to SVG... 61 62 00:02:48,746 --> 00:02:50,011 so I got two options here. 62 63 00:02:50,612 --> 00:02:53,229 Now this is kind of for Web Design. 63 64 00:02:53,261 --> 00:02:55,122 If I wanted to go for App Design... 64 65 00:02:55,147 --> 00:02:56,888 the easiest way is to click on this guy... 65 66 00:02:56,913 --> 00:03:00,174 and say, I'm going for iOS, which is your iPhone... 66 67 00:03:00,202 --> 00:03:03,062 or Android, which is pretty much everything else, if I click on that... 67 68 00:03:03,194 --> 00:03:07,187 it's going to give me-- this is what my App Designer or App Developer wants. 68 69 00:03:07,390 --> 00:03:10,132 They want a small size, the regular size... 69 70 00:03:10,194 --> 00:03:13,155 and a bunch of other different scales, so goes up and down. 70 71 00:03:13,180 --> 00:03:14,335 So it's just done for you. 71 72 00:03:14,671 --> 00:03:17,717 Can I undo? I can't. I'm going to have to click them all of. 72 73 00:03:18,257 --> 00:03:22,241 Let's say we go for Web Design, so I've got 'Add Scale'. 73 74 00:03:22,921 --> 00:03:26,148 I'm going to not add a suffix, just going to make this '1'. 74 75 00:03:26,413 --> 00:03:27,851 This guy down here, 'SVG'. 75 76 00:03:27,876 --> 00:03:30,359 This is kind of really common grouping to send up... 76 77 00:03:30,422 --> 00:03:32,186 but again, talk to your Web Developer. 77 78 00:03:32,553 --> 00:03:34,576 Now once you've got it, you click on 'Export'. 78 79 00:03:34,749 --> 00:03:38,444 Give it a folder, it's going to lump mine on my 'Desktop', click 'Choose'. 79 80 00:03:38,819 --> 00:03:40,194 We're going to have to check on the Desktop. 80 81 00:03:41,139 --> 00:03:42,921 I've got this junk from when I was practicing. 81 82 00:03:43,108 --> 00:03:44,062 There's the Kiwi. 82 83 00:03:44,233 --> 00:03:46,710 I've got my 'tick', which is my PNG... 83 84 00:03:47,071 --> 00:03:48,053 and my SVG. 84 85 00:03:50,728 --> 00:03:53,377 So that's how to export just single graphics. 85 86 00:03:53,402 --> 00:03:57,260 You'll do that a lot, the text will get built in HTML, in CSS. 86 87 00:03:57,533 --> 00:03:58,913 If you are interested in this kind of thing... 87 88 00:03:58,938 --> 00:04:02,502 I've got quite a few Dreamweaver courses for building websites. 88 89 00:04:02,696 --> 00:04:05,837 If you want to get into a bit of HTML in CSS, go do that one. 89 90 00:04:06,189 --> 00:04:07,647 One thing you might notice is... 90 91 00:04:07,672 --> 00:04:10,471 if you are a big fan of using Clipping Masks... 91 92 00:04:10,580 --> 00:04:12,280 there is something pre-made. 92 93 00:04:14,244 --> 00:04:15,225 It's got no Fill. 93 94 00:04:16,303 --> 00:04:17,635 Let's go, give him a Fill. 94 95 00:04:18,275 --> 00:04:22,501 I want to crop it down to say this size, for some reason. 95 96 00:04:22,526 --> 00:04:26,346 I'm going to hold down 'Command 7', or 'Control 7' on a PC. 96 97 00:04:26,930 --> 00:04:28,029 So I've cropped it down. 97 98 00:04:28,054 --> 00:04:30,042 Problem is, when I drag it into my Assets Panel... 98 99 00:04:30,189 --> 00:04:32,674 can you see, it's got my graphic there. 99 100 00:04:32,699 --> 00:04:34,268 It's a little hard to see, you might have to zoom in. 100 101 00:04:34,712 --> 00:04:37,931 Here we go, but it's actually got this kind of-- 101 102 00:04:37,981 --> 00:04:39,706 can you see, all the stuff around the outside here... 102 103 00:04:39,731 --> 00:04:40,983 it's actually included it in the thing. 103 104 00:04:41,008 --> 00:04:42,673 So it's not going to be a nice trimmed box. 104 105 00:04:42,698 --> 00:04:44,437 It's going to have a junk around the outside. 105 106 00:04:44,827 --> 00:04:47,279 So what you need to do is, with it selected-- 106 107 00:04:47,304 --> 00:04:51,217 actually before you do it, before you kind of, Clipping Mask... 107 108 00:04:51,250 --> 00:04:53,077 or right click, and release the Clipping Mask. 108 109 00:04:53,311 --> 00:04:55,913 Select it. I like to use my Shape Builder Tool... 109 110 00:04:55,938 --> 00:04:58,241 which is 'Shift M', here he is there. 110 111 00:04:58,389 --> 00:04:59,897 And I'm just going to delete this stuff off. 111 112 00:05:00,132 --> 00:05:03,311 It's a better kind of way of preparing graphics... 112 113 00:05:03,336 --> 00:05:05,655 because now, that thing there, if I drag it in... 113 114 00:05:05,811 --> 00:05:07,538 it's actually all the way to the edges. 114 115 00:05:08,163 --> 00:05:09,991 There's a little bit of gap at the top, don't worry. 115 116 00:05:10,146 --> 00:05:12,129 For some reason I really like to show a square... 116 117 00:05:12,154 --> 00:05:13,382 but that's all trimmed up now. 117 118 00:05:13,678 --> 00:05:15,421 Now that happens as well with images. 118 119 00:05:15,446 --> 00:05:18,201 So you do a lot of cropping of images in Illustrator... 119 120 00:05:18,226 --> 00:05:23,272 so I'm going to bring in an image, just a random one from my Exercise Files. 120 121 00:05:23,764 --> 00:05:25,936 Let's say I want to crop this down to a circle. 121 122 00:05:27,007 --> 00:05:29,624 I do a tiny circle around his head. 122 123 00:05:30,632 --> 00:05:33,178 I crop it, it's the same principle here, if I drag it in... 123 124 00:05:33,257 --> 00:05:35,928 it's made this big graphic with this little circle in the middle. 124 125 00:05:35,953 --> 00:05:38,139 The outside's transparent, and that might be okay for you... 125 126 00:05:38,164 --> 00:05:41,209 but what you need to do is, with this guy selected... 126 127 00:05:41,327 --> 00:05:42,265 what you need to do is-- 127 128 00:05:42,290 --> 00:05:43,921 I'm going to release the Clipping Mask again. 128 129 00:05:44,147 --> 00:05:47,241 And I'm going to select on this guy, and there's one that says Crop Image... 129 130 00:05:47,874 --> 00:05:49,803 and I can drag it, so it... 130 131 00:05:49,921 --> 00:05:52,714 it should snap it, it's not snapping at the edges. 131 132 00:05:52,739 --> 00:05:54,436 Go to 'View', 'Smart Guides', turn those on. 132 133 00:05:54,757 --> 00:05:57,171 So get it kind of where you want it first, hit 'Return'. 133 134 00:05:58,092 --> 00:05:59,534 Cool thing about that, that is cropped... 134 135 00:05:59,559 --> 00:06:01,847 there's like, pixels are gone. Photoshop cropping. 135 136 00:06:02,342 --> 00:06:05,562 So it's a cool new feature in Illustrator. Now I get to make my Mask. 136 137 00:06:05,889 --> 00:06:08,460 Drag it in, and it should be an entire circle. 137 138 00:06:09,350 --> 00:06:13,421 Give it a name, and in this case we'll save that one probably as a JPEG. 138 139 00:06:13,678 --> 00:06:15,702 Another interesting thing to know is that... 139 140 00:06:15,858 --> 00:06:19,553 this guy over here is being added, so we're going to call him 'Blob'. 140 141 00:06:19,952 --> 00:06:21,475 And this guy has been added. 141 142 00:06:22,022 --> 00:06:23,968 And he is 'Man'. 142 143 00:06:26,464 --> 00:06:29,816 What ends up happening here is that, it's not a one way street, right? 143 144 00:06:29,841 --> 00:06:33,246 So this guy, if I update him, and give him a different Fill color... 144 145 00:06:33,433 --> 00:06:35,308 you'll notice that he updates up here. 145 146 00:06:35,878 --> 00:06:37,394 That's true of all these graphics. 146 147 00:06:37,427 --> 00:06:39,472 So you can kind of name them, spend some time. 147 148 00:06:39,550 --> 00:06:41,527 Work out what kind of versioning you want. 148 149 00:06:41,745 --> 00:06:45,160 So, I want to select all of these guys. 149 150 00:06:45,229 --> 00:06:46,643 Hold 'Shift', and click them all. 150 151 00:06:46,987 --> 00:06:49,159 I want PNGs, I want some JPEGs... 151 152 00:06:49,184 --> 00:06:51,472 and I want some SVG goodness. 152 153 00:06:52,002 --> 00:06:53,666 If I hit 'Export'... 153 154 00:06:55,596 --> 00:06:56,784 Select them all again. 154 155 00:06:56,809 --> 00:06:59,909 It will only export the ones you have selected. Click on 'Export'. 155 156 00:07:00,321 --> 00:07:03,696 Back in the same place. It will override the ones you already have, which is cool. 156 157 00:07:04,430 --> 00:07:07,797 So my Blob now, 'Blob', there's two versions. 157 158 00:07:08,008 --> 00:07:10,414 JPEG, PNG, and SVG... 158 159 00:07:10,586 --> 00:07:12,758 but if I go and quickly update this... 159 160 00:07:12,783 --> 00:07:15,077 the designer comes back and says, "It's not working"... 160 161 00:07:15,102 --> 00:07:17,124 or you are the Web Developer, and you're like, "I don't like it"... 161 162 00:07:17,374 --> 00:07:21,077 come back into here, and I just click on this one guy, click 'Export'... 162 163 00:07:21,328 --> 00:07:22,781 and he'll go back out now. 163 164 00:07:23,086 --> 00:07:24,521 Replace all those fellas. 164 165 00:07:24,546 --> 00:07:27,531 It's a nice cool, like little system to get going. 165 166 00:07:27,648 --> 00:07:28,601 Good work, Adobe. 166 167 00:07:28,626 --> 00:07:29,812 Next thing is-- 167 168 00:07:30,092 --> 00:07:34,467 so we got the graphics out, but the text doesn't want to be included as graphics. 168 169 00:07:34,492 --> 00:07:37,042 Your Web Designer doesn't want the actual graphic. 169 170 00:07:37,067 --> 00:07:40,242 The text will be the actual text, and the styles that you've used. 170 171 00:07:41,093 --> 00:07:44,694 So you could obviously go in here, and tell him it's Open Sans, and it's 14... 171 172 00:07:45,343 --> 00:07:47,421 but they want to know all sorts of things about it. 172 173 00:07:48,203 --> 00:07:52,961 That can be problematic, unless you go to 'Window', and go to 'CSS Properties'. 173 174 00:07:53,679 --> 00:07:55,812 The cool thing about it is, especially text is easy. 174 175 00:07:55,837 --> 00:07:57,258 You can see, it tells you the-- 175 176 00:07:57,283 --> 00:07:59,414 this is the CSS code, if you've not used it before. 176 177 00:07:59,718 --> 00:08:03,663 That's the code that says, "I am Open Sans, I'm Bold, and these are the colors." 177 178 00:08:03,882 --> 00:08:05,757 So it's super handy, you can just copy and paste it... 178 179 00:08:05,782 --> 00:08:07,961 and zoom in and say, this title is this. 179 180 00:08:08,226 --> 00:08:11,375 You can get super fancy and start naming Character Styles... 180 181 00:08:11,400 --> 00:08:12,937 and it will give you Classes. 181 182 00:08:13,078 --> 00:08:15,640 Often I just copy and paste this as I'm building. 182 183 00:08:15,937 --> 00:08:18,644 You can do it for-- text is really easy, just click on it, and you can see... 183 184 00:08:18,669 --> 00:08:20,707 this is Playfair Bold, and it's all the code. 184 185 00:08:20,848 --> 00:08:22,856 Now let's say there's kind of red box in the background here... 185 186 00:08:22,888 --> 00:08:24,597 say I want to export this as a graphic. 186 187 00:08:24,622 --> 00:08:27,043 I probably wouldn't, I'd build that in CSS, but anyway... 187 188 00:08:27,136 --> 00:08:29,517 let's say you did, it says there's no code generated... 188 189 00:08:29,542 --> 00:08:30,878 because there's no name for it. 189 190 00:08:30,903 --> 00:08:33,426 It needs a name. You do it in your Layers Panel. 190 191 00:08:34,066 --> 00:08:36,692 So twirl this down, it should show me in here. 191 192 00:08:36,785 --> 00:08:40,379 See that blue dot? That blue dot indicates, that's the thing you've got selected. 192 193 00:08:40,606 --> 00:08:45,691 If I double click it, and give it a name, and call this one 'Red_Box'. 193 194 00:08:45,716 --> 00:08:48,668 When you're naming things like this in Web Design... 194 195 00:08:49,168 --> 00:08:51,075 it's often hyphen '_', no spaces. 195 196 00:08:52,964 --> 00:08:54,846 And you can see, now it is selected, it says-- 196 197 00:08:54,989 --> 00:08:58,239 my Class with Red Box has got a background color of this. 197 198 00:08:58,731 --> 00:09:00,848 So there's just some really cool stuff. 198 199 00:09:01,173 --> 00:09:03,313 If you want to get a bit more hard core into it... 199 200 00:09:03,845 --> 00:09:06,907 you can go into the 'Burger Menu', go to 'Export Options'. 200 201 00:09:07,094 --> 00:09:09,047 At the moment it's only telling me the basics. 201 202 00:09:09,072 --> 00:09:09,953 That's what I want. 202 203 00:09:09,978 --> 00:09:12,923 Yours might be on by default, I can't remember if I've turned this on or off... 203 204 00:09:13,118 --> 00:09:17,391 but you can 'Include Dimensions' and the 'Absolute Positioning'. 204 205 00:09:17,727 --> 00:09:21,696 So click 'OK', and it's giving me how far it is from the top and left. 205 206 00:09:21,930 --> 00:09:24,829 There was another option in there, let's have a look, 'Export Options'. 206 207 00:09:25,594 --> 00:09:27,111 Generate CSS for Unnamed Objects. 207 208 00:09:27,143 --> 00:09:29,992 Instead of having to go and name them, to be all official... 208 209 00:09:30,079 --> 00:09:33,148 just tick that on, and that will let you create CSS for everything... 209 210 00:09:33,173 --> 00:09:34,751 without having to go and name them. 210 211 00:09:36,462 --> 00:09:37,404 Next thing to know is... 211 212 00:09:37,429 --> 00:09:39,469 we're going to go, something called Pixel Preview. 212 213 00:09:40,748 --> 00:09:43,352 Down the bottom left of this desktop version... 213 214 00:09:43,563 --> 00:09:45,282 let's go down here, to him. 214 215 00:09:46,493 --> 00:09:48,383 Let's close down my CSS Properties. 215 216 00:09:48,641 --> 00:09:50,126 Let's talk about pixels... 216 217 00:09:50,151 --> 00:09:53,117 because in Illustrator, it's a vector drawing program. 217 218 00:09:53,142 --> 00:09:56,196 So it scales, everything looks super sharp on the edges... 218 219 00:09:56,422 --> 00:09:59,125 but when I go to images, in Web Design, often-- 219 220 00:09:59,772 --> 00:10:03,203 JPEGs or PNGs, they use pixels. 220 221 00:10:03,243 --> 00:10:06,664 And pixels, not as sharp around the edges. 221 222 00:10:06,946 --> 00:10:10,430 So what we need to do is, before we-- say I want this to be a PNG. 222 223 00:10:10,883 --> 00:10:13,540 I need to preview it in 'Pixel Preview'. 223 224 00:10:13,565 --> 00:10:15,040 So 'View', 'Pixel Preview'. 224 225 00:10:15,391 --> 00:10:16,968 What you'll find is, a lot of graphics... 225 226 00:10:16,993 --> 00:10:18,891 will end up looking really good in Illustrator... 226 227 00:10:18,916 --> 00:10:20,387 but when you export a PNG... 227 228 00:10:20,412 --> 00:10:23,196 they're kind of fuzzy along the sides, or one side. 228 229 00:10:23,672 --> 00:10:26,055 So what you can do is you can turn that on first of all... 229 230 00:10:26,080 --> 00:10:28,680 it shows you what this would look like if it was pixels. 230 231 00:10:28,938 --> 00:10:31,298 So you can see, my lines, it's turned that on and off. 231 232 00:10:35,812 --> 00:10:38,116 Couple of things you can do, let's say this line here-- 232 233 00:10:38,141 --> 00:10:40,117 I'm going to turn on my Pixel Preview again. 233 234 00:10:40,374 --> 00:10:42,663 It's not looking great, because it's kind of-- 234 235 00:10:42,804 --> 00:10:44,820 the problem is, the Stroke is not-- 235 236 00:10:44,852 --> 00:10:47,999 Is it 1pt, I'm not sure. It is 1pt, which is cool... 236 237 00:10:48,024 --> 00:10:50,859 but it's kind of straddling two pixels here. 237 238 00:10:50,983 --> 00:10:52,700 So what you can do is you can right click it... 238 239 00:10:52,725 --> 00:10:54,921 and say, 'Make Pixel Perfect'. 239 240 00:10:55,522 --> 00:10:59,319 So just kind of adjusts it. Now it has moved, literally has moved... 240 241 00:10:59,344 --> 00:11:02,070 but for me, that's better having it fuzzy. 241 242 00:11:02,273 --> 00:11:03,351 So you can decide. 242 243 00:11:03,376 --> 00:11:06,991 This guy here, same thing, you, 'Make Pixel Perfect'. 243 244 00:11:07,226 --> 00:11:08,679 Everything will just kind of tidy up. 244 245 00:11:08,704 --> 00:11:10,585 That box is a slightly different size. 245 246 00:11:10,851 --> 00:11:12,265 Text is a little hard. 246 247 00:11:13,124 --> 00:11:16,358 Adjusting Type can really-- it depends on how... 247 248 00:11:17,281 --> 00:11:21,022 how precious you are with Type. 248 249 00:11:21,485 --> 00:11:24,468 Especially small Type, it changes it quite a bit, you can see that. 249 250 00:11:24,755 --> 00:11:27,262 It's actually quite-- like things have happened to that font. 250 251 00:11:27,295 --> 00:11:29,002 Depends on if you can live with that or not. 251 252 00:11:29,206 --> 00:11:31,479 You can see, that top one's a little bit higher. 252 253 00:11:32,245 --> 00:11:33,479 Big fonts you won't notice... 253 254 00:11:33,504 --> 00:11:35,503 smaller fonts you might, so be careful there. 254 255 00:11:35,628 --> 00:11:36,684 The other thing you can do... 255 256 00:11:36,709 --> 00:11:38,784 is if you know you're going to use it for Web Design... 256 257 00:11:38,948 --> 00:11:40,651 just draw stuff that-- 257 258 00:11:40,676 --> 00:11:44,463 you can see, 'View' there's one called 'Snap to Pixel', make sure that's on... 258 259 00:11:45,401 --> 00:11:48,057 because what happens is, with that off I can draw something... 259 260 00:11:48,190 --> 00:11:51,182 like a rectangle here, and it will just kind of appear wherever it likes... 260 261 00:11:51,207 --> 00:11:55,611 whereas if I do the exact thing, and say, 'Snap to Pixel', and draw him... 261 262 00:11:55,916 --> 00:11:59,604 he will try and be in the right spot. 262 263 00:11:59,629 --> 00:12:01,838 Now this works for simple shapes like this. 263 264 00:12:01,863 --> 00:12:04,862 Really complex shapes, it just kind of doesn't know what to do. 264 265 00:12:04,887 --> 00:12:06,683 It's rounder corners, everything is rounded... 265 266 00:12:06,708 --> 00:12:08,112 if I go and make Pixel Perfect... 266 267 00:12:08,518 --> 00:12:12,784 it kind of works, but sometimes it just messes up. 267 268 00:12:12,956 --> 00:12:16,432 It's really easy for lines and squares, but really complex shapes, not so good. 268 269 00:12:16,713 --> 00:12:21,416 I'm going to turn off my Pixel Preview, and let's look at two more things. 269 270 00:12:21,659 --> 00:12:24,331 One is exporting, actually no, it's symbols. 270 271 00:12:24,495 --> 00:12:28,260 Let's say that-- as good as you guys were, I'm putting you up here. 271 272 00:12:28,285 --> 00:12:29,666 I need to make a-- 272 273 00:12:30,400 --> 00:12:31,721 when you're doing UI design... 273 274 00:12:31,746 --> 00:12:35,018 in this course, we just kind of made Desktop, Tablet, and Mobile. 274 275 00:12:35,043 --> 00:12:40,025 When you're doing Mobile, you end up creating like 50 Mobile mock ups. 275 276 00:12:40,050 --> 00:12:41,549 All the different pages. 276 277 00:12:41,768 --> 00:12:45,784 On an App, you might have a hundred different screens. 277 278 00:12:45,932 --> 00:12:48,307 What you don't want to do, is let's say I want to duplicate this. 278 279 00:12:48,339 --> 00:12:51,869 I'm going to grab my 'Artboard Tool', hold 'Alt' while I'm dragging... 279 280 00:12:52,985 --> 00:12:55,074 and if I make adjustments to this... 280 281 00:12:55,099 --> 00:12:57,081 and this is now the Contact Us page... 281 282 00:12:57,198 --> 00:12:59,612 the problem is, if I adjust this heading now... 282 283 00:12:59,637 --> 00:13:02,026 I'm going to have to go back, and copy and paste it on every page. 283 284 00:13:02,166 --> 00:13:05,104 So what you do, once you got like a base level going... 284 285 00:13:05,338 --> 00:13:06,690 you got to create a symbol. 285 286 00:13:07,151 --> 00:13:08,924 So I'm going to select all of this... 286 287 00:13:09,073 --> 00:13:12,651 and I'm going to go to 'Window', go down to 'Symbols'... 287 288 00:13:13,065 --> 00:13:16,206 and I'm going to make a symbol by clicking this little turned up page. 288 289 00:13:16,231 --> 00:13:19,978 I'm going to give it a name, this is going to be 'Mobile Nav UI'. 289 290 00:13:21,221 --> 00:13:22,331 Click 'OK'. 290 291 00:13:22,627 --> 00:13:25,081 Nothing really changes, it's kind of like a group now... 291 292 00:13:25,331 --> 00:13:27,323 but what ends up happening is-- 292 293 00:13:27,348 --> 00:13:29,065 I'm going to close down my Symbols Library. 293 294 00:13:29,298 --> 00:13:34,689 I'm going to zoom out, grab my 'Artboard Tool', make a duplicate. 294 295 00:13:34,713 --> 00:13:38,033 And now what's going to happen is, let's say, client comes back and says... 295 296 00:13:38,074 --> 00:13:41,815 "Actually there's been some usability problems with the sizes and fonts." 296 297 00:13:41,987 --> 00:13:44,057 So I've double clicked it with my 'Black Arrow'. 297 298 00:13:44,082 --> 00:13:46,088 And it says, "Be careful, you're editing a symbol." 298 299 00:13:46,113 --> 00:13:47,353 I'm like, "Awesome, I know." 299 300 00:13:48,075 --> 00:13:50,956 I'm going to ungroup these, and I just want this guy. 300 301 00:13:51,221 --> 00:13:55,728 So you my friend now, is going to be something else, like Open Sans, Extra Bold. 301 302 00:13:57,409 --> 00:13:59,729 I'm going to click this arrow, until I get back out. 302 303 00:13:59,979 --> 00:14:02,643 What you'll notice is, it updates. 303 304 00:14:03,026 --> 00:14:05,783 So great for Navs, and like, Footers. 304 305 00:14:05,808 --> 00:14:08,537 Anything that's kind of consistent on your website. 305 306 00:14:08,562 --> 00:14:09,901 Logos, that type of thing. 306 307 00:14:09,926 --> 00:14:13,323 All right, before we finish, the last thing that's kind of useful. 307 308 00:14:13,348 --> 00:14:16,276 Let's say I've got this, and I want to send it to the client to proof... 308 309 00:14:16,690 --> 00:14:18,619 or I want to add some interactivity... 309 310 00:14:18,644 --> 00:14:21,682 maybe with something like XD or InVision... 310 311 00:14:21,707 --> 00:14:25,041 which kind of allows you to add interactivity to things like JPEGs. 311 312 00:14:25,252 --> 00:14:28,018 So what we're going to do is export the screen. 312 313 00:14:28,043 --> 00:14:30,666 So 'File', go down to 'Export'. 313 314 00:14:31,439 --> 00:14:34,049 They call it Screens, so all the different screen sizes. 314 315 00:14:34,260 --> 00:14:37,112 And not Assets, okay? You can kind of do it from here as well. 315 316 00:14:37,137 --> 00:14:40,268 But under 'Artboards', I can say, I want all of these guys exported. 316 317 00:14:40,846 --> 00:14:42,346 What do I want to export them as? 317 318 00:14:42,371 --> 00:14:45,135 I want them exported as JPEGs at 80%. 318 319 00:14:45,409 --> 00:14:47,870 So you can fiddle around with what you want to do. 319 320 00:14:48,370 --> 00:14:50,815 Export that, and either just-- 320 321 00:14:50,840 --> 00:14:53,900 Over down here is a PDF option, that could be quite helpful... 321 322 00:14:53,925 --> 00:14:55,604 because then it's a multi-page PDF. 322 323 00:14:55,963 --> 00:15:01,541 Or if you want to add interactivity in XD or InVision... 323 324 00:15:01,566 --> 00:15:03,745 you can export maybe JPEGs to send it up. 324 325 00:15:03,948 --> 00:15:05,834 All right friends, that is the key version... 325 326 00:15:05,859 --> 00:15:08,370 of being a UI Web Designer with Illustrator. 326 327 00:15:09,026 --> 00:15:12,627 Know that there's a lot more you could do. 327 328 00:15:13,094 --> 00:15:14,758 So check out that course if you're keen. 328 329 00:15:15,047 --> 00:15:16,984 Otherwise let's get on to the next video.