WolfPup takes a Bite out of Spam!

Back when WolfPup was first designing his alter ego, he graciously invited us pen-&-ink types to have a try at rendering the big guy. Here's one result.

Hope you don't mind, 'Pup, but Mistress Cyn, uh, "suggested" that she should accompany her favorite lycanthrope. And I sure wasn't about to try to tell her no! 8^D*

Technical notes: As usual, it's direct-to-digital, via cheapo PC, Wacom tablet, and Photoshop.

I discovered yet another old friend hiding in the Photoshop toolset, under an assumed name: a flexible-tip porous-tip pen. Adobe claims it's a pencil, a few pixels wide, with the pressure sensitivity set to vary size. But I know better-- it behaves like the Flair™ pens of my childhood! (When the whole tip was fiber, before Gillette put those stupid white plastic collars on them in the late 70s/early 80s.)

It was great fun inking in the happy couple, whom I had originally drawn with a virtual pencil (narrow Photoshop paintbrush, pressure varying the opacity.) The spambot was virtual fiber-tip pen throughout-- wheeee! This is the truest to my pen-&-ink style I've yet gotten out of Photoshop-- indistinguishable, in fact, from a scan of one of my fiber-tip pen drawings. Uncanny...

Actually, it feels a bit livelier-- more of a sketch-like energy-- thanks to the freeing effect of digital erasers. Bad line? So what? Undo, or use a perfect erase! No clumsy white-out fumbling and glopping.

I decided on a flat area color scheme, for the full cartoony effect. This led to GIF outperforming JPEG, for once. JPEG just gets confused by all that solid color stuff-- it showed hideous artifacts, even with the quality cranked up to where the JPEG's file size exceeded the GIF's.

Still, I used up somewhat more bandwidth than I usually do-- but I'm hopeful that it was worth it. 8^j*

Gnabbist

Welcome Back, Imaginos!

Welcome back, Imaginos! Before your move, you asked about the possibility of a Lara or a Leeloo picture. Well, since you didn't specify an exclusive or (heh heh)-- here are both of them, just after a shipping crate has broken open.

gnll4i00.jpg - Sketch, grayscale; L & L & whatever that thing is. In response to an Imaginos request. (Albeit a delayed response...)

My usual 2-pixel-paintbrush "pencil" sketch, although I did resort to using separate layers for the ladies. I expect I'll color this, after a bit more cleanup. Still, I couldn't resist posting the sketch version-- before I crush the life out of it reworking it, very likely... (Kidding, but not quite kidding.)

Gee, I could have sworn I ordered an andro-erotic life form, not a gyno-erotic one...

Gnabbist

Step 5 - Start the Fun!

[ Previous | Next ]



Add a new color layer behind the line art.

Then...
	Save your new .PSD file!

And start coloring! Have fun!

[ Previous | Next ]

Step 4 - Clean Up

[ Previous | Next ]



Switch to the Channels palette and delete the temporary channel mask you made in Step 1.

Having this channel mask in your file will cause Photoshop to restrict your choices of format later, when you're converting it into a postable .JPG or .GIF file. It won't even allow you a .JPG choice, and it'll use the channel mask to set transparency bits on your .GIF! (Usually hideously.) Merely flattening the layers won't remove it. (It's not a layer, it's a channel.)

This is the sort of thing that will drive you crazy at a quarter past unconscious in the morning, until you get used to using extra channels.



Switch back to the Layers palette. Make sure the Background layer is the active layer.

Next, we'll empty out the background layer, since the info's in your line art layer now.



From under Photoshop's main Edit pulldown menu, choose Fill... Use whatever color you like, at 100% opacity.

[ Previous | Next ]

Step 3 - Copy the Line Art

[ Previous | Next ]
In the Layers palette, make sure "New Line Art" is the active layer. I'm also going to hide the Background temporarily, by clicking off the little eye icon to the left of its name. Under Photoshop's main Select pulldown menu, choose Load Selection...



We want to load from the channel we made, "Line Art Channel mask." Click the OK button.

Photoshop's famous marching ants appear.

Make sure you're painting with the color you want your new linework to be. Here, I'm using black. From under the Edit pulldown menu, choose Fill...



Use the Foreground Color, at 100% opacity.

Under the Select pulldown menu, choose None, to dismiss the ants.

She's back!

[ Previous | Next ]

Step 2 - Add a Transparent Layer

[ Previous | Next ]



Make a new layer in the picture, using the Layers palette menu's New Layer... option.

I'm calling the new layer "New Line Art." (The other default values are fine.) Click the OK button.

By the way, don't be concerned by that 'Opacity 100%' setting-- that only applies to the new pixels we'll add later.

Right now, the layer is filled with transparent pixels, which is most of what we want. Think of it as being like the "cel" plastic that an animator uses. (The name comes from "celluloid.")

In the next step, we'll copy the line drawing onto this "cel."

[ Previous | Next ]

Step 1 - Make a Temporary Channel Mask

[ Previous | Next ]

We're starting with a simple line art image, which only has the one "Background" layer.



In the Layers palette, make sure the Background layer is selected. (Hey, it doesn't have much choice!) If you don't have a Layers palette, use Photoshop's Window pulldown menu, and click next to Show Layers.

Switch from the Layers palette to the Channels palette. I'm usually working in RGB mode by now, so all three channels-- Red, Green, and Blue-- show as selected. Select just one channel-- I'll click on Red here.

I did that so I could use the Channel palette menu's Duplicate Channel... option. (Which won't work with all the RGB channels selected.)

Check the Invert box, and give the new channel a name; I used "Line Art Channel mask." (Original, huh?) Click the OK button.

The result looks like a photographic negative of the original linework. 

Click on the RGB (master) channel, to put the view back to normal, and switch back to the Layers palette.

[ Previous | Next ]

Line Art on a Transparency

The Problem:
Okay, so we've obtained a line drawing-- pencil, pen-&-ink, or (as in this example) something in between. It's a single-layer picture: all of the information is right in the "background" layer, as Photoshop calls it. If I were to start painting directly onto it, even with a semi-transparent tool like the airbrush, eventually I'd cover it up. Indeed, almost immediately, the paler grayscale values in her hair, shadowlines, etc., start to disappear.

And there she goes, fading away under a green mist... What to do?

One Solution:
In Photoshop, we can copy the line art onto a mostly transparent layer. That way, we can add the color behind the line art layer, so we can't cover it up accidentally.

In other words, instead of opaque black, opaque gray, and opaque white pixels, we'll end up with opaque black pixels, semi-transparent gray pixels, and completely transparent pixels-- what I refer to as "line art on a mostly transparent layer."

The following is a brief synopsis of the method I use. If you're familiar with Photoshop jargon, you can just print out this list and be done with this tutorial. Or, if you prefer, follow along as I demonstrate each step.

• Step 0 - Get your Line Art
  Get some line art into a plain old flat, single-layer, background-only Photoshop image.
• Step 1 - Make a Temporary Channel Mask of your Line Art
  Switch to the Channels palette, pick one channel, and Duplicate it, with the Invert box checked. Display the ordinary channel(s) again (either click on RGB, or click on Black, if your image is still grayscale.) Switch back to the Layers palette.
• Step 2 - Add a Transparent Layer
  From the Layers palette, add a new layer. Make sure that it's the currently active layer.
• Step 3 - Copy the Line Art in
  Under the Select pulldown menu, choose Load Selection... Load from the temporary channel mask you made in Step 1. Click the OK button. Photoshop's marching ants appear. Make sure you're painting with black. From under the Edit pulldown menu, choose Fill... Use the Foreground Color, at 100% opacity. Under the Select pulldown menu, select None.
• Step 4 - Clean Up
  Switch to the Channels palette and delete the temporary channel mask you made in Step 1. Switch back to the Layers palette. Empty out the background layer, since the info's in your line art layer now.
• Step 5 - Start the Fun!
  Add a new color layer behind the line art, save your new .PSD file, and start coloring!

[ Previous | Next ]

Tutsie

For my "Line Art on a Transparency" tutorial.

Gee, folks, I apologize for the relatively *small* size of these files lately-- I think I've been doing images for the web too long...! 8^j*

This is even at full size, just as I drew it, directly into Photoshop. One layer-- now *that's* an odd thing to do for a "layers" tutorial, isn't it? Of course, the point was to show how to take a piece of B&W line art and apply it to a mostly transparent layer, to allow you to color behind it. I used a 2-pixel paintbrush, with the pressure sensitivity set to vary opacity, as a waxy-colored-pencil surrogate. Since I was painting on just the one layer, I used the "x" keyboard shortcut to swap colors between black and white, to have an eraser always handy.

I tried the "big eyes" effect here-- although that always gets my mind's eye picturing the cranial anatomy of small nocturnal primates! Looks like the net effect was a standard toon elf. If I were to point up her ears a bit, she could probably survive the trip over to our sister group, ABPEC.mythical-creatures.

I also see a vague celebrity resemblence, although an "elfinized" one. I'd be curious to hear if anyone sees it, or other ones I haven't thought of. Speculations?

I'm working on a colorized version, to act as a "final result" illustration for the new tutorial. If any of our colorists feel like taking a try, please do. Again, I apologize for the diminutive full size of this image. But hey, if you use my "temporary channel mask" tip to get the gray pixels properly semi-transparent, no problem, right? 8^D*

Seriously, using Image Size with 'Nearest Neighbor' mode would let you double or triple it for more elbow room, without introducing artifacts when you resize it back down with 'Bilinear' or 'Bicubic' mode.

Gnabbist

Construction Worker

I finally built something a little more interesting for my archive site's entry page...

Annoyed by baggy overalls? Cutoff T not translucent enough? No problem!

Layers are our friends. Learn them; use them. 8^D*

Gnabbist

Rajina (with Tutorial Commentary)

Here's my second "student pic" for our local airbrushing academy. (Hey, getting a bunch of artists together to swap ideas is a time-honored teaching technique.)

Being a beginner at this airbrushing, I hit a few surprises along the way. I think they might be helpful to other beginners, so I'll note them here before I start taking them for granted.

I started with a solid, flat base color layer for each object, as Bigboote recommends in his tutorial. Also set up a simplified outline drawing layer, a "lights" layer, and a "shadows" layer (for each object.) With only those four layers and a dummy blank background displayed, I selected the dummy background color and inverted the selection, so my subsequent thrashing about would stay inside the lines. 8^D*

I used Bigboote's suggested variation on his Insta-Shade™ trick to initialize the "shadows" layer. Took my cross-hatched sketch (I'm an old pen-&-ink, graphite, and colored-pencil guy) and subtracted my simplified outline drawing from it (copied the outline into a temp channel, used that as a selection on the cross-hatch sketch layer, and 'cut' out the stuff under the outline.) Then I Gaussian-blurred the heck out of what was left. Thanks for the warning, Bigboote; it is a lot easier that way.

I kept my "shadows" layer monochromatic for this time around; I know some color theory, but I figured I'd better keep the number of variables simple for myself when just starting out. (Desaturated the layer to grayscale, then used Image - Adjust - Hue/Saturation to colorize it.) Since I used an olive-ish (a bit rich in the green) base skin tone, I used a dark, saturated red, with transparency of the layer set to 80% or so. That way I got some of the neutralizing effect of a transparent complementary color, so my monochromatic shading wouldn't be entirely lifeless. (Mmmm, color theory-- aglglaglll...)

The "lights" layer was also monochromatic; however, its transparency was set to 100%, so I could have fully opaque highlights where needed. Kind of like gouache on top of watercolor.

Then there was much thrashing about with monochromatic airbrush strokes.

Here's an UNFAIR ADVANTAGE tip: Set the eraser to airbrush mode, with the same 20% pressure setting as your regular airbrush tool. Then paint boldly, knowing you can gently back out any goofs. (Seems to me this feature would be difficult to duplicate with real media.)

I figured out why the blur brush tool has little to no effect on airbrushed layers. Airbrushing uses the layer's transparency channel to do its smooth-transition effects. The blur tool only affects the color info of the layer, not its transparency channel.

However-- here's another UNFAIR ADVANTAGE tip-- the Smudge tool does affect both the color and the transparency of a layer! I "cheated in" quite a few subtle adjustments by smudging my airbrush strokes, instead of erasing and repainting.

I did the modelling using the "shadows" first, then switched to the "lights" layer. Man, just like my first time using a white Conté crayon (pastel pencil) on colored paper! All you have to do is think where the light would fall, and paint it. Too easy.

Once the first pass of rendering was pretty complete, I decided to amuse myself by sticking in a solid black layer, to check out the "Elvis on Velvet" effect. Hilarious. But also useful...

UNFAIR ADVANTAGE tip #3: This is a great way to make sure your lights are at balanced, appropriate levels. I had gotten a little too heavy on the toe highlights, for example; against a black background, they glowed like beacons. A litle gentle dimming with an airbrush eraser, and they receded to their proper place. I couldn't even see that error against the ordinary skin midtones.

Naturally, I immediately checked the "shadows" layer against a white background.

Being, as I've mentioned, an old pen-&-ink guy, I kept my outline layer. I did soften it a bit with transparency. It'd also be interesting to try colorizing it, or a very gentle Gaussian blur, or both.

=WHEW!= Bigboote, I don't think you have an exclusive on rambling... (Don't worry, Imaginos, I'm archiving this note for eventual tutorial use, in case anyone else finds it useful.)

Anyway, I think those were the the nifty tricks I stumbled upon. What an education this group is!

Gnabbist

[Followed a few minutes later by...]

Oh no! An evil sorcerer has transformed the Princess into a golden statue! He then ran off, muttering some gibberish about "Gaussian blurs," "Image - Adjust - Levels," and "Find Edges." There was also a lot of nonsense about hue and saturation, too...

=Ahem.=

Well, since I still had the "lights" and "shadows" layers separate, I decided to try some color variations. Then it became a challenge to see if I could get a metallic effect just through transforms of layer copies-- i.e., no new airbrush strokes. Sadly, there are probably one-step filters available commercially to do this sort of thing. But, what the heck, I did it anyway. Fairly amusing.

It's too late at night here to write this up right now. (Thank your lucky stars: you've just escaped from another rambling diatribe!)

Gnabbist