Sketches and Exhibitions

  • Mermaid Encounter

    what? where'd the comic go?

    Here it is the full comic as one image! thanks for coming along the mermay journey with us!

  • Seeing a new Perspective

    IGCOM_FeaturedImage

    One of my favorite sketch projects over on Instagram is a series I call “Forced Perspective Comics” (@Joshings if you’re curious)

    BartMonsterThese vary in complexity from simple multipart comic stories

    BettyAtStuff

    Series dedicated to a single character

    CommuterMonster

    or one off images created in a moment of inspiration.

     This series was inspired by films like “Who Framed Roger Rabbit” and “Cool World” and specifically by the work of Marty Cooper aka Hombre_McSteez

    Making these images takes a few relatively easy steps.

     

    1  –  Location Location Location

    1-location

    find a spot that inspires you to draw. Is there something entertaining that could be happening here?

    2  –  Give yourself a little guidance

    2---perspectiveguides

    Do a quick guide sketch of the space where you character will stand/sit etc. Try to be accurate, but don’t sweat it too much

    3  –  Sketch the character

    3---Sketch

    use your guide sketch to check proportions, and hold the drawing up to eyeball how its fitting into the shot

    4  –  Put finishing touches on the drawing, and cut/rip it out

    4---Lines

    this is much easier when you have scissors. I try to hide my hand, so I tend to use artfully cropped characters or word balloons against a border edge as an extended tab to grab on to

    5  –  Take some pictures, choose the best one

    4---ShootPictures

    4-5---ShootPictures

    it can be tricky to get the perfect shot. Wind Blows, people walk into your frame, you misalign the elements. Try moving your body forward if your character is too large and your arm is extended as far as it will go. If the character is too small and everything feels too blurry try taking a step back.

    6  –  Filter!

    5---FILTER

    Instagram’s built in filters give your food paintings that je ne sais quoi of analog flaws. It doesn’t really help us improve our drawings at all, but we can piggy back on the results. These look filters have a unifying effect on the over all color scheme, so black and white cartoon characters start to feel like they’re in the same lighting space as the actual photographed world. Its a subtle effect sometimes, but can help a lot. I spend a lot of time choosing the filter that creates the most harmonious relationship between background and foreground.

    7  –  Crop

    6---Crop

    Crop out your hand and try to get the feet to sit nicely on the ground. It is often at this step that I find I need to make small adjustments to my drawing and re-shoot the photo

    8  –  Adjustments

    7---Adjustments 8---Adjustments_2 9---Vignette

    Add any adjustments that help cement the relationship. This could mean nothing or fiddling with every slider in the app. I do tend to use the vignette pretty consistently at this stage.

    9  –  Tilt Shift <- very important

    10---Titl-Shift

    Tilt shift is a photographic technique that makes objects look tiny by simulating an extremely narrow depth of field. It does this by blurring large sections of the image. You can accomplish this in the analog with extremely expensive lenses, painstaking hours in the dark room, or digitally using 3 clicks in instagram. We don’t use the filter to make things look small, we are trying to fight one of the biggest give aways that our character is not in the real world. The iphone (or android) camera adjusts its aperture automatically responding to the amount of light in the area. This can make it extremely difficult to control the depth of field. Ideally you would use a very high f.stop, aka tiny aperture and a lot of light so your little piece of paper and background would both be in crisp focus. Since this doesn’t usually happen I push for more blurriness selectively applied to help glue the images together. If you use the radial tilt shift filter you can keep the face/focal point of your drawing in focus and blur the contact point in a way that matches the blur of the background photo.

    Final!

    11---Final

  • ButtonNode with enable

    This is a follow-up to my previous ButtonNode post.  In this update I will be adding additional functionality to the button to allow the button to be enabled and disabled.

    For this new functionality I want the ButtonNode to be able to do the following:

    • Maintain a boolean value indicating the current state of the button
    • Prevent the button from being clicked when it is disabled
    • Update the look of the button so that it appears to be disabled
    • Allow the button to toggled between the enabled and disabled state

    To start we will simply add a new public property that represents the enable state of the button

    @property (assign, nonatomic) BOOL enable;

    Defining this property will automatically synthesize the getter and setter methods. But, since we want to change how the button looks and behaves when it is disabled we need to be able to execute code whenever the buttons’s enable property is set. The simplest way to do this is to create our own setter method which will be used instead of the auto-synthised setter.

    // Setter for the enable property. Update the button based on the new state
    – (void)setEnable:(BOOL)enable {

    if (enable) {

    self.userInteractionEnabled = YES;
    self.alpha = 1.0;

    } else {

    self.userInteractionEnabled = NO;
    self.alpha = 0.5;

    }
    _enable = enable;

    }

    In the setter method, when the button is being disabled, we set the userInteractionEnabled to NO and apply an alpha of 0.5 to dim the button. When the button is enable we simply reset the alpha to 1 and re-enable user interaction. Finally we update the underlying _enabled variable to track the state of the button.

    The ButtonNode sample app, available on our github (ButtonNode) page, has been updated with this new functionality.

    You can find me on twitter @mellowcoder

  • 2015 Holiday Game Jam

    What better gift can one receive than the experience and exhaustion that comes from a Game Jam. As if the holidays weren’t stressful enough with family, old friends, traditions, travel, of of course that last min party preparation. With less than 3 days to jam out a game before christmas eve, despite the warm weather in the northeast, we had a snow covered mountain to climb. We elected to use Unreal Engine 4, not because we were familiar but instead the opposite. Our goal was to gain as much knowledge as quickly as possible while still producing “a game”(using a loose definition).

    Our goal: make a top down constant scrolling shooter e.g. Capcom’s “1942” and sequel “1943:Battle of Midway” targeted for portrait mode on mobile devices. At the end of the first day we laid out an outline; in retrospect our goals were pretty ambitions for 2 unreal 4 noobies.

    First focusing on the good, I’m going to list some of the things we managed to achieve. In game flat textured models for both the hero ship and enemy towers. Projectiles that fire from the enemy towers. A scrolling level that constantly deletes passed sections while adding new sections.

    We also had player death on collision with obstacles or projectiles, adding in explosions and sound effects using unreal mobile starter content. In addition the starter content also provided us with an obstacle mesh, as a rock, and textures for the environment.

    In conclusion there was a lot more we wanted to accomplish; player shooting, life gauge, collectables, points, more animation, HUD with points, and some menus. It was a fun challenge to see what we could make with an unfamiliar tool. It was a success to help us learn Unreal Engine 4 and the Blueprint visual scripting language.

  • How do you figure episode 3: Using Line of Action to identify Exaggeration Opportunities

    Today we’re building off of the concepts in a previous How do You Figure episode (see here) and will talk about using line of action to exaggerate our poses.

    I’m working off of a stock photo from Marcus J Ranum, a photographer who provides amazing resources for artists mostly for free, check out his deviantart for great stock photos.

    This character is swinging his axe, moving from left to right, I’m going to attempt to enhance the feeling of power in the axe swing.

    Line of action

    I’ll start by identifying the primary line of action, a curved line that shows the tension of the spine and the direction of the force. In my study drawing we can exaggerate the feeling of these forces by leaning the line further to the right and bending the line in the torso further

    LineofAction_2

    LineofAction_3

    I find it helpful to think of the other limbs as having their own lines of action, often providing counter motion to the primary line of action.

    LineofAction_4

    The exaggeration opportunity here is often in the squash and stretch, and their relationships with the primary line of action. Adjusting slightly to avoid right angles can make the pose feel more organic.

    From there the study is finished off using a few layers of sketching

    LineofAction_5

    block in

    LineofAction_6

    clean line

    LineofAction_7

    tones/painting.

    each of these other steps have their own shortcuts to get to a finished state more efficiently, but that’s for another blog post.

  • Turkey Day

    Dr.Cortex has a special guest on for Thanksgiving.

     

     

    Dr.C_001_TurkeyDay

  • The Three Little Pigs: Font Dev and Style

    Context is everything, the two comic book fonts I created looked nice in my last post, but they weren’t in word balloons or on a comic book page.  So I dropped them into a page I made to get accustomed to my Cintiq Companion 2, as well as exploring the overall look and style I wanted to achieve.  Already I can see some adjustments need to be made to the fonts, especially for low resolution situations.

    style and font

     

    Got any critiques or suggestions, let me know in the comments below.

  • An Isometric Point of View

    6d89bcd782b67e3646835d5fb4bc23As I’ve been thinking about future game possibilities for our company, I’ve become enamored with the isometric point of view. This is when basically you design the point of view of your game from a top down angle where the grid for your ground plane forms parallel lines.

    You see this point of view in the smallest independent games all the way up through major platform releases like the Diablo series from Blizzard.

    As I’m working on the concepts for games, I’m also performing a series of exercises to get my self thinking from this point of view.
    IsometricSketching

    Everything from doing throw away thumb nail and silhouette sketches to trying to design how architecture can be rendered so it feels dynamic but doesn’t block your point of view.
    Here is a look at one of the exercises I’m working on. Staring with a concept sketch.

    MercyConcept
    After developing the character in a hero pose, if I was developing this character fully there would be a break down of different angles and behaviors, clothing, equipment and variations. But in this exercise I’m predominately concerned with developing an idle pose that works on an isometric grid. Because I’ve made it a flying character that pose can be fairly dynamic with the wings flapping to keep them in the air.

    mercy

    I’ve also started trying to figure out the detail I can put into the character with out slowing down my animation process or letting the character get so busy that it’s hard to read from far away. In this case, the sketches I’ve started I are too detailed for the end goal. While I like the design, given our workflow, it takes too much time to draw, and the features need to be simplified.

    mercyAnimation

    As I’m working of this point of view and the challenges and opportunities it presents, I start thinking about some of the art I’ve already done. I wonder for instance how difficult it would be to take a concept like this and translate it into a playable isometric scene.

    DugTooDeepGood

    Over all it’s an extremely interesting way to be thinking about game design and I know I’m just scratching the surface of possibilities.

  • The Three Little Pigs: exercise in font creation

    As part of an upcoming project, a graphic novel loosely based on the Three Little Pigs, I’ve been developing several fonts.  The two fonts I’ve completed so far are comic book speech bubble fonts.  As an exercise and to try out my new fonts I’ve rewritten the original Three Little Pigs fairy tale using my pig and wolf speech fonts for their respective parts in the story.

    Three Little Pigs

     

    When creating these fonts I began with research, I found the advice in The DC Comics Guide To Coloring and Lettering Comics by Mark Chiarello and Todd Klein to be very useful.  Even though I’ve made a computer font, I wanted the font to have a hand lettered feel.  To this end I created a single case font where the upper and lower case versions would be slight variations of the same glyph. I also sought the advice of my friends and designers who had more experience creating fonts than myself. They directed me to create several design goals, the look and feel, that I wanted the font to convey.  The pig’s Font I wanted to be structured and grounded, to reflect the buildings they make and their stern vows.  The wolf’s font I wanted to be sharp and fierce, to reflect the killer instinct and sinister intent.

     

  • How Do You Figure: Episode 2, building shortcuts

    #timelapse #figure #drawing at the Jean Henry School of Art hosted by @mikeritch

    A video posted by @joshings on

    Figure drawing for illustration can be broken up into roughly 3 basic topics. Structure, Line and form. All three are intertwined, but each can be practiced independently. Today we’ll talk about the first two topics. In all of these things, generally you can start with a circle.

    1a_circle

    Professional artists can be deceptive in their work. When Eric Goldberg seems to wave his pencil like a magic wand and reveals perfectly placed lines almost every time, it can feel like that’s the way to start drawing characters. But the secret is that under the disturbingly perfect lines is a measured structural drawing he’s already worked out in his head. Goldberg has such a refined sense of proportion and motor control that he can jump straight to the lockdown line, especially on a character he’s spend multiple years drawing animation drawings of. But when he teaches you how to draw in his book Character Animation Crash Course! he starts with a circle

    1b_eric-g-42-sizing-web
    Seriously, just go buy the book, its amazing.

    1c_AndrewLoomis1

    1d_AndrewLoomis5

    Andrew Loomis gives a solid formula for constructing a generic white guy human head in his series of illustration books including Figure Drawing for All its Worth, and Drawing the Head and Hands. It should come as no surprise that he starts with a circle. The next 2 lines unlock the secret though. The center line of the face, and the brow line. These two lines provide the structure that you can build the rest of the face and head on and the head is the best way to measure out the rest of the body easily.

    The shortcut to drawing freehand is to be able to visualize the underlying structure before you put pen to paper. The downside is there is no shortcut to internalizing that structure, you have to practice. So draw people, but only draw the construction lines, circle, center, brow. Draw from life, draw from movies, draw from the mirror, get the proportions into your hands and head till it takes no effort.
    1e_Practice
    movie credits: Her, Hunger Games, Django Unchained

    And note, drawing final lines freehand shouldn’t even be your goal necessarily. Its a fun party trick, it can come in handy if you’re doing reportage, but many artists continue creating construction drawings before locking down the final line through their entire career. Case in point: Glen Keane, who seems to carve the shape from the paper, stroke by stroke, laying down construction lines whenever necessary before locking down.

Leave a Reply

Your email address will not be published. Required fields are marked *