Making disabled buttons

Improving the artwork in Warzone2100 - not for mod discussions

Making disabled buttons

Postby Per » 16 Aug 2015, 11:24

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 3803 times
into
image_ord_destruct2grey.png
image_ord_destruct2grey.png (267 Bytes) Viewed 3803 times


I tried using gimp, but my artistic skills are pretty much non-existent.
Per
Warzone 2100 Team Member
Warzone 2100 Team Member
 
Posts: 3549
Joined: 03 Aug 2006, 19:39

Re: Making disabled buttons

Postby Terminator » 16 Aug 2015, 13:15

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
Terminator
Regular
Regular
 
Posts: 1037
Joined: 05 Aug 2006, 13:46
Location: Ukraine

Re: Making disabled buttons

Postby Tzeentch » 16 Aug 2015, 16:27

what for?
More or less grey
User avatar
Tzeentch
Trained
Trained
 
Posts: 233
Joined: 14 Oct 2012, 14:24

Re: Making disabled buttons

Postby xShadow421x » 16 Aug 2015, 17:23

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%:
image_ord_destruct2grey_1000%.png
Scaled 1000%
image_ord_destruct2grey_1000%.png (3.24 KiB) Viewed 3772 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
User avatar
xShadow421x
Rookie
Rookie
 
Posts: 21
Joined: 13 Apr 2013, 17:22
Location: Earth

Re: Making disabled buttons

Postby stiv » 16 Aug 2015, 18:14

Simplest thing might be to desaturate the image.

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

We can make prettier ones later.
stiv
Warzone 2100 Team Member
Warzone 2100 Team Member
 
Posts: 876
Joined: 18 Jul 2008, 04:41
Location: 45N 86W

Re: Making disabled buttons

Postby Per » 18 Aug 2015, 15:09

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 3728 times

image_ord_retfiregrey.png
image_ord_retfiregrey.png (317 Bytes) Viewed 3728 times

image_ord_repair2grey.png
image_ord_repair2grey.png (358 Bytes) Viewed 3728 times

image_ord_guardgrey.png
image_ord_guardgrey.png (285 Bytes) Viewed 3728 times
Per
Warzone 2100 Team Member
Warzone 2100 Team Member
 
Posts: 3549
Joined: 03 Aug 2006, 19:39

Re: Making disabled buttons

Postby xShadow421x » 18 Aug 2015, 16:55

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
User avatar
xShadow421x
Rookie
Rookie
 
Posts: 21
Joined: 13 Apr 2013, 17:22
Location: Earth


Return to Artwork