The document discusses various aspects of art for video games including concept art, character design, environment art, graphic design, and tools used. It begins with defining art and its role in video games during pre-production, production and post-production. It then covers initial concepts involving rendering, performance, game engines, resolutions and more. Specific topics explored include art styles, color palettes, modeling, texturing, lighting, HUD design, level design, and profiles of professional game artists. References and examples are provided throughout to illustrate different video game art techniques and workflows.

1. Art for Video Games
Roger Tavares

2. Roger Tavares
Chair of Art and Technology at UFRN
(Rio Grande do Norte University),
Brazil.
Arts Department
Works with video games since 1999
Play since 1978

3. What is Art?

4. Art is a very complex concept, present
in all fields of human knowledge
Art goes far beyond aesthetics
Art is History, Social, Memory,
Communication, Education, Political,
Mathematics, Religion, and so on
What is Art

5. Art as craft
To remain objective, this lecture will put
the focus in art for video game
production
Art as craft
Day by day objects, jewelry, coins,
kitchen utensils, and so on

6. Where is art in video games?

7. Where is art in video games?
PRE
PRODUCTION
Briefing
Concepts
Storyboards
Scripts
Cinematics
Tests
POST
PRODUCTION
Trailers
Branding
Advertising
Promotions
PRODUCTION
Modeling
Painting
Designing
Composing
Sound F/X and
Music Scoring

8. Visual Art Worflow
CONCEPT
Ideas
Studies
References
Draw, Paint and
Sculpt Software
IN GAME
Draw and
Painting Software
Modelers
Rigging
Game engine

9. Concept vs In game arts
Visual artists create the visual concepts for
the game
The concepts shows the ideas for the team
and product owners
Concepts define how the game look and
feel for the players
And can be used in promotional pieces,
like boxes, posters and web content

10. Concept vs In game arts
Visual artists send these concepts to
technical artists, modelers, painters,
designers and programmers to make the in
game arts
Conceptual art is now a guide. The in-game
art should conform to the technology used
Depending on the size of the team the roles
can be accumulated

11. WorldofWarcraftOgre
http://blizz.ly/2oGGtYV

12. Initial Concepts
Something about technology

13. Initial Concepts: Rendering
Rendering or image synthesis is
the process or generating image
using computer calculations
Video games needs real time
render
CG Movies and Animations are
pre-rendered
Model and render by Tahseen Jamal

14. Initial Concepts: Performance
Computer performance is the amount of work accomplished by a computer
system
Low cost and old
computers, mobiles
and game consoles
Slow web access
High end
computers, mobiles
and game consoles
Fast web access

15. Initial Concepts: Performance
High detailed images, special effects and realistic render need a lot more
machine performance
Simple games run in most machines
Far Cry PrimalMinecraft

16. Lara Croft from 1996 to 2013
http://bit.ly/2oIVzim

17. Initial Concepts: Game Engine
GAME
ENGINE
MACHINE
GAME
GRAPHICS
ENGINE
AI
ENGINE
PHYSICS
ENGINE
SOUND
ENGINE
USER
CONTROL
visual art
here!

18. Initial Concepts: 2D art char sprite sheet
Whispers of Avalon sprite sheet @ opengameart.org

19. Initial Concepts: 2D art tile sheet
Basic Map v2.1 by Silver IV @ opengameart.org

20. Initial Concepts: 2D resolution
Megaman (1)
NES
Megaman 7
SNES
Doing an HD Remake the Right Way: http://bit.ly/2oFMpTz

21. Initial Concepts: 3d model
Geometry:
Polygons:
Vertices:
Textures:
Materials:
Rigged:
Animated:
UV Mapped:
Unwrapped UVs:
Polygonal Quads/Tris
1,670
1,644
Yes
Yes
No
No
Yes
Yes, non-overlapping
By Triduza
Free download at TurboSquid.com

22. Initial Concepts: texture map
Format:
Size:
JPG
1024 x 1024 pixels
By Triduza
Free download at TurboSquid.com

23. Initial Concepts: model + texture maps

24. Initial Concepts: render

25. Initial Concepts: bump map
Sphere with color map Bump map Render

26. Initial Concepts: render + lighting

27. Initial Concepts: final render

28. PaladinAlyonushka(WorldofWarcraftfanartby
Yekaterina@http://bit.ly/2qnV35I

29. Video Game Art Styles
Examples

30. Art Styles: Realistic
Mirror’s Edge
2008

31. Art Styles: Cel Shading
The Legend of Zelda:
The Wind Waker Reborn
2013

32. Art Styles: Anime (cel shading)
Goku

33. Art Styles: Comics (cel shading)
Borderlands
2010

34. Art Styles: Hand Drawn Cel Shading
Okami
2006

35. Art Styles: Geometric
Monument Valley
2014

36. Art Styles: Retro, Oldschool (8 bits style)
Fez
2012

37. Art Styles: Retro, Oldschool (8 bits style)
Braid
2008

38. Art Styles: Black & White - Film Noir
Limbo
2010

39. Art Styles: Black & White - Hand Drawn
MadWorld
2009

40. Art Styles: Isometric Perspective
Sim City 3000
1999

41. Art Styles: Architeture (Art Deco)
Rapture city at
Bioshock
2007

42. Artists communities
ArtStation
https://www.artstation.com
Behance
https://www.behance.net
DeviantArt
http://www.deviantart.com
CGHub (offline), CGSociety,
GameArtisans (archive), Polycount…

43. Graphic Design

44. Graphic Design for games
Logos and visual identity
Packages and special editions
Isometric assets and retouch
Advertising campaigns
Brand related stuff

45. Color

46. Color key artists
Color key artists, colorists, or painters are the
professionals with focus in color
The division between color and outline is common
in comics industry
In the movies they create background paintings,
materials and lighting
For the video games production they work with the
concept artists, or the textures and material artists

47. Color palettes comparison: by year
Color palettes in popular video games: http://ubm.io/2p6tL6B
1987 1997 2007 2012

48. Color palettes comparison: by genre
Color palettes in popular video games: http://ubm.io/2p6tL6B
FPS
Casual

49. Design by color: game progression
Color palettes in popular video games: http://ubm.io/2p6tL6B
Journey(2012)

50. Color Key Artists
Some artists for reference

51. Temple Elder by Eve Skylar

52. Florianne Becker

53. Florianne Becker

54. https://missfunny.artstation.com

55. HUD Design

56. Heads Up Display
HUD is the graphical interface used
to bring information for the player
during the game
It’s not UI only, it is about UX design
Users Interface vs User eXperience)
Maps
Resources
Progression, time, and so on

57. HUDs vs Graphical Interfaces
HUDs are specialized Graphical
Interfaces
Graphical Interfaces let you adjust
the settings, calibrations, things you
can see or made when are playing

58. HUDs approach
SHOW
the hud
GET OFF
the hud
INTEGRATE
the hud

59. HUDs approach
SHOW
the hud
GET OFF
the hud
INTEGRATE
the hud
Good for
movies
people
Good for
casual
players
Good for
sci-fi
related

60. HUDs approach
SHOW
the hud
GET OFF
the hud
INTEGRATE
the hud
Good for
movies
people
Good for
casual
players
Good for
sci-fi
geeks
Half Life,
Assassins Creed
Candy Crush,
Heartstone
Halo,
Dead Space

61. Candy Crush - http://bit.ly/2ppYJaJ

62. Candy Crush - http://bit.ly/2ppYJaJ

63. Candy Crush - http://bit.ly/2ppYJaJ

64. 1. Your cards.
2. Portrait of Champion
3. Class skill and cost
4. Mana crystals
5. Health points
6. Fighting minions
7. End turn
8. Your deck
9. Game history
10. Player’s nickname

65. https://www.youtube.com/watch?v=c_qdOPtNRQI

66. Gutiar Hero Single Player Hud

67. Rock Band Multiplayer Hud

68. Half Life 2

69. Assassin’s Creed Unity

70. Assassin’s Creed at NO HUD Wiki

71. Halo

72. Halo Reach

73. Diegetic interfaces: Dead Space 2

74. Diegetic interfaces: Fallout Pipboy 3000 , prop by Wilhelm Heß

75. Specializations
Character Environment Props

76. Environment Art

77. Level design vs Environment art
Level Designers work with maps, charts, boxes,
regarding a project level
Design collisions, escapes, hiding places,
encounters, routes, shortcuts, and the player's
relationship with objects and other players
Script events and test gameplay
Artists build the assets and create the visuals
according the game concept
http://www.worldofleveldesign.com

78. Halo Combat Evolved (2001) Screenshot
Level Flow Chart

79. Level Design
Where I am?
What I need to do?
Where I go?
FPS Level Design criticism: the COD effect
http://bit.ly/2p33XWP

80. Dungeon Map
http://bit.ly/2pSszAJ
Explore, solve, combat!

81. Block Design
https://goo.gl/LzrtOV

82. Environment Artists
Reference artists

83. Rogelio Olguin
Environment Modeling and Texture
Artist/Shader at Naughty Dog
Uncharted 4 (2016)
The Last of Us
Tomb Raider
Unreal Torunment 2004
others

84. The Last of Us

85. Tomb Raider 2013, Level 8

86. Tomb Raider 2013, Textures

87. Tomb Raider 2013, Textures and maps

88. Brian Recktenwald
Environment artist at Naughty Dog
Uncharted 4
Star Wars: The Force Unleashed
Star Wars 1313 (Cancelled)
http://www.barproductions.com

89. Additional modeling, set dressing &
textures by Rogelio Olguin, Adam Littledale
& Jeremy Huxley.
Concept by Emilia Schatz.
Lighting by Mark Shoaf & Matt Morgan.

90. Brian Recktenwald, Demo Reel 2012

91. Joshua Lynch
Senior Texture Artist at MonolitH
Call of Duty
Defiance (2013)
2XL games for iOS
https://www.artstation.com/artist/
joshlynch

92. Defiance, 2013

93. Defiance - Overland Bus

94. Defiance - Overland Bus

95. Defiance - Overland Bus

96. Pawel Kot
Bloober Team, Krakow, Poland
Layers of Fear (2016)
Alien Breed (2013)

98. Character Design

99. Body and Soul
Sketches, Illustrations and Model Sheets

100. Player characters
NPC - Non player char
Companions
Merchants
Quest givers
Enemies and bosses

101. Workflow
Anatomical decisions
Quick sketches
Add detail
Final touches
Darlene Nguyen, 2015

103. Proportions
Classical Greek
Baby to adult
4 to 8 heads

104. Proportions
Classical Greek
Adult variations
7,5 to 9 heads

105. Proportions
Anime Style
Baby to adult
1 to 9 heads

106. Proportions
Chibi, SD or
Super Deformed
Big head, small body,
wide eyes
Look as child, kawaii

108. Shantotto
Final Fantasy XI
2002
Shantotto
FF Pictologica
2013
Shantotto
FF Brave Exvius
2016

109. Lightining
Final Fantasy XIII
2009
Fan art by
Spicyroll
2010
Word of Final Fantasy
2016
Dissidia
2016

117. Silhouette techniques
Distinctive characters show distinctive
silhouettes
Used in the character design pre-
production
Must work with different poses and
objects

119. Silhouette techniques

120. Silhouette techniques

121. Silhouette techniques

123. Character Artists
Some artists for reference

124. Patrick Lambert
Concept artist for Ubisoft Montreal
FarCry Primal (2016)
Assassins Creed
Tom Clancy´s Rainbow Six: Siege
Prince of Persia
Disciples
Vampire the Masquerade: Redemption
Zakkar
Far Cry Primal

125. Elika
Prince

126. Thierry Doizon
Ubisoft Montreal, Square Enix
Montreal, Sys Studio
Deus Ex, Human Revolution (2011)
Lara Croft Go (2016)
Tron Legacy The Movie
Spark (book)
Prince of Persia (2008) Deus Ex
Human Revolution

130. Laura Gallagher
Lead Character Artist at Eidos Montreal
Deus Ex: Mankind Divided (2016)
Tomb Raider (2013)
Deus Ex: Human Revolution (2011)
https://www.artstation.com/artist/
lipstick

131. Morgan Everett’s Deus Ex
Head by Laura Gallagher
Outfit by Evgenii Fokin
Renders in Dawn Engine
and Zbrush

134. Open Bionics Deus Ex Prothesis

135. Bruno Câmara
3D creatures design for Crytek, Riot,
Gameloft, Plastic Wax and others
Cinematics more than ingame objects
Warcraft
Ryse: Son of Rome (2013)
Dawn of War
Street Fighter
Teenage Mutant Ninja Turtles
Grom, Warcraft

139. Concept Art Tools
Concept artist like to use:
A good tablet
Pixologic Z-brush (3D)
Photoshop or painting software (2D)
Organizers for image references
And pencil and paper, of course
Ice Cream Girl,
by SupremeFunk
Z-Bursh

140. https://www.youtube.com/watch?v=CJZhJ4pHYPs

141. Pixel Artists Tools
Sprite editors as Aseprite or Graphic
Gale, Pixel.Tools
Tile maps builders and editors, such as
Pyxel Edit, TME, Tile Studo
A Paint tool such as Photoshop, Affinity
Photo, Pixlr, Sumopaint
Tip: enjoy an online free pixel editor:
Piskel: http://www.piskelapp.com
Aseprite

142. Technical Artists Tools
Technical artists like to use:
Z-brush (3D)
Mari (HiRes Textures)
Substance Painter (Sculpt)
Substance Designer (Materials)
3dCoat (retopology)
Oldschool 3d modeling software (Maya,
Lightwave, 3dMax, Blender…)
byRyanRibot

144. Bulma, by Oliver Barraza
Concept by mjj_nz

145. Action Adventure Level Design, Part 1: http://ubm.io/2oPzcV4
Bioshock Demo Storyboard: http://bit.ly/2pTgHzg
Darlene Nguyen: http://bit.ly/2oe6A79
Doing an HD Remake the Right Way: http://bit.ly/2oFMpTz
Eve Skylar: https://www.artstation.com/artwork/XJY30
FFXIclpedia: http://ffxiclopedia.wikia.com
Florianne Becker: https://www.artstation.com/artist/
floriannebecker
Ikr: http://ikr.deviantart.com
References

146. Heartstone: Kolento vs Firebat http://bit.ly/2pSm41M
Isometric Assets: http://ubm.io/2p9UvmA
Miss Funny: https://missfunny.artstation.com
Prince of Persia Credits: http://http://bit.ly/2nPqrx6
Rogelio Olguin: https://www.artstation.com/artist/rogelio
Spriters Resource: www.spriters-resource.com
Spicyroll: http://spicyroll.deviantart.com
Thierry Doizon portfolio: https://www.behance.net/
BARONTiERi
Vera Velichko: https://www.artstation.com/artist/
vera_velichko
References

147. Post-credits scene

148. Post-credits scene

149. Post-credits scene
Para quem não tem essa referência, trata-se de uma estátua de bronze, comissionada
pelo governo português, como homenagem ao jogador Cristiano Ronaldo, no
aeroporto da Madeira. Devido ao mal resultado da obra, esta virou piada na internet,
no período de sua inauguração em março de 2017. http://bit.ly/2wjXahZ