0

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.

enter image description here

Can anyone explain what I am doing in layman terms?

closed as unclear what you're asking by Zach Saucier, Scott, Wrzlprmft, JohnB Aug 10 '15 at 0:33

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 3
    What were your export settings in Photoshop? – AndrewH Aug 3 '15 at 20:16
  • Without knowing, my best guess is you saved the logo with lower quality. – AndrewH Aug 3 '15 at 21:30
  • What have you uploaded it to? Sites like facebook have a habit of recompressing your images, which is a pain to work around. – Vincent Aug 4 '15 at 8:48
1

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.

1

1) If you have contact to the designer you should idealy ask for a vector based logo.

2) Do not use jpg for a logo or any graphic that has large uniform areas of color. Use png at this case.

3) This image is not really pixelated. It has a strong jpg compression. See point 2.

4) It has some thin lines that should be adjusted. That needs to be done in vectors. See point 1.

5) You do not need to remove a background. If the designer has the vector logo he can generate a transparent one from scrach or provide a clean one with a white background. See point 1.

6) It is blurry. If the source image is smaller... yes you are pixelating it. If the image is bigger, use the resample bicubic sharper.

0

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.

enter image description here

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 Goltermann Aug 3 '15 at 23:37
0

there is many factors that cause image to pixelat:

  • Saved with the wrong format. In PS use "save for web and devices" -> and select png-24 (high quality)
  • image resolution; make sure it is 72 ppi (300 ppi for print)
  • image dimensions in the website are bigger than the original image dimensions.

Most designers send vector based (Ai) logos as .pdf; vectors allow the ability to transform image dimensions without losing quality, you can open it in illustrator and increase dimensions if needed.

  • Engineeroholic. 72 ppi for web and 300 ppi for print is a total myth. – Rafael Aug 4 '15 at 3:29
  • But I agree than you need to use png in this case. – Rafael Aug 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. – Engineeroholic Aug 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/… – Rafael Aug 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 – Engineeroholic Aug 4 '15 at 14:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.