Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
Skin shading is a large part of creating portrait and people art. In today's article I'm going to show you different styles of skin shading and give you some helpful tips on creating flawless skin in your vector work!
Skin shading may seem like a minor part of illustrating people and portraits, but looks can be very deceiving.
Since getting into vector portraits and vectoring people, I've noticed how when the compliments come in they always talk about how wonderful the hair is, the eyes are, the lips are... everything apart from the largest organ of the body, which is visible to all - the skin.
Whenever I create a portrait, the skin shading takes up the majority of my time; however, when writing it in a tutorial it will take up only a small chunk of the steps... it's very deceiving! I take so much care over skin shading as it is one of those elements of a portrait, if it's done well it goes unnoticed and unappreciated. Although, should you come across problems and don't render it as effectively, it's picked up on straightaway.
Skin Shading Styles
When starting on a project involving people, one of the first questions you tend to ask yourself is the style in which you do it. This then will dictate the style of skin shading you'll do. While some artists approach the area with fine detailing and precisely layered shapes, others may use a more random style and minimal elements. So let's look at some styles of rendering skin shading.
If you're going for hyper-realistic skin shading with no signs of layering of shapes, gradient meshing is one of the tools for you. It's one of those styles that can create flawless skin, but can be frustrating to master. By effectively using the Eyedropper Tool and a reference image, you can create realistic skintones and shading, which can often look like a duplicated photograph, rather than a vector graphic.
Feathering and Blurring
Shapes that are feathered or blurred can create a smooth appearance on the skin. Although they aren't strictly vector*, they are still scalable effects within Illustrator. You can still maintain a layered object look, but also have a more realistic look to the curves of the skin.
To check out how you can create skin shading in this style, the legendary LimKis shows you in this step by step tutorial of how mixing blurred shapes and clipping masks can create effortlessly smooth skin.
*Feathering and blurring are raster based effects. In Illustrator when you apply these effects, it will duplicate the shape, rasterize it and then apply either the blur or feather effect. It then combines the raster shape with the vector shape. You can modify the settings of the shape and reshape/rescale as you wish because it is a live effect. Test this out in Illustrator by expanding your feather/blurred shape to see the raster component.
Gradients can help keep a connection with the appearance of layered vector shapes, but provide a stylish detailing that solid shapes cannot. Using solid gradients can maintain the layered shape appearance; however, transparent gradients will create a more smooth appearance that say feathering and blurring can.
What I love about this piece is it's complex gradients, yet when you view the outlines, you can see how much skill has went into placing the gradients within the composition.
This is more of a technique in Photoshop, where mixing vector shapes and raster masks can help create this style of skin shading.
Vector artist Aseo tells me he creates vector shapes, then uses Alpha Masks in Photoshop by using brushes to make visible areas of the skin shading he wants visible. It certainly helps create an effective style of skin shading unique to the artist.
If you're just starting out in vectoring portraits, you may have come across this style of skin shading. By posterizing your stock image and then tracing the shapes visible, you can create this almost blocky effect. Want the skin shading to look more realistic? Well if you have time to spare you can increase the posterization level to give you more shapes to trace.
I'm personally not so keen on this way of rendering, as it teaches you more to trace than to recognize by your own eyes to where the contours are on the skin; however, it is a good exercise for tracing and mastering the Pen Tool. You can check out how to create this image via Chris Spooners's tutorial.
I'm of the opinion it takes some skill to create an amazing piece of art out of minimal elements and this is pretty similar to using minimal shapes to create skin shading. By using smaller shapes of highlights and shadow, you can create effective skin shading without the need for huge amounts of layering.
With this style, you're looking at drawing just the key highlights (maybe on the nose tip or cheeks) and the darkest of shadows (cast by the nose, the eyelids and maybe the side of the face). Next time you're putting together a complex skin shading piece, try removing 90% of the shapes you've created, and go back to the absolute minimum to see how you can change the style of your piece.
In traditional art, hatching has been a style of shading which has been used to create depth with only two colors: the background color and the line art color. This style has been brought more into the digital age with the use of pressurized strokes and well placed delicate lines to create a style of skin shading that can be very unique.
I've seen CrisVector's recent style with using lines for shading a lot. What makes his unique and more polished is the use of pressured strokes. This is what is preventing the lines from looking uniform. A fantastic style and very effective when combined with minimal shading.
Lines and Opacities
I'm a big fan of using lower opacity shapes in my skin shading and here's an example from another artist who uses a similar style. Using low opacity shapes to give subtle highlights and shadow to the skin and then using line art to fill in the detailed gaps. Without the lines the piece may not look as effective, the shading would be too faint to be able to tell which areas are which.
Curious about how this vector was put together? Check out the tutorial to find out how mixing low opacity shapes and lines make this effective style of skin shading.
The Skin is the Canvas
By using the area of the skin to place another illustration has been an effective style by Jared Nickerson. Similar to the philosophy of tattooing, the skin is a canvas in itself!
In this piece we can see how he's used a minimal style of skin shading (see the highlight on the nose and ear, and shadow along the nose and neck), and then overlaid this over an illustration, more than likely within a clipping mask. It's certainly a unique way of skin shading!
The Techniques I Use
I do a lot of portraits and vectors of people and have tried many different styles. The one I'm most comfortable with is using a small selection of skin tone colors (maybe up to 5 or 6) and then using very low opacities (around 10%).
I like to add shadows and highlights using Blending Modes to give a smooth appearance to the skin, yet maintain some elements of the layered shape look of vector. These shapes are then laid upon a base shape of the entire area of skin and then contained within a Clipping Mask to make sure the edges remain crisp.
My premium tutorials on Vectortuts+, which involve portraits and people do go into further depth on skin shading if you'd like to find out more.
Tips on Skin Shading
Although I can't give advice on all the styles of skin shading featured, there are some tips I can share that have helped me over the years:
The lips are an area of skin. When rendering lips, try to incorporate them into the skin shading and then use Color/Soft Light blending modes to add color to the lips. This will help prevent them looking like a separate entity that is floating on top of the skin.
If you're having problems picking out skintones using the Eyedropper Tool on a stock image, why not try the many Skintone palettes Illustrator has to offer. You can locate these by going into your Swatch palette with the drop down menu, going to Open Swatch Library > Skintones. There you'll find a variety of palettes for different ethnicities, as well as highlight/midtone and shadow colors.
If you're still having problems with selecting skintones, try using one color for the whole portrait. Then use a variety of Blending Modes and Opacities to define areas of highlights and shadow. For instance, highlights can be created using Screen and shadows by using Multiply.
For detailed portraits, remember that the skin is not all one color. The corners of your eyes are slightly grayed, the cheeks may have a "rosy" color to them. Men will have a reduced saturation around their chin/mouth/jawline areas due to stubble growth. Around the nose may be more red than other areas also.
Do you have an area that is not as smooth as you'd wish? From Illustrator CS4 onwards you have the wonder which are transparent gradients. Used effectively, they can be layered upon areas that can make areas appear more smooth without the need of blurs and feathering.
If you're using stock images as a reference, try increasing the contrast of the image in Photoshop (or any photo editing software) so you can see which areas have the most highlight and shadows. This will make it easier for rendering. If you've not got Photoshop, just place a shape over the canvas set to Color Dodge and one for Color Burn to increase the contrast.
Lastly, take your time. Rushed and sloppy skin shading is often picked up upon as a flaw in a composition.
The screenshots featuring the cheek, lips and gradients are taken from my premium tutorial on Creating a backlit female portrait, which also goes in depth on this detailed shading style.
Other stock image is provided by Tasastock.
Skin Shading Tutorials on Vectortuts+
Although these tutorials are specifically to do with skin shading, they do involve part of the process to do with skin shading that you may find useful:
- Creating a Maneater Vector Girl Through Collaboration
- Create a Sparkly Female Portrait in Illustrator
- Modeling the Human Face in Illustrator
- Tracing a Vector Face From a Reference Photo
- Rapid Vector Portrait Process
- How to Illustrate a Lebron James Cartoon Character
Learning the basics of anatomy, you can help yourself to create more realistic and refined portraits and skin shading. Knowing how the skin curves on the body can help a great deal with being able to produce more flawless skin.
Remember skin is not perfect and does have pores, moles, spots and more if you're wanting to get even more realistic! Maybe next time you view a portrait, you might look beyond the hair, eyes and lips and see how much work has gone into creating great skin.
Do you have any skin shading techniques you'd like to share?