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:
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.
No entendi como se usa 🙁 Solo se pueden hacer las opciones de iconos que da?
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.
Me gustó la idea de personalizar íconos, me gustaron los links (el tuyo y el del user Percaff_TI99). Los guardaré en mis favoritos 😀
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).
Muy práctico y fácil de usar. También podría cubrir esas necesiades usando Font Awesome: http://fortawesome.github.io/Font-Awesome/
Gracias por compartir! eso 🙂
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.
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.
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
¡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.