header

Tom Clancy’s The Division: Augmented Reality Mockups (personal)

Weapon-lock Mockup Development Details.

Project Origins: I love Visceral Games’ Dead Space (2008). Under the direction of Lead UI Designer Dino Ignacio, it deployed a fully diegetic holographic UI that successfully integrates the player’s health, weapons and inventory with the game world. By all indications, Tom Clancy’s The Division is now striving to create a similarly seamless gameplay experience. This flavor of UI rollout significantly increases immersion, and I developed the following images to explore this style.

Developing the Mockup: In Ubisoft’s 2013 E3 gameplay trailer, the aerial vehicle seen above is one of the player character’s teammates. Here I chose to represent the vehicle as an enemy in order to explore a weapon-lock scenario: when an airborne enemy has the player character in their sights. I see it as a two-way exchange, in that having the aerial vehicle know your location would also allow your tech to better return fire. The circles near the muzzle of the player’s weapon indicates probabilities of success: in this case directed bullet fire ( a strait orange line ) has a lower chance of success then either a grenade cartridge, or a self-guided missile ( curved yellow lines ). The ring beneath the player character indicates the directional danger posed by the aerial vehicle, while the projected hologram of the plane shows weak-spots and relative health (the skull icon).

post_footerHolo-Screen Mockup Development Details

Characters in The Divison find themselves traversing post-epidemic New York City. I wanted to develop HUD elements depicting a transmission scan.

Click here for a breakdown of the transmission display.

The scan utility is in the upper-right, and includes megahertz range and signal strength. Graphs correspond to the various broadcasts themselves, with those in the visual spectrum (television signals) displayed counter-clockwise as follows:

124.3: A standard Color Bar Graph with ‘ Please Stand By ‘ added.

111.9: Static – transmission contains to data.

108.2: Live CDC Broadcast with HAZMAT-clad staffer. Blood flecks are visible near his mouth, and the news station’s team has chaotically typed out the bullet points on the left (they are self-referential, not consistently capitalized, and alarmist). The CDC press conference backdrop and the HAZMAT man were found on the web, then combined with the hope of creating an unsettling juxtaposition.

119.4: Map illustrating the number of virus infections per state. I like the idea of a television station throwing up a single static image (sans logo) as it’s staff abandon the facility. The state outlines were found on the web. Everything else was put together in Adobe Photoshop.

post_footerFloating Utility Mockup Development Details.

An alternative visual representation of the same type of transmission scanner seen above. Here I wanted to avoid the ‘monochromatic floating flat panel’ look that many in-game holograms employ, and so created disconnected 3D elements.

Click here for a breakdown of each element.

From Left to Right:

US Map: The United States is shown in the context of the Black Friday pandemic: communications with many states have dropped out entirely, while warmer areas continue to experience riots and looting.

New York State Slideout: New York State has been selected on the US Map, prompting an expanded view. A flowchart illustrates the primary data transmitters that still remain active (concentrated in New York City).

Hexagonal Beacon Manipulator: the purple hexagon is a means of ‘dialing in’ specific frequency ranges. Turning it’s central axis will choose the specific data points represented to the right.

Coordinate Wave-finder: A modified representation of sonar waves, the globe in the upper-right shows specific signals relative to the player character’s position. Flowing downward on-screen, the signal strength is then represented in waveform, before being assigned a specific data plate with corresponding manipulation-cube (lower right). The cubes themselves can be further manipulated for additional information.

post_footer

Quad Level 1 Progression: Zombies, RUN! Season 2 (Six to Start)

Click Here for Details on the Quad's Development

Project Origins: I was hired by London’s Six to Start in the spring of 2012 to assist company artist Estee Chan with developing Zombies, Run! Season 2‘s UI art. Over the next 10 months she and I collaborated via email and Skype as I worked from my home in Illinois. All told I was tasked with roughly 45% of the project’s map and level assets.

Quad Level 1 Development Details: Season 1 of Zombies, RUN! ended on a cliffhanger with the detonation of a bomb inside the protagonist’s home-base (spoiler!). Season 2 therefore began amidst the ruble at “Level 1”. Throughout the game, Level 2 assets showed signs of rebuilding, while Level 3 art was near-pristine, order having been fully restored.

Being the heart of the survivor’s base, the “Style 1” image above was the first asset I was asked to develop. As pre-production came to a close it was decided that the art style of Zombies, RUN! Season 2 needed to be more streamlined, which necessitated the new version (style 2).

post_footer

Armory Levels: Zombies, RUN! Season 2 (Six to Start)

Armory Level 1 Development Details.

Direction for Armory Level 1 mentioned that reconstruction had begun, but the survivors had accomplished little more then clearing some rubble and stabilizing what buildings they could salvage

post_footer

Armory Level 2 Development Details.

Progress continues as the players make ready their plans to expand upon the existing buildings. A slow color transition from brown (Level 1) to gray (Level 3) was uniform across most level assets.

post_footer

 Armory Level 3 Development Details.

Raising the buildings up a story for Level 3 was a decision made later in the game’s development cycle in order to better differentiate them from their Season 1 predecessors. I was initially worried that the firetruck was going to be rejected as ‘too cute’, but I received positive feedback on it.

post_footer

Amenities: Zombies, RUN! Season 2 (Six to Start)

Amenity Development Details

Amenities are add-ons that the player can earn or purchase to help increase moral in the settlement. After having spent several months on gray and brown level assets, I was thrilled to get to play with a little bit of color.

post_footer

Training Levels: Zombies, RUN! Season 2 (Six to Start)

post_footerpost_footer

post_footer

Wall Damage Progression: Zombies, RUN! Season 2 (Six to Start)

post_footer

Recreation Levels: Zombies, RUN! Season 2 (Six to Start)

post_footer

Defence Varients: Zombies, RUN! Season 2 (Six to Start)

 

post_footerpost_footer

post_footer

Red Faction: Guerrilla FPS UI Redesign (personal)

HUD Development Details

Project Origins: I recreated the HUD, logo and main menu for Volition’s Red Faction: Guerrilla as a design challenge. Having worked at Volition while RFG was still in development, I’m familiar with the team’s struggle to maintain a coherent first person viewpoint while knocking down large buildings (the eventual compromise being a switch to third-person perspective). While I enjoyed the resulting game, I’ve always been curious as to what it would have looked like had it retained it’s FPS heritage. The images and notes below detail my decision making and design process.

Developing the HUD: Immersion being the central goal of the FPS genre, I started the HUD design process by considering the equipment and environment that Alec Mason interacts with throughout Red Faction: Guerrilla. Unlike Bungie’s Halo series, the player character in RFG has no helmet in which a diegetic display could be projected. Alec does have an in-the-ear communication device, but there’s no indication in the narrative that it has holographic capabilities, or is tapped into his visual cortex.

Wanting to avoid crowding the screen with non-diagetic HUD elements, I constrained the UI’s real-estate as much as possible, choosing simple shapes and repeating 45° angles to communicate data critical to the player’s experience of the game world: direction, locational details of objectives and enemies, and weapon feedback. Here’s a breakdown of each:

On Weapon Display

As a player I want weapons with personality: their reaction to use should tell me about their purpose, and I should be rewarded when I’ve selected the right weapon for the right job. In the beginning I didn’t have a clear idea for how I wanted the weapon feedback elements to interact, so I developed mockups to explore color and shape combinations:

m.curtin_gun_mockups

The assault rifle is a blunt instrument, and is not designed for finesse or specialization (as the sniper rifle is). As a utilitarian tool, I wanted it’s display to reflect it’s purpose; stock parts, clear data, no frills. It’s also not a machine gun, and if used the wrong way (constant fire) then barrel-jam is an issue. I added a heat gauge, and made room for a 1 or 3 round burst indicator. Once I chose a design that fit the weapon, I started thinking about how the gun interface would interact with the rest of the HUD (below). A video detailing state-changes for the assault rifle can be found here.

Directional Compass

Given that RFG is an open-world game, I was more interested in giving the player a directional heading (compass) them providing them with a miniature portion of the full world-map (mini map). In my experience, mini maps have two utilities:

1) Mini Map as Navigational Tool:
Strictly used as a map, the mini map is not very useful to me. If I’m driving, a simple map showing the upcoming roads can be good, but the advent of GPS-style on-screen navigational queues have made that redundant. If you’re willing to project a map element onto the actual game world, it’s superfluous to also feature a tiny top-down map that does the exact same thing.

2) Mini Map as Spatial Notification System (Real Time Radar):
In addition to route and topographical data, the modern mini map is crowded with locational cues representing allies, enemies, weapons, stores / caches, locational objectives, ect. Within reason, this information can be very useful, but often this tiny portion of the screen pulls the player’s attention away from the game world. Particularly when driving, I’ve found myself navigating an entire city via the mini map as opposed to simply looking up and interacting with the environment – which means the ‘game’ I’m playing is actually only about 2 inches-square on screen.

In the case of Red Faction: Guerrilla ( as in most games ), I would prefer that UI directional queues point a player in the direction they need to go, and that game designers find creative ways to keep the player’s attention on the game world once the player arrives at their destination.

compass2

In the example above, the player is facing near-South towards their destination ( a triangle ). An ally resource ( a circle ) is to the right, while an enemy resource ( a stylized X ) is to the left.

Grenade and Ammo HUD

My first pass at the weapon HUD included weapon name, live ammo count, magazine count, and grenade count:

Once completed I determined that it was too dense relative to the rest of the UI – it particularly clashed with the Directional Compass. In simplifying the design I decided that since Alec Mason is not wearing a visible flak jacket, I should restrict the number of carriable items to 3 grenades and 4 ammo magazines. As seen below, I chose to graphically represent bullet, magazine and grenade data in order to more clearly communicate these limitations:

1) Grenade Count: I’ve differentiated anti-personnel explosives (grenades) from weapons that are more geared towards destroying buildings (remote charges). The circle is a simplified grenade silhouette.

2) Ammo Clip Count: The player character can carry 4 ammo mags per firearm. The example above is for the Assault Rifle, which carries 30 rounds per mag. When only 1 mag remains, that mag triangle would pulse on and off to remind the player to find some ammo. The wing on the right is a stylized arrow to subtly connect the ammo clip count with the ammo indicator.

3) Ammo Count: The bullets represented above tick down and are refilled as ammo is consumed and reloaded. I prefer audio indicators when bullets are low, (such as a pitch change when firing the weapon) as opposed to UI cues like blinking bullets or a color swap. Each weapon would have a different ammo representation, but all would fit into the horizontal bars seen above.

Weapon Reticle

Each weapon has it’s own reticle. For the assault rifle, I’ve simplified the leupold marmint reticle ( which has indicators for bullet range and drop ) into two simple triangles. Locationally I chose to orient the reticle in the center of the screen ( a’ la Valve’s Half Life ) as opposed to off-center ( as Bungie’s Halo does ). The reticle fades away when the player character is driving a vehicle, and changes color when pointing at enemies and allies.

Notes on the non-HUD elements (gun body and environment)

Red Faction: Guerrilla’s third-person perspective precluded me from using existing in-game screenshots for this project. Instead I used early promo-images of RFG’s martian landscape. I borrowed a gun from Unknown Worlds Entertainment’s Natural Selection – primarily because it had space on the gun stock for me to add my own ammo counter, and because it was high-res enough for my purposes. The nighttime image seen below was a daylight shot color-tinted blue.

Weapon Select Development Details

Weapon Breakdown:

TOP = Remote Charge: I developed this silhouette based on promotional renders of the weapon. I changed the detonator to a simple thumb trigger (more on this decision detailed in the Red Faction: Guerrilla logo redesign entry below), but retained the in-game design of the remote charge itself.

LEFT = Assault Rifle: I pieced together this silhouette from several different guns featured in different games, and did so in order to match the weapon that appears in the first person view above.

RIGHT = Sledgehammer: Throughout the project I chose to limit the importance and visibility of the sledgehammer, favoring instead the Remote Charge as the symbol and primary weapon of the Second Martian Revolution. That said, I do feel it’s important to include in the game, particularly when needing to expose load-bearing beams on buildings slated for destruction.

BOTTOM = EDF Rail Driver: Based on Volition’s concept art for the weapon.

Overall I chose to keep the weapon select screen as simple and strait-forward as possible. The game-world fades, and all other HUD elements are switched off while the weapon-select screen is active. Weapon-ammo is only detailed when a weapon is selected. The center selection ‘arrow’ does not spin freely (no 360° of movement), but rather turns 90° to face the quarter of the screen the player has selected:

Radio Transmission Development Details

I tried several different iterations of the incoming radio transmission element, using character profile-silhouettes, audio waves instead of bars, and attempts to incorporate the direction of the transmission based on the compass heading. All had some merit, but I chose the arrangement above for it’s simplicity and utility. The character photo is static, though interference would disturb the photo image when Alex Mason is out of range (in the Badlands for instance). The audio bars move relative to the incoming transmission, with the main bars pushing the smaller blocks from left to right. They smaller blocks would then slowly slide back to the left until they were once again pushed rightward. Color choices and the angles used were made to correspond with the rest of the UI.

Life Bar and and Damage Indicator Development Details

Life Bar: I really liked the fact that RFG hid the life bar when it wasn’t changing (when you’re either being hurt or ‘healing’). I stuck with this minimalist option, but chose to further shrink it down. Life drains from right to left, and pulses on and off when Alec’s health is below 20%.

Taking Damage: Meta representations of directional damage (like blood splatters) have been heavily featured in FPS games for the last 8 years or so. More literal alternatives include rendering veins on the edges of the screen to reinforce that you’re looking through the player character’s eyes. This idea of further linking the UI to the character’s physical being is appealing to me, but I haven’t always liked how it’s executed (too literal, too cartoony, or just too red). To avoid these pitfalls, the first path I followed was a doubling of vision to indicate trauma to the eye itself, which I quickly ruled out as too obstructive to gameplay.

The second attempt (above) is less literal and more representational: I considered the eye’s place in the skull, and depicted the immediate geography of bone in which eyes are encased (taking care to leave the center of the screen free of obstruction).  When shot or hit, waves of this ghostlike image will flash across the screen, it’s coloring dynamically sampled from the present on-screen palette. The idea being that instead of simply seeing red to indicate damage, your vision itself (through the physical shape of the eye) is being altered. If the screen is bright yellow, you’ll see a flash of dark orange or red. If the screen is dark blue, you’ll see a flash of light blue or purple, ect. Directional damage works the same way:

post_footer

Red Faction: Guerrilla Main Menu Redesign (personal)

Main Menu Development Details

Menu Logo: Overlayed on the curve of the planet, the Red Faction logo’s color has been changed to resemble the surface of the sun. This was done to make it stand out, as well as allude to the conflict of the Second Martian Revolution.

Menu Options: I considered using frames or even tabs to arrange the menu options, but chose a basic text-wall for player expediency. Please note that this menu assumes that a single-player game has already been saved. Overall I made several changes to the menu choices:

1) Load Game is now the default (top) option. I prefer this arrangement as it gets the player back to their game faster.

2) The original Red Faction menu had 8 choices. I removed System Link, Downloadable Content, and Wrecking Crew. They are now nested beneath the new Extras heading.

3) I changed XBOX Live to Multiplayer for clarities sake: I feel it’s more specific.

Background: RFG’s character-silhouette background was at times very busy. I like the idea of starting each gameplay session with a simple image of mars because it’s a clear reminder of the gameplay goals: to wrestle control of the planet away from the EDF. The image of mars itself is courtesy of NASA. The colors and tone were changed to make it more easily identifiable as mars. If animated the planet would slowly turn clockwise.

post_footer

Red Faction: Guerrilla Logo Redesign (personal)

Promotional Poster Development Details

The Poster Design: A spin on the Cold War’s anti-communist slogan “Better Dead than Red”, the miners of the First Martian Revolution used the transposed ‘Better Red than Dead’ as a rallying cry. When the Red Faction re-emerged to engage the EDF authorities in the Second Martian Revolution, I like to think the colonists whispered the phrase to spread word of the rebellion. Both the colors, the text, and the imagery pay homage to the Russian Constructivism movement of the early 20th century.

Swapping the Sledgehammer for the Remote Charge: While Red Faction: Guerrilla featured the sledgehammer as both it’s primary melee weapon and symbol of the revolution, I felt the switch to First Person Perspective required a reconsidering of it’s place in the game world. As an FPS I think RFG would focus more on either breaking or shooting into buildings, setting remote charges at key locations, then escaping with your life prior to detonation. Being a mine engineer, abundant access to and knowledge of explosives should be Alec Mason’s primary skill, not his ability to swing a hammer.

I chose to simplify the design of the handheld detonator to make it seem universal in the hand of the player-character: anyone can pick this symbol up and ‘hit the button’ to enact change.

Second Martian Revolution Symbol Development Details

The images on the left are a stripped-down version of the fully rendered image above. I prefer the image in the lower-left, as it’s red background invokes the planet Mars more clearly. The more detailed version on the right is a mid-step between the simple logo and the detailed one above.

post_footer

Red Faction: Guerrilla Logo Development Details

Main Title: The upper portion of the logo (Red Faction) is Adobe’s Gothic Std font with angular embellishments. I started the design process by reviewing promotional materials for the original Red Faction (2001), and chose to recreate it’s gradual curving line (assumably a nod to the surface of Mars). I also chose to keep it horizontally tight in order to better enclose the Gorilla subtitle.

Subtitle: Since much of the game is focused on wrestling territory away from the EFG, I developed a faint grid-like pattern (nodding to topographical maps) to hang behind the Guerrilla subtitle.  The 45 degree angle of both the grid and the font itself is repeated throughout the HUD. The Guerrilla font is an original one based on the grid, and similar to the posters above invokes a Cyrillic-style popular in Russian print-media.

Detailed Logo: For the more detailed logo (top) I chose to add sparks to indicate conflict (and explosions!) and a color-shift to represent the land of Mars and the space above it.

post_footer

Futurist Walkup Pharmacy Interface (personal)

Interface Development Details.

Project Origins: I developed the screen above as part of a future-tech pharmacy design

Developing the Interface: The structure needed a central welcome screen for clients to interact with. Syd Mead’s concept art for Blade Runner had a big influence in both the color and tone of the design.

post_footer

Interface Screens: Adventures in Space (CITES / UIUC)

Inventory Screen Development Details

Project Origins: Adventures in Space: Incident at Long Rock Junction is a training game I developed for UIUC’s central IT organization (CITES). The story centered around a rookie agent visiting far-flung and forgotten locals in an attempt to close ‘cold-case’ distress calls.

Developing the Inventory Screen: This inventory interface is for a device that the protagonist carries with him on his journey. His forlorn task does not earn him the best equipment, and this screen is meant to reflect that.The ID’s photograph (sans hair and mustache) was found on the web. Everything else was put together with Adobe Photoshop.

post_footer

Welcome Screen Development Details

This is the welcome splash-screen for the series of games mentioned above. From here players proceeded to their virtual mail-inbox, which contained messages detailing new missions. Hosted on the web, the site used animated gifs to better illustrate that the ‘check space-mail’ and accompanying logo were buggy-holograms. As such, the interlacing effect you see on the image above is intentional.

post_footer

Gameplay Interface Development Details

This is the primary gameplay screen. The elevator button on the left brought you to image below, which acted as the navigation map for the game. The walki-talki in the lower-left could be clicked at any time to receive a useful quip from your ‘boss’ at the Space Exploration Agency. Settings, inventory, email (in-game) and ‘Contact HQ’ (real-world email to the game developers) can be found on the right. The white icon in the upper-left took you to the game’s splash screen (above).

post_footer

Elevator Interface Development Details

Most of the narrative took place in an abandoned outpost far beneath the surface of a grimy snow-covered planet. The 9 different levels were only accessible via an elevator, and players used the image above to bounce between floors. As a UI element, the elevator is a diagetic extension of the authority held by the game’s pompous administrative official, and so I chose an overbearingly serifed title font (Castellar) that contrasts with the glum reality the elevator conveys players to. Similarly, I picked brightly saturated colors to better highlight the drab environment of the game.

post_footer


This biohazard symbol appeared as part of the game’s final challenge. Equipped with limited resources, I took full advantage of Adobe Photoshop’s timeline utility whenever an animation or transition was required. To see the symbol in action click here.

post_footer

Cheap Interface Screen Development Details

I wanted a cheap looking, somewhat idiot-proof communication device that the protagonist’s employers issued to the lowest wage-earners in the organization. It’s basically an old toy, and therefore I chose an over-saturated burnt umbra tone to invoke plastic junk from the 1970’s, and a weathered, buggy screen with a retro logo.

post_footer

Door Challenge Screens: Adventures in Space (CITES / UIUC)

Administrative Office Door Development Details

Origins: These were developed for a series of open-the-door challenges in an adventure game for UIUC’s CITES Organization.

Administrative Offices: Being considerably more grandiose then the rest, the curly details at the top fully differentiate this room from the game’s other facilities (you ‘beat’ the game by collecting information present here). The door went through several iterations before landing on the final design. A few jumps in the process can be viewed here.

post_footer

Communication Door Development Details

Inspired by the classic RKO Radio symbol. Balancing the light and the dark here was challenging, but I love the outcome. An earlier iteration of the door opening can be seen here.

post_footer

Greenhouse Door Development Details

By far my favorite, if only for the huge circular windows obscured by plants and grime that flank the door. It’s perhaps most obvious here that 2K’s Bioshock had a big influence on this project.

post_footer

Phone Interface Evolution: Phone Adventures (Unicycle Mobile)

Phone Mockup Development Details

Project Origins: Between 2009 and 2012 I acted as visual lead for a 3-man startup called Unicycle Mobile, our focus being adventure games for iOS. I collaborated via email and Skype with an engineer in Canada and a designer in Austin to develop the project’s visual language and features. The following images chart the evolution of the project’s primary interface: a mock phone that the player-character uses to interact with the game world and other characters. Phone Adventures remains unpublished.

Phone Mockup Details:  Skeuomorphic design’s popularity was beginning to fade in 2009, and the ‘flat’ styled image on the right (above) garnered enough interest that an animation illustrating how the elements would interact was requested (it can be viewed here).

post_footerApplication Access Mockup Development Details

We settled on a more flat design, but abandoned the multi-colored scheme above for something simpler. Here I was instructed to experiment with different activation methods for the phones home-screen. Represented above are differing options for making a call, opening email, viewing maps, and accessing settings.

post_footer

Phone Color Mockup Development Details

Once a common style was established we felt comfortable picking which color palette to go with. As the phone screen was one of the more colorful I chose it to experiment with.

post_footer

Phone Final Design Development Details

Eventually we settled on a pale orange (almost a peach) and muddy blue color scheme. As far as combinations go, they’re complementary, and extremely common for things like movie posters. Since the ‘header’ fonts (date / time / active app name) are displayed larger I chose Agency FB, while the smaller fonts are the easier-to-read Ariel or Helvetica.

post_footer

World Map: Phone Adventures (Unicycle Mobile)

World Map Development Details

Completed map for Bicycle Mobile’s Phone Adventures, an urban narrative experienced through a mock phone interface. Various locations were unlocked as the story progressed, allowing the player to visit the interiors of each building featured on the map. An example of the in-game view of the map can be found above.

Visually we were seeking to strike a balance between a flat ‘Google Maps’ look and a fully rendered ‘pop-out’ game map. Colors were selected to correspond with the rest of the UI palette.

post_footer

Logo (Stories and Beer Reading Series)

Stories and Beer Logo Development Details

A take on the old ‘Book It!’ buttons, this logo was commissioned by a local reading series group that typically meets in bars. The original logo really jammed the words in there, so I tried to strike a balance between keeping consistent with the logo’s inspiration, and with it looking properly balanced. The text used is Berlin Sans FB Demi.

To my knowledge the group has never printed this logo on actual buttons, or handed out gold stars, which is disappointing.

post_footer

Sketch Blog Promotional Poster (personal)

Sketch Blog Promo Poster Development Details

A for-fun promotional experiment for my sketch blog. Helvetica font throughout. The shape in the lower left is a stylized pen-nib. All art completed in Adobe Photoshop.

post_footer

Show Posters: Monolith (personal)

post_footer

Gallery Show Poster Development Details

Posters for my 2011 solo show.  The top two predominantly use the Century Gothic font, while the bottom use Helvetica varieties. Dropping the baseline for the ‘Water Between Continents’ text into the bottom image’s boarder was a subtle allusion to the band’s name.

post_footer

Website Graphic (http://asdsexed.org/)

Commissioned by a graduate student at UIUC, the logo to the left was developed for a human sexuality education website. As a multi-use image, my only constraint was that it be circular.

In the end I put a great deal of time into the bee rendering so that it could be used as an independent graphic if the client so chose. I would have preferred to go more realistic with the bee’s wings, but adding transparency was complicating their intersection with the boarder. Instead of shrinking the bee, or losing the boarder, I chose to represent the wings as opaque.

post_footer

Pygmalion Music Festival Stage Graphic (Common Loon)

Stage Graphic Development Details

The image above was commissioned  by the band Common Loon to coincide with the release of a singe inspired by veteran character-actor Harry Dean Stanton. They requested his face and a book with a duck on the front, then added that the book should probably open (below). People’s eyes tend to gravitate towards a face, so to give the book equal significance in the image I painted the light on Harry Dean’s face as if it were bouncing off the books’ open pages:

The images were used both on the band’s website and as a stage graphic for live performances. The book itself opens with a simple swap-fade. Put together in Adobe Photoshop, the portrait was built using numerous reference photos of Harry Dean throughout his career, and the bird bones within the open book were sourced directly from the web.

post_footer

Album Cover Workflow and Evolution (Common Loon)

Roughs - Round 1 Development Details

I was commissioned to develop album art for a band called Common Loon. The reference art they provided all contained either line drawings with minimal line variance or fully rendered textural work, and featured color washes. They added that something dark and bleak might be appropriate. Based on that I made the 6 thumbnail sketches above with graphite and Adobe Photoshop.

post_footer

Roughs - Round 2 Development Details

The feedback from the band was positive, and I was encouraged to further explore the ‘broken triangle’ concept. Using pen and ink I developed the 15 sketches above, adding color and type in Adobe Photoshop. Here I was playing with the spectrum of representation; a flat, iconic triangle on one end, and a figurative pyramid structure on the other.

post_footer

Roughs - Round 3 Development Details

In reply the band reported that they preferred something simpler and more iconic. They provided the top image (source art) and requested a more polished version. In images 1 – 10 I took the initial disintegration concept and attributed different physical characteristics to both the triangle and the source of it’s destruction:

  1. Powder blown by wind
  2. Powder disturbed by wind + directed sound wave
  3. Powder disturbed by wind +  heavy / generalized vibrations
  4. Sand washed away by liquid
  5. Solid structure gutted by flames / explosions from within
  6. Solid structure smoldering and on fire
  7. Solid structure smoldering
  8. Solid structure burning / rocked by explosion
  9. Stick pyre (stylized) billowing smoke
  10. Teepee gutted by fire

The 10th image is the wild-card, and was thrown in to illustrate that an entirely different direction could be taken.

post_footer

Event Invitation Map (personal)

Invitation Map Development Details

My wife and I’s wedding reception took place in the middle of nowhere, so I took the opportunity to develop a very specific set of directions (the address has been omitted). Using images from the Web and Google Maps as a reference, I put everything together in Adobe Photoshop.

post_footer

Training Posters (CITES / UIUC)

Training Poster Development Details

Developed for the CITES Help Desk at the University of Illinois at Urbana / Champaign, these posters were designed to encourage the student employees to follow a newly developed guidebook. They were put together in Adobe Photoshop.

post_footer

Promotional Material: Adventures in Space (CITES / UIUC)

post_footer

Adventures in Space Promo Development Details

In the weeks leading up to the release of Adventures In Space Episode 2: Incident at Long Rock Junction (a training game developed for the CITES organization at UIUC), promotional materials were hung in the building, documents were left in an office fax machine (like this, and this), and images like the ones above were emailed to players from characters within the game itself.