5 Ways to Get Creative with Divi Image Asset Preparation in Photoshop

Welcome to Day 50 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!

In today’s post we’re going to run through a series of tips and best practices we recommend you adopt when preparing image elements for use in Divi Builder posts and pages. These best practices will help to assure that your images conform to accepted design principles, ideal Divi image dimensions, and contribute to faster loading speeds.

Oh, and let’s not forget, they’ll look pretty cool too!

Selecting the Right Images

Before we get into the photoshop tips below it’s important to realize that not every image you come across, relevant to your content topic or not, is good enough to make it onto your website. In every case you should consider the following points and if necessary create your own visual elements in order to conform to these guidelines. Your finished content will likely be stronger as a result.

Image Dimensions: As a rule, it’s always a good idea to start with high quality/large dimensions and work your way down. The largest images you will need on a Divi website are section background images. 1920px wide by 1080px height is ideal for these. If an image starts out smaller than this, it’s likely not a good candidate for a section background. You can however scale it down for other use cases, which we will get into below.

A divi section background image often needs to span the complete width of the screen.

Think in image sets: One great way to establish the tone of a Divi Builder page or post and keep it consistent throughout is to use a single set of images that are stylistically the same. Ideally, the same camera settings, subject matter, and editing process.

This set of images really ties the post together.

Keep colors consistent: It’s important that the images on your post or page–and the colors they contain–are able to blend in and work well with the color palette on your site. If you plan to have a wide variety of images with various color palettes regularly featured on your site, you may want to choose a minimal color scheme that allows your content to set the tone from page to page. Or, edit your images to fit with your chosen color palette.

The colors in the images are consistent with the site’s color scheme.

Keep background images “quiet” and subtle: It’s hard for a background image to “fade into the background” if it’s really busy and/or begging for attention in other ways. This is why we prefer to use subtle “texture” images, blurry or “softened” images, and simple patterns–all of which make great backgrounds.

This close-up of the moon functions well with the post title and as a subtle texture or pattern. Especially with a color overlay added to it.

5 Ways to Get Creative with Divi Image Asset Preparation in Photoshop

Now that we have a sort of baseline for what makes an image right for Divi posts or pages in the first place, let’s take a look at five ways you can get creative in preparing your Divi image assets in photoshop.

1. Add Your Own Background Color Overlays

One popular feature of our fullwidth header module is the background color overlay. This feature allows you to create a colored overlay with adjustable transparency over whatever image you choose as your background image. There are other areas in which you may want a colored image overlay on your site though. In those cases you’ll need to add one to the image itself using photoshop or another image editing software.

For example, in the image below we have a text module being used atop a section with a background image. In its unaltered state, the text becomes almost unreadable. This is a very common occurrence when attempting to use background images behind text. Sometimes the background image can be too bright, and other times it can be too busy. Modifying the image with a subtle background overlay can tone down the image and solve these problems with ease.

First of all, you need to open up your image in Photoshop (or a similar photo editing software). Above the image, create a new layer. This is the layer we will be using for our overlay.

Once the layer has been created, use the paint bucket tool to fill the layer with solid black and then use the layer’s opacity slider to reduce the opacity down to 50%. You can play with the percentage depending on the brightness of your photo.

Once the image has been saved and re-uploaded to your Divi site, you can see that the background image overlay has made the overlapping text much easier to read!

2. Create Collages

One way you can “cheat” and still use small images on your website is by grouping a large number of them together into a collage. When combined with an image overlay as in the example below, collages make great section backgrounds.

This is a great example of a collage background.

To create your own, first you’ll need to create a new document in photoshop. As I mentioned above, 1920px by 1080px is usually a good size to start with. You can always adjust down if need be.

Next, you’ll want to gather up your other images and put them in a single folder; either on your desktop or wherever you are organizing the files for this particular project.

You can simply drag the image elements into your collage’s “blank canvas” to get started.

It will start out looking like this.

Each image will be in its own layer but they will all be directly on top of each other. Use command + T to transform the images to your preferred sizes. Be sure to hold down the shift key while resizing so that things scale proportionally. Otherwise the image will look stretched or squished. Then, use the move tool to position them.

Once you’re happy with the results you can choose to add a color overlay or not depending on how you’d like to use it within Divi.

3. Create Multi-Image “Layers” for More Dramatic Parallax

In Divi section and row settings you’re able to turn on an effect called “parallax”. When the parallax effect is enable it gives your background images the appearance of staying fixed in one spot while the rest of the viewport scrolls past it. This effect can be emphasized even more when a single image is split up into multiple images that scroll past each other. In fact, the parallax effect by definition is created when comparing two objects at different distances. By adding an image on top of your parallax image, the effect is heightened through the interplay between the two. The trick is choosing two images that work well together.

Here is an example:

As you can see, the background image has been set to “true parallax” mode in the Divi section settings. As you scroll down the page, the image in the background moves at a similar, yet slightly slower, speed than the overall page. This creates the parallax effect. The difference in speed between the elements on the page when compared to the speed at which the section’s background image moves creates an illusion of depth.

The image atop the section moves along with the rest of page, and since it’s a transparent PNG image, we can peer through the gaps in the image to see the parallax image behind it! This is just a normal Divi image module. The trick is selecting two images that work great together, and then turning the image on top into a transparent PNG.

Here are the two images used in the example above:

As you can see, the image on the left (the image module that sits atop the parallax background image) is a PNG with a transparent background. All of the white space has been deleted so that you can see the parallax image below. In Photoshop, this is quite easy to do so long as you are working with an image that has a plain (ideally white) background.

Open up the image and use the Magic Wand tool to select the white space between each item in the image. Once everything has been selected, click the delete key to remove the white background. Click Save > Export > Quick Export As PNG and you’re done!

4. Leave (or Create) Space for Other Divi Content

This tip is maybe the simplest but no less visually striking than the others. The trick here is to either find an image with extra blank background space in it (like the image above) or to create some in photoshop so that there is room to place other Divi modules “inside” it.

The trick here (in Divi) is setting the image as the section background. Then, adding two modules to the row: whichever module you’d like to display (in this case, a call to action module) and a divider module to create the desired amount of “blank space” beneath it, which ultimately displays the background image. It’s also important to set the call to action module’s background color to 100% transparent.

If your image does not already have extra space on the top or bottom like this one you can do the following:

Open the image up in photoshop and use either the lasso tool, quick selector, or magic wand to select your main subject. Delete their background and replace it with a solid color.

Be sure to leave space to one of the four sides where your Divi content will go. You may also want or need to resize the canvas as well. I adjusted mine to 1920px by 1080px and moved my subject farther to the left.

In this image I’ve chosen to open up the space in the direction that she is looking. This will create a nice visual cue for anyone visiting my site, encouraging them to look where I want them to.

Now, when I use this image in Divi I can place a call to action in the open space I’ve created.

5. Create Seamless Section Transitions

When using images within Divi Builder posts and pages it’s important to think about how those images will relate to the surrounding content. Once you know how a single image fits into the whole you can come up with fun little ways of blending many elements into one piece of seamless content.

One way you might do this is by adding transitional gradients to the tops and bottoms of your images so that they seem to fade into the next section–as in the image below taken from one of our many Divi Builder demos..

The clouds appear to fade into the white section below, but this isn’t just a lucky coincidence. In fact, the original image looked something like this:

As you can see, there is a stark barrier between the white section and the image module above. With a simple gradient over the image, however, we can create a beautiful transition between the two.

To apply the gradient, you will first need to open up your image in Photoshop. Since we want to transition to the section below the image, and since the section below has a white background, we will be applying a white gradient to the bottom of the image. As long as the final row of pixels at the bottom of the image is white, the transition will be smooth.

Select the gradient tool, and then select the color that you want to fade to. Drag the gradient tool from the bottom upwards while holding the shift key to ensure that the gradient is applied at a perfect 90 degree angle.

Once the image has been saved and uploaded back to our site, you can see that the white gradient has created a smooth transition between the bottom of the image and the section below. This same concept can be applied to any image and any section background color, however, it’s best to choose a color that is as close as possible to the dominant color in the image you have chosen. Attempting to fade to a color that does not exist in the image will result in an unnatural transition.

Saving Your Image Files Properly

When you’ve finished your creative exercises above, we recommend using the following tips to save your files properly. These tips will ensure that your files are in the right format and small. In doing so you will be contributing to faster page speeds by only using images that are as light weight as possible.

Image Formats: in most cases you will want to use the JPG format. This is good for saving images with millions of colors, so it’s perfect for photographs and graphics that have a lot of shades and gradients. In instances when you need a transparent background or you’re going to place the image behind a color overlay, the PNG file format is ideal.

File Size: From smallest to largest your image file sizes should range from as small as 40 Kb to 200 Kb. No bigger. This is especially important when exporting Divi layouts. I’ve noticed that some errors can occur when image file sizes are large.

Save For Web: When you’re saving an image for use on the web from photoshop, go to File > Export > Save for Web (legacy) and choose between the checkboxes “optimized” and “progressive”. Either will work, but one benefit of progressive is that at first it will look a bit blurry but once loaded clearer than non-progressive images. This little bit of clarity can give your images (and by extension your site) a bit of an edge.

When choosing between “high” and “low” quality, factor in how the image will be used. You might want to use “high” if the image will be standing alone on the post or page. Or choose “medium” to “low” if it will be used as a background. But ultimately you will always be attempting to strike the right balance between image quality and compression. When you’ve found it, click save.

Wrapping Up

Of course there are many more tips and creative ways you could prepare your image assets to get better and more dynamic Divi Builder posts and pages. If there is something you’ve seen us do in our Divi demo pages feel free to ask us about it in the comments section below and we’ll write a follow up post to show you how we did it.

Also, be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Divi 100 Day 50

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0