Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Max Syzonenko
Max Syzonenko
1,474 Points
Posted by Max Syzonenko
Max Syzonenko
1,474 Points

Designing in illustrator vs browser

Hello there. I've just watched this video. But there are some things I can not understand:

  1. Designing in illustrator such elements as nav panels/buttons/headers only makes sense when we export them as vector objects. Otherwise how do we change a property of a piece of image?

  2. Or maybe is there a way to convert an illustrator layout to css layout?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

You can easily add an SVG image you make with code in the same way as any rastor image by using the img elements source attribute.

<img src="file.svg">
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I'll have to see if I can fix the code up later. Markdown doesn't seem to work well on iPad. :-)

Max Syzonenko
Max Syzonenko
1,474 Points
Max Syzonenko
Max Syzonenko
1,474 Points

Sorry, my questions were not clear enough, I rewrited them.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Max.

I'm afraid I don't know enough about Illustrator to tell you if and how to convert vector shapes to a CSS layout,

But you can go directly into an SVG file and change the properties. It does take knowhow but you can change SVG shapes either by going into the file itself and changing the code or putting into a vector based graphics program like Illustrator or Inskape.

Here's a few links I found for working with Illustrator and CSS i hope you will find useful. :-)

https://css-tricks.com/html5-pack-for-illustrator-cs5/

https://helpx.adobe.com/illustrator/using/css-extraction.html

http://www.creativebloq.com/illustrator/extract-css-71412440

Max Syzonenko
Max Syzonenko
1,474 Points
Max Syzonenko
Max Syzonenko
1,474 Points

Thanks Jonathan.

Mat told nothing about Illustrator version he was working with. But seems it's CC, not CS6. CC nowadays is the only version with a cool feature of CSS export. Thus in pre CC versions you can design/export logos/artworks but not the markup itself.