0 1 00:00:00,001 --> 00:00:02,508 Hey there, in this video, we've drawn something in Illustrator... 1 2 00:00:02,533 --> 00:00:05,093 now we need to use it in other Adobe programs. 2 3 00:00:05,164 --> 00:00:09,219 We'll start with the most common programs, then work a way down to the beads. 3 4 00:00:09,736 --> 00:00:11,938 So probably the best way for all of them is... 4 5 00:00:11,963 --> 00:00:14,328 if I select my fox here, go to my libraries-- 5 6 00:00:14,609 --> 00:00:17,906 If you don't have a library you can create one, 'Create New Library'. 6 7 00:00:18,133 --> 00:00:20,250 I'm just going to grab him, just drag him in here. 7 8 00:00:21,102 --> 00:00:22,875 I should give him a name, I never do. 8 9 00:00:23,203 --> 00:00:26,633 There he is, in any program, let's say, Photoshop... 9 10 00:00:26,906 --> 00:00:28,609 I can go to my library... 10 11 00:00:29,416 --> 00:00:31,313 there he is, drag him, got a fox. 11 12 00:00:32,930 --> 00:00:34,578 That works for any of them. 12 13 00:00:34,603 --> 00:00:38,054 InDesign, go to my libraries, 'Window', 'CC Libraries'. 13 14 00:00:40,812 --> 00:00:41,703 'My Library'. 14 15 00:00:41,744 --> 00:00:43,734 I've got two of My Libraries. I basically got three. 15 16 00:00:45,757 --> 00:00:48,805 So that is a way to bring in these graphics. 16 17 00:00:49,039 --> 00:00:52,727 The pro is that, I can double click this guy in my library now... 17 18 00:00:52,752 --> 00:00:54,921 it opens it up in a separate window in Illustrator... 18 19 00:00:54,953 --> 00:00:56,470 and I can go through and recolor it. 19 20 00:00:56,501 --> 00:00:57,931 I can say, I don't want to choose that color. 20 21 00:00:58,141 --> 00:01:01,914 Hit 'Save', and if I jump back into InDesign now... 21 22 00:01:01,939 --> 00:01:04,781 you'll notice, that's updated, Photoshop's updated. 22 23 00:01:05,531 --> 00:01:07,172 Not this original Illustrator file... 23 24 00:01:07,197 --> 00:01:08,769 just so you know, it's kind of a one way street... 24 25 00:01:08,794 --> 00:01:10,180 once it goes in there, they're not connected. 25 26 00:01:10,523 --> 00:01:12,555 I could drag it back out now, and it will be. 26 27 00:01:12,805 --> 00:01:14,492 I've got kind of a link there. 27 28 00:01:14,734 --> 00:01:16,484 Now, sometimes that can be problematic. 28 29 00:01:16,509 --> 00:01:18,836 Say you want to kind of not link to the libraries... 29 30 00:01:18,861 --> 00:01:22,063 because you're like, "Man, it's connecting to libraries, and it's causing dramas." 30 31 00:01:22,273 --> 00:01:25,055 What you can do is, instead of just dragging it out like that... 31 32 00:01:25,789 --> 00:01:29,453 what you can do is, hold down the 'Option' key on a Mac, and drag out. 32 33 00:01:30,477 --> 00:01:33,094 The difference between that and that is that they're not linked. 33 34 00:01:33,119 --> 00:01:34,965 While dragging it out, just make sure you hold down... 34 35 00:01:34,990 --> 00:01:37,363 the 'Alt' key on a PC, or 'Option' key on a Mac... 35 36 00:01:37,551 --> 00:01:39,561 and when it comes out, it won't be connected. 36 37 00:01:39,586 --> 00:01:40,663 Same in Photoshop... 37 38 00:01:40,688 --> 00:01:44,227 Drag it down holding down the 'Alt', or 'Option' key. 38 39 00:01:44,252 --> 00:01:46,422 And now if I go back to that original - 39 40 00:01:46,447 --> 00:01:47,750 Where is he? there he's there. 40 41 00:01:47,775 --> 00:01:50,328 - and I go and change him to something else... 41 42 00:01:52,777 --> 00:01:54,328 the ones that are linked will change. 42 43 00:01:55,000 --> 00:01:56,180 Let's have a look in Photoshop. 43 44 00:01:56,898 --> 00:01:58,523 The link won't change, but this one won't. 44 45 00:01:58,676 --> 00:02:01,477 I often always drag mine out, not connected. 45 46 00:02:01,797 --> 00:02:03,750 I like to kind of have them separate. 46 47 00:02:04,109 --> 00:02:06,140 That's a great way, but there's another way. 47 48 00:02:06,165 --> 00:02:08,054 Most of them, you can just copy and paste, right? 48 49 00:02:08,079 --> 00:02:10,789 Instead of going through that drama, you can just select this, copy it. 49 50 00:02:11,477 --> 00:02:12,781 Do I have a white background? I don't. 50 51 00:02:12,814 --> 00:02:16,054 Select all, copy it, and go into-- 51 52 00:02:16,079 --> 00:02:17,492 actually let's go back to this original one. 52 53 00:02:17,914 --> 00:02:21,273 So 'Edit', 'copy', and just 'paste'. 53 54 00:02:21,742 --> 00:02:24,484 When you're using Photoshop-- so let's do Photoshop now. 54 55 00:02:24,509 --> 00:02:27,586 So if I paste into Photoshop, it's going to ask me this. 55 56 00:02:28,146 --> 00:02:30,741 Most people go to-- depends if you know or not. 56 57 00:02:30,814 --> 00:02:33,149 A lot of people use pixels, because that makes sense. 57 58 00:02:33,939 --> 00:02:36,610 This one here is the one you want to be using, 'Smart Object'. 58 59 00:02:36,635 --> 00:02:38,103 Click on 'Smart Object'. 59 60 00:02:38,166 --> 00:02:40,392 The cool thing about it is that I get to resize it. 60 61 00:02:40,417 --> 00:02:42,673 Pixels means-- if I do it with pixels... 61 62 00:02:43,142 --> 00:02:44,650 and I resize it afterwards... 62 63 00:02:44,675 --> 00:02:48,259 it's got to potentially pixelate, so watch this, if I resize this one now... 63 64 00:02:49,039 --> 00:02:50,259 you start seeing the pixels. 64 65 00:02:50,626 --> 00:02:53,634 This one though, because I said 'Smart Object'... 65 66 00:02:53,861 --> 00:02:57,439 it's clever, it keeps the vector in there. So that's the one to use. 66 67 00:02:57,761 --> 00:02:59,932 Let's look at InDesign, you can do the same thing. 67 68 00:02:59,957 --> 00:03:04,300 You can, instead of using the libraries, you can just paste them in here as well. 68 69 00:03:04,332 --> 00:03:06,057 Brings it through as a vector, it's perfect. 69 70 00:03:06,487 --> 00:03:08,152 It doesn't connect to anything. 70 71 00:03:08,925 --> 00:03:11,073 Just copy and paste into InDesign. 71 72 00:03:11,098 --> 00:03:13,230 Let's look at some of the other ones, say After Effects. 72 73 00:03:13,255 --> 00:03:15,370 I do most of my drawing in Illustrator... 73 74 00:03:15,395 --> 00:03:17,518 and bring it in, and animate in After Effects. 74 75 00:03:18,823 --> 00:03:23,214 In here, you can-- let's say we want-- there's a couple of things we need to. 75 76 00:03:23,433 --> 00:03:26,144 Doesn't really matter how you get it in here, you can't copy and paste. 76 77 00:03:26,169 --> 00:03:29,573 You can 'File', 'Import' the Illustrator file, drag this guy in, that works too. 77 78 00:03:30,159 --> 00:03:34,050 The only drama with this, when you bring it in, there's two things you need to do. 78 79 00:03:34,331 --> 00:03:36,292 One is, you need to... 79 80 00:03:36,317 --> 00:03:39,222 often if you want to animate this in any kind of way... 80 81 00:03:40,214 --> 00:03:42,597 it doesn't like that this is an ai file. 81 82 00:03:42,683 --> 00:03:44,265 What you can do to get around that... 82 83 00:03:44,290 --> 00:03:45,495 say you're doing some animation, and you're like... 83 84 00:03:45,520 --> 00:03:47,441 "Man, Illustrator files just don't work." 84 85 00:03:47,683 --> 00:03:49,431 Go to 'Layer', and go to this one that says.... 85 86 00:03:49,456 --> 00:03:51,738 'Convert Shapes from Vector Layer'. 86 87 00:03:51,972 --> 00:03:55,808 It kind of takes into a shape that After Effects likes a lot more. 87 88 00:03:56,550 --> 00:03:58,323 What it does down here is... 88 89 00:03:58,526 --> 00:04:00,339 that was the original layer... 89 90 00:04:00,364 --> 00:04:03,431 it's created this new layer, and turned the old one off. 90 91 00:04:04,121 --> 00:04:05,237 We don't need him anymore. 91 92 00:04:05,917 --> 00:04:07,306 So this one here is-- 92 93 00:04:08,425 --> 00:04:12,096 Often you can do a lot more effects with it when it's being converted that way. 93 94 00:04:12,433 --> 00:04:15,589 The other thing to do is, whenever I scale something up... 94 95 00:04:16,612 --> 00:04:19,956 let's say I don't do it that way, and I just bring in my graphic... 95 96 00:04:20,487 --> 00:04:22,807 it's just a logo that needs to sit there, but I decide to scale it up... 96 97 00:04:22,948 --> 00:04:24,300 can you see, it pixelates. 97 98 00:04:24,340 --> 00:04:26,870 So whatever original size it comes through... 98 99 00:04:27,730 --> 00:04:30,745 it is vector, but it just won't show you, and it will pixelate. 99 100 00:04:30,770 --> 00:04:32,386 So you got to click this option. 100 101 00:04:32,909 --> 00:04:35,284 Make sure you're on this, you can toggle and switch it-- 101 102 00:04:35,309 --> 00:04:36,603 I know this might be hard core.. 102 103 00:04:36,628 --> 00:04:38,527 this is for people that know After Effects... 103 104 00:04:38,808 --> 00:04:40,136 or at least a little bit. 104 105 00:04:40,161 --> 00:04:43,487 Click on this magic button there, you can see, it re-renders it. 105 106 00:04:43,761 --> 00:04:46,292 It can stress your machine out a little bit doing it. 106 107 00:04:47,595 --> 00:04:49,558 If you need to make it smaller, don't worry about it... 107 108 00:04:49,583 --> 00:04:51,948 but if you need to make it bigger, definitely click that option. 108 109 00:04:52,112 --> 00:04:53,737 Okay, coming up to something like animate. 109 110 00:04:53,770 --> 00:04:55,620 Say you're doing banner ad animation... 110 111 00:04:55,645 --> 00:04:58,373 all you need to do is, copy and paste to this one as well... 111 112 00:04:58,398 --> 00:04:59,525 or use your libraries. 112 113 00:04:59,550 --> 00:05:01,995 So 'New Layer', I'm going to paste it in. 113 114 00:05:02,409 --> 00:05:05,011 I'm going to leave 'Illustrator Import Preferences'. 114 115 00:05:05,558 --> 00:05:06,972 And there's my little graphic. 115 116 00:05:07,110 --> 00:05:09,485 The cool thing about this is that I can animate it. 116 117 00:05:09,666 --> 00:05:12,714 And let's preview our cool little parallax ad... 117 118 00:05:12,739 --> 00:05:15,096 we've ruined with our foxes here. 118 119 00:05:16,228 --> 00:05:18,931 If you're not sure what animate does, it's mainly for banner ads. 119 120 00:05:18,956 --> 00:05:20,416 That's what I use it for anyway. 120 121 00:05:21,572 --> 00:05:22,611 Next one, Dreamweaver. 121 122 00:05:22,651 --> 00:05:26,493 So you want to go out to Dreamweaver, this is probably the most complicated... 122 123 00:05:26,518 --> 00:05:29,353 not complicated, but it's not a copy and paste job. 123 124 00:05:29,626 --> 00:05:32,728 So I've got my graphic, I want to get this out into Dreamweaver. 124 125 00:05:33,124 --> 00:05:35,540 Because it's vector, we want to take advantage of... 125 126 00:05:35,565 --> 00:05:39,343 the new format called SVG, which is the Scalable Vector Graphic. 126 127 00:05:39,671 --> 00:05:43,326 To do that, go to 'Window', and go to this one called 'Asset Export'. 127 128 00:05:44,155 --> 00:05:46,530 What we do is, you drag it in... 128 129 00:05:48,176 --> 00:05:51,051 and you can see, it dragged it in all the pieces. 129 130 00:05:51,076 --> 00:05:53,882 So I'm going to undo that, we're going to group it first... 130 131 00:05:53,907 --> 00:05:55,543 then drag it in, so it's one unit. 131 132 00:05:55,960 --> 00:05:58,648 And down here you can say what kind of format you want it to be. 132 133 00:05:58,836 --> 00:06:02,890 So let's say you want to get it out, just the same size it is as a PNG... 133 134 00:06:02,915 --> 00:06:04,140 which gives you transparency. 134 135 00:06:04,165 --> 00:06:06,539 You might go to that option for Dreamweaver. 135 136 00:06:06,758 --> 00:06:10,101 Or this is the kind of newer, fancier, Scalable Vector Graphic. 136 137 00:06:11,211 --> 00:06:12,953 You can do that, hit 'Export'... 137 138 00:06:12,985 --> 00:06:16,343 and you're going to get the file to use in Dreamweaver. 138 139 00:06:16,368 --> 00:06:18,796 Just go to your 'Insert Image'. 139 140 00:06:20,867 --> 00:06:22,156 The last one is Dimension. 140 141 00:06:22,181 --> 00:06:27,554 Dimension is the new kind of 3D modeling kind of program. 141 142 00:06:27,579 --> 00:06:29,383 I'll do that in a separate whole video. 142 143 00:06:29,408 --> 00:06:32,281 So check that out, we'll do that in a bigger kind of thing. 143 144 00:06:32,306 --> 00:06:34,734 This is a pretty cool little addition to Illustrator... 144 145 00:06:34,759 --> 00:06:37,078 but it just wants to bring in ai files. 145 146 00:06:37,400 --> 00:06:40,132 Before I go on with my sales pitch, you can switch over next. 146 147 00:06:40,851 --> 00:06:45,062 Say, like the Photoshop, I've got an Essentials and an Advance course... 147 148 00:06:45,087 --> 00:06:46,797 that I'm making right after this one. 148 149 00:06:47,344 --> 00:06:51,112 If you're an InDesign user, I've got an Essentials for that as well... 149 150 00:06:51,137 --> 00:06:54,359 and an Advanced one, so if you're enjoying, like this Illustrator Advanced course... 150 151 00:06:54,384 --> 00:06:57,508 there's an InDesign Advanced one, and a Photoshop Advanced. 151 152 00:06:57,867 --> 00:06:59,484 Another thing you might do is... 152 153 00:07:00,417 --> 00:07:02,883 a good step for you, you might be going to something like XD. 153 154 00:07:03,445 --> 00:07:05,226 XD, we haven't really looked at yet. 154 155 00:07:05,437 --> 00:07:09,195 XD is basically a vector-- 155 156 00:07:09,220 --> 00:07:10,862 It's kind of like a simple drawing program... 156 157 00:07:10,887 --> 00:07:14,546 but it allows you to draw really kind of-- 157 158 00:07:14,571 --> 00:07:17,671 Looks very like Illustrator, it's very similar... 158 159 00:07:17,696 --> 00:07:19,485 except that it has this Prototype option. 159 160 00:07:19,680 --> 00:07:21,679 You can kind of see here, if I prototype this... 160 161 00:07:21,859 --> 00:07:24,687 I can make it feel like-- 161 162 00:07:25,555 --> 00:07:27,914 This is a prototype we make in my XD course. 162 163 00:07:28,703 --> 00:07:33,343 So if you want to get into UI design, or User Experience design... 163 164 00:07:33,368 --> 00:07:35,038 XD is a great step for you. 164 165 00:07:35,063 --> 00:07:36,948 If you are at this level of Illustrator... 165 166 00:07:36,973 --> 00:07:40,539 you're going to be able to do XD quite well, if you do my course. 166 167 00:07:41,883 --> 00:07:44,117 In this one here you can just copy and paste as well... 167 168 00:07:44,336 --> 00:07:46,851 and the vector comes through, and the cool thing about it is... 168 169 00:07:47,023 --> 00:07:49,788 you can double click on it, and it's still kind of editable pieces... 169 170 00:07:49,813 --> 00:07:53,703 and you get to build your XD using the drawing tools from Illustrator. 170 171 00:07:53,728 --> 00:07:55,922 Just kind of adding the interactivity in here. 171 172 00:07:55,954 --> 00:07:57,104 You can see here... 172 173 00:07:57,937 --> 00:08:00,758 it's our kind of website mockup. 173 174 00:08:00,960 --> 00:08:02,948 I've also got courses on After Effects... 174 175 00:08:02,973 --> 00:08:05,758 there's Motion Graphics, Animate Banner Ads... 175 176 00:08:06,015 --> 00:08:08,172 loads of Dreamweaver ones. 176 177 00:08:09,757 --> 00:08:11,578 All right, stop trying to sell your things. 177 178 00:08:11,898 --> 00:08:13,742 Let's get on to the very next video.