Home > The Newbie Zone > Questions and Answers

Making photoshop text scharper using illustator? (5)


03-15-2015 05:04 PM #1 Chunk (Member)
Making photoshop text scharper using illustator?

Hi,

From the internet I understood that text from photoshop (on your 320 x 50 banner) can be made sharper by using illustrator?

(because the font on the banner looks still blurry somehow, i already use smooth as anti alliance)

Can anybody explain me how to? (step by step?)

Or suggest any other option?

thanks a million.

p.s. yes i downloaded both illustrator and photoshop.


03-15-2015 08:46 PM #2 shakedown (Member)

Photoshop can make it as sharp as you need for a banner. Something else is wrong in your Photoshop settings.


03-16-2015 01:36 PM #3 phil2014 (AMC Alumnus)

Photoshop and Illustrator use different technologies. Photoshop is pixel-based. Illustrator is vector-based. What this really means to your artwork is that when you set up a document in Photoshop, you must set the correct pixel density from the outset because everything you do in that document will be done at the pixel density you set. For example, if you set up a document 100 pixels square, no matter if your final image size is 1cm square or 1 metre square it will only have 100x100 pixels in it - which means that a 1 metre square image is going to have a lot of 'blocks' in it. And be hell of a blurry.

It's different with Illustrator. Vector-based artwork doesn't depend upon pixels. It depends upon coordinates: positions relative to each other. So you can do the tiniest illustration (or text) on a 1cm square artboard and happily scale it up to 1 metre square any time you like. You can export the image at 10 pixels square or 1k pixels square and the final image will be identically sharp.

So, now, to answer your question...

It makes no difference if you create your text in Photoshop or Illustrator. Photshop uses vector technology when your text remains editable in Photoshop - which means it uses the exact same technology as Illustrator. The difference comes when you want to flatten or export your photoshop image: that's when photoshop converts the vector text into pixels - at the density you set in the document.

What makes the difference is the pixel density you set your photoshop document up at. Or else what density you export at. Or else what document type you are using (jpg vs gif vs tif vs etc, each of which favour either continuous tone or high contrast). Or what kind of optimization you are applying to keep the size down.

Without knowing your process it's difficult to answer your question but here's a general tip. Always create your photoshop document at 1.5x or 2x the size of the final image. Then reduce it down prior to exporting. Never do it smaller. And more than 2x tends to destroy too many pixels. So, for a 320 x 50 pixel banner I'd create a document at either 640x100 or 480x75 pixels.

As for image formats, here's a general rule of thumb for web images:

JPG - best for continuous tone images such as photos, illustrations, and anything with multiple colours with a wide tonal range. Not great for text or sharp edges at low pixel density.
PNG - good compromise between GIF and JPG (settings dependent). Good for small photos and illustrations. Useful if you want to retain your image's transparency.
GIF - best for 'graphics' such as text, logos or blocks of 'flat' colour. Limited colour range.


03-17-2015 09:00 AM #4 Chunk (Member)

Thanks for the detailed answer!

Let's see if I understand you correctly, and give you a little bit more info:

You want banners blinking, so therefore you want Giffs, no transparent so non dithered, the highest quality as it seems, is 128, and bicubic. Using smooth as anti aliasis.

Following your instructions, I should make my banner 640 x 100 and when exporting it, export it to 320 x 50.
Actually, I tried this--> 400 x 57, and this did not improve the sharpness . I dunno it is for a supermarket brand, which has a anoying font. I will try the 640 x 100 one more time.

Thanks a lot! Cheers.


03-19-2015 12:11 PM #5 phil2014 (AMC Alumnus)

Hi, the strategy of working on images 1.5x or 2x the size of your final image is related more to illustrative or photographic images. It'll make less of a difference with graphic images, which fonts generally are. Although it's a good 'rule of thumb' to keep in mind, which is why I mentioned it.

Yes, if your banner is animated (blinking) then you are stuck with the .gif format (although Flash may be another option if your ad platform will allow it).

If you want to link to the banner I could take a look for you. You mention that it has an 'annoying font', which made me wonder if you may be having a font issue. (Once, someone told me their fonts were displaying all 'blocky' and when I finally looked at them they were entirely pixelated because they didn't actually own the fonts they were using.)

Another thought - how are you exporting your document from Photoshop? So long as everything looks as it should do in photoshop, while the file is a .psd then you should have options for retaining that quality when changing file format or exporting.


Home > The Newbie Zone > Questions and Answers