• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 13. Preparing Images for Two-Colo... > For the Web: Creating two-color Web ...

For the Web: Creating two-color Web graphics

Two-color images are used in print to keep costs down and expand the tonal range of grayscale images. Even when printing costs aren’t an issue, you can use two-color images for effect. Try this technique in ImageReady for creating effective two-color graphics for the Web that deliver maximum impact without increasing the file size. You can start with an image in Photoshop, or you can work exclusively in ImageReady.

For a duotone effect, start by creating a grayscale image in Photoshop or by desaturating an ImageReady image. To convert your color Photoshop image to grayscale, choose Image > Mode > Grayscale.

In ImageReady, it’s not possible to create a grayscale image, but you can use the Image > Adjustments > Desaturate command. ImageReady supports only RGB files. Even an image that may appear to be grayscale in ImageReady is actually an RGB file.

In Photoshop, choose Image > Mode > RGB Color to convert your grayscale image to RGB mode.

In the Layers palette, click the New Layer button () at the bottom of the palette to create a new layer. Then drag the new layer into position below the grayscale image layer.

In Photoshop, if the grayscale image is the Background, you must convert the Background to a layer by double-clicking the Background in the Layers palette and naming it in the New Layer dialog box.

In the image, fill the new layer with a second color, using a two-step process:

  • In the Color palette, enter values for the color to set the foreground color. (Or, you can select a color swatch in the Swatches palette.)

  • Press Alt+Delete (Windows) or Option+Delete (Mac OS).

The new foreground color fills the new layer.


There are several other ways to fill a new layer with the selected color, such as choosing Layer > New Fill Layer > Solid Color, or selecting the New Fill Or Adjustment Layer button at the bottom of the Layers palette and then selecting Solid Color on the pop-up menu.

Select the top layer of the image and choose Multiply from the Layers palette mode menu.

Multiply mode looks at the color information in each layer and multiplies the base color by the blend color. The resulting color is always darker. Multiplying any color with another color produces progressively darker colors.

Duplicate the top layer by dragging it to the New Layer button at the bottom of the Layers palette.

Grayscale image with color layer beneath

Duplicating the top layer

With the new layer selected, choose Hard Light from the Layers palette mode menu. This mode brings out the color underneath.

Hard Light filter applied

This technique works most effectively on the top layer of an image with the Hard Light mode applied. Hard Light mode multiplies or screens the colors, depending on the blend color. The effect is similar to shining a harsh spotlight on the image. If the blend color (light source) is lighter than 50% gray, the image is lightened as if it were screened. This is useful for adding highlights to an image. If the blend color is darker than 50% gray, the image is darkened as if it were multiplied. This is useful for adding shadows to an image.

Select the middle layer. Choose Image > Adjustments > Levels, and adjust the histogram using the sliders to let more or less color from the bottom layer show through.

If desired, decrease the opacity of the different layers and note the effect.

Save the file in the GIF file format for the Web, optimizing the file as needed.

As a variation, select the dodge or burn tool and adjust one detail or object in your image at a time.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint