• Advertisement

Make a small donation to Ye Olde Inn!

Donate via Paypal

Every cent received goes toward Ye Olde Inn's maintenance and allows us to continue providing the best resources for HeroQuest and Fantasy Gaming fans.

Techniques to make good two-color images for icons?

Discuss Icons for use on Cards and Quest Maps.

Techniques to make good two-color images for icons?

Postby Count Mohawk » Saturday January 26th, 2019 10:17pm

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:
Image
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:
ImageImage
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?


Rewards:
Grin's Stone Map Created a Hot Topic. Shattered a Skeleton! Destroyed a Zombie! Crushed a powerful Chaos Warrior! Smashed a massive Gargoyle!
User avatar
Marquis of Math
Count Mohawk

Elven Warrior
Elven Warrior
 
Posts: 656
Joined: Thursday July 11th, 2013 5:18pm
Location: New England, USA
Forum Language: English (United States)
Evil Sorcerer: Zargon
Hero:
Usergroups:
Champion Group Member

Advertisement

Re: Techniques to make good two-color images for icons?

Postby Goblin-King » Sunday January 27th, 2019 6:24am

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 |_P


Rewards:
Created a Hot Topic. Participated in four (4) Miniature Exchanges.Participated in three (3) Miniature Exchanges. Destroyed a Zombie! Encountered a menacing Chaos Warlock!
User avatar
Ye Olde Judge Dredd
Goblin-King
Really looks like David Bowie

Polar Warbear
Polar Warbear
 
Posts: 3437
Images: 85
Joined: Monday September 26th, 2011 2:54pm
Location: Sønderholm, Denmark
Forum Language: British English
Evil Sorcerer: Morcar
Hero:
Usergroups:
Wizards of Zargon Group Member Adventurers' Guild Group Member Artists Group Member Champion Group Member

Re: Techniques to make good two-color images for icons?

Postby Anderas » Sunday January 27th, 2019 8:12am

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. :barbarian:

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.
Last edited by Anderas on Sunday January 27th, 2019 8:30am, edited 1 time in total.


Rewards:
Hosted a Play-by-Post game. Played a turn in a Play-by-Post game. Created a Hot Topic. Participated in four (4) Miniature Exchanges. Zealot Miniatures: Twisting Catacombs Kickstarter Backer Destroyed a Zombie! Encountered a menacing Chaos Warlock!
User avatar
Anderas
NOT Andreas!

Yeti
Yeti
 
Posts: 2775
Images: 33
Joined: Saturday September 20th, 2014 7:02am
Forum Language: British English
Evil Sorcerer: Morcar
Hero:
Usergroups:
Adventurers' Guild Group Member Artists Group Member
Champion Group Member

Re: Techniques to make good two-color images for icons?

Postby Goblin-King » Sunday January 27th, 2019 8:24am

Goblin-King wrote:Anderas' dwarf is clearly drawn from scratch

Anderas wrote: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*... :lol:

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


Rewards:
Created a Hot Topic. Participated in four (4) Miniature Exchanges.Participated in three (3) Miniature Exchanges. Destroyed a Zombie! Encountered a menacing Chaos Warlock!
User avatar
Ye Olde Judge Dredd
Goblin-King
Really looks like David Bowie

Polar Warbear
Polar Warbear
 
Posts: 3437
Images: 85
Joined: Monday September 26th, 2011 2:54pm
Location: Sønderholm, Denmark
Forum Language: British English
Evil Sorcerer: Morcar
Hero:
Usergroups:
Wizards of Zargon Group Member Adventurers' Guild Group Member Artists Group Member Champion Group Member

Re: Techniques to make good two-color images for icons?

Postby Anderas » Sunday January 27th, 2019 9:09am

Goblin-King wrote:
Goblin-King wrote:Anderas' dwarf is clearly drawn from scratch

Anderas wrote: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*... :lol:

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


:lol: :lol: :lol:

My dwarf might or might not resemble roughly this picture:
14386441912_79c41ae7d0_o (1).jpg


Of course, that one was way too detailed. |_P
You do not have the required permissions to view the files attached to this post.


Rewards:
Hosted a Play-by-Post game. Played a turn in a Play-by-Post game. Created a Hot Topic. Participated in four (4) Miniature Exchanges. Zealot Miniatures: Twisting Catacombs Kickstarter Backer Destroyed a Zombie! Encountered a menacing Chaos Warlock!
User avatar
Anderas
NOT Andreas!

Yeti
Yeti
 
Posts: 2775
Images: 33
Joined: Saturday September 20th, 2014 7:02am
Forum Language: British English
Evil Sorcerer: Morcar
Hero:
Usergroups:
Adventurers' Guild Group Member Artists Group Member
Champion Group Member

Re: Techniques to make good two-color images for icons?

Postby Thor-in » Sunday January 27th, 2019 9:58am

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.
:skeleton: "In The End We Are All Shadows and Dust" :skeleton:


Rewards:
Participated in two (2) Miniature Exchanges.
Grin's Stone Map Slain a measly Goblin! Slaughtered an Orc! Killed a mighty Fimir! Shattered a Skeleton! Destroyed a Zombie! Unravelled a Mummy! Crushed a powerful Chaos Warrior! Smashed a massive Gargoyle! Encountered all eight (8) Game System monsters. Encountered a menacing Chaos Warlock!
User avatar
Thor-in

Elven Warrior
Elven Warrior
 
Posts: 662
Images: 8
Joined: Monday April 28th, 2014 3:28pm
Location: New York State
Forum Language: English (United States)
Evil Sorcerer: Zargon
Hero:
Usergroups:
Adventurers' Guild Group Member Champion Group Member

Re: Techniques to make good two-color images for icons?

Postby j_dean80 » Sunday January 27th, 2019 10:10am

Thor-in wrote: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.
Blood - Good to the last drop


Rewards:
Participated in two (2) Miniature Exchanges. Grin's Stone Map Destroyed a Zombie! Encountered a menacing Chaos Warlock!
User avatar
j_dean80

Halberdier
Halberdier
 
Posts: 1290
Images: 30
Joined: Tuesday December 6th, 2016 2:48pm
Location: Illinois, USA
Forum Language: English (United States)
Evil Sorcerer: Zargon
Hero:
Usergroups:
Adventurers' Guild Group Member Artists Group Member Champion Group Member

Re: Techniques to make good two-color images for icons?

Postby Count Mohawk » Sunday January 27th, 2019 12:29pm

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:
Image

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


Rewards:
Grin's Stone Map Created a Hot Topic. Shattered a Skeleton! Destroyed a Zombie! Crushed a powerful Chaos Warrior! Smashed a massive Gargoyle!
User avatar
Marquis of Math
Count Mohawk

Elven Warrior
Elven Warrior
 
Posts: 656
Joined: Thursday July 11th, 2013 5:18pm
Location: New England, USA
Forum Language: English (United States)
Evil Sorcerer: Zargon
Hero:
Usergroups:
Champion Group Member

Re: Techniques to make good two-color images for icons?

Postby StratosVX » Sunday January 27th, 2019 2:00pm

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.


Rewards:
Zealot Miniatures: Twisting Catacombs Kickstarter Backer
User avatar
Scribe of Heroes
StratosVX
I hate snakes, Jacques...

Ogre
Ogre
 
Posts: 822
Joined: Tuesday November 6th, 2012 12:44am
Location: Utah, USA
Forum Language: English (United States)
Evil Sorcerer: Zargon
Hero:
Usergroups:
Champion Group Member

Re: Techniques to make good two-color images for icons?

Postby Anderas » Sunday January 27th, 2019 4:02pm

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.


Rewards:
Hosted a Play-by-Post game. Played a turn in a Play-by-Post game. Created a Hot Topic. Participated in four (4) Miniature Exchanges. Zealot Miniatures: Twisting Catacombs Kickstarter Backer Destroyed a Zombie! Encountered a menacing Chaos Warlock!
User avatar
Anderas
NOT Andreas!

Yeti
Yeti
 
Posts: 2775
Images: 33
Joined: Saturday September 20th, 2014 7:02am
Forum Language: British English
Evil Sorcerer: Morcar
Hero:
Usergroups:
Adventurers' Guild Group Member Artists Group Member
Champion Group Member

Next

Return to Icons

Who is online

Users browsing this forum: CommonCrawl [Bot] and 0 guests