Techniques to make good two-color images for icons?

[Count Mohawk]

Hey there Inn members. Happy 2019! or something

During the course of my lurking, I've watched a couple of people generate some pretty awesome icons for use in HeroScribe for our HQ25 quest pack monsters - particularly the Chaos Dwarf Anderas put together:

One thing these icons all have in common is that they are exactly two colors: black and white.

I'm currently working on making a new Quest Pack this year (actually I'm just picking up where I left off in 2016, but you know how these things go). One of the Monster types I want to use for it is a Water Elemental, and since the only currently-existing icon for Water Elementals in the Scribe is just a wave, I thought it would be neat to re-use the art on the back of the Water Spell cards for a new one.

Thing is, I'm no artist; my talents lie more towards the realm of mathematics. So, having attempted a practice on the Fire card back first, this is unfortunately the best I've managed so far:

The first one looks pretty good, of course, but it's a grayscale rather than pure two-color black-and-white. And while the second image meets that criterion, the edges are a little too rough and don't quite capture enough of the original art.

Is there a relatively easy method you guys use when converting images to icons that I could learn? Any tips?

[Goblin-King]

What you are trying to do is essentially the right way to do it.
You mistake is probably working with too tiny images.

Start by using a very large scan.
Gray scale it.
Experiment with changing the lightness and contrast (contrast goes all up) until you find the sweet spot where the right elements are getting black/white as appropriate. DON'T manually set the image to only 2 colors!
Use a brush tool to clean up the worst noise.
Finally scale it down to the appropriate size.

Also you got one thing wrong. The image of the dwarf is NOT exactly two colors. It has dozens of gray colors to help smooth the lines between the black and white.
Photoshop will do this for you when you scale the image down.

Imagine a 100x100 grid on top of a black and white drawing. Now we put a 10x10 grid on top.
Each of these larger grid squares has to be recolored to the average color of each of the original grid squares contained within.
There might be 25 white squares and 75 black squares. That will result in that single large grid square being a dark grey.
That's essentially what happens when you scale a large image down. the jagged lines will automatically be smoothed.


But all that being said, there is no easy one-click way. Anderas' dwarf is clearly drawn from scratch, and messing around in Photoshop can never create a similar style.
There's a reason people pay good money to artists to create stuff - it's actually freaking hard if you want it to look great

[Anderas]

My Dwarf was a black and white image taken from a Heroquest fanmade card art picture, then heavily repainted and edited on my wacom tablet.

Your fire elemental is not too bad already. I think I could press it through my icon maker. It not only vectorizes it, it also smoothes too rough edges while keeping real corners. This is the reason why that dwarf looks good even though I am rather medium talented.

Still I had to make three tries: those icons are displayed so small in the end that you can have only a very limited number of black-white borders, at least if you want the details to be recognizable. As a rule of thumb, six or seven changes along any random line through the picture are visible. That dwarf there is way beyond borderline already.

Finally, it worked best if I had not 2 colors but full color pictures. The transparent background needs a separate color from the other two.
I used light gray and black for the interior, and white for the transparent background. My vectorizer will then replace the colors with black, white, transparent; or with the American green colour scheme.
The rest of the colors help greatly to have smooth edges during vectorization. That said, it should be mostly two colored, those extra colours are only for the borders. Just crank up the contrast and choose a good mid point until it looks good. Then sigh. Then take your mouse and do some manual adjustments.

If you'd like me to vecorize your images, I'd love them to have around 200 pixels in every direction. If a pointy hat or nose or beard is sticking out of the icon circle, add some more pixels in that direction. It would also work with more or less, but is most convenient (for me) with around 200px.

[Goblin-King]

Anderas' dwarf is clearly drawn from scratch

My Dwarf was a black and white image taken from a Heroquest fanmade card art picture, then heavily repainted and edited on my wacom tablet.

Well *lemony goodness*...

Still, it's suggested a lot of effort still went into giving it that particular "icon" look

[Anderas]

Anderas' dwarf is clearly drawn from scratch

My Dwarf was a black and white image taken from a Heroquest fanmade card art picture, then heavily repainted and edited on my wacom tablet.

Well *lemony goodness*...

Still, it's suggested a lot of effort still went into giving it that particular "icon" look

My dwarf might or might not resemble roughly this picture:

14386441912_79c41ae7d0_o (1).jpg

Of course, that one was way too detailed.

[Thor-in]

I've tried to make new icons a few years back for a quest idea I had. However I always ended up falling because I couldn't figure the photo shop Gimp out correctly.

[j_dean80]

I've tried to make new icons a few years back for a quest idea I had. However I always ended up falling because I couldn't figure the photo shop Gimp out correctly.

I do mine I guess the "redneck way". A mix of MS Paint and InkScape (free program).

Some results come out better than others but not as good as Anderas' Chaos Dwarf. Gets the job somewhat done though.

[Count Mohawk]

Thanks for the tips, everyone. I guess there's no shortcut for quality in this business!

Anderas, I would like to take you up on the offer to run these images through your vectorizer, once I've done all 4 elementals. Here's a preview of the Water elemental I worked on this morning:


(Fun fact: Did you know there are currently no icons for Earth elementals? The other three have at least one.)

[StratosVX]

Quick question for Anderas and GK, wouldn't you get better results by scaling the image down after it was vectorized? I would think scaling it down while it was a raster image would introduce artifacting that would be carried over to the vector image as uneven lines/oddly placed corners.

[Anderas]

Yes sure. That's why I like to vectorize 200px images or even bigger ones. Getting a heroscribe 47px image out of a vector graphic is easy, the other way round, not so much.