The images on your site can have a tremendous effect on the overall look and feel of the site. Sometimes, just a simple, beautiful photo can tell a story. Our client, Grand Canyon Trust is one such example.
Images of the Grand Canyon is compelling and majestic, but it is definitely not the case for most websites. Whether you couldn’t afford a custom photoshoot or your work is abstract, stock photos probably make up most of the photos on your site.
With a few simple tricks, you can turn standard stock photos into a compelling and complementary visual language.
Adjust the color
Color/tone is one of the biggest giveaways that you are using stock photography. This is because the images are most likely from a variety of photographers with different styles in varying lighting conditions. Spending a little bit of time using software such as Photoshop or Lightroom ($9.99/mo bundled together) to standardize the overall tone of your images can make them feel like a cohesive group.
(Original Photo by Jeffrey Deng)
Make it black and white
Another way to adjust the color is to make the images black and white. It does a couple of things to the image:
- You lose the tone/color, making the images more consistent immediately. I like to use this trick for team pages because it makes headshots feel cohesive even if they are just photos employees provided themselves or they weren’t taken in consistent light.
- Black and white images also create a great contrast to everything else on the screen – color saturates designs, interfaces and other images, so by removing it, you are making your image distinct.
Make a collage
Sometimes, a single image doesn’t tell the whole story the way a group of images can. By assembling a collage rather than including multiple images in your page, you have complete control over their alignment and spacing. You will have an image that is calling out to be pinned on Pinterest.
Pro-tip: Using online tools like Canva or Pic Monkey make it easy to create diptychs/triptychs and free-form collages by simply dragging and dropping your files into their interfaces. There are even sites where you can buy collage templates for Lightroom and more. Currently, I’m loving the Tych Panel Photoshop plugin. I made all the image collages in this post with it.
Add text, texture or other subtle elements
Some creative manipulation can go a long way to help your images feel integrated into your site and part of your overall visual language.
Text for pinnability & pizazz
(Original photo by Sergei Zorkin)
Google can’t read the text in images, but people can. That text won’t help your SEO, but it will grab a user’s eye. Remember that because the text is invisible to Google & screen readers, you will need to repeat that title or copy elsewhere on the page.
Images with text tend to be successful on social sites like Pinterest, where the copy makes your image unique. It also allows you to integrate some brand typography into your image.
Add a border/frame
You’ll see this in use on this site to spruce up screenshots for our blog, which helps give screenshots a defined edge. This technique can open up a variety of visual options. Taking the time to add design elements consistently across your images will make a disparate group of stock photos come together.
Elements like this work best when there is a method to how you implement them – adding borders to blog thumbnails or finessing images for page block layouts. Don’t overdo this one – it can start to overwhelm your imagery.
Gradients, color highlighting
(Original photo: Daniel Ruswick)
Adding a colorful ombre gradient can turn a boring black and white image into a dynamic visual. Keeping just part of an image color can focus a user on a specific detail that might get missed if it was in full color. This technique can help you make great header images or attention grabbing hero/slideshow images and really makes a stock photo feel special and intentional.
Change the shape
(Original photo by Morgan Sessions)
Make your photo a circle or a hexagon and have an image that stands out simply because it isn’t a rectangle. If circles are present in your branding or logo, round images are a great way to integrate that shape into your design. And when you crop an image to a circle, you are now highlighting the best part of the image and making the photo work for you in ways it doesn’t appear on other websites.
Pro-tip: Circles have been a trend in web design for a while and often are made using CSS, but you can get the same effect with inline images by using shapes and masks in Photoshop or tools like Pixelmator.
Extend the background
How many times have you found a nearly perfect stock photo but the subject is in the wrong place in the image? Or the image is great but you need a bit more space so the subject doesn’t get cut off when you crop it to the necessary dimensions?
I know that it has been more times than I could count in my career. Don’t despair, it’s possible that image might still work!
This only works for images with blurred or simple backgrounds, but it does make it possible to take an almost perfect image and make it perfect. When the subject or focal point of the image is right where you want/need it, the image feels made for your site rather than something that you picked because you needed to fill a space on your site.
By implementing one or two of these tricks, you can take ownership of your stock photography. Put images to work for you and you’ll separate your photos from the pack. What’s your favorite way to make stock photos feel integrated into your site?