Blog de diseño
¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…
Un sprite es el resultado de juntar varios fotogramas para crear una animación. En este ejemplo lo que hacemos es crear la animación con una única imagen. He cogido una imagen de 400x400 px y la he dividido en 4 columnas y 4 filas de 100x100 px. En cada una de las...
Introducción al dibujo con SVG
Los SVG (del inglés Scalable Vector Graphics), son formatos gráficos vectoriales muy útiles por su flexibilidad y la capacidad de mostrar imágenes en web, sin perder calidad al cambiar de resolución. Los SVG se definen en formato XML. Esto nos permite, además de...
UI – Guía de tamaños de fuente
Cuando hablamos de diseñar para web o app, una de las preguntas que me suelen hacer es ¿cuál es el tamaño correcto que debo usar?. La proliferación de pantallas HD lleva tiempo dándonos dolor de cabeza a los diseñadores. Lo que en un principio sólo era un simple...
Densidad de pixel, tamaño de diseños para HTML, Android e iOS
A la hora de diseñar para múltiples dispositivos, tanto en dispositivos iOS como Android, corremos el peligro de no tener en cuenta las a veces enormes diferencias entre estos y que lo que en un dispositivo se ve bien, en otro aparezca muy pequeño o muy grande. En...
Recorta tus fotos en unos segundos GRATIS
Nada más tedioso que ponerse a trazar una imagen para recortarla ¿verdad?, y ya si se trata de pelo, el trabajo se multiplica exponencialmente. Bien, existe una página en la que sueltas tu imagen y te la recorta de una manera muy aceptable, te aconsejo que la pruebes,...
APNG, crear PNG animados
Seguramente más de una vez habrás tenido que crear un gif animado transparente. El resultado es muchas veces desastroso, porque los bordes suelen pixelarse incluso a máxima resolución. Existe desde hace tiempo una solución, aunque todavía no está muy implantada por...
Crear GIFs animado a partir de vídeo
Incluir animaciones en nuestros diseños online se ha convertido en una práctica habitual, tanto para web como para apps. Los GIFs animados se han convertido en un medio de expresión habitual en redes sociales como Facebook, Instagram o Whatsapp. Existen muchas formas...
DUGAS, la fuente ideal para diseñar tus carteles
Dugas es una fuente ultra condensada y minimalista ideal para el diseño de carteles, títulos y titulares. Aquí os dejo unos ejemplos en los que podéis ver la fuerza que tiene. Puede ocurrir que si utilizamos tamaños pequeños de fuente o poco contraste con el fondo,...
¿Buscas un sitio donde inspirarte y con buenos recursos gráficos?
Me gusta tener un listado de sitios a los que recurrir cuando tengo necesidad de encontrar algo distinto. Unas veces se trata de inspiración, otras alguna fuente que me sorprenda, ¿sabes de lo que te hablo verdad? 😉 Frebie es uno de los últimos que he añadido a mis...
20 Acciones Photoshop Gratis, para fotografía en blanco y negro.
Si te gusta la fotografía en blanco y negro, o si quieres conseguir fabulosos resultados para tus fotografías en instagram, estas acciones de photoshop te permitirán conseguir resultados muy buenos y profesionales. 20 ajustes preestablecidos que incluyen acciones que...
12 ebooks gratuitos sobre publicidad y creatividad
Con motivo del día del libro, lacriaturacreativa.com ha hecho una recopilación de libros muy interesantes que puedes descargar gratuitamente 12 libros sobre publicidad y creatividad. Contenidos relacionados con el packaging, comunicación de marcas, lettering,...
Espectaculares efectos interactivos con el Scroll de una página. Descárgalos !!!
Las animaciones a través del movimiento del scroll de una página, son en mi opinión, una de las herramientas que mejor nos permiten llamar la atención del usuario. Utilizando estos efectos, podemos hacer todo tipo de animaciones, desde las más complejas, hasta...
Recursos Gratis para diseñadores. Iconos
El uso de iconos en el diseño digital es constante. Existen muchas páginas en las que puedes descargar paquetes enteros de familias, estas páginas que os comparto, son las que suelo utilizar normalmente, me gustan porque vienen con un buscador, de forma que puedes...
Fuente Facunda, retro-vintage. Descarga Gratis.
Facunda es una fuente gratuita creada por bybu. Se trata de una fuente condensada ideal para titulares modernos con un aspecto retro-vintage. Cuenta con 5 estilos diferentes y es de uso público. En principio os puede parecer que no hay diferencia en el estilo...
Tipografía digital. Guía rápida y descargas gratis.
La tipografía siempre ha ocupado un lugar preferente en el diseño gráfico. Además de ser básica para destacar el mensaje que queremos comunicar, también nos sirve para establecer una jerarquía dentro de ese mensaje. Esta guía pretende dar indicaciones básicas para...
La importancia del rendimiento en una web o webApp
Cada vez son mayores las exigencias de las páginas web que diseñamos. Imágenes más grandes y pesadas o efectos que hacen más atractiva la experiencia usuario, hacen que sea indispensable comprobar si esa experiencia que estamos buscando no nos devuelva justo lo...
Densidad de píxeles. Diseñando para móviles.
Una de las especificaciones técnicas que tenemos en cuanta al analizar un teléfono es la densidad de píxeles de su pantalla. La densidad de píxeles es una unidad que se mide en píxeles por pulgada ppp o ppi en inglés (pixels per inch), nos indica la calidad de una...
Guía tipográfica para el diseño web móvil
El año 2017 fue denominado por Google como“El año de los móviles” en base a su informe anual Consumer Barometer 2017. Por primera vez en la historia, el uso de Internet en dispositivos móviles registraba un porcentaje superior al 50 % en los 63 países incluidos en el...
TYPESTRAP. Controla el tamaño de tus fuentes.
Typestrap es un kit de tipo basado en CSS que utiliza una escala modular para ayudarnos a controlar la tipografía en las distintas resoluciones de pantalla, desktop, mobile,... Está construido en Bootstrap 4. Y nos podemos descargar todos los archivos, html, CSS,......
Google te ayuda con el color en tus diseños para Apps
El color es un elemento indispensable a la hora de diseñar una App, una web, publicidad... Puede determinar de modo determinante la usabilidad de tu aplicación o sitio web. El color ayuda a hacer visible la jerarquía, la navegación o arquitectura de un diseño, hace...
Cuenta regresiva con CSS y Javascript
Vistosa cuenta regresiva que simula los antiguos paneles que podíamos ver en los aeropuertos. Podéis ver y descargar el código CSS y JS en CodePen. VER DEMO Y DESCARGAR