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!