2D Pre-production for Nerdgasm™

trythison

Newbie
Jul 2, 2017
20
88
Hey there, been lurking in these forums for a while. I thought it would be interesting to share my pre-production asset research with you.

Our team has decided to "adultify" one of our games for a hentai platform (man gotta eat). By default me being the art guy, i have been assigned to the porn art stuff

I m not sure i will be sharing finished frames or artwork here but cool WIP's and design slates. I always have had a penchant for cool 2D porn games and it's kinda exciting to start working on one. I m pretty green (as in, literally never done it) when it comes to hentai/porn art, so i m counting on your feedback. The quality of the pre-production pitch is gonna affect our budget pretty much directly as this hentai platform hands budget out for games on a case by case basis.

All my sketches are gonna be annotated with my production time, i guess it's a cool little snippet of info so you can get an idea of the time investment that goes into these things. Worth noting i m a slow drafter but pretty fast renderer (i m painter boi more than a sketcher boi).

Enjoy folks

design01.jpg design02.png nerd-vignettes-blowjob01.jpg rock-demo01.png
 

Saki_Sliz

Well-Known Member
May 3, 2018
1,403
1,011
Its super cool to have you give us a back stage preview! Thanks for that.
The art itself looks great, but I am more amazed by your production time!
I myself am still an early artist of only 5 years from first starting and only just this past week honed in on my preferred character design style that I can consistently create. I'm more line than paint myself, but even as I code up tools and tricks to help me speed things up I am still looking at 3 to 6 hours just do develope outlines or paint, your work and timeline looks light years ahead of mine. I'm still just getting excited about getting anything done in as little as 6 or 3 hours, I would be over the moon if phase of an image only took an hour or 2. I'd be excited to see this thread develop.
thanks again for sharing.
 

trythison

Newbie
Jul 2, 2017
20
88
Hey thanks for the kind words.

But yeah honestly the trick is to develop a good initial pose and just invest 10-15 minutes to do variations of it. It's the same for outfits, once you have the various "lines" (waistline, tights-line, bra-line, neck-line, etc ...) in your mind on a standard T-pose, developing outfits gets really fast.

Obviously the characters can't all pose exactly the same way in the retail release, here the focus was on design/outfits. The clock is gonna tick way waaaaaaaay slower once i m greenlit on design and i actually render different poses per character.

The blowjob scene is all smoke and mirrors really, it's one sketch declined to have a modicum of animation/storytelling.

If i were asked to develop multiple sketches like this a day, i wouldn't be able to do it.
 

Saki_Sliz

Well-Known Member
May 3, 2018
1,403
1,011
That's some great info, I keep them in mind. I'll look into the various "lines" since outfits tend to be the one thing I still pull out of think air. I hope things go well and you get the Ok! Yeah, you may be suprised by how supportive the nsfw community is, its just like regular human but nsfw stuff :p
 

trythison

Newbie
Jul 2, 2017
20
88
Ok life happened and we ended up making a Shmup (SFW obviously). The work now being done (and me suddenly having ALL of the free time) i m going back to this for fun. So last time i was designing some characters. Today let's design some BG's and structure the environment.

First thing first we need a house. Ok, don't start designing a house from scratch. Here's my recipe :

1) Reference

I went to google and searched for a mansion. Boom just need a facade

mansion_google.png

2) Layout

Now that you have a facade, it's way easier to get a good feel for the room layout. Next we are gonna take our facade and extrapolate a room layout from it.

house_layout_base.jpg

I use the ground floor to set up the first and second floor.

3) Cameras

I did a bakery and Landlady's house too (didn't use a reference image for those, don't need it). Now we know how the rooms connect and also what the gut of the house looks like. But the main use of this plan comes with this step : we are gonna place some cameras.

house_layout.jpg

A few pointers :

* You can (and should) vary the FOV (field of view) by widening or narrowing the cone of vision from the camera. For example use a narrow FOV for a corridor or if want a cramped view of a room. Use a wide FOV if you want to fit the most objects in frame. Try not to go overboard (above 90°) or your perspective will start to get really wonky.

* Vary the position of the camera relative to the room. Don't use flat angles constantly if you want to vary your BG's or setting, use flat angles if you want to be able to reuse the character sprites in every room/map (with a flat angle, the character will fit the perspective everytime)

* Trace a line splitting your FoV right down the middle, this will help with your BG sketch.

4) Perspective sketch

Ok this is the part where you are gonna need actual drawing skills. Use your favorite perspective ruler (or set up some guides). Then rotate your layout into place and minimize it on your work canvas. Use your middle FOV marker to get a good feel of what's left/right of you.

Now get working

persp01.png

A few pointers :

* "But how do i know what size an object is in perspective" : Use the walls, just follow your perspective guides around and connect them to get an accurate reading of size.

example (red line) : A good size for a single step is a bit less than a head height. I know my door is a good 9-10 head high. I follow the top of my door along the wall, i count 10 steps height and draw my staircase accordingly.

* "But how do i do inclined planes" : Do a right angle and connect the dots (purple line). It's that simple

* "But what about cur----" : Do the same but more and connect more dots

* "Where do i want to place my horizon line" : For a VN you probably want to place it at head level most of the times.

* "How much time should i invest in this ?" : Very little maybe 45 minutes top per sketch. Use your time for trying out different camera views instead of trying to polish one sketch. Just think about it, you need to do maybe two dozens BG's for your game you can't invest hours into this.

5) Do it [X number of times]

wireframe01_mainRepos.jpg

As stated in point 2 : try to vary your angles so the decor looks interesting and, most importantly, so the characters you are gonna put in it get interesting interaction possibilities.

example 1 : The bottom row is the 3 halls. (ground / 1st / 2nd floor). See the camera going from looking right to looking smack dab in the center to looking left. The halls are a bit similar so i use the camera angles to differentiate them.

Hall 1 and 2 have a flat angle to complement the characters sprites during normal conversations (you are bound to have in them since they are crossroad rooms).

Example 2 : The kitchen has a more cramped view so i can focus on character busts at the table. Useful because i want this room to nest conversations. Same reasoning with the focus on the sofa in the livingroom.

6) TBC

And there you go. Next up we finish the 6 next perspective sketches and prepare ourselves to integrate our sprites in.
 
Last edited:

trythison

Newbie
Jul 2, 2017
20
88
Ok after another day of work we now have a full roster of BG sketches :

wireframe_mainRepos.jpg

We are now gonna use our interior as a guide to draw our sprites.

7) Prepping the BG's for sprites

Let's take one of our BG roughs.

bakery_counter01.jpg

Lift a box roughly 7-8 heads high (i made it a bit shorter here because the character is gonna bend over the counter). Just keep using the perspective you have already laid down. It doesn't need to be precise or precisely placed, this is a rough guide that's gonna help you figuring out what you are looking up at or down at.

Here we see the head level is roughly halfway through the top box. Every ellipses lower are gonna bend down, the ellipses above are gonna bend up.

8) Use your boxes, sketch your sprites into position

bakery_counter02.jpg

As you can see, her waist, chest, arms, legs all flow with the perspective box. This is vital to get this right so your characters actually interact with the backgrounds (in this case the counter and the floor).

If you wanna simplify your work a bit :

* Use flatter angles so you don't need as much prepping to implement your characters in perspective
* In conjunction with that, place your characters close to the camera so they get cropped at their thighs
* Or use foreground decor to achieve the same result
* Make your characters face the camera

Next time we are continuing to populate the rooms with sprites. i'll talk a bit about organic story-telling, using the environment and rotations in perspective
 

trythison

Newbie
Jul 2, 2017
20
88
We now have a few sprites blocked in

sprites.jpg

With the environment prep work we did earlier, it's now easier to put our characters in context. If you have done some character design and writing earlier, it's now time to combine it with your BG's and get onto some story-telling. Just let it flow, think to yourself "what would X do ?" and sketch what comes to mind.

Also pay attention to how multiple sprites fit in the frame and try to create

  • Nerd girl is bored at work and has shitty posture, bending against the counter. She eats her weeb noodles with no regard for etiquette and she works on her cosplays. She chose the only room in the house with no windows.
  • Slutty mcslut doesn't mind crossing the hallway half naked, masturbates in the shower and flashes her undies while doing the dishes.
  • Chill girl takes care of the plant (placed almost TOO conveniently in front the camera) and lays down upside down in her bed broswing her phone.

It's super simple but even boring everyday tasks need to showcase your characters traits. It's part of what sells the fantasy.

Now let's take that last frame and expand on the story-telling

But first we need to add a little chaos in our, all too perfect orthonormal sketch. If you keep drawing everything in your frame using the same perspective grid, it's gonna end up looking way too artificial.

"Rotations in perspective ? You think i m a robot or something ?"

It's really not that hard. Case and point :
persp_rotation.jpg

Just move your two vanishing points the same distance left (to turn the object counter-clockwise) or right. Once again it's easier if you have a perspective ruler add-on in your software (i use Lazy Nezumi with Photoshop). Moving your vanishing points manually is gonna get painful after a while.

Also you can use the same reasoning to roll your object toward/away from the camera moving your vanishing points up or down.

home_nerdbedroom.jpg


I m expanding a bit on the decor here using that technique, turning the character away but also a variety of props (the chair, some boxes, the screen, some floor patches). We now have a room that reads quite okay with almost no investment in time.

9) Expanding on the story-telling

Using this medium, you have the capacity to combine writing with visuals to tell a story and convey character traits. Which is why i quite lament the fact people usually give BG's barely an afterthought when it's time to describe the girls you are gonna end up fucking. Writing just can't do all the lifting.

Summertime Saga is a game that does that really well, especially in few last updates. They went ham with the teacher rooms and it helps the fantasy a lot.

"But dude, you told me i can't invest hours into BG's. I won't be able to render a infinite amount of detail in the background for story-telling purpose"

Exactly, which is why you invest on a few striking elements and you let those few elements do the work. Don't invest a lot of time, invest smart.


home_nerdbedroom02.jpg


How about she got herself a huge convention type display and put it above her bed. How about a magical girl bed, a huge statue. You don't need a ton of details, with just these few elements we get the point : she is a massive degenerate. Just add a few anime posters on the walls (just paint a bit on top of them) and the room is complete.

Repeat for each character, then move onto communal rooms. Think of how each room fulfill it's function then focus on that :

  • How about a chore calendar in the kitchen, doubles as useful tip for players
  • How about the diningroom that nobody uses for eating gets used for studying by chill girl ?
  • How about scattering various devices on the livingroom couch for some interaction opportunities ?
  • How about customizing the doors in the hallways so you know at a glance which is whom ?
  • how about chill girl scattered some house plants around and you come across the girls taking care of them ? (flashing their asses)
  • And so on...
TBC

And next time we take a look at prepping a character layered object for dialog purpose. Poses, the do's and don'ts and a few tips on workflow when you need to export items in a Photoshop document.
 

trythison

Newbie
Jul 2, 2017
20
88
Back in the first post we had a design for the main girl. nerd.jpg

I did some refining on the anatomy, but now comes the real work on the character. So first thing first for you, start from a good sketch that represents your character well, do any touch up to the face/anatomy NOW.


1) A few pointers for a base pose.
  • Choose a 3/4 pose, even if the dialog with the player is done in first person
    • Just changing the eyes will allow you to make the character look at the camera or the person he/she is speaking to
    • It's more dynamic and allow for a better read on a variety of poses.
    • You get tits/butts in frame
    • The face is gonna be more interesting (obviously it's also harder to draw)
  • Even for a base neutral pose, try to get something that's unique for [x character].
    • example here : Nerd is shy and stressed, she looks stiff, hands closed.
  • Start with a nude. Sounds obvious but you want to have a "fresh canvas" to draw your clothes on.



2) Get started on drawing clothes

First think of your character in 3D. This is important because you want the clothes to fit.

See here i keep these ellipses in mind when fitting the clothes to the character
Then you get working on clothes and poses and faces.​
  • Keep details on legs and arms to a minimum. If you want to move those bits, it's gonna be a pain.
  • Pay attention to clothes thickness, use it to your advantage to conceal underwears
  • Don't try to fit the clothes to every pose, it's just not gonna work. Just draw the pose, worry about the fit later, work on base pose and fit everything for it first.
  • Focus on facial expressions, this is primordial, you are selling characters here. once again don't paste cookie cutter expressions for everyone and work some unique features.
  • You are probably gonna need 2 layers for the hair (above/below the other layers). Once again don't try to adapt the poses for your hair (or clothes).


Now you have a decent starting set of features for your character

chara_sheet.jpg

It's not great but it's enough to convey some dialog for a first release. Don't dwell on a single character or you gonna burn yourself out and won't be able to deliver on other characters. This type of work is pretty brain intensive, don't spend more than 4 hours doing that then move to something else.

"But dude you drew the legs all the way down, this is so much work for nothing, we crop the girl at the tights for scenes"

yes, it's more work. But i can do that :

bakery_front.jpg

3) exporting your 3 zillion assets without losing your mind

layers.png "Oh no this is gonna take ages"
Calm down, on Photoshop you have solutions, 2 in fact.

Solution 1) the shotgun approach

Go to layer / export / layer to files

Pick PNG, delete or hide any layer you don't want to export and let the software do it's thing. Pay attention to your resolution before exporting if you work in 2x or 4x scale while working on assets (which ... you should).

Keep in mind you need to name your layers correctly if you don't want to end up with a "layer46.png" file and needing to triage and rename everything. Also keep in mind you should probably not trim your PNG's as it will be way easier to place them in your game.

Solution 2) the one at a time approach.

Press alt-ctrl-z and bring that export window up. this is extremely practical as you get an immediate scaling tool (25% 50 % ect ...).

215e254f51ce61cadf732066e4f37cd3.png

Pro tip : You can isolate the one asset you want to export by alt-leftClicking the layer you want.

This export solution is really good when you just export as you go. (this is the one i use since i like to integrate my WIP assets immediately)


And there you go. Next time we take a look at some GUI.
 

trythison

Newbie
Jul 2, 2017
20
88
GUI, the noob perspective

The way i see it there are 3 main ways of doing GUI in a renpy game
  1. A UI Frame or completely separated interface (usually in a bar at the top)
  2. An integrated GUI : buttons floating on the game screen
  3. A fully diegetic interface : clicking the PC in your room brings the menu etc ...

Okey, GUI and interface stuff in general is kind of my weakspot when it comes to graphic work. So i m keep it simple, i m probably gonna say something stupid if i try to go expert mode. I took the most common route, a floating interface with buttons.

So here's how a GUI newbie did his interface :

1) Find a good mood piece or reference piece and build a color swatch

refMood.png
I want my game to have an arcade aesthetic so i took an arcade skin from RIOT. Take your time analyzing the piece and look at how this (godtier) artist did his color associations.

Like how he associates the greens with yellows and oranges colorPalette$.png
How he build a gradient from a blue to a bold red
Some desaturated reds for the shadows on white fabric.

Make a mental note of these things


2) Experiment with placement, shapes and textures

This is the part i m shit at so i m not gonna give you (erroneous) advices. Just basics and common sense.
  • Put emphasis on the most used buttons (IE: the map and time advance buttons).
  • Do the opposite for fringe menus (IE : game options, most people do it in the main menu anyway)
  • Design you buttons using shapes, not lines, the silhouette of the button must be readable
  • Don't use complex textures or stark contrast on buttons
  • Absolutely don't do it for text over background, use a legible (readable) font, preferably non-serif (the little bits on letters)
    • BUT get wild with title fonts or fonts that are meant for big text, you can afford too
  • Don't use cast shadows on your buttons and keep them really sharp
  • Keep the design unified, come back to your moodboard if you feel you are straying too far
    • But try to design a variety of shapes for different buttons, remember you need them to be readable
    • DO NOT make every button the same, even with different words in them
  • Integrate your interface as you create it. Play with it, get a good feel how responsive it is.
  • Put a goddamn sound cue on button presses, go to freesound.org and just look for click sounds.
choice.jpg

GUI_master.jpg


3) Use graphics when you can do it for cheap

dayTime_demo.png If you can design some simple elements to represent a state or a menu function : do it.

In general, looking at a visual cue will be easier on the eyes than reading a label, it also allows you to develop your visual identity further. Link your variable to little design changes, don't just print labels in the top bar and expect people to read.





BONUS POINT : if you find a cool way to animate your button on hover mode, for example the worldmap globe

mapAnim.png

Next time we take a look at a world map >>

What program are you using?
Photoshop
 

trythison

Newbie
Jul 2, 2017
20
88
Worldmap : the basics.

Ok you need a worldmap to jump around to various events. No shortcuts here, if you have customized your BG's you are gonna need to do a custom map too (or it's gonna look so wonky man).

worldMaproads.jpg
  • So first step open a document and just trace some roads on it (use the pen or geometric shapes). move stuff around, experiment with the placement. Think BIG - MEDIUM - SMALL : use contrast between different sizes to harmonize your picture, if every mass or shape is the same it's gonna look boring, cut some shapes in 2 or 3 (with roads).
  • Use some isometric ruler (isometric meaning you don't have perspective : simply use 3 grids crossing in a triangle pattern)




"But why isometric ?"

You are gonna need to place a number of icons representing buildings in 3D on this, you are probably gonna need to move them around and constantly refresh the same image every time you update your game, and you can't do that if you use actual perspective. It needs to be easy to edit and the isometric view will allow you to do that while keeping some cool 3D effect.

Also it opens some shortcuts.

Begin sketching your places using your isometric grid

landlord_front.jpg school_front.jpg home_front.jpg bakery_front.jpg






You have your places, just use your BG's as refs to sketch your icons on the map

worldMaprough.jpg
  • Try to rotate some buildings
  • Don't bother with flavor visuals for now
  • Don't go into details, those are meant to be small and will be displayed in a pretty busy bitmap.
  • Capture the essential design of the building you are sketching (from the BG you have already done)
    • The porchroof of the bakery
    • The metal beams and huge windows of the landlord house
    • The row of big windows of the unniversity
    • The big tree and distinct roof design of the house




Now it's polishing time
roughtoprodmap.jpg

  1. Block your shape by quickly filling your sketch with a neutral solid color.
  2. Use your polygonal lasso and block the big masses of light, shadow and color. Mind choosing 1 direction for the light side and keep at it for every asset. (Here i choose the right side plane as the lit side)
  3. Get into detail work, don't spend an eternity on this, you most likely have a ton of these to do. I gave myself one ( very lenient) hour per asset.
  4. Choose a suitable thickness and give your asset a good stroke ( ͡° ͜ʖ ͡°)
  5. Use a new layer in clipping mask and overlay mode and give it a dash of light for the "hover" (mouse on) status.
Also :
isometricrepeat.png

  • Keep in mind the fact you have no perspective allows you to place and duplicate elements at will. it's especially useful for buildings and urban design in general. The more elements you design, the more elements you are gonna be able to duplicate to create your picture.




And voila :
worldMap.jpg

  • Obviously right now it's kinda empty and samey. But this is something you need to work and re-work constantly so don't worry too much for a first release.
  • If you wanna make it pretty for it's first day anyway i would recommend working on the edge of the picture, create some treeline, cliffs, and so on to decorate your map.
  • Remember that the more elements you create, the more you can pepper them around. Case and point :
    • Those little tidbits took me like 1 minute to do and iso-element.jpg you can just sprinkle them everywhere. Just do that a few times and it's gonna add a ton of flavour.

And there ya go, a (halfdone) worldmap

Obviously, this one still needs another 4-5 hours of work to be in shape for a first release. But i wanted to move on.

Next time we do some scene setup and planning.
 
Last edited:

trythison

Newbie
Jul 2, 2017
20
88
It's scene setup time

This is it, the most important part of your game and also the most time consuming. Earlier you did some backgrounds, some sprites, utilitarian shit. Now you need to bring the big guns, your A-art-game. So how do we do this.

Use the content you have already done or whip out your main scenario now

Personally i'll just make it as i go, i have general guidelines for my characters and some, you might say, funny high-jinx planned.

As an example i'll use the bathroom corridor sprite i already have and use it to get a situation going.

home_hall3.jpg
  • I'll use the blonde girl in the back
  • I know her character is a playful slut type, she likes to tease
  • She's quite small in stature, i'll use this and exaggerate it to get a cool POV shot


First thing first, get a sketch going

jock01-scenesketch.png

  • This can be illustrate any state / moment in the timeline of the event. Just get a good feel for the placement of the body, camera view and so on.
  • Begin with a nude to avoid any headaches later, believe me.
  • You don't need to be clean, just be readable, you are gonna line and color this later anyway
    • I cleaned my sketches just for the sake of the demo
  • Don't bother with the background for now, these scenes are gonna be character driven
    • I know i said it's important to anchor the character in the world, but here you are basically zoomed in on the character action. They are all the context you need.
  • Use references, put them on your canvas (especially for hands, feet, tits, privates ... etc)


Now get the brain working and plan your scene ahead

scene-plan.png
  • Why not do that first ? It's a personal choice but it's easier for me to start from some form of illustration before planning variations. You can totally plan your scene before you sketch anything.
  • You want MILEAGE out of your art. This shit takes time, plan your scene in a way you can recycle the most amount of assets and poses.
  • Try to insert some branching if you feel you can pull it off. The most an event as different variations and outcomes, the most you can milk it.
  • You don't need to sketch and render everything you planned yet. The beauty of these type of games is that you have a gradual progression of the pervert stuff. Just keep some work and possibilities open in a scene for a 0.3 0.4 0.5 and later.
  • Keep your plan visible at all times so you don't get lost in needless busywork. Know where you are going.

Follow your plan, sketch your assets in

layers.png nerdScene01-assetspread.jpg
  • Sketch your assets on top of your initial sketch and fill them with a neutral color.
  • The more variations you draw, the more possibilities and combinations you have access to (example below). My best advice is follow the plan first then add some spicy details if you still have some time.

Very important : Stay disciplined with your layers and keep a clear naming convention. This will save you some work later on (especially when it comes to exporting the whole asset package). It also helps when you want to check some asset combinations fast.

nerd01-demo.jpg

And voila !

This usually doesn't look that clean and looks more like this (below). I usually also label my assets directly on the sketch itself so i know at a glance which asset i m working with.

Last thing : you can work in passes. first pass for a rough outline and get some detail work done on pass 2-3 etc ... I'd advice against that since you are gonna need to clean and render your draft anyway. I'd just focus on anatomy first and foremost.


nerdScene01.jpg

Next time we get some work done on a splash art / main menu background
 

Kinderalpha

Pleb
Donor
Dec 2, 2019
198
265
I'm definitely looking forward to your progress. Your art is amazing, and just how much effort you put into scenes and your backgrounds has me floored. Lot of fantastic points, and I'll be coming back to this for a reference.
 

trythison

Newbie
Jul 2, 2017
20
88
Uff busy week

Time for some splash art.
Your game art is possibly the first thing people are gonna see (or second if they come from your patreon) when they come into contact with your project. This is one of the first thing that is gonna decide if people want to give money or not. You need to put some thinking into this.


First thing first sketch your characters
The first thing you want to show off in a porn game : the characters.

And you are gonna do that using reference

ref.png When using reference DO NOT TRACE IT. This is not for some kind of nebulous "don't cheat" rule. This is because you have a set of attributes that need to correlate with your characters (ass big ? ass smol ? tits big ? tits smol ? heads big ? what face ?) and it's never gonna work if you copy women from all over the internet (and especially ones with non cartoon proportions).

IF YOU ARE GONNA TRACE ANYWAY do it smart : Choose 1 pornstar (or maybe 2-3 that share very close body type, faces, haircut, etc ...) and stick to it for each character. I believe this is how Evakiss does it.




A few pointers :
  • Try different angles and poses. Just use your posing references to get a really quick rough outline and play with them (move them around the canvas). Always think of triangles, and the rule of thirds.
  • Outline a "deadzone" in your composition for a title.
  • Overlap your characters and props, we don't need to see everything, have them interact a bit if you can.
    • Try to place them on different planes behind, above, below each other.
  • Seems obvious but show the main characters more and side character less.
  • Let the eventual (not really indispensable) background take a ... backseat. Characters first.
  • Sketch first, don't bother rendering this yet

Think of the composition
A common trope i see in title cards is the "every character aligned" composition like this :

bad-example.jpg

It's serviceable but personally i find it a bit boring. This makes for a good Patreon banner (since you are working with a very wide image, a banner *shock*). But when you are given a 16/9 or a 4/3 aspect ratio, take the opportunity and use it. try to follow some the advices above and deliver a good little illustration.

titleScreen.jpg

And here's the WIP result. I reserved some space in the middle for the title but i let my characters overlap it (and each other). The flow looks like a pyramid using the left 1/3 of the image, the most important characters are on the foreground on the left and the less important ones get smaller and smaller on the right.

I blocked a very basic background just to make sure my characters don't disappear in it. I kept the props and glitz to a minimum for now. Once again : Characters first. (and title second)

Next time is color time. Getting started with production.
 

trythison

Newbie
Jul 2, 2017
20
88
It's production time !
Hey there, for the sake of this demo i decided to refine another character. So i went back in there for a couple hour and redesigned the cheerleader a bit to make her conform to the sprites and scenes i have already outlined.

sketch.png

Here's the redesign.
I decided to give her an urban outfit and her cheerleader outfit (she wears at home, basically using it as pyjama/comfy clothes).
Also no bra since she has a small chest (and likes to wear clingy tops)


Outlines, edge control, the do's and don'ts
Worth noting this step and the next one can be switched. I know some people like to use a clean lineart for researching colors. But i really don't care, i just use my sketches and do it quick and dirty.

Time to clean your sketches and produce a decent lineart. jock-line.png
  • There are 2 approaches for a decent line-art :
    • going with a pressure sensitive pen and drawing lines with weight variation : It's potentially more expressive (like manga), It's less consistent, you can have some elements that don't translate correctly to the screen (too thin, too bold, too sharp, not sharp enough, too scirbbly .... etc)
    • sticking with 1 or maybe 2 line weight that are fixed : It's more consistent, all your assets share the same line thickness and so will appear to share the same space (or the same plane if you will). It's also easier to color in. It's less expressive and you'll need to rely on strong shape language and colors
  • You can alleviate some of the downsides of the former by giving it a second solid stroke but it can get technically tricky. Personally i went with 2 line-weights (12px and half), i use them essentially as outline and detail tools.
  • Keep in mind if you need draw multiple assets on your model and pay extra attention to connecting the line arts cleanly (while keeping them separate on different layers). You'll need good discipline to keep your layer organized (use folders, color codes, annotations)

Refining your color design
If you want to have some coherent design (and especially with a cast of varied characters). You'll need to iterate. Now don't worry, it can get really freaking fast.

jock-color.jpg
  • Take whatever you have as outline (clean/rough, whatever) and block masses of color using the lasso. Don't bother shading, or do it fast. Don't even bother putting your colors on different layers (one layer outline / one color layer below)
  • Just repeat your layers across the canvas
  • Magic wand the masses of color (it's gonna look bad up close, .... we don't care) and just iterate.
  • Here, my design is basically a Ghouls d and ghost easter egg, so i was stuck contrasting blues and reds (to keep in line with the color of the logo). But you can get wild. Don't let a cool color design pass because you didn't take the 30sec it took to take a quick look at it.
  • This took me less than an hour to set up and cycle through. It's potentially hours of work saved.

Coloring your assets, color theory
Cool cool you made a choice with your color scheme (or didn't which is fine too). It's now time to implement your design in your line-art, make it pop. The rest of this post is gonna be less workflow related and more raw technical art skill related. Let's go.

form.png First don't rely on airbrush and soft gradients (left example). You think you are making it more appealing but you are really "smudging away" the mistakes and reducing everything to mush. On faces it's especially dangerous.

FORM FIRST, FLAVOR LATER

First you define your forms and you add flavour (soft-gradients to break the forms, color variations, highlights etc ...)

"But dude, i m not that good with drawing, dude i can't detail abs or limbs right"
Don't bother with anything then. It's better to have a flat character (absolutely no shading) with appealing colors over a muddy, mushy, fuzzy shaded character. You'll save time and get a better product out.

Same reasoning with dark colors that lacks saturation (the amount of "color"). you think you are being subtle with your shadow but really you are rendering your character muddier (again example on the left). Saturate your shadows, especially on skin.

Using designs and stickers :

motief print demo.png
Be smart about it, design the logo on a flat plane and use your favorite transform tool to fit it in place. Again keep in mind you just designed some visual asset, you may want to keep using it. Again, you want mileage out of your art.

For example here, i could have this team logo on a flyer, advert or something.

jock-colordemo.jpg

Here's the result on my side with all the assets showcased.

And now a few pointers :
  • Keep the shadows as non-descriptive as possible, here my shadows basically point straight down which means i can use these assets in all conditions. Just imagine for second you give your character shadows pointing left or right ... What's gonna happen when you need to mirror it. Oops.
  • Color your line-art to add extra flavor for a very low investment in time. It's free cool-factor. Take a darker color related to the area it's lining. You can use darker, less saturated tones here as it will offer a good contrast to your coloring.
  • If you wanna go a bit more in depth with coloring you can : move around the color wheel for shadows/highlights.
    • Shadow are not only darker, they are generally bluer
    • Highlights are not only lighter, they are also redder
    • The area between shadow and non-shadow areas usually get a blast of saturation. Notice how i used slightly more saturated purple on the edges of shadows on the mushroom top (also it's mirrored ... oops :D).
  • Try to keep a consistent (or even low) contrast (difference between the lightest/darkest values). You want your character to appear like it belongs to a single plane. If you put insane contrast on your characters and want to use them in the background, they are gonna stick out like a sore thumb.
  • Keep your lines and colors separated, maybe you'll want to change some assets down the line (hair color, different clothes etc ...).
And voilà

Next time we take a look at background production.
 

Basilicata

Radioactive Member
Game Developer
Oct 24, 2017
1,384
3,323
Wow... You blow my mind... Congrats. I wish I could be so skilled. One question. How fast can you work? The problem with 2d art is that can be very slow in developing... Sometimes for 5minutes of gametime, the artist must work for a month or more...