Etiqueta: Diseño

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.

Logomakr: Crea logos online en minutos y sin saber nada de diseño

Cuando estamos iniciando un nuevo emprendimiento, ya sea online u offline, siempre aparece el tema de la creación del logo, algo que, para los que saben de diseño gráfico, es una tarea muy simple; pero el problema es cuando no tenemos el más mínimo talento o conocimiento de diseño.

Por suerte en internet hay herramientas gratuitas para todo, y Logomakr es una de ellas.

Esta genial aplicación web viene a salvarnos a la hora de crear logos de manera simple y rápida sin tener que instalar nada en el equipo. Es muy útil sobre todo para los que tenemos poca paciencia y queremos el resultado rápido.

Cómo crear un logo online y gratis con Logomakr

logomakr

Como pueden ver arriba, el resultado al usar Logomakr es excelente, y lo mejor de todo es que es tan simple de usar que, calculo, no les llevará más de 5 minutos crear el logo.

Obviamente la herramienta no hace magia, ustedes también tienen que poner un poquito de lo suyo. No se preocupen, solo les hablo de creatividad y buen gusto a la hora de elegir los componentes del logo.

Algo que es espectacular es que posee una gigantezca base de datos de gráficos o íconos de uso libre a la cual podemos acceder con solo hacer una búsqueda. Tenemos que navegar por la lista de gráficos hasta que encontramos uno que es de nuestro agrado y lo enviamos al escritorio de trabajo.

Allí tenemos la posibilidad de agregar el texto y elegir muchas tipografías distintas, cambiar colores y hacer todo tipo de modificaciones que nos gusten.

Por último solo queda descargar el logo en formato PNG y usarlo donde queramos.

Herramienta gratuita para diseñar banners online y sin conocimientos

Banner Maker

Los banners siempre están vigentes de hace años y supongo que lo seguirán estando por muchos años más, o hasta que alguien invente un sistema que nos inserte la publicidad directamente en el cerebro al mejor estilo notificaciones push (?).

El problema viene cuando tenemos que diseñar un banner y no tenemos ningún programa para ello o carecemos de los conocimientos de diseño necesarios. Para estos casos les quiero recomendar una aplicación web muy buena llamada Fotor Banner Maker, la cual nos permite diseñar banners online de manera sencilla y sin ningún tipo de conocimiento de edición de imágenes.

Su uso es tan simple como entrar al sitio, elegir el tamaño del banner que queremos crear y comenzar con la personalización. Allí podrán elegir una imagen de fondo, la cual podrán subirla desde facebook, desde su equipo o usar alguna imagen de la web. También se puede agregar texto en colores y formatos que queramos.

Enlace: Banner Maker

Visto en Soft&Apps

UICloud: Más de 1200 kits de interfaces gráficas gratis

En internet existen todo tipo de recursos gratuitos que hacen la tarea de los diseñadores y programadores mucho más simple, y un claro ejemplo de ello es UICloud, un buscador que nos permite buscar y descargar interfaces gráficas para usar en cualquier tipo de proyecto.

Hasta el momento de la publicación de este post, y como pueden ver en la captura de arriba, tienen disponibles más de 46 mil elementos gráficos y más de 1200 kits completos de interfaces gráficas.

UICloud

Sobre el funcionamiento no hay que decir mucho, es un simple buscador que, con solo ingresar una palabra clave, nos mostrará todos los resultados disponibles de manera muy visual y cómoda para el usuario.

Por ejemplo, si están buscando barras de progreso o botones de descarga pueden encontrar miles de alternativas y luego descargarlas gratis para sus proyectos.

UICloud

Visto en Nerdilandia

Curso gratuito de creación y retoque de imágenes con GIMP

gimp_logoNo todo es Photoshop en la vida, también existe su hermano open source llamado GIMP, y para este sector de usuarios les quiero dejar este genial curso de creación y retoque de imágenes con software libre (GIMP).

Se trata de un curso completamente gratuito que se hace online y consta de 9 módulos:

Modulo 1. Instalación y arranque
Módulo 2. Nueva imagen y herramientas
Módulo 3. Otras operaciones comunes
Módulo 4. Los textos y las capas
Módulo 5. Máscaras y selecciones
Módulo 6. Los colores
Módulo 7. Los filtros I
Módulo 8. Los filtros II
Módulo 9. Otros filtros y Script-Fu

Este curso comienza hoy 2 de septiembre y se completa en 9 semanas (27 horas de estudio).

A continuación les dejo el video de presentación del curso:

Para hacer este curso tienen que entrar en este sitio, registrarse y listo!

Script para exportar vectores de Photoshop a SVG con un click

Este recurso que les quiero dejar es la joyita del día para los diseñadores, se trata de un genial script que nos permite exportar vectores de Photoshop a SVG con un simple click, algo que nos ahorra muchísimo tiempo y nos permite tener un formato más flexible a la hora de usarlo en nuestros diseños.

plugin exportar vectores PS a SVG

Requerimientos:
Sistema operativo: Windows o OS X.
Photoshop CS5, CS6 o CC.
Adobe Illustrator

Este script es 100% gratuito y lo pueden descargar desde el siguiente enlace, sin embargo tendrán que poner su mail para suscribirse a un newsletter de diseño. Tienen dos opciones: Ponen un mail temporal, o sino se desuscriben luego.

Enlace: Export PS Layers to SVG script

Visto en Kabytes