The good news: your client has found the perfect photo that they love. The bad news: it doesn’t have any white space for text.
Here are 3 simple solutions to get you from THIS
to THESE:
1. Fade
Fade out the side of the photo into a colored object beneath it
This is a simple and effective way of extending a photo in a way that looks natural. It can even be done straight within InDesign, without opening Photoshop.
Create a rectangle behind your photo with the color your image will fade into. Then create a mask over the image fading it to nothing above the color layer beneath it (in InDesign you would use the gradient feather tool but the effect is the same).
This will look the most natural when you have an image that already has a reasonably solid color on 1 side.
Once you get familiar with this technique, there are many ways to apply it: You can fade to a solid color; fade to a gradient to match your image; duplicate and reflect your photo and fade the 2 edges into each other so that the texture seems to continue, etc. Just do what works best for your photo.
2. Extend
Extend the edge of the photo through Photoshop’s Content-Aware feature
This incredible feature is built into Photoshop. Photoshop’s AI analyzes your photo and continues your image throughout the selected area. This works best with simple images since it will sometimes repeat objects or patterns that it sees near the selected area (so you might end up with 2 menorahs).
The first step is to duplicate your image because you’ll be rasterizing it and don’t want to lose the original. Rasterize your layer (this feature doesn’t work with smart objects). Extend your art board to your desired width. Then select the area you want Photoshop to create image within - select an area adjacent to an existing part of your image for the most natural-looking effect (not a randomly floating section with no pixels around it for the AI to pull from). Head to the top menu to Edit --> Fill, choose Content Aware and select OK.
And let Photoshop work its magic.
If you’re unhappy with the results - play around with it. Select a smaller or larger area or try a different side of the image first. It takes some practice before you become intuitive at predicting how the AI will react to a given photo. And remember - you’re already in Photoshop so you can easily touch up your results to perfect them.
3. Overlay
Black or color overlay with a lower opacity
Done subtly, this can make your text legible while still keeping the image visible and impactful. Mess around with layer effects to see which works best for your image. The most effective options are usually Multiply or Overlay but sometimes other effects create more unique results.
So, to review, here are some ways to make a seemingly not-design-friendly photo into a beautiful website banner:
Fade your image to a solid color
Extend your image using Photoshop's Content-Aware
Add an overlay to your image
Have another idea or technique? Let us know at frockinstock@gmail.com
Additional reading:
Comments