{"id":1623,"date":"2021-09-28T12:58:15","date_gmt":"2021-09-28T12:58:15","guid":{"rendered":"http:\/\/mycours.es\/gamedesign2021\/?page_id=1623"},"modified":"2025-09-25T12:04:44","modified_gmt":"2025-09-25T12:04:44","slug":"brainstormin-visual-style","status":"publish","type":"page","link":"http:\/\/mycours.es\/gamedesign2021\/brainstormin-visual-style\/","title":{"rendered":"Brainstorming: Visual Style \/ Art Direction"},"content":{"rendered":"<p>Let&#8217;s look at these independent games.<br \/>\nThey all &#8220;look good&#8221; even though they didn&#8217;t have dozens of people creating assets.<\/p>\n<p>What are the distinctive visual elements?<br \/>\nWhat are the economic strategies in the production of assets?<br \/>\nHow are the visuals related to the mechanics or theme?<\/p>\n<p><iframe loading=\"lazy\" title=\"Hylics - Walkthrough - Part 1\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/0cxoZ_SVZvY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Hohokum Walkthrough\/Let&#039;s Play Part 2 PS4 No Commentary\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/EThyDkod5XU?list=PL0iyNZ60Gka6raIpog2EW5QAp4Hl2mybM\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Sable: Gameplay (No Commentary)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/jGna-wppo5Y?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Using non game references: <a href=\"https:\/\/www.google.com\/search?q=moebius&amp;tbm=isch&amp;ved=2ahUKEwiYuKGw2aHzAhVbqnIEHTQqA3sQ2-cCegQIABAA&amp;oq=moebius&amp;gs_lcp=CgNpbWcQAzIHCAAQsQMQQzIECAAQQzIICAAQgAQQsQMyCAgAEIAEELEDMgUIABCABDIECAAQQzIECAAQQzIFCAAQgAQyBQgAEIAEMgUIABCABDoHCCMQ7wMQJ1DsxwVYztwFYKXeBWgBcAB4AYAB1AWIAcMMkgEJNi40LTEuMC4xmAEAoAEBqgELZ3dzLXdpei1pbWfAAQE&amp;sclient=img&amp;ei=Xg5TYZiROtvUytMPtNSM2Ac&amp;bih=1041&amp;biw=2114&amp;rlz=1C1CHBF_enUS910US910&amp;hl=en\">Moebius<\/a><\/p>\n<p><iframe loading=\"lazy\" title=\"Donut County (Full Game Walkthrough, No Commentary)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/K4hpM5wOJCI?start=281&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"ISLANDS: Non-Places - Full Game\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/bekEO0GfWFU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"LIMBO Walkthrough (No Commentary)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/9RWGZBZhr1g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Hyper Light Drifter Walkthrough Part 1 No Commentary\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/SUfwSt-aP1o?list=PLGKJJhcJXlNwEqLLn0Gex18ULIeOMP3VI\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Proteus (No Commentary)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/BMQfCMIk4F0?start=557&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"An Airport for Aliens Currently Run by Dogs Full Gameplay\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/ucbVzsp79QU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"The Cat and the Coup Playthrough No Commentary\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/w-y8TSB7v_k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Eliss Infinity - Universal - HD Gameplay Trailer\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/kw-VwpLyAyA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><strong>Questions for you:<br \/>\n<\/strong><br \/>\n<strong>What&#8217;s your strategy for creating assets economically?<\/strong><br \/>\nSimply &#8220;using 2D graphics&#8221; is not an answer, 2D can require more effort than 3D<\/p>\n<p><strong>How does it relate to the theme and\/or gameplay?<\/strong><br \/>\nConsiderations about mood and functional aspect (eg. we need to highlight interactive objects or separate foreground and background)<\/p>\n<p><b>Does the visual style play to your team&#8217;s strengths?<\/b><br \/>\nJUST FOR A MOMENT let&#8217;s look at this project less as an artwork and more as a portfolio piece.<br \/>\nWhat is that you can do well, that you wish you could showcase, that you are considering as your specialization?<br \/>\nAre there ways to integrate this \u2013 without obviously hijacking the project or devolving into a design-by-committee process?<\/p>\n<p>&nbsp;<\/p>\n<header>\n<h1>Colors<\/h1>\n<p>Most of the games above use a limited, non realistic, color palette.<\/p>\n<p>Find a good color palette:<br \/>\ndon\u2019t pick colors at random<br \/>\nwatch out for overtly saturated tones<br \/>\ntry to limit your dominant colors.<\/p>\n<\/header>\n<div class=\"content\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3156\" src=\"http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/98c638e5772645336ecbfde0db2490b3.jpg\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" srcset=\"http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/98c638e5772645336ecbfde0db2490b3.jpg 600w, http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/98c638e5772645336ecbfde0db2490b3-300x263.jpg 300w\" alt=\"sloth\" width=\"600\" height=\"525\" \/><\/p>\n<p>Create a new based on common patterns\u00a0 with\u00a0<a href=\"https:\/\/kuler.adobe.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kuler<\/a><br \/>\nYou can steal color palettes from\u00a0<a href=\"http:\/\/www.colourlovers.com\/palettes\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a><br \/>\nYou can randomize a color scheme with <a href=\"https:\/\/coolors.co\/app\">this app<\/a><br \/>\nCreate one from a picture with\u00a0<a href=\"https:\/\/www.canva.com\/color-palette\/\" target=\"_blank\" rel=\"noopener noreferrer\">this tool<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-386\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/download.jpeg\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/download.jpeg 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/download-300x169.jpeg 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/download-768x432.jpeg 768w\" alt=\"download\" width=\"1024\" height=\"576\" \/><\/p>\n<p>Fernando Ramallo picks colors from pictures of sunsets. Some other designer (I don\u2019t remember who) confessed to rip off colors from\u00a0<a href=\"https:\/\/www.google.com\/search?biw=1164&amp;bih=595&amp;tbm=isch&amp;sa=1&amp;ei=ORCbW_WgF6qE5wKf0I_gDw&amp;q=vintage+polly+pocket&amp;oq=vintage+polly+pocket&amp;gs_l=img.3..0l2j0i67j0l7.100059.101457..101572...0.0..0.67.430.7......1....1..gws-wiz-img.......0i7i30.Jrhw7aGNCPQ\">vintage polly pocket toys<\/a>.<\/p>\n<p><strong>Color ramps<\/strong><\/p>\n<p>Mostly used in pixel art but can it be applied in illustration and anywhere.\u00a0Mind that there is no fixed system to create ramps and palettes,\u00a0but it\u2019s a good idea to familiarize with the practice of hue shifting:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-379\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/hue-shifting.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/hue-shifting.png 1382w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/hue-shifting-300x285.png 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/hue-shifting-768x729.png 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/hue-shifting-1024x972.png 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/hue-shifting-1200x1139.png 1200w\" alt=\"hue shifting\" width=\"1382\" height=\"1312\" \/><br \/>\nYou can generate a color ramp one from a picture with\u00a0<a href=\"http:\/\/mycours.es\/colorRampCreator\/\" target=\"_blank\" rel=\"noopener noreferrer\">this tool<\/a><\/p>\n<p>Sometimes it makes sense\u00a0to use a monochrome or analogous scheme\u2026<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-381\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/analogous-colors-scheme.png\" alt=\"analogous-colors-scheme\" width=\"555\" height=\"436\" \/><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3158\" src=\"http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/3.png\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" srcset=\"http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/3.png 640w, http:\/\/mycours.es\/gamedesign2015\/files\/2015\/10\/3-300x225.png 300w\" alt=\"3\" width=\"640\" height=\"480\" \/><\/p>\n<p>The color scheme doesn&#8217;t have to stay the same!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-383\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/journey_palettes.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/journey_palettes.png 1624w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/journey_palettes-278x300.png 278w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/journey_palettes-768x828.png 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/journey_palettes-950x1024.png 950w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/journey_palettes-1200x1294.png 1200w\" alt=\"journey_palettes\" width=\"1624\" height=\"1751\" \/><\/p>\n<p>But more often than not you will need to differentiate between objects\u00a0and create different ramps for your main colors.<\/p>\n<p>There are plenty of\u00a0<a href=\"http:\/\/pixeljoint.com\/forum\/forum_posts.asp?TID=10695\">tutorials and debates<\/a> on the internet on how to properly create color ramps but it\u2019s a common practice to make sure the ramps are interlocking, so you can have more harmonious edges or tinted outlines that work with different colors.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-380\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/gNPZiCJ.png\" alt=\"gNPZiCJ\" width=\"406\" height=\"197\" \/><\/p>\n<p>Figure out the dominant elements in your game. The scheme above may not work well for a story that takes place in the high seas.<\/p>\n<p>If you follow these principle too closely you may end up with a boring palette, eg your object will look washed out in the same yellow or purple light. The use of bold complementary or non analogous colors, especially for accents.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-382\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter.jpg\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter.jpg 1486w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter-300x88.jpg 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter-768x226.jpg 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter-1024x302.jpg 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colour-theory-in-screenshots-hyper-light-drifter-1200x354.jpg 1200w\" alt=\"colour theory in screenshots hyper light drifter\" width=\"1486\" height=\"438\" \/><\/p>\n<p>Hyper light drifter\u00a0looks unique also\u00a0because it\u00a0<a href=\"https:\/\/www.google.com\/search?biw=1164&amp;bih=595&amp;tbm=isch&amp;sa=1&amp;ei=7habW_ybJ8PR5gK1g52ICw&amp;q=hyper+light+drifter+levels&amp;oq=hyper+light+drifter+levels&amp;gs_l=img.3..0i24.56706.57610..57819...0.0..0.96.426.6......1....1..gws-wiz-img.......0j0i8i30.IxY-_Z5qiew\">doesn\u2019t really seem to follow\u00a0most\u00a0of pixel art rules<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-384\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colorpallet2-e1409612887535.jpg\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colorpallet2-e1409612887535.jpg 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colorpallet2-e1409612887535-187x300.jpg 187w\" alt=\"colorpallet2-e1409612887535\" width=\"300\" height=\"481\" \/><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-385\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colorpallet5-e1409613267620.jpg\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colorpallet5-e1409613267620.jpg 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/colorpallet5-e1409613267620-187x300.jpg 187w\" alt=\"colorpallet5-e1409613267620\" width=\"300\" height=\"481\" \/><\/p>\n<p>Where do these colors and ideas come from? Once again <a href=\"https:\/\/milanote.com\/the-work\/the-surprising-inspiration-behind-monument-valleys-most-beautiful-levels\">NON-GAME INSPIRATIONS<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1626\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/bc80a2a25e4d7623fc751ae009ec7bb0f68dc898_candy_946px.jpg\" alt=\"\" width=\"946\" height=\"631\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/bc80a2a25e4d7623fc751ae009ec7bb0f68dc898_candy_946px.jpg 946w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/bc80a2a25e4d7623fc751ae009ec7bb0f68dc898_candy_946px-300x200.jpg 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2021\/09\/bc80a2a25e4d7623fc751ae009ec7bb0f68dc898_candy_946px-768x512.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p>If you want to be a game artist, a graphic designer or an illustrator\u00a0<a href=\"https:\/\/programmingdesignsystems.com\/color\/color-schemes\/index.html\">learn some color theory<\/a>\u00a0especially applied to the digital sphere.<\/p>\n<p>For more complex\/realistic illustrations like concept and background art it may make sense to<a href=\"https:\/\/design.tutsplus.com\/articles\/digital-painting-101-the-pros-and-cons-of-painting-in-grayscale--cms-23788\">\u00a0paint in grayscale and colorize later.<\/a><\/p>\n<p><strong>Colors in 3d<\/strong><\/p>\n<p>In 3d environments colors emerge from the interplay of lights, skybox, texture colors (albedo), fog, and post-rendering effects.<br \/>\nHere&#8217;s how the art director of Firewatch\u00a0translated a key concept\u00a0art image in a distinctive 3d style:<\/p>\n<p>highlights: stylized fog, color script, paint-over rough screenshots.<\/p>\n<h2><strong>Realism vs Stylization<\/strong><\/h2>\n<p>At some point in the process, not necessarily in the pre-production phase, you&#8217;ll have to decide where your style stand in the realism &#8211; abstraction continuum.<br \/>\nI generally recommend students &#8220;less is better&#8221; (less pixel, less polygons, less colors) but it&#8217;s not just a matter of resources and skills. Stylization requires more considered choices.\u00a0 A good example of striking a balance between &#8220;noise&#8221; and richness in environmental art is the Witness.<\/p>\n<p>Start 7.13<\/p>\n<h2>Research<\/h2>\n<p>Not every game can find inspiration in candy and other media. For more (even slightly more) realistic settings you should research real world places, architecture, objects, clothing, characters etc.<\/p>\n<h2><strong>Mood board<\/strong><\/h2>\n<p>Themes and scenarios come with more obvious tropes attached. If you create a mood board by just googling keyword you&#8217;ll get only visual cliches.<\/p>\n<p>You can try to subvert some of the expectations, create your own twist and interpretations to a particular setting.<br \/>\nCheck these slides from Ninja Theory&#8217;s Devil May Cry and Enslaved<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-569\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM.png 2278w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM-300x174.png 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM-768x446.png 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM-1024x595.png 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.52-PM-1200x697.png 1200w\" alt=\"Screen Shot 2018-09-27 at 9.13.52 PM\" width=\"2278\" height=\"1324\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-570\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM.png 2380w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM-300x173.png 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM-768x442.png 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM-1024x589.png 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.01-PM-1200x691.png 1200w\" alt=\"Screen Shot 2018-09-27 at 9.13.01 PM\" width=\"2380\" height=\"1370\" \/><\/p>\n<p>Two common scenarios and the reinterpretations by ninja theory.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-572\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM.png 2294w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM-300x173.png 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM-768x443.png 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM-1024x591.png 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.14.12-PM-1200x693.png 1200w\" alt=\"Screen Shot 2018-09-27 at 9.14.12 PM\" width=\"2294\" height=\"1324\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-573\" src=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM.png\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" srcset=\"http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM.png 2288w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM-300x175.png 300w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM-768x448.png 768w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM-1024x597.png 1024w, http:\/\/mycours.es\/gamedesign2021\/files\/2018\/09\/Screen-Shot-2018-09-27-at-9.13.26-PM-1200x700.png 1200w\" alt=\"Screen Shot 2018-09-27 at 9.13.26 PM\" width=\"2288\" height=\"1334\" \/><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=tX-XYgPloy8\">Slides from this GDC talk<\/a>\u00a0(not that great, although their work is good)<\/p>\n<p><strong>Exercise:<\/strong><\/p>\n<p><strong>Create a quick mood board on your miro focusing on the color palette (but also including visual motifs).<\/strong><br \/>\nAll the references must be outside of the realm of games.<\/p>\n<p>If you don&#8217;t have any concrete starting points don&#8217;t jus image search &#8220;sad colors&#8221;. Try this site: <a href=\"https:\/\/same.energy\/\">same.energy<\/a><\/p>\n<p><strong>Add real world references to your mood board even if they don&#8217;t match the visual style and palette<br \/>\n<\/strong>Here you can look up things more literally things like &#8220;gothic church&#8221;, &#8220;salmon&#8221;, &#8220;CIA black site&#8221;.<br \/>\nThis will inevitably force you to ask yourself questions like: where and when is this game taking place?<\/p>\n<p>&nbsp;<\/p>\n<header class=\"entry-header\">\n<h1 class=\"entry-title\">Character Design<\/h1>\n<p>For character-driven stories it may make sense to think about the character style first and build a world around it.<\/p>\n<\/header>\n<div class=\"entry-content\">\n<figure id=\"attachment_567\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/character-design-turnaround.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-567\" title=\"character design turnaround\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/character-design-turnaround.jpg\" alt=\"\" width=\"1600\" height=\"826\" \/><\/a><figcaption class=\"wp-caption-text\">Typical character design turnaround, ok for anatomically accurate animations and comics, not so much for games<\/figcaption><\/figure>\n<figure id=\"attachment_565\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/bugsbunny.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-565\" title=\"bugsbunny\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/bugsbunny.jpg\" alt=\"\" width=\"831\" height=\"647\" \/><\/a><figcaption class=\"wp-caption-text\">Test it in action<\/figcaption><\/figure>\n<figure id=\"attachment_568\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/pinocchio-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-568\" title=\"pinocchio-2\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/pinocchio-2.jpg\" alt=\"\" width=\"1381\" height=\"1061\" \/><\/a><figcaption class=\"wp-caption-text\">If you are planning on using close ups, make sure that your design allows the facial expression you need<\/figcaption><\/figure>\n<figure id=\"attachment_581\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/Disney-Flour-Sack.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-581\" title=\"Disney Flour Sack\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/Disney-Flour-Sack.jpg\" alt=\"\" width=\"400\" height=\"366\" \/><\/a><figcaption class=\"wp-caption-text\">Facial expressions are not the only way to convey emotions<\/figcaption><\/figure>\n<figure id=\"attachment_569\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/consistency1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-569\" title=\"consistency1\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/consistency1.png\" alt=\"\" width=\"600\" height=\"373\" \/><\/a><figcaption class=\"wp-caption-text\">Allow for consistency across characters (using a limited palette helps)<\/figcaption>&nbsp;<\/p>\n<p><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/3973428749_b140171533.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-570\" title=\"3973428749_b140171533\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/3973428749_b140171533.jpg\" alt=\"\" width=\"353\" height=\"500\" \/><\/a><\/figure>\n<figure id=\"attachment_570\" class=\"wp-caption alignnone\"><figcaption class=\"wp-caption-text\">What are the features that makes your character instantly recognizable?<\/figcaption><\/figure>\n<p><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/3973428717_bf6c23844c.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-571\" title=\"3973428717_bf6c23844c\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/3973428717_bf6c23844c.jpg\" alt=\"\" width=\"353\" height=\"500\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/3973537441_79b7d1bff8.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-578\" title=\"3973537441_79b7d1bff8\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/3973537441_79b7d1bff8.jpg\" alt=\"\" width=\"353\" height=\"500\" \/><\/a><\/p>\n<figure id=\"attachment_583\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/scott-mccloud-picture-plane.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-583\" title=\"scott mccloud picture plane\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/scott-mccloud-picture-plane.jpg\" alt=\"\" width=\"1600\" height=\"1227\" \/><\/a><figcaption class=\"wp-caption-text\">Realistic, Iconic or Abstract?<\/figcaption><\/figure>\n<p><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/scott-mccloud-universality-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-584\" title=\"scott mccloud universality 1\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/scott-mccloud-universality-1.jpg\" alt=\"\" width=\"830\" height=\"1600\" \/><\/a><\/p>\n<p>Narrative games aside, game characters are defined by their actions and states<\/p>\n<figure id=\"attachment_579\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/8-bit-Click-out-Character-Set-Designs-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-579\" title=\"8-bit-Click-out-Character-Set-Designs-1\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/8-bit-Click-out-Character-Set-Designs-1.jpg\" alt=\"\" width=\"500\" height=\"500\" \/><\/a><figcaption class=\"wp-caption-text\">How can your character communicate its state and features?<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_608\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/sprite-sheet2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-608\" title=\"sprite-sheet2\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/sprite-sheet2.png\" alt=\"\" width=\"1024\" height=\"1024\" \/><\/a><figcaption class=\"wp-caption-text\">The proportions of the main character in Braid were dictated by the platforming gameplay. In cognitive terms, the player has less work to do to calculate the movements of a short squareish object.<\/figcaption><\/figure>\n<figure id=\"attachment_586\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/evolution-of-video-game-characters-14582.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-586\" title=\"evolution-of-video-game-characters-14582\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/evolution-of-video-game-characters-14582.jpg\" alt=\"\" width=\"694\" height=\"1001\" \/><\/a><figcaption class=\"wp-caption-text\">Don\u2019t let the technology dictate your expressive modes<\/figcaption><\/figure>\n<figure id=\"attachment_587\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/fez.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-587\" title=\"fez\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/fez.jpg\" alt=\"\" width=\"1024\" height=\"768\" \/><\/a><figcaption class=\"wp-caption-text\">Some of the best character design in contemporary games is iconic. Originally Mario\u2019s distinctive big nose and mustache was a low-res necessity.<\/figcaption><\/figure>\n<p>In short animations, characters may have specific built-in affordances. They are designed to perform certain actions:<\/p>\n<p>This happens more frequently in videogames, where characters are defined by what they can do and the actions they perform are limited.<\/p>\n<p><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/Pacman-1024x768-253558.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-604\" title=\"Pacman-1024x768-253558\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/Pacman-1024x768-253558.jpeg\" alt=\"\" width=\"1024\" height=\"768\" \/><\/a>Gris &#8211; animation-first, and special &#8220;mood abilities&#8221; expressed through shapes<br \/>\n<iframe loading=\"lazy\" title=\"The Creativity Process behind GRIS\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/rnjKTrIuk7Q?start=1215&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Character design as level design:<\/p>\n<p>Game designers often need to communicate threats, goals and roles without going through narrative character establishments. To do so often \u201ceffectively\u201d recur to problematic strategies such as stereotypes and stock characters: zombies, princesses in distress etc..<\/p>\n<p><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/princess-peach.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-606\" title=\"princess peach\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/princess-peach.png\" alt=\"\" width=\"1067\" height=\"530\" \/><\/a><\/p>\n<figure id=\"attachment_588\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/7803086788_4b3c3444c3_b.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-588\" title=\"7803086788_4b3c3444c3_b\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/7803086788_4b3c3444c3_b.jpg\" alt=\"\" width=\"1024\" height=\"730\" \/><\/a><figcaption class=\"wp-caption-text\">We\u2019ll talk about the problem with women representation in games in a few weeks<\/figcaption><\/figure>\n<figure id=\"attachment_610\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/villains-fps-games.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-610\" title=\"villains-fps-games\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/villains-fps-games.jpg\" alt=\"\" width=\"618\" height=\"518\" \/><\/a><figcaption class=\"wp-caption-text\">On a sample of 20 recent FPS with \u201crealistic\u201d setting<\/figcaption><\/figure>\n<p>Playable characters in games tend to be overwhelmingly white and male. When there\u2019s \u201cdiversity\u201d it reflects the overwhelmingly white male and conservative composition of the game industry today.<br \/>\nEthnic and racial stereotypes are a common (lazy) characterization for fighting games.<\/p>\n<figure id=\"attachment_611\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/Street-fighter-wallpaper-street-fighter-1523125-719-479.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-611\" title=\"Street-fighter-wallpaper-street-fighter-1523125-719-479\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/Street-fighter-wallpaper-street-fighter-1523125-719-479.jpg\" alt=\"\" width=\"719\" height=\"479\" \/><\/a><figcaption class=\"wp-caption-text\">Modern day Native American wearing feathers\u2026 Magic-Yoga-practicing, skull-wearing Indian\u2026 traditional-but-sexyfied chinese dress\u2026 evil Russian brute\u2026<\/figcaption><\/figure>\n<p><a href=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/wow1_trolls.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-612\" title=\"wow1_trolls\" src=\"http:\/\/mycours.es\/gamedesign2012\/files\/2012\/09\/wow1_trolls.jpg\" alt=\"\" width=\"1024\" height=\"768\" \/><\/a><\/p>\n<p>Transposing elements from existing cultures in fantasy settings can also be debatable. The Na\u2019vi in Avatar are the ultimate embodiment of the\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Noble_savage\" target=\"_blank\" rel=\"noopener noreferrer\">Noble Savage<\/a>. The struggle between good and civilized humans and vicious and primitive Horde in World of Warcraft has colonialist undertones. The Horde has totems, tents, face paint, Trolls even have a Jamaican accent.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=eYqYLfm1rWA&amp;ab_channel=FeministFrequency\">Ms. Male Character<\/a><\/p>\n<p>And other videos from the<a href=\"https:\/\/www.youtube.com\/channel\/UC7Edgk9RxP7Fm7vjQ1d-cDA\" target=\"_blank\" rel=\"noopener noreferrer\">\u00a0Tropes vs Videogames series<\/a><\/p>\n<\/div>\n<p><strong>Exercise:<\/strong><\/p>\n<p><strong>What are the distinctive visual features of your character(s)? How do you immediately recognize the among similar designs?<br \/>\n<\/strong>The features must be recognizable from the particular view in the game. Can you cosplay as your main character?<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s look at these independent games. They all &#8220;look good&#8221; even though they didn&#8217;t have dozens of people creating assets. What are the distinctive visual elements? What are the economic strategies in the production of assets? How are the visuals related to the mechanics or theme? Using non game references: Moebius Questions for you: What&#8217;s &hellip; <a href=\"http:\/\/mycours.es\/gamedesign2021\/brainstormin-visual-style\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Brainstorming: Visual Style \/ Art Direction&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1623","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/mycours.es\/gamedesign2021\/wp-json\/wp\/v2\/pages\/1623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mycours.es\/gamedesign2021\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/mycours.es\/gamedesign2021\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/mycours.es\/gamedesign2021\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mycours.es\/gamedesign2021\/wp-json\/wp\/v2\/comments?post=1623"}],"version-history":[{"count":12,"href":"http:\/\/mycours.es\/gamedesign2021\/wp-json\/wp\/v2\/pages\/1623\/revisions"}],"predecessor-version":[{"id":1625,"href":"http:\/\/mycours.es\/gamedesign2021\/wp-json\/wp\/v2\/pages\/1623\/revisions\/1625"}],"wp:attachment":[{"href":"http:\/\/mycours.es\/gamedesign2021\/wp-json\/wp\/v2\/media?parent=1623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}