Skip to main content
H
harryl77590690
Participant
February 9, 2016
Answered

Designing email signature in Illustrator and Dreamweaver but getting blurry images?

  • February 9, 2016
  • 1 reply
  • 29895 views

I'm trying to design an email signature using Illustrator and Dreamweaver. I've designed the signature with dimensions of 600px by 220px, it uses a linked ai file logo, some text layers, and a few png's of the company's accreditations. When I look on screen it's fine, but as soon as I slice it and try and 'save for web' the images look blurry, even with a maximum file size using JPEG at 100%.

Does anyone have any advice? most forums just say to play with the quality percentage until you get a balance between file size and image quality but mine's poor at 100%.

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

‌ye i think my retina display has something to do with it. There's quite a few threads on this. Also happens when I try and  export to jpeg or png, rather than 'save for web'.

I was trying to export a facebook banner for a client at 815px x 350px, the logo looked crisp on screen but as soon as i export it- blurry.


Under PS Preferences > Rulers & Units, you can change new document presets from 72ppi to 300ppi.  I like to start all projects on a very large, high-res canvas.   I can always down-scale images without much penalty, but up-scaling causes artifacts (blurriness).  

IMO The Save for Web (legacy) feature has always been poor at both compression and optimization.   I've never been completely satisfied with it.  It's good to see that PS is finally taking steps to get away from it.

For vector shapes and text,  File > Export As > SVG produces the sharpest quality and you can downscale SVGs without much detail loss.

For raster images, File > Export As > PNG or JPG  seems to work well if your images are of sufficient size (total pixels).

Nancy O.

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 9, 2016

I like to use real text and/or text with SVG.

In Illustrator, export to SVG.   Unlike raster images, vectors re-scale nicely and retain nice sharp edges with a minimal file size.

For older email clients that don't support SVG, add a PNG fallback.

Nancy O.

Nancy O'Shea— Product User & Community Expert
H
harryl77590690Author
Participant
February 10, 2016

Thanks for your reply Nancy, but I did try that. I opened a new artboard with just the logo itself at the correct size (around 190px by 35px), saved as SVG but the file size for just the logo was over the 10kb I'm aiming for. :-/

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
February 10, 2016

Is the logo actually a jpg/gif (or otherwise bitmapped image) being pasted into a layer in Illustrator, or did you create an actual piece of vector art and save as an SVG?

I have several rather involved logos that I use regularly and the most intricate comes out to 3.7K when converted to .svg out of AI. That won't be the case if you're saving a bitmapped image as .svg though. It has to start life as a vector graphic (drawn in Illustrator or another vector art creation program) and then get saved as .svg.

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