Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Lessons from Tana

Tana

Member

Hmm... it appears that I don't have a backup of the animation tutorial... I may try contacting the owner of the server that was on, and see what's up.
I've checked google, but it doesn't appear they have the page cached.... nor did I back it up on geocities...
If anyone saved it, please lemme know.

This took 56 minutes to do, I time compressed it to half, and split it into three segments for your viewing pleasure.here's a gift for you all. Well those who want to know exactly how I work.

http://i19.photobucket.com/albums/b171/ ... Design.png[/img]

I made a pirate chick sprite based on the drawing by Naramura. It took 56 minutes for this single frame. I recorded the whole thing for you.

I've sped up and split the video up into three parts and uploaded them to Youtube.

As you can see, I'm using Photoshop 9. I've set up a few keyboard shortcuts for things such as Flip Horizontal, and Flip Vertical, as well as I know the keyboard shortcuts to bring up the tools and adjustments I use.

I have a TabletPC that basically means I can draw directly on the screen, but that just allows for a faster working time than working by mouse.

Part 1
Part 2
Part 3
Another video for everyone. This one has the creation of a Behemoth from Scratch. Again the video is sped up, and I zoomed in for clarity.
http://www.alisachristopher.us/pixels/p ... hemoth.gif[/img]

http://www.youtube.com/watch?v=nR958d3appQ
http://www.youtube.com/watch?v=MirPJg73EJI
http://www.youtube.com/watch?v=Vko0wThSCqU


And no, the Behemoth wont be Public Release.

NEXT: ??
 

Tana

Member

LESSON 1: Color Theory and Vocabulary
This lesson is derived mostly from the Color and Design class I took in college, where we had to learn color theory for the purpose of illustration. We had to work with a paint medium, but I've gone ahead and reproduced most of the visuals in digital form. Understanding these principles has helped me in chosing color palettes for sprites.

Value:
Value has to do with a percentage of darkness, easily illustrated by a grayscale from white to black, and a 50% gray in the middle. This does not actually describe the color, just how bright it is if we converted an image to grayscale.
http://www.alisachristopher.us/rmxp/lessons/value.png[/IMG]

Tints and Shades:
A tint is a color mixed with white, and a shade is a color mixed with black. This is the most common way of increasing and decreasing the value of a color. We don't want to rely entirely on this method, as you'll loose vibrancy and colors tend to look flat.
http://www.alisachristopher.us/rmxp/lessons/shades.png[/IMG]

Saturation:
This describes how vibrant and pure the color is. if an color is desaturated it is completely gray.
http://www.alisachristopher.us/rmxp/les ... ration.png[/IMG]Hue:
This is actually what color is being used from the color wheel without factoring in Value, or Saturation.

Complimentary Colors:
If we look at the color wheel, its made up of 6 basic colors, the three Primaries (Red, Yellow and Blue) and the Three Secondaries (Orange, Green and Violet). The colors directly oppisite of each other on the color wheel are called Complements.
http://www.alisachristopher.us/rmxp/lessons/wheel.png[/IMG]
note: color wheels often include a third set of colors known as Tertiaries, that are created by mixing two neighboring colors together, such as red-orange and blue-green.

Muting:
When you mix a color with its compliment, it because a sort of brownish-gray color. This is called muting a color. This can also be used as a way of increasing or decreasing a value, as well as a method of desaturating a color without completely loosing saturation.
http://www.alisachristopher.us/rmxp/les ... iments.png[/IMG]

Temperature:
Usually defined by how much orange(warm) or blue(cool) a color has. Warm Colors are usually Red, Orange and Yellow, where the Cool Colors are usually Green, Blue and Violet. However we can a Cold Red and a Warm Blue.
http://www.alisachristopher.us/rmxp/les ... rature.png[/IMG]

Light and Shadow Temperature:
This is a concept that I'll take a few steps to show: that the shadow color will always ben the compliment of the light color. If a light is cool(such as a flourescent light) then it will cast a warm shadow; and if a light is warm(such as fire) it will cast a cool shadow.

Some examples of how this would effect neutral gray under cool and warm lighting:
Warm Light/Cool Shadow:
http://www.alisachristopher.us/rmxp/les ... mlight.png[/IMG]
Cool Light/Warm Shadow:
http://www.alisachristopher.us/rmxp/les ... llight.png[/IMG]
These produce much richer colors than the simple grayscale we saw for value.

And how these can affect an actual color:
http://www.alisachristopher.us/rmxp/les ... lights.png[/IMG]
Both of these examples are much richer than had we just used simple tints and shades of the blue.

Some Helpful Tools in your Graphics Program:

Hue/Saturation:
Useful for changing the Value and Saturation for a color, as well as making complete hue shifts such as turning a red into a blue. (In Graphics Gale this is just Adjust Colors)

Color Balance:
This is probably the most helpful adjustment in generating colors. You can quickly warm, cool or mute a color, and by using the highlight, midtone and shadow ranges you can warm the highlights, mute the midtones and cool the shadows all in one step. (In Graphics Gale this is just Adjust Colors)

Tool Opacity:
Most graphics programs allow you to lower the opacity of your paintbucket or pencil, so if you have a basecolor and a shadow or highlight, you can use varying opacity of your tool to have the program quickly generate the shades inbetween, rather than trying to eyeball it with the color sliders. (Graphics Gale does not have this but it can be accomplished by using layers with different opacity)
 

Tana

Member

LESSON 2: Generating a Color Palette
I'm going to assume that you've already read lesson 1 at this point, if not, go back and read it.

The methods I'll describe here are pertaining to Photoshop, but other programs such as Gimp and PaintShopPro are similar. Graphics Gale is a little different, but the same ideas can be applied.

The first step in generating a palette is of course, picking a base color. For our purposes I'll demonstrate starting with a light color, a dark color, and a midtone.

Light Colors:
You'll probably want to start with a light color when trying to shade white or pale colors, so for our purposes I'm starting with white.
One key point about spriting is that you never want to use pure white, nor pure black. Using the color sliders you can drop the blue and green values slighty to warm up the white. After painting or filling a large area with the warm white, the next step is to get a shadow color.
Now why bother with trying to eyeball the color sliders? Instead make a selection based on the white. If you don't have a large enough area to see your colors through the marching ants, you can hit ctrl H to hide them. Then we'll go to Image>Adjustments>Hue/Saturation or hit ctrl U.
http://www.alisachristopher.us/rmxp/lessons/hue-sat.png[/IMG]
The reason why we'll use the Hue/Sat instead of Brightness/Contrast is that when we drop or raise the value of a color, we tend to loose saturation, and Hue/Sat allows us to compensate for this.
You'll want to move the dialog box around so that you can see the image, and make sure the box for "preview" is checked. So we'll drop the lightness slider, and raise the saturation slider. You'll want to make sure to do enough of a change to provide some real contrast since we're determining our darkest value.

After that's applied we'll want to cool the shadow down (remember, warmlight/coolshadow) so go to Image>Adjustments>Color Balance or hit ctrl B.
http://www.alisachristopher.us/rmxp/lessons/bal.png[/IMG]
Make sure we've got "preserve luminosity" checked and the dot is selected for midtone. Usually you'll move the first slider to the left towards cyan, and the third slider to the right towards blue. For this I also moved the middle slider to the left towards magenta.

Now we've got a highlight and a shadow color:
http://www.alisachristopher.us/rmxp/lessons/white1.png[/IMG]

Here's the part where graphics programs help to take the guess work out of the middle colors by using opacity as a way of quick generating colors. (in graphics gale you'll have to create layers and use their opacity to accomplish this, unless someone who uses the program can prove me wrong.)

So we'll select some of the highlight color now, and choose the paintbucket tool (G) and alt click to sample the shadow color. Then set the tool opacity to 50% (you can hit 5 on the numpad) and fill the selection giving us a color that's exactly between the highlight and shadow.
http://www.alisachristopher.us/rmxp/lessons/white2.png[/IMG]
We can make smaller selections and repeat to generate the other values. In this case rather than using halfs, I used thirds (33% and 66%, yay for math).
http://www.alisachristopher.us/rmxp/lessons/white3.png[/IMG]

Looks pretty good, but what if I want a cooler white? No problem, that's when we go back to Color Balance and cool the whole thing down. You'll probably want keep the highlights still a little warm by pushing the bottom slider towards yellow, but midtone and shadow you can push towards blue and cyan. and as an extra step, probaly go back to hue sat and drop the saturation a little bit (not all the way we still want some color)
http://www.alisachristopher.us/rmxp/lessons/white5.png[/IMG]

Dark Colors:
This is going to be basically the same as the lights, except in reverse. We'll start with a dark color (remember never use pure black) and make a selection, then using Hue/Sat and Color Balance, we'll brighten and warm for our highlight.
http://www.alisachristopher.us/rmxp/lessons/black1.png[/IMG]
Then using the same trick with the opacity of the paintbucket generate the extra tones inbetween.
http://www.alisachristopher.us/rmxp/lessons/black2.png[/IMG]
And incase we need a warmer black, go back to Color Balance and push the midtones and shadows towards red, and the highlights towards yellow.
http://www.alisachristopher.us/rmxp/lessons/black4.png[/IMG]

Midtones:
Basically the same process as before, except we'll have to use Hue/Sat and Color Balance to generate both a highlight and a shadow. So for the highlights, raise the lightness and push the color balance towards yellow; for the shadows drop the lightness and push the color towards blue/cyan.
http://www.alisachristopher.us/rmxp/lessons/beige1.png[/IMG]
And a little more work with the paintbucket we can create the other values.
http://www.alisachristopher.us/rmxp/lessons/beige2.png[/IMG]

Putting it all together:
Now swatches are all fine and good, but it takes actual application to the sprite to determine if we've got the right colors. If you work in layers, or use the magic wand (remember to set anti-aliasing off and tolerance to 0), you can always adjust the colors once they're on the sprite.

By putting colors together on a sprite, it lets us see how the colors affect one another. For example, here's a sprite with a darker skintone with a cool black and a warm black for hair color.
http://www.alisachristopher.us/rmxp/les ... lette1.png[/IMG]http://www.alisachristopher.us/rmxp/lessons/palette2.png[/IMG]

In this case I decided I wanted the warm black for the hair since I will also include reds in the sprite.
And in honor of Pirates 2 coming out tomorrow:
http://www.alisachristopher.us/rmxp/les ... lette3.png[/IMG]yarr! (admitedly not one of my better sprites, but he gets the point across)
http://www.alisachristopher.us/rmxp/les ... lette4.png[/IMG]
The white of his shirt started out as the warm white from ealier in the lesson, but because of the other colors around it, the shadows had to be punched to create more contrast. This was done easily by going to image>adjustments>levels or ctrl L, then moving the midtone triangle towards the right to darken the shadows and midtones.

I greatly encourage you to look at other sprites and sample their colors/palettes, and to share palettes with each other. You can also sample colors from refrence pictures and art.
 

Tana

Member

LESSON 3a: Hair
The first step in spriting hair, is having an idea and usually some refrence to what style of hair you want to do. I recommend using anime as refrence when you're first starting out, because Animators have the KISS rule: "Keep it Simple Stupid" because things must be done quickly, and keeping thing simple is the best way of doing this.

I also recommend that you try drawing it first, rather than jumping right into the spriting. (yes, even if you aren't the best drawer, it'll help) When children first attempt to draw hair, it's just a bunch of scribbles. Then as they mature they try to draw each individual strand of the hair. This will work against you, both in hand drawing and in spriting.

Instead we want to practice grouping of the strands. What this means, is instead of drawing each strand one at a time, we divide the hair into larger, more managable shapes. Besides grouping, you'll also want to pay attention to the direction that the hair goes in as it moves away from the head, and where the hair originates from.
I found a quick tutorial on anime style hair at Deviant Art: http://www.deviantart.com/view/18786922/

Getting down to the Spriting:
I recommend using a program that allows you to use layers, such as Gimp, Photoshop or Graphics Gale so that you can do the hair on its own layer and not worry about damaging what's underneath. (this is true of spriting in general)

You'll probably want to have a general palette in mind when you get started, but remember that we can always recolor it later.
You'll want to block out the general shape of the hair:
http://www.alisachristopher.us/rmxp/lessons/hair01.gif[/IMG]
Keeping in mind that with most sprites we have a slightly top down view, so the hairline is going to be realtively closer to the eyes than we would have in a straight down view. It's also important that while we may sprite zoomed in, you'll want to constantly check what it looks like at 100%, since this is how large we're actually going to be viewing the sprite in-game.

Then we'll use a midtone color to block out the groupings. Remember that the goal is to express the shape without too much detail.
http://www.alisachristopher.us/rmxp/lessons/hair02.gif[/IMG] http://www.alisachristopher.us/rmxp/lessons/hair09.gif[/IMG]
There's not a whole lot different depending on the template we're using, just that larger templates have more area for detail.

Now, at this point there's a common mistake that after we have the hair grouped, we can shade each group individually. We do NOT want to do this. The results would turn out poor:
http://www.alisachristopher.us/rmxp/lessons/hair05.gif[/IMG] http://www.alisachristopher.us/rmxp/lessons/hair10.gif[/IMG]
This is NOT how we want to shade the hair.

Despite the fact that we've blocked out the hair into smaller shapes, we're still going to shade it as one shape.
At this point I usually blockout the highlight. now as far as placing the highlight goes, there's a very simple rule that we can remember. Highlight travels in a circle around the head, as if one were wearing a headband or a too-snug halo:
http://www.alisachristopher.us/rmxp/lessons/hair03.gif[/IMG]

Using that as a guide, we can roughout the placement of the highlights. In the case of spikey or curly hair, we will probably also have highlights that deviate from that Halo highlight, but that basic shape is what we're going for.
http://www.alisachristopher.us/rmxp/lessons/hair04.gif[/IMG] http://www.alisachristopher.us/rmxp/lessons/hair11.gif[/IMG]

Then we'll block out the shape of the shadow, again, remember that the hair is one solid shape, not individual shapes.
http://www.alisachristopher.us/rmxp/lessons/hair12.gif[/IMG]

After that its a matter of filling in the rest of the shading. The other thing we're going to want to do is to give shading to the outlines, using the highlights and shadows in the rest of the hair as a guide. For the most part, remember that next to the brightest part of the highlight, the outline should probably only be 3 or 4 values darker. We do this to help solidify the hair, so that it doesn't look as if we've just drawn lines through the hair.
http://www.alisachristopher.us/rmxp/lessons/hair06.gif[/IMG] http://www.alisachristopher.us/rmxp/lessons/hair13.gif[/IMG]

Another important step often overlooked is to shade the forehead, as hair will cast a shadow on it. At this point you can adjust the contrast or the color if you change your mind.
http://www.alisachristopher.us/rmxp/lessons/hair08.gif[/IMG] http://www.alisachristopher.us/rmxp/lessons/hair14.gif[/IMG]

By using those steps you can shade just about any style of hair, the hardest part is always getting the basic shape and grouping, which is why I highly recommend you find refrence and try drawing hair by hand.

Here are a few more hair examples, with the outline and highlight blocked out:
http://www.alisachristopher.us/rmxp/lessons/hair15.gif[/IMG]

Other Resources:
http://www.deviantart.com/view/18786922/
http://www.deviantart.com/view/16427379/
http://www.deviantart.com/view/16427492/
http://www.deviantart.com/view/20822131/
 

Tana

Member

Working on translating to english.... Please keep in mind I'm by no means fluent in japanese, and I'm trying to make the english as natural as possible.
今日はXPサイズでの、チビキャラの作り方なんかを紹介したいと思います。
Today, I'll introduce how to make Chibi-Characters for XP.

初心者の人はRTPの改造から入るのがおススメですが、そのあたりはデジファミのドット絵講座か、ツクールWebのグラフィック講座がありますので、そちらをご参照下さい。
Beginners usually start by remaking RTP(frankenspriting); for this there's DigiFami's Dot Picture Lecture, or Tsukuru Web's Graphics Lecture. Please use those for refrence.

 オリジナルのキャラクターを作る場合、RPGという登場人物の多い作品の素材作成には、どうしても画像統一感のために、ひな型を用意する必要があります。
When making original characters, RPGs have many people of different appearances in a compilation; and because there should be a visual standard, you need to make a doll(template).

なくても作れるのですが、キャラによってサイズがまちまちとか、髪型によって同一サイズ内に治まらないなどの弊害が出ますし、改造で数を増やす事が困難なので、XP用のサイズでしたら、ひな型があった方が作りやすいと思います。
You can work without it, but then you notice imperfections caused by the characters not all being the same size; and creating a variety of characters through frankenspriting can be difficult. So for XP, you'll find working with a template easier.

16*16のキャラだったりすると、必要ないというか、あったら邪魔というか。
When the character is 16 by 16 you may say its not necessary, but if its there, would you still say its a pain?

特に4方向が必要だという場合は、サイズの統一感が損なわれないので、下書きとしてひな型は、キャラ作成初心者には大事だと思います。
Especially since we need 4 directions and a standardized size, a draft template is very important for a beginner's character database.


もちろん、最終的にはひな型ナシでもキャラが描けるようになるのが理想です。でないと人型じゃない動物や、モンスターが描けないという事態に陥りますから・・・。
 とりあえず、町の人や主人公など、大量にキャラが必要な場合はひな型を、少量で特殊サイズ、特殊形状のキャラはひな型ナシで描くのが、ツクール用の素材作成の手順となるかと思います。

 ひな型の作り方ですが、すごい簡単に説明してしまいます。デッサンでも言ってますが、輪郭が大事!輪郭さえそれっぽく見えるように描ければ、中身がどうでもキャラに見えるのです。

http://cyocorune.cocolog-nifty.com/phot ... d/01_1.gif[/IMG]
まずは32*48というRTPと同じサイズで作成してみますね。丸2個で頭身の決定。2頭身はキャラが可愛くなるし、RTPのマップにあう比率なので、最初はおススメ。幅を奇数ドットにすると、1ドットで口の表現が出来るので、私は大抵の場合は、奇数幅です。偶数にしても大丈夫。上の丸は頭、下の丸は胴体。胴体は真ん中で区切って上半身、下半身にします。ひな型はこの正面と横さえ作れてしまえば、後は反転とかで作れてしまうので、不要です。

http://cyocorune.cocolog-nifty.com/phot ... d/02_2.gif[/IMG]
頭身が変わると、最初の丸の数が変わるだけです。ただし、頭身が高くなるに従って、体は細く縦長になってしまうので、サイズが小さく見えてしまい、マップまでオリジナルにしないとバランスが悪くなってしまいます。RTPのマップを使うなら、キャラは3頭身が限度かと思います。

http://cyocorune.cocolog-nifty.com/phot ... zed/04.gif[/IMG] http://cyocorune.cocolog-nifty.com/phot ... zed/03.gif[/IMG]
また、キャラが小さく見えると画面映えしなくなるので、頭身高めのキャラでXPゲームを作るなら、キャラクターのサイズ自体を大きくするのも手です。XPはキャラのサイズに今までのツクールのような制限がないので、サイズを変える事によって、見栄えにこだわる事ができます。幅32ドットを意識すれば、実際にツクールで使う時にイベント配置する際、はみ出す事とか気にしなくていいので、足元幅32ドットというのは意識した方が良いかもしれません。

 他にもパースをもっときつく付けるとか、ひな型の段階でキャラのおおよそのスタイルを決めてしまえば、後々とても楽になります。
 ひな型は実際に使ってみると、色々バランスの悪い部分が見えてきたりしますので、その都度バージョンアップしながら、自分だけの?型?を作ってみてください。

 *この講座で作成されたひな型も、自由にご利用下さい

There's a link to Enterbrain's Graphics Course, that says
・キャラクターツクールPro.(ドット絵の制作)株式会社エンターブレイン(Character Maker Pro)
・Photoshop7.0(フルカラー画像の製作)アドビ システムズ社
・Shade Personal R4(3D画像の製作)エクス・ツール株式会社

Enterbrain's tutorial is here: http://www.enterbrain.co.jp/tkool/graphic_cource.html
I'll see about translating that stuff too.
 

Tana

Member

Mack's Shading Tutorial (will work on translating):
チビキャラの作り方(色と立体感)
How to make a ChibiCharacter (Color and 3-D)

キャラクター作成講座、その2です。今日は色と立体感について。
How to Make Characters, Chapter 2 (I'll have to find Chapter 1 maybe?)
Today is about Color and 3D.

 少し話題がずれるのですが、透明色として設定してる背景の色が、私の場合どうして青緑系なのかを説明しておきます。  長時間の作業で目がチカチカしないというのも理由の一つなのですが、
But before we being... the background which will be set as transparent is meant to be a bright color, but I've set it as blue-green. For a long job, its a good way to keep your eyes from going Chika-Chika (wonky).

ファンタジーRPGで背景で最も広い面積で可使われる能性のある緑系にする事により、実際ツール上でキャラを歩かせてみたりしなくても、配色のイメージがわかりやすいというのがあります。
In FantasyRPG the background is mostly green, in the software you won't see the sprite background, and the image's color scheme is easy to understand.

暗いシックなマップの予定の時はこの背景も、暗いシック系の色調にします。ポップでカワイイ場合は、背景もポップでカワイイと感じられる色に設定します。他にも、キャラは暖色系・寒色系と、多様な色が使われるので、中性色である緑系を使うとどちらの色も見やすくなるというのがあります。
Use a dark color if your overall background has a dark tone. When its PopCute, use a color that feels PopCute (probably Pastels). For warm colored characters, many colors can be used. When there are neutral colors, using green makes it easy to see both colors.

最終的に、透過色をキャラ内でうっかり使っていないかのチェックのために、
Finally, make sure you don't use the same color in your character,
全く逆の色である赤紫にしてチェックし保存する場合がありますが、
作業自体は必ずこのような色で行っています。あくまで私の場合ですが(=ω=)
(Something about keeping an oppisite color, red violet, throughout the work...)
Akuma (devil?) in my case.

(Basically, set a background for your sprites to a color according to what the overall color scheme of what your game's tilesets will be. Dark for dark, pastel for pastel, etc...)


http://cyocorune.cocolog-nifty.com/phot ... d/01_1.png[/IMG]
 さて今回は、このキャラサイズで作成していきたいと思います。3頭身でRTPより若干大きいキャラ。
Now, we want to draw up the size of the character. At three heads, its a little bigger than RTP.



現在作成中のマップが暗めのシリアス系なので、 キャラもそれに合わせて違和感ない方向性にします。
Because its being drawn....(kurame serious), that character doesn't feel strange make it like this
(My brain doesnt work right now. I think its that he's going for a semi-serious sprite, and this one doesn't seem strange.)



キャラとマップのイメージを統一する最も簡単な方法は、同じパレットを使う事ですが、そうなるとキャラが馴染みすぎてメリハリなく、目立ちにくくなります。
The simplest way to stardardize Character and Map images is to use the same palette. When we do that, the character will blend in without having to adapt too much.



http://cyocorune.cocolog-nifty.com/phot ... d/02_2.png[/IMG]http://cyocorune.cocolog-nifty.com/photos/uncategorized/03_2.png[/IMG]
 マップとキャラを比べた時に、キャラの方が彩度が高い方が、キャラは画面で映え、メリハリも出てきます。ただ、こうしなければいけない、というものではなくて、色を自由に使える昨今の様子を考えるなら、描きながらパレットを作っていくのも方法ですし、まったくイメージの異なるパレットを使っても、良い結果が得られるでしょう。避けるべきは、マップよりキャラの方が明度・彩度が低いという状況です。キャラはマップより上になるべき物なので(人は地面の上に立つから)、キャラがマップより遠くに離れて見えるという要素を持つ事は好ましくありません。
 基本的に、色による距離の錯視は、色相(色の種類)が原因で起こります。青や青紫は遠くに、黄色やオレンジは手前に飛び出して見えるというものです。しかしこれには同時に明度の影響も存在します。色が限界の彩度を持ってる状態で、黄色と紫を比べると、どうしても黄色の方が明度が高く、紫の方が明度が低いのです。光が上から当たるという状態で私たちが生きているため、上が明るく、下が暗いという認識を無意識で持っているので、明度の低い紫が黄色より遠くに見えるのだと思われます。
 小難しい事は抜きに簡単にまとめると、キャラはマップよりは明るいか、彩度が高いか、もしくはその両方か、彩度が増えた分明度を落として画面構成バランスは維持するか、のどれかの状態にするのが、知識がなくても簡単に色を作るガイドになるかと思います。今回は1色1色作る時間がないので、マップで使用されているパレットを、彩度を増やして明度を落とした状態で使ってみようかと思います。簡易設定なので、今後やや調整していくと思いますが・・・。現状は微妙で、ちょっと見分けがつきにくいですね。

http://cyocorune.cocolog-nifty.com/phot ... zed/04.png[/IMG] = http://cyocorune.cocolog-nifty.com/phot ... d/05_1.png[/IMG]
 キャラに立体感を付ける場合も、色の効果を利用します。基本は上が明るく下が暗い。奥が暗くて手前が明るい。このイメージは頭の中で考えるのであって、実際こういう形で描く必要はありません。更に奥や凹んだ部分は暗いという概念も考えます。そして最も立体感を出す要素が影。光源から影の落ちる角度をイメージします。正確な位置をドット絵のサイズで取るのは困難なので、だいたいのイメージで。上に物があれば光は遮られ、下に影が落ちるという感じです。
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top