Text pixelation

[autumbrown]

I am using photoshop to create a very simple text image. Recently after the latest photoshop update, every time I type text and save it is pixelated in all formats except pdf's. The same thing is happening in Illustrator as well. Something is not right, I have done this so many times with no problems. Here are screen shots of my process.

This one was not to bad because I didn't optimize in any way, but still pixelated.

Thank you in advance for helping me out with this.

Autum

[davescm]

Look at the smoothing optionsin the text tool, you do not show them in your screenshot but it looks like they may be set to none:

Dave

[autumbrown]

I have tried every setting in that category and it just changes the degree of pixelation. I have also tried changing the pixel aspect ratios in the view settings with no luck. I read something online about turning off anti-alias in the photoshop preferences, but can't find a box to turn it off. I figured it has to be something simple that I am missing it usually is anyway.

[Nancy OShea]

28K is very small file.  What is the height and width of your image?

Also JPEG is not the best file type for clear type.  PDF or PSD will give you much cleaner text.

Ideally, start with a big canvas.  You can downsize later if needed.

File > Export As > JPG...

Actual image with 24 pt font size, saved as JPG.

Nancy

[autumbrown]

I am trying to make a 400x50px image with a clients phone number on it for use on a webpage (clients request) I want it to be an exact size to fit under an 400px image. I know I can make a larger file and scale down, but have been having trouble with pixelation doing that also.

[Dan Rodney]

The phone number should be text in a webpage (so it's searchable and potentially tappable on mobile phones). But if you have to make it a graphic, PNG or GIF will be smaller size and better quality than JPEG (which is meant for photos, not graphics like type).

Your main problem though is that you're making the image too small. You're creating a low-res 1x graphic by making it 400px by 50px wide. Make it twice that (800px by 100px) to make a hi-res 2x graphic. In the webpage, code it to 400px wide via HTML or CSS and the 800px image will be scaled to fit within that 400px coded space, creating a higher-res (sharper) image.

[Nancy OShea]

I 2nd Dan's remarks.  JPG is a poor option for this.  Real text with a tel hyperlink is a better user experience for mobile phone users.

The other option is to use SVG.  Scalable vector graphics are the current web standard and well supported by all modern browsers.  SVG will resize in all devices without loss of quality.  The graphic will retain clean sharp edges even when  upscaled on Retina / Hi-Pixel Density devices.   You can't do that with small JPGs & PNGs.

A guide for creating a better retina web - Ivo Mynttinen / User Interface Designer

Nancy

[autumbrown]

Thank you, that worked to make it a larger size and scale down on in html. Thanks everyone!

[Dan Rodney]

You're welcome, glad we could help. Please mark the correct answer so others can benefit .