Digital Painting Using The Mixer Brush In Photoshop CS5

The Adobe Photoshop CS5, Classroom in a Book text gives a good overview of how to begin using the Mixer Brush, yet to use this new tool to full advantage, you need to think like a painter and build up your painting in layers. With a little extra time, and a lot of careful consideration, CS5 allows realistic, artful renderings in digital "paint."


I'll use a drab photo to start with, and instead of a sad, grey little tree, you will have this beautiful, colorfully painted tree:

I'll use the right-hand tree in the following image as a starting point.

1. First, create a new layer and name it "base mix." Select the Mixer Brush (underneath the Paintbrush) and use the options "Clean Brush After Every Stroke," and "Very Wet, Heavy Mix," and make sure the "Sample From All Layers" check box is checked. Use a small round brush, with a medium hardness. I used a 4 px brush with 45% hardness. On the "base mix" layer begin mixing the colors of the tree trunk, branches and leaves with short, random strokes that mimic the texture of the tree itself. The point of this layer is to give you a good, painted-looking base with the original tree colors, so that your photo will not show through. You are also able to fill out the tree, giving better volume, and minimizing those spindly, dead branches, and bare unattractive areas.

HINT: You can turn the visibility of your Background layer on and off, to check coverage and see the texture of your strokes.

You should end up with something like this:

2. Now, one of the first things you may notice in this last image is the dreariness of the colors that have been mixed from the photograph. One would probably paint a tree with much more vibrancy, and that's is the way you should think about painting digitally, too. The first thing we will work on is the shadows, so make a new layer above the "base mix," layer, call it "shadows," and turn off the visibility for "base mix." When painting in real life, one has the option to add all kinds of beautiful cool shades to the shadows, instead of just using a dull grey or black. When I paint shadows, I often add translucent glazes of violets, greens and blues to give the shadows more depth and activity. Let's start with the tree trunk and add some nice eggplant violets to the deepest shadows. I used a #25 Round Blunt brush, Bristles: 16%, Length: 137%, Thickness: 1%, and Stiffness: 56%. My angle is determined by my Wacom Intuos4 tablet. Double-click the Foreground color in the tool bar to select a dark purple with the Color Picker. Change the Mixer Brush options to "Load The Brush After Every Stroke," and "Dry, Light Load." Varying brush size and zooming in close, paint the darkest shadows with the purple.

In the same manner, use a midnight blue to paint the darkest parts of the limbs and leaves. Notice that I am painting over the white, spindly branches, as I want to get rid of them, and I am using brushstrokes akin to the shapes of the leaves and branches.

Change the Opacity of the "shadows" layer to 40%, and you should have something like this:



3. Now, for the midtones. The color for the midtones should be derived from the actual colors of the photo, so that the painting will look more natural. Bring up the Color Picker again and use the eye dropper to sample a greenish color from the leaves. Whoa! What an ugly brownish-grey that is, once you see it in the Color Picker! Move the slider to the green hues and you will get a more vibrant green, while keeping within the realm of the "greens" in the photo.

Create a new layer in the top of the list, call it "midtones," and turn off visibility of all but this new layer and the Background layer. Keep the same Mixer Brush options and use a feathery, leaf-like brush (I used the #32 Flat Angle brush, Bristles: 6%, Length: 127%, Thickness: 23%, and Stiffness: 45%, and I varied the size and angle for randomness), and paint in the midtones of the leaves.

Don't worry about full coverage, because you will use 2 shades of green. After going over the entire leafy part of the tree once, open the Color Picker again and move the little circle up and to the right a bit to get a slightly more yellow, lighter green. Repeat coverage of the midtone leaves, lending more depth and variety.



For the midtones of the tree trunk, use the same method with Color Picker to select a base brown from the photo, and use the slider or the circle to select a warmer, more interesting brown. Paint the midtones of the trunk with this color with the same brush.

Turn the visibility for all layer on, reduce the "midtones" layer to 60%, and you should have something like this:



4. Same drill for the highlights! Select the lightest leaves and change to a more vibrant version, lighter with more yellow, in the Color Picker. Create a new layer, call it "highlights," and turn off visibility for all layers except this new layer and the Background layer. The highlights will need far less coverage than the midtones, and should just be dabs of bright color, like dappled sunlight. So, keeping the same Mixer Brush options, use an appropriate brush for dappling (I used the #25 Round Fan brush, Bristles: 66%, Length: 25%, Thickness: 1%, and Stiffness: 88%, at a very small size), and paint in the lightest highlights. I used quick, dabbing strokes, picking my brush completely up off the tablet between each stroke.

For the bark, you guessed it! Select the lightest color from the trunk with the eye dropper in the Color Picker and move it to a lighter, warmer color. Paint the lightest parts of the trunk in the same manner as the above highlights.

Turn visibility on for all layers, decrease the "highlights" layer to 80%, and...



...you're done!

Liam's Ocean Mural

 

I was talking recently with a fellow artist who had painted a mural for his daughter when see was a baby. She is a grown woman now and has told him how much having that mural in her life from the time she was so young has meant to her, and she actually became an artist herself--a muralist, no less!

I created the above underwater oceanscape for my own son before he was born, and I have always wondered what the effect would be on him. My hope has always been that a soothing water scene of cool colors would be soothing for him as a baby, but who can say, as he grows up? He is now 3-years-old. and has slept under it since he was born, the mural spanning most of one wall, at about 8' X 9' (the biggest canvas I could find, pasted up with strippable adhesive, so that I can always take it with us should, we move out of our renter one fine day).

Yet, what I was most struck with, while contemplating this mural lately, is how free I felt while creating it. It was so liberating to not worry about what the art world would think, or whether it was hip enough, or what it meant for my career as an artist. No, I only thought about painting a beautiful scene of coral, fish, jellyfish, and a big sea turtle for a little baby. This was also shortly after the disillusionment and well, frankly horror, I experienced while completing a master's degree in fine art, in the heart of Manhattan. 

Did the mural, and the little baby that sleeps under it, change the way I make art today? Is it more free and fun for me, and is that my ultimate goal as an artist, and for my life? Things to think about while I work on my 40 Paintings...

Photomontage with Adobe Illustrator and Photoshop (The Lion With a Thorn in His Paw)

For this example of building a photomontage with Adobe Illustrator & Photoshop, I will use a page for a children's book for which I am currently designing illustrations. The story is an adaptation of the old Aesop's fable of the lion with a thorn in his paw, specifically the scene with the lion helplessly licking his paw, so I'll show you how to build that page in this tutorial. Here is the final result:

*This tutorial assumes a basic knowledge of Adobe Photoshop and Illustrator.

1. I'll start in Photoshop, with a U.S. letter page in landscape layout, saved as "lionthorn.psd" to a well-named folder that I can always find. First I need the background of sky and ground/folliage. I always photograph the stages of paintings that I work on in the real world (ie, not digitally), when I see landscapes, skyscapes or other natural forms start to emmerge, and save them in a file to use for this very purpose. So, I'll open two of those that I think will be good to work with, rotate and crop to the sections I want, then copy & paste them into my .psd document and re-name their layers "sky" and "ground":

2. I'll work on the sky first, so let's turn off the visability for the ground layer. Most of this sky will need to look abstract, like clouds in a sunset, but I want to save this butterfly shape to keep in focus for later. Select the butterfly with the Pen tool, convert the path to a selection in the Paths pallet, then cut and paste it onto another layer, by selecting Layer, New, Layer Via Cut from the Menu bar. Name that layer "butterfly" and turn off its visability.

Fill in the void left by the cut by selecting the hole on the sky layer with the Magic Wand, then expand the selection by selecting Selection, Modify, Expand from the Menu bar. Enter 4 in the dialog box, and click OK. Now select Edit, Fill from the Menu bar and choose "Content Aware" from the dialog box.

Next, I want to blur the details of the sky, and blend & mix some of the colors to create an interesting, stormy sunet sky, with a weak sun (it's a bad day for the lion). Start by applying a filter to the entire layer: select Filter, Artistic, Underpainting from the Menu bar. In the filter dialog box, use a large brush and a lot of texture coverage (watch the preview and adjust to taste). That has softened up some edges, but we need more. Add a new layer and name it "mixerbrush". Make sure that it sits on top of the "sky" layer, with all other layers locked and visablity turned off. Select the Mixer Brush from the Tool bar (under the Paintbrush), use a simple, round, soft brush (the first in the Brushes pallet) and increase its size to 300. Ensure the Control panel is set to Very Wet, Heavy Mix, and the Clean After Every Stroke option is on. Start pulling and pushing the color around on the "sky" layer to blend them, going for a smooth, rolling clouds texture.

Now, to build up some cloudforms, switch to the regular Paintbrush, add a new layer named "clouds", and use a soft round brush, set to 500. I set the first layer of colors by double-clicking on the foreground color in the Tool panel, then using the eye dropper in the Color Picker dialog box to select the pinkish-orangey tones in the sky and raising the white to get a light tint of that color. Gradually build up layers of cloud, changing opacity, brush size and hue for variety.

3. Next, we'll work on the ground and foliage. Make the ground layer visible, and unlock it. First, we'll remove the hard edges and the bright blue areas to give us forms that look more like folliage, dirt and rocks. Drag down a horizontal guide from the rulers, just to keep an idea of where the horizon should be. Select the Eraser tool, set to Brush mode, with a relatively hard edge, and begin erasing the "ground" layer. Continually change brush size for variety around what might be leaf and rock edges.

I want to leave some of the blue areas, for shadow, but I need them to be more of a green hue, so as to resemble shrubbery. I'll add an Adjustment layer, Hue/Saturation, and bring the hue slider down to the greens, the saturation up a bit, and I'll darken the tone, by bringing the lightness slider down. Now, the whole image has been adjusted, and I just want the "folliage" changed, so I'll make use of the Adjustment layer mask. Click on the mask icon to select it, and select Edit, Fill from the Menu bar, choosing Black from the dropdown menu. Click OK. The Hue/Saturation adjustments I made before have all been masked out. Now, I'll paint with with white in the mask, to bring those adjustments back where I want them only. It's easiest to first select the ground structure, to isolate your painting within the ground, without the white brush bleeding out into the sky.

4. To get a more dimensional space for the lion to sit in, I'll need a floor and some extra rocks and plant forms. I get can make all of those straight from the painted folliage I already have here. First, for the floor, I will add a new layer, name it "floor" and use the Clone tool to create a structure, sampling from the "ground" layer, by making sure the "sample from all layers" option is cllicked in the Control panel. Before building, first use the rectangle Marquee tool to isolate a stage for which to hold the floor. Use the Clone tool with a medium sized, soft brush to randomly select your source (alt+click) and paint floor, clicking to select and then to paint with as much variety and randomness as possible, to get a naturalistic jungle floor. With all other layers invisable except "floor" and "sky":

This does not need to look incredibly realistic yet, as most of this floor will be covered. As a last step, to make the horizon look distant, use the rectangle Marquee tool to select a strip around the horizon line, feather the selection 50 pts, and use the Gaussian Blur filter by selecting Filter, Blur, Gaussian Blur. Use the preview to get a smooth blur, fading into the distance, as shown above.

5. For the extra plant and rock forms, we will sample again from the "ground" layer with the Clone tool. This time, pick several interesting paint brushes for variety, and artful-looking strokes. I used mostly the round angle and the round blunt, but go by your instincts. Remember that this is a children's illustration, not a photorealistic postcard, so have fun and be creative. It's easiest to turn off the visabilty for other layers, and just set these plant and rock form far apart and on several different layers, for selecting and modifying later.

6. Turn off the visabilty for these rocks and plants for now (they are distracting, as is), and turn on the visabilty for your other layers. I have already created my vector lion in Illustrator (a separate tutorial :).

In Photoshop, I will Choose File, Place, and navigate to where I have my Illustrator vector lion file saved. I want the lion on a top layer, so at first, he will just be sitting on top of everything. In order to make this look a little more real, view the rocks and plant layers again. Select the pieces of rocks and folliage separately by using the Lasso tool, then switch to the Move tool and simply drag the shape to where you need it, around the lion and on the floor. Keep the shape manipulatible by putting it on its own layer: while selected, hit Shift+Ctrl+J. Now you can tranform, rotate (Ctrl+T) and move the shapes to build up plants and realistic ground.

To make the foreground plants and rocks look separate from the background, select each plant or rock separately (Lasso tool works best) and make some image adjustments by selecting Image, Adjustments, and Curves OR Color Balance OR Hue/Saturation from the Menu bar. These adjustments can change the contrast, hue, or vibrance so that the foreground objects will stand out better from the background. Arrange the rocks and plants around and in front of the lion, so that he looks more like he's sitting within a jungle space.

7. Now that we have all the pieces and parts, it will take an artful eye and some common sense to make the image look like a more natural, deep space. For example, the light on the lion is coming from the opposite side of the sky, so I'll select the "sky" layer and choose Edit, Transform, Flip Horizontal to change that. Adding shading where needed, like under the lion's paws and stomach, and over the background floor space, will be easy, since I've kept everything on separate layers. I used the Paintbrush, experimenting with shades of extant colors, a blending mode of either Darken or Multiply, with a low opacity to add shadows. Vary the brush size and softness/hardness to imply different surfaces of the rocks and plants in the background. For example, the overhanging ground forms behind the lion would be blurrier and less vibrant than the foreground forms. With all layers turned on, you should be able to see what looks strange and needs tweaking, so use your best judgement.

8. Remember the butterfly? It will be the perfect addition to the now rather empty cloudy area to the upper left, after the Flip Horizontal command. Turn the butterfly layer visability back on, and use Ctrl+T to rotate, shrink and move the butterfly so that it flutters just above the lion's head. Use Edit, Transform, Skew to reshape the wings.

9. This image will be set within a portrait layout page, and since this is a landscape layout, I will add a border and some flourishes above and below the image in Illustrator. Open a new Illustrator document, set for Print, U.S. letter, and change the artboard option to 2. Select File, Paste to put the lion image on artboard 1.

10. Some thorny flourishes would be perfect, so I'll Google "throny roses" to find a starting place, and paste that .jpeg onto artboard 2. I've found a tatoo tracery that I would like to change (I want more thorns and I don't want roses), so I'll turn this bitmap into a vector by selecting it and pressing the "Live Trace" button in the Control panel. The black and white default is perfect for what I need, so I don't need to change any trace options. Press the "Expand" button, and then choose Object, Ungroup from the Menu bar.

Some of the rose parts need to be separated first, and the easiest way is to use the Eraser tool to just erase right through the connection. Illustrator joins the open points automatically to close your shape back together. Nice of them, huh?

Now I can alter the shapes to my heart's content by using the Pen tool, and it's add point, subtract point and convert point sub-tools. I can pull out points to turn into thorns with the Arrow tool, and break smooth curves into corners by holding down Alt before clicking on a handle. If you haven't had much experience with the Pen tool, what are you waiting for??? It's the most powerful tool in the whole program to customize shapes!



11. After I've made a couple thorny embellishments, I can copy and paste them onto artboard 1, where I can multiply them, arrange them, rotate, and resize them, reflect them (Reflect tool) to make my flourishes. Turn on guides (View, Guides or Grid), or make your own (View, Rulers, then pull down guides from the rulers), to line everything up perfectly. Add a border around the image by drawing a black box with the rectangle Shape tool on a layer below, and another box with an empty fill and a thin black border on a layer under that.

Turn off your guides, and voila! Fin!

Inspiration Without Copyright Infringement

In those first art & design classes, you are expected to plaster your guts on poster board and have it critiqued by a large but uncomfortably familiar group of people you have never met before, within the first few weeks. Everyone has their opinion, but why don't they SAY anything in that cursed silence of the Design I critique??? You have been reading about "design fundamentals," but they are so esoteric, and all of that is completely forgotten when you sit down with a blank piece of paper or a white screen in front of you, and are told to be "creative" with your grade on the line. It's no wonder you might have some trouble finding your "voice," (you probably won't find that until you are decades into your career, if you last that long).

The big secret is that you should never come to any project with that blank sheet, before mentioned. If you really are into visual communication, you will have been looking at a lot of it. Who hasn't been? Everything from ads to magazines to blogs to games to CD covers have already been influencing you all this time, so why pretend that your genius springs from your brow as an original idea? (If you think your idea is so pure, you probably haven't been reading much in the way of art history, and you might be in for some embarrassment in the face of art/design professionals, so read up!) For more on this, ask any art professor worth his/her salt.

Yet, how can you let yourself be influenced by existing design, guided by the artists before you, without committing....COPYRIGHT INFRINGEMENT??? Actually, in school, you might just fail your class or be expelled for plagiarism, not sued, because nothing you make while in school belongs to you, it belongs to your school, but...

Here's an example of the Kosher process of being influenced, without actually copying someone else's work and submitting it as your own.

Finished Product:

1. Let's say I was told to design a logo for myself. Hhhhmmmm, well I'm really into dragons, and this really cool image keeps coming into my mind of a dragon that I saw from 2002 (this logo is called "Yin-Yang Dragon, created by dragonkahn, was found here: http://ikkejr.deviantart.com/#/d108wli):

2. I can be INSPIRED by this design, without copying it, by taking what I see and making it my own. The law is that you must change original art by at least 30%, but what does that mean??? This will be more helpful...

The dragon form looks to be a vector image, so let's import this as a .jpeg, onto an Adobe Illustrator page. Once I trace that graphic with the Bezier tool, I can manipulate it however I want. First save the .jpeg in a folder you will remember, then create a new Illustrator file and place that image by choosing File>Place and navigating to the dragon .jpeg. Once placed on the stage, resize the image by manipulating the box handles until it's a size you can work with. Name that layer "template" in the Layers pallet, lock it, and create a new layer called "dragon." Choose the Bezier tool and begin making your shape. Get a rough outline of the dragon curves (for more on using the Bezier tool: http://tv.adobe.com/watch/lyndacom-training-for-designers/illustrator-cs3-essential-training-ch4/)

3. Whether or not you need to include all the lines and curves is up to you, as you will be changing the image dramatically. Think about your own concept, and how this dragon fulfills your idea, and also how it falls short. Make lists, notes, sketches, whatever you need. For my example, let's say I really want to use this dragon, but my actual company identity is much more childlike and friendly, and it needs to appeal to an audience of kids 2 years to 10 years of age (and of course, their parents). So, I might want to make the dragon a little more plump and friendly looking. I can alter the bezier curves by playing with the handles, and change the fill color to give the dragon a completely different feel. Feel free to add or subtract anchors wherever you need to.

This is looking more child-like and friendly already:

4. One of the quickest ways to change the personality of an image is to change the color. I'll use some of Illustrator's readymade color harmony pallets in the Color Guide panel to do just that. These are fun to fiddle with, until you find the right balance of hue, value and contrast. While I'm at it, I'll add in some of my own shapes to change the color opportunities even more.

5. Something that really popped to me, when I first saw the original yin-yang design was that gold, glassy orb that the dragon is curled around. I want to find some thing like that for my design, and I think bubbles would work great for kids. Kids love bubbles! I've found a wonderful tutorial on making vector bubbles, and I won't steal any credit. This is from the site Vector Tuts+, and titled "How to Create Realistic Vector Bubbles," by Iaroslav Lazunov: http://vector.tutsplus.com/tutorials/illustration/how-to-create-realistic-vector-bubbles/ It takes a few hours, but it's worth it!

I also added some of the color harmonies to the background color, from the Color Guide, with a gradient mesh to give more of a mystical kiddie dance party feel to the background.

6. I think I've already passed that 30% change point, to avoid copyright infringement and lame design stealing, but since I've decided that this will be an ad for a toddler sock-hop event, I'll add text. I've found a medieval font from http://www.fontspace.com/category/medieval?p=5 that I think has some curves similar to my design, and is easy enough to read, while still keeping a medieval look for my Dragon Dance party. I've also added a little faerie kissing the dragon to, I think, make this new design my own, merely inspired by another, and well-suited to my own unique purposes and vision. Thanks dragonkahn!