Log In
Dark Weather Castform Don't have an account yet? Register now!
.

Forum Thread

Riako's June of Pixelart

Forum-Index Fanmades Spriting Riako's June of Pixelart
Riako
ONLINE
Trainerlevel: 71

Forum Posts: 2,827
Posted: Sun, 01/06/2025 12:00 (5 Days ago)
📅 Riako's June of Pixelart 🖍️🎨


This June, I've set myself an exciting goal: to learn how to create pixel art. I'm doing this purely for fun and not with any intention of becoming a professional. After all, I'll most likely always be a coder at heart :)

My plan is to practice every single day throughout the month of June. One of my goals is to create my own PokeHeroes-style event Pokémon by the end of the month. However, I'll start with smaller and simpler projects to build my skills.

In this thread, I'll be sharing my daily progress and would love to hear your thoughts!

Any form of feedback, constructive criticism, or help is deeply appreciated! Please feel free to point out any mistakes you notice. I'm grateful to anyone willing to guide me on how to improve from my current skill level.

For my pixelart journey, I will be using Aseprite. I have some basic experience with it, but mastering this tool will be part of my learning process.




Day 1: A simple Poke Ball
Today, I spent most of my time (re-)installing Aseprite and watching a couple of tutorials on the basics of the software and pixel art. To ensure I documented some progress, I attempted to sprite a Poké Ball. I used a random non-pixel art reference photo of a Poké Ball from Google and started spriting. I chose the AAP-64 color palette because, well, I wasn't entirely sure what I was doing. I picked one that had a manageable number of colors, including darker and lighter versions for lighting accents and shadows.

Here is my result:


(Original size)


(8x scale)


Please let me know what I could improve and how. I feel like the shading doesn't quite make the ball look round, so any hints on improving that would be greatly appreciated.
PenScales
OFFLINE
Trainerlevel: 41

Forum Posts: 593
Posted: Sun, 01/06/2025 13:22 (5 Days ago)
I'd consider blending the pixels together, if possible. Don't do it too much, or it'll look really blurry. Just enough to make the pixels less obvious. Gradients can be fun when used correctly.

Also, Aseprite. I like that program a lot. It's got a ton of options for different color palettes for different systems and a very nice interface.
solonium
OFFLINE
Trainerlevel: 58

Forum Posts: 244
Posted: Sun, 01/06/2025 13:43 (5 Days ago)
It seems pretty round in its original size but I think you can color the line art to help make it more round instead of making it fully black.
Politoed
ONLINE
Trainerlevel: 62

Forum Posts: 218
Posted: Sun, 01/06/2025 13:48 (5 Days ago)
Hello Riako! c:

I'm really excited about your upcoming pixel art pieces! Can’t wait to see how they all turn out!! 👀✨

I'm not a professional pixel artist myself, but I’d love to offer a bit of advice based on what I’ve learned so far.
Let’s take a Poke Ball as an example. I would say one of the most important things when starting a piece is to first think about the basic shape of the object. In this case, a Poke Ball is a sphere.

First off, I started with a Poke Ball circle. There's no sphere here, it's completely flat.


(Original size)


(8x scale)


This is the point where I think "how would a sphere work?". If I want to capture that Poke Ball roundness, how do I do it? Well then I made a basic greyscale shading to understand how to turn my 2d into 3d.

Note: You don't have to do this as a part of the process (ideally you'd do it directly on the Poke Ball), I did it because I think it's easy to understand this way.


(Original size)


(8x scale)


Then I would just do the same with the Poke Ball. I suggest to just make a new layer on top of the base one, set on Multiply mode and lower the opacity to your liking. I tend to use purple tones when coloring shadows on Multiply. Then another layer on Overlay using a yellow/orange tone for the lights usually works just fine! (It depends, though. You might need to play with the tones a bit)


(Original size)


(8x scale)


And in the last step, I would just add extra lights and shadows for more contrast & realism (the specular light makes it even more sphere-like!), or color the lineart using darker tones, but all of this depends on what kind of render you want for it. This is not a necessary step though, it's up to you! c:


(Original size)


(8x scale)


On a side note: For the shadows on the white area, I usually stick to greyish blue/purple tones, they tend to work really well. That way it doesn't lose whiteness c:


I hope this helps, and have fun! 🦐
BoomBoy
OFFLINE
Trainerlevel: 78

Forum Posts: 608
Posted: Sun, 01/06/2025 14:10 (5 Days ago)
looking forward to watching your journey Riako haha i'm sure you'll overtake my skills in the span of a month

but adding onto what Politoed said:
if you make your darks/shadows slightly colder (blues + purples) and lights/highlights slighty warmer (reds + yellows) then it brings out a little more colour and gets you more contrast for your buck.

eg, you can have something be #FFFFFF in the mid-tone and then #FFF8DD in the light, even though that's technically darker; or you can have a #000000 block with a #030033 or something in the dark, even though that's technically lighter.
<- this has a main colour of pure white outlined by pure black, but you can kinda tell that it's 3d from the cold bottom-left and warm top-right (#000033/#d0c0f0 in the shade and #665555/#fff8dd in the light)

scaled-up:


also worth looking into anti-aliasing if you fancy. lots of programs do that automatically but i haven't used aseprite so idk.
more info on hue-shifting here and an infographic on color-shading:

Miri
OFFLINE
Trainerlevel: 93

Forum Posts: 2,021
Posted: Sun, 01/06/2025 14:21 (5 Days ago)
If you want to make your Sprites look more natural, consider using dark shades of color for outlines (in parts!) instead of pure black. If you look at Venusaurs sprite:



you can see that the outlines on the upper half of body parts (like the most top-side outlines of the petals, or the leaves and the skin) are not pure black, they are a darker shade of the leaf/petal/skin in all places, where the lightsource hits the "object" (aka Venusaur).
This makes your sprites look more organic :)

In case of emergency Plushie
MeepTheMareep02
OFFLINE
Trainerlevel: 64

Forum Posts: 850
Posted: Sun, 01/06/2025 14:50 (5 Days ago)
i think the issue is more that your shading (the highlight area and the shaded area) need to be more curved, to match the 3D shape of the pokeball

referencing the bulbapedia images of pokeballs might help
Bl3eJayShroom
OFFLINE
Trainerlevel: 61

Forum Posts: 264
Posted: Sun, 01/06/2025 16:30 (5 Days ago)
The issue I think with the pokeball not looking round is your lighting. Light, when it hits a sphere, concentrates in one area. The way it's shaded makes it hard to tell where the light source is coming from, given that the red shadow cuts off at the line.

A sphere's shadow is curved, so even though the colours are split, treat it as one shape, just change the colour accordingly. Don't cut the shadow up, or else your eyes will struggle to comprehend how the lighting works. Only cut them up if it's not flat, where one protrudes or sinks in more than the other. Even then, the shadow will be warped and still maintain its general shape.

Moreover, if we consider material, a pokeball is likely around plastic/metal material and shines so that where the light concentrates the more, have a speck of white to show reflection and shininess.

Finally, a pokeball centre, the tiny white part is protruding and thus will have its own little shadow!

Otherwise, for a first attempt it's really good and I can't wait to see more :D

Creds:Gothgoddess

Joyfuldoggy
OFFLINE
Trainerlevel: 60

Forum Posts: 489
Posted: Sun, 01/06/2025 18:54 (5 Days ago)
Here's how I edited it :)







I just added more tones to it.
Mafia
OFFLINE
Trainerlevel: 94

Forum Posts: 1,100
Posted: Sun, 01/06/2025 21:35 (5 Days ago)
It's been a hot minute I last did pixel art, but I started out with pixel art in the emoticon community over a decade ago.

Considering how light sources reflect on round objects as well as using cooler/lighter colors for shading/highlights were already mentioned, so I'll mention a couple other things I thought about:

- Round pixel objects generally do better with an odd amount of pixels per side, especially if they contain smaller round objects like a Pokeball does. In your case a slightly smaller 15x15px diameter could make it appear more round.

- The part where the Pokeball opens is rather thick when you're using an even amount of pixels per side and want it to be in the middle between both halves. A solution to that could be making it thinner and slightly curved, which also would help it appear more round perspective-wise.

I don't have my laptop with me, so I tried whipping up an example with my phone using Pixel Studio, to help visualize:


(original size - 15x15px)


(scaled x8)
MissingLink
OFFLINE
Trainerlevel: 33

Forum Posts: 10
Posted: Mon, 02/06/2025 05:02 (5 Days ago)
It’s a lot arder than it seems at first. I learned by working on some sprites for Pokémon infinite fusion. I think they had some guides as well.
Absbor
ONLINE
Trainerlevel: 79

Forum Posts: 1,170
Posted: Mon, 02/06/2025 06:24 (5 Days ago)
I'm bad with shadow and highlights too. It's a lot more practice and experience. imagine the objects in 3D, take references from the objects next to you or online. especially: have fun.



Riako
ONLINE
Trainerlevel: 71

Forum Posts: 2,827
Posted: Mon, 02/06/2025 18:55 (4 Days ago)
Thank you all so much for your detailed feedback, this definitely helped me a lot!

Day 2: Improving the lighting

So today I tried to implement various of your suggestions into my Pokeball design. Politoed's suggestion of separating the 3D shape from the texture of the object helped me a lot. And instead of just copying what Politoed provided to me, I tried to visualise the 3D shading of a ball myself - with my recently acquired skill in Blender!



I used this render next to my Pixelart Pokeball to see where light and where shadow should go. Here is today's progress:


(Original size)


(8x scale)


The first one is still yesterday's result. I then did three iterations:
First I noticed that the inner circle of my Pokeball was perhaps too small, so I greatly increased its size. ... By too much, as I later noticed! (Hence why it was scaled down again in iteration 3).
I then tried using two colours for the lighting highlights (almost white + orange) and two colours for the shadows (beige and pink).

The shape still didn't look perfectly round, so I (think I) improved that greatly in iteration 3.

In iteration 4, I played around with "coloured" outlines as some of you have suggested. I think that's just a style preference, however, and I had seen a video where the guy explained that it ultimately just comes down to preference. Simple black outlines are much simpler, of course. But the outlines from the last iteration are probably closest to the Pokemon style we used on PH.

Anyway! Comment your feedback and further tips, please :)

I think that tomorrow I want to turn the Pokeball a bit, or make it bounce, to play with its shape and perspective... Wish me luck (and provide tips in advance :D)!
Joyfuldoggy
OFFLINE
Trainerlevel: 60

Forum Posts: 489
Posted: Mon, 02/06/2025 19:46 (4 Days ago)
The 4th one looks really good!

Maybe you can make an animation of the pokeball opening and closing.

Like these




They're my old sprites
(About 3 years ago, I think)

It might be cool to have an animated pokeball when sending out a pokemon to battle or catching a pokemon!
Riako
ONLINE
Trainerlevel: 71

Forum Posts: 2,827
Posted: Wed, 04/06/2025 08:17 (3 Days ago)
I did not break my streak yesterday, don't worry! I did make progress, I just forgot to post it here yesterday. Oops! So here we go - better late than never:

Day 3: Basic animations


(Original size)


(8x scale)


First row is still the result of day 1 and 2. Row 2 now shows the animations I created yesterday.

I must say that I am quite satisfied with animation 1 and 2. I love the little "bump" the Pokeball does when it reaches its maximum height and when it lands back on the ground.
Animation 3 is "ok". I am not super happy with the flash that comes out of the Pokeball, but I also didn't spend more than 4 minutes on that step. Although I also didn't know how to improve on that... perhaps I could've used a reference.


@Joyfuldoggy: Thanks for sharing your animation! :) It inspired me to work on animation #3.

Now I need to think what to try out today on day 4...
Politoed
ONLINE
Trainerlevel: 62

Forum Posts: 218
Posted: Wed, 04/06/2025 08:31 (3 Days ago)
Maybe you could try doing the "trying to catch" and "caught!" animations as well, and you might also want to try making different types of Poke Balls 🤔



Btw, these animations look soooo good! Congratulations! c: 🎉🎉
Joyfuldoggy
OFFLINE
Trainerlevel: 60

Forum Posts: 489
Posted: Wed, 04/06/2025 10:01 (3 Days ago)
Your welcome. Glad that I kept my old sprites. They are my first animated sprites :)


They look really good! Maybe you could replace the pokeball sprite with your new animated sprites.


I just wanted to point out on the 4th one, the middle bit of the pokeball doesn't split in half.




You could do great and ultra ball but if you want to sprite something else how about a fishing rod? You could design and make your own fishing rod. 🐠
Riako
ONLINE
Trainerlevel: 71

Forum Posts: 2,827
Posted: Wed, 04/06/2025 18:36 (2 Days ago)
@joyfuldoggy: My plan is not to replace PH sprites with my own, nor to become a spriter on here. My style doesn't really match the PH style (and that is fully intended). I don't think the Pokeball animation on here needs fixing. But thanks for the positive feedback :) And also thanks for pointing out that it looks like the Pokeball is splitting in half! I actually did not intend to make it look like it does, but you are right. I will address this issue tomorrow.

Day 4: Gotta catch 'em Ducklett!

Inspired by Politoed's suggestion, I started working on a catch animation:


(Original size)


(8x scale)


Disclaimer: The Ducklett sprite was not drawn by me! This is the official Ducklett sprite from the Black/White games. I did, however, alter it, to make it flash during the animation.

The animation is still work-in-progress. The final two frames currently have unfixed shading issues, and the animation also abruptly stops after the second shake. I will continue to work on this tomorrow.

If you do find any issues with the current state, please do point them out :) As always: Happy to hear any kind of feedback!
Good night.

Joyfuldoggy
OFFLINE
Trainerlevel: 60

Forum Posts: 489
Posted: Wed, 04/06/2025 19:28 (2 Days ago)
Okay.


That looks great! I'm excited to see you complete it ^_^
-carter-
OFFLINE
Trainerlevel: 41

Forum Posts: 263
Posted: Wed, 04/06/2025 19:39 (2 Days ago)
The catch animation looks really good! If you want to make the shake of the ball look a little more realistic, you can have it move back in the opposite direction a bit; for instance, in the gif Politoed posted, the ball initially moves to the left, but swings back to the right a little before returning to its original position. This is similar to how a pendulum swings to both sides, instead of coming to a halt in the center.

Good luck with your spriting!