• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Saving a Logo as an Email Signature via Save for Web (Legacy) in Illustrator

New Here ,
Feb 03, 2024 Feb 03, 2024

Copy link to clipboard

Copied

Hi everyone!

I am dealing with an issue that is starting to drive me crazy. I am working on creating an email signature (400px x 200px) for a client and it includes a logo that is made up of text. No matter how I create the image itself, it always comes out blurry when I save it for the web even if I use the Save for Web (Legacy) tool. The image needs to be saved as a PNG file for the client, so that is what I've been using.

 

I use the preview button on that tool constantly to see what it would look like on the web, and it still shows up blurry:

Screenshot 2024-02-04 at 12.59.42 PM.png

 

This is what the email signature looks like at 1200px x 600px at 300dpi as a plain vector image in Illustrator: 

Untitled-1.png

Nice and clear and crisp.

 

Now, here is my issue. When I take the size of the artboard down to the desired size of 400px x 200px, it becomes intensely blurry:

Untitled-2.png

 

I have tried truly everything:

-Created a 400px x 200px artboard in Illustrator in RGB format at 72ppi-->comes out with the same, very blurry results.

-Created a 400px x 200px artboard in Photoshop in RGB format at 72ppi-->comes out with the same, very blurry results.

-I've created a larger canvas size, saved it at a higher resolution and then gone back in and decreased the size of the image--> it still comes out blurry.

 

I am starting to lose my mind. I have tried to create it in Illustrator and then move it to Photoshop, vice versa, -re-created the artwork completely in Photoshop (text and all) to see if that helps, and without fail, it always comes out blurry.

 

If there is anyone who thinks they have an idea of something else I could try, I am all for it! Or if I am just doing something completely wrong, please let me know. I also wouldn't be opposed to someone taking the time to walk me through the correct process if I am in the wrong-I would really appreciate any help you all can give. Thanks so much!

TOPICS
How-to

Views

163

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
Adobe
Community Expert ,
Feb 04, 2024 Feb 04, 2024

Copy link to clipboard

Copied

I am afraid that there is not much you can do, a pixel image is a pixel image.

Maybe increasing the resolution to 144 ppi and setting the anti-aliasing to Art Optimized will improve it a little.

Votes

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 04, 2024 Feb 04, 2024

Copy link to clipboard

Copied

Your result looks fine to me.

What do people expect? That they can print their email signature on a billboard?

Votes

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 04, 2024 Feb 04, 2024

Copy link to clipboard

Copied

You can make the lettering look a little bit sharper by doing a couple of things. First, design the layout using a 400 px X 200 px artboard. Next, use Illustrator's Font Height Options to set the physical capital letter sizes in whole pixel values. The baselines of those letters need to be aligned with the pixel grid. Those steps will deliver a noticeable improvement because the baselines and cap height lines of letters will be sharp. The end result still won't look perfect (like a vector image) but it will be better.

Votes

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
Advocate ,
Feb 05, 2024 Feb 05, 2024

Copy link to clipboard

Copied

LATEST

I think the issue you are having might just be that your design is too detailed to resolve in just 400 pixels wide. Imagine trying to draw it out on squared paper with just 400 squares across?

use pixel preview and screen zoom 100% and work on something that looks OK and works at that scale (on an art board set to 400x200). I think You'll see you need to put much less 'stuff' on there. 

Votes

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