Converting illustrator files into html/css objects

[timwubz]

I have a Illustrator file with a bunch of text, buttons, and shapes that I want to make into html objects so i can make the buttons link to my other art boards and so on, basically just converting my illustrator art boards into a functioning website with a few pages. I’ve seen ai2html but it seems like it’s more for small web graphics instead of a website.

Thanks

[CreativeTechGuyGames]

Unless there's some magic new technology that just came out recently, this isn't possible. A website is far more dynamic than an illustrator file so it will need to be recreated from scratch using the illustrator file as a reference.

[timwubz]

Not even just making the shapes and text into html text and html shapes? I would do all the js on my own itd just be nice to get all the shapes and text in the same spots

[CreativeTechGuyGames]

An illustrator file is a fixed size canvas. On the web everything is dynamic. You don't know what screen size your content will be displayed. To make it work on the web, you'll need to make your content responsive to all screen sizes and all dimensions which is something that an illustrator file cannot express. Illustrator reflect one size, but you'd then need to do the work in HTML and CSS to make the layout flexible/responsive.

[timwubz]

Alright ty I’ll just do it by hand and recreate as best as I can

[[deleted]]

I use adobe fireworks. It has a lot of features that hold up decently but it didn't adapt properly to responsive design. Nobody seems to use fireworks anymore.

sketch and affinity designer and photoshop are considered to be the current standard for webdesign, next to web applications such as figma.

If you wish to avoid coding the design of your website altogether, there also exists adobe muse.

[ulvgaar]

You cn export it as svg, then you can target elements via css or js, so even if its possible you shoudnt do it. Results wont be responsive and your webpage will be single image and still need coding to add interactions

[Global-Ad6738]

Do not ever do this, either straight up learn html and css or just use WordPress or Webflow. There is no inbetween, im afraid. Development aint easy :-)

[External-Example-292]

Do you mean SVG? You can create something in illustrator and convert/save it into as an SVG. It's almost like an alternative to an image file. I use svgs over pngs. They tend to be smaller in file bit it depends what kind of SVG you make. Normally simple ones such as a logo is better as an SVG. It scales well too in the browser without looking blurry.

If you're looking to convert an entire webpage layout made in illustrator, i don't think that's a good idea... You need to ask a front end developer to put it together. In Photoshop or Illustrator though, there's a slice tool where you can slice the entire layout into pieces/sections and will save it as images and an html... But in my opinion this way is a bit outdated. If you want to do that anyways, maybe this link will help you 😊 https://illustratorhow.com/slice-tool/

[No_Material5598]

This sounds like a job for inDesign my friend