Las fotos de stock son bastante aburridas, todos lo sabemos. Sin embargo, conseguir imágenes únicas suele ser caro y requiere mucho tiempo. En este artículo, te enseñamos trucos ingeniosos para diseñar imágenes personalizadas para tu sitio web o boletín informativo.
¿Alguna vez has estado diseñando una composición gráfica y has pensado: "Bueno, supongo que usaré la misma foto de stock de empresarios dándose la mano que usé la última vez"? Si eres un amante de la tipografía, quizás sea más bien: "Si tengo que usar Museo en un sitio web más... grrr". Jeje.
¡Estás en un bache creativo! Te has acostumbrado demasiado a tus recursos de stock. Necesitas algo nuevo.
Existen muchos recursos de calidad, pero saber cómo y dónde encontrarlos suele ser abrumador. Incluso cuando das con los buenos, te enfrentas a la triste realidad: otras empresas (a veces muchas otras empresas) están usando los mismos recursos en sus diseños.
Nada duele más que ver tu imagen principal en otro sitio web. Tus clientes opinan lo mismo.
En este artículo, voy a repasar tres proyectos de diseño comunes para los que normalmente dependes de imágenes de stock. El giro es que te mostraré cómo componer cada proyecto para que luzca original y bien pensado. Concretamente, veremos ilustraciones para publicaciones de blog y boletines, maquetas de productos (ideales para aumentar la conversión en páginas de destino) y gráficos con citas (perfectos para redes sociales).
¡Sin más preámbulos!
Proyecto n.º 1: Crea una ilustración personalizada
Escribir en un blog requiere tiempo y dedicación. Tu objetivo con cualquier publicación es que la mayor cantidad de gente posible la disfrute y la comparta.
Los artículos con imágenes obtienen un 94 % más de visitas que los que no las tienen. Esto se debe a que las imágenes tienen un impacto instantáneo. La imagen adecuada tiene el poder de atraer a alguien a una publicación antes de que haya leído una sola palabra. Añade imágenes a tus artículos, de lo contrario estarás desperdiciando casi el 50 % de tus visitas. Una locura, ¿verdad?
La mayoría de los blogueros pierden la oportunidad de captar mejor la atención de sus lectores al usar imágenes personalizadas. Es fácil entender por qué: las imágenes de stock se encuentran e integran en un minuto. Pero, con demasiada frecuencia, eso hace que tu contenido sea aburrido y olvidable.
Aquí tienes el truco: usa ilustraciones en lugar de fotos. Son personalizables, divertidas y únicas. Echa un vistazo a nuestra página de blog y a nuestra página de interacciones... ¿no te llaman la atención las ilustraciones?
Las imágenes que ves a continuación son personalizadas; están compuestas por varios recursos gráficos vectoriales que se han colocado unos junto a otros para formar un todo.
AppSumo (un boletín informativo con ofertas de diseño) es un ejemplo de un sitio de ofertas orientado a diseñadores que hace que este enfoque de las imágenes sea muy asequible para todas tus publicaciones y boletines. Ofrecen algunas ofertas increíbles, como la de Deposit Photos, que ofrece 100 imágenes, incluidas ilustraciones vectoriales, por 39 dólares. Nada mal. A 39 centavos cada una, tardarás bastante en agotar tu presupuesto para imágenes de stock.
Ahora, hablemos un poco más sobre el proceso real de crear estas imágenes.
Crear una ilustración personalizada para una publicación de blog
Aunque podrías simplemente elegir cualquier imagen de stock al azar y ponerla en una publicación, un pequeño ajuste reflexivo en recursos vectoriales prediseñados puede ayudarte a crear algo por lo que un ilustrador de agencia cobraría miles de dólares. Es una forma fantástica de mejorar la calidad percibida de tu marca.
Hay mucho que considerar al diseñar una ilustración como imagen destacada de un blog. ¿La ilustración coincide con el tema de tu publicación? ¿Los colores complementan tu marca? ¿El estilo de la ilustración encaja con tu diseño general?
Personaliza ilustraciones de stock con un conjunto de iconos. Mira un vídeo a cámara rápida de los cambios en el vídeo más abajo en esta página.
Vamos a repasar dos preocupaciones básicas que podrías tener al probar esto.
¿Los colores no combinan? Los paquetes de gráficos vectoriales prefabricados facilitan el intercambio de colores. No hace falta ser un ilustrador experimentado ni un usuario avanzado de Photoshop. Es literalmente tan fácil como buscar y reemplazar:
A veces, una ilustración es casi perfecta... pero no del todo. Sin embargo, cuando tomas un icono de un conjunto y lo combinas con una ilustración similar de otro, el mensaje visual da en el clavo. Así que mezcla y combina entre varios paquetes:
Tutorial: ¡Mira cómo una ilustración de stock y un conjunto de iconos se transforman en una ilustración personalizada para tu blog!
PASO A PASO
Abre Adobe Illustrator
Abre las ilustraciones vectoriales de stock (AI, EPS o SVG).
Usa las herramientas de selección y selección directa para elegir el color que quieres cambiar.
Usa Seleccionar > Mismo color de relleno para seleccionar todos los elementos que tengan el mismo color.
Elige una nueva muestra de color.
Continúa hasta que hayas cambiado todos los colores.
Copia y pega el icono con los nuevos colores en un documento de ilustración compuesto.
Cambia el tamaño y organiza los elementos de tu ilustración personalizada.
Exporta tu ilustración final como PNG o JPG para usarla en tu blog.
Proyecto n.º 2: Pon tu diseño en contexto con maquetas de productos
Has diseñado una tarjeta de visita preciosa para tu cliente. Te mueres de ganas por enseñársela. Pero espera, ¿cuál es la mejor forma de mostrársela realmente? ¿Importa? Pues sí.
Piénsalo... ¿Qué preferiría ver tu cliente: su tarjeta dentro de Adobe Illustrator sobre la pantalla blanca de un portátil, o su tarjeta sobre una superficie de madera junto a una pila de camisetas con la marca de su empresa?
Aquí es donde entran en juego las maquetas: ¿Por qué hacer que un cliente intente visualizar el diseño terminado cuando puedes mostrárselo? Es el mismo concepto que usar siempre prototipos en lugar de maquetas. ¡Este principio también es válido para la fotografía general de productos en tu sitio web!
Creative Market es un recurso fantástico para obtener fotos de maquetas de productos de alta calidad (y mucho más). Utilizan "objetos inteligentes" y "mapas de desplazamiento" no destructivos. Perdona si suena a tecnicismo. En resumen: significa que puedes añadir tu propia ilustración a la maqueta con solo un par de clics, manteniendo intacta cada arruga de la camiseta y cada reflejo en la pantalla del dispositivo. No son maquetas cutres, borrosas o con una iluminación extraña; son precisas, profesionales y realistas. Echa un vistazo a continuación:
Hay tres formas de conseguir maquetas en Creative Market:
Artículos gratuitos. Cada lunes, Creative Market publica seis descargas gratuitas. Sin letra pequeña.
Paquetes. Una vez al mes, Creative Market ofrece un paquete de recursos de diseño con un gran descuento. Puedes comprar el paquete de más de 90 productos por 39 dólares (lo que supone un descuento de aproximadamente el 97%).
Pago por descarga. Compras créditos y los aplicas a archivos individuales. Puedes gastar desde un par de dólares hasta unos 100 dólares, dependiendo de variables como la complejidad y el número de variaciones que contenga el kit que elijas.
A continuación, te mostramos otro genial vídeo a cámara rápida que hemos preparado para que te hagas una idea del proceso :)
Cómo hacerlo: Mírame crear una maqueta de producto realista
PASO A PASO
Abre Photoshop.
Abre tu archivo de maqueta.
Abre tu archivo de logotipo o diseño personalizado (ya sea en Photoshop o Illustrator).
Haz doble clic en el Objeto inteligente de diseño reemplazable en la paleta de capas de la maqueta.
Se abrirá un nuevo documento que contiene el diseño actual del Objeto inteligente. Elimina la imagen de marcador de posición.
Copia el diseño personalizado de tu cliente y pégalo en el documento vacío del Objeto inteligente.
Guarda y cierra el documento del objeto inteligente. Esto actualizará el Objeto inteligente en el archivo de maqueta original.
Es posible que algunas maquetas te pidan cargar un mapa de desplazamiento, especialmente en el caso de camisetas y otras maquetas con mucha textura. Esto hace que tu diseño siga los contornos del objeto que estás mapeando.
Exporta tu increíble maqueta, súbela a tu sitio de Webflow y prepárate para que tus clientes te digan lo genial que eres.
Proyecto n.º 3: Diseña una imagen con una cita para compartir
Cada contenido que produces tiene como objetivo ser visto. No lo olvides. Quieres que gente nueva lea tus publicaciones del blog, aprenda de tus infografías y se inspire con tus ideas para que se conviertan en nuevos clientes.
Aquí tienes algunos datos sobre el tema:
Los tuits con imágenes reciben un 18% más de clics, un 89% más de favoritos y un 150% más de retuits.
Las citas obtienen un 847% más de retuits que las preguntas.
Los usuarios que tuitean citas tienen un 43% más de seguidores.
Así que vamos a aprender a crear una imagen compartible que contenga una cita. Solo necesitas encontrar algunos recursos sencillos para empezar. A continuación, te presentamos dos sitios de alta calidad con tipografías bien diseñadas y asequibles, además de fotos de archivo modernas:
Design Cuts vende paquetes de recursos que incluyen de todo, desde un kit de éxito para freelancers hasta efectos de capa de purpurina para Photoshop, y sus paquetes de fuentes son especialmente buenos. ¿Qué diseñador puede resistirse a 21 fuentes por 29 dólares? Y son tipografías que hasta el más exigente con las fuentes adorará :)
Aunque puedes crear una imagen con una cita usando solo texto, a veces querrás una imagen que complemente tu frase: algo que cree ambiente y refuerce tu mensaje sin eclipsarlo. Para fotos modernas, gratuitas y de pago, echa un vistazo a Death to the Stock Photo.
Death to the Stock Photo nació cuando sus fundadores notaron una tendencia entre sus amigos diseñadores: todos «tenían dificultades para encontrar imágenes que encajaran con su estilo y su gente». Así que empezaron a enviar correos electrónicos ocasionales con sus bibliotecas de imágenes a sus amigos, y a partir de ahí todo despegó. Hoy en día, hay dos formas de acceder al estilo único de fotos de archivo de Allie y David:
Regístrate para recibir paquetes gratuitos por correo electrónico
Suscríbete para recibir paquetes gratuitos por correo electrónico: Si te registras en el servicio gratuito, recibirás un nuevo paquete de doce fotos de archivo temáticas una vez al mes, y nunca sabes qué tema te va a tocar. Es una forma estupenda de crear una biblioteca de imágenes gratuita y diversa, pero hay que reconocer que no es lo ideal si necesitas una imagen ahora mismo. Si ese es tu caso, la opción de suscripción podría ser mejor. Por 15 dólares al mes, obtienes acceso a toda la biblioteca de Death to Stock (además de un paquete extra).
Extra: Una biblioteca en constante expansión de imágenes gratuitas de Unsplash
Unsplash es un recurso fantástico para obtener imágenes de alta resolución libres de derechos, aportadas tanto por fotógrafos aficionados como profesionales. Añaden diez imágenes nuevas cada diez días y ya tienen un par de cientos para explorar. Échales un vistazo. No te costará nada. Sin embargo, ten en cuenta lo siguiente: como Unsplash no tiene muchas imágenes en comparación con otros sitios de fotos de archivo, y dado que cada vez es más popular, sus imágenes están empezando a aparecer por toda la web. Así que intenta no depender siempre de Unsplash como tu fuente principal de fotos.
Ahora, el siguiente paso es dar vida a una cita que te encante usando tus nuevas fuentes y fotos. Esa es la parte divertida. (Y eso es decir mucho, porque comprar fuentes es básicamente una de las mejores cosas del mundo).
Tutorial: Cómo crear la imagen con la cita
PASO A PASO
Crea un nuevo documento de Photoshop de 1280x720.
Copia y pega una imagen gratuita de Death to the Stock Photo en una capa nueva. Cambia el tamaño o recórtala para darle más impacto.
Elige como máximo tres tipografías complementarias; cualquier cosa más resultará demasiado cargada. En este ejemplo, una letra cursiva fluida contrasta muy bien con una tipografía rugosa dibujada a mano que contiene familias tanto sans como serif.
Prueba diferentes adornos y alternativas. Juega con la escala. Crea distintas disposiciones. Ajusta el interletraje porque te importa el resultado.
Si no hay suficiente contraste entre la imagen de fondo y la cita, hazla más legible añadiendo una capa de degradado. Prueba con un degradado de blanco a transparente o de oscuro a transparente; incluso puedes probar a cambiar el modo de fusión a «superponer» para conseguir un efecto supersaturado interesante
Sal de tu rutina de recursos de archivo
Encuentra nuevas fuentes de inspiración
¿Para qué usar las mismas fuentes de Google de siempre si Webflow hace que usar fuentes personalizadas sea pan comido? Echa un vistazo a Google Type Gallery para encontrar inspiración tipográfica única. No te conformes con una imagen genérica y una tipografía del montón cuando puedes convertirla en algo especial en solo unos minutos.
¡Lo mismo se aplica al resto de tus diseños! Conéctate a sitios como Designspiration y Abduzeedo para dejarte llevar por imágenes que se salen de lo habitual.
¿Dónde encuentras recursos de stock?
Me encantaría saber cuáles son tus mejores recursos de stock económicos y qué has creado con ellos. ¡Cuéntanoslo en la sección de comentarios!
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
