Low Contrast Images for use as Backgrounds

lc00
A lot of times I have students propose putting an image behind text in order to give the page interest. Its a fair enough request, but one that introduces a lot of problems in comprehending the text. Sometimes, they will lower the opacity of the background or throw a lowered opacity white fill under the text but it usually doesn’t help. Full color Images have a variety of tone and color and as a background makes reading the text extremely difficult. The difficulty arises because in order for text to be legible it needs a consistent background that offers decent separation between the positive space (the text) and the negative space (the page), if you have a variety of contrasts as the background it acts counters to comprehensionĀ . One way to remedy this is to prepare a low contrast image with a single color.
To prepare the image follow the steps below, you can vary them based on your aesthetic and design intent.
1. Open your file in Photoshop, it should be to scale for your intended layout.
2. Go to theĀ in the Layers Panel go to the Layer Adjustments and click on Black and White, balance out the lights and darks for each color to bring out enough information about the image. This will vary per image depending on the content – you might want to make the blue in skies darker, or lighten green grass etc…
lc01
3. Go to the Layer Adjustments and click on Levels
lc02

4. At the bottom of the Levels Properties Window are the output levels, we will be using these to reduce contrast. Output levels works by clipping darks and lights to values that are within the grayscale range, by dragging the black point towards the center for instance you can now tell Photoshop that there will be no colors darker than a certain grayscale level, the same is true for the white point. By sliding the black and white points towards each other you will lower the contrast in the image.

 If you keep the points closer to the right, you will have a lighter low contrast image

If you keep the points closer to the right, you will have a lighter low contrast image

If you keep the points towards the left you will make a darker low contrast image

By keeping the points towards the left you will make a darker low contrast image

By keeping the points in the middle you will create a mid-tone low-contrast.

By keeping the points in the middle you will create a mid-tone low-contrast.

Adjust the output levels based on keeping enough detail, while keeping the contrast low.
5. Make a Solid C0lor Adjustment Layer using a color that works within your color family.
lc03
6. Change the blending mode for the Color Fill layer to either Screen, Overlay or Color

Screen will replace all darker tonal information with varying shades of your chosen color,

Screen will replace all darker tonal information with varying shades of your chosen color,

Overlay will replace dark and light information with variations of your color

Overlay will replace dark and light information with variations of your color

Color will use the hue and saturation of the color fill layer and use the luminosity (brightness) of the layers below

Color will use the hue and saturation of the color fill layer and use the luminosity (brightness) of the layers below

7. Save the file as a PSD and use this as your background for text in InDesign
lc05
NOTE: by using layer adjustments – which you should use as much as you can – you can go back and adjust black and white contrast, output levels, the color fill as well as blending modes to make a better match for your design.

Leave a Reply

Your email address will not be published. Required fields are marked *