CG Coloring Tutorial – Coloring Pencil Work

Discussion in 'The Drawing Board' started by Bic, Jan 6, 2004.

  1. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    CG Coloring Tutorial – Coloring Pencil Work

    Tools: Adobe PhotoShop 7.0; Wacom Intuos Tablet 12x12; Lots of Pepsi and Twinkies

    Work Area: 1280x1024 resolution

    Aloha All!

    Before reading on, I strongly suggest reading Discloner’s excellent coloring tutorial, which is laid it out in a simple to understand format and covers the basics of coloring. Also, Outlander’s “Basic Color and Color Theory!” is a must as well.

    This is not an official tutorial, per se, however I had some people interested in how I approach CG coloring. Also, as a warning, this is a project that will take over a course of a week or so, please bear with me.

    Since were using PhotoShop 7.0 (ver. 4-6 should work as well), I might as well give you a quick rundown of PhotoShop (PS from here on out). I should also note I use a Win2k based computer, but Mac versions will be identical except use the apple command key instead of the CTRL key when pointed out.

    First and Foremost – PS is a resource intensive program.

    Memory plays an important part here, so more is better. Just by doubling the amount of memory you’ll see PS perform tasks quicker, sometimes by about 25-45%!! This is the cheapest upgrade and for PS the most effective in my opinion. PS has its own memory management, so you can set how much memory PS should use. Edit -> Preferences -> Memory & Image Cache. (I use 70%, but you can vary it to what works best for your system.)

    While we are here, we might as use the drop-down menu and select the Plug-ins & Scratch Disks portion. A scratch disk is another name for virtual memory. In other words, a section of your Hard drive will be used if PS needs it. The scratch disk also is used to store a selection that is copied. So this means that you want some free space on your hard drive. For web work, usually a couple of hundred MegaBytes will be sufficient, but if you’re doing projects for print or video, then you want a couple of GigaBytes free.

    Note: It is preferred to have PS use its scratch disk on a separate partition or hard drive. This is due to Windows also having a scratch disk function and sometimes the two scratch disks just don’t like to get along.

    Tip: If resources are low, break up you project into various files. Do the background separately from foreground elements, or even panels on a page can be done this way and re-composited later.

    Secondly – Save, save, and save some more.

    I can not stress this enough. I have worked on a project for a couple of hours almost to completion when a black out happened. My previous save was still in the beginning stages, so I had to redo most of it. Saving is also a must, if you are going to experiment. PS only has a certain amount of undos before you are committed, so reverting back to last save is great security blanket.

    Tip: Set yourself a time limit for saving. I usually save every ten minutes.

    Third – Don’t be scared.

    PS can be overwhelming when you’re first starting out. Do not be afraid to experiment. The goal is to have fun while working on a project, if you’re not sure of a step or what to do next, save and just go wild. You’ll be amazed at what comes out sometimes.

    Fourth – Relax.

    CG coloring is similar to painting, it takes time. Take a deep breath, sit back and go to town. Also, choose a piece of art that speaks to you and that you will enjoy coloring.

    Tip: In PS, there are many different ways to achieve the same effects, so don’t panic when you get stuck, just try a different method.

    Well that intro was longer than I planned so let’s speed things up.
     
  2. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Step One: Choose Your Project

    [​IMG]

    In this case, Range Murata – Spheres (Last Exile 2nd). Here is an image that just screamed out ‘color me’. It’s a detailed pencil sketch of Alistia and Tatiana from the animated series “Last Exile”.
    Note: My working file is twice the size of the original file, about 3000 pixel high. I feel this allows me more control over this project.

    It is also important to note, that pencils renderings are not the same as ink renderings. Pencil has a lot more subtly and in most cases, more energy, whereas ink is very strong and bold and at times easier to interpret. So some planning is important at this stage even before you do a single stroke of color. I opted to go with full color option but leave the original line work intact. With that step done, we open the original image (or scan) and Select All (CTRL+A) and copy (CTRL+C). Next we close the file…. and never touch it again!

    Open a new file. Set the Image Mode to RGB. Now paste (CTRL+V). This creates a new layer with the line work that we copied on to it and it is a separate layer from the Background layer. You can name the new layer, example “Line Work”, by right-clicking on the layer in the Layer Palette and choosing Layer Properties. Also, set the Layer Mode to Multiply for now. I’ll get more detailed about the Layer process later as I will probably end up using about 30-40 layers in total; it practically deserves its own tutorial.
     
    #2 Bic, Jan 6, 2004
    Last edited by a moderator: May 16, 2005
  3. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Step Two: Determine your light source.

    This is a tricky area, as sometimes shadows in pencil work are not as clear cut as they are in inked work. In this piece I noticed some discrepancies in the shading. This is due to my belief that a nose line is on the side of shadow, which in this case is the opposite of the more rendered shadows on the figures.

    [​IMG]

    To help myself see this better, I created another layer under the Line Art layer, I used the Brush Tool (B) of about 13 pixels 100% opacity and 100% flow, choose black as my color and filled in just the shaded areas indicated on the image. With this done, I can see that our light source is above and to the left of Alistia and just above and in front of Tatiana. I opted to create a new layer and color where I think the light would hit our subjects with a light yellow. Since I had a pure white background and I knew my background would be sky based, I created a new layer under those and chose a blue and almost white for my colors. Then I used a cloud filter (Filter -> Render-> Clouds) and PS gives me some quick clouds. This really helped me get a feel of the lighted areas better.

    More coming soon….
     
    #3 Bic, Jan 6, 2004
    Last edited by a moderator: May 16, 2005
  4. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Step Three: Color Choices

    Since Alistia and Tatiana are established characters, we need to know their color schemes. This is where our trusty little friend, the internet, comes in. On the Last Exile website (Japanese version), there were some character images and wall papers which I snagged for reference. Then I opened those images into PS.

    In this case, I did a select all (CTRL+A), copy (CTRL+C), and paste (CTRL+V) into my project file for each reference image. (It is important to note that each image pasted will result in a new layer.) Then, after moving them around with the Move tool (V) so I could see them all (they were small images), I made all but the reference layers invisible by clicking on the eye besides each layer (grayed out is invisible; black is visible). On the top right of the Layers Palette is an icon of a right arrow on a circle (PS7), click on it and the Layers Palette Menu will drop down. Select Merge Visible. This merges the layers into a single layer (and saves memory).

    Next, we need to make a refrence color palette for our heroines. I went for the simple method of making the appropriate colored dots on a new layer. This is the easy part, just used the Eye Dropper tool (I) and select the color desired, then switch to the Brush tool, give it a decent size - 19 pixels in this case with same settings as before - and drop your color dot. Do this for each color that you need to. Once this is done, you could drag the reference layer into the trash can on the bottom of the Layers Palette, but I opted to keep it just in case.

    So in the end we should have something like this.

    [​IMG]
     
    #4 Bic, Jan 7, 2004
    Last edited by a moderator: May 16, 2005
  5. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Step Four: Quick Mask and Selections

    We have our light source figured out, our color palette set, and our girls are dying for some color. At this point we could just go for it and color it like a coloring book remembering to keep the colors in the lines, which is a more spontaneous form of coloring and can sometimes work really well. However, for this project I’ve already decided that in order to achieve desirable results I'm looking for, I need to use selections and block off my areas for coloring. I need to stress again that if you haven’t read Discloner’s coloring tutorial, please do so. In it he covered the basics of selections and the Magic Wand Tool (W). What we are going to do is expand on that process of selection, but take it from a different angle.

    As stated previously, there are many different ways to achieve the same effects. In this case, we want our line work untouched by our colors. The method used in Discloner’s tutorial is great for inks, but pencil work is a tad trickier. Another method is using a black line art channel, but we’ll leave that for another time. Earlier, we had set the Line Art layer to Multiply. What this does is make light areas transparent while dark values are opaque. Please note, this is not a black and white only feature, the lighter strokes will still show up as well as paper grain and so forth.

    For large areas, I use the Magic Wand tool and select the area I want. By holding down the Shift key, I can add to the selection by clicking on it. Likewise, if I need to subtract an area, hold down the ALT key and click on the area. By the way, this feature works with all the selection tools and you can mix the tools up and keep adding or subtracting. Now, we have our selection but what if our selection doesn’t reach the borders of the line work?

    Now we use the Lasso Tool (L) and holding down the shift key, add to our selection by following the line work. I find the best way for this is to work in loops, which is, follow the line work for a bit than loop back in to your start point but be sure to include a portion of you current selection. Don’t worry it’s not as difficult as it sounds, after a couple of tries you’ll get the hang of it.

    To assert a little more control on our selection process because we are working with pencils and not inks, we are going to use the Quick Mask (Q). I use it in addition to the selection tools, but you can also use it from the beginning to make your selection if you desire.

    [​IMG]

    When we use the Quick Mask (the right box highlighted in the example or ‘Q’), notice our selection area is white and the rest is reddish in appearance. Also note that our colors default to black and white. You can’t color in Quick Mask mode, you can only subtract or add to your selection, however, you can use the brush, pencil, and airbrush tools to do so. For our purposes I use a brush set a 1-3 pixels for small areas and of course larger sizes for larger areas. Use white to add and black to subtract from the mask by switching between foreground and background colors (X). Please note that brush dynamics are also part of the mask as well. Pencil gives off a hard edge, brush is softer, while airbrush is very soft edges. Once the area is masked off, in this case Tatiana’s jumpsuit, click the left box or ‘Q’ and the mask will be replaced by your selection. Make a new layer under the line art layer, choose the color you want, and use the Paint Bucket tool (G) to fill the selection with that color. Repeat the process for each section of color until all of your flat or base color areas are defined. It may be wise to name each layer to help keep your sanity.

    At this point check to see if you colors are solid areas, sometimes the pressure sensitivity of the graphics tablet can cause areas to not be completely filled. The easiest way to check is make a new layer (I named it ICK) under all the flat layers and fill it with a garish color not in your palette. You’ll see those areas pop up and after a quick touch up (always double check to make sure you’re working on the flat layer of choice and not the ICK layer) you’re done.

    [​IMG]

    I have minor surgery on Wednesday so the next installment will probably be on Thursday , so until then …remember to eat your Twinkies! :D
     
    #5 Bic, Jan 7, 2004
    Last edited by a moderator: May 16, 2005
  6. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    My apologies with this installment being a tad bit behind schedule.

    Step Zero – Layers and Layer Organization

    I’m going to backtrack a bit and talk about layers. Layers are the bread and butter of PS. They will be your best friend on any given project. So, just what are Layers?
    “Layers allow us to work on one element of an image without disturbing the others. Think of layers as sheets of acetate stacked one on top of the other (similar to an animation cel). Where there is no image on a layer, you can see through to the layers below. You can change the composition of an image by changing the order and attributes of layers. In addition, special features such as adjustment layers, fill layers, and layer styles let you create sophisticated effects.” - Adobe

    [​IMG] - Illustration of how transparent areas on a layer let you see through to the layers below. (Source: Adobe)

    Basically, we want each of our elements on separate layers. So make sure our Layers Palette is active (Windows -> Layers), if not already done so. Below is a quick description of the Layers Palette:

    [​IMG]

    A – Blending Mode (see below for more info)
    B – Layers Palette Menu (see Image)
    C – Opacity Control – Sets the Opacity of the Layer from 0% (transparent) to 100% (Opaque).
    D – Fill Control – Sets the Interior Opacity of the active layer (used in conjunction with the Layer Effects option).
    E – Visible Layer Icon – Active (Black), Inactive (Grayed out).
    F – Inactive Layer
    G – Layer effect – Adds Drop Shadow and other Effects to the Layer.
    H – Layer Set (see below for more info)
    I – Active Layer - Layer currently being worked on.
    J – Background Layer - You cannot change the stacking order of a background, its blending mode, or its opacity.
    K – Layer Effects Icon – This activates you Layer Effects options for you active layer.
    L – Add Layer Mask
    M – Create New Layer Set
    N – Create New Fill or Adjustment Layer
    O – New Layer Button – Creates a New Layer. You can also drag a layer to this icon to create a duplicate layer.
    P – Trash Can - Drag a Layer or Layer set to Trash Can to Delete the Layer.

    [​IMG]- Layers Palette Menu
     
    #6 Bic, Jan 12, 2004
    Last edited by a moderator: May 16, 2005
  7. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Organization of Layers:

    Placement of your layers can be done by dragging the layer or layer set up or down in the Layers Palette. Release the mouse button when the highlighted line appears where you want to place the layer or layer set. Naming a layer can be done by either right-clicking or going to the Layers Palette menu, choose Layer Properties, and enter the name for the layer.

    You can also create Layer Sets to store layers in for better layer organization. (Ex. In the Alistia Layer Set, I created different layers for clothing, skin, etc.). I'm going to go a little more into detail about this procedure with a little help from Adobe (gotta love that cut-n-paste).

    Layer sets allow you to do the following:


    • Easily move the layers as a group.
    • Apply attributes or a mask to the group.
    • Collapse the group to reduce clutter.
    Creating a new Layer Set:

    • Click the Folder Icon ([​IMG]) in the bottom of the Layers Palette.
    Blending Modes of a Layer Set:

    Layer sets also allow you to set up blending options for the entire set.

    By default, the blending mode of a layer set is Pass Through, which means that the layer set has no blending properties of its own. Layers inside a layer set in Pass Through mode appear the same as they would outside of the layer set. When you choose a different blending mode for a layer set, you effectively change the order in which the entire image is composited. All of the layers in the layer set are composited first. The composited layer set is then treated as a single image, and blended with the rest of the image using the selected blending mode. Thus, if you choose a blending mode other than Pass Through for the layer set, none of the adjustment layers or layer blending modes inside the layer set will apply to layers outside the set.

    Creating a new Layer set from linked layers:

    • Choose Layer > New > Layer Set from Linked (CTRL-G).
    Dragging a layer into a set:

    • If the destination layer set is collapsed, drag a layer to the layer set folder or the layer set name. When the layer set folder and name are highlighted, release the mouse button. The layer is placed at the bottom of the layer set.
    or

    • If the destination layer set is expanded, drag a layer to the desired location within the layer set. When the highlighted line appears in the desired location, release the mouse button.
    Dragging a layer out of a set:

    • Drag the layer up or down in the Layers palette. When the highlighted line appears in the desired location, release the mouse button.
    or

    • To drag a layer to a position directly below a layer set, drag below the layer set and to the left of the layers contained within the layer set. If the layer set is collapsed, drag the layer below the layer set and make sure the layer set folder and name is not highlighted before you release the mouse button.
    Collapsing or expanding a layer set:

    Click the triangle ([​IMG]) to expand the layer set and display the layers contained within the layer set.

    • Click the inverted triangle ([​IMG]) to collapse the layer set and display only the layer set name.
    or

    • To collapse or expand effects ([​IMG]) applied to layers contained within a layer set, hold Alt (Windows) or Option (Mac OS) when clicking the triangle to expand or collapse the set.
    Hopefully this will help in the organization of your layers so you can spend more time coloring.
     
    #7 Bic, Jan 12, 2004
    Last edited by a moderator: May 26, 2005
  8. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Layer Blending Modes – A quick rundown

    Below is a list of the Blending Modes and a quick description of what each one does.
    Note: Other tools have blending modes as well, such as Paintbrush, Paint Bucket tool, etc.

    • Normal: Edits or paints each pixel to make it the result color. This is the default mode. (Normal mode is called Threshold when you're working with a bitmapped or indexed-color image.)
    • Dissolve: Edits or paints each pixel to make it the result color. However, the result color is a random replacement of the pixels with the base color or the blend color, depending on the opacity at any pixel location.
    • Behind: Edits or paints only on the transparent part of a layer. This mode works only in layers with Lock Transparency deselected and is analogous to painting on the back of transparent areas in a sheet of acetate.
    • Clear: Edits or paints each pixel and makes it transparent. You must be in a layer with Lock Transparency deselected to use this mode.
    • Darken: Looks at the color information in each channel and selects the base or blend color--whichever is darker--as the result color. Pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change.
    • Multiply: Looks at the color information in each channel and multiplies the base color by the blend color. The result color is always a darker color. Multiplying any color with black produces black. Multiplying any color with white leaves the color unchanged. When you're painting with a color other than black or white, successive strokes with a painting tool produce progressively darker colors. The effect is similar to drawing on the image with multiple magic markers.
    • Color Burn: Looks at the color information in each channel and darkens the base color to reflect the blend color by increasing the contrast. Blending with white produces no change.
    • Linear Burn: Looks at the color information in each channel and darkens the base color to reflect the blend color by decreasing the brightness. Blending with white produces no change.
    • Lighten: Looks at the color information in each channel and selects the base or blend color--whichever is lighter--as the result color. Pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change.
    • Screen: Looks at each channel's color information and multiplies the inverse of the blend and base colors. The result color is always a lighter color. Screening with black leaves the color unchanged. Screening with white produces white. The effect is similar to projecting multiple photographic slides on top of each other.
    • Color Dodge: Looks at the color information in each channel and brightens the base color to reflect the blend color by decreasing the contrast. Blending with black produces no change.
    • Linear Dodge: Looks at the color information in each channel and brightens the base color to reflect the blend color by increasing the brightness. Blending with black produces no change.
    • Overlay: Multiplies or screens the colors, depending on the base color. Patterns or colors overlay the existing pixels while preserving the highlights and shadows of the base color. The base color is not replaced but is mixed with the blend color to reflect the lightness or darkness of the original color.
    • Soft Light: Darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the image. If the blend color (light source) is lighter than 50% gray, the image is lightened as if it were dodged. If the blend color is darker than 50% gray, the image is darkened as if it were burned in. Painting with pure black or white produces a distinctly darker or lighter area but does not result in pure black or white.
    • Hard Light: 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. Painting with pure black or white results in pure black or white.
    • Vivid Light: Burns or dodges the colors by increasing or decreasing the contrast, depending on the blend color. If the blend color (light source) is lighter than 50% gray, the image is lightened by decreasing the contrast. If the blend color is darker than 50% gray, the image is darkened by increasing the contrast.
    • Linear Light: Burns or dodges the colors by decreasing or increasing the brightness, depending on the blend color. If the blend color (light source) is lighter than 50% gray, the image is lightened by increasing the brightness. If the blend color is darker than 50% gray, the image is darkened by decreasing the brightness.
    • Pin Light: Replaces the colors, depending on the blend color. If the blend color (light source) is lighter than 50% gray, pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change. If the blend color is darker than 50% gray, pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change. This is useful for adding special effects to an image.
    • Difference: Looks at the color information in each channel and subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. Blending with white inverts the base color values; blending with black produces no change.
    • Exclusion: Creates an effect similar to but lower in contrast than the Difference mode. Blending with white inverts the base color values. Blending with black produces no change.
    • Hue: Creates a result color with the luminance and saturation of the base color and the hue of the blend color.
    • Saturation: Creates a result color with the luminance and hue of the base color and the saturation of the blend color. Painting with this mode in an area with no (0) saturation (gray) causes no change.
    • Color: Creates a result color with the luminance of the base color and the hue and saturation of the blend color. This preserves the gray levels in the image and is useful for coloring monochrome images and for tinting color images.
    • Luminosity: Creates a result color with the hue and saturation of the base color and the luminance of the blend color. This mode creates an inverse effect from that of the Color mode.
    Okay, that was not as quick as I had wished, but since layers are such an integral part of CG coloring in PS, I figured a fuller explanation was in order.

    Next Installment should be on Monday or Tuesday, so until then… remember to eat your Twinkies! :D
     
    #8 Bic, Jan 12, 2004
    Last edited by a moderator: Jan 13, 2004
  9. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Step Five – Shading and Highlights

    Part One:

    Now that our flats are all laid out, we can start building up our shades and highlights to produce a final image. In step two, we determined our light source was coming from top and slightly right of Alistia. But what if we still have a hard time picturing how to shade our subjects? The answer goes back to Drawing 101 – basic shapes!

    Spheres, cubes, and cylinders are the basic shapes and any object can be broken down into variations of these simple shapes. Although humans are very complex objects, by breaking them down to basic shapes, it makes mapping your shades and highlights much easier. Normally, this process is done mentally, but here is a quick example of what our map would look like on Alistia.

    [​IMG]

    As you can see, it is not a complete structure, but it does allow us to see how we are going to shade Alistia. You’ll note I put a touch of rim light under her chin and the edge of her breasts. In reality, light always bounces off objects, the brightness is almost always less then the source (depending on the reflective qualities of the object the light hits), and so we may have to take that into consideration depending upon the style we choose to use for coloring.

    Tip: Another useful method, is to use an art mannequin and pose it like our subject, then use a flashlight as our light source to determine how our object’s shadowed.

    More coming soon, I promise…. :sweat:
     
    #9 Bic, Jan 14, 2004
    Last edited by a moderator: May 26, 2005
  10. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Sorry for being late again, so on with the show...

    Part Two:

    In the beginning of the tutorial, I stated that ‘I opted to go with full color option but leave the original line work intact’. So what is a full color option? Now that I think about it, that is actually a poor choice of wording on my part as any color option could be determined as full. Suffice to say, I meant for my coloring to be semi-realistic in nature.

    Here are some quick examples to help illustrate different styles of coloring.

    Semi-Realistic:

    [​IMG]

    Cel Style:

    [​IMG]
     
    #10 Bic, Mar 27, 2004
    Last edited by a moderator: May 26, 2005
  11. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    So how do we get started in our adding the shadows and highlights? First, we choose which section that we want to work on. In this case, I went with the hair. I made two new layers in both Alistia’s and Tatiana’s Layer Sets placed above the Hair – Flat Layer. I named the topmost Hair – Highlights and the one below Hair – Shades. Then, we activate the Hair – Flat Layer for Alistia, use the Magic Wand Tool (W) and select the flat color. Next, we activate the Hair Shades layer and Hide the selection (CTRL+H). Select the appropriate color from our reference color chart with the eyedropper tool. To get semi-realism in the hair, I am going to use a custom brush.

    You read that right, a Custom Brush. The reason being is that hair has a lot of individual strands and we could spend hours and hours attempting to put in every one. When coloring or even painting an image, sometimes it is better to approximate reality than to actually duplicate it. So, to give the illusion of strands of hair and yet save us plenty of time (not to mention sanity), a custom brush is needed. Sadly all the Brush Sets that come with PhotoShop do not do this job well at all. So how do we make a custom brush?



    • Create a New Image (CTRL+N) and make its width 50 pixels and its height 50 pixels. Click ‘OK’.
    • Make a new layer.
    • Select a Soft Round Brush from the Brush menu of about 40-45 pixels. Choose Dissolve for the Brush Mode and give it about 10-12% Opacity. Set the Default Foreground and Background Colors (D) back to black and white. Click once on the middle of the image.
    • You should now have a series of black dots. Erase the ones nearest the edges and also erase those that are clumped up together. (You may need to Zoom In (CTRL+SPACEBAR+Z) for this.)
    • Merge the layers.
    • You should now have something like this:
    [​IMG]

    • Select All (CTRL+A), then go to Edit -> Define Brush, name it Hair 01 (or something similar) and click OK. (Your new brush will be last on the list of brushes.)
    • On the top-right of PhotoShop 7.0 are the File Browser and Brush Tabs. Select Brushes. Click on Brush Tip Shape, set the Spacing for 1% and check Airbrush.
    [​IMG]

    ...and viola, our custom brush is finished.
     
    #11 Bic, Mar 27, 2004
    Last edited by a moderator: May 26, 2005
  12. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Now we set our brush for an Opacity of 20-40% and our Flow down to about 40%. I also like to set the Brush Mode to Multiply. Remember, each stroke we do will get darker if we go over a previous section. Over the course of your shading, you may want to set your brush to a smaller size for more detailed areas.

    Here is where a mouse and a graphics tablet will really differ in control. A graphics tablet is pressure sensitive – which means the pressure of your stroke will determine how light or dark your lines are (up to the set opacity level), whereas a mouse only does a continuous solid line. So as always, Save and Play until you get a feel of how the tools work best for you. (If a Graphics Tablet is not in your budget, then I strongly recommend an optical mouse for better control. By the way, Adam Hughes does all his coloring with a mouse, so it is not an inferior tool by any means.)

    Once you have your shadows the way you want them, switch to the Hair – Highlights layer. Set the Brush Mode for Normal and start adding your highlights, again using multiple strokes to build up your highlights.

    Lastly, I set the Layer Blending Mode for the Hair – Shades Layer to Multiply. (This is not always necessary, but I felt it gave me a richer over all color for the hair.) Then I repeated the process for Tatiana.

    [​IMG]

    Close Up:

    [​IMG]

    The next installment should be soon, so until then ....remember to eat your Twinkies! :D
     
    #12 Bic, Mar 27, 2004
    Last edited by a moderator: May 26, 2005
  13. Pyro

    Pyro Active Member

    Joined:
    Sep 15, 2002
    Messages:
    3,518
    Likes Received:
    0
    This is a great tutorial, Bic! Very interesting, informative and well done. I can't wait to see you continue with it. :)
     
  14. Outlander00

    Outlander00 Another Stand Alone Complex

    Joined:
    Oct 15, 2002
    Messages:
    9,052
    Likes Received:
    0
    It is, and as soon as he is done with it, it will be going right up onto the website! :)
     
  15. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Thnx guys!

    5/1 Update:
    Sadly a couple of weeks ago I had a computer crash that took out my mainboard and work/game drive. So all my work was toast, unless the data recovery place can retrieve the lost data. I should know for sure by sometime next week.
    Luckily I do have the original source file on another drive, so if I have to, I can restart from scratch. :sweat:

    And yes, Outie, I did have to re-load FFXI, but all my character is still there and kicking butt. :D

    5/3 - Yay all my data was retrievable!!!
     
    #15 Bic, May 1, 2004
    Last edited by a moderator: May 4, 2004
  16. Salvor

    Salvor You can't take a picture of it

    Joined:
    Apr 30, 2001
    Messages:
    3,563
    Likes Received:
    0
    I hope you can finish this tutorial Bic, because it's by far one of the best coloring tutorials I've ever read :)
     
  17. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    And the tutorial continues:

    For the skin, in this instance Alistia’s face, I start by going to our ‘Skin – Base’ Layer in Alistia’s Layer Set and select the skin with the Magic Wand tool. I noticed that the selection was a tad bigger than I wanted so we go to Select, Modify, Contract by 1 pixel. Use the Eyedropper Tool and select the first darker shade choice on our Color Palette Layer. Next we switch to our ‘Skin – Shades’ Layer. Choose a 40-ish pixel brush by dropping down the Brush Preset Picker sub-menu (down arrow next to the size brush in the upper left), selecting a Hard Round Brush (usually the top six choices), use the Master Diameter slider to get the desired size, and set Opacity and Flow to 100% and Airbrush off. Now a little facial anatomy is required here as the human face is not really a smooth oval shape.

    The next couple of steps I usually breeze thru, as a lot of my shading choices are all done by instinct and/or coloring and drawing experience, but I’ll attempt to break it down simply for this tutorial. Now we lay down our first shading pass along the shadowed areas that we had already mapped.

    [​IMG]

    Once we’re satisfied, we choose a smaller brush and a darker shade and repeat the process. You can do this as many times as you want until the desired shades feel right, I opted for about four.

    [​IMG]

    Now as any art teacher will tell you that women in art should have a softer feel about them, even if they’re an Amazon with a heavily muscled physique, to differentiate them from men. So we are going to do just that. The easiest way would to use a Blur filter, so let us take a look at that and see if it will work for this project.

    De-Select your selection. Then go to Filters, Blur, Gaussian Blur. Make sure the preview is checked and play with the Radius slider until you achieve a desired result. Click ok.

    [​IMG]

    Now notice that while it softens our shadows, it also shrinks our working area. This is because the filter will include uncolored areas in its calculation. To avoid this you would need to over-spray your area (without your selection) by about three times the amount for pixels that you chose for your Radius. I also do not like how it blends the colors. So I am not going to use this filter.
    Note: If this works for you, to eliminate the excess overspray, simply choose your ‘Skin – Base’ Layer, select the skin with the Magic Wand Tool, go to Select, Modify, Contract by 1 pixel, Invert your selection (Shift+CTRL+I), activate the ‘Skin – Shades’ Layer, then press the Delete key.

    A tool I have been enjoying lately is the Smudge Tool (R). It is a pressure sensitive tool, and I play with the sizes greatly, however I make sure the Finger painting option is checked. At this point, I make a copy the ‘Skin – Shades’ Layer and hide the original ‘Skin – Shades’ Layer. Then I go to town using a lot of little strokes to smooth and shape my shades. Eventually, I’ll get something like this:

    [​IMG]

    The next installment should be in a couple of days, so until then ....remember to eat your Twinkies! :D
     
    #17 Bic, May 4, 2004
    Last edited by a moderator: May 26, 2005
  18. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Waiting is good for the soul... (I hope)

    Well it’s been a tad bit longer than a couple of days… :eek:
    so without further ado, the tutorial continues...


    Doing the highlights for the skin is basically the same procedure as the shadows. Create a Skin – Highlights Layer above the Skin – Shades Layer and set your layer mode to Screen. Using the highlights we mapped out earlier; apply your brush strokes in the appropriate areas of the selection. I used primarily an Airbrush Hard Round brush (set to about 30-40% opacity and 70% flow) and the Smudge tool (50% strength and finger-painting check marked) to shape my highlights. You will notice that some of the areas are quite messy at first glance, which is fine for a web-based image as it will be reduced in size by half and it will look okay.

    Tip: It is a good idea to resize your image to your final dimensions every once in a while, because sometimes all the detail you may put into a small area may be lost once shrunk down. The same can be said for mistakes or messy coloring at times as well.

    [​IMG]

    (Note, I used the ick layer
    instead of the Skin - Base layer, so you can see the highlights better.)

    That’s pretty much it for the skin for Alistia, so we repeat the process for Tatiana. Now it is time for thier suits.

    I’m going to breeze through this step, because it really is just basically repeating the earlier techniques of shading and highlights for the hair and the skin.

    We go to the Alistia Layer Set and choose the Suit – Base Layer. Use the Magic Wand tool to select a part of her suit that we intend to color. Now make a New Layer and name it something like Suit – Shades and set the layer mode to Multiply. Use the Eye Dropper to select the base suit color, then we hide our selection, and choose your brush and start applying your shadows according to what we have previously mapped out in our heads. Keep selecting darker shades as you go along until the desired effect is achieved.

    [​IMG]

    Also, don’t be afraid to experiment with different brushes. I knew in this case I wanted the texture of her costume to be different from her face and hair so I used a Spatter Brush of various sizes set to about 34% opacity, 70% flow, and turned on the airbrush and went to town by using various short strokes to build up the look I wanted. It looks like this...

    [​IMG]

    Once satisfied, we create a New Layer, name it (Suit – Highlight), and leave the layer mode set to normal. Then proceed to do the highlights with the same brush settings using lighter and lighter colors until it feels right.

    [​IMG]

    Basically, the rest of the coloring for the suits will follow the same guidelines. Select the area you want to color on the Suit – Base Layer, go to the Suit – Shades layer and paint your shades, then go to the Suit – Highlight layer and do your highlights, and repeat until the whole suit is finished.

    That’s it for now, so until next time... don't forget to eat your Twinkies!!
     
    #18 Bic, Oct 7, 2004
    Last edited by a moderator: May 26, 2005
  19. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Step Six: The Background

    So the girls are completely colored so that’s it right. Well yes and no. In theory, since the original artist did not draw a Background (commonly known as BG) that should finish the image. Here is a dilemma that all colorists must face: Stay truthful to the artist’s work or enhance it by adding something that was not there.

    This is not a subject that should be treated lightly. Remember, our job as colorists is not to outshine the original work but be complimentary to it. This is true in either digital or traditional media. In essence, if this were a film, we are the music composer to the artist’s director.

    There are some conditions to consider when designing a BG. Here are three of them that I use frequently. (Note: This applies to artists as well as colorists.)
    [font=&quot]
    [/font]



    • What is the purpose of the final image? Ex.: A cover, pin-up, or scene.
    • The BG must NOT detract from the artwork.[font=&quot]

      [/font]
    • [font=&quot] [/font]Is there an emotional element to be conveyed in the BG?
    In this case, this is a pure and simple pin-up. There is really no emotional overtone to the image. I knew going in that I wanted a basic daytime sky background because the girls are a pilot and navigator so doing a sky BG is a no-brainer. This is one reason why I did the quick Clouds render back in Step Two.

    [​IMG]

    We could also do a quick gradient fill of various blues and achieve a similar look with no clouds as well.

    [​IMG]

    Another thing we could do is use basic shapes (filled with either the cloud filter or gradient) to breakup the dead space of a non-existent BG.

    [​IMG]

    These options do not detract from the artist’s work but yet give the image some depth to it.

    Personally, I felt the clouds from the filter were too static, but I liked the gradient approach. So I made a Custom Cloud layer on top of the Gradient Fill layer (again I used a new layer set for the BG).
    Basically, choose an airbush with the light blue color from the gradient at set it for about 40-70% opacity, 60-70% flow, and about 120pixels in size (feel free to play with the settings). I made some lazy broken lines in a haphazard ‘S’ curve and added a few more lines just to get the basic flow of the clouds I wanted. I then choose 100% White from the color palette and added some white areas to the clouds. Next, I chose the Smudge Tool (R) and set the size to around 78 pixels (any higher settings and the computer bogged down trying to follow your strokes) and made sure the finger-painting was check marked. Then I did some quick strokes pulling away from the edges of the clouds. Once satisfied, I proceeded to used curved strokes at the tops of the clouds in an almost inverted ‘U’ fashion. After that, came some small touch-up strokes and then it was done.

    [​IMG]
     
    #19 Bic, Dec 9, 2004
    Last edited by a moderator: May 26, 2005
  20. Bic

    Bic Acid-filled Twinkies!!!

    Joined:
    Sep 19, 2001
    Messages:
    1,780
    Likes Received:
    0
    Step Seven: Compositing the Final Image

    This is the last step to make any correction, touch-ups, etc. before you release the final image. In this case first thing I did was shrink the image back down to its original size. I noticed the colors for the girls were a touch muted, so making sure only the layer sets for the girls were showing and one of those was active (I turned off the linework, BG, and various other layers), I used the Merge Visible command (Shift+Ctrl+E). Then, we use the Auto Contrast Command (ALT+Shift+Ctrl+L) which gave the girls a little bit richer color overall.

    I still felt my background was lacking, so I made a new layer and made a frame of white with the Rectangular Marquee Tool (M), Inverted my selection (Shift+Ctrl+I), and filled it with white. I added a black two pixel border as well. Next, we save it as a new .PSD file then use the Flatten Image command in the Layers Palette Menu to merge all the active layers and discard the ones we longer need. Lastly, we save it in a format suitable for our intended media, in this case the internet, and we are done.

    [​IMG][​IMG]

    I hope this tutorial helps in even the slightest way. There are different ways to achieve the same effect with Photoshop; this is the way I approach a project though it may not be the quickest way.


    Many thanks for those who patiently wanted for this to be completed. So keep coloring and remember to eat your Twinkies. :D
     
    #20 Bic, Dec 9, 2004
    Last edited by a moderator: May 26, 2005

Share This Page

  • Find Toonzone on Facebook

  • Toonzone News

  • Site Updates

    Upcoming Premieres

  • Toonzone Fan Sites


Tac Anti Spam from Surrey Forum