• 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 give 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 > Adjust > Desaturate command. ImageReady only supports RGB files. Even an image that may appear to be grayscale in ImageReady is actually an RGB file.

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

Create a new layer and position it beneath the grayscale image in the Layers palette.

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 Make Layer window.

In the image, fill the new layer with the second color of choice.

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 result color is always a darker color. Multiplying any color with a 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 > Adjust > 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