Making disabled buttons

Improving the artwork in Warzone2100 - not for mod discussions
Post Reply
Per
Warzone 2100 Team Member
Warzone 2100 Team Member
Posts: 3780
Joined: 03 Aug 2006, 19:39

Making disabled buttons

Post 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 8269 times
into
image_ord_destruct2grey.png
image_ord_destruct2grey.png (267 Bytes) Viewed 8269 times
I tried using gimp, but my artistic skills are pretty much non-existent.
User avatar
Terminator
Regular
Regular
Posts: 1077
Joined: 05 Aug 2006, 13:46
Location: Ukraine
Contact:

Re: Making disabled buttons

Post by Terminator »

convert it to 256 colors(or less) than back to original if needed. this might works.
Death is the only way out... sh*t Happens !

Russian-speaking Social network Group http://vk.com/warzone2100
User avatar
Tzeentch
Trained
Trained
Posts: 309
Joined: 14 Oct 2012, 14:24

Re: Making disabled buttons

Post by Tzeentch »

what for?
User avatar
xShadow421x
Rookie
Rookie
Posts: 28
Joined: 13 Apr 2013, 17:22
Location: Earth

Re: Making disabled buttons

Post 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 8238 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:
ImageImageImageImage
stiv
Warzone 2100 Team Member
Warzone 2100 Team Member
Posts: 876
Joined: 18 Jul 2008, 04:41
Location: 45N 86W

Re: Making disabled buttons

Post 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.
Per
Warzone 2100 Team Member
Warzone 2100 Team Member
Posts: 3780
Joined: 03 Aug 2006, 19:39

Re: Making disabled buttons

Post 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 8194 times
image_ord_retfiregrey.png
image_ord_retfiregrey.png (317 Bytes) Viewed 8194 times
image_ord_repair2grey.png
image_ord_repair2grey.png (358 Bytes) Viewed 8194 times
image_ord_guardgrey.png
image_ord_guardgrey.png (285 Bytes) Viewed 8194 times
User avatar
xShadow421x
Rookie
Rookie
Posts: 28
Joined: 13 Apr 2013, 17:22
Location: Earth

Re: Making disabled buttons

Post 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!
ImageImageImageImage
Post Reply