Fandom

Central de Wikia

Comentarios12

Diseño Gráfico - Favicones

¡Interferencia de bloqueo de anuncios detectada!


Wikia es un sitio libre de uso que hace dinero de la publicidad. Contamos con una experiencia modificada para los visitantes que utilizan el bloqueo de anuncios

Wikia no es accesible si se han hecho aún más modificaciones. Si se quita el bloqueador de anuncios personalizado, la página cargará como se esperaba.

Diseño Gráfico en tu comunidad - Favicones

¡Saludos wikianautas! soy yo Rodehi nuevamente en los blogs de diseño gráfico, tema que no he tocado en bastante tiempo pero luego de prometer algo se supone que debo cumplirlo y traerles la entrada de como hacer un favicon de una vez por todas xD.

Los favicones son aquellos pequeños iconos que se encuentran junto al titulo de la viñeta en nuestro navegador.
FaviconEntradaRodehi.png

Aunque muchas veces estos puedan parecernos inútiles, por muchas razones son mucho más útiles de lo que creemos, ¿Que crees que pasaría si no tuviéramos un favicon?

TabsPreviewNoFavicon.png

Esto no se ve muy lindo ¿verdad? y podría ser aun peor si cada viñeta tuviera incluida la palabra "wikia", podría resultar bastante confuso, en ocasiones molesto. Otras de las razones por las que se opta por un favicon personalizado es el hecho de hacer de nuestra comunidad llame la atención, el favicon es un complemento necesario dentro de una comunidad, se ha demostrado que las comunidades que a pesar de no tener un "gran diseño" normalmente utilizan sus elementos bien organizados entre ellos están el logo, fondo y favicon, por lo tanto si eres nuevo diseñando tu comunidad te recomiendo que leas esta entrada en donde se te enseñara de la mejor manera a como hacer tu propio favicon.

Favicon Simple

AjustesRodehiFavicon.png

Para empezar trabaremos con un favicon simple o también conocido como "clásico" que es creo el más fácil de realizar pero el resultado de este dependerá de varias cosas, para lograr favicones más experimentados veras que estos serán tratados más adelante, sin nada más que decir comencemos. Una vez tengas un programa de edición de imágenes que maneje transparencia, capas y selecciones como lo son Photoshop y Gimp (Gimp es de software libre), lo que deberás hacer es crear una nueva imagen y deberás elegir una resolución de 16px × 16px, elegir transparencia en caso de no tener esa opción visible buscar en los ajustes avanzados del programa, normalmente se hallan a la vista.



Una vez abierto el editor se podrá previsualizar lo siguiente:
GimpVentanaFaviconEntrada.png

Para comenzar y prácticamente ya terminar, ya que es muy sencillo seguiremos estos siguientes sencillos pasos. Lo primero sera importar el icono que queramos que sea nuestro favicon, cuanto más sencillo y pequeño mejor, ya que si es muy grande posiblemente cueste más redimensionarlo (es decir cambiar su tamaño, en este caso volverlo más pequeño), cuando se importe la imagen podrán ver algo similar a esto:

ImportFaviconSimpleModeRodehiBlog.png
Sencillamente re-dimensionaremos la imagen (Shift + T, en Gimp):
ResizeFaviconSimpleEntradaRodehi.png


ResizeFaviconSimpleEntradaRodehiNro2.png

Como podemos apreciar, los píxeles ya fueron adaptados así que veamos la previsualización del favicon luego de ser guardado, recordar hacerlo en un formato ".ICO" que es el que exige el diseñador de temas:

SaveICOEntradaRodehi.png

SaveICOEntradaRodehi2.png

Lo más seguro es que les una ventana como esta pero no se alarmen, simplemente le da a guardar y ya, debido a que esa ventana sirve para tratar con iconos de Windows de mayores resoluciones y sus paletas, etc. Lo que no nos importa.

Pues lo siguiente es probar el favicon, podemos hacerlo desde un wiki de pruebas o desde un documento HTML. Si eres usuario de alguna distribución de Linux como Ubuntu por ejemplo, una vez abras la imagen se mostrara debajo en la barra de tareas que prácticamente mostrara el icono y como se vera aproximadamente, si eres Linux tendrás esa pequeña ventaja ;) Lo único que queda hacer es ponerse a hacer pruebas y elegir el diseño que más les convenga.






Favicon Experimentado

FaviconComplejoEntradaRodehi.png

Los favicones experimentados, también conocidos como complejos, son favicones que normalmente se usan de manera "profesional" y tienen distintas capacidades y ventajas entre ellas el poder adaptarse a distintas resoluciones, se ven más grandes en muchas ocasiones, siendo que a la hora de diseñar también estos pueden tener detalles (no quiero decir que con 16px no se puedan dar detalles solo que no es común y muchas veces poco humano xD), como sea el sistema de favicones experimentados normalmente trabaja con 4 capas de distintas resoluciones de forma ascendiente, comenzando por una de 16px, otra de 32px, 48px y la ultima de 64px. Lo que deberemos hacer es comenzar por la capa de 64px que es la más grande. ¡Pero alto, stop, stop! ¿¡Acaso no tenemos que...!? Si, no es tan fácil ¿verdad? pues te ahorrare bastante trabajo con todo esto de colocar capas, por lo que acabo de desarrollar recientemente una plantilla en formato ".psd" (Descargar aquí, por cierto esas lineas de guía están para tratar con otros ámbitos de dibujo técnico, que si tienes experiencia diseñando pensé que podrían ser útiles, si te molestan a la hora de trabajar presiona "Mayus + Ctrl +T" para que no se muestren) bueno, una vez abierta la plantilla, una vez estemos sobre una capa en este caso la de 64px una vez dentro de esa capa podremos trabajar libremente dentro pero con un limite de espacio que usualmente se encuentra marcado con bordes. Una vez aquí, tenemos más espacio para trabajar, podemos usar elementos del programa como pinceles texto, etc. O también se puede importar una imagen como hemos visto anteriormente. Una vez se comience a trabajar con una imagen, lo más recomendado es tomar la de mayor tamaño y redimensionarla (se recomienda introducir la resolución de las otras capas manualmente desde la casilla numérica) a los otros tamaños copiando los píxeles (Ctrl + C, en Gimp):

Así ser vería nuestro favicon luego de hacer los últimos cambios.

Luego sencillamente lo exportamos con el formato ".ICO" exactamente como se mostró anteriormente, se nos guardara una imagen de 64px con excelente calidad, que se adaptara bien al funcionamiento del Diseñador de Temas, sin nada más que decir previsualizaremos el favicon.

UltimaPreviewDelFaviconComplejoEntradaFaviconRodehi.png

Como podemos apreciar el favicon posee una calidad excelente.

Bueno con esto terminaríamos la sección de favicones, siempre recuerden que no sera fácil, en mi caso yo soy un diseñador experimentado y he usado Gimp por más de 5 años (Algo bastante raro para una persona de mi edad, pero cierto), pero descuiden siempre hay que estar probando e intentando hasta conseguir un resultado eficiente.

Enlaces de interés:

Rodehi.jpg
Rodehi es miembro de Wikia desde abril de 2015, siendo administrador de Steven Universe Fanon Wikia y ayudando a usuarios voluntariamente con problemas y asuntos de CSS, HTML y diseño gráfico como pasatiempos en el chat de la Comunidad Central. 

Spotlights de otros wikis

Wiki al azar