Craftint and Duoshade Tones in Photoshop

Craftint doubletone paper (DuoShade is another brand) is one of those things an ink illustrator had in their toolbox before the advent of the digital toolset or even rubdown tone systems like Zip-a-Tone. It wasn’t cheap and it gradually fell out of use.

Howard Chaykin has used it quite often in the past, though he preferred the graphite/charcoal pattern over the hatched lines I’ve chosen to work with here.

Craftint doubletone had two patterns on it. Apply the first chemical to it with a brush and the first pattern was revealed. Use the second chemical and the other pattern came up. It required careful planning and tone management, because once the tone or tones were revealed your only option was to take it to white or black. Erasing and reapplying tone wasn’t possible. Photoshop overcomes these limitations with unlimited undos and redos.

I’m going to walk you through how to set up a file in Photoshop to create your own toned artwork. I’ve created a package of the files shown here you can download and experiment with. Some things I’m going to explain in detail, and some are basic Photoshop and Illustrator knowledge you can acquire on your own.

---

Preparing Your Art

For the art, I found this scan of a 1951 Alex Toth page on the Heritage Auctions site.

Alex Toth, “I Struck It Rich”, Page 1, Personal Love. No. 11, Eastern Color, 1951

Art cleaned up and made production ready with solid blacks and clear whites. All panel borders were re-drawn. The rather stiff Leroy drafting lettering has been replaced with Blambot’s Silver Age typefaces and the title has been re-set in Stuart Sandler’s El Ranchero.

The basic production task of making sure your art is clean – with black blacks and white whites – is a standard of most comic books. I’ve chosen this page specifically because it has open white spaces and bold, simple linework.

If there were a lot of feathering and tones in the artwork itself, you might not want to layer additional tones on top as we’re going to do here. You’d likely be creating a muddy impression that wouldn’t display or print well.

Additionally, if you’re going to colour the art after adding tones, you’ll want to keep in mind to use brighter or lighter colours as opposed to muted or dull colours with black in them which would add a grey element to the presentation. Here, tones are the grey component.

---

How to Set It Up

These are files in the download. Clicking on the orange button gets you a copy.

Download Contents: Scan of the original art, the left-handed tone, the right-handed tone, production-ready lineart, final toned art

In this case, the tones are mirror images of each other. They can be used separately or combined to make a darker tone.

Tones can be lines – or hatching – as they are here. They can also be textures, spatters or other patterns which combine together well.

Tones can be created in a graphics program or scanned in from a physical source. The included tones were created in Illustrator. Instead of using a plain line, I stroked the line with an Illustrator brush to give it a less mechanical feel.

Sizing is important. I recommend you do toning as the last step before you go to print or share it on the web. Even more critical is to do toning at the size and resolution of the final output. For example, comic books typically have the art on the page at 6″ x 9″ and are printed at 300dpi. For the web, sizing varies, but my site uses images 1200px wide with an approximate resolution of 100dpi on many devices..

The reason why it’s important to create tones at output size is to test if your tones will be effective. Do they fill in or fall apart at final size? For the included tones, I experimented with line thickness and the space between each line. I considered clarity, boldness and balance with the art’s line weights.

As Illustrator is not dependent on resolution, it is only the art dimensions which matter. Making your tone files the same dimensions as the art files – either in inches or pixels – ensures a trouble-free import into Photoshop. There is no scaling or distortion. Here, the lineart is 1200 x 1792 px. So I made the Illustrator file the same dimensions.

With your lineart.psd file open, either place or drag & drop the left tone.ai file onto the art. Typically, this will create a new layer over top of your art with the tone covering everything.

Here the left tone.ai file has been imported into Photoshop and is sitting above the (D) Art. With the (B) Left layer selected, set it to (A) Multiply, which merges the appearance of the tone with the lineart.

Now we need to add a mask to the layer so we can control which part of the art gets toned. With the (B) Left Layer selected, click on (E) to add a mask to the layer. Nothing will change on the art, but now a white box is linked to the layer.

Select the (C) Mask on the (B) Left layer. Set the Color Picker to Black and using the Fill tool, click on the art. The tone will disappear, and in the Layers palette, the (C) Mask turns black.

Repeat the steps above to import the right tone.ai file.

Your final set up will look like this. In column (B), you see that pieces of the mask have been removed to reveal the tones. So onto the next step.

---

Working with the Masks

Masks can be manipulated in many ways. For our purposes, we want to keep things crisp and clear, so we’re either hiding or showing tones, and we’re not fading things in or out.

Masks operate in reverse to drawing. (A) White reveals the tone, while (B) Black hides the tone. With the Mask selected, you’ll be switching back and forth between White and Black as needed.

I recommend using the Brush tool – not the Pencil tool – for painting. Set it to approximately 75% hardness. This will anti-alias your line ends without making them look like they’ve been cut out with scissors, or looking so soft they’re fading. As with anything, experiment until you have something you think fits well with your artwork.

---

Building Up Tones

What you tone and how you tone is up to you. With this page, I used tones to indicate lighting and mood, and to enhance where the eye goes in each panel. I started with the Left layer to indicate the basics, and then brought in the Right layer to make certain areas darker. After that, considerations of which angle worked better in certain spots meant erasing things on the Left and painting them in on the Right, and vice versa.

This Before-After shows the plain lineart and the left tone layer.

This Before-After shows the left tone layer and the combined tone layers.

This post was significantly updated in October 2018