Cómo renderizar iconos con bordes nítidos en Illustrator

Esta es principalmente una pregunta sobre la calidad de los logotipos/iconos utilizados en los sitios web. Creo logotipos/iconos con Illustrator, pero cuando veo iconos en sitios web profesionales (ver imagen y enlaces), se ven nítidos como un texto, sin borrosidad. Los bordes son muy claros. Por ejemplo, vea esta imagen, especialmente el ícono de búsqueda y el ícono de lista de menú:

ingrese la descripción de la imagen aquí

  1. Este es mi propio blog que tiene iconos malos, el logotipo y el icono de menú . Ambos son imágenes PNG .
  2. Este es el sitio web de Entrepreneur con un increíble ícono de menú y un ícono de búsqueda . Si revisa el elemento Inspeccionar para el sitio móvil, verá que el ícono de búsqueda y el ícono del menú no son imágenes (no sé la realidad). Está usando un pseudo elemento. ¿Como funciona? Tal vez esto tenga algo que ver con la calidad.
  3. Lo mismo ocurre con el sitio web de TimeofIndia . Aquí, el ícono del menú está hecho con la etiqueta hr , por lo que obviamente es genial, pero aún así el ícono de búsqueda está más allá de la comprensión, ya que usa un pseudo elemento.
  4. Y otro escenario está relacionado con la técnica de este sitio web de Business Insider . Lo he visto en la mayoría de los sitios web, especialmente en los sitios de Facebook. Utilizan una sola imagen para todos los iconos. ¿Cómo es posible? Si no lo entiende, visite este sitio web y compruebe la URL del menú y la imagen del icono de búsqueda. ¿Cómo se hace?

Entonces, primero me gustaría saber cómo funcionan estas cosas. ¿Cómo se representan estos iconos?

En segundo lugar, ¿por qué no obtengo la calidad como ellos? ¿Debo dejar de usar imágenes como estas? Estoy preguntando esto porque he intentado exportar de muchas maneras usando Illustrator, con las mismas dimensiones que se requieren, pero aún así la calidad apesta. Si puede ver, en el sitio móvil de mi propio blog ( Blog ), la barra horizontal central está borrosa a pesar de que la imagen original se ve increíble antes de cargarla. ¿Porqué es eso?

Creo que son demasiadas preguntas. Le agradecería si puede proporcionar enlaces adecuados para comprender estas cosas completamente, si explicarlas aquí no es fácil.

Gracias.

¿Puedo mejorar esta pregunta para eliminar 1 voto negativo?

Respuestas (2)

Estos sitios están usando vectores. Cuando exporta como png puede mantener mucha calidad, pero con un svg (vector) mantiene la integridad total del gráfico.

Desde AI, puede exportar a svg directamente. Si tiene la intención de incluir texto en el gráfico, debe "expandir" el texto para capturar los contornos de las letras.

¿Qué pasa con esos pseudo conceptos y esa imagen única para todos los iconos? ¿Podría agregar esto a su respuesta?
¿Estás seguro de que todos ellos están usando vectores para los íconos de búsqueda? ¿Leíste la respuesta a continuación?
Los comentarios sobre los iconos de fuentes son correctos. Este pseudo elemento sobre el que está preguntando es solo una parte de cómo se cargan. En cuanto a la imagen única para todos los íconos, esto se logra con hojas de sprites .
Si tiene conocimientos sobre tecnologías front-end, ¿podría analizar este problema? Está relacionado con SVG. Algo no funciona: stackoverflow.com/questions/39678361/…
Ah, parece que tienes una respuesta. Hazme saber si aún necesitas ayuda.
Sí, tengo la respuesta. Pero tengo más que pedir. ¿Qué pasa con los navegadores que no son compatibles con SVG? ¿Qué debería hacer? ¿Usar imágenes PNG para ellos?
Sí, no conozco ninguno que no los admita, pero PNG es la siguiente mejor opción
Entonces, ¿cómo puedo hacer eso? ¿Alguna pista? Queremos reemplazar el SVG cuando no sea compatible.
¿Cómo cargar PNG? ¿O cómo volver a PNG?
Cómo volver a PNG.
Aquí hay un enlace con detalles.
  1. Use fuentes de iconos para al menos el menú de hamburguesas
  2. Como no estoy en la India, me redireccionan a un sitio no indio, por lo que es difícil decirlo.

  3. es una fuente de icono se define así:

    .s::before {
    color: #fff;
    content: "";
    font: bold 25px/1 "Genericons";
    position: relative;
}

    Para que funcione depende de la fuente.Genericons

  4. Están recortados por instrucciones css lea más aquí: css-sprites

3. Han usado '\f400' como contenido. ¿Qué significa?
Además, traté de buscar en Google sobre fuentes de iconos pero no pude encontrar resultados satisfactorios, especialmente esta técnica de pseudoelemento. ¿Conoces algún sitio para esto?
@VikasKumar '\f400' es solo el nombre del carácter en la fuente, al igual que 'a' o 'b', simplemente no tiene ningún símbolo asociado en la mayoría de las fuentes. El rango \e000-\f8ff es una de las tres llamadas áreas de uso privado , lo que significa que no hay una definición formal de lo que representa ese carácter, pero el creador de la fuente puede definir lo que quiera. Se pueden encontrar ejemplos de su uso, por ejemplo, en fontawesome que contiene muchos íconos web estándar como entradas de fuentes en el área de uso privado.
@VikasKumar y aquí está la lista de caracteres de fuentes avosomas y la ubicación en la que se encuentran: fontawesome.io/cheatsheet
Traté de imprimir algunos de los símbolos pero no se renderizaron. Traté de poner contenido como '\f400' y '' pero ambos no funcionaron.
@VikasKumar ¡Pero solo funciona si tiene esa fuente en particular cargada en su navegador y asociada con el texto en cuestión! No tiene significado en ninguna otra fuente.
Oh, sí, acabo de leer sobre esto en Stackoverflow. Pero ahora lo que no entiendo es la diferencia entre \wxyz y  ¿Son estos diferentes formatos para representar un símbolo? En segundo lugar, puedo usar este último como contenido '.......'; ?
@VikasKumar sí, lo mismo es una codificación alternativa. Sí, puedes usarlo en texto.
Ok, lo intentaré pronto y te diré si funciona :)
Bueno, el formato \wxyz funciona y el  no funciona. Descargué fuentes de aquí: fontawesome.io/assets/font-awesome-4.6.3.zip. Intenté usar el segundo formato pero no funcionó. Lo copié de aquí: fontawesome.io/cheatsheet
Cómo renderizar iconos con bordes nítidos en Illustrator
RespuestasAquíPolítica de privacidad1y, 0v