Archivo de la etiqueta: íconos

Sprite, todas tus imágenes en una

¿Que es un Sprite?

No, no es la bebida secundaria de esa empresa de la botella curvilinea de color negro con rojo 😉

Es una técnica que se usa en el diseño web para agrupar todas las imágenes, íconos sobre todo, necesarias para el montaje del diseño.

Agrupar imágenes e íconos en un solo archivo facilita al navegador la carga de la web, ya que solo tiene que traer una imagen y con esa imagen se compone todo. El secreto está en la localización de esta imagen y el uso del atributo de css background-position para mostrar un ícono u otro. Pero mejor un par de ejemplos:

Facebook Sprites Images:

facebook-sprite2-image-2014-12 facebook-sprite-image-2014-12

 

 

 

 

 

 

 

 
Por lo general la composición de estas imágenes se hace usando algún programa de edición gráfica como puede ser Photoshop, pero esto implica que si tienes tu diseño listo debas extraer los íconos y elementos que quieras usar en tu sprite para colocarlos dentro de un solo archivo de imagen. Pero para que hacer algo a mano si ahora contamos con servicios web que nos pueden ayudar en esa tarea:

 

Spritepad de wearkiss.com

 

Sprite Cow - Generate CSS for sprite sheets
Sprite Cow

 

Iconmoon.io App

En un post anterior hablamos sobre los Font Icons, que tiene una gran ventaja en comparación de los íconos en formato imagen.

Pero, nos compensa descargar una fuente de íconos que por un lado pesa lo suyo y que por otro trae una gran cantidad de íconos que no llegaremos a usar en su totalidad.
Muchas veces utilizas solo relacionados a las redes sociales mas utilizadas.

Para evitar esa sobrecarga de peso y opciones tenemos IcoMoon.io y su App, que además de permitirnos crear nuestros propios íconos también nos permite filtrar los que queremos usar, crear los archivos de fuentes necesarios y descargarlos en un archivo .zip que nos ofrece una demo y un style.css con el ejemplo de como integrar la fuente en nuestro proyecto.

Y que mejor que unas capturas 🙂

El pase de diapositivas requiere JavaScript.