A Picture Is Worth 1,000… Dollars.

Let’s face it, choosing the perfect photo for a fundraising campaign can be a nightmare. It works for the layout of the newsletter, but not the blog, or it works for both of those, but not the donation page. And let’s not forget the versions you need to crop uniquely for social media. Or the ways the same imagery needs to work for digital ads… And the list goes on. 

How do you pick the perfect photo for all your marketing channel needs? Well, the reality is, you might not be able to, but I’ll share some tips and tricks here to help make it a little easier.

While choosing the right images for your campaign can make or break the success of your fundraising strategy, finding a single image that works across the board is difficult. You may find yourself giving up and selecting a different image for certain channels, just to make it work. Next thing you know, your campaign just doesn’t feel… cohesive.

Using artwork on your donation page that matches your email, digital ad, or even direct mail piece is an important part of making campaigns feel consistent. It helps the donor stay on track to making their donation.

So if you’ve got a tricky photo you need to use, let’s look at ways to make it work within Classy’s donation page template.

IMPORTANT PHOTO ELEMENTS TO CONSIDER

Selecting the right image starts with your brand, the message you’re trying to communicate, and who the audience is that you are targeting with your campaign. That being said, here are some basic things to remember when choosing an image for your campaign:

• Eye contact: Humans love eye contact. Okay, I just lost all the introverts in the room, but as a fellow introvert, hear me out. Images that have eye contact are more powerful, emotional, and moving than images that do not. I don’t care if it’s a baby, an adult, or a pet, photos where their eyes connect with yours are nine times out of ten better than the exact same image without eye contact. The only exception to this rule would be for relevance.
• Relevance: It may seem to go without saying, but the image you choose needs to be related to the topic of the campaign. If your campaign talks about meeting people’s needs, either show the need, show the need being met, or show the results of the need being met. 
• Supporting Content: Remember to back up that relevance with a supporting quote or stats in your page content. It doesn’t have to be lengthy, but mentioning something in your page content can connect the already powerful image to the overall campaign, resulting in a stronger message.

Looking for other photography tips? Check out my post about How to Shoot Great Photos.

GETTING CREATIVE WHEN THE IMAGE ISN’T QUITE RIGHT

One of the most frequent issues I experience with imagery in campaigns is a photo that just doesn’t work for the space I need it to fit. But it’s a great photo, the photographer worked hard to get it, they’re so proud of it, and you don’t want to be negative by saying it won’t work. So what do you do? 

First, Examine the Photo

First and foremost, you really have to take a hard look at the photo to see if you can make it work. Most often the experience that I have is that a portrait image is delivered to me, and I need to make a few landscape crops for Classy, the Facebook Share image, possibly the blog feed featured image, and if necessary, a large blog hero image.

Here’s the key things I am looking for in a photo that I can make work:

• A non-busy background: Is the background a repeating texture like brick, or a solid color? Is the background blurry enough to “forgive” a little Photoshopping? Can I add blur to the background to make my edits less obvious? Are there shadows in the background I need to take into consideration?
  • This can make or break the image. I try to avoid images with a repeating texture in the background, unless I can add blur to make any Photoshopping edits less noticeable.
• Shoulders: You’d be surprised how often this is a problem. Portrait images where the person’s shoulders are cut off at the edge of the photo are notoriously difficult to photoshop into a landscape orientation background image, especially for our large blog hero image and Classy background images.
• Headroom: Does the subject in the photo have headroom I can work with? Or is the top of their head cut off by the framing of the image? 
  • For our purposes at Denver Rescue Mission, having no headroom on an image is almost always an automatic “No” to using an image. You’ll see why that’s such a problem later in this article.
• Quality/Resolution: This is kind of a given, but I will mention it anyway. Our blog hero is 1,500 pixels by 1,000 pixels. And Classy background images are 1,280 pixels by 720 pixels. If the resolution of the original image isn’t larger than those, it’s not going to look good. Scaling small images up to larger sizes will only result in a grainy, unprofessional look. So make sure you’re getting as high of a resolution image as you can.

Extending the Background

Once you’ve determined that the photo has a good background you can work with, one edit you might consider making is extending the background to force a portrait image into a landscape canvas. This can be done in a few ways, but a photo editing software like Photoshop is really a must in this situation. Free tools like Canva and open-source software like GIMP may not cut it, so if you can get access to Photoshop, do it.

The simplest way to extend the background of an image is simply to take a slice of the background and stretch it. This only really works if there is no texture in the background, and if there are not background elements like trees, doors, people, etc.. Solid color walls are pretty forgiving, and so are slices that only have a horizontal element like a table or a countertop. Since you’re stretching a section of the image horizontally, the horizontal lines in the background can remain fairly consistent over a short distance. Watch for perspective changes though, especially on things like drop-ceilings and the edges of tables. The goal is to make the edit look as seamless as possible.

Example:

Subtle Gradients Are Your Friends

I almost cringe even writing this, but sometimes you just have to use a gradient to hide or improve an edit. One bonus is that a half-transparent gradient can also blend some of the pixel detail in our image together, resulting in a smaller and more mobile friendly image file size.

Personally, I try to stay away from fading an image to a solid color. That’s just me, and on some level our brand at Denver Rescue Mission. We use a lot of large images in our work, and having a gradient fade to a solid color can make the image look a little dated. 

That being said, a gradient to slightly darken the area of your image that will be covered with text or a form is totally fine. This can also have the added benefit of helping to hide any Photoshop edits that don’t quite look realistic. As with all photo editing techniques, less is more. Doing something subtle and intentional can really help improve an image.

Replacing the Background

There may be times that the subject of the photo can’t be changed, and the background can’t be extended digitally. In those instances, you can consider just replacing the background altogether. This works especially well on medium close up images where the background is already slightly blurry, but I would call this a more advanced Photoshop technique, so don’t feel bad if it doesn’t work the first time you try it. 

These days, Photoshop’s Quick Selection tool is really smart, and it can be a good way to start selecting out your subject from the background. Be sure to select any foreground objects that the subject is interacting with, like a table or things in their hands, etc.. Imagine an invisible horizontal wall sliding in right behind the subject’s back. Anything that would normally be on your side of the wall with the subject should probably be included in your selection. Watch for any part of the subject’s clothing that is a unique color or has a hard edge to it. I can’t tell you how many times a name tag or a color block in someone’s coat has missed being selected because the colors of the clothing had a lot of contrast in that area.

Next, you can right click on your selection and use the Select and Mask tool to very slightly feather the edge of your selection, smooth the edges, and maybe even move your selection box inward or outward a little to compensate for any dynamic shapes in the subject’s outline. Click okay to commit those changes to the selection. 

From here, you want to right-click and choose Layer Via Copy, in order to preserve the original image for later use if necessary. 

Now it’s time to choose a new background image. You want to choose something that matches the colors, tones, lighting, and mood of the subject as much as possible. If it doesn’t, you’ll end up with an obvious Photoshop edit, and you probably won’t be happy with your work. Sometimes you can use a wide shot taken the same day in the same location as your original photo. Those tend to be the best options. But make sure the perspective of the photo you select matches at least somewhat the perspective of the original photo. For example, if your photo was taken at around table/sitting height, don’t select a new background image that’s taken from a really high or really low angle. You’re trying to basically create a photo out of two other photos, so you want it to be as consistent as possible.

Insert your new background image behind the cut out of your subject. Since both photos are in focus, it’s going to look awful at first, but don’t worry. We’re going to fix that.

For adding blur to mimic depth of field from a camera, you have a few different options. Essentially, a realistic blur will have things in the foreground of your shot be less blurry than things that are “further away” in the shot. Here’s a great tutorial on one of the many ways to create this effect:

Example:

For this image, the original photo had a background that was too busy to extend, and there were no wider shots in the set from that day. So I asked a chef who works at that location (about 60 miles away) to step outside and snap a photo of the street for me on her phone. Since the weather was nice, and the time of day was similar, the new photo wouldn’t look out of place. Then I used that as a background for the original photo, adding blur to the background to give the appearance of depth of field.

*At the time this campaign was running, we were not using Classy, which is why the height of this final composite image is so small.

Composite image to widen the photo.

Replacing the Image: A Strategic Retreat

Sometimes, you have admit when you’re outgunned, accept the loss, and move on. Some photos just don’t work for certain channels, and that’s okay. If you’ve tried the tricks above and it’s just not working, see if you can select a different image. Even if it’s a different image of the same person, that’s totally fine. If you encounter this situation, chat with your photographer about future images and what your needs are. Chances are, zooming out and taking at least one wide shot of a scene next time they are out capturing photos won’t be a big deal for them. As a former photographer myself, I can say that kind of creative input and direction is really helpful and it improves the skillset of the photographer too. 

And finally, if you’re just not happy with it, switch it up. If your skill level isn’t high enough to make a certain photo work, try a new one. Find a photo where your skill level and these tricks will work, and go from there. Find opportunities to practice these things, and your skill level will improve. 

Just remember to not waste your time trying to make something work when the photo just isn’t right.

FREE DOWNLOAD: CLASSY BACKGROUND “SAFE-ZONE” TEMPLATE

All of that being said, working within Classy campaigns can throw a wrench into the mix. Because of how the background images work in Classy, a great looking image cropped to the right size can still have portions of the image cut off by the edge of the browser or covered by the donation form.

For Denver Rescue Mission, we decided early on to have Classy customize our donation page templates for us to remove the FAQ box entirely. The default FAQ box floats on the right side of the screen and makes the “safe zone” of the background image, the part that will appear on most screen sizes, really small.

So that leaves the whole right side of the donation page as a safe zone for the subject of the background image. Here’s an example of a nice image that just doesn’t work as a Classy donation page background. 

Don’t get me wrong, it’s a beautiful photo. And the added graphics to match the design of the print newsletter are a nice touch. But on the Classy page, it looks like this. Part of the subject is covered by the form, his head it cut off short at the top, and the whole subject would be covered by the FAQ block if it was there.

What we need is to determine what the “Safe Zone” of the background photo is, so that we can design the background images to fit perfectly every time.

To figure out what that safe zone actually looks like on a 1,280px by 720px image, I created a measuring tool in Photoshop that used a 20px spaced grid vertically and horizontally. Then I uploaded that as a background graphic and incrementally changed my browser window width from desktop to the mobile window size, watching for which parts of the measuring grid stayed visible at all times. Within that space is the Classy donation page background image safe zone.

It turns out that space is a rectangle measuring 400 pixels wide and 600 pixels tall, aligned with the bottom right corner of the Classy background graphic. So now, all I have to do is draw a rectangle that size on my canvas and make sure the subject always appears within the left edge of that box. And my background graphics look great across all screen sizes.

Example:

And here’s what the background image looks like when the subject is placed within the safe zone template. Notice his face is fully visible, the form doesn’t cover any of his face (even on smaller screen sizes) and his head has a good amount of head room from the top of the page.

Of course on mobile the Classy donation form completely covers the background image, so that sort of solves the mobile-friendly issues that would otherwise come up.

It turns out the safe zone for pages that include the FAQ box can be extremely small if you have a lot of FAQs. But If you want it, I’ve included a download for that template in the download available below.

My hope is that these tips and templates make it easier for you to create background graphics for your campaigns. If you want to know more about creating custom hero sections for Events in Classy, check out my blog, Advanced Classy Layout Templates (Part 1), for details. Because custom hero sections in Classy require custom coding, I’ve created some code templates for those types of campaigns as well. You can download those HTML/CSS templates from that blog post.