Bienvenidos al día 50 de nuestra Maratón Divi 100. ¡Sigue sintonizando durante 100 días seguidos los increíbles recursos de Divi mientras hacemos la cuenta regresiva para el increíble lanzamiento de Divi 3.0 en el último día de la serie!
En la publicación de hoy, repasaremos una serie de consejos y mejores prácticas que le recomendamos que adopte al preparar elementos de imagen para usar en publicaciones y páginas de Divi Builder . Estas mejores prácticas ayudarán a garantizar que sus imágenes cumplan con los principios de diseño aceptados, las dimensiones ideales de la imagen Divi y contribuyan a velocidades de carga más rápidas.
Ah, y no lo olvidemos, ¡también se verán geniales!
Antes de entrar en los consejos de Photoshop a continuación, es importante darse cuenta de que no todas las imágenes que encuentre, relevantes para su tema de contenido o no, son lo suficientemente buenas como para incluirlas en su sitio web. En todos los casos, debe considerar los siguientes puntos y, si es necesario, crear sus propios elementos visuales para cumplir con estas pautas. Como resultado, es probable que su contenido final sea más sólido.
Dimensiones de la imagen: como regla general, siempre es una buena idea comenzar con alta calidad/dimensiones grandes y avanzar hacia abajo. Las imágenes más grandes que necesitará en un sitio web de Divi son imágenes de fondo de sección. 1920px de ancho por 1080px de alto es ideal para estos. Si una imagen comienza más pequeña que esta, es probable que no sea una buena candidata para el fondo de una sección. Sin embargo, puede reducirlo para otros casos de uso, que veremos a continuación.
Una imagen de fondo de sección dividida a menudo necesita abarcar todo el ancho de la pantalla.
Piense en conjuntos de imágenes: una excelente manera de establecer el tono de una página o publicación de Divi Builder y mantenerlo consistente en todo momento es usar un solo conjunto de imágenes que son estilísticamente iguales. Idealmente, la misma configuración de cámara, tema y proceso de edición.
Este conjunto de imágenes realmente une la publicación.
Mantén los colores consistentes: es importante que las imágenes en tu publicación o página, y los colores que contienen, puedan combinarse y funcionar bien con la paleta de colores de tu 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 encajen con la paleta de colores elegida.
Los colores de las imágenes son consistentes con el esquema de colores del sitio.
Mantenga las imágenes de fondo «silenciosas» y sutiles: es difícil que una imagen de fondo «se desvanezca en el fondo» si está muy ocupada y/o pide atención de otras maneras. Es por eso que preferimos usar imágenes de «textura» sutiles, imágenes borrosas o «suavizadas» y patrones simples, todos los cuales son excelentes fondos.
Este primer plano de la luna funciona bien con el título de la publicación y como una textura o patrón sutil. Especialmente con una superposición de color añadida.
5 formas de ser creativo con la preparación de activos de imagen Divi en Photoshop
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 cinco formas en que puede ser creativo al preparar sus recursos de imagen de Divi en Photoshop.
1. Agregue sus propias superposiciones de color de fondo
Una característica popular de nuestro módulo de encabezado de ancho completo es la superposición de color de fondo. Esta función le permite crear una superposición de color con transparencia ajustable sobre cualquier imagen que elija como imagen de fondo. Sin embargo, hay otras áreas en las que es posible que desee una superposición de imágenes en color en su sitio. En esos casos, deberá agregar uno a la imagen en sí usando Photoshop u otro software de edición de imágenes.
Por ejemplo, en la imagen de abajo tenemos un módulo de texto que se usa encima de una sección con una imagen de fondo. En su estado inalterado, el texto se vuelve casi ilegible. Esta es una ocurrencia muy común cuando se intenta usar imágenes de fondo detrás del texto. A veces, la imagen de fondo puede ser demasiado brillante y, otras veces, puede estar demasiado cargada. Modificar la imagen con una sutil superposición de fondo puede atenuar la imagen y resolver estos problemas con facilidad.
En primer lugar, debe abrir su imagen en Photoshop (o un software de edición de fotos similar). Encima de la imagen, crea una nueva capa. Esta es la capa que usaremos para nuestra superposición.
Una vez que se haya creado la capa, use la herramienta Cubo de pintura para llenar la capa con negro sólido y luego use el control deslizante de opacidad de la capa para reducir la opacidad al 50%. Puedes jugar con el porcentaje dependiendo del brillo de tu foto.
Una vez que la imagen se ha guardado y vuelto a cargar en su sitio Divi, puede ver que la superposición de la imagen de fondo ha hecho que el texto superpuesto sea mucho más fácil de leer.
2. Crea collages
Una forma de hacer trampa y seguir usando imágenes pequeñas en su sitio web es agrupar un gran número de ellas en un collage. Cuando se combinan con una superposición de imágenes como en el ejemplo a continuación, los collages son excelentes fondos de sección.
Este es un gran ejemplo de un fondo de collage.
Para crear uno propio, primero deberá crear un nuevo documento en Photoshop. Como mencioné anteriormente, 1920px por 1080px suele ser un buen tamaño para empezar. Siempre puede ajustar hacia abajo si es necesario.
A continuación, querrá reunir sus otras imágenes y colocarlas en una sola carpeta; ya sea en su escritorio o donde sea que esté organizando los archivos para este proyecto en particular.
Simplemente puede arrastrar los elementos de la imagen al «lienzo en blanco» de su collage para comenzar.
Comenzará luciendo así.
Cada imagen estará en su propia capa, pero todas estarán directamente una encima de la otra. Use comando + T para transformar las imágenes a sus tamaños preferidos. Asegúrese de mantener presionada la tecla Mayús mientras cambia el tamaño para que las cosas se escalen proporcionalmente. De lo contrario, la imagen se verá estirada o aplastada. Luego, use la herramienta de movimiento para colocarlos.
Una vez que esté satisfecho con los resultados, puede elegir agregar una superposición de color o no, dependiendo de cómo le gustaría usarla dentro de Divi.
3. Cree «capas» de imágenes múltiples para un paralaje más dramático
En la configuración de sección y fila de Divi, puede activar un efecto llamado «parallax». Cuando el efecto de paralaje está habilitado, le da a sus imágenes de fondo la apariencia de permanecer fijas en un lugar mientras el resto de la ventana gráfica se desplaza más allá. Este efecto se puede enfatizar aún más cuando una sola imagen se divide en múltiples imágenes que se desplazan entre sí. De hecho, el efecto de paralaje por definición se crea cuando se comparan dos objetos a diferentes distancias. Al agregar una imagen encima de su imagen de paralaje, el efecto se intensifica a través de la interacción entre los dos. El truco está en elegir dos imágenes que funcionen bien juntas.
Aquí hay un ejemplo:
Como puede ver, la imagen de fondo se ha configurado en el modo «verdadero paralaje» en la configuración de la sección Divi. A medida que se desplaza hacia abajo en la página, la imagen del fondo se mueve a una velocidad similar, aunque un poco más lenta, que la página 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 dado que 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! Este es solo un módulo de imagen Divi normal. El truco es seleccionar dos imágenes que funcionen muy bien juntas y luego convertir la imagen de arriba en un PNG transparente.
Aquí están las dos imágenes utilizadas en el ejemplo anterior:
Como puede ver, la imagen de la izquierda (el módulo de imagen que se encuentra encima de 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).
Abra la imagen y use 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. Deje (o cree) 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 espacio de fondo en blanco adicional (como la imagen de arriba) o crear algo en Photoshop para que haya espacio para colocar otros módulos Divi «dentro».
El truco aquí (en Divi) es establecer la imagen como fondo de la sección. Luego, agregue dos módulos a la fila: el módulo que le gustaría 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 el fondo. imagen. También es importante establecer el color de fondo del módulo de llamada a la acción en 100 % transparente.
Si su imagen aún no tiene espacio adicional en la parte superior o inferior como esta, puede hacer lo siguiente:
Abra la imagen en Photoshop y use la herramienta Lazo, el selector rápido o la varita mágica para seleccionar su tema principal. Elimine su fondo y reemplácelo con un color sólido.
Asegúrese de dejar espacio en uno de los cuatro lados donde irá su contenido Divi. Es posible que también desee o necesite cambiar el tamaño del lienzo. Ajusté el mío a 1920 px por 1080 px y moví mi sujeto más hacia la izquierda.
En esta imagen, he optado por abrir el espacio en la dirección en la que mira. Esto creará una buena señal visual para cualquier persona que visite mi sitio, alentándolos a mirar donde quiero que lo hagan.
Ahora, cuando uso esta imagen en Divi, puedo colocar una llamada a la acción en el espacio abierto que he creado.
5. Crea Transiciones de Sección Sin Costuras
Al usar imágenes dentro de las publicaciones y páginas de Divi Builder, es importante pensar en cómo esas imágenes se relacionarán con el contenido circundante. Una vez que sepa cómo encaja una sola imagen en el todo, puede idear pequeñas formas divertidas de combinar muchos elementos en una pieza de contenido uniforme.
Una forma de hacerlo es agregando degradados de transición en la parte superior e inferior de las imágenes para que parezcan desvanecerse en la siguiente sección, como en la imagen de abajo tomada de una de nuestras muchas demostraciones de Divi Builder .
Las nubes parecen desvanecerse en la sección blanca de abajo, pero esto no es solo una coincidencia afortunada. De hecho, la imagen original se veía así:
Como puede ver, hay una gran 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.
Para aplicar el degradado, primero deberá abrir su imagen en Photoshop. Dado que queremos hacer la transición a la sección debajo de la imagen, y dado que la sección debajo tiene un fondo blanco, aplicaremos un degradado blanco en la parte inferior de la imagen. Siempre que la fila final de píxeles en la parte inferior de la imagen sea blanca, la transición será suave.
Seleccione la herramienta de degradado y luego seleccione el color al que desea desvanecerse. Arrastre la herramienta de degradado desde abajo hacia arriba mientras mantiene presionada la tecla Mayús para asegurarse de que el degradado se aplique en un ángulo perfecto de 90 grados.
Una vez que la imagen se ha guardado y vuelto a cargar en nuestro sitio, puede ver que el degradado blanco ha creado una transición suave entre la parte inferior de la imagen y la sección de abajo. Este mismo concepto se puede aplicar a cualquier imagen y color de fondo de cualquier sección, sin embargo, es mejor elegir un color que sea lo más parecido posible al color dominante en la imagen que ha elegido. Intentar desvanecerse a un color que no existe en la imagen resultará en una transición poco natural.
Guardar sus archivos de imagen correctamente
Cuando haya terminado los ejercicios creativos anteriores, le recomendamos que utilice los siguientes consejos para guardar sus archivos correctamente. Estos consejos asegurarán que sus archivos estén en el formato correcto y sean pequeños. Al hacerlo, contribuirá a velocidades de página más rápidas al usar solo imágenes que sean lo más livianas posible.
Formatos de imagen: en la mayoría de los casos querrás usar el formato JPG. 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: del más pequeño al más grande, 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. He notado que pueden ocurrir algunos errores cuando el tamaño de los archivos de imagen es grande.
Guardar para Web: cuando guarde una imagen para usarla en la Web desde Photoshop, vaya a Archivo > Exportar > Guardar para Web (heredado) y elija entre las casillas de verificación «optimizado» y «progresivo». Cualquiera de los dos funcionará, pero uno de los beneficios del progresivo es que al principio se verá un poco borroso, pero una vez cargado, será más claro que las imágenes no progresivas. Este poco de claridad puede darle a sus imágenes (y por extensión a su sitio) un poco de ventaja.
Al elegir entre calidad «alta» y «baja», tenga en cuenta cómo se utilizará la imagen. Es posible que desee usar «alto» si la imagen estará sola en la publicación o página. O elija «medio» a «bajo» si se utilizará como fondo. Pero, en última instancia, siempre intentará lograr el equilibrio adecuado entre la calidad de imagen y la compresión. Cuando lo hayas encontrado, haz clic en Guardar.
Terminando
Por supuesto, hay muchos más consejos y formas creativas en las que podría preparar sus activos de imagen para obtener mejores y más dinámicas publicaciones y páginas de Divi Builder. Si hay algo que nos ha visto hacer en nuestras páginas de demostración de Divi, no dude en preguntarnos al respecto en la sección de comentarios a continuación y escribiremos una publicación de seguimiento para mostrarle cómo lo hicimos.
Además, ¡asegúrese de suscribirse a nuestro boletín de correo electrónico y canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!
División 100 Día 50
La cuenta atrás para Divi 3.0
Esta publicación es parte de nuestro maratón Divi 100. ¡Síguenos mientras publicamos recursos Divi gratuitos durante 100 días seguidos! Esta cuenta regresiva de 100 días terminará con el revolucionario lanzamiento de Divi 3.0, que incluye nuestro nuevo editor visual creado desde cero con React. ¡Divi 3.0 cambiará para siempre la forma en que construyes sitios web con Divi Builder!
Que empiece la cuenta atrás.
Más información sobre Divi 3.0