Skip to main content
Known Participant
May 12, 2022
質問

Problem creating a PNG from EPS

  • May 12, 2022
  • 返信数 1.
  • 2778 ビュー

The logo in the Header at the top of every page on my sister's website is actually a 800 x 427 px PNG, but was resized in the page builder by the original developer to 275 x 147 px, which is the size it is being displayed at. The unscaled PNG image is here.  (I'm no longer in contact with that developer).

 

I want to create a smaller (116px high) version of the logo.

 

If I insert the PNG logo that is in the header into a webpage and then scale it down in the page builder to the dimensions I want, it looks great, as shown on the test page here.

 

If I create a logo of same height by creating a 427px high PNG from the original EPS (Logo.eps, which I've attached to this post), upload it to here and then scale it in the page builder to have a height of 116px, then it looks better still, as shown on the same test page – which proves there's nothing wrong with the EPS file I’m working form.

 

But if I try to create a PNG from the EPS with the dimensions I actually want (116px high) and upload that to a webpage – rather than creating a much larger PNG and scaling it down in the page builder – then the resulting PNG looks blurred – as shown on the  same test page.

 

Yet the the smaller PNG looks sharp in Photoshop; and if I insert it into a Word document, or an email, or into almost any other application it still looks sharp – but if I insert it into a webpage it looks blurred. 

 

Even if I create a PNG from the EPS of the same size (height 147px) that the logo in the Header is displayed at, and upload that, it still looks blurred – as shown on the same test page. And yet as I said, if I create a PNG with a height of 427px and scale it down in the page builder to the height I want, then it looks very sharp.

 

But I should be able to create a PNG from an EPS with the size I want and use that. I shouldn't have to upload a much larger PNG and scale it down in the page builder.

 

Any idea why I'm having to insert a huge PNG and scale it down in order for it to look sharp – and why I can't insert a PNG of the correct dimensions? Is there something wrong with the way I'm creating the PNG from the EPS? I've tried dragging the EPS into Photoshop, telling Photoshop what dimensions I want it to have, setting the colour mode to RGB, and then selecting File > Save for Web. I've also tried Saving for Web directly from Illustrator, with even worse results. 

 

If there's nothing wrong with the way I'm creating the  PNG, then is there a better workaround than the one  I've come up with, of uploading a much larger PNG than is actually required and scaling it down? 


Dave

このトピックへの返信は締め切られました。

返信数 1

chanaart
Community Expert
Community Expert
May 12, 2022

When you open the EPS in Illustrator go to : Menu bar: Effect> Document Raster Effect Settings:

And change the raster effect o300 ppi . Maybe this will help?

 

I did not try it - but it is a thought. I always have my raster effect in AI 300 when I save for the web...or upload to the web.

DaveRado作成者
Known Participant
May 14, 2022

No that makes no difference. I've added a logo created the way you suggest, at the bottom of the test page I linked to in my original post and as you can see it's much blurrier than the one I created by importing the EPS into Photoshop and saving it as a PNG from there. But that's also very blurry.

 

If the problem isn't the way I'm creating the  PNG, then what could be causing the  problem, and there a better workaround than uploading a much larger PNG than is actually required and scaling it down? 

If I'm posting in the wrong forum, can you or anyone else suggest a better forum to post this in?

Also, although "Email me when someone replies" is ticked, I didn't get an email when you replied (and there's nothing in my spam folder). Any idea why not?

 

Dave

Monika Gause
Community Expert
Community Expert
May 14, 2022

PNG is a raster based format.

Each pixel can have one color.

117 pixels high means that there are 117 pixels that can each have one color. Maybe you want to try that out and take some checkered paper and color each of the suqares so that it looks like the logo and see hopw that looks.

 

Actually I'm surprised how well that export at 117 pixels looks.

 

Today's monitors and above all the smartphones have a very high resolution. Which means that having images 3 or  even 4 times the resolution by tripling or quadrupling the number of pixels) is actually best practice.

 

Alternatively you can export the EPS as an SVG, which is a vector based file format.