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.
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.
Continúar leyendo...
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.
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.
Continúar leyendo...