Steam Support
Dota 2 Workshop - Character Art Guide



INTRODUCTION

Designing first-class items for Dota 2 requires more than just ability and a great idea. The aesthetics of Dota 2 are built from a set of principles that help keep each hero immediately and uniquely identifiable from above during gameplay. We’re going to go over exactly what these principles are, how we used them to design the heroes and how you can apply them to custom items.

Be aware that the principles on this page are important general design concepts that apply to the readability and quality execution of all items, including inventive items that thoughtfully differ from the default colors and silhouettes. New insights have been added to this updated guide so please have another look even if you've read previous versions.



SILHOUETTE

  • A hero’s silhouette must be clearly identifiable at first glance.
  • The silhouette should show a character’s orientation.
  • Custom items are welcome to differ from the default silhouette of the hero as long as the character is still identifiable and the mesh is compatible with Valve's default hero skeleton and animations.
  • To support the readability and directionality of the hero, drastically different silhouettes for some items could be balanced by more familiar colors or silhouettes for other items.
  • The Dota heroes were designed with pose in mind. Even with custom items, the hero's pose should reinforce the character’s strength, demeanor, and speed.
  • Weapons need a unique read but should work to complement the character’s design.
  • Areas of rest with simple shapes can help balance complicated shapes in other areas.


​​



VALUE GRADIENT - BEGINNING THE HIERARCHY



  • "Value" is the range of lightness and darkness within a subject regardless of color and saturation. One can argue that value is more important than color to the design and the success of a character because not only is it used to create focal points, it creates the illusion of depth, and also helps give three-dimensionality to the object.
  • Dota 2's default hero gradients generally move from darkest at feet/lower body to lightest at the upper body and head. This helps draw the player’s eye to the most important areas of the character.
  • Items that don't follow the 'darker below, lighter above' style of gradient may still work if they follow other principles on this page to ensure clear readability.
  • If an item has large areas of the same color, gradient can bring variety and focus to avoid monotony.


​

​VALUE PATTERNING - CREATING VISUAL INTEREST

  • The human eye instinctively looks for boundaries between areas of contrast, so it makes sense to establish contrasting blocks of value to highlight the various forms in our characters.
  • Following the value gradient described above, we created more visual interest in Dota 2's heroes by increasing the value contrast between objects in the upper torso and keeping the lower torso objects with less contrast.
  • Separating each unique piece on the character into its own value will also help it read as a distinct element.
  • In characters that have no distinct item breaks (as seen in the wolf example above) gradients are used in order to establish patterns.
  • Before adding color, test your value patterns in-game. Be sure the character’s features are recognizable and that the most important features draw the eye.
  • You can view values of heroes and their items in the workshop item tool by using the Hero Display Mode button to cycle through different render options or by entering convar r_hero_debug_render_mode 5 in the console.




​

  • Absolute white and black should not be used in our game, since those colors don’t react well to lighting, becoming flattened or overblown and losing detail.


Note how dark and light areas on the heroes below are handled to preserve detail and form



​



COLOR AND SATURATION - LESS IS MORE



  • Start by selecting a primary color for your item set.
  • Then select a secondary and tertiary color by using complementary, split complementary, analogous, or triadic color schemes (see Color Schemes below for more information).
  • Keep color harmony while painting textures by only introducing new colors using blends of the original primary, secondary, and tertiary colors along with grayscale values.
  • Custom items are welcome to differ from the default color scheme of the hero but you may need to find other ways to support the identification and directionality of the hero. An extreme color change for some items could be balanced by more familiar colors or silhouettes for other items.
  • Avoid using colors which are dominant in the Dota map.
  • Saturation (or intensity of the color) also draws the eye, so saturation levels should be less towards the lower body and increase towards the upper body.
  • Stay away from all pure saturation colors, meaning that you should try not to use colors that max out the R, G, or B values in your color textures. This allows more head-room for the in-game lighting to correctly influence them.
  • Choose very small areas for the highest saturation in order to re-enforce visual interest. Large areas of high saturation overwhelm the viewer and distract from the visual harmony of the character.
  • Complicated texture details, high-contrast values or strong saturation can be balanced by areas of rest with fewer details, less value contrast and reduced saturation.
  • Don’t lose focus! Turn your character to greyscale as described above in Value Patterning and recheck the values during and after the coloring process.


​

COLOR SCHEMES

Color schemes can be inventive but still harmonious if they are created using structured combinations of hues from the color wheel.

Complementary Color Schemes

Complimentary hues are on opposite sides of the color wheel. These opposing colors are more intense and "vibrate" when placed next to each other as they compete for your attention.



Split Complementary Color Schemes

One of the complementary colors is split off into a pair of neighboring hues.



Analogous Color Schemes

Analogous colors are next to one another on the color wheel. These colors appear to "push" at each other, creating an optical illusion where each zone appears larger when it has your attention.



Triad Color Schemes

Triad hues are equidistant on the color wheel



COLOR MIXING

Once you've picked your source colors, mix, tint, and shade them in order to derive your full palette.

This example shows muted colors created by mixing complementary colors. The pure, saturated opposing colors become a desaturated grey tone as they are mixed together.



This example shows using black shade and white tint to adjust color values



CHARACTER COLOR KEY PALETTES​

  • In the examples below, the palettes on the top are the starting palettes.
  • The palettes on the bottom are modified using only colors blended from the starting palettes.


​​Doom and Lion are examples of Analogous palettes



Kunkka and Lycan are examples of Split Complementary palettes



Beastmaster is an example of a Complementary palette.



AREAS OF REST AND DETAIL



  • Large areas of visual complexity can overwhelm the eye and become monotonous.
  • Balance areas of detail by adding larger areas of less detail where the eye can rest.
  • By creating these larger less detailed zones, areas of detail will have a much greater visual impact.
  • Detailed areas should comprise a small percentage of the overall character, and be concentrated in areas of importance.
  • The scale of detail is relative to the size of the character in-game. Details that are too small simply become noise.
  • Larger areas with less or no detail read much clearer from game perspective than highly detailed areas.
  • You can add non-distracting detail on larger areas by keeping the values of the detail close to its background. The visible anatomy on Phantom Lancer, the stripes in the blue areas of Sven’s armor, the stitched patches on Sniper’s cape, and the True Form bear’s brown fur are good examples of this.


​

EVALUATING CONTENT IN CONTEXT



  • One of the most important ways to verify your work is to see it in context, which means placing the hero in different parts of the Radiant and Dire sides of the map during day and night.
  • Be especially mindful of how lighter colors look in the more brightly lit Radiant side of the map during daytime.
  • You can use the Toggle Day/Night button in the workshop tool or type dota_daynightcycle_toggle in the game console to toggle day and night.




  • Be sure to test shapes, value, and color during each stage of the creation process.
  • The workshop submission tool will allow you to preview over budget items in game so you can evaluate early versions of textures and meshes while it's easier to make adjustments.
  • The in-game experience is how the character and items are ultimately going to be seen by the players, so check the model and textures often in the workshop previewing tool.


DIRECTIONALITY

  • It is crucially important for players to instantly identify not only who a character is but which way they are facing so that movements during gameplay can be anticipated.
  • Values, colors, details, and silhouettes help to define each hero's head, their weapon and the direction they are facing.




​

APPLICATION OF CONCEPTS

  • Adjusting a hero’s texture is a fast and easy way of resolving common readability issues.
  • Below are examples of how Valve artists adjusted textures to improve readability during the development of Witch Doctor, Lion, and Beastmaster.
  • Original versions are on the left, the revised versions with improved readability are on the right.


APPLICATION OF CONCEPTS - WITCH DOCTOR

VALUE ADJUSTMENTS

  • Increased the range in value overall allowing for more distinction between elements
  • Created a more pronounced dark to light gradient from the feet to the upper torso
  • Increased the amount value contrast towards the upper torso


COLOR ADJUSTMENTS

  • Decreased saturation overall and increased only in areas of visual interest
  • Added a secondary color into the skin to give it a more life-like appearance by faking skin’s natural translucency (examples of this can be seen on the stomach and in areas of tension such as elbows, knees, and scapula)
  • Gave face and body paint a contrasting color, using value and saturation to contrast against the skin, adding more visual interest to areas of the body


APPLICATION OF CONCEPTS - LION



VALUE ADJUSTMENTS

  • Created a more diffuse lighting scheme by taking away heavy painted-in shadows, such as under shoulder pads and in cloth.
  • Brightened values in areas of detail such as eyes, teeth, and beads to create interest around the face.
  • Adjusted specularity to better match material properties of skin and cloth.


COLOR ADJUSTMENTS

  • Reduced color palette to an analogous color scheme.
  • Decreased overall saturation and added more saturation towards visual landmarks like the mutated hand, tip of the wand, and shoulder pads.
  • Added a secondary color into the skin to give it a more life-like appearance by faking skin’s natural translucency (examples of this can be seen on the stomach, cheeks, inside of arms, and on the elbows).


APPLICATION OF CONCEPTS - BEASTMASTER

VALUE ADJUSTMENTS

  • Created a more pronounced dark to light gradient from the feet to the upper torso.
  • Reduced the contrast in the value patterning of the lower body.
  • Simplified overall value of cowl and added stitches to create visual separation between 2 pieces.
  • Increased value contrast within elements of the face


COLOR ADJUSTMENTS

  • Reduced overall saturation and increased saturation in places of interest like the hair band and straps on horns
  • Simplified colors to only muted complementary earth tones


GAME AND LOADOUT READABILITY

  • Item design must support gameplay by reading well from above and at a distance in game view.
  • Valve artists review items in game for this reason and give this view higher priority than how items look in the loadout.
  • As mentioned previously, it should be clear to determine in game which way the hero is facing and where the head and weapon are.
  • Interesting and appealing design elements on items should be visible from above in game view as well as in the loadout.
  • In addition to the emphasis on game view, community artists still need to make sure that items are executed well for display in the portrait, loadout, and cinematic view, having good density of uvs on prominent areas and adding backface polygons where necessary.




​

SUMMARY

The items seen below were designed by Valve. Notice these points:

  • The gradients, values, colors and detailed areas on the character's items work together with ample areas of rest to maintain visual interest.
  • The shapes of the items make a clear silhouette that differs from the default but is still allows the hero to be identifiable.




  • Remember, maintaining a hero's identification doesn't mean that custom items must exactly follow the default item silhouettes or colors. To create inventive but still functional items, the artist needs to thoughtfully decide where to push the boundaries and where to balance those extremes by staying closer to familiar elements. Additional factors such as Valve's animations, character poses and speed of travel can contribute to hero identification and should be considered in conjunction with customized items. Frequently evaluating the items in game view, getting feedback from others, and being open to making adjustments can help artists achieve a good balance of novelty and readability. What is most important is that custom items visually support gameplay using all of the principles described on this page. Each of these aspects is an important part of Dota 2’s unique design aesthetic.


For technical information about authoring models, shaders, uvs and more, please follow the links on the Dota 2 Item Workshop Guidelines Homepage

Need help with Steam?
Use the Steam help wizard to narrow down your topic and get the help you need.
Help Me With My Issue
Community Help
Post or search in Steam Discussions for an answer to your question.
Visit Steam Discussions