Introduction to Converting Illustrator to HTML
ai2html: A Baby Steps Introduction to Converting Illustrator to HTML
Transcript
all right so let's say we spent a lot of
time making an incredible ly boring
graphic here about the size of the
different cities across the United
States so we'd normally do is you would
you know file save for web
you'd save this as a PNG and then you
would have a wonderful PNG right here so
just a normal image file nothing fancy
the good thing about a PNG or an image
file in general is it can be shared very
easily the bad side is though if I
resize it to get smaller and smaller and
smaller you can no longer really read
the text so how many people does Dallas
have if I squint I can see it's 1.3
million but due to the way that you know
the magic of the internet works these
days we kind of expect no matter what
our screen size should be we should be
able to read text we should be able to
interact with the things that we make so
the New York Times they're heroes they
saved the day they made a tool called AI
to HTML you can find it at AI to HTML
org what it does is it takes an
illustrator file that you've made and
instead of exporting it as an image file
like a PNG it exports it as a webpage
which can have all sorts of magic things
happen to it so we're gonna do to do a
tutorial on how to make AIT HTML do what
you want
ai to HTML to do so first things first
we are going to make a brand new
document so the important thing is here
usually you're probably gonna create a
new document and units are gonna be
millimeters down here we do not want
millimeters because this is not for
prints because this is for the web we're
gonna change units to pixels because
pixels are what you measure everything
on a screen with mine is 800 pixels wide
400 pixels tall you should probably do
the same thing just so we can run to the
same sorts of problems also if you go
down to advanced CMYK is also for
printing it's a color mode cyan magenta
yellow and black what we want to do
instead is change that to RGB it's going
to yell at you possibly yell at you just
ignore that
and then you're gonna hit okay so the
two things you want are units
pix
colormode RGB and I guess width and
height same as mine so we got a brand
new file here and all I'm gonna do is
I'm gonna cheat I'm not gonna build this
map again for you I'm just going to cut
and paste it into here so this is a
wonderful wonderful map that we want to
turn into HTML but the first thing we
need to do is take the AI to HTML script
it's an add-on to illustrator and
install it into illustrator so here's
what we do how to install great the
documentation is really good for AIT
HTML um it's just sometimes it's better
to see it happen so download the latest
version of the script here I click
through there's a nice big long file
here so what we're gonna do is we're
gonna save it and it recommends here you
save it into adobe illustrator CC
presets en-us scripts ai to HTML you
might not know exactly what that means
so we're gonna we're gonna walk through
that so we want to do is save page as
you're gonna make sure down here it says
format javascript you're gonna make sure
it does not say HTML down here has to be
JavaScript so we're going to go into
applications we're gonna go into Adobe
Illustrator CC 2015 is mine you cannot
use this script with Adobe Illustrator
cs6 it has to be adobe illustrator CC
which is Creative Cloud so we go into
here and then there are some more
folders there's a folder for presets
there's a folder en us and there is a
folder for scripts and now we have all
these other files in here we can add a
ight HTML to the pile we're going to hit
save wonderful you see down here it got
saved and now it's time to use it so we
have our eight hundred by six or eight
hundred by four hundred page here we
have to save this first so what happens
is when you run a at HTML it saves your
HTML file in a subfolder based on where
your original file if your illustrator
file is saved so we're gonna file save I
have a folder on my desktop called AIT
HTML tutorial I'm gonna call this map
dot ai
I'm gonna just agree to whatever it says
and then I'm going to go to file scripts
AI to HTML little progress bar and then
it's gonna say all these magic things so
it's settings text block was created the
left of all your artboards you can use
it to customize your output the image
output path folder did not exist so the
folder was created and your illustrator
file was saved so we're gonna hit okay
we're gonna look over here and there's a
brand new this is a text block that
gives a bunch of settings that we're
gonna go through later but first thing
we'll hop on my desktop
we're gonna go to AI to HTML tutorial
and we're gonna see that along with the
illustrator file there is now an AI to
HTML output folder we'll open that up
and now there's a PNG right here and oh
you say I thought there wasn't gonna be
a PNG you open it up there is no text on
it so it looks like AIT HTML really
screwed up not true what we do is we're
gonna open up this map dot HTML file
tada it looks kind of the same as what
we had here this is the PNG this is the
HTML this is the PMD this is the HTML
the magic thing about what AIT HTML does
though is this text here is actually
text it's text that's overlaid on top of
the image so the image we opened up
before is actually the background and
then there's text on top of it so you
can select it you can search I can say
in New York City but if we resize it it
always stays the same way so the real
fun thing about a HTML is not the fact
that you can just simply make selectable
text the real fun part is the resizing
so we're gonna go back into our AI file
and we're going to scroll over here and
look at all of these options we can set
for AIT HTML there's a link in the
description about what responsive design
is but what we're gonna do is we're
gonna take this responsiveness right now
it's fixed and fixed means it's always
going to be the same width it's always
going to be the same height no matter
what this here will always be 800 wide
by 400 tall well we
want to have happen is when the page
gets bigger we want it to get bigger and
when the page gets smaller if we want it
to get smaller so we're gonna change
responsiveness from fixed to dynamic and
then we're just gonna run the exact same
thing again file scripts ai2 HTML it's
gonna say your illustrator file was
saved and we're gonna refresh this page
right here and oh look at that it gets
bigger and bigger and bigger and bigger
and smaller and smaller and smaller and
smaller and smaller and smaller and
smaller so we do run into a problem when
we make it very small in that this text
ends up wrapping New York City wraps Los
Angeles is going off on the side of the
page and we are going to fix that up in
just one second
time making an incredible ly boring
graphic here about the size of the
different cities across the United
States so we'd normally do is you would
you know file save for web
you'd save this as a PNG and then you
would have a wonderful PNG right here so
just a normal image file nothing fancy
the good thing about a PNG or an image
file in general is it can be shared very
easily the bad side is though if I
resize it to get smaller and smaller and
smaller you can no longer really read
the text so how many people does Dallas
have if I squint I can see it's 1.3
million but due to the way that you know
the magic of the internet works these
days we kind of expect no matter what
our screen size should be we should be
able to read text we should be able to
interact with the things that we make so
the New York Times they're heroes they
saved the day they made a tool called AI
to HTML you can find it at AI to HTML
org what it does is it takes an
illustrator file that you've made and
instead of exporting it as an image file
like a PNG it exports it as a webpage
which can have all sorts of magic things
happen to it so we're gonna do to do a
tutorial on how to make AIT HTML do what
you want
ai to HTML to do so first things first
we are going to make a brand new
document so the important thing is here
usually you're probably gonna create a
new document and units are gonna be
millimeters down here we do not want
millimeters because this is not for
prints because this is for the web we're
gonna change units to pixels because
pixels are what you measure everything
on a screen with mine is 800 pixels wide
400 pixels tall you should probably do
the same thing just so we can run to the
same sorts of problems also if you go
down to advanced CMYK is also for
printing it's a color mode cyan magenta
yellow and black what we want to do
instead is change that to RGB it's going
to yell at you possibly yell at you just
ignore that
and then you're gonna hit okay so the
two things you want are units
pix
colormode RGB and I guess width and
height same as mine so we got a brand
new file here and all I'm gonna do is
I'm gonna cheat I'm not gonna build this
map again for you I'm just going to cut
and paste it into here so this is a
wonderful wonderful map that we want to
turn into HTML but the first thing we
need to do is take the AI to HTML script
it's an add-on to illustrator and
install it into illustrator so here's
what we do how to install great the
documentation is really good for AIT
HTML um it's just sometimes it's better
to see it happen so download the latest
version of the script here I click
through there's a nice big long file
here so what we're gonna do is we're
gonna save it and it recommends here you
save it into adobe illustrator CC
presets en-us scripts ai to HTML you
might not know exactly what that means
so we're gonna we're gonna walk through
that so we want to do is save page as
you're gonna make sure down here it says
format javascript you're gonna make sure
it does not say HTML down here has to be
JavaScript so we're going to go into
applications we're gonna go into Adobe
Illustrator CC 2015 is mine you cannot
use this script with Adobe Illustrator
cs6 it has to be adobe illustrator CC
which is Creative Cloud so we go into
here and then there are some more
folders there's a folder for presets
there's a folder en us and there is a
folder for scripts and now we have all
these other files in here we can add a
ight HTML to the pile we're going to hit
save wonderful you see down here it got
saved and now it's time to use it so we
have our eight hundred by six or eight
hundred by four hundred page here we
have to save this first so what happens
is when you run a at HTML it saves your
HTML file in a subfolder based on where
your original file if your illustrator
file is saved so we're gonna file save I
have a folder on my desktop called AIT
HTML tutorial I'm gonna call this map
dot ai
I'm gonna just agree to whatever it says
and then I'm going to go to file scripts
AI to HTML little progress bar and then
it's gonna say all these magic things so
it's settings text block was created the
left of all your artboards you can use
it to customize your output the image
output path folder did not exist so the
folder was created and your illustrator
file was saved so we're gonna hit okay
we're gonna look over here and there's a
brand new this is a text block that
gives a bunch of settings that we're
gonna go through later but first thing
we'll hop on my desktop
we're gonna go to AI to HTML tutorial
and we're gonna see that along with the
illustrator file there is now an AI to
HTML output folder we'll open that up
and now there's a PNG right here and oh
you say I thought there wasn't gonna be
a PNG you open it up there is no text on
it so it looks like AIT HTML really
screwed up not true what we do is we're
gonna open up this map dot HTML file
tada it looks kind of the same as what
we had here this is the PNG this is the
HTML this is the PMD this is the HTML
the magic thing about what AIT HTML does
though is this text here is actually
text it's text that's overlaid on top of
the image so the image we opened up
before is actually the background and
then there's text on top of it so you
can select it you can search I can say
in New York City but if we resize it it
always stays the same way so the real
fun thing about a HTML is not the fact
that you can just simply make selectable
text the real fun part is the resizing
so we're gonna go back into our AI file
and we're going to scroll over here and
look at all of these options we can set
for AIT HTML there's a link in the
description about what responsive design
is but what we're gonna do is we're
gonna take this responsiveness right now
it's fixed and fixed means it's always
going to be the same width it's always
going to be the same height no matter
what this here will always be 800 wide
by 400 tall well we
want to have happen is when the page
gets bigger we want it to get bigger and
when the page gets smaller if we want it
to get smaller so we're gonna change
responsiveness from fixed to dynamic and
then we're just gonna run the exact same
thing again file scripts ai2 HTML it's
gonna say your illustrator file was
saved and we're gonna refresh this page
right here and oh look at that it gets
bigger and bigger and bigger and bigger
and smaller and smaller and smaller and
smaller and smaller and smaller and
smaller so we do run into a problem when
we make it very small in that this text
ends up wrapping New York City wraps Los
Angeles is going off on the side of the
page and we are going to fix that up in
just one second