Consulta - Logo pixelado desde celulares

  • Autor Autor Federico99
  • Fecha de inicio Fecha de inicio
Estado

🔒 Este tema está cerrado para nuevas respuestas.

⏰ Solo el creador del tema puede solicitar la reapertura de sus propios temas, pero únicamente dentro de los 60 días previos a la última actualización.

Federico99

Federico99

1
Mi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
Suscripción a IA
Hola gente!

Tengo una consulta y quizá ustedes que son más experimentados en Diseño Gráfico me puedan ayudar.

Hice un logo simple para una web (a simple me refiero con que solo puse el nombre de la web, no tiene imágenes ni nada raro) y desde una PC se ve "bien", pero cuando entro desde el celular se ve un poco pixelado, sobre todo los bordes... y la verdad aunque no se nota mucho, para los detallistas (como yo) queda horrible...

Mi consulta es: ¿Como recomiendan crear logos, en JPG o PNG? ¿El tamaño debe ser normal (o sea, tal como se muestra) o más grande de lo que quiero que se vea y achicarlo con CSS? ¿En que resolución debería guardarlo? ¿Algunos tips?

Muchas gracias!!!

Saludos.
 
Te recomiendo usarlo en PNG aunque en ocasiones puede ser un poco más pesado que JEPG, la calidad es mayor.
 
Poyello dijo:
Te recomiendo usarlo en PNG aunque en ocasiones puede ser un poco más pesado que JEPG, la calidad es mayor.
Hacer clic para expandir...

Hola! Gracias por la respuesta!! :encouragement:
¿Sobre la pixelación tenés algún consejo? ¿Puede pasar que se vea mejor desde la PC que desde el celu?
 
Es raro eso que comentas ¿podrías indicar el sitio web? Si le has añadido un borde degradado debe ser en PNG (o en APNG, aunque ese formato es para animaciones y casi ni se usa por ahora), ya que PNG es el único formato que soporta transparencias degradadas para mostrar en web, si nos ceñimos a los formatos más populares para internet (png, jpg y gif).

Si no quieres pérdida alguna de calidad puedes usar el formato SVG, es compatible con la mayoría de navegadores modernos y es escalable (aunque he visto que no indexa muy allá), en la Wikipedia tienen imágenes publicadas en este formato para mostrar mapas y otros objetos escalables.
 
Federico99 dijo:
Hola! Gracias por la respuesta!! :encouragement:
¿Sobre la pixelación tenés algún consejo? ¿Puede pasar que se vea mejor desde la PC que desde el celu?
Hacer clic para expandir...

No te sabría decir, puede ser que la web solo esté adaptada para PC, pero cuando ingresan desde un móvil, el navegador lo redimensiona, esa puede ser una hipótesis que se me ocurre. Lo que hacen muchos temas de wordpress es que se adaptan al dispositivo desde que se conectan ya sea Tablet, celular, PC, etc.
 
ramonjosegn dijo:
Es raro eso que comentas ¿podrías indicar el sitio web? Si le has añadido un borde degradado debe ser en PNG (o en APNG, aunque ese formato es para animaciones y casi ni se usa por ahora), ya que PNG es el único formato que soporta transparencias degradadas para mostrar en web, si nos ceñimos a los formatos más populares para internet (png, jpg y gif).

Si no quieres pérdida alguna de calidad puedes usar el formato SVG, es compatible con la mayoría de navegadores modernos y es escalable (aunque he visto que no indexa muy allá), en la Wikipedia tienen imágenes publicadas en este formato para mostrar mapas y otros objetos escalables.
Hacer clic para expandir...

Hola! Gracias por la respuesta!

Me pasa en dos sitios, uno por ejemplo es: odioque.com.ar – Secretos y más – Desahogate de forma anónima

Lo que hice fue crear una imagen, y ponerla como fondo dentro de un div con el mismo tamaño de la imagen. No se si vendrá por ahí el problema.
Desde la PC se ve dentro de todo normal, pero si ingresás desde el celu se ve media pixelada / borrosa / rara.

Gracias por la ayuda! :encouragement:
 
Creo que es porque no es una imagen con colores, pienso que deberías usar SVG, aunque tendrás que ver cómo incorporarlo y de pronto añadir código para navegadores viejos y no compatibles (añadiendo la versión "vieja" del logotipo).
 
Federico99 dijo:
Hola! Gracias por la respuesta!

Me pasa en dos sitios, uno por ejemplo es: odioque.com.ar – Secretos y más – Desahogate de forma anónima

Lo que hice fue crear una imagen, y ponerla como fondo dentro de un div con el mismo tamaño de la imagen. No se si vendrá por ahí el problema.
Desde la PC se ve dentro de todo normal, pero si ingresás desde el celu se ve media pixelada / borrosa / rara.

Gracias por la ayuda! :encouragement:
Hacer clic para expandir...

¿Con cual programa hiciste el logo?
 
Si me pasas el logo quieras te pueda ayudar ( empaqueta todo el logo, lo comprimes y me lo pasas y te lo exportó en buena calidad )
 
DiosGohan dijo:
Si me pasas el logo quieras te pueda ayudar ( empaqueta todo el logo, lo comprimes y me lo pasas y te lo exportó en buena calidad )
Hacer clic para expandir...

MIL gracias!!! En un rato cuando llegue a la PC donde tengo el logo te lo envio 🙂
 
Ging dijo:
lo mas facil es usar el doble de pixeles .
Hacer clic para expandir...

Es muy posible pero con SVG se evita ese problema, y los archivos son más ligeros y escalables...
 
Federico99 dijo:
Hola!! Muchas gracias! también lo tendré en cuenta, a la noche lo pruebo y les comento! 🙂
Hacer clic para expandir...

Te recomiendo Ilustrator para hacer los logos, este software al trabajar con vectores y no con pixeles (como photoshop), no hace que pierdas calidad al momento de re escalar el logo a cualquier tamaño. Saludos!

- - - Actualizado - - -

Federico99 dijo:
Hola!! Muchas gracias! también lo tendré en cuenta, a la noche lo pruebo y les comento! 🙂
Hacer clic para expandir...

Te recomiendo Ilustrator para hacer los logos, este software al trabajar con vectores y no con pixeles (como photoshop), no hace que pierdas calidad al momento de re escalar el logo a cualquier tamaño. Saludos!

- - - Actualizado - - -

Federico99 dijo:
Hola!! Muchas gracias! también lo tendré en cuenta, a la noche lo pruebo y les comento! 🙂
Hacer clic para expandir...

Te recomiendo Ilustrator para hacer los logos, este software al trabajar con vectores y no con pixeles (como photoshop), no hace que pierdas calidad al momento de re escalar el logo a cualquier tamaño. Saludos!
 
Veamos.

Acá está la imágen desde tu sitio mismo: http://odioque.com.ar/img/logok.png

La imagen de inicio está borrosa. Es demasiado pequeña.

Opciones:

Complementando lo que dice Ging:

El proceso que puedes hacer es generar una imagen de muuuuuuuucho mayor tamaño (no de 115x26) digamos de 20 veces más.

2300x520 px, guardarla y resamplear (bicubic sharper) una copia al tamaño final... yo la dejaba más grande que lo que tienes.

Después tienes que generar el asset a 2x y 3x (230x52 y 345x78)

Pero la realidad es que conicido con ramonjosegn, mejor usa un svg.

Y, el elemento picture es interesante, pero unos pocos navegadores todavía no lo reconocen, pero ya son pocos.
 
Lo que podrías hacer es usar directamente un SVG (no sé que tan recomendable sea, creo que hay algún que otro celular no puede visualizarlo si no se implementa bien).

La otra alternativa es tener el logo más grande (en tu caso, por lo menos 350px de ancho) y colocar las medidas que vayas a usar con CSS para que se redimensione :encouragement:
 
Hola! muchas gracias por los comentarios! Los tengo a todos en cuenta, anoche no tuve tiempo de modificarlo, hoy posiblemente si 🙂
 
Lo solucioné haciendo el logo más grande ( 3 o 4 veces ) y redimencionandolo con CSS. Gracias a todos por la colaboración! :encouragement:

Me falta en odioque hoy lo haré jajjaa
 
Estado

🔒 Este tema está cerrado para nuevas respuestas.

⏰ Solo el creador del tema puede solicitar la reapertura de sus propios temas, pero únicamente dentro de los 60 días previos a la última actualización.

Atrás
Arriba