Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Art for video games

216 views

Published on

Class about art and video games - 2017

Published in: Art & Photos
  • Be the first to comment

Art for video games

  1. 1. Art for Video Games Roger Tavares
  2. 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. 3. What is Art?
  4. 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. 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. 6. Where is art in video games?
  7. 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. 8. Visual Art Worflow CONCEPT Ideas Studies References Draw, Paint and
 Sculpt Software IN GAME Draw and
 Painting Software Modelers Rigging Game engine
  9. 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. 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. 11. WorldofWarcraftOgre http://blizz.ly/2oGGtYV
  12. 12. Initial Concepts Something about technology
  13. 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. 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. 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. 16. Lara Croft from 1996 to 2013
 http://bit.ly/2oIVzim
  17. 17. Initial Concepts: Game Engine GAME
 ENGINE MACHINE GAME GRAPHICS
 ENGINE AI
 ENGINE PHYSICS
 ENGINE SOUND
 ENGINE USER CONTROL visual art
 here!
  18. 18. Initial Concepts: 2D art char sprite sheet Whispers of Avalon sprite sheet @ opengameart.org
  19. 19. Initial Concepts: 2D art tile sheet Basic Map v2.1 by Silver IV @ opengameart.org
  20. 20. Initial Concepts: 2D resolution Megaman (1) NES Megaman 7 SNES Doing an HD Remake the Right Way: http://bit.ly/2oFMpTz
  21. 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. 22. Initial Concepts: texture map Format: Size: JPG 1024 x 1024 pixels By Triduza
 Free download at TurboSquid.com
  23. 23. Initial Concepts: model + texture maps
  24. 24. Initial Concepts: render
  25. 25. Initial Concepts: bump map Sphere with color map Bump map Render
  26. 26. Initial Concepts: render + lighting
  27. 27. Initial Concepts: final render
  28. 28. PaladinAlyonushka(WorldofWarcraftfanartby
 Yekaterina@http://bit.ly/2qnV35I
  29. 29. Video Game Art Styles Examples
  30. 30. Art Styles: Realistic Mirror’s Edge
 2008
  31. 31. Art Styles: Cel Shading The Legend of Zelda:
 The Wind Waker Reborn
 2013
  32. 32. Art Styles: Anime (cel shading) Goku
  33. 33. Art Styles: Comics (cel shading) Borderlands
 2010
  34. 34. Art Styles: Hand Drawn Cel Shading Okami
 2006
  35. 35. Art Styles: Geometric Monument Valley
 2014
  36. 36. Art Styles: Retro, Oldschool (8 bits style) Fez
 2012
  37. 37. Art Styles: Retro, Oldschool (8 bits style) Braid
 2008
  38. 38. Art Styles: Black & White - Film Noir Limbo
 2010
  39. 39. Art Styles: Black & White - Hand Drawn MadWorld
 2009
  40. 40. Art Styles: Isometric Perspective Sim City 3000
 1999
  41. 41. Art Styles: Architeture (Art Deco) Rapture city at
 Bioshock
 2007
  42. 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. 43. Graphic Design
  44. 44. Graphic Design for games Logos and visual identity Packages and special editions Isometric assets and retouch Advertising campaigns Brand related stuff
  45. 45. Color
  46. 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. 47. Color palettes comparison: by year Color palettes in popular video games: http://ubm.io/2p6tL6B 1987 1997 2007 2012
  48. 48. Color palettes comparison: by genre Color palettes in popular video games: http://ubm.io/2p6tL6B FPS Casual
  49. 49. Design by color: game progression Color palettes in popular video games: http://ubm.io/2p6tL6B Journey(2012)
  50. 50. Color Key Artists Some artists for reference
  51. 51. Temple Elder by Eve Skylar
  52. 52. Florianne Becker
  53. 53. Florianne Becker
  54. 54. https://missfunny.artstation.com
  55. 55. HUD Design
  56. 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. 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. 58. HUDs approach SHOW the hud GET OFF the hud INTEGRATE the hud
  59. 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. 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. 61. Candy Crush - http://bit.ly/2ppYJaJ
  62. 62. Candy Crush - http://bit.ly/2ppYJaJ
  63. 63. Candy Crush - http://bit.ly/2ppYJaJ
  64. 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. 65. https://www.youtube.com/watch?v=c_qdOPtNRQI
  66. 66. Gutiar Hero Single Player Hud
  67. 67. Rock Band Multiplayer Hud
  68. 68. Half Life 2
  69. 69. Assassin’s Creed Unity
  70. 70. Assassin’s Creed at NO HUD Wiki
  71. 71. Halo
  72. 72. Halo Reach
  73. 73. Diegetic interfaces: Dead Space 2
  74. 74. Diegetic interfaces: Fallout Pipboy 3000 , prop by Wilhelm Heß
  75. 75. Specializations Character Environment Props
  76. 76. Environment Art
  77. 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. 78. Halo Combat Evolved (2001) Screenshot Level Flow Chart
  79. 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. 80. Dungeon Map http://bit.ly/2pSszAJ Explore, solve, combat!
  81. 81. Block Design https://goo.gl/LzrtOV
  82. 82. Environment Artists Reference artists
  83. 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. 84. The Last of Us
  85. 85. Tomb Raider 2013, Level 8
  86. 86. Tomb Raider 2013, Textures
  87. 87. Tomb Raider 2013, Textures and maps
  88. 88. Brian Recktenwald Environment artist at Naughty Dog Uncharted 4 Star Wars: The Force Unleashed Star Wars 1313 (Cancelled) http://www.barproductions.com
  89. 89. Additional modeling, set dressing & 
 textures by Rogelio Olguin, Adam Littledale
 & Jeremy Huxley. Concept by Emilia Schatz. Lighting by Mark Shoaf & Matt Morgan.
  90. 90. Brian Recktenwald, Demo Reel 2012
  91. 91. Joshua Lynch Senior Texture Artist at MonolitH Call of Duty Defiance (2013) 2XL games for iOS https://www.artstation.com/artist/ joshlynch
  92. 92. Defiance, 2013
  93. 93. Defiance - Overland Bus
  94. 94. Defiance - Overland Bus
  95. 95. Defiance - Overland Bus
  96. 96. Pawel Kot Bloober Team, Krakow, Poland Layers of Fear (2016) Alien Breed (2013)
  97. 97. Character Design
  98. 98. Body and Soul Sketches, Illustrations and Model Sheets
  99. 99. Player characters NPC - Non player char Companions Merchants Quest givers Enemies and bosses
  100. 100. Workflow Anatomical decisions Quick sketches Add detail Final touches Darlene Nguyen, 2015
  101. 101. Proportions Classical Greek Baby to adult 4 to 8 heads
  102. 102. Proportions Classical Greek Adult variations 7,5 to 9 heads
  103. 103. Proportions Anime Style Baby to adult 1 to 9 heads
  104. 104. Proportions Chibi, SD or 
 Super Deformed Big head, small body,
 wide eyes Look as child, kawaii
  105. 105. Shantotto 
 Final Fantasy XI 2002 Shantotto 
 FF Pictologica 2013 Shantotto 
 FF Brave Exvius 2016
  106. 106. Lightining 
 Final Fantasy XIII 2009 Fan art by
 Spicyroll 2010 Word of Final Fantasy 2016 Dissidia 2016
  107. 107. Silhouette techniques Distinctive characters show distinctive silhouettes Used in the character design pre- production Must work with different poses and objects
  108. 108. Silhouette techniques
  109. 109. Silhouette techniques
  110. 110. Silhouette techniques
  111. 111. Character Artists Some artists for reference
  112. 112. 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
  113. 113. Elika Prince
  114. 114. 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
  115. 115. 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
  116. 116. Morgan Everett’s Deus Ex Head by Laura Gallagher Outfit by Evgenii Fokin Renders in Dawn Engine
 and Zbrush
  117. 117. Open Bionics Deus Ex Prothesis
  118. 118. 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
  119. 119. 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
  120. 120. https://www.youtube.com/watch?v=CJZhJ4pHYPs
  121. 121. 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
  122. 122. 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
  123. 123. Bulma, by Oliver Barraza Concept by mjj_nz
  124. 124. 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
  125. 125. 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
  126. 126. Post-credits scene
  127. 127. Post-credits scene
  128. 128. 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

×