• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.

[Other Tutorial] Mini Gamemaking Tutorial Series: Designing and Animating Portraits

AenaonDusky

DeliveryBoy
  • 317
    Posts
    6
    Years
    • Seen today
    Many games use what is known as character portraits, or mugshots. Mostly utilized in VNs and other less cringey less visual-based genres, like RPGs, they often add to the expressiveness necessary for dialogue impact, cutscene presentation, and most importantly, character portrayal.

    However, due to the nature of visual art in conjunction with writing, character portraits can easily HINDER player experience, if done incorrectly.

    This mainly happens in two ways: 1) it removes player character imagination from the equation (since the player now has a visual representation of the character in action) and 2) as it follows from 1), the art has to be at least BASELINE GOOD to nail down the artistic intention behind a character's presentation.


    So, here's the methodology for people who aren't artsy, and/or don't have the time necessary to learn how to do this via conventional means.

    =============================================================================

    STEP 0: The basic, technical stuff pertaining to Essentials

    For the sake of a unified structure, we will be using 80x80 portraits. You can use anything you like, but using a template like this will help keep stuff standardized.

    There are many pixel-friendly programms out there, including Photoshop, Gimp, Asesprite, GraphicsGale. We will be using GraphicsGale, since it's free and simple, but there's definitely a way to do this in Gimp, which is also free.

    =============================================================================

    STEP 1: Understanding proportions

    Body and Neck should be taking up at least half, or slightly less of the overall portrait's size. Head should be taking up half or slightly more.

    Here's how to set up a proportion template:

    Template Base (draw a circle and follow up with a side of the chin and neck)

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    Template Sectioning

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    Now that we have our template, let's go over this step by step!


    1. Start filling your basic shape with color, and forming the (admittedly really simplistic) hair. Make small adjustments (eg smaller chin, some minor adjustments to the character's left cheek (our right). This depends on how you want to draw your character!

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    2. Draw the basic eye shapes, which should be around this size for your average character

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    3. HERE IS THE PART MOST PEOPLE FIND HARD! THE FRIGGIN' EYE DETAILS!

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    Fret not, though, for we can use another standardized way! Starting from left to right, this is how you should try building your eyes:

    W (eye white) B (basic eye color) C (Checkerboard w half Basic half White) and B (basic color)

    When you have the eye template down like that, it's easier to mess around with the shading and brightness. Don't worry if you can't get it exactly right at first - just try not to deviate from the WBCB pattern at first.


    4. Now onto some more details, first we copy paste our left (his right) eye to his left (our right). Then we adjust it a bit to go a bit "lower", and make it smaller than the one closer to the camera. (our left)

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    If you look closely though, you might notice that I've provided 2 examples of eye presentation. Characters with more "piercing" eyes, or with a pose that wants to emphasize something, can benefit from the straight line - template, while characters with other charactertistics, or characters whose pose demands it, will most likely benefit from the uneven template.


    5. Now we can add some nice details to make the eyes pop out a bit, and also give the man some brows.

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    6. Now, you might have noticed three horizontal red lines protruding from a bigger vertical line. Those indicate the distances between mouth and nose, and nose and eyes.

    Let's call them enlarged (1), slightly enlarged (2) and equal (3). Choice depends on the character as well, but you should generally use the "equal" as a template.

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    And we can now put a couple of pixels here and there to draw the nose and the mouth. Nothing spectacular.


    7. Next we do some overall shading (nothing shady though, heh hah huh...uh...)

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    There are many shading tutorials out there that can teach you how to handle shading, although I'll do my best to briefly touch on that later.

    8. And now, onto the lower part of the portrait part. Part. Rule of thumb:
    HEAD WIDTH = RIGHT SHOULDER WIDTH + LEFT SHOULDER WIDTH.

    In other words, LEFT + RIGHT shoulder width, = head width.

    In even more words if you didn't catch my drift that I failed math back in middle school,
    "cephalic breadth = biacromial breadth / 2".

    Bear in mind that one shoulder should generaly look smaller than the other, guess which one? The one FURTHER away from the camera.

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    9. Actually drawing the epic math and sectioning the lower part to have a good understanding of where goes what:

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    10. Dressing our man cause it's getting cold (just pretend it's December), and coloring the aforementioned sections

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    11. Puttin' the shades on (yes I hate these puns more than you do)

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    12. And here is the end result after refining his clothes a bit!

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    And this is how the cool kids do it. But if you AREN'T a cool kid...well...then....I've got great news for you.

    ~ Lazyman's Approach ~

    For the time-deprived, or the, um, more "work-averse", here's the quick method:

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    In detail:

    1. a. Ready your character art. Or if you are using publicly available artwork...
    1. b. ...go, check out Nephae's publicly available pixelated portraits based on official franchise art (give credit if you use 'em, you scoundrel). Or the great mugshots/ vs portraits the franchise is known for.
    2. Either start off with those as a base or
    3. Resize official art yourself
    4. Mix and Match to suit your intended portrayals (see STEP 2), and character presentation
    5. Modify heavily
    6. Refine and cleanup


    A few words about "tracing":
    As with everything in life, many beginners learn by mimicking existing art (just listen to the original mario bros OST, and the commercial tracks at the time...and you'll realize what "early work" really means). If you want to level up your art skills seriously, you need to leave tracing behind after your first few steps. However if you are a programmer or designer etc, and you only need to have some sort of consistency and a baseline in your portraits, then lazybro tracing is probably what you'd do.


    PROTIP: Avoid conventional manga styles. Not only are they exceedingly endogamic (meaning, it's an artstyle that only mixes with itself, and rarely takes on external influences, which results in ..... a very peculiar presentation of human anatomy that goes beyond what's considered cross-culturally as an average human being). Yes I'm talking about x10 times larger eyes than any other feature, extremely huge foreheads, ultra thin necks, and an inexistent chin and nose. You know it. It's awful. No this is not a value judgement. This is fact. Ok?

    =============================================================================

    STEP 2: Understanding intention, and artistic portrayal

    Before you start making your character or mix'n matchin', you have to think:

    1.What's the archetypical characteristics?
    2.What physical features will express certain traits better?
    3.How should the "camera" portray the character?

    Three examples of the above, from TFJ:

    1.TALL, STRONG, STRAIGHTFORWARD
    2.SIMPLE, ALOOF, SOCIAL
    3.RESERVED, BEAUTIFUL, SMART



    Can you figure out how these characteristics are being portrayed? Let's see

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits

    John takes up almost the entire portrait (TALL), has broad and well-built shoulders (STRONG) and he is facing the camera (STRAIGHTFORWARD). His expression also speaks of these traits.

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits

    Athena wears simple clothes (SIMPLE), her eyes give her a bored look (ALOOF) and has almost no shadows in her face (her face looks very bright) (SOCIAL)

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits

    Agatha is slightly tilting her head down and half her face is covered by shadow, with a reserved expression (RESERVED), is wearing earrings and looks slightly to the side (BEAUTIFUL) and her "aware" expression, combined with a slight frown give off the impression that she is smart (SMART).

    Can you imagine all the possibilities??????

    PROTIP: You have to maintain consistency in the above characteristics throughout, even in overexaggerated expressions.

    =============================================================================


    STEP 3: Pixel work and shadows

    This is the most difficult part, really. This assumes that you have some familiarization with pixel art, but even if you don't, you can compare your art with good art that's already there (in this case, VS portraits).

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits

    Petrel here has his forehead covered in shadow, since he is a kinda shady guy, and has also tilted his head down quite a bit.

    Notice that on his right (our left) cheek, some of the outline pixels are of brown, and not black, color. This is in order to give the illusion of a non-blocky continuation of his head's outline.

    On his left (our right) cheek, there is a bit of onioning, but slightly enough to give better shading to that part of his face. As you can see, some pixels are lighter throughout the outline. Look at other Vs portraits too and you'll notice it.

    Let's see another example of bad shading turned a bit better:

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits

    Agatha's shadow here looks like bad onioning

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits

    But suddenly its much more realistic. CONFUSED.JPG

    See how it works?
    Shadows have to fall realistically depending on the light source, surface reflection, and pose. You can always check the official vs portraits which have always had awesome pixel art and see for yourself whether your art is following the same principles!


    =============================================================================


    STEP 4: Quick animation without knowing the principles (please check out basic animating tutorials for that, as something like that is beyond the scope of this one)


    For simplicity's sake, and in order to keep things standardized, we will be using 12 frames in Graphics Gale, for ALL portraits.

    Remember, limitations work in favor of the artist, and fewer frames = MORE SKILL AND BETTER ANIMS BRUH! :brofist:


    1. Adding new frames

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    Click on the three dots, and use the following settings:

    The Details

    Frames: 12
    Transparent Color (select your background color EITHER 255 255 255 WHITE, -255 -255 -255 BLACK, or like SMOOTH BRIGHT GREEN OR PINK. That's cause you need to set your non BG whites and blacks to less than 254 and more than -254 respectively)
    Delay: 1/60th for Videogame
    Frame setting (8ms)
    Disposal: Fill with Background color


    2. Hit the little arrow icon next to the dotted icon

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    3. Select "duplicate into right"


    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    4. Duplicate 11 times, so you end up with 12 frames

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    5. The funni part

    So now, we've got 12 frames. Great, when do we animate?

    Simple, we only need 2 frames for the eyes!

    A blink-start
    and a blink-end frame!

    You put these in frame 11 and 12 respectively.

    Frame 11

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    frame 12

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits



    As you can see, we are only using one frame for when the blink starts, and one for when it ends. The inbetween is left to the poor inbetweeners imagination!

    Understanding eye blink:

    The only thing you really need to do here is to draw the eye SLGHTLY blinking on frame 11 and the eye completely shut on frame 12. The line where it needs to be drawn shut is at the very end of the overal eye's lower part.


    Mouth talking animation frame template:

    Continuous
    1 IDLE, 2 MOUTH OPEN WIDE, 3 MOUTH OPEN SMALL, 4 IDLE, 5 MOUTH OPEN WIDE, 6 MOUTH OPEN SMALL, 7 IDLE, 8 MOUTH OPEN WIDE, 9 OPEN SMALL, 10 IDLE, 11, MOUTH OPEN WIDE + BLINK START, 12 MOUTH OPEN SMALL + BLINK END

    Varied
    1 IDLE, 2 MOUTH OPEN WIDE, 3 MOUTH OPEN SMALL, 4 IDLE, 5 MOUTH OPEN WIDE, 6 MOUTH OPEN SMALL, 7 IDLE, 8 MOUTH OPEN WIDE, 9 OPEN SMALL, 10 IDLE, 11, MOUTH OPEN WIDE/SMALL + BLINK START, 12 IDLE + BLINK END



    Expressions:
    Now this is one of the hardest parts. You need to remember AT LEAST these 2 THINGS:

    1) EXAGGERATION
    2) DIFFERENTIATION FROM OTHER EXPRESSIONS

    So that this expression, not only is exaggerated, but...

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    ...differs from this one

    Mini Gamemaking Tutorial Series: Designing and Animating Portraits


    PROTIP: Larger and more detailed mouths require more work.


    And that's it! I hope these tips will help you get started with drawing and animating portraits! For the Essentials way, you simply have to resize the gifs, using nearest neighbor (or https://ezgif.com/resize, with the settings 160 x 160, GIFSICLE (which would be nearest neigbour in photoshop and the like, or "pixel perfect") and CENTER AND CROP FIT.

    Don't be afraid to get your art out there, but never EVER shy away from feedback either, else you will never really progress.
    Thank you for your time!

    ====================================================================================================
     
    Last edited:

    AenaonDusky

    DeliveryBoy
  • 317
    Posts
    6
    Years
    • Seen today
    Updated the Tutorial with a step by step guy, uh I mean, guide, for the non-lazy folks (that'd definitely be me) so you can see how we get to draw a portrait from the very beginning,
     

    AenaonDusky

    DeliveryBoy
  • 317
    Posts
    6
    Years
    • Seen today
    Fantastic tutorial! As a programmer who knows nothing about art this was really fun to read.

    I can't believe I saw the reply this late... thank you, still!
    If anyone has any suggestions on how to improve this further, please tell me!
     
    Back
    Top