Etiqueta: Diseño

Herramienta online para generar mockups 3D gratis

Los mockups son una de las mejores formas de presentar nuestros productos, ya sean aplicaciones, sitios web, libros digitales, o lo que se les ocurra. Hace unos días les comentaba de una genial herramienta para crear mockups fácilmente y con el diseño de muchos dispositivos, como laptops, móviles, etc.

Hoy les tengo una alternativa excelente que les permitirá crear mockups 3D, lo cual le da un estilo más sofisticado ya que podremos mostrar nuestro producto en un móvil con efecto 3D muy hermoso.

Threed_io

Es una herramienta muy fácil de usar ya que nos da casi todo digerido. Solo tenemos que elegir la imagen que queremos montar en el mockup y comenzar a ajustar las configuraciones a gusto.

Allí se puede elegir el diseño del fondo, ya sea con líneas o liso con el color que queramos. También podemos elegir el ángulo del dispositivo, si queremos que tenga reflejo o sombra, etc.

Threed.io es completamente gratuito, así que no esperen más y comiencen a crear sus mockups 3D en segundos.

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í.

Más de 100.000 plantillas editables para social media en Hootsuite

PromoRepublic es un servicio muy conocido que ofrece plantillas de imágenes para social media. Podemos crear todo tipo de imágenes para nuestros posts en redes sociales de manera simple hasta cuando no tenemos ideas de contenidos. La buena noticia es que han lanzado una app para Hootsuite, con la cual integramos el editor gráfico de PromoRepublic en Hootsuite.

promorepublic hootsuite

Esta es una noticia genial para todas las personas que se dediquen al social media, ya que tienen acceso a más de 100.000 modelos de plantillas editables para usar en sus posts.

Lo primero que tienen que hacer para poder acceder a este editor de gráfico en Hootsuite, es entrar en este link donde pueden instalar la app para que se conecte en nuestro panel.

Una vez instalada, tenemos que ingresar nuestro nombre y mail para que nos envíen un mail de confirmación. Entramos a nuestra bandeja de mail, confirmamos el link, y listo.

Ahora, lo que nos queda es entrar en el editor de imágenes desde la sección “Fuentes de contenido”, y clickeando en PromoRepublic. Allí pueden elegir cualquiera de las plantillas y editarlas a gusto.

Si bien, dentro de esas plantillas hay contenido premium, hay miles que pueden usarse gratuitamente. Y, si se dedican a esto profesionalmente, tendría que plantearse comprar el servicio ya que es muy barato y tiene contenido de muy buena calidad.

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.

Cómo crear firmas HTML fácil, rápido y gratis con Si.gnatu.re

Cuando uno trabaja de internet tiene que cuidar la imagen y los detalles, ya sea si trabajamos de forma independiente o para alguna empresa, nunca hay que dejar pasar ciertas cosas. Una de ellas es tener una buena firma para el correo electrónico, una en la cual estén todos nuestros datos de contacto e información personal para que los clientes puedan contactarnos sin problemas.
Por eso hoy quiero recomendarles un excelente servicio online para crear firmas HTML para insertar en cualquier cliente de correo o servicio de mail online.

HTML_Email_Signature_Generator

El servicio que quiero comentarles se llama Si.gnatu.re, y el punto principal que me gustaría destacar es su simplicidad de uso. Tiene una interfaz muy intuitiva que nos permite agregar todo tipo de datos que conformarán nuestra firma sin tener ningún conocimiento de diseño o maquetación.
Está todo organizado mediante pestañas en las cuales vamos ingresando los datos personales:

General: En esta pestaña podemos introducir todos los datos más personales como nombres, cargo, mail, teléfono, sitio web, nombre de la compañía, dirección, etc.
Social: Este es el lugar para agregar nuestros perfiles sociales, no se preocupen que hay de muchas redes.
Images: Aquí podemos poner un logo o un banner con su respectivo enlace.
Styles: Tenemos la opción de elegir entre varios diseños de templates, cambiar el tamaño de letra, su color, darle bordes redondeados a los logos, etc.
Bespoke: Aquí se puede agregar cualquier tipo de texto adicional que creamos necesario.

Una vez que hayan introducido todos los datos que crean necesarios pueden generar el código HTML que tendrán que pegar en su cliente de correo. El código lo pueden descargar en un archivo o copiarlo y pegarlo directamente. Además les generará un enlace único para acceder más adelante a la firma y obtener el código.

Me imagino que ya se estarán preguntando por el costo de este servicio, pero les tengo muy buenas noticias, es completamente gratis salvo por un detalle: La firma puede editarse durante 30 días, pasado este tiempo no podrán hacer ninguna edición, salvo que paguen 5 dólares.
Obviamente esto no es ningún impedimento, la firma seguirá funcionando perfectamente sin tener que pagar un centavo. Tómense el trabajo de hacerla bien a la primera y listo, para qué editar.