Highlighted

Save For Web in Illustrator is Blurry & Awful - Help!

Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Hello

I'm hoping someone might be able to offer some advice, I'm embarrassed to admit that I'm completely out of my depth, I agreed to do a job putting together a digital ad that is to appear on the website of a magazine here in Australia. I've saved things for web previously and they've always turned out perfectly so when I agreed to do this I thought I had everything under control.

My problem is that when I export this file in Illustrator to 'Save For Web' everything turns ghastly, blurry and hideous. I've tried playing around with different settings,

and turning 'type optimized' on and still no luck.

The magazine prefers the ad to be:

Medium Rectangle

300px x 250px

flash, gif, jpg

60kb flash/40kb gif/jpg

I'm probably doing something really obvious and daft wrong, but I can't figure out what that is.

If anyone (please) has any ideas I would be so grateful. I'm including a link to the file if you want to take a look at it and explain to me where I've gone awry.

https://www.dropbox.com/pri/get/Public/ALl%20Our%20Exes%20Web%20Ad.ai?_subject_uid=80857285&w=AAAv-7...

thank you

phe

Views

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

Save For Web in Illustrator is Blurry & Awful - Help!

Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Hello

I'm hoping someone might be able to offer some advice, I'm embarrassed to admit that I'm completely out of my depth, I agreed to do a job putting together a digital ad that is to appear on the website of a magazine here in Australia. I've saved things for web previously and they've always turned out perfectly so when I agreed to do this I thought I had everything under control.

My problem is that when I export this file in Illustrator to 'Save For Web' everything turns ghastly, blurry and hideous. I've tried playing around with different settings,

and turning 'type optimized' on and still no luck.

The magazine prefers the ad to be:

Medium Rectangle

300px x 250px

flash, gif, jpg

60kb flash/40kb gif/jpg

I'm probably doing something really obvious and daft wrong, but I can't figure out what that is.

If anyone (please) has any ideas I would be so grateful. I'm including a link to the file if you want to take a look at it and explain to me where I've gone awry.

https://www.dropbox.com/pri/get/Public/ALl%20Our%20Exes%20Web%20Ad.ai?_subject_uid=80857285&w=AAAv-7...

thank you

phe

Views

12.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
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

that doesn't seem to be a public dropbox link. i get a 403 error, at any rate.

can you upload an image of your ghastly and hideous finished product the the forum?

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
Reply
Loading...
May 25, 2017 2
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

+1.

This is also a good idea.

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
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Oh sorry! I'm not sure what went wrong there

Try this link:

Dropbox - ALl Our Exes Web Ad.ai

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
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

alright, well... that file has far too much detail in it for a 300 x 250 px image. if you're designing an ad that will be that small, it needs to be far simpler and use type that stands out at that resolution (your thin face is just going to get anti-aliased to nothingness).

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
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

also: a web add in CMYK?

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
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Ok, I suspected as much.

Damn I'm not really sure how to work around that - the band manager who gave me the job wanted to add even more text to it!

Thank you *very* much for taking the time to help me.

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
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Oh - that is the .ai file before I exported it to web. I didn't think that would be a problem (new at this). Should I have converted it to RGB before exporting to web?

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
Reply
Loading...
May 25, 2017 0
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

+1 to Doug A Roberts

As a very (VERY) quick fix.

Open this Illustrator file in Photoshop...Image> Image size...> 300 x 250 x 300 pixels/Inch

Then File> Save as....> [filename]_shrunk.psd

File> Export> Save for Web...

Best,

EW

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
Reply
Loading...
May 25, 2017 2
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

tell him he should fork out for a bigger ad!

all you can do really is:

work in pixel preview.

zoom to actual size often so you get an idea of how tiny the doc is.

bolder. larger type

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
Reply
Loading...
May 25, 2017 1
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

Oh - that is the .ai file before I exported it to web. I didn't think that would be a problem (new at this). Should I have converted it to RGB before exporting to web?

if it is only going to be a web ad, work entirely in RGB from the start. use an RGB document profile.

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
Reply
Loading...
May 25, 2017 0
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

Here's your Ad at the correct dimensions:

ALl-Our-Exes-Web-Ad.jpg

I'll add my comments/corrections in a separate comment.

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
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Ok haha. Thanks, I downloaded the photoshop template from the magazine website and it's in RGB and the photo of the band is RGB so I'm not sure how it got to CMYK, perhaps I wasn't paying attention when I saved it?

I'll try playing around with the width of the type some more, thank you both very much.

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
Reply
Loading...
May 25, 2017 0
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

2017-05-25_14-35-40.png

Hope this helps.

Best,

EW

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
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Thank you, you're right the font is illegible, I'll adjust that.

I *think* opening it in photoshop and exporting it from there makes it look slightly less monstrous. I'm not sure why it would be any different than Illustrator but it seems slightly better.

But, that said I can't get the ad below 600px x 500px without it distorting.

Thickening the band's logo it tricky 'All Our Exes Live In Texas' is the logo and I think if I make it much thicker it's not going to fly.

Oh nelly.

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
Reply
Loading...
May 25, 2017 1
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

I think the logo isn't really a problem..

Not sure why your getting distortion? My save of your file (in my opinion) looks just as good at the actual size than it does in the original Ai... although harder to read on the bits I have already highlighted.

What are your Import to Photoshop settings?

Here's where I would start from on the Photoshop side of things.... 2017-05-25_14-58-42.png

Then resize it down from there.

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
Reply
Loading...
May 25, 2017 0
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

Also the whole monstrosity thing could be caused by your raster settings in Illustrator.

2017-05-25_15-01-28.png

2017-05-25_15-02-30.png

Also look at your Document Setup settings and make sure the preset is for High Resolution.2017-05-25_15-03-20.png

2017-05-25_15-03-47.png

Best,

EW

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
Reply
Loading...
May 25, 2017 2
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Thanks for the ideas! This is my document set-up and raster effects settings. Do they seem Ok to you?

Danny Whitehead suggested playing around with the antialiasing settings in the Character pallet, where is that exactly? Again sorry for all the questions.

Screen Shot 2017-05-26 at 12.29.00 AM.pngScreen Shot 2017-05-26 at 12.29.51 AM.png

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
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

raster effects settings won't matter unless you have raster effects like drop shadows etc. applied. i doubt you have.

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
Reply
Loading...
May 25, 2017 0
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

Go Preset [High Resolution] on Document Setup

And on Raster effect settings... Push that bad boy up to 300 PPI

Your image size is pretty small and therefore that wont impact your file size too much... especially if saving as JPG.

It WILL however... mean you have a much better chance of getting a crisper, sharper and less blurry image than you have currently been getting.

Best,

EW

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
Reply
Loading...
May 25, 2017 0
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

IMHO - It won't matter that much... but I have personally noticed it that it DOES make some difference when you are essentially making a JPEG/PNG etc... which is essentially a rastered file (as it's made of pixels rather than paths at that point).

Happy to be disagreed with here

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
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

it won't matter at all if raster effects haven't been used. it doesn't affect export.

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
Reply
Loading...
May 25, 2017 0
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

Ok - For now I'm happy to agree to disagree.... but thanks.... I'd like to look into this more and find out how much raster actually has an effect.

I have always played it safe anyway as I don't see why it would cause any harm to the image or file size.

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
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Ok, so with all of those adjustments this is what it looks like now in preview, sorry it's so big! you'll have to zoom out to see what it would look like on screen.

Screen Shot 2017-05-26 at 12.46.45 AM.png

In the file I exported to photoshop I got it a little smaller but this was about as small as I could get it without it distorting too much.Screen Shot 2017-05-26 at 12.48.49 AM.png

I think this might be an impossible problem, maybe I'll just have to beg the magazine to accept a larger file size? I wonder if that would work.

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
Reply
Loading...
May 25, 2017 0
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

Can you post a Dropbox link to the new adjusted ai file?

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
Reply
Loading...
May 25, 2017 0
Mentor ,
May 25, 2017

Copy link to clipboard

Copied

What type of monitor are you viewing the ad on?  What is the resolution set to on your monitor?  Do you need transparency?  Try Exporting > JPG > RGB @ 150ppi.  Open that JPG in Photoshop and take a look at it.  Aside from what everyone else has recommended, your layout can be adjusted slightly to improve the User's experience.  Mainly, increase the size of the small text and select a "semi-bold" font ( something that will not fill-in ).

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
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Dropbox - Exes-Export-VIA-Photoshop.png

Dropbox - Exes-Export-Attempt.png

Thanks again for all your help with this - I really appreciate it. Unfortunately for me it's 1.30 am here so i'm going to have to go to bed and I'll check back in the morning.

bonne nuit

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
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

At 300 x 250, the size of the text is not readable, like Eternal Warrior indicated. It sounds like you're focusing on the export options. What you should do first is make some adjustments, so the text will be larger. The text at the top, the middle text with the URL, and the text at the bottom are all 5 pt. If you want them to be readable, make them at least 8 pt. You'll probably need to re-center them. You'll also probably need to adjust the black rectangle at the bottom. You can use the Direct Selection Tool (A) to select it. It's large enough. It just needs to be scooted up. Once it's selected, use the arrow keys to nudge it up.

I hope that helps.

BTW, I saw this band this week! They opened for Midnight Oil in Denver. They were great! Best of luck!

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
Reply
Loading...
May 25, 2017 2
Advisor ,
May 25, 2017

Copy link to clipboard

Copied

Hi gangstabee

Don't be embarrassed or worry!

Happy to try and help.

I'm not having any luck viewing that Dropbox link... I'm getting a message saying I probably shouldn't be here.

Could you kindly check the link is public and shared again and then try re-posting?

I'm sure you know how to use Dropbox but just in case anything went awry...

2017-05-17_13-02-20.png

2017-05-17_13-03-26.png

2017-05-17_13-03-49.png

Many thanks and sorry to be difficult.

Best wishes,

EW

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
Reply
Loading...
May 25, 2017 1
Guide ,
May 25, 2017

Copy link to clipboard

Copied

I'm repeating what other people have said, but here are few pointers...

Start with an RGB document with an artboard the same pixel dimensions as the final ad, and assign sRGB as your document profile.

Work at Actual Size, with Pixel Preview switched on. That way, you'll know on the fly when your type is too small.

Play around with the antialiasing settings in the Character pallet - it can have a huge effect on how your type is rendered.

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
Reply
Loading...
May 25, 2017 2
New Here ,
Feb 27, 2020

Copy link to clipboard

Copied

Hi,

 

I have this issue too, and I find an answer for my problem that maybe will help someone problem too(if it's work for their problem).

 

Try to create a new artwork and change the size from mm/inches/cm into pixel, RGB color mode, 300ppi. There are different mm/inches/cm to pixel between Ai and Ps.

 

Example, I made a 5cm artwork in Ai and the result only 141px which is make it blurry in Jpg or Png. So, we need to change the artwork into desire pixels. Instagram needs 1080px and if convert into cm in Ai, it's gonna 38.1cm. 

 

Hope it gonna help you guys.

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
Reply
Loading...
Feb 27, 2020 0