¿Cómo puedo hacer que mi logotipo se vea nítido en la web?

Estoy lanzando una empresa y mi logotipo se ve muy pixelado y de baja calidad en comparación con otros. Por ejemplo, http://talentegg.ca/ tiene un logotipo realmente nítido, ¿cómo puedo obtener el mío así?

La mía, ¿cuál es mejor? Sin embargo, ambos se pueden mejorar.

  1. 1

  2. 2

  3. versión de ilustrador -escamoso

  4. guardado para la versión web -web

¡¡Por favor ayuda!! tengo adobe photoshop cs6

a veces combino el logo con el texto - por máscara -
Saludos, @GM3 - ¿Qué quieres decir con eso?
¿Tienes Illustrator también? Esa sería una herramienta mucho mejor para un logotipo como ese: lo tendría como gráficos vectoriales, para un uso mucho más fácil en otras aplicaciones. ¿Tu logo también está pixelado en Photoshop? Eso podría indicar que ha configurado su anti-aliasing demasiado suave.
Saludos, @JanusBahsJacquet Sí, tengo Adobe Illustrator. ¿Puedo intentar rehacerlo allí? ¿Cómo lo represento?
Eso es lo que yo haría, sí. El pequeño ícono de vórtice debería ser relativamente fácil de dibujar como una forma vectorial en Illustrator y, por supuesto, el texto es solo texto.
@JanusBahsJacquet ¡Muy útil! Casi lo tengo, estoy haciendo el vórtice, sin embargo, tengo problemas para borrar las aberturas de los círculos para convertirlo en un vórtice. Cuando uso la herramienta Borrador, cuando borro una sección, ¿solo dobla la forma y no la borra?
NVM lo consiguió. Tuve que usar el borrador y luego seleccionar la herramienta para eliminar el área
@JanusBahsJacquet Hey, he rediseñado el logo y actualizado la publicación. Sin embargo, cuando lo agrego a Photoshop, también se ve pixelado. ¿Cómo debo exportarlo desde Illustrator para que se vea nítido?
Simplemente use la función Guardar para web de Illustrator , que es bastante similar a la de Photoshop; no hay razón para usar Photoshop aquí. Y para obtener el logotipo en un formato flexible que pueda usar en documentos de Word y similares, simplemente guárdelo como archivo PDF. (Use la herramienta Mesa de trabajo para recortar el documento solo al logotipo antes de hacer ambas cosas, por supuesto).
Listo, ty :) se ve similar aunque todavía un poco pixelado? O tal vez solo soy yo. Rehizo todo el logo, incluso usé matemáticas para el vórtice. Déjame saber tu opinión si hay algo más que pueda hacer. Puede estar bien ahora.
A menudo, es mejor dejar el cambio de tamaño en manos del navegador: hacen un mejor trabajo al hacer coincidir las sugerencias de subpíxeles orientadas al sistema operativo real y la representación en la máquina del espectador que una representación única basada únicamente en su máquina. En otras palabras, haga como lo ha hecho TalentEgg y exporte una versión mucho más grande de su logotipo, y luego especifique en el CSS de su página qué tamaño debe tener. El logotipo de TalentEgg tiene en realidad 500 px de ancho , aunque en la página está escalado a 128 px de ancho.

Respuestas (3)

http://talentegg.ca/images/logo.png -> (La imagen del logotipo para el enlace de ejemplo tiene un tamaño real de 500*133 px, pero en el encabezado solo tiene un ancho de 128 px).

Como puede ver en este ejemplo, han usado una imagen de gran tamaño y dan un ancho personalizado usando CSS. Puede usar su archivo de Illustrator ... hágalo de aproximadamente 600 px de ancho mientras lo guarda como archivo png. Entonces no hay necesidad de usar Photoshop. Finalmente, cuando agregue al sitio web, hágalo con un ancho de 200px o 100px según sus necesidades. Espero que hayas entendido mi punto y te sea útil.

¿Tenía su logotipo original en varios formatos, incluidos .eps o .ai? Para obtener la máxima nitidez en la web, puede exportar esos formatos a un formato .svg, que es un formato vectorial para el medio web.

El suavizado se ve más en su logotipo que en Talentegg.ca, probablemente simplemente porque usa negro que contrasta más con el blanco.

En otra nota, si hubiera diseñado su logotipo, me complacería proporcionarle un formato apropiado, por lo que solo me comunicaría con el diseñador gráfico original si fuera usted. Volver a trazar el logotipo usted mismo no es una buena idea desde el punto de vista de los resultados y la ética.

Gracias @Emilie, hice el original pero en Photoshop y perdí el archivo :(. SVG se ve mucho mejor, sin embargo, la fuente cambia. ¿Es posible mantener la misma fuente y guardarla como .svg?
Seleccione su fuente y "Crear contornos" para convertirla en formas, ¡debería estar bien después de eso!

Observe que la imagen es http://talentegg.ca/images/logo.png más grande de lo que aparece en la pantalla. Ese es el truco. Agregue una imagen grande y luego redúzcala en css. Además, una vez que exporte su png grande para la web, puede comprimirlo aún más usando https://tinypng.com/ .

Lo usé en los logotipos de mi sitio http://galnova.com

Espero que esto ayude.

¿Cómo puedo hacer que mi logotipo se vea nítido en la web?
RespuestasAquíPolítica de privacidad1y, 12v