Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

CSS and Final Thoughts

5:32 with Ashley Burke

Export your CSS Data with images from Adobe Illustrator using the CSS Export Tool. Congratulations, you have completed the Illustrator for Web course! You are on your way to designing better, and more fully realized websites.

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

You need to sign up for Treehouse in order to download course files.

Sign up