Monday, September 26, 2011

Digital Illustration "Dreamer": Start to Finish

As mentioned in my previous post, there are two different ways I create a digital illustration. In this post I will walk you through my "Traditional Media" approach I used for my "Dreamer" illustration. 

For creating digital illustrations I use Adobe Photoshop and a Wacom tablet.

Wacom tablet

This painting originated with the thought of conceptually illustrating the idea of  'a dreamer'. From the beginning I knew I wanted to include the moon and stars and I also wanted to creatively interpret the idea of reaching beyond the stars and into the imagination.
Original sketch: graphite on 9" x 12" Strathmore paper.

1. Painting Thin 'Watercolor' Washes

     After scanning my original sketch into the computer I duplicate my scanned sketch layer and set that layer's effect to multiply. Before I begin painting I create a new layer that rests in between the two sketch layers. This enables me to add colors and values to the painting without losing view of the drawing. In between these two sketch layers I paint my color washes with a soft, transparent Photoshop airbrush. I'll continue to create multiple wash layers as I build up the thickness of the 'paint' in the artwork while always keeping the duplicated sketch layer set to 'multiply' and at the top of my layers pallet.

Photoshop layers pallet showing the layout of the sketch layers and wash layer

First steps in the thin watercolor-like washes 

    Examples 1 & 2 show the very thin first color washes. Before I painted on the girl or moon I chose a deep blue for the night sky and used the 'paint bucket' tool to fill in the entire canvas quickly. Unlike most of my paintings where I work from a light canvas and add on darker colors - in this piece I painted light colors over a dark background. Since this was a night scene I figured this would help me achieve the desired outcome faster. After filling in the background with a flat dark blue I chose a speckling brush and started randomly filling in lighter shades of blues to create the appearance of distant stars and galaxy dust.

The overlapping wash layers begin to 'glow' against the background.

    Gradually the multiple wash layers build up a brighter and more vibrant painting. In order to maintain color harmony I continue to work with transparent brushes (usually around 35% opacity). Once I become more confident with my color scheme I start using thicker, more opaque brushes.

2. Color Adjustments

     For the first few washes of my painting I kept with realistic hues found in the night sky. I liked the more smoky look but out of curiosity I decided to adjust the color contrast and saturation as seen in example 5. Instantly I decided I liked the new look better - after all, I wasn't trying to communicate reality but the vibrancy of imagination. 

    Now that I was confident in my painting I was ready to delete my sketch layer (Ex. 6). 

Note of encouragement: if you've ever spent 3 hours on a painting 
and wondered if you've even accomplished anything - you're not alone.

  Out of the entire painting I had the most difficulty creating believable water ripples freehand. I ended up making a 'target' on a separate layer using the circle tool and painted it light blue. By squishing the target's height I made it into a horizontal oval.

Example 7 is my first attempt at creating reflections on the ripples in which I used the 'layer effects' option and played with the 'emboss' option. I think the ripples were successful in looking realistic in nature - but too real to match the look of the rest of the painting. I turned off the emboss effect and used the eraser tool putting it on 30% opacity erasing certain areas of the rings and making some areas more transparent creating the final result you see.

Final result.

3. Working with Flesh Tones in Fantastical Lighting

    One of the challenges of working with fantasy paintings is the difficulty of finding exact examples of the lighting that you need since it rarely occurs in nature. The key is taking what you do see in nature and pushing it to the extreme. The areas hit by light must be pushed brighter and the shadows made darker still. The color temperature and saturation is also increased - warm light must be more yellow/orange and cooler shadows more purple/blue.

 Pushing color and lighting contrast is especially difficult with flesh tones. (one doesn't want the cool blue shadow side of the face looking like zombie flesh. Two tricks make all the difference: the use of core shadow and rim lighting. (Refer to examples below to recognize the Core/core of shadow area on objects). 

The key to making the flesh look alive is core shadow color saturation.  The core must contain the highest amount of color saturation! (in the area of flesh - make the core's color pinker/peachier/browner still).

Core Shadow, Core of Shadow, Core - all mean the same thing.
Understanding and recognizing these basic areas of light and shadow is 
the foundation to creating believable works of art. Never take it for granted.
My favorite trick (and possible the most effective) to making  paintings really pop is the addition of rim lighting. In the two examples below you see how I lined both the light and shadow sides of the girl with light. The highlighted rim on the light side is extra bright with a hint of yellow and I added a pailer form of rim lighting to the shadow side as well - this is especially visible on the arm. 
For extra interest I also increased the brightness of the reflective light by creating the blue lights that appears next to the core shadow on both her flesh and her hair. 

Rim lighting makes all the difference.

Final Painting
      I hope you've enjoyed this brief lesson in digital painting. Feel free to post any questions - enjoy your day and dream on!

Monday, August 29, 2011

Digital Illustration "Alera": From Start to Finish

There are two different ways I create a digital illustration. In this post I will walk you through my "Stained Glass" approach I used for my "Alera" illustration. 

For creating digital illustrations I use Adobe Photoshop and a Wacom tablet.

Wacom tablet
* Note: the larger the tablet - the better!  It will help prevent carpal tunnel and 
can aid you from getting too tight or stiff in your drawing. I've also found that 
it is best to place the Wacom in my lap otherwise my arm will get sore or numb 
if I'm using the Wacom on the same level as my computer keyboard.

Each of my original illustrations begins with a simple sketch expressing an abstract idea or emotion. The original sketch for my "Alera" painting came from my high school journal. Though most of my work is more uplifting, this piece represents a mourning period when my uncle and cousin were killed by a drunk driver. Too sad for writing words I doodled this in my journal instead. A few years later after the loss of a dear friend of mine, I looked back on the sketch and decided to finish the piece as a way of focusing my pain into making something beautiful.

Original sketch at age 16 labeled "The Passing Away" in my journal
 showing a girl mourning at a cemetery while the wind blows over her.

1. Scanning and Refining the Sketch

     I always scan my original sketch into the computer first (whether the sketch is good or not). Having the original sketch under my painting enables me to more accurately remember what I was feeling and trying to express when I first doodled the idea. (Otherwise I may get too distracted in the 'pretty' detailing and forget to portray the original emotion.)

     Once the image is in my computer I roughly scale and arrange my sketch to the desired size and positioning. I do not spend very much time focusing on the perfect composition yet (as that can always be changed in a digital illustration at any time.) For now the focus is on 'cleaning up' the sketch to make the doodled objects less abstract.

First steps in refining my 'doodle' into a more detailed sketch. 

My original journal sketch is on the 'background' layer in Photoshop. 
Above the Background layer I create a transparent white wash layer at 70% opacity. 
Above the white transparent layer I draw my new sketch.

I keep the first sketching steps simple and always in grayscale.

     As I work to refine my sketch I continue to add new 'sketch' layers. The first sketch layer is a very simple sketch - no detail (as in Example #1). Once I've finished a basic sketch I put it on 30% opacity and then I add a new layer and begin drawing over the older layer - making it more refined. (Ex. #2 & 3 - each of these is on its own layer and you can see the faint previous layers underneath).  I continue this process until I have a refined and detailed sketch. By approaching the drawing process in this style it helps me not feel overwhelmed when I am creating an environment from my imagination - if I tried to draw a perfect outline in the first sketch layer I'd go crazy with frustration. By adding a new layer upon an old layer sketch I end up building from something that already exists and the intimidation of looking at a blank screen is gone. Instead my job is just to 'improve' the previous layer's sketch and that's something I can do. (Much similar to staring at a blank page when writing a paper - it's best just to start writing anything to help you get going and you can build from there.)

2. Adding Washes to the Sketch

I layer washes to help add contrast and create a mood while I 
push toward a more captivating composition.
*Note: Notice on Ex. 5 that I reflected the tree. 
This helped me fill space faster while playing with composition. 
In Ex. 6  I sketched over the left tree making it unique from the other.

     Once I'm comfortably along in the sketching process I begin painting transparent washes on separate layers under the most refined sketch layer. These washes help me work the composition and begin adding a 'mood' to the piece. I continue to work between washes and further refining my drawing as I go. (The variety of working back and forth between the sketch and the washes also keeps me from getting too tied up or bored in one area of focus).

     I continue to add more washes to increase the contrast and further develop the mood in the painting. In Ex. 8 I change from a soft Photoshop airbrush to a Photoshop oil brush and begin painting in detailed, thicker washes. (This gets rid of the 'fuzzy' look and begins making everything look more 3-D)

3. Working with Color Schemes

     Once I've reached a comfortable point in the grayscale painting I'm ready to add color. I wasn't sure which direction I wanted to take this painting. I tried a night time color scheme with the silvery moonlight illuminating the scene while adding a feeling of mystery to the piece. I also tried a warm lit scene with golden sunlight coming through the branches and adding a feeling of hope. Though I liked both ideas I felt the moonlit scene was moving a bit away from the direction I wanted to take - mystery wasn't my goal and the night colors could also make the painting feel more lonely. I wanted something that didn't communicate total loss and despair. Sorrow, yes, but hope too. Thus, I chose the daylight color scheme. 

     For better color harmony I changed the dress from blue to golden-yellow and the cape from green to violet. (Since violet and yellow are complimentary colors I thought it could really add an extra vibrancy to the painting and make the girl herself stand out more). I also changed the lighting in the composition. Instead of the girl silhouetted against the golden background I decided to make her the golden point of interest, illuminate her in sunlight and fade out the background into darker, muted hues. 

4. Concept to Communication

Random fact: The frame in Ex. 14 took 6 hours to create and I used
 reflecting techniques to create the symmetry you see. 

    In Ex. 13 I added a decorative frame from one of my previous illustrations to see how it would work. I thought it added a storybook feeling which symbolically worked well (everyone has a story and this was a part of hers). I extended the girl's belt to fall out of the frame of the page sort of 'bookmarking' that chapter in her life and at the same time drawing the viewer in. Ex. 14 shows the frame created specifically for this illustration. 

I continued to add color and light contrast and increased the saturation 
of the golds in the dress. From Ex. 15 to 16 you can really see 
the added detail in the belt flowing over the frame.

(Ex. 15 & 16 zoomed showing belt detail)

     When I was nearly finished with the painting portion of the artwork I flipped the image horizontally to see if the composition held up well in mirror view. (Checking your drawing/painting in a mirror quickly helps you identify mistakes. When you are used to staring at a painting you can easily end up overlooking important details, flipping it over gives it a fresh view). As a result I discovered that I liked the flow/movement of the painting better in the mirror view. The eye naturally moves from left to right and in the mirror image the eye follows with the direction of the wind - making it feel more alive. In the original direction the eye fights against the wind. I decided to keep the illustration in its mirrored state allowing the viewers eye to easily follow the blowing leaves up and into the illustration. 

     Throughout the entire process I continued to sharpen and refine my linework on a separate sketch layer.  I placed this line-only layer above the stack of color layers before flattening the piece. That is why I refer to this style of approach as "Stained Glass". The line work represents the metal in the window and is always separate from the colored painting. In a way this approach is like creating a coloring book page backwards - I first layer on the values and colors and 'find' my outline drawing through them.

Close up of girl.

"Finished" illustration with filler text.

     For the final look I rearranged the decorative frame to create areas for text. I liked how this helped de-emphasize the square shape of the painting and gave it more of a vertical storybook page layout. Like so many of my paintings it's never really finished, I always like to go back and tweak them a bit more - it's just too tempting and if you can make it even better - why not?!