Hi, I really like the character you are working on. I wanted to ask you how do you achieve that cool pixelated effect on the textures?
Hi @ilsagace thanks for asking! Sorry for the super late response, I’m still catching up to messages. I’m not sure whether you are referring to the crisp shapes on the textures or the fake lighting shader so I’ll do my best to briefly go over both, but please do ask for more clarification if you need it.
Because my textures are all flat shapes and were either drawn out straight with the lasso tool or filled in over and over while trying to figure out the palette they ended up with pretty sharp lines. The actual full resolution before scaling down looks like this:
Then when bringing the diffuse into Unity the import settings are switched to “point” in the filter mode, which turns off any automatic smoothing Unity will try to do for you. In addition you can switch off mipmaps if you need something to still register as crisp from a distance (and there aren’t too many objects in too large a scene).
If making textures more pixelated is your thing, point filter mode will continue to solve that for you. Excuse the messy results, but I scaled down the diffuse map here at a couple of sizes as an example (using both nearest neighbour and bilinear resampling).
The results below are to show the difference the point filter mode makes and look pretty dirty, but if you were going to make pixel textures by hand I think with purposeful texturing and some carefully aligned UVs on a model it would make for a nicely clean and attractive result.
If its the lighting shader you wanted to know about, it’s like a ramp shader at its base, taking the information on how to overlay a texture over the main diffuse.
The layers of shadows, or the “cel shading look” is achieved by making ramps that are themselves made up of sharp blocks of colour:
Last thing I can think to note is to remember to take light attenuation into account if you are using a scene with multiple lights and need the distance of the light from the material to have an impact. In my scene I’ve currently only got a single directional light so don’t feel I need to bother with it just yet.
hi! when making stuff in aseprite, what type of image file produces the highest quality? on a piece say 64x64 pixels. png, jpg or jpeg?
Png. I talk a bit about it here:
Also important to know:
Ironically Tumblr also interpolates with bicubic or bilinear so these tutorial images look blurry because they were downsampled from 638px original to 540px tumblr width. Here’s the original GIF for pixel perfect viewing, although if you’re on any sort of retina display (or equivalent) the browser will double the resolution (to match the denser pixels) and blur things again.
To circumvent that you need to see it on a website that has pixel scaling enabled in their CSS (like mine, when you go to the actual site, not on the Tumblr dash), or use an extension for your browser that injects that CSS into any page (like mine, safari only, but you can find similar things for other browsers I suppose).
And that’s the story of pixel art formats and quality and the internet.
ahhh thanks for answering! Can you make a full tutorial? Thank you!!! :)
I think it’s best to start with Allura’s coloring, since this one’s more tricky.
I think this would also be a very interesting tutorial for those who want to edit/gif POC but fear they might accidentally whitewash them due to the ligher effects. Well, fear not, because there is, in fact, a way to make everything pretty and pastel and still make your character’s skin tone as dark and consistent as it originally was.
So here’s the gif we’re going to start with.
And with the effects applied, it looks like this:
As you can see, I managed to make Allura’s entire surrounding pastel, including her eyes and clothes, without making drastic changes to her skin color. Her skin is slightly more reddish and darker, but that’s because of the coloring rather than the lighting-effects.
So you wanna learn how to make simple icons, and make them fast? This is the post FOR YOU. I constantly brag about my 1,500 icons for each of my muses, all simply edited and edited fast with minimal effort on my end. (Note, this tutorial ISN’T how I edit my icons, but how I make editing them easier on myself.)
For this tutorial, you will need: Photoshop! I use CS6 and while these features might be in earlier versions, I suggest getting CS6 to make things easier on yourself! Icons to edit! Make sure you’re allowed to edit your icons if you download them from someone else’s icon set.
If you are cropping your icons yourself, try to save the image with the artist’s URL- that way, you can credit the artist if someone asks for it, and you can delete the icon if the artist comes and asks you not to use their art. If you didn’t crop your icons yourself, don’t worry about it, but please remember to be respectful if an artist approaches you and asks you to stop using a certain icon that uses their art! If they say to stop, stop using the icon and delete it like they asked you to.
That said, let’s get right into this! If a part has confused you, please don’t be afraid to head to my inbox and ask me for clarification! Also note that this is MY METHOD of making icons- there is no Right or Wrong way to make icons. This is simply how I do them, and how I edit 1,500+ icons in a matter of 10 minutes.
I will finish this laterrrr. So, whenever I size down images, they’re ridiculously sharpened and though I’ve liked it that way for years, now I see it’s overkill. But when other artists post their artwork and I know it was originally a very large size, I always wondered how their’s sized down looks smooth and not over-sharpened when they used Photoshop as well. So when scaling down, i set the re-sampling to be bilinear, and it works. But I still like a bit of the sharpness, so I just put the bilinear re-sample over a sharpened layer and set it’s opacity to 50%. All these years.
hello! I just wanted to ask if you could share how you sharpen your gifs and perhaps your settings when you save them because their quality is AMAZING and it's well-known that ps fucks them up after you save them TT
of course! thank you so much for the compliment, because sharpening is actually what i struggle with most so the reassurance is nice!
kikimora character turnaround for an MA application portfolio i’ve been working on.
here’s a question i was wondering if anyone had the answer to! since my computer had its meltdown in january it won’t let me use CS4 anymore so i moved to CS6, but when i resize images it sometimes leaves this lighter line between the lineart and the colours (you can see it on kiki’s hair here) whether i do bicubic automatic or sharper or whatever. what’s with that?
thanks for the answers guys! looks like bilinear is the way to go.
Bilinear filtering : In this method the four nearest texels to the pixel center are sampled (at the closest mipmap level), and their colors are combined by weighted average according to distance. This removes the ‘blockiness’ seen during magnification, as there is now a smooth gradient of color change from one texel to the next, instead of an abrupt jump as the pixel center crosses the texel boundary. Bilinear filtering is almost invariably used with mipmapping; though it can be used without, it would suffer the same aliasing and shimmering problems as its nearest neighbor.