CSS and Final Thoughts

Illustrator is code friendly and becoming more and more code friendly. 0:00 As you work creating wire frames, layouts and mock ups, its creating CSS and 0:05 XML code in the background that can translate later to web. 0:10 Illustrator allows us to export a CSS file that 0:14 we can give to the website developer with all of our CSS styles inside of it. 0:18 And because it is all in one file, it's easy to regenerate and 0:23 make global changes to many pages at once. 0:27 To do this, I'm gonna go up to Window. 0:31 And there it is, CSS Properties. 0:36 And you can see in the CSS Properties panel, 0:41 it's already showing our character styles, which is super helpful. 0:45 And because we've labeled our styles, this would be 0:51 labeled accordingly with the class ID inside your CSS styles sheet. 0:55 It has our font family, 1:00 font size, line height, letter spacing, so it's very helpful. 1:01 Links, it also lists the color. 1:06 The class ID here is related to, 1:10 well in this case it's related to the style because it's a text style. 1:14 But if we were to select, say, this header here, 1:18 you can see that the name of layer, 1:23 which is Header, is reflected here in the class ID. 1:28 And so the information on this, 1:33 they're giving us the background color which is helpful, 1:35 but I would also like the absolute position and the height and width. 1:39 And there is a way that you can edit your CSS export options, 1:44 it's this button right here, Export Options. 1:49 And as we look around, you can see we can add different attributes, 1:53 and I wanna include absolute position and 1:59 my dimensions, which would be height and width. 2:02 Now I hit OK. 2:06 Yeah. So you can see instantly, 2:09 now we have left and top, which is zero. 2:12 And our width, and our height. 2:15 So that's fantastic. 2:17 If I wanted to select this and paste it into another document, 2:19 I can select it like this and hit Copy and then Paste. 2:23 I can also select this button right here, Copy Selected Style. 2:29 That works, as well. 2:34 Even better, if you wanted to generate a global CSS style sheet for 2:35 everything here, you can do that. 2:41 And you can also save all of your image assets all at once. 2:43 Granted, when you do it this way with the CSS export options 2:48 all of your images are PNGs, and as we were talking about a couple videos 2:54 ago PNGs are sometimes the best choice but sometimes not. 3:00 That may or may not fit your needs at the time. 3:03 So I will show you how to export the CSS. 3:07 We go to File, Export, 3:09 and we're going to be exporting to our desktop. 3:15 I'm gonna save it as CSS and Export. 3:19 I had that earlier, so I hit Replace, and then I'll hit Okay. 3:23 And now I'm gonna toggle over to my finder and see, 3:28 yeah, so now everything is here. 3:34 It comes with our CSS document, if I were to open, 3:37 this is the full CSS here. 3:41 And if we were making a bunch of tiny minute changes with the text or colors or 3:46 that kind of thing, we can just regenerate this and give it to our developer and 3:51 he could plug it in, or she could plug it in, and the process could work faster. 3:55 So that's helpful. 4:01 And then it has also saved out all of our images as PNGs. 4:03 And like I was saying, and sometimes this might be what you want, 4:09 I think for the Illustrator or the EPS files, 4:12 these vector files, SVG is obviously the right choice as well for 4:16 the photos because you can see the PNGs 342 kilobytes. 4:21 That's much, much larger than the JPEGs we were saving earlier. 4:26 So in this case you can see that JPEGs for 4:30 the photography would be the better choice. 4:33 Congratulations. 4:36 You've completed the Illustrator For Web course. 4:37 You're on your way to designing better, more fully realized websites. 4:40 I hope you can see what an invaluable tool Illustrator can be for designers. 4:44 For additional information, visit Adobe Illustrator's CC resource page. 4:50 I put a link in the teachers notes. 4:54 Moving forward I would suggest you practice using these tools over and 4:58 over until you get more comfortable with them. 5:02 Let mistakes happen and 5:05 give yourself time to explore the software and see what it can do for you. 5:06 Like any discipline, with design and 5:11 illustration, in order to get better it takes practice and dedication. 5:13 Allow yourself to find inspiration everywhere. 5:18 Follow your curiosity. 5:22 The best way to develop your voice is through doing personal projects. 5:23 So get out there, start experimenting, and see what happens. 5:28