tag:blogger.com,1999:blog-3783524698615684132024-02-19T02:03:08.723-08:00Jenn Johnson's Art BlogJenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.comBlogger123125tag:blogger.com,1999:blog-378352469861568413.post-73539763447472843212015-07-13T10:58:00.000-07:002015-07-13T10:58:19.256-07:00Art Direction of Spirit Siege - Part 2: After KickstarterThis is Part 2 of a two-part post about the evolution of Spirit Siege's art direction. If you haven't already, check out <a href="http://vibranthydrant.blogspot.com/2015/02/art-direction-of-spirit-siege-part-1.html?spref=fb" target="_blank">Part 1</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQe3DteIYX6z_x_xi-kWZp4sABimE1VvWLxd0Qm3ZERNSZoOSEowlrnzjFoB2bsp3s6tr_iLtAC3kgCxYCBODbTZbIg3hAMDRQz-UB8Wtc1DrMsibWsl3FmRN62ZDArmssq7TWXwVCyo/s1600/JennJohnson_SpiritSiege_ArtDirection_new.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQe3DteIYX6z_x_xi-kWZp4sABimE1VvWLxd0Qm3ZERNSZoOSEowlrnzjFoB2bsp3s6tr_iLtAC3kgCxYCBODbTZbIg3hAMDRQz-UB8Wtc1DrMsibWsl3FmRN62ZDArmssq7TWXwVCyo/s640/JennJohnson_SpiritSiege_ArtDirection_new.png" width="640" /></a></div>
<br />
<a name='more'></a>Our story picks up again during the <a href="https://www.kickstarter.com/projects/novaheartbeat/spirit-siege-your-five-minute-strategy-game-fix" target="_blank">Kickstarter</a> campaign in September. To review, this was the state of art direction at the time:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC7hCdSpuTnmIyay4lZQPA-ODL6wXSXoUXipiT_DNbPERDeksaD51yHpdlP64qPF22q4ajZYmTR75Ah77U1gJLtwW3T_z785PAHiThrNyxBZI-MtTsQFGX6ziUauqjh-JYFIpNCDSkbEs/s1600/JennJohnson_SpiritSiege_GameplaySceneMockUp_Kickstarter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC7hCdSpuTnmIyay4lZQPA-ODL6wXSXoUXipiT_DNbPERDeksaD51yHpdlP64qPF22q4ajZYmTR75Ah77U1gJLtwW3T_z785PAHiThrNyxBZI-MtTsQFGX6ziUauqjh-JYFIpNCDSkbEs/s1600/JennJohnson_SpiritSiege_GameplaySceneMockUp_Kickstarter.png" width="378" /></a></div>
<br />
These lingering problems were still nagging at the team:<br />
<ul>
<li>The palette was still really drab compared to the established norms in the mobile market. Platform expectations aside, the relatively destaturated colors were making our game feel less fun than it is. Can't have that!</li>
<li>We were trying <i>so hard</i> to make red and blue team colors work and it hamstringed a lot of other color choices in the process. At the time, players were randomly assigned a team color and needed to figure out which color they were as fast as possible at the start of each game. The more we plastered red/blue around the screen, the more red/blue dominated and steamrolled the rest of the palette.</li>
<li>Perspective was seriously broken, well beyond the limits of artistic license. The horizon is just <i>waaaay</i> to low for the amount of forced perspective on the board.</li>
<li>The largely ignorable background painting had a disproportionately high level of detail compared to the units.</li>
<li>The background painting could create a lot more depth if it weren't composed of horizontal rows arranged parallel to the picture plane.</li>
<li>The scale on terrain was all over the place, relative to units and to each other. Also, that type of rocks really just don't occur in nature next to that type of trees.</li>
</ul>
To start, I brightened up the Kickstarter page with a mid-campaign palette-swap.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2T3ZbnaKTvUlSi_5bL4XH53AXB0_IJ2YQYEh7FUcFMYwJkhRVf_DgXv-werf1AaVw3cRX9bH58I0HKg3mzcyUzKvZHYZxXc4E_bPYTOPhhRl0-EHXkkqwF6a69Ar_8ssHp7sO7oY-b4M/s1600/SpiritSiege_Kickstarter_PaletteSwap_teaser.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2T3ZbnaKTvUlSi_5bL4XH53AXB0_IJ2YQYEh7FUcFMYwJkhRVf_DgXv-werf1AaVw3cRX9bH58I0HKg3mzcyUzKvZHYZxXc4E_bPYTOPhhRl0-EHXkkqwF6a69Ar_8ssHp7sO7oY-b4M/s1600/SpiritSiege_Kickstarter_PaletteSwap_teaser.png" width="400" /></a></div>
<br />
Those changes, applied to the gameplay scene, would look like this. That helped, but wasn't enough.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiat87mbeR8HYZAyIeVs936lZPfX3NA0VJvaapCAQJDWp_sLN6lmjrxDQAtuc1T8GQuDmaIk2rhmClOe7Q-MEKNRllQ5cnvJaSYKUmufs0FE57sTeS-DB8kDCyWkT6KiAJvc_CwR0JxROQ/s1600/JennJohnson_SpiritSiege_Sept20_brighter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiat87mbeR8HYZAyIeVs936lZPfX3NA0VJvaapCAQJDWp_sLN6lmjrxDQAtuc1T8GQuDmaIk2rhmClOe7Q-MEKNRllQ5cnvJaSYKUmufs0FE57sTeS-DB8kDCyWkT6KiAJvc_CwR0JxROQ/s1600/JennJohnson_SpiritSiege_Sept20_brighter.png" width="216" /></a></div>
<br />
Ultimately, two game design decisions enabled the final look:<br />
<ol>
<li><b>Light and dark teams rather than red and blue.</b> That gave Caitlyn much more freedom to use those hues in character art, and made it a lot easier to compose the screen for overall chromatic harmony.</li>
<li><b>The player is always light by default</b>, but can choose to play as dark from the settings menu. This improved the player experience by completely eliminating the messy opening beat when the player had to halt their strategizing to figure out which team they were on. For art, it freed a bunch of UI elements from their role as team color indicators.</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyOFGEDsC6m-7ThEID7whRhQIf4jGaEnUAoxmoT3hCgGEH9ledyM7T16RSUAESik3G74M0pv4UZGB1nSdN900apA2VMI_ivEvWtxHamKGDl8OlCVji1ikmcs9CVILesJbGNDr2imVwljA/s1600/JennJohnson_SpiritSiege_TeamColorSwap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyOFGEDsC6m-7ThEID7whRhQIf4jGaEnUAoxmoT3hCgGEH9ledyM7T16RSUAESik3G74M0pv4UZGB1nSdN900apA2VMI_ivEvWtxHamKGDl8OlCVji1ikmcs9CVILesJbGNDr2imVwljA/s1600/JennJohnson_SpiritSiege_TeamColorSwap.png" width="640" /></a></div>
<br />
In some ways, I treated this art direction pass as if we were starting from scratch. Forget what we have, and where we've been; what do we want, and what do we <i>love</i>?<br />
<br />
After gathering folders and folders of reference, I narrowed it down, and then narrowed it down again. I've found that reference-gatherers tend to make one of two mistakes:<br />
<ol>
<li><b>Not enough reference.</b> These projects usually fall flat and look generic. No matter how brilliantly creative you are, the whole of human and natural history has you beat, so go out, find something awesome, and let it make your creations more unique.</li>
<li><b>Too much reference. </b>When looking at a pile of unbelievably amazing gorgeous inspiring reference, it's difficult to accept that you simply can't use all of it. Sometimes two really cool pieces just aren't compatible because they pull in different directions. Sometimes a piece that's freaking amazing just isn't right for this project. Learning to edit down reference is the difference between pretty good fairly-clear art direction and amazing ultra-clear focused art direction.</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnzRcoVCa9l9BLOm-XHMU1B9A5gjrMvoSArSHCbXayJPUjt9nz06nxZLdTwTRh-NbzWjXRwqX0cdMxUL101iN2SjJqI9u7WEad8SYCiX14fpQOBdxsyTpzUJdiUmeKpyMURQOY9NfKFM/s1600/SpiritSiege_TouchstoneLookandFeelReference.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="438" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnzRcoVCa9l9BLOm-XHMU1B9A5gjrMvoSArSHCbXayJPUjt9nz06nxZLdTwTRh-NbzWjXRwqX0cdMxUL101iN2SjJqI9u7WEad8SYCiX14fpQOBdxsyTpzUJdiUmeKpyMURQOY9NfKFM/s1600/SpiritSiege_TouchstoneLookandFeelReference.png" width="640" /></a></div>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpAriZQAsUC8ZhdhYtpA8-vycRe3Dbj271KGH8TOFgjgOefrzXr6RYgUIHLJ0gtKUoABg8nsDDzKFclL5XGZ-uJ3vxwduNkPaXZClcRXNuvyTofxAnpcexjbwmTjH1BuTYjQWu_Y5wPXk/s1600/JennJohnson_SpiritSiege_ArtDesignDoc.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpAriZQAsUC8ZhdhYtpA8-vycRe3Dbj271KGH8TOFgjgOefrzXr6RYgUIHLJ0gtKUoABg8nsDDzKFclL5XGZ-uJ3vxwduNkPaXZClcRXNuvyTofxAnpcexjbwmTjH1BuTYjQWu_Y5wPXk/s1600/JennJohnson_SpiritSiege_ArtDesignDoc.png" width="273" /></a>Another important part of the design process is defining the problem and naming solutions. This is how you know whether or not your reference actually supports the goals of the project. In reality, the two processes occur in tandem. Some design restrictions and goals are known from the outset, and others grow out of found inspiration and reference. I collected thoughts about Spirit Siege's new art direction and laid out art rules to support them in this art design document.<br />
<br />
While doing an art direction pass this late in development is not ideal (we've thrown out an awful lot of work), in many ways it's easier than starting out in a void. For one thing, the gameplay is solid, stable, and fun. We already know what the mechanics are and how things will be arranged on the screen. We know what's important to the player when. Think of it as having a really well-tested greybox, that happens to not be grey.<br />
<br />
For another thing, Caitlyn's character art style had undergone its own evolution by then and she'd really hit her stride delivering solid consistent appeal. Whatever the rest of the game might have become, it needed to support, enhance, and showcase those lovable characters.<br />
<br />
In addition to the broad look & feel reference, I also found us specific reference for UI elements and a rendering style for the background. Meanwhile, Terry gathered her own reference for special effects animation and we worked together to find a compatible middle ground.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-LRerf7Cl7iwk44fU5Oi0ImnADYHHBFWE6Si6QI1rM8w-2eg30nhjSnNMxQfAUvGpd3OxIwYYSfEShl9Ojkzwpkuyhznycd3gW_HOW4kSpAgP11uNV5w90rvjwLld7QCHb7joTqaWANg/s1600/SpiritSiege_UIArtReference.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="365" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-LRerf7Cl7iwk44fU5Oi0ImnADYHHBFWE6Si6QI1rM8w-2eg30nhjSnNMxQfAUvGpd3OxIwYYSfEShl9Ojkzwpkuyhznycd3gW_HOW4kSpAgP11uNV5w90rvjwLld7QCHb7joTqaWANg/s1600/SpiritSiege_UIArtReference.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqlAZwGDX_XEknrv_JE65FC_imSA5zuE035y_bmVZIki9_0JMcmUBsd5QPIiWxKvM-Aqen_SNzcCCBCqZ77RX-nxb_Aa2pNW3-o1BRPxXTKL4cj0EmxANDe12k6tTC8upzoCheCWEglbg/s1600/SpiritSiege_BGPaintingReference.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqlAZwGDX_XEknrv_JE65FC_imSA5zuE035y_bmVZIki9_0JMcmUBsd5QPIiWxKvM-Aqen_SNzcCCBCqZ77RX-nxb_Aa2pNW3-o1BRPxXTKL4cj0EmxANDe12k6tTC8upzoCheCWEglbg/s1600/SpiritSiege_BGPaintingReference.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Next came sketches to explore the shape language of various UI elements. I did many of these while flipping through <i><a href="http://www.amazon.com/Styles-Ornament-Dover-Pictorial-Archive/dp/0486205576" target="_blank">The Styles of Ornament</a>, </i>a Dover publication by Alexander Speltz and an excellent visual overview of decorative art history. Again, as creative as I am, it is a lot easier to conjure up new ideas when inspired by existing ones.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GEg-jWs1xPDtgLqwJggER7S4jl7V9w91RQXxIfTiHvjN5nitXjLeo6PZrg-MAqlMU8wmIPCY2l_NjBFMMy_HmdMgN7LT6_4UJki57hPSkN_1-5nzXJ3RcOxdGzwJhVdhdlLB1Ju1GN0/s1600/JennJohnson_SpiritSiege_Sketches_Cards.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GEg-jWs1xPDtgLqwJggER7S4jl7V9w91RQXxIfTiHvjN5nitXjLeo6PZrg-MAqlMU8wmIPCY2l_NjBFMMy_HmdMgN7LT6_4UJki57hPSkN_1-5nzXJ3RcOxdGzwJhVdhdlLB1Ju1GN0/s1600/JennJohnson_SpiritSiege_Sketches_Cards.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeNy5npTbIdgVa3sTrQ4ovSDFcE_rqRfKhcRnc5JwdFZOtTnJJcSuCkp21rNw9H4qBTiSP5h5dtTw49DAhcIEBpRHONSwNMzakWAY4-DUYibuB084vKFadGW6zlbT8chpYUpCwYTPFxE/s1600/JennJohnson_SpiritSiege_Sketches_UI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeNy5npTbIdgVa3sTrQ4ovSDFcE_rqRfKhcRnc5JwdFZOtTnJJcSuCkp21rNw9H4qBTiSP5h5dtTw49DAhcIEBpRHONSwNMzakWAY4-DUYibuB084vKFadGW6zlbT8chpYUpCwYTPFxE/s1600/JennJohnson_SpiritSiege_Sketches_UI.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
For the first mockup, I picked the teardrop UI shape, and ran with it just to have something there. Moving the horizon up in this background painting made the forced perspective less jarring, while the ocean vista still allowed the space to feel more open. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
At this point, I was frustrated with the colors because I'd made a tactical error in choosing look & feel reference. The gameplay scene contains a lot of grass by necessity, so unless we were going to make the playing field distinct from its environment, that meant colors in the green spectrum. The reference, however, was dominated by blue/teal sky and water colors.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXA_CaXE-BPqnI8YlK9V2nn530lp-Lf6DCN1Ow2jQBjymbPsYQa_q3CAVdrUn1ND5nK7U3PE7ZPrrVRfc9hIK6nwnX5a3JTO7w6-7FQcKUoB6wtPNyKnNzS59kWp_BM6l6U_ahuQNol3Q/s1600/JennJohnson_SpiritSiege_Oct28_new.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXA_CaXE-BPqnI8YlK9V2nn530lp-Lf6DCN1Ow2jQBjymbPsYQa_q3CAVdrUn1ND5nK7U3PE7ZPrrVRfc9hIK6nwnX5a3JTO7w6-7FQcKUoB6wtPNyKnNzS59kWp_BM6l6U_ahuQNol3Q/s1600/JennJohnson_SpiritSiege_Oct28_new.png" width="216" /></a></div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
I had been trying emulate the awesome randomized-yet-gradient tile pattern from the reference on the game board, but we decided that it might confuse the player. Do lighter squares mean something different? Do they ever change color? A simple checker pattern would be easily understood and familiar enough to fade out of awareness. For a touch of atmospheric perspective, I kept a front-to-back gradient within the light and the dark greens.</div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
In the next round, I brightened the colors even more, brought back team health bars, and revisited a different card design from the sketches. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMzMeDE0JU6w8SO9qYhf0BSCwp6gU8M5Gh-k6hdbvOa3QBqOez7MjypV3zhOMj_-igWqvGIwCjegTyviwhW5r_aAKEs9Lm3hvRqNWuopOYpWry8v2UyJzkiqMVObpeyQ4tjWxFWakIB8/s1600/JennJohnson_SpiritSiege_Nov5_Cards1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMzMeDE0JU6w8SO9qYhf0BSCwp6gU8M5Gh-k6hdbvOa3QBqOez7MjypV3zhOMj_-igWqvGIwCjegTyviwhW5r_aAKEs9Lm3hvRqNWuopOYpWry8v2UyJzkiqMVObpeyQ4tjWxFWakIB8/s1600/JennJohnson_SpiritSiege_Nov5_Cards1.png" width="173" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ggAJfOZTLiXJVFCd2XRizcI3vmkjlB8FntKs8irKLtYNJMkRt7ZZoIQGM8cXAfmZ4I7zci1q9bMM3Fs-OcKLgKR8w91FgkHa0fpM3bLeCvFWlBL47gf-L-yl1uoY0gnILC6ITnkwCts/s1600/JennJohnson_SpiritSiege_Nov5_Cards2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ggAJfOZTLiXJVFCd2XRizcI3vmkjlB8FntKs8irKLtYNJMkRt7ZZoIQGM8cXAfmZ4I7zci1q9bMM3Fs-OcKLgKR8w91FgkHa0fpM3bLeCvFWlBL47gf-L-yl1uoY0gnILC6ITnkwCts/s1600/JennJohnson_SpiritSiege_Nov5_Cards2.png" width="173" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2EC_lmtdMQUBZ3mHW02a8idR92CuRwnFn-ZaQ_z32DELrPJUMb7R1CbwC9aatcs_mEptBGLZfle1SX1VaiRwNGlGOgDz9O2pCJQaqeehB6XTAIcwvegzRMsDHn0ouI4X2bBimeNkmMQA/s1600/JennJohnson_SpiritSiege_Nov5_Cards3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2EC_lmtdMQUBZ3mHW02a8idR92CuRwnFn-ZaQ_z32DELrPJUMb7R1CbwC9aatcs_mEptBGLZfle1SX1VaiRwNGlGOgDz9O2pCJQaqeehB6XTAIcwvegzRMsDHn0ouI4X2bBimeNkmMQA/s1600/JennJohnson_SpiritSiege_Nov5_Cards3.png" width="173" /></a></div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
Option 3 was the team's favorite. The winning card design wasn't as round and friendly-looking as the teardrop cards, so I incorporated more simple rounded shapes back into the UI elements and hand area border.</div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
I had to fiddle around with it a bit to find the right balance of values and contrasts for the background painting. We needed it to be bright enough to lighten the overall look & feel, but not so bright or high contrast that it drew attention away from the important stuff happening in the game.</div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
This was also when we added terrain back in, which seemed as good a time as any to address the scale problem. Previously, our terrain types had been:</div>
<div class="" style="clear: both;">
</div>
<ul>
<li>water - can shoot over, can't place on</li>
<li>forest - can't shoot over, can place in</li>
<li>mountains/rocks - can't shoot over, can't place on</li>
</ul>
<div>
I wanted to transfer those same functions into art on a human scale, so the team got together and did a brainstorming session for alternatives. After lots of whiteboard drawings, we were all fairly convinced that a fortress/bunker would be the best alternative to a forest (can't shoot over, can place in), but I'd mock up some tall grasses just in case. Turns out, we all liked the tall grasses more. A single tree was a pretty clean and undisputed alternative to mountains (can't shoot over, can't place on), and water stayed the same.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9NrR30abu45dlaay65cVGDehixI-lp3S2AWoU9h6Da7OGVaj-jcLbRaLE8ZHTj0Qgfb3YPeKxE9HvsmL3Mky7TacuBbN3gupJLo8JTpHfnkU-qRRInMyLzgY_YuG3Q-QBTBWvBjzGXA/s1600/JennJohnson_SpiritSiege_Nov11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9NrR30abu45dlaay65cVGDehixI-lp3S2AWoU9h6Da7OGVaj-jcLbRaLE8ZHTj0Qgfb3YPeKxE9HvsmL3Mky7TacuBbN3gupJLo8JTpHfnkU-qRRInMyLzgY_YuG3Q-QBTBWvBjzGXA/s1600/JennJohnson_SpiritSiege_Nov11.png" width="216" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
The next pass was polish, bringing in the shiny glass rendering style for buttons, the new spirit icon, and fleshing out the background painting.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzHVOW7Y6XS3OxJ1oZin4gLdh5R5FW7iTPydy-Qdj4SaHZ5vP7Wsy1G8DAucJgaIJnjdFYBgkzA54Q89NMzMODD0QChT_ebdp6YPQwbOgo5gDiELMxVlpfWgbwmHBzT6d1kI3TGZ6C_kA/s1600/JennJohnson_SpiritSiege_Dec2_BGpainting.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzHVOW7Y6XS3OxJ1oZin4gLdh5R5FW7iTPydy-Qdj4SaHZ5vP7Wsy1G8DAucJgaIJnjdFYBgkzA54Q89NMzMODD0QChT_ebdp6YPQwbOgo5gDiELMxVlpfWgbwmHBzT6d1kI3TGZ6C_kA/s1600/JennJohnson_SpiritSiege_Dec2_BGpainting.png" width="216" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
With the broad strokes more or less settled, it was time to nail down a background color for the hand area. The favorites from Round 1 were carried over into Round 2. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4WyipWaLPimXwN5YNbhelSvf7b6ista4PW6f42FnslA3BRQPCu-CcUoetQ13PTbQQ0M82NSgcAfJ4vXrDozRlhiOKz0f0wnPgAPctLKFpv0DCrFSvSI8zctYpoqrqU_M1L3qB0ObOh3g/s1600/JennJohnson_SpiritSiege_HandAreaColorOptions_Round1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4WyipWaLPimXwN5YNbhelSvf7b6ista4PW6f42FnslA3BRQPCu-CcUoetQ13PTbQQ0M82NSgcAfJ4vXrDozRlhiOKz0f0wnPgAPctLKFpv0DCrFSvSI8zctYpoqrqU_M1L3qB0ObOh3g/s1600/JennJohnson_SpiritSiege_HandAreaColorOptions_Round1.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMC9a4GtflLS8QqRlsreDNWCyXzq6XNZhyk6EfKNqhMPXLGzEc_XSG-QQ7rkVvJVFgtw7zkWcBOwcPum_lRKCBVd8Koygz1h8srChRjxOQmVJlAgwZLJ20Y0Laq-gnFoDi2RvEuQiAvE/s1600/JennJohnson_SpiritSiege_HandAreaColorOptions_Round2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMC9a4GtflLS8QqRlsreDNWCyXzq6XNZhyk6EfKNqhMPXLGzEc_XSG-QQ7rkVvJVFgtw7zkWcBOwcPum_lRKCBVd8Koygz1h8srChRjxOQmVJlAgwZLJ20Y0Laq-gnFoDi2RvEuQiAvE/s1600/JennJohnson_SpiritSiege_HandAreaColorOptions_Round2.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
The Spirit bottle icon wasn't quite working yet. We needed it to read clearly on the card, where it's obscured by the cost number, and be instantly associated with the Spirit counter above, where it stands alone. First we backed up and reconsidered other shapes. Orbs? Gems? Ultimately we stuck with the bottle. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhApQmte5oHVVD1xioq88N6fBetM6eJFgNhuxXWz_FSQDK7T1ZvSC7YwzbdubQQyKFO69PsaaXa8bymapPPJaWU2RLSK0xwRA6sYDJynICAz3uXnyvCeioyBPIfJPHHDDRUdYtGON0UY-s/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_Orbs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhApQmte5oHVVD1xioq88N6fBetM6eJFgNhuxXWz_FSQDK7T1ZvSC7YwzbdubQQyKFO69PsaaXa8bymapPPJaWU2RLSK0xwRA6sYDJynICAz3uXnyvCeioyBPIfJPHHDDRUdYtGON0UY-s/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_Orbs.png" width="173" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh23Tc5KHWFSqt5JN5Z_7y9yVclVWhR3aHyfPH72DYwE-Tq34Bd30MqZy2BfjP2qbWXrLKd5lcP5ph2eCrwsq-TULVt3h1wwQXn4WOBd8Xhu5MHxugTCeyuK4NR4oqMfrRiL1A5-M105jg/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_Gems.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh23Tc5KHWFSqt5JN5Z_7y9yVclVWhR3aHyfPH72DYwE-Tq34Bd30MqZy2BfjP2qbWXrLKd5lcP5ph2eCrwsq-TULVt3h1wwQXn4WOBd8Xhu5MHxugTCeyuK4NR4oqMfrRiL1A5-M105jg/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_Gems.png" width="173" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZGf0aGgV3PrqC1KwlTnsNY1Rc24vNogDYg3mXiS9sMPtQG3h3NSQtG0Z8x5_mXteKQU0vnmVdnpWxdFikws0Ax_u1qURtl8s_i7T74HIcGLYKoqrAJWg4CuI7iiDV5Hy3hz22xYF-Rqo/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_Bottles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZGf0aGgV3PrqC1KwlTnsNY1Rc24vNogDYg3mXiS9sMPtQG3h3NSQtG0Z8x5_mXteKQU0vnmVdnpWxdFikws0Ax_u1qURtl8s_i7T74HIcGLYKoqrAJWg4CuI7iiDV5Hy3hz22xYF-Rqo/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_Bottles.png" width="173" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0o7qOsfC6Xl4JcpJgB9mPOiX2Uc9hRGFf6Ed7lLdkFQGLl3wbOfoXLSxjupQflUWzhSMnH2AUwDkZGoxex1C8ygQT9IVNA_gq3lIvooyRyvzUfeTn6kGMTetAlvW0RTw7OhauPZNuZHg/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_FullBottles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0o7qOsfC6Xl4JcpJgB9mPOiX2Uc9hRGFf6Ed7lLdkFQGLl3wbOfoXLSxjupQflUWzhSMnH2AUwDkZGoxex1C8ygQT9IVNA_gq3lIvooyRyvzUfeTn6kGMTetAlvW0RTw7OhauPZNuZHg/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_FullBottles.png" width="173" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Then we tried some different variations to find what would read the most clearly in both contexts.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKVeXV-JgdbQjkGp_lAVrxY1kuOfFRXOF4apY_jePNIRfMqQMMmG4ClbpP_GF62ikwdB3B8X3ibCPeAkQhseXSpTxdVti554u4KHQzI3GM9CuiT7eWd65_gY4RUlFqpZxbimTgofp2kM/s1600/JennJohnson_SpiritSiege_SpiritBottleOptions.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKVeXV-JgdbQjkGp_lAVrxY1kuOfFRXOF4apY_jePNIRfMqQMMmG4ClbpP_GF62ikwdB3B8X3ibCPeAkQhseXSpTxdVti554u4KHQzI3GM9CuiT7eWd65_gY4RUlFqpZxbimTgofp2kM/s1600/JennJohnson_SpiritSiege_SpiritBottleOptions.png" width="587" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To get to the image shown below, I shrunk the characters in the card frames so their silhouettes would read more clearly, rendered the final card back, and added in the dark blue countdown timers that tell the player when they'll be able to afford a card and when they'll be dealt their next card.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PLT4WYiTfPeeqeRgCkqGekVW3uMB_McwpKsICGzzkutm3vDx5HhlCsCVynR6ZxmghI1tQyJAr9X6DF_2-p0S6zHJmpecgo7ZbxMnf1KHqq2w2bN7gxaDRAaAb2wu_ZI1SZb_gxL6PAI/s1600/JennJohnson_SpiritSiege_Feb5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PLT4WYiTfPeeqeRgCkqGekVW3uMB_McwpKsICGzzkutm3vDx5HhlCsCVynR6ZxmghI1tQyJAr9X6DF_2-p0S6zHJmpecgo7ZbxMnf1KHqq2w2bN7gxaDRAaAb2wu_ZI1SZb_gxL6PAI/s400/JennJohnson_SpiritSiege_Feb5.png" width="216" /></a></div>
<br />
The last step was card frames that denote rarity. In our game, white is common, green is rare, blue is epic, and purple is mythic.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCTXjQiJVxkJ5bWZHEAWIUQMnIHo4ZbQwU7GnZ-0td1E0qGa2SkAXU0mubBJ-TdC2fvpU_H177cwXU-MAaKUrwfOzVFFpgRS7mjzW9o9IipBrbCQktcpkKVbTFs_un9ftvNuN4U1CM4t8/s1600/JennJohnson_SpiritSiege_finallook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCTXjQiJVxkJ5bWZHEAWIUQMnIHo4ZbQwU7GnZ-0td1E0qGa2SkAXU0mubBJ-TdC2fvpU_H177cwXU-MAaKUrwfOzVFFpgRS7mjzW9o9IipBrbCQktcpkKVbTFs_un9ftvNuN4U1CM4t8/s640/JennJohnson_SpiritSiege_finallook.png" width="380" /></a></div>
<br />
I hope you've enjoyed this glimpse into the creative process behind Spirit Siege's art style.
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F2.bp.blogspot.com%2F-OtH3yQm981Q%2FVPDdHZbUtQI%2FAAAAAAAACjs%2FULNtHcgcHOE%2Fs1600%2FJennJohnson_SpiritSiege_Dec2_Spirit_FullBottles.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0o7qOsfC6Xl4JcpJgB9mPOiX2Uc9hRGFf6Ed7lLdkFQGLl3wbOfoXLSxjupQflUWzhSMnH2AUwDkZGoxex1C8ygQT9IVNA_gq3lIvooyRyvzUfeTn6kGMTetAlvW0RTw7OhauPZNuZHg/s1600/JennJohnson_SpiritSiege_Dec2_Spirit_FullBottles.png" -->Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-53869251676348900012015-07-10T10:02:00.000-07:002015-07-10T10:03:50.436-07:00Rabbit Holes<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OB2sMjJ0U55orVcD51ym4vOvC0Ne9djpunvQlqlClCSyB9gLobQpDbw6zbRwTw2hEcwUOEUZ3fj8c086V-4O9Wa8_nte6hx4QQ87AjuiTrlm7nugdl5eCAHePESQGdn944FMU7t7eOM/s1600/JennJohnson_RabbitHoles_final.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OB2sMjJ0U55orVcD51ym4vOvC0Ne9djpunvQlqlClCSyB9gLobQpDbw6zbRwTw2hEcwUOEUZ3fj8c086V-4O9Wa8_nte6hx4QQ87AjuiTrlm7nugdl5eCAHePESQGdn944FMU7t7eOM/s640/JennJohnson_RabbitHoles_final.png" width="363" /></a></div>
<br />
I finally finished this painting I've been working on sporadically for over a year. It's been a lesson in deciding to just suck it up and do the work I know needs to be done.<br />
<br />
<a name='more'></a><br />
When I started out, I had an idea but I wasn't crazy about it. I wasn't even sure I'd finish it, so I wasn't committed to doing it well or right, I just put some stuff down. The inspirations were this <a href="http://infjdoodles.tumblr.com/post/9834601827/i-often-feel-like-i-bounce-after-introverted" target="_blank">web comic</a>, this <a href="http://www.westbayphotography.com/index.php#mi=2&pt=1&pi=10000&s=30&p=4&a=0&at=0" target="_blank">photo</a>, and a new friendship that was forming much faster online than off.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-7VfEA4m3d9H-xrTYv-RyTI3hpvm9RQuCddOAv0_F6mGrDpEivT1t87siFz3VmD74thjODNTxpdwlmMrc80wea9ROjQhBc4jUqxHABeijKqyrr0YS9vklAhgBsngIdlEb9dO5ONVl1c/s1600/flat%252C550x550%252C075%252Cf.u1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-7VfEA4m3d9H-xrTYv-RyTI3hpvm9RQuCddOAv0_F6mGrDpEivT1t87siFz3VmD74thjODNTxpdwlmMrc80wea9ROjQhBc4jUqxHABeijKqyrr0YS9vklAhgBsngIdlEb9dO5ONVl1c/s320/flat%252C550x550%252C075%252Cf.u1.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I was inspired by this photo by <a href="http://www.westbayphotography.com/index.php#mi=2&pt=1&pi=10000&s=30&p=4&a=0&at=0" target="_blank">Mark Podger</a></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivpbyAMQKQFmF7VR_EhOMlOhkAmQ2O-5hsaGGgrVAqrrKRWXSwgRa180kmSeHeiBO_BMxsiRMWdwxGyyGqlN-qYfgbsBfktaEvuWEGtnWnBn4M4w1Rv5L9lAQaPrXvntrxq6t0GxWT2Y4/s1600/JennJohnson_RabbitHoles_WIP_2014_06_27.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivpbyAMQKQFmF7VR_EhOMlOhkAmQ2O-5hsaGGgrVAqrrKRWXSwgRa180kmSeHeiBO_BMxsiRMWdwxGyyGqlN-qYfgbsBfktaEvuWEGtnWnBn4M4w1Rv5L9lAQaPrXvntrxq6t0GxWT2Y4/s320/JennJohnson_RabbitHoles_WIP_2014_06_27.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">June 27, 2014</td></tr>
</tbody></table>
First I tossed off some rough drawings and just scanned what I had, threw some color down, and went with the first composition that came to mind. Very boring and static.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM29t4QF_yqcWlDwKp25btkBlK3A1pHmTqBADhU9nZtoEwN8d3QabCmhVG7UVL8YPAdSU_TdsYIdYEvVrM342ZNUxfGtL9ddz27XrB9XgLpMVX94b4nbFMES2lTvFHqW4otKKQn1ND268/s1600/JennJohnson_RabbitHoles_WIP_2014_10_03.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM29t4QF_yqcWlDwKp25btkBlK3A1pHmTqBADhU9nZtoEwN8d3QabCmhVG7UVL8YPAdSU_TdsYIdYEvVrM342ZNUxfGtL9ddz27XrB9XgLpMVX94b4nbFMES2lTvFHqW4otKKQn1ND268/s320/JennJohnson_RabbitHoles_WIP_2014_10_03.png" width="182" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Oct. 3, 2014</td></tr>
</tbody></table>
After I found a better composition, I had to decide on a rendering style. The inspiration featured frosted glass chess pieces, suggesting a smooth Gaussian blur kind of look. That could have produced beautiful results, but it was also really tedious, and I still wasn't committed to finishing the piece. I tried it out on the boy bunny's face and then stalled out again.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggRGw7LOHGJo0mfE15nxVtSHYey9gOeR4Yzo6mRI-9wwSZQwlIuy7XIUXBEJ_JBfIFA740oZZrvlIzON2rEyOxaTzRXlWgqsxSVuhqpqjHNMnRc_Kb8k4dfGIybqPorMrjFLrUWqQkWLc/s1600/JennJohnson_RabbitHoles_WIP_2015_01_18.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggRGw7LOHGJo0mfE15nxVtSHYey9gOeR4Yzo6mRI-9wwSZQwlIuy7XIUXBEJ_JBfIFA740oZZrvlIzON2rEyOxaTzRXlWgqsxSVuhqpqjHNMnRc_Kb8k4dfGIybqPorMrjFLrUWqQkWLc/s320/JennJohnson_RabbitHoles_WIP_2015_01_18.png" width="182" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Jan. 18, 2015</td></tr>
</tbody></table>
The checkerboard background came in while I was swooning over the reference piece and reluctant to seriously dive into the character rendering.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFQEN4HZUtDnv1m7jBg5xwgqkkbD-MeeqmaYUbWwqJVdDEPds2xpWuNNpZnpC-FPQRFQb8vsxG54U6uDK7Ly0VAZry0j6TRX91rMxeTiQkF5am_ozHEjzIfd6liA735HaIBL0nZ_bAbE/s1600/JennJohnson_RabbitHoles_WIP_2015_03_04.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFQEN4HZUtDnv1m7jBg5xwgqkkbD-MeeqmaYUbWwqJVdDEPds2xpWuNNpZnpC-FPQRFQb8vsxG54U6uDK7Ly0VAZry0j6TRX91rMxeTiQkF5am_ozHEjzIfd6liA735HaIBL0nZ_bAbE/s320/JennJohnson_RabbitHoles_WIP_2015_03_04.png" width="182" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">March 4, 2015</td></tr>
</tbody></table>
Then I decided that a more painterly style with a semi-opaque hard-edged round brush was going to be faster and more fun for me, thereby increasingly the likelihood that I'd actually work on it. I grabbed some reference of how light from a computer screen in a dark room actually works. Shortly thereafter, I sucked it up and admitted that I needed to redraw the heads and hands entirely.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZv7z7Eeewu2k50d8yNHIRwFKinppavGGCg8QVCYHDFGk7cR0IgTiF4XPMOZGX5ikGeGtHSiGyoS2X313xbkbV5vuWn0tbIJ7w2xj-YSufgWzHvOcOsaFEKjwLevcgdip6iygN47uK-0/s1600/JennJohnson_RabbitHoles_WIP_2015_06_25.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZv7z7Eeewu2k50d8yNHIRwFKinppavGGCg8QVCYHDFGk7cR0IgTiF4XPMOZGX5ikGeGtHSiGyoS2X313xbkbV5vuWn0tbIJ7w2xj-YSufgWzHvOcOsaFEKjwLevcgdip6iygN47uK-0/s320/JennJohnson_RabbitHoles_WIP_2015_06_25.png" width="182" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">June 25, 2015</td></tr>
</tbody></table>
<div style="text-align: left;">
A few polish passes and some contrast adjustments later, and it's done!</div>
<div style="text-align: left;">
<br /></div>
<div>
<span style="font-size: 12.8000001907349px; text-align: center;"></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-adc9-JBrYpvB5dukCrWGtXMf84Nlpc57UM1bmEGaMkaIGy1yGq3eOxGJjxU64CUTxUPgdDqOXLSn3cUYMuDOuKf9JCi-o3kXFkNgpxl9dcPpH1AWhCq2bFNzudxlDSSAEkr-tuOGs4/s1600/JennJohnson_RabbitHoles_final.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-adc9-JBrYpvB5dukCrWGtXMf84Nlpc57UM1bmEGaMkaIGy1yGq3eOxGJjxU64CUTxUPgdDqOXLSn3cUYMuDOuKf9JCi-o3kXFkNgpxl9dcPpH1AWhCq2bFNzudxlDSSAEkr-tuOGs4/s400/JennJohnson_RabbitHoles_final.png" width="227" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Final. July 9, 2015</td></tr>
</tbody></table>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com1tag:blogger.com,1999:blog-378352469861568413.post-15738357976015362442015-02-25T11:33:00.000-08:002015-07-13T11:05:19.568-07:00Art Direction of Spirit Siege - Part 1: Before KickstarterNote: <span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.1999998092651px; line-height: 18.4799995422363px;">This is Part 1 of a two-part post about the evolution of Spirit Siege's art direction. If you'd like to jump ahead, here is <a href="http://vibranthydrant.blogspot.com/2015/07/art-direction-of-spirit-siege-part-2.html" target="_blank">Part 2</a>.</span><br />
<br />
Art direction is what enables a team of individuals with their own strengths, weaknesses, and artistic styles to ship a unified product. It is the process of getting the team aligned around a vision, a clear goal of what we're all aiming for, why we're aiming for it, and how we're going to achieve it. Done well, it contains the decisions that make a thousand others.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKMet-REawYKPfp2PNVWWO5xnMojfq9zfwI33A-ZOEVAKexYmhZ2jXdgvqDaoTHJ1JX6FrzLaozEDiq4cAFRViPAaPG7OqIwO5aTy2A7s1zWT8pmc5bYGdLO0PZfC1vuRqXEYCzkHyuE/s1600/JennJohnson_SpiritSiege_ArtDirection.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKMet-REawYKPfp2PNVWWO5xnMojfq9zfwI33A-ZOEVAKexYmhZ2jXdgvqDaoTHJ1JX6FrzLaozEDiq4cAFRViPAaPG7OqIwO5aTy2A7s1zWT8pmc5bYGdLO0PZfC1vuRqXEYCzkHyuE/s1600/JennJohnson_SpiritSiege_ArtDirection.png" width="640" /></a></div>
<a name='more'></a><div>
<br /></div>
<div>
When I joined the team about a year ago, the game looked something like this:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbV1dNyJrBYmbbJ3lUeuLf5fW8TWYInnMdr31o3hnQpyxSuRRNSaTcmxW1BLnKxOCaMs2d4fLt5Fj5zzPYocv6ruoh-srrOgA68ei4Somy2Z_W0hF3Fi6MgbLbcDpJ7uJIzPEfJwXwIo/s1600/JennJohnson_SpiritSiege_Screenshot3March2014.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbV1dNyJrBYmbbJ3lUeuLf5fW8TWYInnMdr31o3hnQpyxSuRRNSaTcmxW1BLnKxOCaMs2d4fLt5Fj5zzPYocv6ruoh-srrOgA68ei4Somy2Z_W0hF3Fi6MgbLbcDpJ7uJIzPEfJwXwIo/s1600/JennJohnson_SpiritSiege_Screenshot3March2014.png" width="220" /></a></div>
<br />
And this was the UI style guide and look & feel concept art:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYu8qBEaW5alv7G3TTZz32vXawN8jObySbHuaytNlljsyb3RQRYxg0p5MZrjdBOtvtXxc-lPxfvu9xJhza5_UpSWz-dJJKBPfQ8YhjnhDohgu3-zHJfmPXih-CVgfddbeO4sqCxZm_qg/s1600/SpiritSiege_StyleGuide.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYu8qBEaW5alv7G3TTZz32vXawN8jObySbHuaytNlljsyb3RQRYxg0p5MZrjdBOtvtXxc-lPxfvu9xJhza5_UpSWz-dJJKBPfQ8YhjnhDohgu3-zHJfmPXih-CVgfddbeO4sqCxZm_qg/s1600/SpiritSiege_StyleGuide.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Accordingly, one of my early versions of the UI art came out like this:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzMlZQ3OoQ07Q8pNY3HtL8Lubn3zu2J0LKfBlbXMz9xvS-DgNUk2wHNtkRwyzydYsKhhNYKk9bAd1nQJ-0eprAbWD5kr5e1OkR3Wii3v2T5RLaqK74iu4fnm4XpWg0A5GqvsFbB9VrR1Q/s1600/JennJohnson_SpiritSiege_GameplayScene_Dark_UI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="520" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzMlZQ3OoQ07Q8pNY3HtL8Lubn3zu2J0LKfBlbXMz9xvS-DgNUk2wHNtkRwyzydYsKhhNYKk9bAd1nQJ-0eprAbWD5kr5e1OkR3Wii3v2T5RLaqK74iu4fnm4XpWg0A5GqvsFbB9VrR1Q/s1600/JennJohnson_SpiritSiege_GameplayScene_Dark_UI.png" width="640" /></a></div>
<br />
This was clearly an improvement over what we had before (programmer art), but still wasn't really working.<br />
<br />
<b><u>The Three Most Difficult Problems:</u></b><br />
<u>1. Noise</u><br />
With a board full of units all shooting at each other, spawning and dying, and special attack animations, the playing field got really noisy really fast. To communicate the important information clearly, we needed to be very deliberate about what we were showing and how. Units on the board need to communicate these things, in order of importance:<br />
<ol>
<li>what team am I on? (team color)</li>
<li>what do I do? (character art)</li>
<li>how soon am I going to die? (health indicator)</li>
<li>what type of terrain am I on? (the ground underneath)</li>
</ol>
I was convinced that there was a better way to communicate that information than a tinted tile and floating health bar on each and every unit, but I didn't know how yet.<br />
<br />
<u>2. Flatness</u><br />
We kept hearing the same feedback from mentors and industry vets: it looks too flat. There isn't enough depth for visual interest. Clearly 3D characters are out because they would be too labor-intensive, but have you considered a 3D environment?<br />
<br />
Yes, in fact, we did briefly consider a 3D environment, but rejected the idea on the premise that people do better work in the medium they love, and no one on our art team even particularly likes 3D. Instead, we started thinking in terms of the visual cues to depth, overlap in particular (the others are: relative size, top to bottom composition, linear perspective, and atmospheric perspective.)<br />
<br />
<u>3. "It doesn't feel like us."</u><br />
A mentor of the art team gave us the critique that she'd more-or-less seen this game already. Metal and gems are really generic fantasy tropes, and this game didn't really feel like us, like our team. It didn't feel unique. On the one hand, that is super-great and useful feedback to hear, especially early enough in the process to do something about it. On the other hand, it presents a really interesting and squishy problem, because what does that <i>mean?</i> It's so subjective, even if we all knew it was true.<br />
<br />
<b><u>Finding the Solution</u></b><br />
I went about trying to fix those problems by exploring a bunch of new scary ideas and resolutely throwing out anything that didn't work.<br />
<br />
While we were still looking at a top-down perspective, I did some exploratory work to improve the unit base tiles, trying to solve for the noisy board in isolation. This gave me a much better understanding of the constraints and was the ground work for some ideas that carried over into later designs.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF3sPZs_yji4QNJ3ocUjypkIfa5DIeYJwtrWQBlSnllUjtm9DBnMfrwIuJnO59g61wTpVfJNKQCrsUQGZ2T98m2038l7xz_84V2EwDfpRf2B16PVQ0SSjCUDCu5yUPrCIj-WrE-FP0cBI/s1600/JennJohnson_SpiritSiege_UnitBaseTileExploration.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF3sPZs_yji4QNJ3ocUjypkIfa5DIeYJwtrWQBlSnllUjtm9DBnMfrwIuJnO59g61wTpVfJNKQCrsUQGZ2T98m2038l7xz_84V2EwDfpRf2B16PVQ0SSjCUDCu5yUPrCIj-WrE-FP0cBI/s1600/JennJohnson_SpiritSiege_UnitBaseTileExploration.png" width="390" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Then I did a radical new mockup of the board in 3/4 perspective, turning the flat round and hex shapes from the previous thumbnail sheet into 3-dimensional objects called <a href="http://www.merriam-webster.com/dictionary/plinths" target="_blank">plinths</a>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwjXbg82zzFWDRZKniN2TWh_rVOCIpokmzONw6RakNMRob1pq5t0TcyAZTs4SU4PQ50X7pH9E_QYp4W5mQNE-6LiPETr19ycm4aYgaLq9xGPYosvzyrgRHdVJ8im_c73klam_89HuxNk/s1600/JennJohnson_SpiritSiege_May14_01_Overlap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwjXbg82zzFWDRZKniN2TWh_rVOCIpokmzONw6RakNMRob1pq5t0TcyAZTs4SU4PQ50X7pH9E_QYp4W5mQNE-6LiPETr19ycm4aYgaLq9xGPYosvzyrgRHdVJ8im_c73klam_89HuxNk/s1600/JennJohnson_SpiritSiege_May14_01_Overlap.png" width="345" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Given the new perspective, I went on to explore some other options for health indicators, determined to find something more elegant than floating HUD health bars on every unit.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWL2pi-LxSdlAUwkTsrRT4rbfx9CHZfl5Nw6K8wPvF24QN_WKabwX4GIl1eK9lCaMEbbQt2qrKXnDHsVcRtgVxSsn7vKI_J-fIrJLYKgl9LSNhSBaQRzQaOj55yi-kKQl6oQGyIPNnK6A/s1600/JennJohnson_SpiritSiege_HealthIndicatorExploration.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWL2pi-LxSdlAUwkTsrRT4rbfx9CHZfl5Nw6K8wPvF24QN_WKabwX4GIl1eK9lCaMEbbQt2qrKXnDHsVcRtgVxSsn7vKI_J-fIrJLYKgl9LSNhSBaQRzQaOj55yi-kKQl6oQGyIPNnK6A/s1600/JennJohnson_SpiritSiege_HealthIndicatorExploration.png" width="400" /></a></div>
<br />
Back in the game space, I added some forced perspective on the board to create an even stronger feeling of depth, and mocked that up with three different options for health indicators: bars, hearts, and plinth tops.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ZyKexJHW_ziyKtlYbVhKFS-ToaH3SeoWEDSgYNOM5ZjvSROgvdOXSvZnSbEZ0HohVMB9EkjThgQdx25soPSYu6zOaMC6S1fgHh4jT9LulTF5tXrRE-7fz_BAvrGGJTXJaIN9qpoDjdY/s1600/JennJohnson_SpiritSiege_May14_02a_bars.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ZyKexJHW_ziyKtlYbVhKFS-ToaH3SeoWEDSgYNOM5ZjvSROgvdOXSvZnSbEZ0HohVMB9EkjThgQdx25soPSYu6zOaMC6S1fgHh4jT9LulTF5tXrRE-7fz_BAvrGGJTXJaIN9qpoDjdY/s1600/JennJohnson_SpiritSiege_May14_02a_bars.png" width="173" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoiFIUXzwCXdwciWUHxDFFxBR07qp0sj4u7la6mfRGavhfXSZ-JAka5_-khhjfIwk6Me9ZaC7uHcbJBnR15V5yWRzH9DRFPd5ZgKxlL62xwiQ1jJI3zbQgoPc9hWWYqcRNFFdnA8YPJo/s1600/JennJohnson_SpiritSiege_May14_02b_hearts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoiFIUXzwCXdwciWUHxDFFxBR07qp0sj4u7la6mfRGavhfXSZ-JAka5_-khhjfIwk6Me9ZaC7uHcbJBnR15V5yWRzH9DRFPd5ZgKxlL62xwiQ1jJI3zbQgoPc9hWWYqcRNFFdnA8YPJo/s1600/JennJohnson_SpiritSiege_May14_02b_hearts.png" width="173" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSjqcGhHIUt_dtOAh0lnnAUMvN9YMPQgO5llxutaG83pQl4Bj_IZzdY5KB47LJjNNuZii7P8AYimx1KSB4HDHvNLULbdEa28nMF4Gz_4TKbiKRDB8Hbe1rAWcRWMAXDwH8HhZimEpFYY/s1600/JennJohnson_SpiritSiege_May14_02c_plinth+tops.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSjqcGhHIUt_dtOAh0lnnAUMvN9YMPQgO5llxutaG83pQl4Bj_IZzdY5KB47LJjNNuZii7P8AYimx1KSB4HDHvNLULbdEa28nMF4Gz_4TKbiKRDB8Hbe1rAWcRWMAXDwH8HhZimEpFYY/s1600/JennJohnson_SpiritSiege_May14_02c_plinth+tops.png" width="173" /></a></div>
<br />
Adding perspective was a pretty radical change, and the amount of overlap was difficult to adjust to at first. Isometric perspective would create less overlap, so we also tried that. The game designers assured me that creating new fun maps for isometric would be easy, should we decide to go that route. This round also marked the first baby steps toward placing the game board in an environment.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjMkTs3z1EkTDzzQdtFPuXKYl0lyof-2lfFdBfSOEM23JrjV9mqx1vWzQ1CV4enzLXAq4LYB_Dzuuoi6rxG796NwAmxOMCC48DcN8RMVLqx0HuH-uDYb9V4Lhc0JpENcc_2HuWGbjKRw/s1600/JennJohnson_SpiritSiege_May16_01a.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjMkTs3z1EkTDzzQdtFPuXKYl0lyof-2lfFdBfSOEM23JrjV9mqx1vWzQ1CV4enzLXAq4LYB_Dzuuoi6rxG796NwAmxOMCC48DcN8RMVLqx0HuH-uDYb9V4Lhc0JpENcc_2HuWGbjKRw/s1600/JennJohnson_SpiritSiege_May16_01a.png" width="216" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0L76qXWworRMtqSF54SKFXGlasV-7-SztMexEomPQ_AJe4iNIoBSs-QymBZmlccMoitA8qho3gZPW4NzcK2QjwBWl6568OomUrA-VYo0xksuQDj86s4Sc8cd3OcrmOcAPSEaz2F_fTPA/s1600/JennJohnson_SpiritSiege_May16_01b.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0L76qXWworRMtqSF54SKFXGlasV-7-SztMexEomPQ_AJe4iNIoBSs-QymBZmlccMoitA8qho3gZPW4NzcK2QjwBWl6568OomUrA-VYo0xksuQDj86s4Sc8cd3OcrmOcAPSEaz2F_fTPA/s1600/JennJohnson_SpiritSiege_May16_01b.png" width="216" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Roughing in dimensional crystals in the same perspective as the units made it a lot easier to visualize the final direction. Even my super sloppy scribble for pine trees was an improvement on the forest terrain, previously represented by a cluster of birch with a very ambiguous silhouette. By then, the scene was established enough for me to start evaluating alternatives to health bars, starting with the version where the plinths sunk into the ground <i>and </i>shrunk in diameter as the units lost health.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXyoi5uffnhtsuCNF1ZP6pYVQJ0rm135GpoGEfxn_LCoMk1HOys3aJ5dz10Hrjh3NnTTtcmzv187yZb-4jcxfbCt-TtvQhJomBJ574FB9elg2DKQ3R36Q6RXvfNvF6sMJiwnLhalf6Frc/s1600/JennJohnson_SpiritSiege_May16_02a.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXyoi5uffnhtsuCNF1ZP6pYVQJ0rm135GpoGEfxn_LCoMk1HOys3aJ5dz10Hrjh3NnTTtcmzv187yZb-4jcxfbCt-TtvQhJomBJ574FB9elg2DKQ3R36Q6RXvfNvF6sMJiwnLhalf6Frc/s1600/JennJohnson_SpiritSiege_May16_02a.png" width="216" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrsFxPSWcdFzW8GVSnw4mfT6vIUBK1zfa_udaW-wzzHhZFJBa6cvCL8xUwQvBWxsuMiVziSq6cEFjvKJImnSOtLJOZfxsyIHbKXq0KBD0CIu6TRe0fz6l0iEmdGdwWTw29_di_ELXiDVk/s1600/JennJohnson_SpiritSiege_May16_02b.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrsFxPSWcdFzW8GVSnw4mfT6vIUBK1zfa_udaW-wzzHhZFJBa6cvCL8xUwQvBWxsuMiVziSq6cEFjvKJImnSOtLJOZfxsyIHbKXq0KBD0CIu6TRe0fz6l0iEmdGdwWTw29_di_ELXiDVk/s1600/JennJohnson_SpiritSiege_May16_02b.png" width="216" /></a></div>
<br />
This was a polish pass on crystals and terrain. I added the breaking sequence back in for the new dimensional crystals, and converted the mountain terrain into a pile of rocks to bring its scale more in line with the units.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizMCY4heBd9rbfoQlnfKVzsU3hIQqU9VZT9Z7UL5TZpPTw4uYbxku4dqEttkQVVfCR4NNt1iXYL99J8T_Qh2g3KWL5_yyedJbC3JmdjpH1502VUe3oX436sl7pdI3wiQrydQQI95ifuPM/s1600/JennJohnson_SpiritSiege_May28_terrain.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizMCY4heBd9rbfoQlnfKVzsU3hIQqU9VZT9Z7UL5TZpPTw4uYbxku4dqEttkQVVfCR4NNt1iXYL99J8T_Qh2g3KWL5_yyedJbC3JmdjpH1502VUe3oX436sl7pdI3wiQrydQQI95ifuPM/s1600/JennJohnson_SpiritSiege_May28_terrain.png" width="216" /></a></div>
<br />
This next paintover blew the team away, and was the first big step toward making it "feel like us." I was pretty ruthless about ditching pieces that didn't work, and very fast and loose about blocking in replacement ideas. I didn't want to waste a lot of time on it in case this major change of direction wasn't right for the team. Thankfully, the idea was well-received. <3<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4UfVdlMX9Cdwjqbw5c3z4_wYMLfxpjrT_BhBQ70CyXSo0mimD-eK0ewQMvTZ-3d4Ba_GGpi_uMZorKx9zOUqIljvo6uw28nv-xNDb59p_eDCdTXP_CQLgfoR4TTQSpurx_4BS6DWZtI/s1600/JennJohnson_SpiritSiege_May28_FeelsLikeUs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4UfVdlMX9Cdwjqbw5c3z4_wYMLfxpjrT_BhBQ70CyXSo0mimD-eK0ewQMvTZ-3d4Ba_GGpi_uMZorKx9zOUqIljvo6uw28nv-xNDb59p_eDCdTXP_CQLgfoR4TTQSpurx_4BS6DWZtI/s1600/JennJohnson_SpiritSiege_May28_FeelsLikeUs.png" width="346" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
At this point, we settled on a stylistic distinction between things in the world and UI elements. Before, we'd been trying to make the UI feel like it was made of real materials, like metal, leather, and parchment, but here we embraced UI assets made of pixels. We also added team health bars to the HUD, giving the player a quick read on the overall state of the game.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-dybz3lqLrI7-0fAO3xblucadnCVAon0cOyTvttxLl-uSboO8kkjmnZdI3hYmGqKz09AiPpDB3cBxad6HRZylG7wkdn0u-3IAjhCns1FYrKzmOe0JOBp8XVh0Mrd4DX1Y__-6yCIAxlM/s1600/JennJohnson_SpiritSiege_May30.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-dybz3lqLrI7-0fAO3xblucadnCVAon0cOyTvttxLl-uSboO8kkjmnZdI3hYmGqKz09AiPpDB3cBxad6HRZylG7wkdn0u-3IAjhCns1FYrKzmOe0JOBp8XVh0Mrd4DX1Y__-6yCIAxlM/s1600/JennJohnson_SpiritSiege_May30.png" width="215" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
A whole lot of polish later, we arrived here:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC7hCdSpuTnmIyay4lZQPA-ODL6wXSXoUXipiT_DNbPERDeksaD51yHpdlP64qPF22q4ajZYmTR75Ah77U1gJLtwW3T_z785PAHiThrNyxBZI-MtTsQFGX6ziUauqjh-JYFIpNCDSkbEs/s1600/JennJohnson_SpiritSiege_GameplaySceneMockUp_Kickstarter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC7hCdSpuTnmIyay4lZQPA-ODL6wXSXoUXipiT_DNbPERDeksaD51yHpdlP64qPF22q4ajZYmTR75Ah77U1gJLtwW3T_z785PAHiThrNyxBZI-MtTsQFGX6ziUauqjh-JYFIpNCDSkbEs/s1600/JennJohnson_SpiritSiege_GameplaySceneMockUp_Kickstarter.png" width="378" /></a></div>
<br />
TL:DR, the solution to the three difficult problems involved:<br />
<ol>
<li><b>Plinths.</b> Each unit stands on a team-colored pedestal, which sinks into the ground as the unit loses health.</li>
<li><b>Depth</b>, via a combination of forced linear perspective and overlap. This also enabled us to enlarge the character art. </li>
<li><b>Bright open space.</b> Eliminating visually heavy UI elements from the edge of the board and giving the game an open-air setting created a much lighter overall look & feel. </li>
</ol>
This was the look we were working with all summer. Accordingly, this version of the game informed the visual design of the <a href="https://www.kickstarter.com/projects/novaheartbeat/spirit-siege-your-five-minute-strategy-game-fix" target="_blank">Kickstarter</a> page for the campaign in September. The longer we lived with this design, the more dissatisfied we grew with it, but the team didn't really have time to fix it. After we funded (yay!!!), we revisited art direction and I will elaborate on that in <a href="http://vibranthydrant.blogspot.com/2015/07/art-direction-of-spirit-siege-part-2.html" target="_blank">Part 2</a>.</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-37206326621039563112015-02-07T13:09:00.000-08:002015-02-25T19:29:31.325-08:00Deck Builder Visual Design<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BBWeZD8lbxc7gNFLiq1QD39ujR3nQ2yYimZVCvlBrnqUlKq3QTqj6qf4HcBGSWzG_4eZbrDddScyAGn44V1Le3Jd7nBLRWR7OJ5xF5miAARQD0d7mDJUfhCG7Stc5q_Z_u4IKorXz-c/s1600/JennJohnson_SpiritSiege_DeckBuilder.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BBWeZD8lbxc7gNFLiq1QD39ujR3nQ2yYimZVCvlBrnqUlKq3QTqj6qf4HcBGSWzG_4eZbrDddScyAGn44V1Le3Jd7nBLRWR7OJ5xF5miAARQD0d7mDJUfhCG7Stc5q_Z_u4IKorXz-c/s1600/JennJohnson_SpiritSiege_DeckBuilder.png" height="530" width="640" /></a></div>
<br />
Spirit Siege has a deck builder now! This screen was the first real opportunity to flesh out and nail down the visual language of menus, so lots of the problems we solved here will carry over into other parts of the game.<br />
<a name='more'></a><br />
Here was the process:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzoK_3zUgokKjNkIG4rBfJn_ya0SntDi6sreOXJAzjmwZgz3qyPklszmI7PMG6tHco4QcwyZeiQ3ADdAchBSD8aitIQX1VxwglS3c_Yxn6lavo8BlNXaAD6PcP424Zbe_IQy7AqcWxTQ/s1600/SpiritSiege_DeckbuilderWIP_00_Wireframe.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzoK_3zUgokKjNkIG4rBfJn_ya0SntDi6sreOXJAzjmwZgz3qyPklszmI7PMG6tHco4QcwyZeiQ3ADdAchBSD8aitIQX1VxwglS3c_Yxn6lavo8BlNXaAD6PcP424Zbe_IQy7AqcWxTQ/s1600/SpiritSiege_DeckbuilderWIP_00_Wireframe.png" height="400" width="332" /></a></div>
<div style="text-align: center;">
At first, <a href="http://www.terranacliff.com/" target="_blank">Terry</a><span id="goog_1107382416"></span><span id="goog_1107382417"></span><a href="https://www.blogger.com/"></a> made a wireframe based on some rough ideas that had been tossed around but not really solidified. Some of the features shown here turned out to be extraneous.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHaEElGApX0h8tRhEz9qAmTJH0FojL8JsOeKaxlZxx5V_4QQ3b4ibIo9JJqqtzKQi3NgfXYYJ6eyvw7E906YvaQzwTCR3k9vmxDD5fI84_EpM4CpFEpR9-RDVFtryWZfG6Nwb18e0cQk/s1600/SpiritSiege_DeckbuilderWIP_01_PaperPrototype.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHaEElGApX0h8tRhEz9qAmTJH0FojL8JsOeKaxlZxx5V_4QQ3b4ibIo9JJqqtzKQi3NgfXYYJ6eyvw7E906YvaQzwTCR3k9vmxDD5fI84_EpM4CpFEpR9-RDVFtryWZfG6Nwb18e0cQk/s1600/SpiritSiege_DeckbuilderWIP_01_PaperPrototype.png" height="400" width="282" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
After more design discussions with the team, Terry made an awesome paper prototype with scotch tape and post-its. Yay! Craft time!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEMt9fEPjFFj0clSH2bx_fACeHJ3Z6NI5JlCnqhD5MFwhSZkG-iSA0lKxVXlCWTj7F11oFdmytKwMfGlHCgK3dJeGht7UsAr76YFx2bUl4pWLu5slqLGEUpNJvD33goVxERLkTiFCpNFM/s1600/SpiritSiege_DeckbuilderWIP_02_Greybox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEMt9fEPjFFj0clSH2bx_fACeHJ3Z6NI5JlCnqhD5MFwhSZkG-iSA0lKxVXlCWTj7F11oFdmytKwMfGlHCgK3dJeGht7UsAr76YFx2bUl4pWLu5slqLGEUpNJvD33goVxERLkTiFCpNFM/s1600/SpiritSiege_DeckbuilderWIP_02_Greybox.png" height="400" width="236" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Next, the dev team made a greybox in engine. The card art had not yet been converted to the new style, but the old art served just fine for stand-in programmer art. Features that appear here that were not in the paper prototype: highlights around cards when you can't add more of that card to your deck (for one of two reasons), numbers on cards for how many of that card you have left in your collection (not in your deck), and below, numbers for how many of that card you have in your deck.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIJvd_xblHs744rOOE1MVPgDxOy1V0MW3ywPSvzxbfFSNTfep0rrco8sKWCQHGojUi8OdAK2VufQ7nQgmob5LG8nCWeD0kXubWeqASFsHDoFR8ksnH9r0THGNkJxQ7ajkyTR5oIETAhs/s1600/SpiritSiege_DeckbuilderWIP_03_Blocking.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIJvd_xblHs744rOOE1MVPgDxOy1V0MW3ywPSvzxbfFSNTfep0rrco8sKWCQHGojUi8OdAK2VufQ7nQgmob5LG8nCWeD0kXubWeqASFsHDoFR8ksnH9r0THGNkJxQ7ajkyTR5oIETAhs/s1600/SpiritSiege_DeckbuilderWIP_03_Blocking.png" height="400" width="236" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
This was a very early crack at blocking in a mock-up in the new style. At this point, we were planning to scroll vertically through the card collection, in which case four across would simply be too dense; scrolling requires negative space between clickable things, and it would make us all sad to shrink <a href="http://cpatten.tumblr.com/" target="_blank">Caitlyn's</a> adorable character art down small enough to accommodate that. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
I was also not satisfied with how dark these colors were coming out. My initial thought was to base the look and feel of menus entirely off the hand area of the gameplay scene, which looked like this:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcBGF9QuA8HPbBEY8Nxj6giprrK8FeDA0Fdj1XO74Tpi0Fewkkvhl-a8pHYK-dKywCxq5Zavz52gt-UVKdz6Ncg0hIwMDYk5T0ryUCDi5L60ijFSlQQEwcHypejsJaxBxSRjtV1Z1WuE/s1600/JennJohnson_SpiritSiege_GameplaySceneWIP.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcBGF9QuA8HPbBEY8Nxj6giprrK8FeDA0Fdj1XO74Tpi0Fewkkvhl-a8pHYK-dKywCxq5Zavz52gt-UVKdz6Ncg0hIwMDYk5T0ryUCDi5L60ijFSlQQEwcHypejsJaxBxSRjtV1Z1WuE/s1600/JennJohnson_SpiritSiege_GameplaySceneWIP.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
But then I went back to the touchstone look & feel reference (that's what it's for) and lightened things up accordingly.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiok6Nx_NPMqO6ZUxTBY_alZvtuglYtnweZEgeDBKnO1KFgh6P3tuM1Vt7dkQea1uXAibzMGGTzotXRHbmu6TLZBOc19JWkqTYLyHI45v_YCt-I6By1WqbiWQ6pxgnDI7GVuMeQl59z6Qg/s1600/SpiritSiege_TouchstoneLookandFeelReference.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiok6Nx_NPMqO6ZUxTBY_alZvtuglYtnweZEgeDBKnO1KFgh6P3tuM1Vt7dkQea1uXAibzMGGTzotXRHbmu6TLZBOc19JWkqTYLyHI45v_YCt-I6By1WqbiWQ6pxgnDI7GVuMeQl59z6Qg/s1600/SpiritSiege_TouchstoneLookandFeelReference.png" height="273" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWL5ulFowOY899_RLI1ANTowop09ZnyGIJVmtXPQ6vOj2HqD3jbcpMWgJ-bzFR9Av6spzpdL5e7-zT0WJ_mPGfhtgfx80S08zXi3MUKgz2HySVAow0HQoI_gADZgK053afivg-oPCccSc/s1600/SpiritSiege_DeckbuilderWIP_04_PurpleButtons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWL5ulFowOY899_RLI1ANTowop09ZnyGIJVmtXPQ6vOj2HqD3jbcpMWgJ-bzFR9Av6spzpdL5e7-zT0WJ_mPGfhtgfx80S08zXi3MUKgz2HySVAow0HQoI_gADZgK053afivg-oPCccSc/s1600/SpiritSiege_DeckbuilderWIP_04_PurpleButtons.png" height="400" width="236" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhST50YSweB_a-P3Rb_uUtuJfs-R5YXqoHWmXVH8G8pvDfSfC9SQbO9_m_Yegzohyphenhyphenb_wHQMmQTrSWEjtXdp1Ly0BO6YJLeUz_9Cy_OiKI8nPmAQIdyIyqG7e7NyAeOVb-GDaD9MnMMa_7Q/s1600/SpiritSiege_DeckbuilderWIP_04_RedButtons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhST50YSweB_a-P3Rb_uUtuJfs-R5YXqoHWmXVH8G8pvDfSfC9SQbO9_m_Yegzohyphenhyphenb_wHQMmQTrSWEjtXdp1Ly0BO6YJLeUz_9Cy_OiKI8nPmAQIdyIyqG7e7NyAeOVb-GDaD9MnMMa_7Q/s1600/SpiritSiege_DeckbuilderWIP_04_RedButtons.png" height="400" width="236" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Here we are, getting somewhat closer. The reference is light and atmospheric, so I swapped in gradients for color fills and eliminated the heavy metal bar separating the "Deck Building" title banner from the collection display area. Trying out purple and red-brown buttons was an attempt to preserve some of the feeling of the gameplay scene hand area by repeating colors, but that was not the right solution.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOiZc-BD3_aif01Ol1LbjHl0H0DXx1FPs_PXHX-DE1K-J1qYm3R8R28vGFQPkx0QvDLxaVL8WVsxp1HyCCjfiEsYAxk_WZ4t-TmZkIFN8tXUXVb7MojSSMs8Kqxmv8jzlWoIgxG91lTJw/s1600/SpiritSiege_DeckbuilderWIP_05_Tabs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOiZc-BD3_aif01Ol1LbjHl0H0DXx1FPs_PXHX-DE1K-J1qYm3R8R28vGFQPkx0QvDLxaVL8WVsxp1HyCCjfiEsYAxk_WZ4t-TmZkIFN8tXUXVb7MojSSMs8Kqxmv8jzlWoIgxG91lTJw/s1600/SpiritSiege_DeckbuilderWIP_05_Tabs.png" height="400" width="236" /></a></div>
<div class="" style="clear: both; text-align: center;">
Next we switched to pages and tabs to navigate the card collection. The main thing this did for the art was create functional visual interest at the top of the page, an easy win over what was previously just a boring horizontal line. In this version, I also started adding functionality to communicate when you're out of a card, have maxed out the deck limit on a card, how many of each card you have left in your collection, and how many of each card you have in your deck.</div>
<div class="" style="clear: both; text-align: center;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
Feedback I got from my team included: </div>
<div class="" style="clear: both; text-align: left;">
- There should be some visual indicator all around the card if you can't place it in your deck. As is, your finger could easily obscure that information.</div>
<div class="" style="clear: both; text-align: left;">
- Keyhole locked symbol is too much like Hearthstone's solution to this same problem.</div>
<div class="" style="clear: both; text-align: left;">
- Green and light green highlight colors are too similar. Two values of the same hue suggests two degrees of the same reason for the same status, where the actual information we're trying to communicate is two different reasons (1. you've run out of that card in your collection or 2. you already have the maximum legal number of copies of that card in your deck) for the same status (you can't add this card to your deck).</div>
<div class="separator" style="clear: both; text-align: left;">
- How many of each card you have in your deck is really important information. It should be more attention-grabbing.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonWrvJGZPKn5tDkndvTq1RnU5A8WRPFo0UuIY_v4-qTH71x-YGHujgyqB1RRiI9PbIx2Ci3AqVl2ubrsfFZ9hDj-YWdsNoN1bNRmor4_vN21mUYwLhgOQh1xNZKfP5blL0bOqMpBoXdE/s1600/SpiritSiege_DeckbuilderWIP_06_Cool.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonWrvJGZPKn5tDkndvTq1RnU5A8WRPFo0UuIY_v4-qTH71x-YGHujgyqB1RRiI9PbIx2Ci3AqVl2ubrsfFZ9hDj-YWdsNoN1bNRmor4_vN21mUYwLhgOQh1xNZKfP5blL0bOqMpBoXdE/s1600/SpiritSiege_DeckbuilderWIP_06_Cool.png" height="400" width="236" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbcYdUTt5N2I2x7o02bVr44IkPhxmtcHU7bpqQjzWmU9tqMYPkw6g2zxlasrKcA5x2O0fsmhZP0wR8zcrrxue4o_Y5WR2oyXuQ-2ha7QNxNPkThaVxH71Hob8Fhpia9J9Y2ZpXY89Muo/s1600/SpiritSiege_DeckbuilderWIP_06_Warm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbcYdUTt5N2I2x7o02bVr44IkPhxmtcHU7bpqQjzWmU9tqMYPkw6g2zxlasrKcA5x2O0fsmhZP0wR8zcrrxue4o_Y5WR2oyXuQ-2ha7QNxNPkThaVxH71Hob8Fhpia9J9Y2ZpXY89Muo/s1600/SpiritSiege_DeckbuilderWIP_06_Warm.png" height="400" width="236" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
I also thought the overall look & feel was a little lack-luster and flat, so I added depth and interest by layering in a copy of the background painting. Ahhh, much better.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Treating the bottom of the deck builder like the hand area of the gameplay scene finally satisfied my itch to make them match. The language this established was "my stuff is on red-brown at the bottom, neutral stuff is up top on green/blue." I consider cards you own but are not in your deck neutral enough to satisfy this condition. The same language will also be used in the pre-match screen, where choosing my opponent (human or AI?) will be against green up top, and choosing which of my decks to play with will be against red-brown at the bottom.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87N8v7UnuqAgN6oj3I2x2ZJWEmlJ_blQ7HRskBQM37cI6Tsp_mTCslFABZViOpTeXvHEFssal3QUS3t6b9h8nbqbSCjjxHCyFBRpWmQk_vIKZDDAtc1sBeMMj47d-yGU1SH8_iH8A5mA/s1600/SpiritSiege_DeckbuilderWIP_07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87N8v7UnuqAgN6oj3I2x2ZJWEmlJ_blQ7HRskBQM37cI6Tsp_mTCslFABZViOpTeXvHEFssal3QUS3t6b9h8nbqbSCjjxHCyFBRpWmQk_vIKZDDAtc1sBeMMj47d-yGU1SH8_iH8A5mA/s1600/SpiritSiege_DeckbuilderWIP_07.png" height="640" width="378" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
The final version includes some tweaks:</div>
<div class="separator" style="clear: both; text-align: left;">
- Save, Clear, and Main buttons all their own colors, to make them more distinct from each other.</div>
<div class="separator" style="clear: both; text-align: left;">
- Blue and purple highlights with white font to make cards you can't add to your deck more distinct from cards you can, and secondarily more distinct from each other.</div>
<div class="separator" style="clear: both; text-align: left;">
- The addition of a ? button, to enable the player to revisit the deck building tutorial if they need help.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And that's the art side of creating the deck builder. As of the time of writing, most of these UI assets are in the game and we're in the process of polishing it up for Alpha release!</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-81066540727647378902014-10-02T21:24:00.001-07:002014-10-03T12:32:58.414-07:00Dance of Squares<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1C30edxaACjrSjJdH-DiEKjSkc4hawIJsLkWvtrk3t1bICMmUKqex-Rkhl0uIWq3_ol0kTTLt2hNoZnBTAMKF1LOcg5aNDOKRqCGbktzbGiWrh_5A6dYVsCwkMYi7TPB1S_lFbnKomN4/s1600/JennJohnson_DanceOfSquares.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1C30edxaACjrSjJdH-DiEKjSkc4hawIJsLkWvtrk3t1bICMmUKqex-Rkhl0uIWq3_ol0kTTLt2hNoZnBTAMKF1LOcg5aNDOKRqCGbktzbGiWrh_5A6dYVsCwkMYi7TPB1S_lFbnKomN4/s1600/JennJohnson_DanceOfSquares.png" height="320" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Sometimes I just want to play with color without the pesky business of drawing stuff first.</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-20378074713167570942014-09-28T15:25:00.000-07:002014-09-28T15:35:54.360-07:00Go - Elephant's Eye<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhizePC-zFQTAneKMtjs8mnLhSZRtoyN8Rs1OWtjCSOrczR56eLgM6m8ekWmTORPf6KI2nBPYZTJ6c4HwQG9d1ERsTON1wtBhFgzazkG7Z9YrBd4RVIK-_qbWS5vOiH_2QFuSntgUqj5ek/s1600/JennJohnson_Go_ElephantsEye.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhizePC-zFQTAneKMtjs8mnLhSZRtoyN8Rs1OWtjCSOrczR56eLgM6m8ekWmTORPf6KI2nBPYZTJ6c4HwQG9d1ERsTON1wtBhFgzazkG7Z9YrBd4RVIK-_qbWS5vOiH_2QFuSntgUqj5ek/s1600/JennJohnson_Go_ElephantsEye.png" height="397" width="400" /></a></div>
<br />
<div style="text-align: center;">
This fast impulsive painting is the product of several ideas colliding across space and time. About six weeks ago, I started playing Go and am now <i>completely</i> enamored with it. I just learned the name for elephant's eye shape last week. Once upon a time, two years ago, I hatched plans to paint three endangered species in ultra-vibrant colors. The preliminary sketches were in <a href="http://vibranthydrant.blogspot.com/2012/10/endangered-species.html" target="_blank">this post</a>. Passion for something even better (at the time) snuffed out that idea. Yesterday, I walked past the most amazingly brilliant red dahlias, and suddenly I knew where this was going. Red seemed appropriate because of passion, danger, and because, as I understand it, typically only one of the two Go stones can live in this configuration.</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-76979430000222780722014-09-26T17:32:00.000-07:002015-01-24T18:03:07.448-08:00Spirit Siege - Game Design Kickstarter Updates<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
During our <a href="https://www.kickstarter.com/projects/novaheartbeat/spirit-siege-your-five-minute-strategy-game-fix" target="_blank">Kickstarter</a> campaign, there were a number of game features we wanted to explain in greater detail. For our daily backer updates, I made these explanatory panels to give visual interest to what might have otherwise been walls of text, using copy from our game designers and <a href="http://cpatten.tumblr.com/" target="_blank">Caitlyn Patten</a>'s character art.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3to4SCDyKfq22Cwq7d99aIp9FkxKYDXKqEtqaSEf86EPaBC5IflYheRTaoFwnbLISsp1vJhHCgrP59CZ8uFQQk4NQ9Z1cs54BZgG2wqaAXJ2gFScpRsahzzSVLtbP7I6FGVUCg5_1S4c/s1600/JennJohnson_SpiritSiegeKS_09_GameModesPart1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3to4SCDyKfq22Cwq7d99aIp9FkxKYDXKqEtqaSEf86EPaBC5IflYheRTaoFwnbLISsp1vJhHCgrP59CZ8uFQQk4NQ9Z1cs54BZgG2wqaAXJ2gFScpRsahzzSVLtbP7I6FGVUCg5_1S4c/s1600/JennJohnson_SpiritSiegeKS_09_GameModesPart1.png" /></a></div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXBTI4f7xE55UKeIc3Q2sPCo7CyLY9ZhdWJ_Z7-Psc7tSNKhkOSHV2tFhpf0rRkaSyP2o6BLTKf5x8I8_CH-HolDBWpAGy-VCZYoNmbbvsXKzRk77D-uuYTPS7xJjRxZlME5nWAEq2ZU/s1600/JennJohnson_SpiritSiegeKS_01_StrategyGameComparison.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXBTI4f7xE55UKeIc3Q2sPCo7CyLY9ZhdWJ_Z7-Psc7tSNKhkOSHV2tFhpf0rRkaSyP2o6BLTKf5x8I8_CH-HolDBWpAGy-VCZYoNmbbvsXKzRk77D-uuYTPS7xJjRxZlME5nWAEq2ZU/s1600/JennJohnson_SpiritSiegeKS_01_StrategyGameComparison.png" height="640" width="327" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCqEV6sMr0_YFyBtORXDgWi2YosoUzs537XMZ0D0sdSx91ScBG07dQ0P8yu0KDtNZQwwU47wa3-XcCb8rYA4YGlF5IaNr6WOCaKkePsZcsxhlFHm6CziluNr1GzqrdTPSiYwCVVsEx9I/s1600/JennJohnson_SpiritSiegeKS_02_ProxyCards.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCqEV6sMr0_YFyBtORXDgWi2YosoUzs537XMZ0D0sdSx91ScBG07dQ0P8yu0KDtNZQwwU47wa3-XcCb8rYA4YGlF5IaNr6WOCaKkePsZcsxhlFHm6CziluNr1GzqrdTPSiYwCVVsEx9I/s1600/JennJohnson_SpiritSiegeKS_02_ProxyCards.png" height="400" width="285" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBxJidduwBTgDtjRaxMxVvQ1fbxpATnsxerI-G-sI25LJ0b3Mx32ijXxP9bQosnUMD15Ckvhbk1ARU05GR6RF6DuMUkAI-pOsoCkolGiKnRBbfC8a2aJoZAuOxoae_WcCZoGzmtdIRII/s1600/JennJohnson_SpiritSiegeKS_03_Monetization.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBxJidduwBTgDtjRaxMxVvQ1fbxpATnsxerI-G-sI25LJ0b3Mx32ijXxP9bQosnUMD15Ckvhbk1ARU05GR6RF6DuMUkAI-pOsoCkolGiKnRBbfC8a2aJoZAuOxoae_WcCZoGzmtdIRII/s1600/JennJohnson_SpiritSiegeKS_03_Monetization.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXMxmNhN3yTLRNBUZZv7x4v_cpVtFVzhdpEOrhnlrxs8U9DRv68w4MsvDZ6FAvnK2IIlxsL64jhFH3_A6UIEPAWvJeOdIth1YMlgaEO5R05yvc4jlhegoKNcwgKt8aNMXbAizkwv3IGw/s1600/JennJohnson_SpiritSiegeKS_04_AutoBalance.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXMxmNhN3yTLRNBUZZv7x4v_cpVtFVzhdpEOrhnlrxs8U9DRv68w4MsvDZ6FAvnK2IIlxsL64jhFH3_A6UIEPAWvJeOdIth1YMlgaEO5R05yvc4jlhegoKNcwgKt8aNMXbAizkwv3IGw/s1600/JennJohnson_SpiritSiegeKS_04_AutoBalance.png" height="640" width="182" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kwL3uPFrD8d_zZdZu-An3nprwqr0h17j80e8VhGu_8SQPdOgkmhi6GKj2VlSXWSzwiBFrguVx-K2xcF-z1v9pmPYdUuNEXt0WEGKcHMk3XMnqQiGleyAwRglr-6kJxpy0nMF0N-eRiY/s1600/JennJohnson_SpiritSiegeKS_05_DeckBuilding.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kwL3uPFrD8d_zZdZu-An3nprwqr0h17j80e8VhGu_8SQPdOgkmhi6GKj2VlSXWSzwiBFrguVx-K2xcF-z1v9pmPYdUuNEXt0WEGKcHMk3XMnqQiGleyAwRglr-6kJxpy0nMF0N-eRiY/s1600/JennJohnson_SpiritSiegeKS_05_DeckBuilding.png" height="640" width="243" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5TE2GSQBLxrtUFlbZxM1SSwnw4uiFVQmMxkcLakScDeFE6-M7T1UV2Cq6lvse0lA03sMFnUOzQn6_GWfXlHTOgXqd0M6qgJweNzs6PfZpbFohHq1wYWlZ7V2g1SoQh90Lc319micOScQ/s1600/JennJohnson_SpiritSiegeKS_06_SpiritComeback.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5TE2GSQBLxrtUFlbZxM1SSwnw4uiFVQmMxkcLakScDeFE6-M7T1UV2Cq6lvse0lA03sMFnUOzQn6_GWfXlHTOgXqd0M6qgJweNzs6PfZpbFohHq1wYWlZ7V2g1SoQh90Lc319micOScQ/s1600/JennJohnson_SpiritSiegeKS_06_SpiritComeback.png" height="640" width="166" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMQT46DWu7eDDsouN5wfmWE-hDzgt3KsVKepNjVBAzdMhuQbmxZ8B1op9UVLZKuxaBAXcGDccjMwXNhCOvJ8KHS43V17JxRKOGPAR7jZEzVWT4ezJWeeyjw8KIP0Oats5-s8ZeF9ZhwU/s1600/JennJohnson_SpiritSiegeKS_07_RarityInitialCards.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMQT46DWu7eDDsouN5wfmWE-hDzgt3KsVKepNjVBAzdMhuQbmxZ8B1op9UVLZKuxaBAXcGDccjMwXNhCOvJ8KHS43V17JxRKOGPAR7jZEzVWT4ezJWeeyjw8KIP0Oats5-s8ZeF9ZhwU/s1600/JennJohnson_SpiritSiegeKS_07_RarityInitialCards.png" height="640" width="266" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDqgNFrpTi1Wd-7Mt7IOR3-ovrqaXq8R7EuyM0_RMnMN3Fk2vyKOUqPlhmrfp4-OYoyDYOWwPKKIjWfQALYETb6AdJnNQ2PxrEn0rpg3AqwENjL-gzofJI2izuxyZCRzpmDhnImcsu30/s1600/JennJohnson_SpiritSiegeKS_08_CommunitySocial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDqgNFrpTi1Wd-7Mt7IOR3-ovrqaXq8R7EuyM0_RMnMN3Fk2vyKOUqPlhmrfp4-OYoyDYOWwPKKIjWfQALYETb6AdJnNQ2PxrEn0rpg3AqwENjL-gzofJI2izuxyZCRzpmDhnImcsu30/s1600/JennJohnson_SpiritSiegeKS_08_CommunitySocial.png" height="640" width="216" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanrtM3_9fQogID1l8If3xxytl4iH8DHK-r0BWbUkHhyphenhyphenIlBtBVj4yh09su-trLMtg_OI1-OMEWzHAz59x0XXXLR2fohkDjSGK5mK8r8Z-wC260VKPomiATP2oMXdY3qw8j_LHjlzFYWWA/s1600/JennJohnson_SpiritSiegeKS_10_Commanders.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanrtM3_9fQogID1l8If3xxytl4iH8DHK-r0BWbUkHhyphenhyphenIlBtBVj4yh09su-trLMtg_OI1-OMEWzHAz59x0XXXLR2fohkDjSGK5mK8r8Z-wC260VKPomiATP2oMXdY3qw8j_LHjlzFYWWA/s1600/JennJohnson_SpiritSiegeKS_10_Commanders.png" height="640" width="191" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgw-iDXgOCHXDt-E5S8TlEuDysZNeeSTSBmKUWboZLmPdYLZgvekUwxNYMlm0-PgVBql3JNL-dYMT5BOgZRXB4RywqQQAPUvF5spoALdXZql3yPrhyf119GK-2dRpl8DpuXnMOsS4LplY/s1600/JennJohnson_SpiritSiegeKS_11_GameModesPart2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgw-iDXgOCHXDt-E5S8TlEuDysZNeeSTSBmKUWboZLmPdYLZgvekUwxNYMlm0-PgVBql3JNL-dYMT5BOgZRXB4RywqQQAPUvF5spoALdXZql3yPrhyf119GK-2dRpl8DpuXnMOsS4LplY/s1600/JennJohnson_SpiritSiegeKS_11_GameModesPart2.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-18952490820012084852014-09-26T17:20:00.000-07:002015-01-24T11:18:48.585-08:00Spirit Siege - Featured Characters<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
During our <a href="https://www.kickstarter.com/projects/novaheartbeat/spirit-siege-your-five-minute-strategy-game-fix" target="_blank">Kickstarter</a> campaign, we wanted to highlight the units and teach our backers some basic strategies. I made up these handy informational panels for 15 featured characters using information from our game designers and <a href="http://cpatten.tumblr.com/" target="_blank">Caitlyn Patten</a>'s adorable character art.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4IjE0Ptq9R-izfOFqmfSBKwMLIGOnLfCCfDv6vbqSo0YTp5XimMglZN-dXCTwnopj-EQZQx64hQvq48GL-TJpUQ_8dDtfIke6s3v9GT4YCy9KV3oUyD00FFkXOUW-JlDSDXzxdk4W5gA/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_01_PrudentPrincess.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4IjE0Ptq9R-izfOFqmfSBKwMLIGOnLfCCfDv6vbqSo0YTp5XimMglZN-dXCTwnopj-EQZQx64hQvq48GL-TJpUQ_8dDtfIke6s3v9GT4YCy9KV3oUyD00FFkXOUW-JlDSDXzxdk4W5gA/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_01_PrudentPrincess.png" height="640" width="237" /></a></div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzhOClCZwUGUemDASGkjWsX6AJCcGBJOHw-5pSlWIfsHnspLmxpxm6BdkPM1XxD2H-nHRLlbQ7k2vZjzsPvqdOwNsBaIavxgkS2NcQcEuNUwvmU5c9N8IwGlX0pGyCVDNkdXN09dh-8w/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_02_HarpyPunk.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzhOClCZwUGUemDASGkjWsX6AJCcGBJOHw-5pSlWIfsHnspLmxpxm6BdkPM1XxD2H-nHRLlbQ7k2vZjzsPvqdOwNsBaIavxgkS2NcQcEuNUwvmU5c9N8IwGlX0pGyCVDNkdXN09dh-8w/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_02_HarpyPunk.png" height="640" width="305" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpJ2c0eyvAKPQikDhnFPgF4kH5L1kdxWBpRky4Ykl5SH_8Oxy0kfFM2JyXtwT75xhSyg8KYinrAn_D-JMZlxzOG3QID0TtVEd7iCY7pEy1X-7-Ub5A2t_Q85T2Yym13kjBigDsMZObl-E/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_03_Archers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpJ2c0eyvAKPQikDhnFPgF4kH5L1kdxWBpRky4Ykl5SH_8Oxy0kfFM2JyXtwT75xhSyg8KYinrAn_D-JMZlxzOG3QID0TtVEd7iCY7pEy1X-7-Ub5A2t_Q85T2Yym13kjBigDsMZObl-E/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_03_Archers.png" height="640" width="203" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOPLOgVJGzjkIggEXZruycn8eOe26MG9JMerbgqAyHnnxr5zzfOXPV_2SnxRJKoI8qFy-yDUMxrICSDm5yxDym9e997iQfBlpfV0SNWChCFHPPrW6j8mT_jTxapNM66XynO9QO_bXXV5E/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_04_SingingSiren.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOPLOgVJGzjkIggEXZruycn8eOe26MG9JMerbgqAyHnnxr5zzfOXPV_2SnxRJKoI8qFy-yDUMxrICSDm5yxDym9e997iQfBlpfV0SNWChCFHPPrW6j8mT_jTxapNM66XynO9QO_bXXV5E/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_04_SingingSiren.png" height="640" width="324" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghp1g28mhMIy4qbGU6A68GQDnHMo6rP1UCfKCpEqgs1cT4PWa13etdyw_e664xWG-CQABoYQMYwOCIVlF7EZ_aqQurjfmoymhq0wXgPzNY2pDJSS-IHVjI11rKva65bWbdMiWvXMH5nVQ/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_05_YouthfulKnight.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghp1g28mhMIy4qbGU6A68GQDnHMo6rP1UCfKCpEqgs1cT4PWa13etdyw_e664xWG-CQABoYQMYwOCIVlF7EZ_aqQurjfmoymhq0wXgPzNY2pDJSS-IHVjI11rKva65bWbdMiWvXMH5nVQ/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_05_YouthfulKnight.png" height="640" width="258" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ZhYXsqsenXuo2M7YdIbmrWlgnvgpDBC-1GGttAXGJThdOR2FzQ-zOMytGk0K2HSGXvq_2V4gEy2k2bVIT98m0TqhLNhEjMQOKZulC-6J20aS_5Ud55-Thv_iXN9htGz1r8XAhuNWjz0/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_06_SpunkySneaker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ZhYXsqsenXuo2M7YdIbmrWlgnvgpDBC-1GGttAXGJThdOR2FzQ-zOMytGk0K2HSGXvq_2V4gEy2k2bVIT98m0TqhLNhEjMQOKZulC-6J20aS_5Ud55-Thv_iXN9htGz1r8XAhuNWjz0/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_06_SpunkySneaker.png" height="640" width="208" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObY3hBu-cr3FQw0k6vwQ5QMuGS75qdf2R2Ozro9zNjYSiK0MCaJnOeE1a9KNLTNxQ2oMjhQRLvyb176vDB4kcH6uF4I1dncmWCnQw-xH61OXGyFWfBebJEfz3zAqr-kvwqa5tuiXkYjY/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_07_BraveKnight.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObY3hBu-cr3FQw0k6vwQ5QMuGS75qdf2R2Ozro9zNjYSiK0MCaJnOeE1a9KNLTNxQ2oMjhQRLvyb176vDB4kcH6uF4I1dncmWCnQw-xH61OXGyFWfBebJEfz3zAqr-kvwqa5tuiXkYjY/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_07_BraveKnight.png" height="640" width="304" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMpPE9xi-S2KQb5iLcQ8eaziS4xgxQdYr-76hHD0o9FsoduabGddbzqEnwfLG9zo-Sa5rx2TBVu9vVJWFZr704RzwghTFlZmrcJCvzToZQYb3Lejg8tVn3NdH96q55Z9eMOyBY1EDQds/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_08_FlameDragon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMpPE9xi-S2KQb5iLcQ8eaziS4xgxQdYr-76hHD0o9FsoduabGddbzqEnwfLG9zo-Sa5rx2TBVu9vVJWFZr704RzwghTFlZmrcJCvzToZQYb3Lejg8tVn3NdH96q55Z9eMOyBY1EDQds/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_08_FlameDragon.png" height="640" width="264" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPvzBIJmdq3XIrS74A9GWxgmLNG5cW64FQQdN92I0iyHdFK_STtqqt6_o8WvBwkBYepLsRG6oKuyS19jVO1c_t1qciWU_fn8Kxssizl57mhyphenhyphenUrb4th2hqeCA61NpWD1bzPKs82_sy81hQ/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_09_Jackalope.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPvzBIJmdq3XIrS74A9GWxgmLNG5cW64FQQdN92I0iyHdFK_STtqqt6_o8WvBwkBYepLsRG6oKuyS19jVO1c_t1qciWU_fn8Kxssizl57mhyphenhyphenUrb4th2hqeCA61NpWD1bzPKs82_sy81hQ/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_09_Jackalope.png" height="640" width="238" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixfZtoq3qZyFkylF4ACQtmyfYo4QtdqsNrTOgwd_WbdeYKDCdh5rcSdXLhyMtYlEixdtFZp2vFJzeWxJUrgKyVoSEp1I7W9h3BgG64UCTLixEBPoywsufr_Gjc08ff_Yqkd4XPaXmlvfs/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_10_ShieldSister.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixfZtoq3qZyFkylF4ACQtmyfYo4QtdqsNrTOgwd_WbdeYKDCdh5rcSdXLhyMtYlEixdtFZp2vFJzeWxJUrgKyVoSEp1I7W9h3BgG64UCTLixEBPoywsufr_Gjc08ff_Yqkd4XPaXmlvfs/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_10_ShieldSister.png" height="640" width="312" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0POXQTONJNf8qOR0Q882FveTgayNyRCqCRFNx1cjiCl43ZpIqpd7UQt2rVpGoW6GzgTRM0JRZ6JJ60Ujaq-f06FuMO3XcVnMfYIJhWWAcHvJ5zFNT3vQ59KJEgBz_0Vf8sEa3QkJLGss/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_11_Summoner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0POXQTONJNf8qOR0Q882FveTgayNyRCqCRFNx1cjiCl43ZpIqpd7UQt2rVpGoW6GzgTRM0JRZ6JJ60Ujaq-f06FuMO3XcVnMfYIJhWWAcHvJ5zFNT3vQ59KJEgBz_0Vf8sEa3QkJLGss/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_11_Summoner.png" height="640" width="302" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjms4cCybc7SNBBZQ2UROSJpUpgiFa90YVZK3eLbjygt3UREAchh6z2W-xzfpXxVhgLsiy8IYtvZ-wynslyBmA18qiznf9WpWV-O6YZJB1vSdAZ2FIpX03FH1NA3UOpW96CV_BEzhL30mA/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_12_CakeBaker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjms4cCybc7SNBBZQ2UROSJpUpgiFa90YVZK3eLbjygt3UREAchh6z2W-xzfpXxVhgLsiy8IYtvZ-wynslyBmA18qiznf9WpWV-O6YZJB1vSdAZ2FIpX03FH1NA3UOpW96CV_BEzhL30mA/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_12_CakeBaker.png" height="640" width="314" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyi6QklQNjFU5I7zWFmrVl43NI8iuUVI2iPZl2NpRbgWyZSApxHy4lvE75dw62FLWU8_wZgkz0hkBUHsXsH4RjZDhtPVEhjJoSP7F0tj5atmHkrkAxBk0dJ9AWIoHliwjPrSZepzC7Ko/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_13_BoldBard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyi6QklQNjFU5I7zWFmrVl43NI8iuUVI2iPZl2NpRbgWyZSApxHy4lvE75dw62FLWU8_wZgkz0hkBUHsXsH4RjZDhtPVEhjJoSP7F0tj5atmHkrkAxBk0dJ9AWIoHliwjPrSZepzC7Ko/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_13_BoldBard.png" height="640" width="282" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIBBL-fWJFlgMIRt1k9b0E-ECvd4rcHLZSQ9eXu7MCWvF7UOBBIYcp0MnR7lqZxPKsfeCZN9dLWuQxqj7Zl_17L3aO7tUS2NLf9k0JyVMdyedOqbWCqkLT9z_R9fg58ZktC-Drl_vvOM/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_14_MorbidMauler.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIBBL-fWJFlgMIRt1k9b0E-ECvd4rcHLZSQ9eXu7MCWvF7UOBBIYcp0MnR7lqZxPKsfeCZN9dLWuQxqj7Zl_17L3aO7tUS2NLf9k0JyVMdyedOqbWCqkLT9z_R9fg58ZktC-Drl_vvOM/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_14_MorbidMauler.png" height="640" width="302" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkapRo3vSdNjWr2iP8OAuA_rFrJdBZ6lTXZQNiYLsynQaT0NHaXipJX1y27Jfd3GWkSQam_EdSKyMTuJppF9yffp-PnyutZK9CDIQHRllRPcZw8N8FvkcMnYy4nr93GZLT-flfWjTEUEk/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_15_HarpyScout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkapRo3vSdNjWr2iP8OAuA_rFrJdBZ6lTXZQNiYLsynQaT0NHaXipJX1y27Jfd3GWkSQam_EdSKyMTuJppF9yffp-PnyutZK9CDIQHRllRPcZw8N8FvkcMnYy4nr93GZLT-flfWjTEUEk/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_15_HarpyScout.png" height="640" width="224" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyj-Tqj0l64LDF3fnDwMlGdeceSeme-9WGf74nrjjEQrM49rdkOG5VLvlFINJ0ZpWPNs_nZSPP0685dUa0bi1Iqfwx6HYLD34J0Ap0grLqyXB7frmKRJi-TIHIRA8SROfIhmdCKzSOFp4/s1600/JennJohnson_SpiritSiege_FeaturedCharacters_03_Archers.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a>Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-74357074258632367192014-09-24T17:48:00.000-07:002015-02-07T11:32:27.900-08:00Information Density is Fun!<div class="" style="clear: both; text-align: center;">
By far, this chart was the most fun piece of graphic design I created for Spirit Siege's <a href="https://www.kickstarter.com/projects/novaheartbeat/spirit-siege-your-five-minute-strategy-game-fix" target="_blank">Kickstarter</a> campaign. It needed to convey a lot of information and make it easy to see what the backers would recieve at each tier. Many of these types of charts simply use X's to indicate whether items are included in different backer tiers, but we used small graphic representations of each item instead, repeating written information visually where relevant. More visual appeal, easier to parse, and strategic redundancy for the win.</div>
<div class="" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRFSIj5HSKeTLwQdC0kx045NWls6zvhPWKraV3reXwethxPyvNzThxGkpA_hLsllDMARmJyv3qK3DxHujkVWk0r1oJRvlIOMORHyT750-xyzqM_nBm3_LIc_HdzZ9sovS0QmtB-hDM10/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart06_Sept24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRFSIj5HSKeTLwQdC0kx045NWls6zvhPWKraV3reXwethxPyvNzThxGkpA_hLsllDMARmJyv3qK3DxHujkVWk0r1oJRvlIOMORHyT750-xyzqM_nBm3_LIc_HdzZ9sovS0QmtB-hDM10/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart06_Sept24.png" height="640" width="372" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
What made this project particularly fun was cramming a lot of information into a really tight space. Over the many iterations shown below, I adjusted things like column widths and icon designs to accommodate the changing character length of item names and the current number of backer tiers.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVU2LgMiHOCBfH24CB7wJ5YSgujTyNJeICJP7jJ6TqXEcMp4Z2hACXZLIEguUKj1ktmq8dOC0iqJdQbYmYkuUxBJPCDt9LrLjpMJXI6OTGZLy1gZgAmZ4HCmK6A6NiWLYRqxCrAoH21U/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart01_Mar26.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVU2LgMiHOCBfH24CB7wJ5YSgujTyNJeICJP7jJ6TqXEcMp4Z2hACXZLIEguUKj1ktmq8dOC0iqJdQbYmYkuUxBJPCDt9LrLjpMJXI6OTGZLy1gZgAmZ4HCmK6A6NiWLYRqxCrAoH21U/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart01_Mar26.png" height="640" width="360" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
Colors in this very first version were relevant to the game at the time. Those colors, however, were not destined to stick around, either in the game or in the Kickstarter graphics. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjex0TH5_m4RF0lQyLAfzVnwG1bPXBQXg4DXgaZnC_kkzdWIbXXV6FEuYUIQHhoFjD66qe5h-EPN45MrvTqB1PLMYMHc_hcib_hUov0YXLt0N4PS-YBo0_bL3obRsrpZ4ngCr_r4SdENqM/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart02_Mar28.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjex0TH5_m4RF0lQyLAfzVnwG1bPXBQXg4DXgaZnC_kkzdWIbXXV6FEuYUIQHhoFjD66qe5h-EPN45MrvTqB1PLMYMHc_hcib_hUov0YXLt0N4PS-YBo0_bL3obRsrpZ4ngCr_r4SdENqM/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart02_Mar28.png" height="640" width="354" /></a></div>
<div style="text-align: center;">
Dark brown and purple came in to bring the chart more in line with where the game's colors had evolved since the last version.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-D2rYSnOd3PK0SGWryEGR-cepZw02-EbbbKQy0xZ6Id6hKbMPcVYt2iGqmLM6OcVAlHfSO_mPnoGyxOqfZy3-gxua-6dysF2y1SkxVvl3ubKvmjrgZXdKuK0dVcGOocM3lnTP3MJsQ5E/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart03_July22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-D2rYSnOd3PK0SGWryEGR-cepZw02-EbbbKQy0xZ6Id6hKbMPcVYt2iGqmLM6OcVAlHfSO_mPnoGyxOqfZy3-gxua-6dysF2y1SkxVvl3ubKvmjrgZXdKuK0dVcGOocM3lnTP3MJsQ5E/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart03_July22.png" height="640" width="314" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
By this point, the game's color palette had stabilized and a visual vocabulary for the Kickstarter page had been established. Horizontal axis information was repeated along the bottom because the chart was too long; all those reward items meant the header labels were no longer visible by the time a reader scrolled down to the most expensive rewards.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSghJK3z9SRVz_Y0kAU_phm4uu-bTGG30978rOsgTMykvbpTP7_gDN9dbkmvg9gyJx7iaELxK985SkdHeeha8Iv9_etojQLnobzJBj-JRdqfw4K7ssQuey2gQc_lYHoLGecG0GWbPLZ8M/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart04_Aug29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSghJK3z9SRVz_Y0kAU_phm4uu-bTGG30978rOsgTMykvbpTP7_gDN9dbkmvg9gyJx7iaELxK985SkdHeeha8Iv9_etojQLnobzJBj-JRdqfw4K7ssQuey2gQc_lYHoLGecG0GWbPLZ8M/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart04_Aug29.png" height="640" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
Wonderful simplification by the Kickstarter team. Fewer reward items and fewer tiers meant a simpler chart, fewer choices for the overwhelmed backers, and a simpler happier life for my team when the time comes to fulfill orders.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQbOPpHPB51LpENAImO8KRGptAqBC37XfRN07IFcUDZCaqh0OsfBz_chRGaC8MOMUjD6ilbUqy08mY0sy62Ze5_UMDxEvgE4WlieHywQeR4ycDG_ytXbucQrnda5SdfUknq3wTKFW6iM/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart05_Sept13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQbOPpHPB51LpENAImO8KRGptAqBC37XfRN07IFcUDZCaqh0OsfBz_chRGaC8MOMUjD6ilbUqy08mY0sy62Ze5_UMDxEvgE4WlieHywQeR4ycDG_ytXbucQrnda5SdfUknq3wTKFW6iM/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart05_Sept13.png" height="640" width="386" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
This iteration reflects an exciting mid-campaign palette-swap. Out with drab olive and purple, in with bright teal and gold! As one of my teammate said "it feels like someone turned the lights on."</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLub-vvaPepzaVsV2ZHG-b1b9xV86oh8ArSFIzCOFja1aP52m8VOMlUFAZvaaiQzJMGjkfg7a10eT5AQlqNgvKnnH69ZsJ53ucKChfJQxZeJ5y0AQukGRTbinPfQEQMMg5RNEV6NZS8kw/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart06_Sept24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLub-vvaPepzaVsV2ZHG-b1b9xV86oh8ArSFIzCOFja1aP52m8VOMlUFAZvaaiQzJMGjkfg7a10eT5AQlqNgvKnnH69ZsJ53ucKChfJQxZeJ5y0AQukGRTbinPfQEQMMg5RNEV6NZS8kw/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardChart06_Sept24.png" height="640" width="372" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
The final version was even brighter than that. Some tiers sold out, while others we added to accommodate our high-rolling backers.</div>
<br />Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-78437094814499402322014-08-30T21:00:00.000-07:002015-01-24T18:12:54.352-08:00The Making of Bowman<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvVVWyleeLwUw31ZsNpXuQFxpJdlLoik31Qk3x4vp0Q6Ir4i74QI8zRFoLi3utWRnCjy48_avYCJ7mMVTlSx2IXNjDR6PyRX5zavRQ095b5GJMzeX8WgG1ALaz6T1ysLmxy0CemwTJxR4/s1600/JennJohnson_SpiritSiege_BowmanCutout_Final.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvVVWyleeLwUw31ZsNpXuQFxpJdlLoik31Qk3x4vp0Q6Ir4i74QI8zRFoLi3utWRnCjy48_avYCJ7mMVTlSx2IXNjDR6PyRX5zavRQ095b5GJMzeX8WgG1ALaz6T1ysLmxy0CemwTJxR4/s1600/JennJohnson_SpiritSiege_BowmanCutout_Final.png" height="640" width="472" /></a></div>
<br />
<div style="text-align: center;">
Spirit Siege has a booth at PAX! Time for eye-catching booth decorations. Caitlyn Patten designed the character, I just made her BIG. The game art, because it's game art, was too low res to print at this scale, so I broke out the old scenic painting skills and made us a prop. At first I was reluctant to get this crafty, but less than a day later I was bouncy with excitement and losing sleep gleefully planning methods and materials. Turned out to be a super fun diversion from the usual pixel-tinting.</div>
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVP4KwxSrw0rdKR9yLzjCrbyDgn1186LoyzGni9uwzdgpPWVz1_-HCPFB15-phfrI3HiP5WxBobdfLdSEhhkFmSJA-tczXRIrFw2nL3sBIwlOA-bDfKMgkoAOByeYAuARwaSRoX3bAYEg/s1600/JennJohnson_SpiritSiege_BowmanCutout_WIP1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVP4KwxSrw0rdKR9yLzjCrbyDgn1186LoyzGni9uwzdgpPWVz1_-HCPFB15-phfrI3HiP5WxBobdfLdSEhhkFmSJA-tczXRIrFw2nL3sBIwlOA-bDfKMgkoAOByeYAuARwaSRoX3bAYEg/s1600/JennJohnson_SpiritSiege_BowmanCutout_WIP1.png" height="320" width="244" /></a></div>
Step 1: Super 77 spray-fix two 32"x40" sheets of 3/16" thick foamcore together. One layer would have been too flimsy, and I want this to endure the travel an manhandling of and unknown quantity of future events.<br />
Step 2: Grid out the low-res art with borders, so I know what I'm drawing.<br />
Step 3: Transfer grid and drawing to foamcore. Pencil for the grid, vine charcoal for the character, so I can erase (smear out) any drawing mistakes without losing my grid.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbx15BuZpSJxnkJ-tiHUEVpteOIxYt-moZCBNCegWBwVEjYQOTFNSGLzflxGay5PKeSYgahBZ49ZqZbc40ii3fucyrSsfam6Y4iDcu9IXGSTmGagaUUaxhGKOfg7oXv6TlocyRo5V2JyA/s1600/JennJohnson_SpiritSiege_BowmanCutout_WIP2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbx15BuZpSJxnkJ-tiHUEVpteOIxYt-moZCBNCegWBwVEjYQOTFNSGLzflxGay5PKeSYgahBZ49ZqZbc40ii3fucyrSsfam6Y4iDcu9IXGSTmGagaUUaxhGKOfg7oXv6TlocyRo5V2JyA/s1600/JennJohnson_SpiritSiege_BowmanCutout_WIP2.png" height="320" width="237" /></a></div>
Step 4: Sharpie marker the final drawing, save for places where the final art won't have painted line work, like around the lips and lower eye lid.<br />
Step 5: Cut out silhouette with X-acto knife. Reinforce foamcore seams with model glue.<br />
Step 6: Erase remaining charcoal drawing and pencil grid.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6ZvpMb79NcXV9WX9pjdTt_TZj3xD9fxtrowERdjwQkIGRqhWT-aGCh5aExQJ7LILTrubvpGoxx_YAy2wtoQTZ_2Ya0z-4amS4bQH3Q1FsUwDF9tvWIhbq8tj5_aRMGM1j77bH2Qphco/s1600/JennJohnson_SpiritSiege_BowmanCutout_WIP3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6ZvpMb79NcXV9WX9pjdTt_TZj3xD9fxtrowERdjwQkIGRqhWT-aGCh5aExQJ7LILTrubvpGoxx_YAy2wtoQTZ_2Ya0z-4amS4bQH3Q1FsUwDF9tvWIhbq8tj5_aRMGM1j77bH2Qphco/s1600/JennJohnson_SpiritSiege_BowmanCutout_WIP3.png" height="320" width="231" /></a></div>
Step 7: Color blocking with craft acrylics, generally moving from light to dark. I didn't have to do a ton of custom color mixing because craft acrylics come in a wide enough range, but I still maxed out my available mixing containers. Lesson from scenic painting: NEVER throw out mixed paint until the project is over.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvVVWyleeLwUw31ZsNpXuQFxpJdlLoik31Qk3x4vp0Q6Ir4i74QI8zRFoLi3utWRnCjy48_avYCJ7mMVTlSx2IXNjDR6PyRX5zavRQ095b5GJMzeX8WgG1ALaz6T1ysLmxy0CemwTJxR4/s1600/JennJohnson_SpiritSiege_BowmanCutout_Final.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvVVWyleeLwUw31ZsNpXuQFxpJdlLoik31Qk3x4vp0Q6Ir4i74QI8zRFoLi3utWRnCjy48_avYCJ7mMVTlSx2IXNjDR6PyRX5zavRQ095b5GJMzeX8WgG1ALaz6T1ysLmxy0CemwTJxR4/s1600/JennJohnson_SpiritSiege_BowmanCutout_Final.png" height="320" width="236" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Step 8: Final line work. The trick to clean lines, besides hand-eye coordination, is paint viscosity. In the case of fast-drying acrylics, that means only squirting out a little paint at a time. Too much, and the pool dries out and gets too thick to flow nicely.</div>
<div class="separator" style="clear: both; text-align: left;">
Step 9: Some incredibly generous coats of clear gloss enamel. One never knows what will happen on the road. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjghVznPDUHDRB4KqvPA5RpmY1KT6IhYtVo0Oj3sL4PsiWPPntXH6pnjfs8lT78g2Grmc-72sxnBdefZwDgT08lsyQ88kZg4xM8nVUSrInoxNZNKEk87RqObwql00hyphenhyphendkrS6-8lCfr-SDA/s1600/SpiritSiege_PAX.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjghVznPDUHDRB4KqvPA5RpmY1KT6IhYtVo0Oj3sL4PsiWPPntXH6pnjfs8lT78g2Grmc-72sxnBdefZwDgT08lsyQ88kZg4xM8nVUSrInoxNZNKEk87RqObwql00hyphenhyphendkrS6-8lCfr-SDA/s1600/SpiritSiege_PAX.jpg" height="181" width="320" /></a></div>
And here she is at the PAX booth! Picture taken from <a href="https://www.kickstarter.com/projects/1796662059/spirit-siege-your-five-minute-strategy-game-fix/posts/970342" target="_blank">Update #2</a> of the Kickstarter campaign.Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-40604149007322866792014-08-25T18:58:00.000-07:002015-01-24T19:17:53.410-08:00Spirit Siege - Kickstarter Banners & Reward Sub-Banners<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zsfaUzHY3YqBB1pRq6VQlT7CNXx7a_cBtCYrSd9Gv4HYf6uq1p7BIVtV-tq8osGqcInpvUTo96Ze4B5Sx0nS6dQCgJ9TK_PoCKGmJinnSJppto-XqzIUdocUQYkiwfOEIBkIwwPktTY/s1600/JennJohnson_SpiritSiege_Kickstarter_Banner_WhyBackUs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zsfaUzHY3YqBB1pRq6VQlT7CNXx7a_cBtCYrSd9Gv4HYf6uq1p7BIVtV-tq8osGqcInpvUTo96Ze4B5Sx0nS6dQCgJ9TK_PoCKGmJinnSJppto-XqzIUdocUQYkiwfOEIBkIwwPktTY/s1600/JennJohnson_SpiritSiege_Kickstarter_Banner_WhyBackUs.png" height="132" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Lots of graphic design for Spirit Siege's <a href="https://www.kickstarter.com/projects/novaheartbeat/spirit-siege-your-five-minute-strategy-game-fix" target="_blank">Kickstarter</a> page. The main section banners look like the princess example above. Each one features one of <a href="http://cpatten.tumblr.com/" target="_blank">Caitlyn</a>'s adorable characters.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Below are some of the sub-banners for the Rewards section, where we go into detail about each reward item. I designed these sub-banners to be smaller, less attention-grabbing, and to feel indented, so that it would be clear that you are looking at a sub-section header even when you're deep inside the long long rewards section of page.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzT9cqtRvTw2Yg1q4-iX7kThmGO_T4oPCTN9OVjzTisr_1n9KPMtsho6myD9Lioiuo5FtXjg5wi581zweFodroYHN3yQbSCfQ27ZxIsRlmLmUd0i5axY-fmJ1EpjUpvCTh9BoGdT1izU/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_01_Thanks.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzT9cqtRvTw2Yg1q4-iX7kThmGO_T4oPCTN9OVjzTisr_1n9KPMtsho6myD9Lioiuo5FtXjg5wi581zweFodroYHN3yQbSCfQ27ZxIsRlmLmUd0i5axY-fmJ1EpjUpvCTh9BoGdT1izU/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_01_Thanks.png" height="85" width="400" /></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_d4FYQzBml43_7MpBTWgkAH70sxjdIHVIjGBHRwyoUedHfMDlEn9h6t8n_SpxrgYar18U4_fj6PW4A_qb-ErfXYxJdpMEZcvWF-EGfjH9dsobTPbCFauW8uyuJcseGE8OWgc3NlH6tqY/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_02_DesktopWallpaper.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_d4FYQzBml43_7MpBTWgkAH70sxjdIHVIjGBHRwyoUedHfMDlEn9h6t8n_SpxrgYar18U4_fj6PW4A_qb-ErfXYxJdpMEZcvWF-EGfjH9dsobTPbCFauW8uyuJcseGE8OWgc3NlH6tqY/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_02_DesktopWallpaper.png" height="86" width="400" /></a></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3fIRVu8dBWCUpZmuSJMM9zJ9VQkBdcFH4FcyndPn6zA0xQi2g6FfPqo__1mkNbQlHiqJ3c1vmeAI2lyXkIfz8bBiXBFK8VQj6YelWk5eHJ519f6M3dwrA3S_xaqoV3v2CfLzlydLCxI/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_18_ExtraEarlyAlphaAvatar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3fIRVu8dBWCUpZmuSJMM9zJ9VQkBdcFH4FcyndPn6zA0xQi2g6FfPqo__1mkNbQlHiqJ3c1vmeAI2lyXkIfz8bBiXBFK8VQj6YelWk5eHJ519f6M3dwrA3S_xaqoV3v2CfLzlydLCxI/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_18_ExtraEarlyAlphaAvatar.png" height="86" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZqeG3Jh4NChYhp6I69DTnjNtQfOKIYuLmvc_k1FQlEC55l0Pk40MDYhkzBM9LPmpcDFpCmqCAX0MvZuOkT_LLxfLXYKpwVMlTiPikWsnDoUisb20R-p3rVhyphenhyphenitSCWyp8xqFX8t1iBlw/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_17_ExtraEarlyAlphaAccess.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZqeG3Jh4NChYhp6I69DTnjNtQfOKIYuLmvc_k1FQlEC55l0Pk40MDYhkzBM9LPmpcDFpCmqCAX0MvZuOkT_LLxfLXYKpwVMlTiPikWsnDoUisb20R-p3rVhyphenhyphenitSCWyp8xqFX8t1iBlw/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_17_ExtraEarlyAlphaAccess.png" height="86" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgYjuMJvVacvkLHGhgsdjOclKLLa2CuAfQQE_H4TgE1nLnSLfpDWn6RE_KuuKBttfuYQ1SHOmbRjgd7QFz6LgMgQiyHrag1rA_Hi44puU6Ie6v1EvtMQoLlpnSpRRG86H7bRiDV_EiXFk/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_06_PlaySpiritSiege.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgYjuMJvVacvkLHGhgsdjOclKLLa2CuAfQQE_H4TgE1nLnSLfpDWn6RE_KuuKBttfuYQ1SHOmbRjgd7QFz6LgMgQiyHrag1rA_Hi44puU6Ie6v1EvtMQoLlpnSpRRG86H7bRiDV_EiXFk/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_06_PlaySpiritSiege.png" height="86" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRr6oxi9IgRtse3Sbsm4e9JJKevjMwUqC9yby04h6lmNL2us6wbq0Z0Go-NbVY8xBx0wqhYWE96nYHiqdRfR8Amw4J2U9b0qqx-zLwSSfDRf6bTtXnwy3n47rGy81O-xrKIjzI-E5GS64/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_19_PlaySpiritSiegePLUS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRr6oxi9IgRtse3Sbsm4e9JJKevjMwUqC9yby04h6lmNL2us6wbq0Z0Go-NbVY8xBx0wqhYWE96nYHiqdRfR8Amw4J2U9b0qqx-zLwSSfDRf6bTtXnwy3n47rGy81O-xrKIjzI-E5GS64/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_19_PlaySpiritSiegePLUS.png" height="86" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWEG4bz12WlHnNZ-ACpQUSU-oI7y8I5JX7w46UboWN9nHRq7qj4_8pntGb2tIB7FHTqMCaHL9CHJpt0sXnvFnEvIqoYbzySZSYIkTLmmBT2wY9UOTRH8Z-zV1NQ9889vR31a84YF5uJNA/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_24_PlaySpiritSiegeULTIMATE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWEG4bz12WlHnNZ-ACpQUSU-oI7y8I5JX7w46UboWN9nHRq7qj4_8pntGb2tIB7FHTqMCaHL9CHJpt0sXnvFnEvIqoYbzySZSYIkTLmmBT2wY9UOTRH8Z-zV1NQ9889vR31a84YF5uJNA/s1600/JennJohnson_SpiritSiege_Kickstarter_RewardBanner_24_PlaySpiritSiegeULTIMATE.png" height="86" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
There are more examples on our <a href="https://www.kickstarter.com/projects/novaheartbeat/spirit-siege-your-five-minute-strategy-game-fix" target="_blank">Kickstarter</a> page, but these are the ones where I created the icon art on the left. Caitlyn made the art on the others.</div>
</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-54858878715608904332014-05-08T12:02:00.000-07:002015-02-07T15:08:56.075-08:00Tileable Water System<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGM6o7c5NMd6RdHdrzRDBxVuylua3ssQ5atPjWtanc4ZnOQBJUkC5f6Quj3jYQS54b8Rzo5Fl6wiSv0act1UbCbL48PQsIgXKm5POVzZCvuR3Fnw57iVTM-Ku14CsksJMvqSqI8zSzhZY/s1600/JennJohnson_SpiritSiege_GameplayScene_Dark_Water.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGM6o7c5NMd6RdHdrzRDBxVuylua3ssQ5atPjWtanc4ZnOQBJUkC5f6Quj3jYQS54b8Rzo5Fl6wiSv0act1UbCbL48PQsIgXKm5POVzZCvuR3Fnw57iVTM-Ku14CsksJMvqSqI8zSzhZY/s1600/JennJohnson_SpiritSiege_GameplayScene_Dark_Water.png" height="640" width="626" /></a></div>
<br />
<div style="text-align: center;">
One of the tasks I worked on at Nova Heartbeat was designing a tileable water system for Spirit Siege, a top-down grid-based strategy game. We wanted to create organic-looking coastlines to generate visual interest while clearly delineating which spaces were playable. With some exceptions, units could not be placed on water. My rule of thumb was: water squares should be at least 75% covered by water, and grass squares should be no more than 25% covered by water.</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicpGHK8q6drFmOKxt-z7SE8HtRTjdaEjq5H_ofOLz3s-c71lM3PCyQR_ZrBE4JYtRFUvsybc5im3RkGFGngWLyEKXDTx5QX1gwneaJ7UDYG9rswCfJKam79nN9bQwhAPAlTij6EmmZyZk/s1600/SpiritSiege_MockUp_CaitlynPatten.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicpGHK8q6drFmOKxt-z7SE8HtRTjdaEjq5H_ofOLz3s-c71lM3PCyQR_ZrBE4JYtRFUvsybc5im3RkGFGngWLyEKXDTx5QX1gwneaJ7UDYG9rswCfJKam79nN9bQwhAPAlTij6EmmZyZk/s1600/SpiritSiege_MockUp_CaitlynPatten.png" height="320" width="218" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
While the original mock-up by <a href="http://cpatten.tumblr.com/" target="_blank">Caitlyn</a> had pretty directional wave lines, I wanted the final assets to be more flexible than that, so I used spirals to create a non-directional water texture instead.</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-26158585737198805822013-12-11T09:03:00.000-08:002015-01-18T12:13:30.751-08:00Full Color Self-Portrait with Process<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRlfdaIrOsnsZSoTeYlEiNW3Fv0dBIzwrvcUcgk-NYEOb5QVRqJ7BdPpkDoNkA6x4qWul9cksd1qJNAuOENN80LS43JzromUELgY-diRVFEE5uoE_CoxSkUIAh4Jr1ar1amQUYA2CRc8/s1600/JennJohnson_DecPortrait_Final.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRlfdaIrOsnsZSoTeYlEiNW3Fv0dBIzwrvcUcgk-NYEOb5QVRqJ7BdPpkDoNkA6x4qWul9cksd1qJNAuOENN80LS43JzromUELgY-diRVFEE5uoE_CoxSkUIAh4Jr1ar1amQUYA2CRc8/s640/JennJohnson_DecPortrait_Final.jpg" height="640" width="494" /></a></div>
<br />
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
</div>
Last Friday, I gave myself the afternoon to start making whatever art I wanted. Since I hadn't done a full color portrait in a long while, and seeing how I'm still the cheapest and most accommodating model I know, self-portrait it was.<br />
<a name='more'></a></div>
<div style="text-align: center;">
Estimating by the audio book I was listening to, the painting took about 16 hours (not including setup), spaced out across 5 days.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOtvUe3GuVmzXPim9Ee77b-wM7J5CmFChPHoHO8qLR3rgPkUS0kqXVS1LNyxtcAS_UcYSLwihlNGWud1C8hVOjZTkBHfGRCQM1zqFzDvu_DdosYg1SK81yVNymLdThZdFJP0sMzDKdmc/s1600/JennJohnson_DecPortrait_Setup.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOtvUe3GuVmzXPim9Ee77b-wM7J5CmFChPHoHO8qLR3rgPkUS0kqXVS1LNyxtcAS_UcYSLwihlNGWud1C8hVOjZTkBHfGRCQM1zqFzDvu_DdosYg1SK81yVNymLdThZdFJP0sMzDKdmc/s400/JennJohnson_DecPortrait_Setup.jpg" height="272" width="400" /></a></div>
The Setup:<br />
1. Wacom Graphire tablet. I know some of you will balk at my archaic tech, but I'm no snob. It works.<br />
2. Warm key light. Clip lamp on the frame of my second monitor.<br />
3. Cool fill light. A floor lamp, shade removed, with bulb covered in two layers of blue plastic sheeting salvaged from a binder organizer. One of these days I'll get myself a proper array of colored gels. For now, we improvise.<br />
4. Backdrop. The tablecloth I made and used for my booth during the UW theater portfolio showcase in 2006.<br />
5. Chair, on top of the couch, for clipping the backdrop to.<br />
6. Full length mirror, back of. On top of a stool, propped up against the back of my easel.<br />
7. Cosmetic hand mirror, the better to study details with.<br />
8. Feline companion, Gandalf the Grey.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHs9VeTKK1zMzdfr2YDIJeaxOQLmPdfzP89Bw4isipwjCBIcwbLL6j8tZCcZrCC6mPhsNgBtheNC7Gp6M7QUeq1GjBd3AqLnNt5CRjGgvldnWSuaBRibEKOv4JeDkxo01ZK0GLvmGLKvk/s1600/JennJohnson_DecPortrait_WIP1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHs9VeTKK1zMzdfr2YDIJeaxOQLmPdfzP89Bw4isipwjCBIcwbLL6j8tZCcZrCC6mPhsNgBtheNC7Gp6M7QUeq1GjBd3AqLnNt5CRjGgvldnWSuaBRibEKOv4JeDkxo01ZK0GLvmGLKvk/s400/JennJohnson_DecPortrait_WIP1.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
Super-fast line drawing, just to give myself some bearings. In retrospect, it would have saved me a few headaches later on if I'd spent more time and careful attention on the drawing phase, but at the time, I just wanted to get on with it.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjiVL3PrQg8_6AUe7rGvl5wzD64T6i0GNTd1kRrF3sIzDiibHT4BpbUNR-D_o_w4tpEMbPGWbu5fRTwbWsIgECnmMgXeWzGBytQLBuX4-liZLadzikWIEsLuCzwizhigGyL8bw1Ek7QwM/s1600/JennJohnson_DecPortrait_WIP3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjiVL3PrQg8_6AUe7rGvl5wzD64T6i0GNTd1kRrF3sIzDiibHT4BpbUNR-D_o_w4tpEMbPGWbu5fRTwbWsIgECnmMgXeWzGBytQLBuX4-liZLadzikWIEsLuCzwizhigGyL8bw1Ek7QwM/s400/JennJohnson_DecPortrait_WIP3.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
Ugh. Terrible terrible 'just get something down for everything' blocking. Gross. I can't believe I'm even<br />
posting it. Okay, let's just move on to the next phase as fast as possible, shall we.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieBKXiO9itbAO7i2IhL9rDcL0HUJ1in_cqHQBwAwoXKoqyO1FymC7BT90frpB7CZ8SFnHn0cg8w1FxjxKHu0z6GN1-xSgGwyMq_XFJgpgX389qL75C7mq2s1QzyzXORCqBjQwa4jOy3iI/s1600/JennJohnson_DecPortrait_WIP6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieBKXiO9itbAO7i2IhL9rDcL0HUJ1in_cqHQBwAwoXKoqyO1FymC7BT90frpB7CZ8SFnHn0cg8w1FxjxKHu0z6GN1-xSgGwyMq_XFJgpgX389qL75C7mq2s1QzyzXORCqBjQwa4jOy3iI/s400/JennJohnson_DecPortrait_WIP6.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
Beginning to look more human. Progress in the right direction.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBO8bj_ntMAdaQHThyphenhyphenwlUs4GMwO9h2Q7dHwEWiP94JxwtMADebzeRP6GpmZ5XWn5gP8eFOrumyXhRhJpBGRMIh6lUXHKl2ajV82DQwyhLsYW4PGajf_IzNdgff8VI3HiXjJ-9Tsz33M4/s1600/JennJohnson_DecPortrait_WIP8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBO8bj_ntMAdaQHThyphenhyphenwlUs4GMwO9h2Q7dHwEWiP94JxwtMADebzeRP6GpmZ5XWn5gP8eFOrumyXhRhJpBGRMIh6lUXHKl2ajV82DQwyhLsYW4PGajf_IzNdgff8VI3HiXjJ-9Tsz33M4/s400/JennJohnson_DecPortrait_WIP8.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
Hair made a big difference. Fun with cool and warm.</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVuEdrOtmAoMGhSvrI1ETZ3BHnL-KUuwjUwFPDHC8jxsVWgZ5vPYcIYmJWlZxeYUmGKnzg-XUZt4cBy2xUwhGICj3t14x2zWqp-N9LCE4xP0zX_i8F4ABtFZpC5yyqYQ44beO_LdAJfs/s1600/JennJohnson_DecPortrait_WIP10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVuEdrOtmAoMGhSvrI1ETZ3BHnL-KUuwjUwFPDHC8jxsVWgZ5vPYcIYmJWlZxeYUmGKnzg-XUZt4cBy2xUwhGICj3t14x2zWqp-N9LCE4xP0zX_i8F4ABtFZpC5yyqYQ44beO_LdAJfs/s400/JennJohnson_DecPortrait_WIP10.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
A round of anatomy adjustments. I left the glasses on for comparison in the progress shots, but I did a lot of the work on the facial structure with their layers turned off. I needed to make sure the underlying anatomy worked without the distraction of a obscuring form floating in front. Flipping the canvas horizontally helped, too.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNP8g1oMh2UnCSk77cYQct2Mj2z6qs3EhK40wRt37l80XMFgdM2ofpK7SLI93NXU6aAWsV65fmFYIn-olFFkaZCfQpCGzn_1u8pP9mI4Gz13QIjo0Tp6ARmMggoL94hdoPKs_uf9Fbpg/s1600/JennJohnson_DecPortrait_WIP11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNP8g1oMh2UnCSk77cYQct2Mj2z6qs3EhK40wRt37l80XMFgdM2ofpK7SLI93NXU6aAWsV65fmFYIn-olFFkaZCfQpCGzn_1u8pP9mI4Gz13QIjo0Tp6ARmMggoL94hdoPKs_uf9Fbpg/s400/JennJohnson_DecPortrait_WIP11.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
Oops. Ear in the wrong place, and time to stop ignoring the shirt.</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbuWhaLbMaIHADtf0ROeeIA0j12_8ZruTY2a2EP7KxhL4yXdkQ0PRRo4786dy-XULtwffEHn2a-azaV7R-lR1stejE_kjQWkabi2WY7swDQm2iIQuX3qKBxx8wIeyyqJ1LzpyCXCgvpE/s1600/JennJohnson_DecPortrait_WIP13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbuWhaLbMaIHADtf0ROeeIA0j12_8ZruTY2a2EP7KxhL4yXdkQ0PRRo4786dy-XULtwffEHn2a-azaV7R-lR1stejE_kjQWkabi2WY7swDQm2iIQuX3qKBxx8wIeyyqJ1LzpyCXCgvpE/s400/JennJohnson_DecPortrait_WIP13.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwaohszqEaZSyDrYOp6TbUucGBs015v7mNHv_HvVnwQvX7aCVv0UJIhT1PJIgutmxxQjf27x2V6nIcIg7pBRiO4v5_XjCUjmwUNw5y0-frorxk_gcrG1EAa7OVv52fq7fm7Wor6GTlANY/s1600/JennJohnson_DecPortrait_WIP16.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwaohszqEaZSyDrYOp6TbUucGBs015v7mNHv_HvVnwQvX7aCVv0UJIhT1PJIgutmxxQjf27x2V6nIcIg7pBRiO4v5_XjCUjmwUNw5y0-frorxk_gcrG1EAa7OVv52fq7fm7Wor6GTlANY/s400/JennJohnson_DecPortrait_WIP16.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
Enlarging the nose and fleshing out the neck went a long way toward improving the likeness. </div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRlfdaIrOsnsZSoTeYlEiNW3Fv0dBIzwrvcUcgk-NYEOb5QVRqJ7BdPpkDoNkA6x4qWul9cksd1qJNAuOENN80LS43JzromUELgY-diRVFEE5uoE_CoxSkUIAh4Jr1ar1amQUYA2CRc8/s1600/JennJohnson_DecPortrait_Final.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRlfdaIrOsnsZSoTeYlEiNW3Fv0dBIzwrvcUcgk-NYEOb5QVRqJ7BdPpkDoNkA6x4qWul9cksd1qJNAuOENN80LS43JzromUELgY-diRVFEE5uoE_CoxSkUIAh4Jr1ar1amQUYA2CRc8/s400/JennJohnson_DecPortrait_Final.jpg" height="400" width="308" /></a></div>
Final stretch. Something was still bothering me, until I realized the left eye was too small for the perspective on the rest of the head. More anatomy refinements, especially on cheek and forehead. Fixed the hair around the ear and added the jewelry. Glasses, and the shadows they cast, were last. I had a lot of fun with the little glinting details of metal and glass.</div>
<div style="text-align: center;">
<br /></div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-34112017769606465852013-10-25T13:52:00.000-07:002015-01-18T12:13:51.034-08:00Happy Halloween!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlNu1dG3yjNMrFhuronn-tc3sPZUoEdXFFk_Wg3KPTmLnvES6M9OY7duhy6E0lGeA6l5oJ-m7HbFourfKuruTloXAo6b6xFgcQejxzbUvOFdTHeMPoHC_r9YTHJUomqJ0XUUewdDhav0/s1600/JennJohnson_RedPandaDancer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlNu1dG3yjNMrFhuronn-tc3sPZUoEdXFFk_Wg3KPTmLnvES6M9OY7duhy6E0lGeA6l5oJ-m7HbFourfKuruTloXAo6b6xFgcQejxzbUvOFdTHeMPoHC_r9YTHJUomqJ0XUUewdDhav0/s640/JennJohnson_RedPandaDancer.png" height="640" width="494" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
So there I was, listening to Janelle MonĂ¡e ("<a href="http://www.youtube.com/watch?v=eaMBagakSdM" target="_blank">Dance Apocalyptic</a>," in case you were wondering. I know you were.), looking at pictures of red pandas, and vaguely wondering what to be for Halloween.</div>
<div class="separator" style="clear: both; text-align: center;">
Here's what happened.</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjPOKfsSNZQZBvkZV2NzhKK5TLSChBcQaHHzoKGf3nuNYKqEeNScllf44n3pGkuUUwCyL0XsYJOksKS2xLwtjXWASiVdLHDwxOkXGgR_QquhiisNDh3iNdAXSIPuDUo5Vx_USc42BXzaA/s1600/JennJohnson_RedPandaDancer_detail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjPOKfsSNZQZBvkZV2NzhKK5TLSChBcQaHHzoKGf3nuNYKqEeNScllf44n3pGkuUUwCyL0XsYJOksKS2xLwtjXWASiVdLHDwxOkXGgR_QquhiisNDh3iNdAXSIPuDUo5Vx_USc42BXzaA/s640/JennJohnson_RedPandaDancer_detail.png" height="494" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The Process:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8e_WvBZHyldNlzWfiQGuqS5xDOl30HErzs8TAV2pcFzZcS2LiVAOOlNEQ6po04mwibIPUvM7Du2YylYzfm23XA8b1aJcX6YX8xC0j-VsQS52yrEVmOT0dODzh-7Kshh3WZAB78otONW8/s1600/JennJohnson_RedPandaDancer_WIP1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8e_WvBZHyldNlzWfiQGuqS5xDOl30HErzs8TAV2pcFzZcS2LiVAOOlNEQ6po04mwibIPUvM7Du2YylYzfm23XA8b1aJcX6YX8xC0j-VsQS52yrEVmOT0dODzh-7Kshh3WZAB78otONW8/s400/JennJohnson_RedPandaDancer_WIP1.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
I started by scanning a line drawing and filling in the blocks of color against a rough idea of what I wanted the background to be. At this point, I was concerned about whether the pose read as the proper motion, and weather the eye would be drawn to the right areas of contrast in the correct order.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ7JqNLcAiKctpfbEFNwQc2hPpkTne-IcVUYRbWlDML7jXDNjiBZQlvmg6rHv-hJx-abhbtfWWt0-p-iOQMZ41R9qwqIxZFnioeA8ukN_amFl26Spj4TBY4U332i2YtdC0GQhtdPXHzwE/s1600/JennJohnson_RedPandaDancer_WIP5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ7JqNLcAiKctpfbEFNwQc2hPpkTne-IcVUYRbWlDML7jXDNjiBZQlvmg6rHv-hJx-abhbtfWWt0-p-iOQMZ41R9qwqIxZFnioeA8ukN_amFl26Spj4TBY4U332i2YtdC0GQhtdPXHzwE/s400/JennJohnson_RedPandaDancer_WIP5.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
Face version 1, color adjustment and the beginning of rounding values. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3BKN6kMRM6GeUKgjkBmNQ_jHnMbassGCaQ2O17gwNwCvepaByrRkA_Lo5NYPZGwdewyS1gxMtYHO22OwW6ZoGRiNMkYiP06E55Dqr3xin8wdyibprwX7fYv34b05WrH68xBA8t879c5U/s1600/JennJohnson_RedPandaDancer_WIP12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3BKN6kMRM6GeUKgjkBmNQ_jHnMbassGCaQ2O17gwNwCvepaByrRkA_Lo5NYPZGwdewyS1gxMtYHO22OwW6ZoGRiNMkYiP06E55Dqr3xin8wdyibprwX7fYv34b05WrH68xBA8t879c5U/s400/JennJohnson_RedPandaDancer_WIP12.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
The face wasn't expressive enough, so I turned it for better staging and switched to an exaggerated grin. I'd been on the fence about whether this was going to be a red panda costume, or just an outfit loosely inspired by their coloration. With the head turned, I just went for it, making it a costume with the addition of a mask and ear-like fascinators. The necklaces added a lot to the sense of motion. I also fixed the boots, adding structure and nailing down their relationship to the ground plane. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrK77xBbAcQzL9RokgKYhvFfQZvTHsJOtqZe0jv4DRFZ7nHeLKIwSofsVk8d78Fv6GjlRSkJj_ZjGjqdRaeT0rUohvJEVPssZph43SBB-6Jjb5-mETG0VQpLGFT_ilpHrG8qODhwaIUYo/s1600/JennJohnson_RedPandaDancer_WIP19.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrK77xBbAcQzL9RokgKYhvFfQZvTHsJOtqZe0jv4DRFZ7nHeLKIwSofsVk8d78Fv6GjlRSkJj_ZjGjqdRaeT0rUohvJEVPssZph43SBB-6Jjb5-mETG0VQpLGFT_ilpHrG8qODhwaIUYo/s400/JennJohnson_RedPandaDancer_WIP19.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
By this point, the hand blobs were driving me crazy. Time for some real fingers, plus rounding out the gloves, leggings, and finishing off the boots. I had thought I wanted the left forearm angled more in toward the body, but after getting real anatomy and better proportions in there, I decided I liked it better out a bit after all.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlNLGRzajeLfyRg4dEUElDlR9DR8VJcL9SrsWZSg2DyaFoaIyFdqEAbSAVbMP99tRzA7IXXe3m-xDthw4DoNRpk_qpXAGlJRlnMg_owMJZpc-TwQ0k4iwQkFim4vfJTvlpVAE18gdOzBQ/s1600/JennJohnson_RedPandaDancer_WIP23.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlNLGRzajeLfyRg4dEUElDlR9DR8VJcL9SrsWZSg2DyaFoaIyFdqEAbSAVbMP99tRzA7IXXe3m-xDthw4DoNRpk_qpXAGlJRlnMg_owMJZpc-TwQ0k4iwQkFim4vfJTvlpVAE18gdOzBQ/s400/JennJohnson_RedPandaDancer_WIP23.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
I still didn't really know what I wanted to do with the background. After some trial and error, I landed on this graphic circle design and shifted the figure in frame for a better composition.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOiVjfCf0n5Iu3hcP9cE7ueRKE2hK742KUDGwfRRbRsG8X6dTPLChgt8NhiqN7Q8VCYTPHAtiX57F6fr8aIDloNLD8TJACbgMnAM4NmIR3BWXrU2Y6Zvs1F5IhEoY3rCci7MqTMSPPXs4/s1600/JennJohnson_RedPandaDancer_WIP25.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOiVjfCf0n5Iu3hcP9cE7ueRKE2hK742KUDGwfRRbRsG8X6dTPLChgt8NhiqN7Q8VCYTPHAtiX57F6fr8aIDloNLD8TJACbgMnAM4NmIR3BWXrU2Y6Zvs1F5IhEoY3rCci7MqTMSPPXs4/s400/JennJohnson_RedPandaDancer_WIP25.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
Ruffles!</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7FFa5V628ICYDTk8z7Y1b7x62NNqWHcOxSOhl_WUYa0CaTR7-oJNP2Vt1RX7SBm8fb3FtccwzgQIl4LYxdncSjAZnelBpvoQU871Xq6LjFe53MXEuUcxcFQZ6Cd8-zrUkrgKMXHzdXM/s1600/JennJohnson_RedPandaDancer_Final.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7FFa5V628ICYDTk8z7Y1b7x62NNqWHcOxSOhl_WUYa0CaTR7-oJNP2Vt1RX7SBm8fb3FtccwzgQIl4LYxdncSjAZnelBpvoQU871Xq6LjFe53MXEuUcxcFQZ6Cd8-zrUkrgKMXHzdXM/s400/JennJohnson_RedPandaDancer_Final.jpg" height="400" width="308" /></a></div>
<div style="text-align: center;">
The final pass was about fine details and getting the forms to round back into space. I dusted many of the edges with background colors to get them fall back. </div>
<br />Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-55678553877868928892013-09-10T23:54:00.000-07:002013-09-10T23:54:03.054-07:00Hanging Lantern<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5XUlQaCXAaCcPgNXGrsgw70F2aZh1UM6uarx5r4ODM1dsEWnIkImTmN_TUT2K8tvmfI5cNi38j1MEsVfSYB8FukEM0ea3OOHD7GLrpf06cueosbjHLIiR0JfUaShl_WqcfivlzGzZNBU/s1600/JennJohnson_Lantern.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5XUlQaCXAaCcPgNXGrsgw70F2aZh1UM6uarx5r4ODM1dsEWnIkImTmN_TUT2K8tvmfI5cNi38j1MEsVfSYB8FukEM0ea3OOHD7GLrpf06cueosbjHLIiR0JfUaShl_WqcfivlzGzZNBU/s400/JennJohnson_Lantern.jpg" width="281" /></a></div>
<br />Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-28667521760672128152013-08-20T16:25:00.000-07:002013-10-05T17:09:06.692-07:00Self-Portrait<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqvIzR16mholle1cDNGOucNbZGdkSE7yjh9RmiO7EgWmqo6PxxINxjd419Tpd3S9hGhTFr2cvtMvKxmfaSJ22x_YYUHiBuc0vRs6BtjQGnqK2GJzirgCsSVa-2GSjLgitWpyn-PDDitvw/s1600/JennJohnson_PixiePortrait.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqvIzR16mholle1cDNGOucNbZGdkSE7yjh9RmiO7EgWmqo6PxxINxjd419Tpd3S9hGhTFr2cvtMvKxmfaSJ22x_YYUHiBuc0vRs6BtjQGnqK2GJzirgCsSVa-2GSjLgitWpyn-PDDitvw/s400/JennJohnson_PixiePortrait.jpg" width="313" /></a></div>
<br />Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-19096500932689852512013-07-10T21:07:00.000-07:002013-10-04T15:16:28.355-07:00Ancient City<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHwihrg8dffXRlrAtUa1f2Ajf7Q5LWjzSw84izx4ZHyqXAti_ghn4M6b_CohyphenhyphenM_nHjEXpcfAXTl2ENXzf_8FmrRPc27G_1i_x1gmNmECVd6bGAmbqN2FErfEqGgISIQBDXrtgRi1tcYMY/s1600/JennJohnson_AncientCity.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="420" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHwihrg8dffXRlrAtUa1f2Ajf7Q5LWjzSw84izx4ZHyqXAti_ghn4M6b_CohyphenhyphenM_nHjEXpcfAXTl2ENXzf_8FmrRPc27G_1i_x1gmNmECVd6bGAmbqN2FErfEqGgISIQBDXrtgRi1tcYMY/s640/JennJohnson_AncientCity.jpg" width="640" /></a></div>
<br />
<div style="text-align: center;">
I took inspiration from the Ajanta Caves in India and the Vardzia cave monastery in Georgia for this concept piece of an ancient city. </div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-44337871120244470062013-06-24T12:32:00.000-07:002014-02-04T10:58:43.247-08:00Castle Paintovers <div class="separator" style="clear: both; text-align: center;">
I love doing paintovers. They let me play with mood and color a lot sooner because so much of the content and composition is there already. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnpP8bA3ti3pHEiIysgjteRhTCXcFMXhSs8aNfpTXsI-P9OOOwE9kwn7Sau8zyQ_-PKqJSBRWRvmlMdKwmQ7534H89UuP-XucZekq2fZHHXZ7JpC5si8KnrLoqSSIzUZ6xV_GR7fIld0s/s1600/JennJohnson_CastlePaintover_Overcast.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnpP8bA3ti3pHEiIysgjteRhTCXcFMXhSs8aNfpTXsI-P9OOOwE9kwn7Sau8zyQ_-PKqJSBRWRvmlMdKwmQ7534H89UuP-XucZekq2fZHHXZ7JpC5si8KnrLoqSSIzUZ6xV_GR7fIld0s/s640/JennJohnson_CastlePaintover_Overcast.jpg" height="426" width="640" /></a></div>
<div style="text-align: center;">
Overcast Day<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Rgb-yKtImHELScOwrx2VsAvU7RVm1DEoEcgI4qVOn7nulnihi81HM4OauTa_JcLYZwdnNreiFTVaq0qOn6GQ51T_AGtUGZ2pV0Q1tysOp_J1O2B3snfpayn-CDgtfD5WeUq23kgQU-I/s1600/Overcast+Inspiration.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Rgb-yKtImHELScOwrx2VsAvU7RVm1DEoEcgI4qVOn7nulnihi81HM4OauTa_JcLYZwdnNreiFTVaq0qOn6GQ51T_AGtUGZ2pV0Q1tysOp_J1O2B3snfpayn-CDgtfD5WeUq23kgQU-I/s1600/Overcast+Inspiration.jpg" height="155" width="320" /></a></div>
Overcast Inspiration</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KFEgzazpdx0qm6NjdB6f9SrWcTSo2u9T19WJi-onl6p3GQk4XfZMv8S3zwyMTyC_SHLZpxIu1YBnOboUcXM2zgG0L6a-Z_JZR0ibyfA-oZErqhr1QUe_lwXPgaP-JSo_ErBdk4Nq5t0/s1600/Castle_6k_15m.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KFEgzazpdx0qm6NjdB6f9SrWcTSo2u9T19WJi-onl6p3GQk4XfZMv8S3zwyMTyC_SHLZpxIu1YBnOboUcXM2zgG0L6a-Z_JZR0ibyfA-oZErqhr1QUe_lwXPgaP-JSo_ErBdk4Nq5t0/s320/Castle_6k_15m.jpg" height="213" width="320" /></a></div>
<div style="text-align: center;">
Provided White Box Render, source unknown<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIa3YJOdeOgAAKDg1LoVyC0ZhQ1HBOCJbDeQ4imBmKqyrMbW6-aX5vN922gE1FChNnhMBxbYozAGbeaFllLWI-Dz-mmkPad57NCaiaesJyt_jpYCI-raGIJ53ZWzbdzk0GMuMi5Kvt18/s1600/Sunset+Inspiration.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIa3YJOdeOgAAKDg1LoVyC0ZhQ1HBOCJbDeQ4imBmKqyrMbW6-aX5vN922gE1FChNnhMBxbYozAGbeaFllLWI-Dz-mmkPad57NCaiaesJyt_jpYCI-raGIJ53ZWzbdzk0GMuMi5Kvt18/s1600/Sunset+Inspiration.jpg" height="142" width="320" /></a></div>
Sunset Inspiration</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmn6zJNjMVrohj-3zt-dYyM0bxN831WajzQuRisHoH9nK170miDhfPEFAAZFT3QwOSjDaQBF-wSbqdPhKaQJsnUO8HwcPuTOlwXeZLXOzLosp0C6_l_mSpc9ImwLw0gy4sqvxoVRsU0U/s1600/JennJohnson_CastlePaintover_Sunset.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmn6zJNjMVrohj-3zt-dYyM0bxN831WajzQuRisHoH9nK170miDhfPEFAAZFT3QwOSjDaQBF-wSbqdPhKaQJsnUO8HwcPuTOlwXeZLXOzLosp0C6_l_mSpc9ImwLw0gy4sqvxoVRsU0U/s640/JennJohnson_CastlePaintover_Sunset.jpg" height="425" width="640" /></a></div>
<div style="text-align: center;">
Sunset</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-72120078026160959312013-06-21T19:12:00.000-07:002013-06-21T19:12:09.848-07:00Paper Raptor<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1d-jr81O8JzKySKoZWSRma0RCrqtxAgthQ46LnCnNtxSrgZLPOXGw-aCYt2xEbJsJu4D1BZGQQ_QfIy11rpOhKfgEKk_kPyiD6PqENOjYVw6TeK9iXtZ1zbQu9nSp6njn5gFaZM7waMI/s1600/PaperRaptor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1d-jr81O8JzKySKoZWSRma0RCrqtxAgthQ46LnCnNtxSrgZLPOXGw-aCYt2xEbJsJu4D1BZGQQ_QfIy11rpOhKfgEKk_kPyiD6PqENOjYVw6TeK9iXtZ1zbQu9nSp6njn5gFaZM7waMI/s320/PaperRaptor.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
A friend made me a delightful origami raptor, so I painted it. </div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-51565255782848603052013-05-27T20:44:00.000-07:002013-10-03T20:46:21.263-07:00The Lonely Giant<div style="text-align: center;">
Here are three illustrations from The Lonely Giant, a Scottish fairy tale. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyFhnPvPKAzWR1fZX-YIKgnzsWqXMkJTWhbjIcMutF6daLkoeWeebSysl9ea_9PZ3nCwl-HAVSkOQhdU1k5xe10e-VGii_7W_q9a3u8skg2D05zPKaLK74ElGOnUnJL0XpW7ygC_EX_PE/s1600/JennJohnson_LonelyGiant_Help.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyFhnPvPKAzWR1fZX-YIKgnzsWqXMkJTWhbjIcMutF6daLkoeWeebSysl9ea_9PZ3nCwl-HAVSkOQhdU1k5xe10e-VGii_7W_q9a3u8skg2D05zPKaLK74ElGOnUnJL0XpW7ygC_EX_PE/s400/JennJohnson_LonelyGiant_Help.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
The giant asks his human friend how to cure his loneliness. Knowing that he could never marry her, she tells him to find a giantess to be his wife. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3nbVtriGzT1AssXdpof-txDqznVWJWrRh4q3cUcp42GeLrlrtuyc3l_Ez1E7jwS57y8HoProE_4ikqjbJHnt2ZT9hFkaf2RHe2N8erjysvx6Gahm2ilRYU1TmqC1i7a9QR0Z_mw51Fk/s1600/JennJohnson_LonelyGiant_Walk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3nbVtriGzT1AssXdpof-txDqznVWJWrRh4q3cUcp42GeLrlrtuyc3l_Ez1E7jwS57y8HoProE_4ikqjbJHnt2ZT9hFkaf2RHe2N8erjysvx6Gahm2ilRYU1TmqC1i7a9QR0Z_mw51Fk/s640/JennJohnson_LonelyGiant_Walk.jpg" width="395" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
He wanders the shoreline in search of a giantess. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLCyLz7hBKtrJOuBoWMtUwsox2vJvm-1a8kcaNuT0u8ViA_nacJtYbH3f3cONXkSx0QiyRacaWDGzmLpH91UUrjUgi3QAyke7KHmmQXY2aPmtHFy3N2s3fLJ6FlnVNUqDbPKvYMwHHOdc/s1600/JennJohnson_LonelyGiant_Toss.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLCyLz7hBKtrJOuBoWMtUwsox2vJvm-1a8kcaNuT0u8ViA_nacJtYbH3f3cONXkSx0QiyRacaWDGzmLpH91UUrjUgi3QAyke7KHmmQXY2aPmtHFy3N2s3fLJ6FlnVNUqDbPKvYMwHHOdc/s400/JennJohnson_LonelyGiant_Toss.jpg" width="370" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
The giantess rejects the giant for being too small, and hurls him into the sea. </div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3nbVtriGzT1AssXdpof-txDqznVWJWrRh4q3cUcp42GeLrlrtuyc3l_Ez1E7jwS57y8HoProE_4ikqjbJHnt2ZT9hFkaf2RHe2N8erjysvx6Gahm2ilRYU1TmqC1i7a9QR0Z_mw51Fk/s1600/JennJohnson_LonelyGiant_Walk.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a>Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-68837115017461832602013-04-23T10:45:00.000-07:002015-01-18T12:22:17.350-08:00Bat-winged Sharks! Run!<div style="text-align: center;">
<embed align="center" allowscriptaccess="always" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://dl.dropboxusercontent.com/u/19048444/SWF%20Files%20for%20Blog/JennJohnson_Sharks.swf" type="application/x-shockwave-flash" width="550"></embed></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Cue "The Flight of the Valkyries."</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-52357652646248796812013-04-21T10:50:00.000-07:002013-12-14T10:51:38.405-08:00A Snail Riding a Flying Platypus<div style="text-align: center;">
<embed align="center" allowscriptaccess="always" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://dl.dropboxusercontent.com/u/19048444/SWF%20Files%20for%20Blog/JennJohnson_Platypus.swf" type="application/x-shockwave-flash" width="550"></embed></div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-72304607223672065622013-04-05T13:46:00.000-07:002013-04-11T13:53:09.985-07:00A Fistful of Duckies Brochure<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJZB7rwhKUGg03uJ_LdQvVkUsdPKnhTkDS1OSwucPsK35rTFMtTnOYZt_hPgYAeu76mji7nUrWVd2d5IswqUczFqR-HqxsP2SponP99dJROnJ-6bgrHgmryLhyphenhyphenJDFUCltx7qohMxqm0k/s1600/JennJohnson_FoD_BrochureOutside.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJZB7rwhKUGg03uJ_LdQvVkUsdPKnhTkDS1OSwucPsK35rTFMtTnOYZt_hPgYAeu76mji7nUrWVd2d5IswqUczFqR-HqxsP2SponP99dJROnJ-6bgrHgmryLhyphenhyphenJDFUCltx7qohMxqm0k/s400/JennJohnson_FoD_BrochureOutside.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Outside</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Doing some graphic design this week in preparation for DigiPen's Career Fair. Here's the team brochure for the game. A stack of our business cards will be paper-clipped inside over the whales. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWFcmrUi02zTimYuCKdBAVjXGPTWnEyY65NA8sbYEz8nbsnfQpbH9lV6ksMt5NO4XZULsRlFo4HUhx1inyjlYQ8DepPLgQ4-uGjx_zNVWMi4G2lrwVePKz9YzLlsZCSqLjcMc1ZUxYow/s1600/JennJohnson_FoD_BrochureInside.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWFcmrUi02zTimYuCKdBAVjXGPTWnEyY65NA8sbYEz8nbsnfQpbH9lV6ksMt5NO4XZULsRlFo4HUhx1inyjlYQ8DepPLgQ4-uGjx_zNVWMi4G2lrwVePKz9YzLlsZCSqLjcMc1ZUxYow/s400/JennJohnson_FoD_BrochureInside.jpg" width="400" /></a></div>
<div style="text-align: center;">
Inside </div>
<br />Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-51244987160371639352013-03-14T13:34:00.000-07:002015-02-07T15:15:41.103-08:00Graveyard Concept Art<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrt1PEcGqjYiLQ65vfwOihWfql9GSlu9b8w43Tu4Jz6bo7PE7GOpvNz7u-UAAg19sd6GdyGdi0KHmq_tcwY55oeywTxLrs8lCQpHmFiG-nAfn2lD8ETY3ECZBbsbEapJlvxE8EdchEdPM/s1600/JennJohnson_FoD_GraveyardStreets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrt1PEcGqjYiLQ65vfwOihWfql9GSlu9b8w43Tu4Jz6bo7PE7GOpvNz7u-UAAg19sd6GdyGdi0KHmq_tcwY55oeywTxLrs8lCQpHmFiG-nAfn2lD8ETY3ECZBbsbEapJlvxE8EdchEdPM/s640/JennJohnson_FoD_GraveyardStreets.png" height="350" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Concept art for the graveyard level of the Halloween theme. </div>
<div style="text-align: center;">
Franken-duckies & gravestones by Jon Gardner. Bats by Terrana Cliff. I did the rest of the painting and the final composition. </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0tag:blogger.com,1999:blog-378352469861568413.post-67991706696103754992013-03-12T11:06:00.000-07:002015-02-07T15:12:14.091-08:00The New and Improved Edge of the World!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYnxWc1jY-FiGjHQCW7dIETzLiU_A9kuCtDxaGhqY3cvM4CMr2yHsby98MQqeYsiE9dIkjeb92KnwT5zqAnEZV7Vcrc-cQdVRPjNmTEyVmRIXnXHU4ic-PtemfPy-omUbMUv1GOREzdE/s1600/JennJohnson_FoD_EdgeoftheWorld.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYnxWc1jY-FiGjHQCW7dIETzLiU_A9kuCtDxaGhqY3cvM4CMr2yHsby98MQqeYsiE9dIkjeb92KnwT5zqAnEZV7Vcrc-cQdVRPjNmTEyVmRIXnXHU4ic-PtemfPy-omUbMUv1GOREzdE/s640/JennJohnson_FoD_EdgeoftheWorld.png" height="350" width="640" /></a></div>
<br />
<div style="text-align: center;">
Update to the Edge of the World level: new colors for sky and masking flats help distinguish it from the previous pirate-themed level, and background clouds add depth and interest. Woo!</div>
Jenn Johnsonhttp://www.blogger.com/profile/03843179372157237166noreply@blogger.com0