Page 1 of 1

Making disabled buttons

Posted: 16 Aug 2015, 11:24
by Per
Many of the buttons in Warzone lack a 'disabled' (greyed out) variant, and I need some of them now. Is there a quick way to generate them, for example by using imagemagick to convert normal buttons into the greyed out variant?

I mean turning
image_ord_destruct2up.png
image_ord_destruct2up.png (277 Bytes) Viewed 8320 times
into
image_ord_destruct2grey.png
image_ord_destruct2grey.png (267 Bytes) Viewed 8320 times
I tried using gimp, but my artistic skills are pretty much non-existent.

Re: Making disabled buttons

Posted: 16 Aug 2015, 13:15
by Terminator
convert it to 256 colors(or less) than back to original if needed. this might works.

Re: Making disabled buttons

Posted: 16 Aug 2015, 16:27
by Tzeentch
what for?

Re: Making disabled buttons

Posted: 16 Aug 2015, 17:23
by xShadow421x
Per wrote:Many of the buttons in Warzone lack a 'disabled' (greyed out) variant, and I need some of them now. Is there a quick way to generate them, for example by using imagemagick to convert normal buttons into the greyed out variant?
Greetings,

Unfortunately, I'm not aware of any programs that would straight-forwardly do that without affecting the colors of the entire image. Basically you could play with it's Brightness/Contrast properties, but that could leave the whole button itself darker &/or lighter as well which would work technically, but may not match the Lightness/Darkness & Hue Saturation of the UI scheme overall (if that matters; your call). So that's the quick & dirty approach.
One way to achieve a better result is, I would isolate the icon from the button with the select tools, then cut and paste it on a separate layer above so that the button itself is on the first original layer below (usually referred to as "Background" by default). From here, you can adjust the icon's Brightness & Contrast independently from the button on this second layer so that you can more accurately match the color scheme of the UI overall. I personally sometimes would also go to the extent of adjusting the Hue and Saturation for more accuracy or even finding another greyed out button to pull the colors from it's pixels and match the colors by hand.

Also, one thing to keep in mind is if you're looking to make these buttons match the same "disabled" look as the recycle button you've linked; that image in particular has every other pixel of the icon itself, deleted/transparent. I'm not entirely sure of a better way to explain that, so here's the same image scaled up x1000%:
Scaled 1000%
Scaled 1000%
image_ord_destruct2grey_1000%.png (3.24 KiB) Viewed 8289 times
So basically, if you want these new buttons to have this mesh look, you'd essentially have to paint/cut out every other pixel of the icons in the same manner. No big deal really, just a slightly tedious process without special tools and/or techniques. :lecture:

Re: Making disabled buttons

Posted: 16 Aug 2015, 18:14
by stiv
Simplest thing might be to desaturate the image.

For example using imagemagick: mogrify -type Grayscale wz-image.png

We can make prettier ones later.

Re: Making disabled buttons

Posted: 18 Aug 2015, 15:09
by Per
I made a mask and after that stamping out new buttons was easy. But they probably should have some manual improvements later.

Examples:
image_ord_range3grey.png
image_ord_range3grey.png (291 Bytes) Viewed 8245 times
image_ord_retfiregrey.png
image_ord_retfiregrey.png (317 Bytes) Viewed 8245 times
image_ord_repair2grey.png
image_ord_repair2grey.png (358 Bytes) Viewed 8245 times
image_ord_guardgrey.png
image_ord_guardgrey.png (285 Bytes) Viewed 8245 times

Re: Making disabled buttons

Posted: 18 Aug 2015, 16:55
by xShadow421x
Unless you're looking to change or add features to their appearance later, I think you've pretty much nailed the look if that's what you were going for. So in that case, good work!