Some issues I face when converting from ai to html« Back to Questions List

Hi, Im using export kit to convert from ai to html. Here are some of the issues that I'm trying to fix:

1. Missing hover effect

2. Incorrect color on text (color code is correct when I inspect on browser)

3. Missing img shadow

4. Bg content are not properly align

5. Missing rounded corner

6. Missing input text field

7. Missing rounded corner and shadow for button

8. Missing stroke and drop shadow for bg container

Thank you!

Asked by chrisle0ng
Added April 4, 2017 4:35 am

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

Hi,

We need to see the layer structure of 2 items:

(a) Your ${css|styles} folder

(b) Your rollover element

This will allow us to easily identify the issue.

Answer by admin ★★★
Answered On April 7, 2017 4:49 pm #

Hi,

This is likely a layer issue with your CSS styles, can you provide a screenshot of your layers? Were you able to get your screenshots working?

Answer by admin ★★★
Answered On April 7, 2017 1:05 am #

thanks for the notice! I ’ve tired follow the steps here (http://exportkit.com/plugin/environments/css/add-css-rollover-hover-effects) to create my button state in ai but it seems like it is not working.

Answer by chrisle0ng
Answered On April 6, 2017 10:47 am #

Hi,

After confirming with Dev we have a few points that may help you understand AI vs PSD exports.

1. Not all Layer Effects are parsed in AI
(ETA: Next Release)

Dev plans to add SVG Filters for other effects as this is naturally what Illustrator does.

Photoshop and InDesign have full access to Layer Effects.

2. Illustrator does not use shapes naturally, everything is a vector.

For complex shapes in AI, enable [SVG Paths] to render all shapes as vectors.

3. Illustrator renders very differently

To get correct element (Shape, Image, Text) rendering you may have to try different organizations of your Layers/PageItems.  

The plugin will always try to collect Vector PageItems and group them as an image to prevent excessive assets - regroup your items into Layer Folders as required.

Answer by admin ★★★
Answered On April 4, 2017 3:47 pm #

Hi,

We do not suggest you make your Google Drive links public unless you are sharing your creative with the community.  We have removed the links for your security.

These are very specific issues and we recommend you take a look at our Premium Support for a full review of your AI document. Some questions we can answer, others require additional support.

Keep in mind our Illustrator version is not as powerful as Photoshop or InDesign - but Illustrator is 5x faster at exporting!

1. Hover Effects: http://exportkit.com/plugin/environments/css/add-css-rollover-hover-effects

2 – 5. Premium support: http://exportkit.com/product_category/support

6. Web Forms: http://exportkit.com/learn/how-to/advanced-guide/building-web-forms or you can get our Premium Email Contact templates for PSD and AI: http://exportkit.com/product/photoshop/email-contact-form-pro

7 – 8. Premium support: http://exportkit.com/product_category/support

If these are the only items in question to review, then you can go with Support Basic - if you would like a full review of your design, then go with Support Advanced.
Answer by admin ★★★
Answered On April 4, 2017 12:39 pm #
Looking for another answer? View other questions in HTML Text or get premium support for guaranteed results.
Asked by chrisle0ng
197 views
5 answers
Last Answered 3 months ago by admin

Categories

Recent Answers


Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.