Fontastic

Cómo crear colecciones de iconos vectoriales para insertar en páginas web. Un servicio que ofrece miles de iconos para proyectos personales y comerciales para crear una fuente digital a medida.

fontastic

Las ventajas de utilizar elementos vectoriales en el diseño web para navegadores modernos son obvias: entre ellas, la capacidad de mostrar estos componentes gráficos a cualquier tamaño sin pérdida alguna de calidad. Una forma de integrar iconos vectoriales en un proyecto web es recurrir a fuentes o tipografías digitales embebidas en el código html + css.

Ahora que los navegadores se comportan bastante bien con los estándares de fuentes web, todas las razones para aprovechar esta capacidad se hacen más claras. Por ejemplo, se acabó la modificación de los iconos  en un programa de edición de imagen para cambiar un color u otras características. Basta retocar el código CSS y los cambios se aplican instantáneamente a todo el sitio web. Con la proliferación de dispositivos de alta resolución (como las pantallas retina de los últimos Mac, iPad y iPhone), los iconos se muestran siempre con la máxima calidad, sea cual sea el tamaño a que deban mostrarse.

Existen muchas colecciones de iconos vectoriales integrados en archivos de fuentes digitales que pueden utilizarse como webfonts, como los dingbats de FontSquirrel y los de otros servicios comentados anteriormente. Existe un pequeño problema, sin embargo, con determinadas colecciones de iconos. Si se usa un archivo masivo para unos pocos iconos que vayamos a utilizar podemos ralentizar innecesariamente la carga y respuesta de nuestra página web (además de que se hace más incómodo localizar los iconos que nos interesan dentro de una cantidad tan grande de glifos).

fontastic

Una solución magnífica a este inconveniente es preparar una webfont a medida, que contenga solamente los iconos deseados o necesarios para un proyecto determinado. Crear fuentes digitales a partir de una selección de iconos vectoriales es cosa de niños con Fontastic, un servicio que ofrece de entrada más de 4000 componentes para elegir. Así, es posible crear una colección de iconos a medida para un proyecto, según un tema determinado…

El servicio es gratuito y la licencia de usuario permite el uso también en proyectos comerciales. Para profesionales, o para aquellos que necesiten unos iconos muy específicos, existen una serie de colecciones premium (de pago). La selección, tanto para cuentas premium como gratuitas, además, no está limitada a la extensa biblioteca de iconos disponibles en Fontastic, sino que se pueden subir e integrar en la fuente creada los archivos vectoriales propios del usuario (en formato SVG). Una vez hemos creado nuestro archivo, seleccionando iconos de la enorme colección o subiendo nuestros propios componentes vectoriales, Fontastic proporciona unas instrucciones muy claras para utilizar las fuentes recién creadas.

 

Iconfinder

Iconfinder es un buscador especializado en encontrar iconos. Su enorme base de datos incluye nada menos que 187.000 iconos en más de 600 colecciones.

Puedes buscar introduciendo cualquier término, o explorar las diferentes categorías existentes. Los iconos están disponibles en distintos formatos gráficos (png, gif…) y también en el formato .ico.

Principios del diseño de iconos

Todo sobre el diseño de iconos: criterios para utilización, estrategias de dibujo, organización, inspiración, representación…

Jon Hicks, un diseñador muy conocido por sus diseños de identidad para Firefox, Opera o MailChimp, comparte algunas de sus ideas y experiencias sobre diseño de iconos en su blog, The Hickensian.

El área de diseño de iconos, entre diseño gráfico e ilustración, tiene cada vez más y más diversas aplicaciones. La presentación (pdf) de casi cien pantallas recorre con humor, ingenio y detalle todo lo que cabe tener en cuenta para un diseño de iconos efectivo y atractivo.