Diseño

Herramienta para extraer la paleta de colores de una imagen con un click

A veces tenemos la necesidad de extraer la paleta de colores de una imagen, y si no disponemos de una herramienta específica, puede que la tarea se vuelva un poco complicada.

Por eso hoy les quiero recomendar una herramienta online que nos permite extraer la paleta de colores de una foto con un click y sin instalar nada.

La herramienta se llama HD Rainbow y pueden acceder desde aquí. Allí solo tienen que arrastrar la imagen a la ventana del navegador y automáticamente nos mostrará la paleta de colores debajo.

HD_Rainbow

Lo bueno es que la imagen no se sube al servidor, se procesa directamente en el navegador y nos da los resultados. Esto es importante para nuestra privacidad, vaya a saber uno qué tipo de fotos sube ahí (?).

Abajo de la imagen podremos ver la paleta de colores y tenemos la opción de elegir si verla en HEX, RGB o HSL, dependiendo de nuestras necesidades.

Además, si lo deseamos, también podemos descargar la paleta en formato PNG para tenerla como referencia.

170+ íconos planos en PNG o SVG para descargar gratis

iconbros

Siempre que encuentro algún recurso de este tipo me gusta compartirlo con todos ustedes y más si son íconos gratis. No hay nadie que se resista a descargar un buen pack de íconos para tenerlos en la caja de recursos por si algún día hace falta.

En este caso les voy dejar un sitio llamado Iconbros, donde podemos encontrar más de 170 íconos planos en formato SVG o PNG.

Estos íconos son muy simples y minimalistas, pero pueden abrirlos y editarlos para colorearlos o modificarlos a gusto.

Lo bueno es que todos los días van subiendo nuevos íconos. Hasta hace unos días eran apenas más de 100, así que si entran a diario verán como la colección sube y sube.

Si desean usar estos íconos como fuentes web, también pueden hacerlo entrando aquí y bajando el set de fuentes.

Herramienta gratis para crear mockups para promocionar apps y sitios web

mockup

Cuando uno está por lanzar o ha lanzado una app o nuevo proyecto web necesita promocionarlo, y para ello la forma más atractiva es a través de mockups. Para los que no saben bien de qué se trata, los mockups son una especie de fotomontajes donde mostramos capturas de pantalla o diseños para ver “cómo quedarían” o “cómo es” una app.

Si sabemos un poco de diseño gráfico podemos crear los mockups nosotros mismos, pero si somos medio vagos (me inluyo) para qué vamos a hacer tanto problema si podemos usar herramientas web que nos faciliten la tarea a un par de clicks.

Mockup Generator es una herramienta web que nos permite crear mockups online de manera simple y gratis, sin saber de diseño gráfico.

Crear mockups online para mi app

El procedimiento es muy simple, lo primero es ingresar a la web e iniciar sesión.

Luego tenemos que elegir el modelo del mockup dependiendo de nuestras necesidades, ya sea Macbook, PC, Smartwatch, iPhone, iPad, Android, etc.

mockup generator

Una vez elegido el diseño pueden personalizarlo a gusto con distintas configuraciones de dispositivos, ubicaciones, fondos, y obviamente su propia captura de pantalla de la app o sitio web.

Pueden acceder a esta web desde aquí y comenzar a crear sus propios mockups.

30 modelos de degradados en CSS para usar gratis en tus diseños

Los degradados son uno de los recursos de diseño más estéticos, pueden usarse en botones, en fondos, o para usar como fondos en imágenes. Le dan a nuestros diseños un toque muy elegante y sofisticado. Por eso, hoy quiero compartir con ustedes una colección de degradados en CSS muy buena.

Degradados CSS

En total son 30 modelos de degradados, de todos los colores y para todos los gustos. Tienen la opción de descargarlos en formato de imagen, o bien descargar el código CSS para usar directamente en sus diseños.

Hacer un degradado, claro está, no es algo muy difícil. El secreto está en tener buen gusto para combinar los colores.

Pueden acceder a esta colección de degradados en CSS desde aquí.

Loaders y spinners en CSS gratuitos y listos para usar

No hay sitio web en internet que no use alguna forma de mostrar el progreso de una tarea. Pueden ser barras de progreso, spinners o loaders. Y de estos ultimos me quiero ocupar hoy, por eso quiero dejarles un par de recursos para descargar unos modelos geniales de loaders y spinners en CSS.

CSS Spinners y Loaders

CSSPIN

Aquí podemos encontrar 12 modelos de diversa índole, para todos los gustos. Lo bueno es que son modulares y completamente personalizables. En esa página tienen los ejemplos, y desde allí acceden a los códigos en Github.

Loaders and Spinners en CodePen

En CodePen hay una genial colección, algunos recursos son de pago, pero la mayoría son gratuitos. Hay diseños más avanzados que en el primer sitio que les recomendé.

Single Element CSS Spinners

Aquí pueden encontrar 8 modelos bastante simples, especial para aquellos a los que les gusta lo minimalista. Si hay alguno que les gusta, desde allí mismo pueden obtener el código.

SpinKit

Y en este último link van a encontrar 11 modelos, también bastante básicos pero muy interesantes. Si hay alguno que les gusta, arriba tienen el link que dice “source”, para descargar el código.

Topol.io, plantillas de email HTML gratis con editor incorporado

Si tienen algún proyecto en el que tienen que hacer email marketing y enviarle newsletters a sus suscriptores, esta herramienta les será de muchísima utilidad. Se trata de Topol.io, un servicio gratuito que nos permite crear plantillas HTML para nuestros emails de manera completamente gratuita y sin saber de diseño.

Topol.io

Topol.io es, como ya les comenté arriba, un servicio gratuito que nos permite crear nuestras plantillas HTML de manera muy simple, sin que sepamos de diseño. Todo se hace gracias a un genial editor incorporado que nos permite ir modificando las distintas partes de la plantilla con apenas unos clicks.

Lo único que hay que hacer es elegir alguna de las plantillas que están disponibles y comenzar la edición. Actualmente hay 7 modelos; son pocos, pero seguramente con el tiempo van a ir agregando más.

Topol.io

Una vez que seleccionamos el modelo deseado y pasamos el captcha, se cargará el editor. Desde allí se puede modificar todo lo referente al diseño y contenido de la plantilla de manera muy sencilla, como si se tratara de un editor visual.

Una vez que se termina la edición, solo nos queda guardar y descargar la plantilla para usar libremente en nuestros emails.

Es un recurso que todos tendríamos que tener guardado en marcadores por las dudas.

Sombras para texto en CSS: 41 modelos gratis y listos para usar

Hoy en día, gracias a CSS, se puede hacer cualquier cosa. Y en este caso les quiero dejar una colección de efectos de sombras en CSS para que puedan aplicarle a sus textos y darles mejor estilo.

Sombras CSS para texto

Este tipo de recursos me encantan, por eso nunca dudo en compartirlo con todos ustedes; sobre todo con los diseñadores que nos leen.

Sombras en CSS gratis

Lo bueno de estas sombras es que son completamente gratuitas y libres para usar en nuestros diseños.
En total son 41 diseños distintos, listos para ser descargados y usados en segundos.

En cada diseño podemos ver el nombre de la fuente usada, la paleta de colores y, obviamente, el código CSS para usarlo en nuestros diseños.

Al tener los códigos, luego podremos modificarlos a gusto. No es lo mismo empezar de cero, que ya tener una base a editar. Podemos cambiar los colores, el tamaño de la sombra, etc.

 

2 herramientas gratis para encontrar las mejores combinaciones de fuentes

Una de las tareas más complicadas de todo diseñador es encontrar combinaciones de fuentes. Esta combinación tiene que ser agradable a la vista, pero puede que elijamos fuentes totalmente distintas o similares. Eso va en el gusto de cada uno. Por eso, hoy les quiero recomendar dos herramientas gratuitas para encontrar combinaciones de fuentes perfectas.

Estas webs nos permiten encontrar combinaciones de manera visual. Esto es mucho más sencillo que tener que hacerlo “manualmente”. Nos ahorra mucho tiempo y convierte la tarea en algo divertido.

Mixfont

Por un lado tenemos Mixfont, que puede usarse de dos maneras:

  • Usar el generador de combinaciones: dándole al botón “generate”, nos mostrará, de manera aleatoria, las distintas combinaciones de fuentes posibles.
  • Ver las combinaciones más populares: esto nos ahorra más tiempo aún. Nos mostrará las combinaciones más votadas por las demás personas.

Mixfont

Dentro de las opciones que tenemos, se puede invertir la combinación; también tenemos un botón para cargar otra combinación; y hasta nos dan el código para embeber la fuente.

Si hacemos un poco de scroll, llegaremos a la sección donde tenemos vista previa de la fuente utilizada en distintos diseños. Realmente excelente.

Fontjoy

La segunda opción es Fontjoy, una herramienta similar, pero con algunas características que la diferencian de Mixfont.

En principio, nos permite hacer combinaciones de hasta 3 fuentes. Esto está bueno porque podemos, por ejemplo, elegir fuentes para título, subtítulo, y contenido del párrafo.

Fontjoy

Una de las características interesantes de Fontjoy, es que podemos definir el nivel de similitud de las fuentes. Si queremos que sean parecidas o que contrasten.

Otras cosas a resaltar es que podemos ver una lista de recomendaciones para las fuentes. También podemos bloquear alguna de las fuentes por si no queremos que se cambie al generar otra combinación.

Iconos web font de las distros de Linux más populares

Siguiendo con los posts de recursos de diseño, hoy les quiero dejar un set de iconos web font de las distros de Linux más populares. Estos íconos están buenos por si estamos armando algún sitio web en que tratamos temas sobre Linux; para desarrollo de aplicaciones o interfaces web.

Linux Font

Font Linux es completamente gratuito, y ahí mismo les explican su uso. Algunos de los iconos que tiene el pack son: Ubuntu, CentOS, Gentoo, Mandriva, Slackware, Fedora, Linux Mint, Manjaro, RedHat, Debian, OpenSUSE, y varios más.

También les puede interesar:

Pack de 900 increíbles iconos Material Design para descargar

Según Google, Material Design es lo que se viene. Por lo tanto, hay que estar preparados para comenzar a hacer diseños acorde a este estilo. Por esta razón, hoy les quiero dejar este increíble pack de iconos Material Design gratis y open source para que usen en el desarrollo de sus diseños web o apps.

Pack de íconos Material Design

Es un pack de más de 900 iconos, con lo cual van a encontrar para todo tipo de acciones y usos. Se pueden usar en diseño de interfaces web o para el desarrollo de aplicaciones.

Para más datos, son el pack de iconos que ofrece Google de manera gratuita para que los desarrolladores y diseñadores puedan hacer sus diseños Material.

Lo bueno es que podemos descargar todo el pack en un zip, o bien bajar solo los que nos interesen.
Para ubicar los iconos podemos usar el buscador para ingresar una palabra clave.

Cuando hagan click en alguno de los iconos, verán que abajo se despliega una barra de herramientas desde donde pueden elegir los dpi del ícono, el color, y hasta podemos descargarlo en SVG o PNG.

Lo mejor de todo, podemos usar los iconos como web fonts. Y ellos mismos nos dan el código para hacerlo.