Want to improve this question? Add details and clarify the problem by editing this post.

Closed 4 years ago.

I am designing a website for my business and I am having a bit of trouble.
I am not very good as this sort of thing but hoping someone might be able to explain in basic terms.

I have gotten the company logo from our graphic designer. It is a .pdf file and looks totally fine in Photoshop. I am trying to create a banner for the website and when I make it in Photoshop, it looks totally fine but when I upload to the site it is totally pixelated.

When I got the PDF file I opened it in PS and using the magic wand I have removed the background and copied and pasted the image on top of a new plain white image.

4 Answers
4

Your logo looks fine--well, as fine as it can be rendered at that size.

The problem is the logo itself. It's using some very fine lines that simply will not render that clear at that size on a screen. Ideally, the designers of branding elements would have created a version specifically for screen use at this size. I'm guess they didn't in that case, so you could propose an alternative that would still adhere to the brand guidelines, but accommodate the realities of screen resolutions.

Looking at your image it looks as though your image has been saved with a high compression.

In Photoshop save your image for web using cmd+option+shift+S.

Since your sample image was a JPG I'm assuming you would like to use a JPG for your website. Slide the quality slider as as low as possible without having any noticeable grainy-ness. Hit save and see how it looks on your site.

If you are still having trouble I would get a hold of your designer and ask if they can provide you the file as an EPS file format (Photoshop can open this file format). This should will prevent you from having to use the magic wand to remove the background.

Note that even when selecting 100% Quality the image can still loose quality - not by loss of information but by reordering the information during compression (JPEG is always compressed). I would only advise to save photos as JPEG. It is common practise to save logos and other graphics as PNG.
– Jascha GoltermannAug 3 '15 at 23:37

Engineeroholic. 72 ppi for web and 300 ppi for print is a total myth.
– RafaelAug 4 '15 at 3:29

But I agree than you need to use png in this case.
– RafaelAug 4 '15 at 3:32

@rafael, why is it a myth? I see it as standard that all designers follow, and actually in practice if someone print a 72 ppi it looks no good, but 300 ppi and above will produce good quality materials.
– EngineeroholicAug 4 '15 at 8:09

The statement 300ppi is for print goes for standard offset printing when you have 150lpi. But if you have an art book you probably need 400 ppi, 200 ppi for a portrait photography, 100 ppi for a big poster, 1 ppi for a really biiig billboard. - And in screen ppi does not matter, so no ppi there. Here is further explanations: photo.stackexchange.com/questions/66028/…
– RafaelAug 4 '15 at 11:22

I agree, in print materials resolution varies, but different resolutions will lead to different dimensions on photoshop, that's why it is deserve attention
– EngineeroholicAug 4 '15 at 14:29