En este post analizaremos una serie de tips y buenas prácticas que te recomendaré que adoptes al preparar elementos de imagen para su uso en publicaciones y páginas en Divi Builder.

Estas buenas prácticas te ayudarán a asegurar que tus imágenes se ajusten a los principios de diseño convencionalmente aceptados y a las dimensiones ideales de los módulos de Divi que emplean imágenes. El resultado contribuirá a optimizar las velocidades de carga que hará que la experiencia del visitante de tu web sea más rápidas.

Ah, y no olvidemos, ¡se verán geniales también!

Seleccionar las imágenes correctas

Antes de entrar de lleno en los consejos sobre Photoshop, es importante tomar en cuenta que no todas las imágenes con las que te encuentres, relevantes o no para tu contenido, son lo suficientemente buenas como para ponerlas en tu sitio web. En todos los casos, debes considerar los siguientes puntos y, si es necesario, crear tus propios elementos visuales para cumplir con estas pautas.

Dimensiones de la imagen

Como regla general, siempre es una buena idea comenzar con alta calidad / grandes dimensiones. Las imágenes más grandes que necesitarás en un sitio web Divi son imágenes de fondo de sección 1920px de ancho por 1080px de altura es ideal para estos. Si una imagen comienza más pequeña que esto, es probable que no sea un buen candidato para un fondo de sección. Sin embargo, puede reducirlo para otros casos de uso, que veremos a continuación.

Una imagen de fondo de sección Divi a menudo necesita abarcar todo el ancho de la pantalla.

Piensa en los grupos de imágenes

Una excelente manera de establecer el tono de una página o publicación de Divi Builder y mantenerla constante es utilizar un conjunto único de imágenes que sean estilísticamente iguales. Idealmente, la misma configuración de la cámara, el contenido y el proceso de edición.

 

Este conjunto de imágenes realmente cumple la función de unir o unificar la publicación.

Mantener la uniformidad de los colores

Es importante que las imágenes de tu publicación o página y los colores que contienen, puedan fundirse y funcionar bien con la paleta de colores de su sitio. Si planea tener una amplia variedad de imágenes con varias paletas de colores que aparecen regularmente en su sitio, puede elegir un esquema de color mínimo que permita que su contenido establezca el tono de una página a otra. O bien, edite sus imágenes para que se ajusten a la paleta de colores elegida.

Los colores en las imágenes son consistentes con la combinación de colores del sitio.

Trata de mantener las imágenes de fondo «silenciosas» y sutiles: es difícil para una imagen de fondo «desaparecer en el fondo» si está realmente ocupada y / o está pidiendo atención de otras maneras. Esta es la razón por la que preferimos usar imágenes sutiles de «textura», imágenes borrosas o «suavizadas» y patrones simples, todos los cuales son excelentes fondos.

 

Esta imagen por ejemplo tiene un fondo con patrón de puntos sobre un fondo obscuro que resalta los textos del título.

 

5 maneras de ser creativo con la preparación de las imágenes en Photoshop para Divi

Ahora que tenemos una especie de «línea de base» para lo que hace que una imagen sea adecuada para las publicaciones o páginas de Divi, en primer lugar, echemos un vistazo a las cinco formas en que puede ser creativo al prepararlas en Photoshop.

1. Agrega tus propias superposiciones de color de fondo

Una característica popular del módulo de encabezado de ancho completo es la superposición del color de fondo. Esta función te permite crear una superposición de color con transparencia ajustable sobre cualquier imagen que elijas como imagen de fondo. Sin embargo, hay otras áreas en las que es posible que desees una superposición de imágenes en color en tu sitio. En esos casos, deberás crear la superposición mediante Photoshop u otro software de edición de imágenes.

Ejemplos:

1. Cuando en la imagen de abajo tenemos un módulo de texto que se está utilizando sobre una sección con una imagen de fondo. En su estado inalterado, el texto se vuelve casi ilegible. Esto es muy frecuente cuando se intenta utilizar imágenes de fondo detrás del texto.

 

 

2. A veces, la imagen de fondo puede ser demasiado brillante, y otras veces puede estar demasiado ocupada.

 

Una posible solución para modificarla es la superposición de un color en un porcentaje de transparencia sutil que permite atenuar la imagen y resolver este problemas con facilidad.

Cómo lo hago?

Para solucionar este inconveniente, en primer lugar debes abrir tu imagen en Photoshop (o en un software de edición de imágenes similar). Sobre la imagen, crea una nueva capa. Esta es la capa que usaremos para nuestra superposición de color.

 

 

Una vez que se haya creado la capa, usa la herramienta Bote de pintura para rellenar la capa con un color oscuro y sólido de la gama de tu imagen y luego usa el control deslizante de opacidad de la capa para reducir la opacidad. Puedes jugar con el porcentaje dependiendo del brillo de tu foto.

 

 

 

 

Una vez que la imagen se ha guardado en formato comprimido para web y vuelto a cargar en su sitio Divi, verás que la superposición de la imagen de fondo ha hecho que la superposición del texto sea mucho más fácil de leer.

 

 

 

2. Crea Collages

Una forma de seguir utilizando imágenes pequeñas en tu sitio web es agrupando un gran número de ellas en un collage. Cuando se combina con una superposición de imágenes como en el ejemplo a continuación, los collages son excelentes fondos de sección.

 

Para crear el tuyo propio, primero deberás crear un nuevo documento en Photoshop. Como mencioné anteriormente, para empezar, 1920px por 1080px suele ser un buen tamaño. Siempre se puede ajustar si es necesario

 

 

A continuación, reúne tus otras imágenes y colócalas en una sola carpeta; ya sea en su escritorio o donde estés organizando los archivos para este proyecto en particular.

Simplemente arrastra tus imágenes al «lienzo en blanco» de tu collage para comenzar a montarlo.

 

 

Quedarán colocadas en «pila» y podrás ver que cada una a generado una capa individual:

 

 

Lo siguiente será organizarlas en la forma en la que quieres que aparezcan en el collage. Usa la combinación de teclas «Ctrl + T» para transformar las imágenes a tus tamaños preferidos. Asegúrate de mantener presionada la tecla «Mayús» mientras cambias el tamaño para que se amplíe proporcionalmente. De lo contrario la imagen se verá estirada o aplastada. Luego, usa la herramienta Mover para posicionarlas.:

 

 

Como el objetivo de este collage es resaltar el texto que coloquemos encima, aplacaremos la imagen y para eso aplicaremos un color superpuesto con un porcentaje de opacidad de 75%

 

 

Este sería el resultado:

 

 Lo que queda es subir la imagen al blog y aplicarla de fondo al módulo que corresponda…

 

 

3. Crea “capas” de imágenes múltiples para obtener un efecto de paralaje más dramático

En la configuración de Divi, sección y fila, puedes activar un efecto llamado «paralaje» o «parallax». Cuando el efecto de paralaje está habilitado, le da a las imágenes de fondo la apariencia de permanecer fijas en un lugar, mientras que el resto de la ventana gráfica pasa por delante. Este efecto se puede enfatizar aún más cuando una sola imagen se divide en varias imágenes que se desplazan una sobre la otra. De hecho, el efecto de paralaje por definición se crea cuando se comparan dos objetos a diferentes distancias. Al agregar una imagen en la parte superior de su imagen de paralaje, el efecto se intensifica a través de la interacción entre los dos. El truco es elegir dos imágenes que funcionen bien juntas.

He aquí un ejemplo:

 

 

Como puede ver, la imagen de fondo se ha configurado en modo «paralaje verdadero» “true parallax” en la configuración de la sección de Divi. A medida que se desplaza hacia abajo en la página, la imagen en el fondo se mueve a una velocidad similar, aunque ligeramente más lenta, que la página en general. Esto crea el efecto de paralaje. La diferencia de velocidad entre los elementos de la página en comparación con la velocidad a la que se mueve la imagen de fondo de la sección crea una ilusión de profundidad.

 

La imagen en la parte superior de la sección se mueve junto con el resto de la página, y como es una imagen PNG transparente, podemos mirar a través de los espacios en la imagen para ver la imagen de paralaje detrás de ella. Esto es sólo un módulo de imagen Divi normal. El truco es seleccionar dos imágenes que funcionen bien juntas y luego convertir la imagen en la parte superior en un PNG transparente.

Estas son las imágenes usadas en el ejemplo:

 

La imagen del tenedor (el módulo de imagen que se encuentra sobre la imagen de fondo de paralaje) es un PNG con un fondo transparente. Se ha eliminado todo el espacio en blanco para que pueda ver la imagen de paralaje a continuación. En Photoshop, esto es bastante fácil de hacer siempre y cuando esté trabajando con una imagen que tenga un fondo liso (idealmente blanco).

Para hacer esto abre la imagen que deseas usar y usa la herramienta Varita mágica para seleccionar el espacio en blanco entre cada elemento de la imagen. Una vez que se haya seleccionado todo, haga clic en la tecla eliminar para eliminar el fondo blanco. Haz clic en Guardar> Exportar> Exportación rápida como PNG y ¡listo!

4. Deja (o crea) espacio para otro contenido Divi

Este consejo es quizás el más simple, pero no menos llamativo visualmente, que los demás. El truco aquí es encontrar una imagen con un espacio de fondo en blanco adicional (como la imagen de arriba) o crear alguna en Photoshop para que haya espacio para colocar otros módulos Divi «dentro».

El truco aquí (en Divi) es configurar la imagen como fondo de la sección. Luego, agregar dos módulos a la fila: el módulo que desees mostrar (en este caso, un módulo de llamado a la acción) y un módulo divisor para crear la cantidad deseada de «espacio en blanco» debajo de él, que finalmente muestra la imagen de fondo. También es importante establecer el color de fondo del módulo de llamada a la acción en 100% transparente.

Si tu imagen aún no tiene espacio adicional en la parte superior o inferior como esta, puede hacer lo siguiente:

Abre la imagen en Photoshop y usa la herramienta Lazo, el selector rápido o la varita mágica para seleccionar tu tema principal. Elimina el fondo y aplica un color sólido.

Asegúrate de dejar espacio en uno de los cuatro lados donde irá tu contenido Divi. También es posible que desees o necesites cambiar el tamaño del lienzo. El ejemplo tiene 1920px por 1080px y la modelo de la foto se a movido hacia la izquierda.

En esta imagen, se abre el espacio en la dirección que la modelo está mirando. Esto creará una buena señal visual para que cualquiera que visite el sitio mire en esa dirección.

Al usar este tipo de imagen se puede usar un módulo con una llamada a la acción aprovechando todo el espacio abierto.

5. Crear transiciones de sección integradas

Cuando se usan imágenes en los posts y en las páginas, es importante pensar cómo se relacionarán con el contenido que las rodea. Una vez que sepas cómo encaja una sola imagen en el conjunto, puedes encontrar formas divertidas de combinar muchos elementos en una sola pieza de contenido y sin interrupciones.

En la imagen las nubes parecen desvanecerse en la sección blanca de abajo, pero esto no es solo una coincidencia afortunada. De hecho, la imagen original es esta:

Como puedes ver, hay una fuerte barrera entre la sección blanca y el módulo de imagen de arriba. Sin embargo, con un simple degradado sobre la imagen, podemos crear una hermosa transición entre los dos elementos.

Para aplicar el gradiente, tenemos dos posibles soluciones. La primera se realiza en Photoshop. Y como queremos hacer la transición a la sección debajo de la imagen, y dado que la sección siguiente tiene un fondo blanco, aplicaremos un degradado blanco en la parte inferior de la imagen. Mientras la fila final de píxeles en la parte inferior de la imagen sea blanca, la transición será suave.

Selecciona la herramienta de degradado y luego selecciona el color en el que deseas que se desvanezca. Arrastra la herramienta de degradado de abajo hacia arriba mientras mantienes presionada la tecla «Bloq Mayús» para asegurarte de que el degradado se aplica en un ángulo perfecto de 90 grados.

Una vez que la imagen se ha guardado y cargado de nuevo en nuestro sitio, puedes ver que el degradado blanco ha creado una transición suave entre la parte inferior de la imagen y la sección a continuación. Este mismo concepto se puede aplicar a cualquier imagen y a cualquier color de fondo de sección.

Sin embargo, es mejor elegir un color lo más cercano posible al color dominante en la imagen que hayas elegido. Intentar desvanecerse a un color que no existe en la imagen dará como resultado una transición poco natural.

La segunda forma es aplicar un degradé usando la herramienta de degradé de imágenes que se encuentra en la ventana de Ajustes de sección o módulo según dónde tengas tu imagen y una vez que eliges la imagen de fondo luego le aplicas el degradé con los valores como indica la siguiente imagen:

Es importante elegir un color lo más cercano posible al color dominante en la imagen que hayas elegido. Intentar desvanecerse a un color que no existe en la imagen dará como resultado una transición poco natural.

Guardar tus archivos de imagen correctamente

Cuando hayas terminado de poner en práctica las sugerencias anteriores, te recomiendo que utilices los siguientes consejos para guardar tus archivos correctamente. Estos consejos asegurarán que tus archivos tengan el formato correcto y sean pequeños. Al hacerlo, contribuirás a descargas de página más rápidas utilizando solo imágenes lo más livianas posible.

Formatos de imagen: en la mayoría de los casos,  el formato JPG/JPGE es el apropiado. Esto es bueno para guardar imágenes con millones de colores, por lo que es perfecto para fotografías y gráficos que tienen muchos tonos y degradados. En los casos en que necesite un fondo transparente o vaya a colocar la imagen detrás de una superposición de color, el formato de archivo PNG es ideal.

Tamaño del archivo: de menor a mayor, el tamaño de los archivos de imagen debe oscilar entre 40 Kb y 200 Kb. No más grande Esto es especialmente importante al exportar diseños Divi. Pueden ocurrir algunos errores cuando el tamaño de los archivos de imagen es grande o muy pequeño.

Guardar para Web: para guardar una imagen para usarla en la web desde Photoshop, debes ir a Archivo> Exportar> Guardar para Web (heredado) y eliges entre las casillas de verificación «optimizado» y «progresivo». Cualquiera de los dos funcionará, pero un beneficio del progresivo es que al principio se verá un poco borroso pero una vez cargado se verá más claro que las imágenes no progresivas. Este poco de claridad puede darle a tus imágenes (y por extensión a tu sitio) un poco de ventaja.

Al elegir entre calidad «alta» y «baja», ten en cuenta cómo se utilizará la imagen. Es posible que desees utilizar «alto» si la imagen estará sola en la publicación o página. O elige «medio» a «bajo» si se utilizará como fondo. Pero en última instancia, siempre intentará lograr el equilibrio adecuado entre la calidad de la imagen y la compresión. Cuando lo encuentres, clica en «guardar».

Si tienes alguna consulta déjala en los comentarios y cuanto antes te contesto 😉