My process of processing the icons and how to repeat it…
(yea, smth like that would work for a title)
So first of all you would need to scan icon sheets, there is a lot of software able to do
this, but the main idea is to turn off all filters, auto adjustments to get raw scans as raw
as possible, also try keeping the resolution as high as possible. I used EPSON Scan and
for some reason it really liked to turn on auto contrast adjustment each time I scanned
something, so I was needed to turn it off after each scan. So just make sure all the auto
enhance things are turned off after each scan and you should be good to go.
And now for the processing part, I used Photoshop for all steps, but I think there are
some free software like Krita or Gimp that are able to do most of the important steps,
and you could find some workaround for the other steps... I think...
1) Import your scans in to Photoshop
2) It would be easier to adjust position and rotation of your files before the other steps,
so if you need to rotate or position something to get one sprite sheet, I recommend
doing it now
3) Invert colors, you want your icons to be white on black background
What you should get:
4) Turn the image grayscale, there are still some colors left that we need to get rid of (if
you zoom up a bit you could see red and blue pixels on the edges of the icons) that
could mess up some later steps
You can use default settings or try to customize them if you want, also keep in mind that
the image still has some noise in dark parts, we will get rid of it later, so for now you
don’t need to worry about it.
What you should get (All the blue and red pixels turned grayscale):
Now we will need to get rid of unwanted noise in dark parts, we could go the easy way
and simply use Levels, but this would mess up the icons a bit, so we will go the hard way
and keep the icons good looking.
5) Choose Color range in Select menu, selecting white colors to keep and dark colors to
remove will still mess up the icons the same way Levels would, but because we aren’t
just leveling the image we will be able to make some adjustments to selection later so
that we could keep the icons pretty much untouched while removing the noise.
A menu like this will appear and your mouse icon will change to color piker icon
I recommend keeping the Fuzziness value high, something between 190 and 200 will
probably work the best, now you will need to click on different parts of your icon to
select the right range of colors. In this step make sure there is no background noise
while the icons are still mostly selected. Some small noise dots are fine, we will remove
them later as well, but you should get rid of all big noise clusters. Just click in different
parts of the icons until the result looks good.
Here are some examples on how to select the right range of colors (The noise on the
first one is barely visible but there is still a lot of it):
Press OK and you should get something like this, everything that was white selected:
There are still some small selected noise things left and we will be removing them in the
next two steps
6) Contract selection, to remove those small selected noise pieces we will contract the
selection and then expand It, this way only big enough white areas will be selected (like
Icons)
So, the number of pixels you want to contract by is dependent on your scan resolution,
for me each Icon ended up at about 900 pixels, so I would contract by 3 pixels and then
expand by 8, but you can try other numbers, just make sure you expand the same or
higher number of pixels then contract
What you should get:
7) Expand selection, I want to keep transition between icons and background smooth,
so I will expand by higher number of pixels then I contracted
Again, the number of pixels is dependent on your scan resolution and the number you
contracted by. 8 will do it for me.
What you should get:
8) Invert selection, we will need to delete everything BUT the icons
What you should get:
9) Delete selected, simply press delete key and Photoshop should ask you what exactly
to delete, you can just choose Black to fil all the selection with black.
What you should get:
10) Deselect
What you should get:
But there are still some traces of my markup left, and the best way to remove them is to
erase by hand.
Although it could be hard to see some of them, so there is a trick to make it a lot easier
11) Choose Levels in this menu in the bottom right corner
After that you should see something like that in your properties tab
Now all you need to do is grab the white arrow on the right and drag it aaaaal the way
to the left
What you should get:
Now you can see ALL the marks, so all you need to do is to switch back to first layer and
draw over them with black. Also, you can hide and show the effect mask layer.
12) Remove unnecessary marks
And here is my final result:
As you can see all the icons have this hand drawn texture you wouldn’t get painting
them in most software, and the noise is completely gone.
So, from that point you can make icons transparent, splice them or do anything you
want.
Also, Huge thanks for your support!