¿Vendes productos digitales? Entonces necesitas tener fantásticas imágenes de productos digitales.
🌇 ¿Por qué? Porque las imágenes bien hechas:
- Causan una buena primera impresión,
- Aumentan el atractivo de tus productos,
- Generan confianza y, por lo tanto,
- ¡Aumentan las ventas!
En este artículo te mostraremos cómo crear excelentes imágenes de productos digitales. Te daremos consejos probados y proporcionaremos plantillas gratuitas para que empieces.
¡Vamos a crear algo genial! Salta a la sección que necesites:
- ¿Qué son las imágenes de productos digitales?
- ¿Por qué son importantes las imágenes de productos digitales?
- Consejos para crear buenas imágenes de productos
- Cómo subir imágenes y vender en línea
- Plantillas gratuitas para impulsar tu trabajo
¿Qué son las imágenes de productos digitales?
A riesgo de sonar obvio, las imágenes de productos digitales son imágenes que demuestran qué es tu producto y cómo se utiliza.
Aparecen en las páginas de tus productos en tu sitio web, o en las páginas de listado de los mercados. Son las imágenes que deben acompañar a los títulos y descripciones de tus productos. Son importantes. ¿Alguna vez has comprado algo en Amazon sin examinar detenidamente las imágenes del producto? Yo no.
¿Qué hace que las imágenes de productos digitales sean complicadas?
Una cosa que hace que las imágenes de productos digitales sean complicadas es que tu producto es digital. 😼 Quizás 'virtual' sea una buena palabra. ¿No físico? Sé que suena raro.
🔑 Puede ser difícil visualizar o demostrar cómo se ve un producto digital.
Es muy obvio cómo crear una imagen de producto para un producto físico como una camiseta. Haces fotografía de producto de la camiseta o creas una maqueta de producto digital si es impresión bajo demanda.
Por otro lado, ¿cómo creas una imagen de producto digital para algunos productos digitales que no tienen exactamente un componente físico? Algunos ejemplos:
- Una fórmula de hoja de cálculo
- Un documento PDF o eBook
- Un plugin, tema o pieza de software de WordPress que se compone de archivos en un ordenador
- Una plantilla de documento de RR. HH.
- Un informe detallado de datos (cuando la recopilación de datos es parte del producto, por lo tanto, aún no está lista)
Claro, puedes hacer una captura de pantalla de tu producto en acción. Pero las capturas de pantalla a menudo no se ven muy interesantes, y tampoco se reducen bien a imágenes pequeñas 'en miniatura'.
Hablaremos de algunos consejos para superar estos desafíos a continuación.
¿Por qué son importantes las imágenes de productos digitales?
Los humanos somos muy visuales. Especialmente cuando compramos. Nunca, o rara vez, compramos algo que no podemos ver. O al menos que no podemos visualizar en nuestra mente.
Por lo tanto, tu tienda online, que vende productos digitales (también conocidos como descargas digitales, productos descargables o productos virtuales), debe estar llena de imágenes que ayuden a los clientes potenciales a visualizar lo que están comprando.
Estas imágenes deben ser lo más atractivas y apetecibles posible. La tienda de productos digitales (sitio web) con las imágenes más atractivas probablemente ganará (obtendrá más ventas).
Redes Sociales
Las imágenes de productos digitales también son importantes para las redes sociales. Compartir tus productos en Facebook, Instagram, LinkedIn, Twitter, TikTok y otras plataformas suele ser una excelente manera de correr la voz.
Pero estos son lugares concurridos y ruidosos. Las imágenes atractivas son esenciales si quieres destacar.
Consejos para crear buenas imágenes de productos
Puedes pasar mucho tiempo pensando y dándole vueltas a las imágenes de tus productos digitales. Nuestros consejos son útiles para cualquiera, pero especialmente útiles si eres un propietario de una pequeña empresa ocupado y necesitas resultados de bricolaje RÁPIDAMENTE.
Ten en cuenta también que la fotografía y el diseño gráfico necesarios para crear buenas imágenes de productos solían requerir profesionales dedicados (y a menudo es una buena idea contratarlos). Sin embargo, ahora, es posible obtener imágenes de alta calidad por tu cuenta con herramientas de diseño basadas en Internet. Eso es lo que te mostraremos aquí hoy.
Este artículo no es un tutorial detallado paso a paso para herramientas de diseño profesionales como Adobe Photoshop e Illustrator o Affinity Photo y Designer. ¡Sin embargo, también tenemos algunas plantillas para usar en esos programas a continuación!
Aquí están nuestros cuatro grandes consejos para crear imágenes de productos de alta calidad:
- Haz que llamen la atención
- Crea imágenes de alta calidad
- Formatea las imágenes para que sean versátiles
- Optimiza las imágenes para la web
Haz que llamen la atención
Quieres que tus imágenes destaquen y se vean bien. Aquí tienes algunas formas probadas y sencillas de conseguirlo.
Colores
Los colores hacen que las imágenes resalten en la página. Atraen la atención. Los colores pueden deleitar al espectador. Cuando se usan con repetición y consistencia, construyen una marca coherente que genera confianza y ayuda a tus clientes (y clientes potenciales) a reconocerte.
No uses blanco y negro o todo gris, a menos que tengas una razón para hacerlo. No a menos que tengas un aspecto y una sensación específicos que estés buscando.
Los colores pueden comunicar muchas cosas. Por ejemplo, con esta captura de pantalla de una plantilla de hoja de cálculo, decidí usar un verde similar al que usan tanto Google Sheets como Microsoft Excel en su marca. (Nota: ¡No es una coincidencia que Google siguiera a Excel al usar el verde en su marca para las hojas de cálculo, y el azul para Docs como Microsoft Word!)
Contraste
El contraste es la diferencia entre los elementos de tu diseño o foto de producto. La diferencia entre las áreas claras y oscuras. O las diferencias de color.
Al igual que el color, el contraste atrae la atención y hace que una imagen sea atractiva, incluso encantadora. Usar colores que contrasten entre sí (contraste) te ayuda a comunicar un estado de ánimo o una vibra.
Asegúrate también de que el color de fondo y el color de la fuente tengan suficiente contraste para facilitar la lectura. Ten en cuenta a las personas con discapacidades visuales como el daltonismo. El Verificador de Contraste de Color AIM ayuda con eso. Te permite probar colores con una interfaz de arrastrar para encontrar qué valores de color tienen suficiente contraste.
- Obtén ideas para combinaciones de colores en Adobe Color
- Asegúrate de que tus colores tengan suficiente contraste para ser visibles para personas con discapacidades visuales en el Verificador de Contraste de Color AIM
Fuentes
Usar diferentes fuentes en un diseño puede añadir atractivo y emoción. Si solo usas Arial o Times New Roman en tu diseño, las cosas se verán aburridas y poco profesionales.
Algunas fuentes están hechas para el cuerpo del texto. Estas fuentes son limpias y fáciles de leer. Eso es bueno cuando lees mucho texto. El cuerpo del texto es donde usas fuentes 'menos emocionantes' como Arial.
Otras fuentes son para titulares y subtítulos. Estas fuentes pueden ser divertidas. Atraen la atención hacia sí mismas. Algunas fuentes comunican un estilo o una época. Son buenas para banners de redes sociales o titulares, porque destacan. Pero no querrás leer cinco párrafos largos de una fuente de titular.
El truco está en combinar diferentes fuentes en un diseño. La tipografía es una disciplina académica completa. Puede llevar años aprender y utilizar las sutiles diferencias en los tipos de letra.
Por hoy, aquí tienes dos maneras de conseguir buenas combinaciones de fuentes.
- Search font sites – You can try out different fonts at sites like https://fonts.google.com/ or https://fonts.adobe.com/fonts.
- Esto puede llevar mucho tiempo, y
- Debes tener en cuenta que tienes que pagar por muchas fuentes
- Use templates – You can learn as you go, and get quick results with templates. There are tons of free templates available with online design tools like Canva, VistaCreate, and Adobe Creative Cloud Express (CCE).
Recomendamos empezar con plantillas para ver buenas combinaciones de fuentes en acción. Mira toda la diversión tipográfica que puedes descubrir en Canva (arriba). Prueba cosas. Aprende sobre la marcha.
💙 ¿Te encantan las fuentes? ¡Deberías crear y vender las tuyas! Aprende cómo y mira qué cosas geniales están haciendo otros clientes de EDD con las fuentes.
Utiliza una buena composición y maquetación
Se podría argumentar que entender y usarlos requiere un título universitario y años de experiencia. Eso puede ser cierto en algunos aspectos. Pero eso no significa que no puedas empezar usando estos consejos de composición probados.
Regla de los tercios
La regla de los tercios es una guía utilizada desde hace mucho tiempo para crear imágenes impactantes. Divides una imagen en 9 cuadrados. Colocas los elementos importantes de tu foto o diseño a lo largo de estas líneas, cerca de ellas, o donde se cruzan dos líneas.
Por ejemplo, esta imagen de producto de plantilla de documento es más atractiva porque el documento está descentrado.
Los ángulos suelen ser interesantes
Rotar tus imágenes o titulares de texto solo un poco da a tus imágenes de producto o diseños algo de energía y emoción.
Por ejemplo, con esta imagen de producto de eBook, el ligero ángulo añade un toque agradable.
Usa productos físicos como contexto
A veces está bien tomar prestada imaginería y contexto del mundo de los productos físicos para tus productos digitales. La gente captará tu idea.
Ayuda a la gente a visualizar cómo es tu producto digital colocándolo en el contexto en el que se utilizará.
Por ejemplo, puedes mostrar un producto de hoja de cálculo en la pantalla de un portátil nuevo y bonito en un entorno de oficina. La gente entenderá que no está comprando el portátil, ni la mesa de conferencias, solo tu hoja de cálculo por el contexto de tu sitio web.
O, otro ejemplo, puedes mostrar un eBook siendo leído en un dispositivo eReader o iPad. Los clientes potenciales entienden que solo están comprando el eBook.
Un último ejemplo, hay una gran tendencia a añadir sombras de ramas de árboles en plantillas de documentos imprimibles y tipos de productos similares. Esto es visualmente atractivo y permite al cliente potencial imaginar su imprimible sobre su mesa en la brisa tropical, incluso si es invierno donde se encuentra, se siente agradable.
Imágenes de alta calidad
Hasta cierto punto, lo que hace que una imagen sea de alta calidad es subjetivo. Una persona puede pensar que un diseño (o imagen de producto) es tan fácil que cualquiera podría haberlo hecho, mientras que otra persona puede pensar que la misma imagen es increíble debido a su simplicidad.
Nos centraremos en algunas cosas que puedes hacer para que tu imagen sea de alta calidad desde una perspectiva técnica.
Asegúrate de que el tamaño de tus imágenes sea:
- Alta resolución
- No demasiado pequeño
- Enfocado (si se involucra fotografía)
Alta resolución
Muchas pantallas y monitores hoy en día son mucho más densos en píxeles que hace solo unos años. Asegúrate de hacer tus imágenes grandes para que se puedan mostrar correctamente en pantallas y monitores de alta densidad de píxeles (high-DPI).
Es normal que las pantallas tengan 225 píxeles por pulgada en estos días. Hace unos años, 95 PPI era más común.
- PPI – Píxeles por pulgada
- DPI – Puntos por pulgada
- Retina – El término de Apple para pantallas de alta PPI. Cualquier iPhone, iPad o Mac fabricado en los últimos 7-10 años tiene 225-260 PPI. Quieres que tus imágenes se vean bien en ellos.
🔑 La mejor práctica para esto es hacer tus imágenes el doble de grandes de lo que quieres que se muestren.
Por ejemplo:
- ¿Quieres que la imagen de tu producto se muestre a 600×600 píxeles?
- Diseña y exporta tu imagen a 1200×1200 píxeles.
En pantallas de alta PPI y Retina, el mayor recuento de píxeles hará que la imagen se vea nítida. En las pantallas más antiguas de 95 PPI, los píxeles extra simplemente no serán visibles. No se pierde nada.
No demasiado pequeño
Debido a la alta resolución de las pantallas de dispositivos modernos, deberías empezar con imágenes grandes basadas en píxeles. Siempre puedes redimensionarlas para su salida a la web más tarde.
No puedes hacer más grande una imagen basada en píxeles, se vuelve borrosa y moteada.
Si usas gráficos vectoriales, *puedes* hacerlos más grandes.
Píxeles: los pequeños puntos que componen una fotografía o un diseño. No puedes escalar imágenes basadas en píxeles (hacerlas más grandes) pero puedes escalarlas hacia abajo. Los formatos de archivo de píxeles incluyen JPG, PNG, GIF.
Vector: ilustraciones compuestas por líneas geométricas. SÍ PUEDES escalar gráficos vectoriales hacia arriba y hacia abajo y se ven nítidos. Los formatos de archivo vectoriales incluyen: SVG, AI, EPS.
- Si estás utilizando gráficos basados en píxeles, empieza siempre con una imagen más grande. Debe ser al menos el doble del tamaño que quieres mostrarla para pantallas de alta PPI / Retina.
- Nunca se sabe qué tamaños diferentes podrías necesitar para los formatos de redes sociales, así que asegúrate de no empezar nunca con un archivo demasiado pequeño. Empieza grande, redimensiona a menor tamaño.
En Foco
Si estás tomando fotos, asegúrate de que el producto esté enfocado. Esto es bastante básico, pero también importante y necesita ser mencionado. Si estás usando un teléfono móvil, la mayoría tiene herramientas de autoenfoque que puedes aprender y usar fácilmente.
📸 Consejo rápido:
Sostén tu teléfono o cámara con ambas manos, apoya uno de tus brazos contra tu cuerpo para estabilizarte. Cuanto más estable sea tu cámara, más enfocadas y nítidas serán tus imágenes. Una foto movida probablemente saldrá borrosa.
Da formato a las imágenes para mayor versatilidad
Hay tantos tamaños y formatos posibles para crear las imágenes de tus productos. Cada canal de redes sociales tiene diferentes tamaños y matices. ¿Por dónde empezar?
Recomendamos empezar con un formato versátil y luego personalizarlo a partir de ahí si/cuando sea necesario.
El tamaño/formato versátil que recomendamos es 2:1. Un formato panorámico que tiene dos unidades de ancho y una unidad de alto. Lo usamos mucho en el sitio web de EDD.
- Usa 2000px por 1000px como tu documento maestro,
- Luego exporta a 1200px por 600px
Este formato funciona bastante bien en todos los canales. Luego personaliza más formatos según sea necesario.
Optimízalas para la web
Optimizar imágenes para la web implica dos tareas diferentes.
- Usar el formato de imagen correcto para usar en internet
- Comprimir la imagen
Usar el formato correcto
Hay cuatro formatos de imagen principales que usarás en la web.
- PNG – Portable Network Graphics – Úsalas para todo excepto fotos o animaciones (como logotipos o ilustraciones)
- JPG – Joint Photographic Expert Group – Úsalas para fotografías
- GIF – Graphic Interchange Format – Se usan para imágenes GIF animadas (como memes divertidos). Úsalas para animaciones, pero los PNG o JPG son mejores para la mayoría de las imágenes estáticas.
- WebP – Web Picture Format – Un formato de archivo más nuevo para imágenes web que son más pequeñas que los PNG o JPEG. Muchas aplicaciones (como Adobe y Affinity) aún no admiten completamente este formato. Por ahora, recomendamos no usarlo. Actualizaremos este artículo a medida que se vuelva más común.
Comprimir la imagen
Quieres que los archivos de imagen de tus productos digitales sean lo más pequeños posible, sin dejar de que se vean bien. Esto se llama compresión de imagen.
Esta es un área de experiencia técnica en sí misma. Recomendamos simplemente usar un servicio web para comprimir tus imágenes. En este tipo de sitios web, subes tu imagen original, ellos la comprimen y te proporcionan un nuevo archivo para que lo descargues.
Aquí hay dos que recomendamos:
Usa las imágenes comprimidas que obtengas de uno de estos sitios web como los archivos que subes a tu sitio web. Los archivos pequeños hacen que tu sitio web funcione más rápido para los clientes potenciales. Eso es importante. Si tienen que esperar mucho tiempo para ver las páginas de tus productos, probablemente se molesten y se vayan.
Usa Texto Alternativo (Descripciones de Imágenes)
Asegúrate de darles descripciones a tus imágenes. Esto ayuda con la accesibilidad (a11y) y la optimización para motores de búsqueda (SEO).
- Texto alternativo: Abreviatura de Texto Alternativo
- Etiquetas alt: Otra palabra para Texto Alternativo
- Texto Alternativo: La descripción textual que aplicas a una imagen para los lectores de pantalla
Para la accesibilidad, las etiquetas alt/descripciones de imágenes permiten que las personas con discapacidades visuales o alguna discapacidad sepan de qué trata la imagen. Esto se hace con lectores de pantalla. El software de lectura de pantalla utilizará el texto alternativo para describir la imagen con sonido/palabras habladas.
Para el SEO, las descripciones de imágenes pueden ayudar a los motores de búsqueda a comprender de qué trata tu contenido. También es una medida de calidad que Google Search busca en tu sitio.
😇 Añade descripciones de imágenes porque es lo correcto. Hace que la web sea más accesible e inclusiva. Pero también obtienes el beneficio del SEO.
En los viejos tiempos de la web, tenías que añadir manualmente descripciones de imágenes como texto alternativo en el HTML. Aprende más aquí.
Ahora, los constructores de sitios web modernos, como WordPress, tienen una interfaz visual para añadirlas. Aquí tienes las dos formas principales de hacerlo en un sitio de WordPress.
La primera está en la pestaña Medios. En tu panel de WordPress, ve a Medios en el menú del lado izquierdo. Haz clic en cualquier imagen para cargar el panel de Detalles del archivo adjunto. Allí, en la parte superior izquierda, verás el campo Texto Alternativo. Introduce una descripción de la imagen allí.
La segunda está dentro del editor de publicaciones. Cuando estés escribiendo una página o publicación en WordPress, puedes insertar un bloque de Imagen. Haz clic en cualquier bloque de imagen y en el menú del lado derecho hay un cuadro llamado Texto Alt (Texto Alternativo). También puedes introducir una descripción de la imagen allí.
Cómo Subir Imágenes y Vender en Línea
- ✅ Has creado un producto o productos digitales
- ✅ Estás trabajando en algunas imágenes de producto geniales
- 🔲 ¿Sabes cómo vas a vender tus productos digitales?
¡Podemos ayudarte con eso! Te mostraremos cómo vender y cómo subir tus imágenes de producto.
La mejor manera de vender tus productos digitales es con WordPress y Easy Digital Downloads (EDD).
¿Por qué WordPress?
WordPress es el mejor constructor de sitios web del mundo. Potencia más del 43% de Internet. Ningún otro constructor/plataforma de sitios web ha alcanzado el 5%.
Puedes confiar en él para que sea tu plataforma de comercio electrónico y más. No importa lo que necesites en el futuro, puedes confiar en que un sitio de WordPress podrá manejarlo. No siempre puedes decir eso de forma segura sobre otras plataformas.
WordPress tiene el ecosistema más grande de plugins, temas y proveedores de servicios profesionales. Es la combinación adecuada de potencia, asequibilidad y preparación para el futuro.
¿🤷🏾 Aún no tienes un sitio de WordPress? Solo necesitas un buen hosting web para ejecutar esta potencia gratuita de código abierto. Haz clic aquí para obtener ayuda para elegir uno (¡también hay códigos de descuento!).
¿Por qué EDD?
EDD es utilizado por más de 50.000 negocios de comercio electrónico. Es uno de los plugins de WordPress más confiables disponibles.
EDD está diseñado específicamente para vender productos digitales. La mayoría de las otras soluciones no lo están.
Easy Digital Downloads es una forma potente de crear un sitio web de comercio electrónico con todas las funciones sin necesidad de código. EDD tiene una versión gratuita para siempre y puede crecer contigo si necesitas que haga más en el futuro (con EDD Passes).
¿Por qué no otras soluciones?
Porque la mayoría de las otras soluciones de comercio electrónico no están construidas para productos digitales. Puede que 'sirvan' para productos digitales, pero a menudo es una ocurrencia tardía. A veces, vender productos digitales en ellas es una adición inestable.
👎🏾 Otras plataformas o SaaS de comercio electrónico
Muchas de las plataformas más populares, como la que rima con Shopify, están diseñadas para vender productos físicos. Tienen todo tipo de herramientas y procesos de configuración para envíos, inventario y logística que necesitas para bienes físicos, pero que no necesitas como creador digital. Eso puede hacerte perder tiempo.
Muchas plataformas tienen costosas tarifas mensuales y quizás unos pocos días de prueba gratuita. EDD tiene una versión gratuita para siempre. EDD te permite empezar y operar sin gastos generales.
👎 Mercados
Los mercados, como Etsy o Creative Market, son fáciles de configurar. Pero cobran, discutiblemente innecesarias, comisiones de intermediario en muchos casos. Se llevan una parte de tus ingresos. Cuanto más ganas, más se llevan.
Puedes empezar a vender tus productos digitales de inmediato. ¡Gratis! ¿Qué te detiene?
¡Consigue EDD hoy mismo y ponte en marcha!
Con una descarga gratuita obtendrás:
- Control total sobre los precios
- Archivos de productos protegidos, solo los clientes que paguen tendrán acceso a tus descargas digitales
- Control sobre la experiencia del cliente y la marca (marca blanca)
- Carrito de compras con opciones de pago
- Opciones de pago flexibles
- Informes de comercio electrónico
- Gestión de clientes (CRM básico)
- Códigos de descuento
- Stripe and/or PayPal payment gateway integration
- Usa Stripe y/o Paypal para aceptar tarjetas de crédito
- Usa Stripe para Apple Pay y Google Pay
¡Empieza ahora con solo unos pocos clics! 👇🏽
Subir las imágenes de tu producto
Cuando tengas EDD instalado en tu sitio de WordPress, tendrás una nueva pestaña en el lado izquierdo de tu panel de WordPress llamada Descargas.
Si nunca has instalado un plugin de WordPress, haz clic aquí para aprender todo sobre los plugins.
Los productos digitales que vendes en tu sitio web con EDD se llaman 'Descargas'.
Para crear una nueva:
- Haz clic en Añadir nueva
- Añade un nombre y una descripción del producto
- Establece un precio
- Enlaza los archivos del producto descargable, y
- Sube una imagen en Imagen de descarga
- Haz clic en Publicar para que sea visible en el front-end de tu sitio web
Añade tu imagen en el cuadro Imagen de descarga ubicado en el lado derecho.
🔎 Para obtener instrucciones más detalladas sobre cómo crear una Descarga y prepararte para vender, consulta esta guía de inicio rápido.
Recuerda, antes de subir tus imágenes, asegúrate de optimizarlas para la web. Recomiendo TinyPNG. Aunque uso software gráfico profesional, uso este sitio todos los días porque estoy muy satisfecho con la calidad de las imágenes y los tamaños de archivo pequeños. El sitio web crea archivos PNG y JPEG optimizados (a pesar del nombre).
Plantillas gratuitas para impulsar tu trabajo
Aquí tienes algunas plantillas para empezar. Para usarlas, necesitas una cuenta gratuita de Canva, una licencia de Adobe Photoshop o Creative Cloud, o una copia de Affinity Designer o Photo.
- Cuenta gratuita de Canva (pasa a Pro en cualquier momento)
- Adobe Creative Cloud
- Affinity Photo
- Affinity Designer
Plantilla de captura de pantalla de portátil
Plantilla de captura de pantalla de tableta
Plantilla de eBook
Plantilla de hoja de cálculo
Plantilla de documento
Imágenes de stock gratuitas
Hay algunos sitios geniales con fotos e ilustraciones vectoriales gratuitas que queríamos compartir:
- Unsplash – Un sitio genial con fotos de stock gratuitas, incluidas texturas que se pueden usar como imagen de fondo.
- Pexels – Otro sitio con fotos y vídeos de stock gratuitos
- Streamline – Una colección de algunos de los mejores iconos vectoriales, ilustraciones y emojis de la web. Tienen colecciones gratuitas y de pago.
Conclusión
¡Buen trabajo! Has aprendido a crear fantásticas imágenes de productos digitales. Esperamos que alguna de nuestras plantillas te ayude a avanzar a toda velocidad.
Las imágenes de los productos son muy importantes. Siempre valdrá la pena el esfuerzo adicional para que se vean bien. Confiamos en que te ayudarán a tener éxito con tu pequeño negocio en línea y a generar esos codiciados ingresos pasivos.
Tenemos muchos más recursos para creadores digitales como tú. ¿Sobre qué quieres aprender a continuación?
- 🤩 Formas sencillas de hacer que tu tienda de descargas digitales luzca genial
- 🧲 Crea lead magnets para hacer crecer tu lista de correo
- Selling Guides:
Asegúrate de suscribirte a nuestro boletín o síguenos en Facebook y Twitter para recibir nuestros últimos recursos para creadores digitales.
