|
Home
> Articles
> Illustration >
Creating Web Pages in Adobe Illustrator 9.0
ILLUSTRATOR TUTORIAL - CREATING
WEB PAGES IN ADOBE ILLUSTRATOR 9.0"
by Dean Bagley
I
am really a graphic designer and spend most of my time using Adobe
Illustrator. I do write my own web sites and build the pages by
writing code the good old (and time-consuming) tag-after-tag way.
I am somewhat proficient with HTML and can do some good sites writing
this way.
I
was exploring the Net and saw some very racy web pages. My eyes
were boggled by the incredible graphics they were utilizing as the
background watermark piece that all the links rested on. How, I
asked myself...how do they create such sophisticated graphics and
still incorporate them in a web page?
This
has puzzled me for quite some time. I knew Adobe Illustrator had
a "Save for Web" feature but I assumed this was for exporting simple
JPG, GIF, or PNG files. I saw it did have a "Save HTML File" option,
but never used it.
So,
I said "what the heck" and decided to try it. I placed an attractive
picture of a seagull I took at the beach.
I
drew a white rectangle and added a drop shadow in the Effect menu.
And
added 35% transparency.
I
put in some type as a headline name for the site, and some body
copy which was a poem about seagulls I found on the Web.
To
push buttons for links I needed buttons. I drew a rounded button,
added a drop shadow and some descriptive text.
I
duplicated this button across the bottom of the page and named some
sites in the text.
Each
button I selected along with its text and grouped them. Then, with
the group selected, I used the Attributes palette to add a polygon
image map with the URL from one of my own sites.
 
I did
this with each of the buttons, giving a different URL to each.
Along
the upper left of the page I added some text blocks of typical site
links, such as HOME, SUBMIT, DOWNLOAD, WHAT'S NEW, and CONTACT US.
I didn't add URL addresses because these pages were not yet made.
But, they looked good on the page.
I
was amazed. I had created a whole web page complete with links,
all in Illustrator! I went to Save for Web in the File men. I selected
the Save HTML File option and clicked Save. The computer whirred
for a few seconds and stopped, having done its work.
I
went to the folder it was saved to and saw an HTML file and a single
graphic. A GIF. I dragged the HTML file over to my browser and when
it came up.... I nearly fell out of my seat.
My
whole web page art I had created was now showing in the browser
and it was beautiful! I put the mouse over the link buttons and
watched it change to the pointer finger. I clicked one of the buttons
and it went instantly to the URL I had applied. My mouth fell open.
This
was a totally unexpected way to create a web page with links. A
beautiful web page. (you can see this web page at http://rain.prohosting.com/bagster/seagulls/
).
I
had to think about this for a spell. I had reached another plateau
of web design since I had learned basic HTML. And the whole point
of this new revelation was that I actually didn't need to know one
tag of HTML to do pages this way. Granted, it can't do tables or
the more sophisticated HTML programming that, say, Dreamweaver can
do; but, to be able to produce breathtaking graphics combined with
URL links and save this all to an HTML file is and eye-opener.
In
Illustrator, I can create spectacular looking sites, button and
other graphics, add the URLs, and merely choose the Save for Web
option with Save HTML File, and BINGO..... out comes a totally written
web page.
CREATE
YOUR OWN WEB PAGE IN ADOBE ILLUSTRATOR
If you have Illustrator 9.0, just follow these simple instructions,
and you will have a web page up and running before you know it.
1)
If you are a reasonably competent with Illustrator, draw your own
spectacular background design (roughly 640 x 480 pixels in size),
or place a photo you like.
2)
For links, any object, picture or text block can be selected and
then Attributes chosen from the Window menu. In this palette click
the Image Map menu and choose either Rectangle or Polygon depending
on the shape of the selected piece. In the URL field type the address
of the link you want it to go to. Be sure to start the address with
"http://", such as "http://www.baggygator.com". I left out the http://
and the URL did not work.
3)
Once your piece is designed and all the buttons or text block links
have been assigned URLs, go to the File menu and choose Save for
Web. In the appearing window do not make any changes. If you want
to see how this looks in your browser, there is a browser button
down at the bottom (either Netscape or Internet Expolorer. You may
have to change to your own browser).
In
the browser you will see your design before saving. You can even
click the link buttons to see if they work.
4)
Once you are satisfied with the way it looks and works, click the
Save button in this Save for Web window. You will be taken to a
dialog box where you can name the file and choose where to save
it. Also, in this window you should click "Save HTML File". Click
Save.
Illustrator
will do its work and save the design as a single GIF file, plus
an HTML file that uses it.
5)
Go to the folder where these two files are saved and drag the HTML
file to your browser window. You will see your design in all its
glory. Try clicking some of the buttons you applied URLs to.
You
have created a complete, gorgeous web page in a program that is
not really known for, or geared to, creating web sites.
Dean
Bagley is a writer, graphic designer and cartoonist. He writes
instruction books for the Simon & Schuster/Prentice-Hall series of
Against The Clock books on digital graphic design. The Adobe Illustrator
books (Intro and Advanced) are at the top of the list in his book
repertoire.
He
also writes and illustrates his own children's stories about his
cartoon character, Baggy Gator, who has his own site at www.baggygator.com.
|
