Button Men customizing toolkit (Beta)

[TheOrgg]

So the Fanatics 2020 are coming up, so I started trying to figure out how to make these guys for the site.

I think I've found how to do the shade and gleam and I'm going to post the three images to use and a short guide on how to use them.

First off, though, can I get feedback on how the results look? I used the Eberk original blank and "converted it" with these images.

Oops. That one's too small. Here's the 150x150.

[TheOrgg]

Here's how to do it. Get the button image at 800x800 px. Open the first file (it's 830px wide). Paste the button art as a layer and cover the white circle totally. Then paste the second part over the first (it should fit right on top of the previous image as it's the same size). Resize the image to 150x150px and export it as .png.

Bottom Layer with white button guide (800x800px for the button art) Top glare/shine/partially transparent white streak layer

Both top and bottom layers combined for those who already have photoshop and will just chop the two apart into different layers, line up the 800px art by overlapping the white bit and then shifting the white layer to the top. One less save as... to do.

[TheOrgg]

I'm also working on a kit with all the symbols and such pre-sized for easy creation of button stats. I'm almost done with it.

[blackshadowshade]

I'm pretty sure what @Hurtay did is similar to your approach, but she cut the shadow off the bottom right of an existing button and imitated the shine on the top left based on an existing button.

You may want to see if what you have there looks like what we have on, for example, our Soldiers buttons.

To my eye, your first attempt has no top-left shine effect, and the shadow is a tad too subtle.

[TheOrgg]

I used Amera Wintersword as the comparison. The white background of the site kills the shine, though. Well, If I have the time I'll try again. I'm not sure what else to do, though.

Here's the cut-and-paste kit, with a top and a 'readme' layer. It's intended for use with an 800x800px image and 100x100px dice circles. (Yes, that's the normal size ratio. The original blanks I've got are about 2500px with 300px images.) The only thing it doesn't have that I know of is Sheep button circles for the Sleep Dice.

Here's what the two layered files should look like:

Foreground

Background

[TheOrgg]

Second Shading Attempt. Large, pre-resize

Small for the site.

[TheOrgg]

I notice the cutoff at the bottom. I guess I have to resize it to be bigger if that shadow works.

I think I fixed it. It is smoothly circular when exporting from GIMP.

[blackshadowshade]

That's certainly an improvement, @TheOrgg. The drop shadow is certainly visible now, and the shine is visible.

It's not quite as convincing at giving the 3D effect as the shadow and shine on, for example, Kublai, but it's pretty good.

[blackshadowshade]

Maybe the thing that's missing is the relative darkening just inside the button border, which is really quite pronounced when I look at Kublai.

[dwvanstone]

It's cool how much work you're doing for this, @TheOrgg!!! Thank you!

[TheOrgg]

No worries. I just wish I actually knew how to use image editing tools. lol! I'm spitballing and guessing on the shine. Place the 800x800px image covering the white circle.

Place this atop the above image and the button art. Shrink to 150x150px and export for this site.

[TheOrgg]

I hate how you can't see the shine in the images above due to the background color of the site itself.

[TheOrgg]

Here's the layout for a button. I've got regular, Twin, and Warrior on there. You re-color the dots and leave the outline alone to customize which dice are in each circle. Use the kit from above to make the circles, but scale the kit up by 100%.

Oh, important note-- this is for GIMP.

BMAll-in-One.zip

[TheOrgg]

This is a copy of the above file but with 'tutorials' on how to do the curved name and the outline of the name. It also has the symbol kit pieces you can cut and paste together into a new image and use.

BMAll-in-One(2).zip

[TheOrgg]

Also, I'm trying to study the Button Men poster to figure out how CAG did their shines. I think they just whited-out a segment of the button edge.

[TheOrgg]

Ah. They white out a segment of the button edge and under that pure white segment have a 20% opaque larger version of the whited out bit.

[TheOrgg]

This isn't the best looking, but shows what can be done. Lemme work on it some. Yeah, make two layers. Have a totally white streak/blob in the topmost one, then a 30% transparency for the layer right under it, and draw a white blob there to expand the 'shine.' Don't use the tool menu for the transparency or it'll double-up the color if you go over it again.

The trouble will be getting realistically-shaped 'shines.'

[TheOrgg]

BMTemplate2020alpahtest.zip

This is VERY rough. feel free to add any and all suggestions (yes, rounds are coming, but I want to get the different dice types fixed up first. This is based on the file I made the card versions of things in, so that's why it's a rectangle as of now.

[TheOrgg]

Opinions needed. Which version of Select dice would you prefer? There are five different frames as 'placeholders' for the selections. Which should I use, or is there a better way to depict Select positions? The way James did them for Fightball won't work well, as Ice Cream Warriors has a different amount of Select dice.

[scipiohaereticus]

I think I prefer the fourth version, no stuff sticking out at the sides and the fifth one looks a bit flimsy.

[dwvanstone]

I don't understand the question. I see there are five different shapes on the right. Will they be filled in with numbers? Are they supposed to be blank?

What are Select Dice? Could you link to a definition?

[jl8e]

Select dice are the fightball "choose five of this larger pool of dice" mechanic

The idea is to represent them as some kind of blank frame to be filled in with the ovals, and he put up a variety of possible frame shapes

My main comment is that there should be more separation between the frames and the ovals. Left-aligning them, for instance. I'd probably go with one of the last two designs

[dwvanstone]

Thanks - I didn't have the context.

Maybe just five underlines to represent where the selections should go. (I think of underscores and an easy UI indicating something that needs to be filled in there.) If you don't like underscores, my favorite is the top one: the simple oval.

Or how about five blank ovals (the top selection) on the right side with underlines in each one?

[TheOrgg]

On the card version, I do want to separate out Select choices vs other types that are left-aligned (Warrior, Reserve, & Aux come to mind). I did center them (and now have to move... whatever 13x15 is worth of numbers, making sure they're centered...). It's a good change. After that and making sure everything's aligned, the card one should be finished, minus the little tutorial cards telling how to make dice frames from the Paths menu and such. Then I'll start working on the button version.

I did try the empty smaller oval and a blank in it, but it ended up looking more like a die type (like Wildcard Dice or something) than something that needed filling in. Since 3/5 people seemed to be good with the fourth version, which I liked best, too, I went with it.

EDIT: A preview of the dice frames. I found out a trick (the chain isn't a lock preventing editing; it makes things move together) so this might be out in another week for beta testing. You will have to update GIMP, though. Sorry. :( I needed the .pdf features of the newest to submit a resume.

[TheOrgg]

Had to update to the latest version of GIMP, so you probably will have to do so, too. XYZ asked for the button template, so here it is (plus the font Button Men uses, which you'll need to install before installing the latest GIMP). There's no user manuals on how to create the dice frames with the paths, but I'll explain it here. Click the Paths menu, then the frame you want to create. Go back to layers, create two new layers. Select-->From Layer to select that section. Then click the paint can and choose the color you want as the top of the Dice Frame. Then click Select-->Grow, and enter two. Click the layer below the first one, and choose the layer for the outline of the frame (usually black). Viola, one dice frame of the appropriate type.

This upload does not have non-right-side dice number positions yet, so you'll have to move them yourself if you want Aux, Warrior, Reserve, Select, or 8-Poison Dice Frames. I'm working on getting that fixed, but it is slow going. BMTemplate2020buttonrough.zip

[TheOrgg]

BMTemplate2020Button.zip

Here's the button template. It should have the directions in the readme that'll let someone who isn't familiar with GIMP make their button without that much trouble. You'll probably need the latest version of GIMP to open it.

The card version for the two of you who might want it will be done as soon as I get around to repositioning a few numbers and figuring out how to notate Batch Dice.

[TheOrgg]

So an easy update 'cheat' on how to make a 'shine' that looks pretty decent.

For the shadow, it's a black circle the same size as the button, but moved to the right and down a little, plus make it slightly transparent. If you want that double-layer shadow, use two and overlap them as you will.

For the shine, USE A BLACK CIRCLE with 85+% transparency, adjusted for the button. I haven't noticed a pattern, but some buttons need a slightly darker circle to show up. Move this circle to the top layer and move it again down and to the right a little. This will leave a 'crack' that is lighter than the rest of the button and complete the 'round button shape' illusion we're chasing. Credit goes to Fog for figuring this one out with the Fanatics.
If you want you could have your 'shine' edge somewhere else, but it looks best if the moon-shaped highlight is opposite of the shadow.

Also, if you want to make buttons, you'll need to keep a bit of the border and not put the shine/shade on it.

If I get time this summer, I might fix this up a bit better.