Advertisement



Question

I am trying to create a plain text logo using photoshop/illustrator but am having great trouble making it so the text appears high resolution.

I want to be able to create a logo with the same resolution as the welcome text in the page below http://pandsmarine.com

As you can see my best attempts is nowhere near that quality..

http://pandsmarine.com/test/

Could I please get some advice as to how to go about doing this along with recommendations on file format, dimensions, resolution etc.

Many Thanks.

2016/05/15
1
0
5/15/2016 1:02:00 PM

Accepted Answer

Some thoughts.

That is not necesarly a resolution issue, but how thin lines are processed.

1) An aliased image consist in some transition pixels to simulate smoothness

If you have a thin line, lets say below of a pixel in size, you get just the aliased part: A gray line. In thin lines this diference is very notorious.

One posible solution is making your text at much greater scale than needed, for example instead of making it at 300px wide, do it at 3 times larger. 900px wide.

After that you can resample the image at the desired resolution. This method makes a better aliased result, because process the image a bit better.

The other advantage is that you have now a Retina ready image. Normally you need a 2 times or 3 times larger image. (I leave you this retina image as a homework)

2) Specially in fonts, a solution is a subpixel: Why are white digital fonts composed of more colors than white?

This is made in automatic in the browser with a vector based image, specially with fonts.

So the second solution is that your logo is made in vectors, and let the browser make the necesary calculations to smooth the logo.

Use SVG file format for this.

3) In the specific case of your "logo", that it consist only in plain webfont letters, just make some CSS properties to add color and use the webfont as it is, as PieBie comented.

2019/07/07
1
7/7/2019 1:37:00 AM