Soy bastante nuevo en Photoshop e Illustrator y trato de crear un logotipo simple basado en texto para usar en mi sitio web, por ejemplo: http://codepen.io/d3wannabe/pen/BWrbZa
Obtiene versiones muy diferentes de eso según el navegador que use para representar el texto (por lo que, obviamente, debo crear la imagen yo mismo), pero, por ejemplo, en Chrome ya puede ver un desenfoque alrededor de los bordes de la fuente.
El problema que tengo en Illustrator es que cuando escribo en una fuente determinada (por ejemplo, "Arial Rounded MT Bold" a 24 puntos), la fuente se ve hermosa y nítida contra el color de fondo con un zoom del 200 %, pero empiezo a ver borrosa al 100%, entonces no estoy seguro de qué se trata el proceso 'guardar en la web', pero la imagen pierde más claridad cuando termina en mi sitio web (como un png 'tipo optimizado').
Leí en alguna parte que Photoshop era mejor para guardar imágenes de texto para la web, pero veo una borrosidad similar incluso antes de exportar (y, por supuesto, un zoom del 200% en Photoshop solo pixela la imagen).
Entonces, lo que realmente me falta es una guía paso a paso para principiantes sobre cómo obtener imágenes nítidas de texto en un sitio web. En este punto, no estoy seguro de si tal vez acabo de elegir un mal contraste de color o fuentes que no escalan bien, aunque también me pregunto si hay algo significativo en el hecho de que la fuente se vea hermosa en Illustrator a 200 % o mayor, tal vez eso signifique que debería exportar la fuente de Illustrator a un tamaño mayor que el requerido y luego hacer una reducción adicional (¡de alguna manera!) después, aunque, por supuesto, no puedo confiar en que los navegadores web lo hagan por mí.
EDITAR: También debería haber notado que el efecto es mucho peor en mi monitor que en mi computadora portátil (es tentador decir que tengo un monitor defectuoso, ¡pero hay muchos sitios web donde la versión del monitor también se ve bien!)
Photoshop vs. Illustrator no debería hacer una gran diferencia aquí. Cosas que puedes probar:
Exporte su logotipo como SVG por tres razones:
Como desarrollador web que trabaja en una agencia de tamaño decente, exportamos todos los logotipos de nuestros clientes como SVG. Ni siquiera me molestaría con los PNG, son mucho más grandes y, por lo general, no serán tan nítidos o elegantes como un SVG.
Esto es lo que debe hacer:
Es bastante simple y tendrá un logotipo extremadamente nítido que se carga más rápido que cualquier PNG.
Editar: use Illustrator sobre Photoshop, desea un logotipo vectorial nítido que se pueda dimensionar a cualquier dimensión a voluntad, no algo que esté limitado al tamaño en el que lo diseñe. Photoshop tiene capacidades de exportación SVG, pero es bastante complicado en comparación con Illustrator. Usaría Illustrator al 100% para este caso, no importa cuál use.
Esto es completamente hipotético, pero existe una buena posibilidad de que tenga que ver con una escala de la interfaz de usuario del sistema operativo. Hoy en día, muchos monitores tienen tantos píxeles que muchas personas lo encuentran incómodamente pequeño si todo se muestra al 100%. El resultado es que cuando compra un monitor Full HD, por ejemplo, Windows se acercará ligeramente por defecto. Si hay información más allá del tamaño actual, usará esa información para completar ese detalle agregado, por lo que el 100% puede verse un poco desenfocado y debe guardar versiones de DPI más altas y servirlas para que se vea nítido en esos monitores. Así que sí, en ese caso, dejas que el navegador haga toda la reducción ( incluso puedes elegir el algoritmo en CSS , pero no deberías querer hacerlo). Aquí hay una respuesta muy antigua que describe cómo hacerlo.
Bueno, para que sea nítido con resoluciones tan bajas, solo hay una ruta. Gráficos vectoriales. Uno de estos tipos de archivo sugeridos es SVG (Gráficos vectoriales escalables), pero no es suficiente cargar un mapa de bits y luego exportarlo como SVG, porque entonces está tratando de forzar un archivo rasterizado en uno vectorizado, no puede se ven mejor que el original por esa ruta.
Sin embargo, está mencionando fuentes, así que supongo que está escribiendo en Illustrator y se ve claro. Las fuentes tienen un formato vectorial nativo, por lo que cuando exportas eso como svg, debe permanecer agradable y nítido. Sin embargo, no necesariamente tanto, las fuentes a menudo requieren un poco más de trampa para obtener un crujido extra crujiente con control de nivel de subpíxeles, dependiendo de su sistema operativo.
Dependiendo de su archivo original, es posible que necesite rastrear y recrear esencialmente los vectores para su archivo, y solo luego exportar como SVG.
También Save to/for web es un código para "cortar mi archivo con mucha compresión para que sea pequeño y se cargue rápido".
Prometo al 100% que SVG es el camino a seguir. Ya tiene Adobe Illustrator, pero para cualquiera que no lo tenga, Inkscape es otro editor de gráficos vectoriales que es gratuito y de código abierto y se puede usar fácilmente para obtener logotipos nítidos en cualquier tamaño.
Los archivos PDF también usan gráficos vectoriales (principalmente, aunque también puede incrustar imágenes de trama), pero no son compatibles con los logotipos en la web (el que se muestra en las pestañas, etc.).
Hay muchos tutoriales para crearlos, por ejemplo, en Inkscape (para que cualquiera pueda intentarlo) https://www.youtube.com/watch?v=mX7Nbj1xFco Solo al final guárdalo como SVG.
Y también en forma de página web: http://lebende-bilder.blogspot.qa/2014/03/tutorial-how-to-create-logo-in-inkscape.html
Si prefiere usar PNG todavía (un formato de trama), entonces probablemente sea mejor comenzar con un archivo bastante grande y crear muchas versiones reducidas para usar en diferentes partes de su sitio. El algoritmo de escala también puede ser importante, sugeriría usar algo al menos en el nivel de SincLanczos (está disponible en el GIMP gratuito y de código abierto y en Photoshop, aunque el nombre puede ser ligeramente diferente). Un tutorial que sirve para un logotipo PNG en Inkscape está aquí: http://audioplastic.org/blog/2011/07/03/inkscape-logo/ Creo que algunos de los efectos que usaron están rasterizados y esa fue la motivación para que usen un PNG.
Aquí hay un excelente tutorial sobre el tema usando Illustrator: https://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web--vector-20899
Como él señala, algunas de las cosas que está haciendo no son necesarias para el texto, pero si está comenzando desde una imagen rasterizada, entonces de alguna manera necesita pasar de eso a los vectores. Inkscape tiene una herramienta que intenta esto automáticamente, pero realmente solo puede manejar bien entradas simples. No estoy lo suficientemente familiarizado con Illustrator para decir si su herramienta (si tienen una) es mejor. Es por eso que sugerí anteriormente que es posible que deba rastrear los vectores sobre la imagen de trama para recrear el logotipo y luego deshacerse de la imagen de trama y exportar.
SVG evitará las versiones muy diferentes como señaló el OP al principio, porque el logotipo se representará como ecuaciones matemáticas una vez en SVG (no incrusta fuentes, se convierten en las ecuaciones para las formas mostradas). En PDF, en realidad podría obtener una visualización de fuente muy diferente, especialmente si su sistema operativo no admite la fuente incrustada, en cuyo caso utilizará alguna otra fuente predeterminada para mostrar el texto.
Reitero una vez más, NO use los formatos web para nada que desee que se muestre en alta calidad. El propósito de esa exportación es ahorrar ancho de banda y disminuir los tiempos de carga mediante el uso de mucha compresión con pérdida (mientras se espera que la imagen sea apenas aceptable) porque los sitios no quieren desperdiciar ese ancho de banda. Dicho esto, tiene sus usos, no todos buscan mostrar todo con la máxima calidad absoluta. Sin embargo, SVG también reduce los tamaños, pero muchas cosas que queremos mostrar no funcionan como SVG, por ejemplo, las fotos que tomamos con nuestras cámaras se rasterizan desde el instante en que las tomamos y no tiene mucho sentido calzarlas en un SVG. Dependiendo de si ese es el enfoque central de su sitio o no, puede o no querer comprimirlos para la web (por ejemplo, probablemente no quiera para las imágenes de usuario de Flicker,
No me preocuparía la borrosidad de la imagen cuando se hace zoom. Si alguien necesita ampliar el 200 % para leer cómodamente la página, el texto es demasiado pequeño o su vista no es lo suficientemente buena como para notar que la imagen está borrosa en niveles de zoom tan extremos.
nico