Skip to main content
B
brushwipe
Inspiring
October 9, 2017
Answered

Problems getting Ai created images into Dw.CC

  • October 9, 2017
  • 2 replies
  • 1242 views

I have just returned to Dreamweaver after several years so was expecting some issues.  I have produced a logo in Illustrator CC and saved it to the Assets folder as a flattened Ai file.  But importing from the site images folder I get a blank rectangle.  I'd appreciate help with this issue.

I have tried saving as an Ai file as SVG or leaving it as a simply Ai file.  I have also copied and pasted into the assets folder, I have tried converting it to an asset, and inserting it into my CC library but it will only ever appear as the empty rectangle.

It is listed OK in Code and in CSS; I can alter the size and position but it would be good to see the logo appearing as it was designed to be seen.

This topic has been closed for replies.
Correct answer Nancy OShea

It's important to understand that CSS Export doesn't give you any HTML5 semantic structure to work with.  So you still need to build that yourself. 

Exported SVGs (scalable vector graphics) are more valuable to me as a web designer because they can be re-scaled to fit any responsive layout without losing image quality.  SVG edges remain sharp & crisp at any size.   That's not the case with JPG, PNG or GIF.

Whenever possible, I use SVG for logos, icons, titles, ads, etc...   I use JPGs for photos.  PNGs for when I need an image with transparency.  GIFs are for small animations. 

Nancy

2 replies

B
brushwipeAuthor
Inspiring
October 9, 2017

Hi, it's me. I have found the answer to my original question - go to YouTube, search: 'New ways to take Illustrator CC to any screen'. Terry White, 2014

Unbelievable!  TW demonstrates exactly how Illustrator converts everything, from simple graphics to full pages into CSS.  On the Illy page, there is a panel with all the necessary buttons that pass the design direct to Dreamweaver.  I have been away too long!

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
October 9, 2017

It's important to understand that CSS Export doesn't give you any HTML5 semantic structure to work with.  So you still need to build that yourself. 

Exported SVGs (scalable vector graphics) are more valuable to me as a web designer because they can be re-scaled to fit any responsive layout without losing image quality.  SVG edges remain sharp & crisp at any size.   That's not the case with JPG, PNG or GIF.

Whenever possible, I use SVG for logos, icons, titles, ads, etc...   I use JPGs for photos.  PNGs for when I need an image with transparency.  GIFs are for small animations. 

Nancy

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 9, 2017

I use these Export to SVG Options in Illustrator.

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
October 9, 2017

Have you tried exporting the file as a jpg or png?

B
brushwipeAuthor
Inspiring
October 9, 2017

Thanks for responding.  Illustrator doesn't give me the options for jpeg or png; only Illustrator (Ai), Adobe PDF, Illustrator EPS, Illustrator template, SVG and SVGZ.  I am trying to place a vector image so jpeg wouldn't be appropriate.  There must be a way?

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
October 9, 2017

This is where a working knowledge of HTML comes into effect, namely what image formats are supported in html

This is a good place to start <img> - HTML | MDN  Once you have determined the format, you will be able to export it in that format as per

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices