Online Flat Icon Generator: Simple AppWeb que crea íconos planos o Flat

Empezaré diciendo algo que tal vez muchos sepan … pero no importa: HTML5 + CSS3 + JS … simplemente perfecto 🙂

Un usuario me escribió un email preguntándome sobre algún tutorial para él poder crear íconos flat, esos que son planos y que es la nueva moda en la web. Específicamente quería mediante Inkscape o Gimp un botón estilo chat o algo que le sirviera (o hiciera referencia) a Snapchat.

Como yo soy pésimo con Inkscape y además, creando contenido desde cero inclusive con Gimp apesto… pues recordé que hace un tiempo ví una pequeña aplicación web (un index.html con algunos css y js) que nos permitía crear de forma simple y rápida íconos planos a la moda actual, ya saben, los diseños Flat.

Flat Icon Generator

Tiene una serie de íconos predefinidos, por ejemplo ícono de Laptop, dispositivos móviles (el que muestro en el screenshot), regalo, bicicleta… uff, son bastantes, realmente una gran variedad:

Pero no es cuestión de solo poner el ícono y ya… podemos mediante dos barras horizontales definir el tamaño del ícono o el tamaño de la imagen como tal (ícono + background). Obviamente nos aparece el tamaño cuadrado en píxeles … 256 … 512 … etc

La siguiente opción nos permite elegir el color del background así como también, el del ícono. Por defecto el ícono es blanco y el background azul, para que no desentone mucho.

Por último en esa barra a la izquierda de opciones, nos permite definir si los bordes del ícono son cuadrados o si por otra parte, queremos que sea circular el resultado final.

Les dejo un screenshot de estas opciones:

Por otra parte, en la parte superior nos muestra la información del ícono que se está generando y cambiando en tiempo real. O sea, si juegan un poco con los tamaños y colores verán que esa información cambia siempre en tiempo real:

Como pueden ver, también contamos con un botón Get Icon, el cual nos mostraría el ícono ya generado en PNG en otra pestaña, en la cual podemos dar Clic derecho + Guardar y listo, tendremos el ícono flat que generamos en la carpeta deseada de nuestro ordenador.

Descargar Flat Icon Generator

Si desean probarlo ustedes mismos (que imagino así sea jaja), aquí les dejo el link:

Flat Icon Generator

Con esto espero cumplir con lo que el usuario me preguntó por email, si bien no es un tutorial para crear el botón con Gimp o Inkscape, bueno, esto igual imagino que le sirva para lo que quiere. De hecho, no puede solo generar el botón para el link de descargar Snapchat, sino que inclusive podría generar la inmensa mayoría de los íconos o botones para su sitio, o lo que sea que esté haciendo 😀

Saludos y espero les haya resultado interesante.

Comparte para difundir

Si te ha gustado nuestro contenido ahora puedes ayudar a difundirlo en las redes sociales de manera sencilla usando los siguientes botones:

Envía
Pinea
Print

10 comentarios

  1.   illukki dijo

    No entendi como se usa 🙁 Solo se pueden hacer las opciones de iconos que da?

  2.   Percaff_TI99 dijo

    Está muy bueno, me apunto el link.
    Yo suelo utilizar IcoMoon App (https://icomoon.io/app/#/select) que también es bastante interesante y muy completo; aunque no sé si es exactamente lo mismo a lo que referencia el post.

    Saludos.

  3.   mat1986 dijo

    Me gustó la idea de personalizar íconos, me gustaron los links (el tuyo y el del user Percaff_TI99). Los guardaré en mis favoritos 😀

  4.   eliotime3000 dijo

    Interesantes propuestas, aunque ya prefiero usar Inkscape por lo fácil de hacer los íconos planos (de hecho, es más práctico que otro editor vectorial que he usado, aunque aún no me acostumbro a hacer gráficos vectoriales más avanzados con dicha aplicación).

  5.   Iván García dijo

    Muy práctico y fácil de usar. También podría cubrir esas necesiades usando Font Awesome: http://fortawesome.github.io/Font-Awesome/

    1.    Sergio dijo

      Gracias por compartir! eso 🙂

  6.   Sergio dijo

    Vaya que interesante de Seguro servira para muchos proyectos. Me preguntaba como es una aplicación web ¿se podra portar para firefox os? Creando un webapp un atajo directo o similar para usarla ? Disculpen nose por eso pregunto.

  7.   Ana dijo

    Ahora que estamos en Navidad muchos padres regalarán a sus hijos un smarthfone para reyes. ¿Qués es una de las primeras cosas que harán con estos dispositivos? Sin lugar a dudas una de ellas por no decir la primera será descargar snapchat y otra de ellas será la descragra de whatsapp. Al tratarse de aplicaciones gratuitas, la mayoría de los adolescentes disponen de estas en sus móviles.

  8.   Sergio dijo

    Creo que una de las causas del éxito de aplicaciones del tipo de snapchat es en primer lugar que son gratis, por otro lado se ha creado la moda de enviar imágenes casi de cada cosa que se hace a lo largo del día y finalmente porque se trata de una app muy fácil de utilizar

  9.   Mundo Snapchat dijo

    ¡Excelente! Esta web me ha servido bastante en el proceso de creación del logotipo para mi nuevo sitio sobre snapchat, coincidentemente con el usuario que te hizo la consulta. Les mando un abrazo desde Paraguay, muy bueno el sitio 😉 Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.