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!

Midterm Bezier Curve

You will need to draw a geometric shape, using Bezier curves in Adobe Illustrator, and submit this file to the Drop Box as an .ai file along with your Midterm. You will find an example of the shape that you need to recreate in the course shell under Week 4, Midterm AI Image.

There are several ways to create this shape, but here is how I would do it:

First, open a new file in Illustrator and use the grid by selecting View, Show Grid from the menu.

Then, using the Rectangle tool, draw a rectangle that is about 5 large grid squares wide and 3 tall.

Now, use the Pen tool (Bezier tool), click and hold to access the flyout menu and select the Add Anchor Point tool. Click halfway down the left side of the rectangle to insert a new point there. Add 2 more points, one 3 small grid squares from the top left corner, and the other 3 small grid squares from the bottom left corner of your rectangle. Switch to the Direct Selection tool, click outside the rectangle to deselect it, then click and drag your first added point out to the left, about 1 1/2 large grid squares.

Next, use the Convert Anchor Point tool (under the Pen tool), and click drag up on the point that is now the apex of your triangle. Use the Direction Selection tool to adjust the handles of your anchor point until you get the shape how you like it.

Last, save this file as an .ai file, with LastName_FirstName_Midterm.ai as the file name and submit it to the Drop Box under Week 4 Midterm AI Image.

Artbites

I was listening to NPR yesterday and I heard an inspiring story about the many surprising avenues, crooked alleys, mossy courtyards, and breathtaking hikes that a journey through a life in the arts can lead someone who is willing to experiment and keep learning. Of course, there's usually a fair amount of hard work involved, too...but artists like to work, right?

Check out Maite Gomez-Rejon's Artbites, and you'll see what I mean!

http://www.artbites.net/

First a sculptor, after completing an MFA in studio art, Gomez-Rejon became fascinated with art history, and pursued a second degree in that. Later, after discovering that she enjoyed making food for her friends more than anything else, she decided to go to Culinary school. But all that schooling was NOT in anyway superfluous!

Welcome the birth of Artbites, a program in which Gomez-Rejon guides visitors through museum collections, such as The Italian Renaissance, The Art of Southeast Asia, and Mesoamerican Art, and discusses the art in terms of the people who made it, and the history that cultivated it. Emphasis is placed on the importance of regional food in each culture. Then, the whole group makes a 7- or 8- course meal, developed specially by Gomez-Rejon to compliment the art tour. Often, the food prepared by guests is the very food featured in some of the artworks.

Amazing ingenuity, huh? And what a memorable experience!

Sarah Lange (Wathen) Retrospective

Since we're talking about the Constructed Reality movement in Photography in our WGD210 class, I couldn't help but share my own exploration into this arena. I had seen a fabulous exhibition at the Orlando Museum of Art on Constructed Reality that introduced me to some of my favorite artists of today, and inspired my own photographic work immensely.

I was finishing up my BFA in Painting, and I was FORCED to take a Photography class, much to my chagrin (I had never been much interested in the medium). But then, I realized I could paint my own reality within my own apartment, dress up in costumes, and photograph that! Good thing I was living on my own at the time...

My Old Website

Comic Book Cowboy Filter in Photoshop

Just kidding! No, it's never that simple to create magic, just ask Ron Weasly. This tutorial has several steps, but you will be happy with the results! I wanted to make an old comic book or old newspaper-like print of my son dressed as a cowboy for some Christmas presents for relatives. Sounds sappy, but trust me, they'll love it. Here's what I did...

1. First, start with a crappy snapshot of your precious toddler dressed up as a cowboy for Halloween.

2.

2. In Photoshop, crop the image with the Crop tool, and for this particular example, I need to increase the image resolution to at least 150 dpi in order that it print reasonably well. I got this image from my sister-in-law's Shutterfly site, and I don't have time to order prints, scan the photo, and have this printed out for Christmas gifts. So, I downloaded the file right off the web, and I'll do a handy Photoshop quick fix by selecting Image from the menu, then Image Size. In the dialog box, make sure the Constrain Proportions and Resample boxes are checked and increase the Resolution incrementally by adding 5 dpi, then click OK, reopen the dialog and add 5 dpi more, click OK, and so on until you get to 150 dpi. I know, tedious, but Photoshop does a better job at inventing pixels when it adds information if you do it this way. You will still get some artifacts, depending on how good the original was, but for this project that's okay. If you have red-eyes, get rid of those with the Red-Eye tool. Save the file as a .psd.

3. Now we'll go through a few steps that might seem pointless, but everything will become clear later. Just make sure you follow all the steps in order! Select all of your image and Command-C to copy it. Then, open a new document, call it DisplacementMap, make sure the Color Mode is Lab Color and click OK. Now use Command-V to paste your image into the new file. Select Image, Mode, Grayscale (yes, it's okay to Flatten the image), save this file as a .psd and close it.

4. Now, return to your original cowboy color image. First, we want to change the tone of the image to mimic the unreal colors of those old, cheap reproductions.

Duplicate the Background image in the Layers pallet, name it "tone," and select Filter, Artistc, Poster Edges. Use 0 for Edge Thickness, 0 for Edge Intensity and 2 for Posterization. Next, choose Filter, Artistis, Cutout and use 3 for the Number of Levels, 3 for Edge Simplicity and 2 for Edge Fidelity. You may have to play with these settings a little, depending on what your image actually is, but here's what mine looks like:

Now, choose Filter, Blur, Surface Blur and set the Radius to 2, Threshold to 80. This layer has set the tonal map for the image. Now, let's work with the color on another layer.

5. Duplicate the Background layer, drag it to the top of the layers and name it "color". Set the Blending Mode to Color, because this layer will only be used to colorize the image, and we don't need any of the details of the picture on this layer. Choose Filter, Noise, Dust & Scratches and use a Radius of 10 and a Threshold of 0. Now, since we want to take that original color of the image and kick it up a bit to look like cheap ink, go to Image, Adjustments, Hue/Saturation. Change the Saturation to 80 and the Lightness to 50. Here's what I've got:

 
6. Now, we need to get some of the shadows back into the image, so that it looks like a graphic print using few colors. If you look at some old prints, you'll see that the darkest shadows are deep, flat, black, which serves to gives us that efficient, quicly run off, comic strip feel.

Duplicate the Background layer again, drag it to the top of the layers, and name it "shadows."' Choose Image, Adjustments, Threshold. Your settings for this dialog box will vary greatly, depending on the values of your original image and how much contrast you want in your final image, but you are looking to have all of your darkest shadows come out black. I used 80, but play around until you like what you see. Next, in order to smooth out that black, choose Filter, Stylize, Diffuse and click Anisotrpoic. Here's mine:

7. Now for some inky details. Once more, Duplicate that Background (you know the drill) and drag it to the top, name it "ink," and set its Blending Mode to Multiply. Make sure the Foreground and Background colors are set to default, by hitting the "d" key, and choose Filter, Sketch, Photocopy. Use a Detail of 12 and a Darkness of 15 and click OK. Some of the detail returned is good, but you've probably gotten a bit too much in there, with some unwanted mess,  so reduce that effect by choosing Image, Adjustments, Threshold. You will have to play around with the slider, watching the preview to get rid of the garbage, while keeping the detail you want. Here's mine:

8. Already starting to look like Dirty Harry, isn't he? But to make it really look like a print, I want to add some halftone, like you'd see in a magazine or newspaper cartoon. This is the best part yet! Now, we get to use that Displacement Map from the beginning and do very neat things with masks.

Create a new layer, name it "halftone" and choose Edit, Fill, and fill the whole layer with 50% Gray. Go to Filter, Sketch, Halftone Pattern. Use the Line Pattern Quality, with a size of 1 and Contrast of 20. Now, in order to mold that halftone over our image, we'll use the Displacement Map by choosing Filter, Distort, Displace. Make sure both the Horizontal and Vertical Scale are 25 and Wrap Around and Stretch to Fit are checked and click OK. You will choose the DisplacementMap.psd that you saved earlier.

It's not ruined! Even if it was, you could always just delete the layer anyway, remember? You should have a big mess of squiggly lines, like this:

But, have courage and trust me! Go to Filter, Blur, Gaussian Blur and set the Radius to 1. Go to Image, Adjustments, Threshold and set it to 120. Then, choose Filter, Stylize, Diffuse and select Anisotropic. Set the Blending Mode to Multiply.

NOW!

Hopefully, you have followed my steps exactly and you still have the Background image on your clipboard from when you copied it earlier...

Hit the Q key to enter Quick Mask Mode and hit Command-V to paste the Background image into your quick mask. You should have that image now in red. Now, still in Quick Mask Mode, choose Filter, Blur, Smart Blur and use a Radius of 6 and Threshold of 80 in High Quality, Normal Mode.

Hit the Q key again to return to Standard Mode and now you will see marching ants around the lighter parts of your image. Choose Layer, Layer Mask, Hide Selection, and you will see the selected areas lightened somewhat, but the image should look like everything is made of wood with a deep grain showing. Making sure the halftone layer's mask is selected in the Layer pallet, choose Image, Adjust, Threshold. You will have to again watch the preview while sliding the threshold slider until you are happy with the result. I used a value of 175, but it will depend on your image and what you like. And voila!

See how the wood grain defines the cowboy hat and the blue jeans? Cool, huh?

And a regular old snapshot turns into a masterpiece...at least in grandma's eyes.

Shallow Depth of Field

I just found yet another handy use for my blog; I want to add this photo to our threaded discussions for this week in our WGD210 class, but of course, I can't figure out how to do that in eCollege. So here it is, from camerachronicle.com, an example of shallow depth of field where the midground is in focus, but the foreground and background are blurred to produce a startling effect: