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
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.
Check out the Adobe Illustrator Creative Cloud Guide and Tutorials
More information on How to Use Adobe Illustrator to Export CSS-Based Web Graphics
Related Courses
More Adobe Illustrator Learning Tutorials
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up