Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1361582 Posts in 63477 Topics- by 55335 Members - Latest Member: GamerFun12

June 16, 2019, 05:48:03 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperArt (Moderator: JWK5)ninjavivi's Pixel Art Thread
Pages: [1]
Print
Author Topic: ninjavivi's Pixel Art Thread  (Read 1094 times)
ninjavivi
Level 0
**


View Profile WWW
« on: January 11, 2019, 09:21:20 PM »

Hello hello, I'm creating this thread as tracking log for my pixel art.
All C&C's are welcome, but please take me easy as I'm (soon to be very obvious) only just beginning with PA Smiley , I will take any help I can get, and be extremely grateful for it.

Currently I'm going through a number of tutorials, hoping to improve.

Here are my experiments for today :

I started with something very simple, black & white, just to get the correct setup in Photoshop and begin to dabble.
Logged

ninjavivi
Level 0
**


View Profile WWW
« Reply #1 on: January 14, 2019, 10:52:49 AM »

Today I tried to do a character's face, and it came out terrible :

which is a bit strange, because I've been drawing faces since I was a young girl. I feel very lost. I'm thinking it's probably the fact that I looked at pixel art as an entirely different art than classical art.
Logged

ninjavivi
Level 0
**


View Profile WWW
« Reply #2 on: January 14, 2019, 10:57:04 AM »

Day 3, I went into reading a number of tutorials, about Anti-Aliasing, about palette and shading, so I've tried each. I've tried to do anti-aliasing on a few simple lines, then created my own palette from monochromatic colors, then tried to do shading on three different shapes, and then tried to place a straight light on a cube.
I also used the palette from the old GameBoy.


I'm not sure how good or bad this is, I think I could really use some guidance in improving.
Logged

ProgramGamer
Administrator
Level 10
******


The programmer of games


View Profile
« Reply #3 on: January 14, 2019, 03:27:18 PM »

Hi!

I saw this thread, and I find it admirable that you're decided to dedicating yourself to drawing a pixel art piece every day in order to improve. Since you’re welcoming critique, I thought I’d give you a few pointers on things that I’ve picked up over the years.

First, I want to say that the low rez version of your first pixel drawing is already pretty good. I might personally change a few details, but that would be according to my own preferences and what you have here is already perfectly good. However, there’s a few things that stick out to me on the higher resolution sprite which I feel should be pointed out. The issues I see here are actually quite typical of new pixel artists and are usually pretty simple to remedy. I've numbered the things I can see at first glance here, so let's get into it!



The first issue that sticks out here to me is the angled lines. It’s a bit subtle, but when doing an upscaled version of a small sprite, it’s easy to fall into the trap of making some lines more angled than they need to be. The place where it’s easiest to demonstrate this is on her headband:



Notice how, on the top row, the pixels on the left seem to suggest the shape of the line on the right, sharp angle included? Now contrast it to the curve that the bottom row seems to convey. It’s important to remember to smooth some lines out when upscaling a sprite, as you should consider what detail you want to suggest with the additional pixels you have at your disposal. Of course, what you smooth out and what you keep sharp depends on the piece, as it’s appropriate for some things to convey sharp angles, such as robots and mechanical parts.

The second thing I’d like to point out is the banding on the face. When adding shadows or highlights to objects, it’s usually a good idea to avoid following the underlying outline perfectly, since if you do, it creates a generally unpleasant alignment of the edges of the shadow with the edges of the line segment. This is one of the things I found a bit paradoxical when starting out with pixel art, but a good lesson to learn from this is that sometimes breaking a pattern is the right thing to do for the sake of making the piece more “readable”. Bellow is an illustration of what I mean, accompanied by two ways of fixing it. On the left I removed some pixels to make the shadow subtler, while on the right I made it a bit thicker. Notice that, on the right one, the shadow still kind of creates a “staircase” effect over the line, so there’s still room for improvement there in my opinion.



The final thing I wanted to mention about this piece is that the body has a bit of an unusual shape. I suspect that this came to be once again because of complications with upscaling an existing sprite, leading you do try and mimic the original shape of the body a bit too closely. When doing pixel art, it’s a bit tougher to simply draw an outline for a character freehanded and color it in later since you have a harder time visualising the silhouette of an object. This means it’s almost always a good idea to plan out the shape of whatever you’re trying to draw with solid colors before drawing the outline. Here is a progression from your body outline to a solid color planning of a possible interpretation of your smaller sprite, followed by my own addition of an outline and fill colors on that planning shape.



Now, despite some flaws, I wouldn’t say your portrait here is “terrible” per se. It already shows improvement over your first day’s piece and certainly indicates that you have prior experience in art. I’m not sure what parts of it dissatisfy you, but the issues I see with it are mainly related to the direction of the light source. Since most of the light seems to be coming from the top left, I would make sure that the parts of her head which are facing away from the source are darker and that shadows cover the parts that should be obscured from the source.



Notable changes here are around the right part of her hair, the top left edge of her forehead, and the top of her neck.

Finally, I’d like to talk about your shading pieces. While I don’t see anything wrong with your sphere and leftmost cube as well as your antialiasing trials (it’s something one must practice in order to get a feel for anyway,) I do feel like your cone and large cube don’t look quite right given a single directional light. I’ll start with the cube, then move on to the cone since I’d like to go over something that’ll help me teach you lighting for curved surfaces.

While I’m not certain if this is actually the case, I get the feeling that the tutorial you were following for your cube with a gradient was meant for objects in dark or dimly lit situations. Light doesn’t typically form a gradient like that unless it’s very weak or very close to your object, so the result you got here doesn’t look all that natural, mostly because it’s not obvious that your cube is in that sort of environment to begin with. Typically, strong lights or even sunlight in most cases follow relatively simple rules, and usually just cause flat surfaces to have a mostly uniform color.



Let’s say, like in the first case of this diagram, that a face on your cube is facing the light source head on. In that case, that face should be at its maximum possible brightness given the strength of the light and the base color of the cube. Let’s say, however, that in another situation, the face is a bit tilted compared to the direction of the light. In that case, it would appear about half as bright as it was when it was facing the light perfectly. Then, of course, if the face is not facing the light at all, that is, if it’s perpendicular or facing the other direction, it should be perfectly black unless another light source is present in the scene.

Now, it’s simple enough to apply this principle to simple shapes, and in fact you already have on your smaller cube! But this principle can also be adapted to curved surfaces, and I’ll show you how:



In this example, let’s imagine that the cone is composed of infinitely many lines going down from the peak of the cone to the edges of the circle that forms its base, and that every such line is “facing” away from its center, in a sense. If you were to apply the same principle as a cube’s face on each of those lines with the given light source, then you’d see, as in the image above, that the shading for a cone is effectively just a circular gradient surrounding it, with the brightest line facing the light source directly. I’ve purposefully not made the example in pixel art to leave you the exercise to do it yourself Smiley

Well, it looks like I’m done going through your art! Hopefully you didn’t mind me making edits of your pieces. I’m also curious about what tutorials you’re following, so would you mind posting links to them here?

In any case, I hope you continue to practice! Pixel art is a discipline that you have to exercise, but it’s very fun and rewarding to persevere and get to a point where you can make art for your own games.

Cheers!
Logged

ninjavivi
Level 0
**


View Profile WWW
« Reply #4 on: January 15, 2019, 01:18:56 PM »

Thanks ProgramGamer, that took some serious effort, so - thank you very much ! I really appreciate it, and a large part of what you wrote was very helpful.
I understand what you were saying, pretty much everything except the lights on the orange portrait. Redrawing on top of the art helped me understand better, thanks again.
I placed the tutorial list I'm following here : https://pastebin.com/aL7fiNs5 in case these help you.
currently I've been through the first one, and a few others across.

For Day 4, I tried a side-view character, using the clusters approach :

I didn't respect the action line in the start, so it came out all wrong. I'll keep on practicing.
Logged

ninjavivi
Level 0
**


View Profile WWW
« Reply #5 on: January 20, 2019, 03:34:05 AM »

My art for days 5 & 6 :

I'm still having difficulties in choosing color palette, finalizing lines and doing proper shading, definitely would welcome any advice on that.
I'm having some issues, onto how should I build or connect colors on the ramp.
Also, if anyone know better : is hue-shifting restricted to neighbor colors or can I jump to other hues not connected to main colors?
Logged

Schoq
Level 10
*****


♡∞


View Profile WWW
« Reply #6 on: January 20, 2019, 09:11:34 AM »

Hey, you're improving very quickly!
For tips on general shading and structure here's a very good tutorial https://androidarts.com/art_tut.htm
For hue-shifting: a sort of quick and cheap way to get more interesting and natural looking results is to shift the shadows towards a colder (bluer) shade, and highlights towards warmer (yellower) colors. The reason this happens in natural light conditions is that highlights mostly reflect the light source directly, and light sources like the sun (or the fire in your last piece) tend to be a warm color, while the ambient light (mainly the sky outdoors), which is what lights the areas in the shade, tend to be colder.
here's a very quick colour edit to illustrate


I'd also encourage you to, as an exercise, restrict yourself to fewer colors. It's good practice for creative use of them and getting a more unified look
« Last Edit: January 20, 2019, 09:19:04 AM by Schoq » Logged

♡ ♥ make games, not money ♥ ♡
ninjavivi
Level 0
**


View Profile WWW
« Reply #7 on: January 23, 2019, 02:08:45 PM »

Thank you very much Schoq for the reply and the tutorial link! Smiley I'm still going through it.

Day 7 progress :


and day 8 :


I still don't know how to shift hues correctly, I understand the theory, still I'm not certain how to apply it in practice, so I'd like to ask : what are your pipelines? do you choose colors manually or do you have a process, perhaps choosing a distant color and doing gradients ?
Logged

ninjavivi
Level 0
**


View Profile WWW
« Reply #8 on: January 25, 2019, 04:45:08 PM »

Here is my day 9 progress. My first experiments at true side view, and went with 100 x 100 pixels. I think this is the upper limit for me for now.

could really use advice regarding this view, and regarding the past pieces.
I tried to do more dithering and AA inside the piece, but only in the locations where I felt it was needed. Trying to polish and perfect my techniques.

I'd like to ask, where would you say my level of quality is ? Does it look like I am improving ? Where can I improve more ? What am I doing wrong ? Am I ignoring any pixel art techniques ? is there any advice I should be following more ? sorry for the never ending row of questions Smiley .
Logged

Schoq
Level 10
*****


♡∞


View Profile WWW
« Reply #9 on: January 25, 2019, 05:23:27 PM »

You're definitely improving! Generally I'd say try to let go of the instinct to outline every element individually.
There are many areas where things are separated just fine without them. Your shading is still a bit pillowy. Try to always keep in mind where the light in your piece is coming from and how it would hit the eye from that angle.
In your latest piece the gun needs more contrast and metallic reflection (it should reflect everything from exact angles with little diffusion, and strong highlights. You can usually fake this by just making the ramp less straight from light to dark and have it jump up in brightness somewhere, if that makes sense), right now it reads as the same material as her clothes.
Logged

♡ ♥ make games, not money ♥ ♡
ProgramGamer
Administrator
Level 10
******


The programmer of games


View Profile
« Reply #10 on: January 25, 2019, 06:20:26 PM »

Honestly, you've improved quite a lot! Your Vega and Jon Snow (I'm assuming that's him) pieces are already big improvements over your previous ones. I think the main issues with the space soldier piece are concepts which you've learned but didn't apply in this case, such as color theory and shading. There's another recurring issue in your pieces that I'd like to point out though, but I'll get to that in a bit.

First, the main thing I see with your latest sprite is that the colors you chose have very strict "dark to color to white" gradients. Like Schoq said earlier, you usually want darker shades to tend towards cold colors like blue or purple, and highlights to tend towards warm yellows or oranges, though in some rarer cases other colors can be appropriate. It may be tempting to think that this doesn't apply to gray, but it absolutely still does, as demonstrated by my quick edit below. This was done quickly just to illustrate my point though, so I'm sure you could get much better results if you messed around with the colors even more on your own.



In fact, one of the cheapest tricks you can use to improve almost any piece it to use a dark purple-ish color for its outlines, which actually brings me to my next point; you don't need that many outlines when you're drawing inside the subject of your art. See, contrary to one's intuition, sometimes it's actually better to not use outlines, especially with small details. Remember, outlines are a tool, and you use them to separate elements of your piece which should stick out, so if you want to make it look like two things of the same color are in fact separate, then an outline is the right thing to use. However, if an element is meant to "blend in" a bit, or be part of a bigger element, then it might look better to just draw it without outlining it. Here's a small example focusing on the chest armor where I changed the lines separating the breasts from the chest to make the transition more subtle, though again, this is a quick and imperfect edit.



Finally, the last real shortcoming I see here is the use of what is called "pillow shading". Pillow shading is when there's a tendency for highlights to follow edges and shadows to tend towards the middle, or vice versa, which either makes it look like the subject is lit from all angles or directly from the point of view, which usually looks less interesting. It's good to imagine a light source at a fixed point in your scene and to draw everything as either highlighted by or obscured from it. Again, here's a small edit, here focusing on the legs since that's the part where pillow shading was the most visible. If we imagine a light source coming from the top right, then we should see a shadow being cast on the legs by the canon, and there should only be highlights on the portions of her legs that face light directly, if at all. Notice how the shadows now seem to suggest what area the light is hitting, and how the highlights accentuate that in specific spots.



Other than that, I just want to say that you're improving! I hope you're having fun making these, and I look forward to your future posts!

Cheers!

Edit: Looks like Schoq beat me to it lol, though I didn't mention anything about the way the canon looks. But yes, if you're going for a metallic look, then stronger highlights are definitely a good idea here.
Logged

ninjavivi
Level 0
**


View Profile WWW
« Reply #11 on: January 28, 2019, 05:06:27 PM »

@Schoq
Thank you very much, I haven't thought of that you're right, the gun read as same material with clothes. I should do some material studies in pixel art next time after doing characters.

@ProgramGamer
Yes it's Vega and Jon Snow. I'm glad they were recognizeable somehow :D . Thank you very much for the comment as well.

On the purple dress girl with bunny, I tried not to use reference for experiment. Used tried colors for theory, did hue  shifting yet I'm not sure if I selected the right warm and cold colors. I chose colors by setting a blue and yellow layer on top of the palette and changed its opacity numerically, and by intensity so it blends in with original colors and creates new warm and cold colors. I'm not entirely sure about it. Also did some external AA. Realized I should make art with references more.

Day 10 :


Day 11 :


The girl in the jumpsuit is inspired by Fool's pixel artwork. I created the character with the use of his color palette and tried to study his art style.
Logged

ProgramGamer
Administrator
Level 10
******


The programmer of games


View Profile
« Reply #12 on: January 28, 2019, 06:33:56 PM »

The girl in a dress looks good to me, but her hair looked more lively before the hue shifting imho. Hair tends to let a lot of light pass through, so it might be a good idea to not shift too much towards cold colors for shadows in the case of hair. That jumpsuit girl is top notch though, good job!
Logged

Schoq
Level 10
*****


♡∞


View Profile WWW
« Reply #13 on: January 29, 2019, 02:54:19 AM »

You're definitely overthinking the hue shifting. Just adjust the sliders with the colour theory you have picked up in mind until you have something pleasing. You will develop a feel for it quickly I'm sure.
 Right now it sounds like you expect there to be a mathematical formula that will return the correct rgb value for each cluster.
It helps if the pixel art program you use allows you to adjust the rgb sliders and see the colours in the piece change in real time. I don't use Photoshop much for pixel art, so I'm not sure if there is a way. If not there are lots of more specialised and free pixel art tools you can try.
Logged

♡ ♥ make games, not money ♥ ♡
Cobralad
Cowardly Baby
Level 10
*****



View Profile
« Reply #14 on: January 29, 2019, 03:24:11 AM »

try eradicating colors and seing if it changes anything. you can also just overlay two oposing colors and get one in the middle for shades.
Logged
ninjavivi
Level 0
**


View Profile WWW
« Reply #15 on: February 01, 2019, 06:14:19 PM »

@ProgramGamer - thanks !
@schoq - yes, photoshop has the sliders options. I'll have to "fight" it until we come down to a common agreement Smiley .
@cobralad - "eradicating" ? do you mean turning it to black & white and just follow the shading and take it from there ?
Thank you for your replies !

My days 12-13 progress.

Aside from poses, I still struggle a lot in choosing colors. I guess I have to practice more. The round shapes are some of my color experiments. Used compound colors on the blue armored guy then used complimentary colors on the greenish knight.

Logged

Schoq
Level 10
*****


♡∞


View Profile WWW
« Reply #16 on: February 02, 2019, 12:56:17 PM »

minor point about the knight: the kneepads appear to be a bit low, situated almost fully below where the knee would be, somewhere halfway between the heel and pelvis.
You're noticeably improving with the colours!
« Last Edit: February 02, 2019, 01:18:51 PM by Schoq » Logged

♡ ♥ make games, not money ♥ ♡
Cobralad
Cowardly Baby
Level 10
*****



View Profile
« Reply #17 on: February 02, 2019, 01:24:48 PM »

@cobralad - "eradicating" ? do you mean turning it to black & white and just follow the shading and take it from there ?
i meant more like deleting separate shades. right now it feels like youre using simple color ladder for each object. Some of them get lost and feel redundant, but theyl gonna inrease clutter and make it look more unfinished. Also you should remember that objects reflect upon each other and environment but also have unified temperature. guy pants are too cold but also that sort of intense blue would make boots more purplish and gold more greenish.
Logged
Schoq
Level 10
*****


♡∞


View Profile WWW
« Reply #18 on: February 02, 2019, 05:34:59 PM »

Colour identity comes through mostly in the mid ranges. Highlights and dark shadows can get away with more of the same shades being reused. Doing this also tends to look more natural and unified. Look for opportunities to combine colors that are close to each other into a just one.



As an illustration, this is my attempt at reducing the buckler guy to 16 colours (from 30)
Of course results will be better when this approach is employed from the start rather than as a final step like this
« Last Edit: February 02, 2019, 06:37:30 PM by Schoq » Logged

♡ ♥ make games, not money ♥ ♡
Ramos
Level 1
*



View Profile WWW
« Reply #19 on: February 03, 2019, 01:01:32 PM »

Very good progress Vivi, still waiting for that poster and game Smiley
Logged

Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic