ilsagace  asked:

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.

I’m still pretty new to shaders and don’t want to risk giving incorrect information but there’s a lot of information on using ramps out there and Unity provides an example script here.

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.

anonymous asked:

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:

And finally:

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.

anonymous asked:

How do you get your gifs to be so clear? Mine always come out all lq. I love your blog so much 💞

ah thank you!! sorry, my ps is in russian but i’ll try to explain

1. while resizing the image the method of resampling is important 

i prefer bilinear but i suggest you play around yourself and see what looks best in your opinion (also the differences will be more noticable) 

2. psd + sharpening 

without psd and sharpening:

with psd (i like to darken blacks and reds) and sharpening (i use an action but i know some people prefer to keep sharpening more subtle)

3. saving settings are actually very important too because sometimes settings that work for one gif won’t work for another

anonymous asked:

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.

Keep reading

Sabrina’s Icon Tutorial

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.

Image-Heavy tutorial below the cut!

Keep reading

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.

anonymous asked:

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!

small tutorial under the cut

Keep reading


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.

3 ±ε   ×   7 ∓ε

Without using a calculator or even pen and paper–or even doing the arithmetic in your head–¿which is the larger product? of:

  • 3.01 × 6.99
  • 2.99 × 7.01

You know 3 × 7  =  21. But what happens if you gently place your finger on the teeter-totter?


Although this is “just arithmetic” and so doesn’t require a learnèd vocabulary of higher mathematics, it touches on a few “higher maths” topics:

  • bilinearity being the way I would answer it “conceptually rather than computationally”
    External image
  • wiggly numbers

  • ± ε
  • statistical robustness
  • tensor product of modules
    External image
  • isoperimetric inequality

    @zentree @isomorphisms what’s all that math nonsense? It’s just an instance of an isoperimetric inequality.

    — Messi is my Homeboy (@gappy3000)

    July 13, 2014

I’ll leave the question/reasoning unanswered with a space for you to answer which is larger and why.

3±ε  ×   7∓ε    =    21±¿?

Bilinear filtering

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.