Traditional Japanese paintings are instantly recognizable; their style, composition and colors are a dead give away. Even more so, the subject matter. Koi Carp have been painted and illustrated by the Japanese for centuries and are familiar to people all over the world. This tutorial will take the intermediate Adobe Illustrator user through the techniques and processes needed to imitate what the Japanese have perfected.
Final Image Preview
Below is the final image we will be working towards (large version available here). Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just 9/month.
Step 1: Go Fishing
Carp have certain characteristics and proportions which make them uniquely....carpish. Unless you're intimate with these details it's a good idea to get yourself a suitable image on which to base your illustration. Japanese Koi paintings typically illustrate movement, energy, calmness and grace, so go and catch yourself a good image which caters for all these factors. Here's mine, downloaded from Dreamstime.
Not exactly energetic and graceful, you're thinking. Well perhaps not, but it does have a great carp-like silhouette and the features are perfect. Let's bring it back to life.
Step 2: Get in Shape
Open your image in Illustrator and place it on its own locked layer. Double-click the layer to open up the Options and choose to Dim Images on this layer to 50%. Now create a second layer on which to build your paths and select an appropriately visible stroke color. Use the Pen tool to outline the fish and don't be afraid to take advantage of your artistic license. If you feel the head should bulge more, or that the back should arch a little less, make it so!
For areas such as the face and the gills, use the Pathfinder tool to create separate objects. We're going to color them individually and layer them up - there'll be no strokes to differentiate regions of the drawing.
Step 3: A Fishy Tale
As we've already discussed, our fish isn't the liveliest looking thing; we need to improvise a little to get the form we want. A tail fin and bendy back-end can be added to the existing body without too much difficulty.
Merge the objects with the Pathfinder tool and tidy up the paths using the Direct Selection tool. The result (when rotated) is a fairly convincing leaping fish.
Step 4: Color Swatches
To keep ourselves working within the boundaries of a traditional Japanese watercolor palette we'll prepare our colors beforehand. Using colors such as those shown below will quickly give our illustration a calming Japanese feel. Koi Carp are symbols of love and friendship in Japan, so that's the general atmosphere we're aiming for. Add these colors to your Swatches palette if you're not working with the source file, you'll be able to use the Eyedropper tool to copy from the jpg below.
Alternatively, I've added a 5 color theme Japanese Koi to Kuler which you can download via your Kuler palette (Window > Adobe Labs > Kuler) or from the kuler site itself. This will give you a good basis for your own swatches.
Step 5: Gradients and Transparency
Watercolor paintings never contain blocks of solid color, the nature of the translucent paint creates blends, fades and washes. We're going to do the same by playing with gradients and transparencies. Illustrator CS4 makes this a brilliantly intuitive process, but we're going to ignore CS4 for the time being - let's get our hands dirty the old-fashioned way....
Select each object individually giving them a Gradient fill with either the Gradient tool (G) or the Gradient Palette (Window > Gradient). By then selecting one of the gradient stops, holding Alt and clicking on a swatch from the Swatches palette, you'll assign your chosen color to that gradient stop. Play with gradients and angles until you're happy with them. For authenticity make sure the spine of the fish is darker than its under belly.
By giving the objects on the head a Lighten transparency and reducing their opacity we can subtly bring the body gradient through, softening the overall effect.
Step 6: Fishy Details
Let's now add a few extra details to help our carp on its way. A thick top lip won't do any harm, a pectoral fin, a couple of barbules and a lateral line. (Thanks must go to Rex Hunt for lessons in the wonders of piscatorial anatomy....)
The lateral line is a simple path, drawn with the Pen tool and given a pale stroke color, the pectoral fin is an object just as the other fins and colored in the same way. The top lip is again a simple object drawn with the Pen tool and the barbules required a custom brush, applied to four short, wavy paths.
Step 7: Finny Details
The pattern on the fins is achieved by first using the Pen tool to make a spiky object like so.
Having filled it with a pale color, then go to Effect > Warp > Shell Upper... and apply an effect as shown in the Warp Options dialogue below.
Expand your newly warped object (Object > Expand Appearance) and position over the caudal fin (thanks again, Rex). Scale it (no pun intended) and use the Pathfinder tool to trim it. Give it a Multiply transparency for the finished effect.
Now repeat the process for the other fins, changing the warp shape depending on the fin.
Step 8: Scaly Details
Creating a scaley pattern is a simple, but very effective process. We're once again going to make a custom brush. It's just what we need to give the impression that the carps body is rounded and bending. Begin by drawing two curved paths like those below.
Now blend them by first going to Blend > Blend Options.. and specifying a blend of 20 steps.
Very good, now go to Blend > Make to get the following result.
Next go to Blend > Expand and duplicate the result. Position the two to create a scale pattern like so.
Drag the scale pattern to the Brush palette (Window > Brushes) and make a New Art Brush as shown below. Be sure to select Hue Shift as the colorization method, as this will allow you to easily recolor strokes which have this brush applied.
That's it for the brush, next we need to apply it to the body..
Step 9: Fish Nets
To get the scale pattern to follow the contour of the body, draw a path similar to the lateral line, but make it longer. Apply the Scales brush to the path and play around with stroke weight values until you're happy with the way the pattern fills the body.
To smoothly rid ourselves of the excess we can use an opacity mask. Begin by creating a circle and filling it with a gradient such as the one you see below. Copy and Paste (Command + C, Command + F) the body under the circle and use the Pathfinder tool to intersect and expand them, giving the following result.
When the mask is applied, by default, whatever lies behind the lighter parts of the mask will show through. Whatever lies behind darker parts will be proportionately invisible. With the new mask object (on top) and the scaley path both selected refer to the Transparency palette (Window > Transparency). Open the Transparency menu and select Make Opacity Mask.
Continuing with the Transparency palette, alter the opacity of your scales object and give it a Multiply transparency. Having chosen to give your brush a Hue Shift colorization method you'll even be able to change the color should you wish. Our scales are finished - and with them, the whole fish. Now let's prepare a composition to finish off our Japanese style illustration.
Step 10: Fishy Background
Place a tall, narrow rectangle on your artboard and color it using the background swatch as suggested earlier. This will be your background. Actually, that's misleading; place the rectangle on top of everything you've drawn so far and change it's transparency to Multiply. In doing so you'll make all the colors on your canvas slightly warmer, softening the overall effect.
Step 11: Compositional Extras
Our leaping Koi Carp is attractive enough on its own, but putting in context will complete the Japanese composition. Let's make use of a free vectorpack available from darkdesign1209 on deviantart.com. These bamboo vectors are ideal for subtly finishing the illustration. As instructed on deviantart.com itself:
Download the PDF file, drag the file to Applications > Adobe Illustrator > Presets > Symbols and then restart Illustrator ... the symbols should be there waiting for you under the small drop down menu at the bottom of the symbols palette.
I chose Bamboo 9, dragged it onto my artboard, placed it under the background rectangle, reduced the opacity to 20%, scaled and positioned it appropriately.
Step 12: Signed and Sealed
Japanese watercolors will typically have a signature or inscription, so let's add one of our own for an extra touch of authenticity. Download the Far East font and install it on your system. This font is a good compromise; I dare not decorate the illustration with actual Japanese characters for fear of writing something offensive to fish-lovers. Instead, this font gives the Western alphabet an Eastern treatment. Use the Vertical Type tool to recreate something like I've made.
Conclusion
So there you have it, a Japanese Koi Carp. Simple, yet effective. I hope you enjoyed this one!
Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.
