recolor workflow for UI design pixel icons?

[pixelworker]

I'm new to Affinity designer, I mainly use it to make UI design mock ups.

 

At the moment I'm working on a redesign, mostly colors, for an existing UI with pixel assets.

 

I have a lot of small icons with aliasing in the font or icon where I have to recolor to a exact rgb value for the main color (so the green one you see here...).

This color could be changed easily with a fill tool, but this doesn't work for the aliased things in the font and in the circle of course.

 

What's the best and fastest way to recolor something like this in AD to an exact rgb value for the background?

It's important that the aliasing around the font an circle looks correct too and stays black.

 

 

What I've tried:

- I had no luck with the "recolor" adjustment filter on a layer which works very nice to hit an exact color hue, but it has no luminance control, therefore a lot of colors are not possible to hit (a very light blue for example), the luminance is way off and sometimes I have some colors popping too much, the aliasing looks wrong colored.

 

- The HSL adjustment filter on a layer works to some extend in this example, but it's very difficult to hit an exaclt color value. Also with the luminance control not only the color is changed, but also the grey scale information from the aliasing around the objects . In a nut shell: The font is not black anymore when you use luminance and the aliasing looks wrong colored.  (example attached were you see the problem)

 

- After that I tried to remove all saturation to have a grey scale image and add a colored layer on that, but it's very difficult to hit exactly one color with it.

 

- After that I tried the "pixel tool" with "color", but it has the same problem as the "recolor" adjustment filter. No Luminance adaption.

[PixelSnader]

This might be a lot more intuitive in Affinity Photo, where you would desaturate, increase contrast, and then use the result as a multiplied layer.

 

The same effect can (I think. I'm new, but it LOOKS to work) be achieved with two grouped layers.

 

Bottom layer - your image, use the gear icon to open some the blend options window. I'm not quite sure how it works, but it's something like curves/contrast?

Fiddle a bit with the 'curves' to get a nicely aliased look. For this example fading from 0.25 to 0.5 worked well enouhg. Set this bottom layer to be 'Normal'

 

Desaturation layer - a simple white rectangle. Can also be black if you prefer. Or any sort of gray. Set the blend mode to 'Color'.

 

Group these.  You now have a sort of stamp, going from transparent to black. Put the blend mode of this group to 'Multiply'.

 

Put whatever color you want underneath.