8 Replies Latest reply on Apr 19, 2017 10:56 AM by Dan Rodney Branched to a new discussion.

    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.

      Screen Shot 2017-04-18 at 2.35.35 PM.pngScreen Shot 2017-04-18 at 2.36.35 PM.pngScreen Shot 2017-04-18 at 2.37.28 PM.pngScreen Shot 2017-04-18 at 2.37.11 PM.png

      Screen Shot 2017-04-18 at 2.38.09 PM.png

      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

        • 1. Re: Text pixelation
          davescm Adobe Community Professional

          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

          • 2. Re: Text pixelation
            autumbrown Level 1

            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.

            • 3. Re: Text pixelation
              Nancy OShea Adobe Community Professional & MVP

              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.

              LoremIpsumText.jpg

               

              Nancy

              • 4. Re: Text pixelation
                autumbrown Level 1

                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.

                • 5. Re: Text pixelation
                  Dan Rodney Adobe Community Professional

                  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.

                  • 6. Re: Text pixelation
                    Nancy OShea Adobe Community Professional & MVP

                    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

                    • 7. Re: Text pixelation
                      autumbrown Level 1

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

                      • 8. Re: Text pixelation
                        Dan Rodney Adobe Community Professional

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