Programs Needed



Gimp



Inkscape



Steps



Take Screenshot (SS)

Open Gimp, Edit->Paste As-> New Image.

Crop SS so only the icon you are working with is visible.

Save as .png





Open Inkscape

Go to Document Properties and set your document size to 64 x 64 px





Now simply drag and drop your SS onto Inscape and choose embed when it asks.





You will notice that with most Icons they are rather simple shapes this makes it fairly easy to replicate them.



Create a new layer so we can more easily manipulate shapes above the picture without worrying about selecting it.

Lock the original layer.







Layer->Add Layer, at the popup name the layer what ever you want, the default setting of above current layer is also what you want.



Note: It does not matter where your SS is, although I would suggest away from the borders of you document so the borders do not visually impede you.



At this point you want to build your Icon, the layer you should be on is the new layer you created.



Select the Tool Create circles. this tool allows you to not only make circles but ovals, but since we want to copy the icon we Ill be wanting to make perfect circles to do this easily you can hold down combinations of modifier keys (control, alt, shift) to lock ratios and to control from where the circle expands as you drag it.



Using all 3 modifier it will allow you to draw a circle that expands from its center, so start by dragging as close to the center of the icon as you can drag outwards to approximate the SS Icon outer circle.



Since this solid circle makes it hard to see the picture beneath for now change opacity to 50%





Now open up the transform menu Object -> Transform



Scale the circle to 64x64 px



Then use your keyboard arrows while holding down alt to move the circle centered over the SS icon.





Select the circle and use ctr+D to duplicate that shape



Now using the corner arrows while holding down shift+ctrl you can re size the new circle to the size of the ring in the Icon Also remove the fill of the new circle and enable stroke and set the stroke color to black, the opacity to 100% and the stroke width to 1.





Duplicate this newest ring shrink it and align it to one of the small circles.



Click on the circle again and the arrows around your selection will change, you now are able to rotate and skew your circle. Also a cross hair will now appear in the center of you selection, this is the rotational center.



On the right side of Inkscape are snap to options enable all the snap to options that I have highlighted in the picture below.



These options turn on snapping to centers of objects this will allow you to move the rotational center of your small circle to that of your big ring. You will likely have to zoom in (cntrl + mousewheel up) to get it to snap to the correct point.





Now duplicate this ring and, using the transform panel, rotate your selection by 120 degrees. Again duplicate and rotate that selection another 120 degrees.





At this point things likely will not match the picture of the icon, DO NOT TRY TO FIX THAT. It is alright, remember that because you are working from a pixilized version it is likely nothing will ever match up exactly. It is far more important that the Icon you are building be consistent within itself.



Now for the letters, using the "create and edit text objects" tool add a lower case n to your work.



Using the text and font editor make sure your selection is in Arial, size is not important because we will use cntl+shift and re sizing to get it to the appropriate size.



When you have matched its size to the SS icon duplicate it twice and change one to a p again using the "create and edit text objects" tool.



Now open the Align and Distribute page and make sure Last selected is chosen now select the leter you wish to align first then holding shift select the ring you want to align it to and press center vertically and center horizontally. Do this for all three letters.





Now duplicate one of your circles and re size it to match the circle in the upper right hand corner.



You can turn on snap to path to make it easier to center.





Now something to note for Letters is that gimp doesn't like importing them form svg so we will need to convert our letters(objects) to paths. Path -> Objects to Paths. DO this for all three letters individually.





Now we can change our shapes colors to match the SS colors.



We do this in reverse order because if we change the largest circle first to black it makes it harder to see the others later.



Small upper right circle, remove stroke and enable fill but color too "4fdbffff" (found this out using gimp and eyedropper which gives 4fdbff last two ff are for opacity).



Letters remain black.



Inner circles, loose stroke and gain fills "4fdbffff" and white respectively.



Ring, stroke changes too "4fdbffff".



Background circle, Fill changes to black, Opacity goes up to 100%.



Now group all of it by dragging a selection box over every thing and hitting Cntrl+G.



Use Align with the option set to Relative to Page and center everything.





You may notice that the letters don't look exactly right, this could be from pixelization distortion or because I didn't do a good enough job aligning and re sizing the letters or because the original icon was not distributed evenly, if you want you can at this point ungroup the Icon and shift things around to suite your tastes by using alt + arrows.



At this point you can recolor what you want to fairly easily.



Now save the file as a Plain SVG file then open it in Gimp and save it as a PNG file.



Fairly simple, there you go.

Thanks for putting in the time to make this. Now that the original icons are released, I was able to recolorize 15 Hissho icons in about a minute.