0 1 00:00:00,180 --> 00:00:02,757 Hi there, in this video we're going to look at... 1 2 00:00:02,782 --> 00:00:05,406 some advanced usage of Artboards. 2 3 00:00:05,431 --> 00:00:08,117 Not sort of advanced, more kind of like work flow techniques. 3 4 00:00:08,142 --> 00:00:12,070 So jump into the video, let's show you all that the Artboards can be. 4 5 00:00:12,305 --> 00:00:15,842 First trick for Artboards in Adobe Illustrator is... 5 6 00:00:15,867 --> 00:00:18,734 I'm going to grab my 'Black Arrow', and select this fox here. 6 7 00:00:18,828 --> 00:00:20,766 And say I've designed this, and I want-- 7 8 00:00:20,791 --> 00:00:22,507 I don't want all these white spaces around the outside... 8 9 00:00:22,532 --> 00:00:24,914 I want my Artboard to be right around the outside. 9 10 00:00:24,939 --> 00:00:27,539 I can grab my 'Artboard Tool', and I can get it pretty close. 10 11 00:00:27,719 --> 00:00:29,328 That snaps to the corner of this one. 11 12 00:00:29,539 --> 00:00:32,304 Oops, not too easy, the end has broken out, and snaps to this one. 12 13 00:00:32,703 --> 00:00:34,094 So, there's a bit of drama that way. 13 14 00:00:34,119 --> 00:00:37,836 A real easy thing to do, is grab your 'Black Arrow', have it selected. 14 15 00:00:38,273 --> 00:00:41,922 Then go down to your 'Artboard Tool'. 15 16 00:00:42,250 --> 00:00:44,835 And where it says-- one of the presets is here. 16 17 00:00:44,860 --> 00:00:47,336 Click on this one, second one down, or the third one down. 17 18 00:00:47,361 --> 00:00:49,157 So it's 'Fit to Selected Artwork'. 18 19 00:00:49,445 --> 00:00:51,555 It just toggles it all up. Nice! 19 20 00:00:51,711 --> 00:00:54,977 Super easy, now I can export it, and it's not going to be too big. 20 21 00:00:55,344 --> 00:00:57,296 All right, let's undo that. 21 22 00:00:57,484 --> 00:00:59,906 Next trick, let's have a look at the Artboards Panel... 22 23 00:00:59,946 --> 00:01:01,960 because I've actually got a few color options for this one. 23 24 00:01:02,078 --> 00:01:04,070 Often I'm using Artboards a lot of... 24 25 00:01:04,095 --> 00:01:07,500 when I'm doing kind of UI, User Interface design in Illustrator... 25 26 00:01:07,898 --> 00:01:09,703 for Web, or for applications... 26 27 00:01:09,938 --> 00:01:11,398 but I'm just doing color versions here. 27 28 00:01:12,164 --> 00:01:14,273 Let's go to 'Window', 'Artboards'... 28 29 00:01:14,438 --> 00:01:15,554 and you got a full panel. 29 30 00:01:17,859 --> 00:01:20,700 Okay, easy enough. I've named these already to be nice and clear... 30 31 00:01:21,023 --> 00:01:22,594 but we can do some nice stuff in here. 31 32 00:01:22,619 --> 00:01:24,969 We can click on any of these options at the end... 32 33 00:01:24,994 --> 00:01:27,219 and that brings us at the Artboard options. 33 34 00:01:27,244 --> 00:01:30,718 We can resize it, and do some extra things in here. 34 35 00:01:31,211 --> 00:01:32,789 What's also really handy is... 35 36 00:01:33,000 --> 00:01:35,633 let's say, this option here, Rearrange Artboard... 36 37 00:01:35,681 --> 00:01:38,648 because the spacing is not perfect here, I want to clean that up. 37 38 00:01:38,673 --> 00:01:40,488 Like, sometimes on a website design... 38 39 00:01:40,513 --> 00:01:42,805 if you've done my UI for Illustrator course... 39 40 00:01:43,812 --> 00:01:47,695 we make loads of pages in one Illustrator document. 40 41 00:01:47,977 --> 00:01:50,563 Click on this, and it just gives you a way of tidying things up. 41 42 00:01:50,588 --> 00:01:53,219 You can have two columns with this spacing. 42 43 00:01:53,289 --> 00:01:55,242 And watch this, I can click on 'OK'. 43 44 00:01:55,465 --> 00:01:57,435 Just kind of rearranges it to make it look nice. 44 45 00:01:57,467 --> 00:02:01,208 You can rearrange it, you can say, actually I want it to be 50 pixels across. 45 46 00:02:01,233 --> 00:02:02,967 And I want it to go just left or right. 46 47 00:02:03,326 --> 00:02:05,466 Just makes everything super tidy. 47 48 00:02:05,646 --> 00:02:08,060 The other nice thing about the new version of Illustrator... 48 49 00:02:08,085 --> 00:02:10,122 at least 2018, and above... 49 50 00:02:10,147 --> 00:02:12,169 you can have up to a thousand Artboards. 50 51 00:02:12,202 --> 00:02:14,177 I'm never going to have a thousand Artboards... 51 52 00:02:14,279 --> 00:02:16,974 but I said that once in a video, and loads of people messaged me... 52 53 00:02:16,999 --> 00:02:18,771 saying how useful it is for them. 53 54 00:02:18,796 --> 00:02:21,638 They didn't explain what they do with a thousand Artboards, but here you go. 54 55 00:02:21,740 --> 00:02:23,863 Another thing we can do is select multiple Artboards... 55 56 00:02:23,888 --> 00:02:25,278 either by grabbing them all here... 56 57 00:02:25,303 --> 00:02:27,661 or you can grab the Artboard Tool... 57 58 00:02:27,716 --> 00:02:29,880 and you can click on this one... 58 59 00:02:29,921 --> 00:02:33,092 hold 'Shift' and just grab the specific Artboard you want to change. 59 60 00:02:33,240 --> 00:02:36,317 Then at the top here, you can go and change things... 60 61 00:02:36,342 --> 00:02:38,232 like I wanted A4 now, or-- 61 62 00:02:38,257 --> 00:02:40,867 so just know you can do multiple Artboard stuff... 62 63 00:02:41,001 --> 00:02:42,638 by selecting the ones you want. 63 64 00:02:42,787 --> 00:02:45,317 You can also do strange things, like, treat them like boxes. 64 65 00:02:45,342 --> 00:02:47,888 Let's say, I like this guy... 65 66 00:02:49,029 --> 00:02:52,443 these two over here, but these two, I'd like to go... 66 67 00:02:52,763 --> 00:02:55,209 kind of over here together, because they're separate ideas, maybe. 67 68 00:02:55,388 --> 00:02:57,818 What I can do is click on them, Artboard Tool again. 68 69 00:02:58,060 --> 00:02:59,498 I'm 'Shift' clicking both of them. 69 70 00:02:59,523 --> 00:03:01,662 It's easier to click the name than anywhere else. 70 71 00:03:01,810 --> 00:03:03,388 And you can just use the Align Tool. 71 72 00:03:03,490 --> 00:03:05,459 So 'Properties', I can go and align you left. 72 73 00:03:07,076 --> 00:03:08,630 Kind of weird, kind of good. 73 74 00:03:08,841 --> 00:03:10,224 I want to align you to the right. 74 75 00:03:11,115 --> 00:03:12,966 You can do Align & Distribution. 75 76 00:03:13,412 --> 00:03:15,380 You can create them like normal ?? 76 77 00:03:15,677 --> 00:03:17,693 Last thing we're going to do is exporting these guys. 77 78 00:03:18,163 --> 00:03:20,817 To export these Artboards, we're going to go to 'Window'... 78 79 00:03:20,842 --> 00:03:22,974 and they don't call it Artboards, they call it... 79 80 00:03:23,138 --> 00:03:25,888 'File', I said 'Window', 'File', 'Export'. 80 81 00:03:26,114 --> 00:03:28,567 They call it Screens, because I guess that's... 81 82 00:03:29,598 --> 00:03:30,965 that's what they really want this to be. 82 83 00:03:30,990 --> 00:03:34,177 They want it for UI design, designing different kind of screen sizes. 83 84 00:03:35,099 --> 00:03:38,302 I'm ticking them all, you can just decide which ones you want to do. 84 85 00:03:38,537 --> 00:03:42,669 Where are they going to go? I'll stick them on my Desktop. 85 86 00:03:44,248 --> 00:03:46,396 I can't even find the Desktop, can't find it. 86 87 00:03:46,623 --> 00:03:49,950 So we'll stick it in my Documents folder, randomly. 87 88 00:03:50,193 --> 00:03:51,560 Let's click 'Choose'. 88 89 00:03:52,177 --> 00:03:54,279 And down the bottom here, this is the format. 89 90 00:03:54,304 --> 00:03:56,419 This is an interesting stuff. You can click things like-- 90 91 00:03:57,788 --> 00:04:01,435 Do the UI course that I've got for Illustrator if you want to get into... 91 92 00:04:01,802 --> 00:04:03,930 like explaining what Android does, and all the stuff. 92 93 00:04:03,955 --> 00:04:05,529 It's not really what this one is about. 93 94 00:04:05,748 --> 00:04:08,435 What we can do though is, you want typical formats... 94 95 00:04:08,630 --> 00:04:11,786 so down here you've got JPEG, PNGs... 95 96 00:04:11,826 --> 00:04:14,888 I probably want PNG because I want the transparency around the box. 96 97 00:04:14,913 --> 00:04:16,349 I'm going to click on him. 97 98 00:04:16,834 --> 00:04:19,005 It scales things at different versions. 98 99 00:04:19,287 --> 00:04:22,724 I don't want a different scale at that, I want, maybe an SVG... 99 100 00:04:23,052 --> 00:04:25,505 and maybe another version that is PNG. 100 101 00:04:25,530 --> 00:04:28,865 So I can send it to my client, and they have no excuse not to open it up. 101 102 00:04:30,280 --> 00:04:32,888 Click 'Export Artboard', kick back, relax. 102 103 00:04:33,185 --> 00:04:36,138 And hopefully, on my documents, I've got to find... 103 104 00:04:36,638 --> 00:04:38,294 what is it called, it's called Artboards. 104 105 00:04:39,966 --> 00:04:41,216 Organize by date. 105 106 00:04:41,241 --> 00:04:43,888 They're all just dumped in there, not in a folder. 106 107 00:04:44,482 --> 00:04:45,599 There's all my guys. 107 108 00:04:45,731 --> 00:04:48,718 So I've got-- you can see, the cool thing about it is... 108 109 00:04:48,743 --> 00:04:52,403 there's a green PNG, there's a green PDF... 109 110 00:04:52,436 --> 00:04:55,256 and there's a green SVG, Scalable Vector Graphic. 110 111 00:04:55,365 --> 00:04:58,380 The new versions of EPS', you should use those. 111 112 00:04:58,873 --> 00:05:00,294 Anyway, that's how to do that. 112 113 00:05:00,319 --> 00:05:02,545 Goodbye, you guys, you shouldn't be in there. 113 114 00:05:02,960 --> 00:05:04,913 One last thing before I go. 114 115 00:05:04,946 --> 00:05:07,811 I am going to show you that, with the 'Artboard Tool' selected - 115 116 00:05:07,836 --> 00:05:10,078 the shortcut is 'Shift O' on your keyboard. 116 117 00:05:10,257 --> 00:05:11,488 - and if I start dragging... 117 118 00:05:11,513 --> 00:05:14,390 and hold down the 'Option' key on a Mac, or 'Alt' key on a PC... 118 119 00:05:14,415 --> 00:05:15,406 it's going to make a duplicate. 119 120 00:05:16,085 --> 00:05:19,531 It's a good way of making duplicates of Artboards along with the art work. 120 121 00:05:19,710 --> 00:05:22,061 If you hold down 'Shift' while you're doing it as well... 121 122 00:05:22,265 --> 00:05:24,474 so, you got to start dragging first... 122 123 00:05:24,499 --> 00:05:27,929 then hold down 'Alt Shift', or 'Option Shift' on a Mac... 123 124 00:05:28,320 --> 00:05:30,726 and it kind of drags out in a straight line. 124 125 00:05:30,751 --> 00:05:33,132 So everything kind of stays nice, and kind of aligned. 125 126 00:05:33,921 --> 00:05:35,937 All right, my friends, that is it... 126 127 00:05:35,962 --> 00:05:39,203 for kind of work flow using Artboards. 127 128 00:05:39,228 --> 00:05:40,820 Hope you got some tricks in there. 128 129 00:05:41,266 --> 00:05:42,625 Let's jump into the next video.