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 trialMax Syzonenko
1,474 PointsDesigning in illustrator vs browser
Hello there. I've just watched this video. But there are some things I can not understand:
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?
Or maybe is there a way to convert an illustrator layout to css layout?
1 Answer
Jonathan Grieve
Treehouse Moderator 91,253 PointsYou 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
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsI'll have to see if I can fix the code up later. Markdown doesn't seem to work well on iPad. :-)
Max Syzonenko
1,474 PointsMax Syzonenko
1,474 PointsSorry, my questions were not clear enough, I rewrited them.
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsHi 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
1,474 PointsMax Syzonenko
1,474 PointsThanks 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.