Design issues using Mac

[Teg]

So I just started using my MacBook pro retina display for everything that includes graphic design and gaming. At any rate I'm having an issue where the graphics look perfect in Photoshop but as soon as I upload them, regardless where they are uploaded to, the are enlarged and blurry and poor quality.


The first image is in ps the second is on the web

[Boy_Wonder]

What are you saving as, as in if Jpeg are you using Save for web, are you using a very high quality or a very low quality

[Teg]

It's a simple logo text only with no special effects. It saving them as png 24 I've tried other options too all turn out the same

[Boy_Wonder]

What browser are you using? I don't use a mac but depending on screen calibration etc it can cause that effect

[Teg]

Tested in ff, Safari

[Tumbleweed]

I had a issue like this before but it so long ago I can't remember the actual solution and I should say too that was not using a mac or Photoshop. But I do remember it had something to do with the settings I was using to design in. It was when I was first started out designing (no professional training) and my thought process was the higher resolution the better the quality of my image and the result, once uploaded, was a huge image with bad quality. But what I changed that to, I don't remember and currently I don't have the graphics program loaded on this computer so can't go look. If you were using Photoshop on a different computer and never had an issue then this probably isn't your problem but thought I'm mention it.

[Teg]

Yes I used Photoshop just fine on my other one but was windows lol

[elli]

You aren't designing for Retina display (Mac, MacBook, iPhone, iPad), which is 2.2x the resolution of a standard display. Basically, you need to be designing everything 2.2x the size you would normally. At Adobe, we just do 2x tho. So a 400x400 graphic needs to be 800x800, and then you would use CSS to compress it into a 400x400 area. If that makes sense?

www.leemunroe.com/designing-for-high-resolution-retina-displays/
bjango.com/articles/designingforretina/
designmodo.com/design-retina-displays/

Here's some reading material.

It's not how you're exporting the image, or any of your settings in Photoshop. It's just the PPI of the image is not optimized for Retina. You'll only experience this issue on a monitor with a higher pixel density, so rest assured that most users will see the graphic normally.

[The girl who waited]

Photoshop hates Mac, also. Try the above, then install Fotor and save yourself a nightmare or five!

[Teg]

Elli thank you, I'll take a look at those articles and see what I can do. I'll also trying out your suggestions here with the image sizes and compressing using CSS.