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

New Here ,
Feb 09, 2016 Feb 09, 2016

Copy link to clipboard

Copied

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%.

TOPICS
Product issue

Views

25.8K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 12, 2016 Feb 12, 2016

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 an

...

Likes

Translate

Translate
Community Expert ,
Feb 09, 2016 Feb 09, 2016

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 10, 2016 Feb 10, 2016

Copy link to clipboard

Copied

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. 😕

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 10, 2016 Feb 10, 2016

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 11, 2016 Feb 11, 2016

Copy link to clipboard

Copied

thanks, John. You're right, I tried it again and it worked for the logo.

Still seems strange that I can't 'save for web' without getting blurry images but I think I can work around it by saving separate files.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2016 Feb 11, 2016

Copy link to clipboard

Copied

If you're using the Save for Web function out of PS, it automatically changes images to 72 dpi, no matter what you had it at during design. On ultra high def monitors, that can cause images to seem to turn fuzzy.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 11, 2016 Feb 11, 2016

Copy link to clipboard

Copied

‌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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2016 Feb 12, 2016

Copy link to clipboard

Copied

LATEST

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.

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines