4 aplicaciones web para crear banners bonitos en cinco minutos

Cada vez es más necesario apostar por la imagen, no solo por el contenido, en las redes sociales. Una sencilla frase puede tener un éxito tremendo en Facebook si se pone con un tipo de fuente agradable, un fondo relajante y un tamaño adecuado, la misma frase puede ser extremadamente ignorada en modo texto.

Dentro del mundo móvil hay grandes protagonistas en este sector, desde el conocido Moldiv al fantástico Fuzel Collage, y en la web también hay una serie de alternativas que vale la pena conocer.

Os dejamos aquí­ con cuatro de ellas:

Canva.com: El rey en su categorí­a. Con cientos de plantillas y elementos que podemos arrastrar y soltar, incluye la posibilidad de adaptar el tamaño de cada banner en función del uso que le daremos: encabezado en Twitter, post en Facebook, cuadrado en Instagram (sí­, aunque ya no sea necesario), etc. Canva.com ha conseguido liderar este segmento en muy poco tiempo, ofreciendo incluso planes para empresas. Su modelo de negocio se basa en la venta de imágenes por 1 dólar cada una, fotos que podemos usar en la creación de nuestro banner.

Pablo, de buffer: Mucho más sencilla, pero también más fácil de usar. Se trata de una aplicación creada por Buffer para que podamos en poco tiempo crear y divulgar un banner con un fondo y un texto. Recientemente lanzaron la versión 2.0 para permitir más flexibilidad en el resultado.

Fotor: La conocida aplicación de edición de fotos tiene una app de creación de banners que, aunque es menos limpia y más limitada que canva, puede ayudar a crear un banner en segundos. No tienen muchas plantillas, eso es cierto.

crear banners

html5maker: Para crear banners animados en HTML5. Es más compleja que las opciones anteriores, pero ayuda si necesitamos que haya animación en nuestra creación.

Microsoft propone un nuevo sistema interactivo para la animación de dibujos a mano

El diseñador traza unas lí­neas para dar forma a su dibujo, y el software sugiere en tiempo real sus próximos movimientos. Es flexible y va ajustando sus sugerencias con cada nueva lí­nea que señala la dirección que desea dar el diseñador.

A medida que el dibujo se vuelve más complejo, las sugerencias son más precisas y completas, pasando de completar un boceto a unir puntos de referencias, clonar el color, entre otras.

Toda esta dinámica de trabajo gracias a Autocomplete hand drawn animations, una nueva tecnologí­a que ha sido presentada en el marco de SIGGRAPH Asia, como  resultado del trabajo de Microsoft Research, en colaboración con la Universidad de Tokyo y la Universidad de Hong Kong.

Aquí­ un ejemplo de la dinámica de trabajo que propone:
Continúa leyendo «Microsoft propone un nuevo sistema interactivo para la animación de dibujos a mano»

giphy presenta un sencillo creador de animaciones

captura-111

En enero vimos como el gigante imgur lanzó una herramienta diseñada para pasar de ví­deos de youtube a gif de forma sencilla, herramienta que os comentamos en este artí­culo, ahora es giphy quien quiere competir en esta categorí­a, y lo hace con giphy.com/create/gifmaker.

Se trata de una aplicación web en la que solamente tenemos que indicar la url del ví­deo del cual queremos obtener la animación y las variables relacionadas con la duración de la animación resultante, siendo posible subirlo a su plataforma para obtener el código necesario para incrustarlo en cualquier página web. Podemos también incluir un texto en el gif final, obteniendo un resultado semejante al que veis aquí­:
Continúa leyendo «giphy presenta un sencillo creador de animaciones»

Blend, la forma más sencilla de hacer degradados CSS

Es cierto que los degradados hace algunos años que dejaron de estar de moda. Los diseños actualmente son más planos, más ligeros y minimalistas, pero eso no significa que muchos de nuestros clientes no quieran saber de modas y prefieran apostar por los clásicos cambios sutiles de color en los fondos y componentes de sus sitios web.

Existen muchas aplicaciones que ayudan a diseñar degradados en CSS, pero la que os presentamos hoy es seguramente la más sencilla e intuitiva de todas: Blend.

Solo tenemos que elegir el color inicial y el final y pulsar en el botón central. Una vez mostrado el degradado, moveremos el eje hacia un lado u otro para aumentar la cantidad de uno u otro color, siendo posible en todo momento obtener el código CSS desde la misma pantalla.

captura-20

Creado por el diseñador Colin Keany, de DigitalOcean, no requiere registro ni identificación de ningún tipo. Tampoco tiene publicidad ni enlaces hacia otras páginas, aunque sí­ pueden encontrarse los clásicos botones para compartir el proyecto en las redes sociales.

Pablo 2.0, nueva versión de la herramienta de creación de banners de buffer

Mucho más sencilla que canva.com, pero también más sencilla de usa, y mucho más intuitiva, Pablo se presentó hace algunos meses como una buena forma de crear un banner en pocos minutos.

La herramienta, creada por Buffer.com, sufre ahora una excelente actualización que permite definir los tamaños adecuados para cada tipo de red social, por lo que tenemos al alcance de un click la posibilidad de personalizar el resultado para no preocuparnos con el ancho y largo de cada trabajo.

Disponible en buffer.com/pablo, podemos añadir un texto principal, un texto secundario y un logo, así­ como una imagen que sirva como fondo del banner. En el menú lateral es posible definir los tamaños, y dentro del mismo banner editaremos los textos.

captura-73

En la parte superior tenemos tres opciones para añadir efectos al fondo: dejarlo con más contraste, difuminarlo o ponerlo en blanco y negro, decisiones que se tomarán dependiendo del tono de la imagen y del color del texto que hay por encima de ella.

Anque ya hay algunas fotografí­as que podemos usar como fondos, es posible subir la nuestra, por lo que la personalización puede ser bastante flexible.

Lo dicho, no es canva.com, pero para un banner rápido, es perfecto.

Facebook presenta una web dedicada al diseño

captura-79

Si os gusta el diseño que Facebook usa en sus aplicaciones y os gustarí­a obtener recursos en ese sentido, echad un vistazo en facebook.github.io/design.

Se trata de una nueva página que Facebook ha creado para compartir material de diseño gráfico, desde artí­culos con las mejores prácticas hasta archivos que podemos usar para crear nuestros propios trabajos.

Es posible encontrar, por ejemplo, archivos de photoshop con manos que sujetan un móvil en blanco, ideal para rellenarlo con nuestro diseño antes de presentarlo al mundo, así­ como enlaces a la página de Facebook en Medium, donde tienen artí­culos útiles para profesionales de este área.

Aunque no es una colección muy amplia, es un primer movimiento que vale la pena seguir de cerca. El diseño de Facebook puede gustar más o menos, pero algo es indiscutible: atrae a miles de millones de personas cada dí­a, por lo que «algo» tendrá. Aún así­, los recursos ya publicados no solamente hacen referencia a las guí­as de estilo del propio Facebook, también ayudan a encontrar material para aplicaciones móviles en general, por lo que paree que la variedad será una buena protagonista de esta nueva sección.

Canva, la herramienta para hacer banners, recibe 15 millones de dólares de inversión

captura-200

Seguramente muchos de vosotros usáis canva.com para crear banners de todo tipo, desde mensajes para las redes sociales a obras de arte para poner en los perfiles. Lo que es posible que no sepáis es que la empresa ya está valorada en 165 millones de dólares, un número ampliado hoy después de los 15 millones que han recibido de inversión.

El modelo de negocio se basa tanto en el lanzamiento de la versión «para el trabajo» de Canva, que permite la colaboración de varias personas en los mismos banners, como en la adquisición de licencias de imágenes de su banco particular a un dólar la unidad.
Continúa leyendo «Canva, la herramienta para hacer banners, recibe 15 millones de dólares de inversión»

Stylizer, para crear CSS de forma mucho más intuitiva

Las hojas de estilo en una web son las responsables por todo su diseño: los colores, los espacios, el tipo de letra, la estructura… a menudo solo tenemos que cambiar de CSS para tener una web completamente renovada, aunque es necesario tener bastantes conocimientos para poder realizar los cambios deseados en poco tiempo.

Lo que ofrece Stylizer es una herramienta que ayuda a realizar cambios en el archivo CSS de forma visual, con un editor que puede abrir cualquier web local para realizar el trabajo.

captura-100

La aplicación permite que se vean los cambios de forma inmediata a medida que realizamos alteraciones en el diseño, evitando el F5; ofrece recursos para hacer de forma automática tareas repetitivas; permite el cambio de navegador de Internet para verificar que todos son capaces de mostrar el resultado que estamos deseando; ofrece barras de desplazamiento para cambiar el valor de las variables, evitando así­ la introducción manual de números en caso de que no lo queramos; tiene una herramienta para incluir los colores en una paleta con un simple click; dispone de sistema de detección de errores en la sintaxis…

Aunque es posible bajar una demostración, y ver un ví­deo con un ejemplo de uso, la aplicación, disponible para Windows y Mac, no es gratuita. La licencia cuesta 79 dólares para la versión 6, que fue lanzada recientemente.

medialoot – miles de fuentes, iconos, gráficos, plantillas, interfaces y más

captura-37

Si estáis buscando recursos que ayuden a ampliar la variedad de vuestros trabajos en diseño, echad un vistazo en medialoot.com.

Se trata de una colección de componentes de todo tipo con el diseño como protagonista, fuentes, iconos, gráficos, plantillas, interfaces y otros elementos que podemos incluir en nuestras aplicaciones, temas y demás trabajos para darle un estilo más profesional en menos tiempo.

El proyecto fue creado por Mason Hipp y Jon Phillips, diseñadores que decidieron comenzar a realizar la recopilación de contenido para evitar siempre el mismo tipo de iconos y botones que se suelen comprar en las tiendas de este tipo. Lo que hacen es ofrecer «cajas» enteras de componentes, con recursos que combinan entre ellos para ayudar a tomar la decisión final.
Continúa leyendo «medialoot – miles de fuentes, iconos, gráficos, plantillas, interfaces y más»

Dos prácticas formas de encontrar la tipografí­a adecuada

Encontrar el tipo de letra para nuestro próximo proyecto es una de las tareas más complejas. Son muchas las opciones y muy variados los efectos que produce una tipografí­a u otra, motivo por el cual es importante tener presentes algunas herramientas que ayuden a ver el resultado con varias alternativas de forma rápida y efectiva.

Os dejamos aquí­ dos aplicaciones con ese objetivo, herramientas en las que es muy sencillo cambiar de tipografí­a para ver el efecto que tiene en la web.

wordmark.it

captura-7

Solo teneos que indicar la palabra que queremos ver de ejemplo y pulsar el botón, con algunas opciones en el menú superior que ayudan a cambiar el tamaño, el fondo y poco más.

Son decenas de fuentes que pueden ampliarse siempre en la parte inferior, con una opción de registro para que sea posible guardar las selecciones que realicemos.

fontfling.com

captura-8

No se ven todas las opciones de una sola vez, como en el caso anterior, pero con el menú lateral es posible personalizar el aspecto para cada una de las muchas opciones existentes. Cuentan con cientos de tipos de letra obtenidos de FontSquirrel, y en caso de gustarnos alguna de ellas, podemos bajarla desde el mismo portal.

Como veis, cada vez es más sencillo tomar este tipo de decisiones.