Using Illustrator for Site Creation?

metalshark

New member
Jan 3, 2011
652
5
0
I do just about all my web design work in illustrator. I was always under the impression that if I did something in PS it wouldn't scale without being pixelated, that PS was really only for editing existing images, and that Illustrator was for creating clean graphics such as buttons, nav bars, logos, ect.

But from what I've read, it seems like the standard process is creating the page in PS then exporting to html. I also see PS files included with WP templates.

Does anyone else use Illustrator? What are some key benefits that PS has regarding site layout/design? What about SVG - lets say I want to resize a button?


Appreciate it - I might have to relearn what I'm doing. =/
 


Use illustrator and dreamweaver. you can do more with illustrator, (ie vectors) for most it is just more difficult. Building the site as you go mostly in dreamweaver is much more time efficient than building in PS and then converting to html
 
But from what I've read, it seems like the standard process is creating the page in PS then exporting to html. I also see PS files included with WP templates.

PS -> HTML is the normal method yes. You can create slices in PS and easily export your images, then code the HTML yourself or have someone else do it for you.

Does anyone else use Illustrator? What are some key benefits that PS has regarding site layout/design? What about SVG - lets say I want to resize a button?

I have Illustrator but I use it to create stuff that I may need to increase in size in future, such as logos or print ads.

For the most part when your designing a site you want the images to be as small in disk size as possible to load quickly. If you enlarge an item too much it will end up taking up more space. Which is really not good.

Also when your designing a site you will use a general size 975 px wide or make it a liquid design but in that case most of your images are only 1 px wide as they are just background images that repeat themselves.

I also find that it is very dificult to make hard lines in illustrator for web export. I mean like a 1 px line to be perfectly 1 px. Illustrator likes to split the line into 2 px.
 
Just use View --> Pixel Preview ore Align New Objects to Pixel Grid when New file in Ai and will be OK, no?
 
Dreamweaver is an excellent piece of software and highly recommended for building websites. If you don't want to go that route yet, anything you use that lets you incorporate text, photos and code in an attractive and easy manner can suffice until you're able to decide upon a final design.
 
when designers used to send over illustrator files to get sliced I would fucking rage at my old day job. The internet = raster graphics. Don't use a vector illustration program to create graphics that won't be vector once deployed.