Is there a way to use Gradient smoothly?

I want to make something like this again - Picture 1
Is there a way to make it more smoothly like in the picture 1 with more colors ? or do i have to manually do it

- 1

Basically is there a way to make a smooth transision thru different colors

Instead when i do it manually using the gradient tool it looks like this and thats quite ugly

@Olga_Galvanova I think they’re asking for a way to make a gradient with dithering, but which goes through a ramp’s worth of colours instead of blending from the Foreground to the Background colour.

Unfortunately I don’t think Aseprite currently has a way to have both dithering and a fixed multi-colour palette, except through doing it manually like you have been. With more planning and care, it can look quite nice.
In particular, consider making your ramp by filling everything with a solid colour first, and then adding each successive colour with the 8x8 dither and with one of the colours set to be transparent. The transparent part would go on the side of your previous colour. This way you can build up the gradient without worrying about exact colour boundaries:

2 Likes

Hi @JackIEEE,

I’m not clear yet on what you want the gradient to look like. (If you want to nerd out about them, they have more options that you might first guess.)

If what you want looks like any of the gradients in the picture above, I made them with gradient tools that I created with Aseprite scripts. There are online tools you could try as well, such as this one.

The gradient in your first image spans a fairly large distance by pixel art standards (1280x640). You may have scaled up the original, but the .jpg file format makes it harder for me to tell. If you want a smooth gradient, banding could be an issue over such a large span. Imagine game designer who’s creating a game where a little space ship zooms passed lots of nebulae and planetary atmospheres: they’re familiar with this problem.

For a dithered look with more colors, you could

  1. create or import a smooth gradient image while in RGB Color Mode,
  2. sample a handful of colors from the gradient (I used 8 above),
  3. create a palette from the samples, making sure the palette’s first color is transparent black,
  4. go to Sprite > Color Mode > More Options and convert to indexed with the dithering option you want.

For more noticeable dithering, make the smooth gradient smaller than the final product, say 320x160. After you’ve converted it to indexed color mode, scale up the sprite with Nearest Neighbor method. You could also experiment with more or fewer samples.

Convert back to RGB color mode when you’re done if that’s the color mode you want. Don’t lose your original color palette when sampling colors. Either work in a separate sprite or save the palette beforehand, then re-import after.

Best to you,
Jeremy

1 Like

Thats just what im looking for ! i would love to make stuff like you did in the last picture … but how do i install those addons ? i couldnt find any guide

Place the script file in your Aseprite scripts folder. You can find it via File > Scripts > Open Scripts Folder.

i dont have this folder … should i create it ?

If you don’t have it, then what happens when you click Open Scripts Folder?

Nice it got created now what do i put in this folder what files

Hi @JackIEEE,

The last image in my post above shows the extended options for converting between color modes. It’s built-in to Aseprite. The dithering process would be separate, regardless of how you made your gradient initially.

If you’re still interested in the gradient add-ons, go to the Github page linked above, click on the green button that says code. A menu will appear.

downloadScripts

Select Download ZIP. Once this file has finished downloading, unzip its contents. Copy two folders, dialogs and support into the folder that appeared when you went to File > Scripts > Open Scripts.

Back in Aseprite, go to File > Scripts > Rescan Scripts Folder.

When you go to File > Scripts, the new folders should now appear.

To open the gradient dialog go to File > Scripts > dialogs > gradients > gradientLinear. The dialog on the right hand side of the picture above should appear.

The gradient’s origin and destination points are percentages of the sprite’s dimensions, not pixels. When quantize is less than two, the gradient is smooth. You can choose between mixing two colors and mixing colors in a subset of the current palette. You can also choose a color space. Depending on the color space, different easing options may appear. I used LCH with NEAR easing to get the gradient you’re reffering to.

Cheers,
Jeremy