I'm currently working on a Unity3D project. I have created some 64x64 px png sprites in Gimp that I want to convert into 3D meshes in Blender. Thus, I need to convert the bitmap files into svgs thanks to Inkscape.
I imported a bitmap in Inkscape (A) and selected Trace Bitmap. I configured the settings so that the result keeps the pixelized aspect of the original bitmap. The result in the preview window is exactly as I want it to be (B), but when I eventually trace the bitmap, everything looks less sharp and simplified (C).
Plus, I tried to remove the background (which is the alpha chanel on the corners), but the tool also removes the white fill of the circle (which is part of the foreground), and I couldn't manage to do that neither.
I also tried to use the trace pixel art tool but the results is still smoothed.
First off, if you need 64x64px .svg files why do you care if you're not getting all the "stair-stepping" from the raster images? They're going to be seen at 64x64px. Looking at the example file thumbnail, C looks better than A. You actually want to get rid of that aliasing.
Secondly, auto-trace is a great tool but it isn't magic. Actually the result you got was pretty good for being fed a 64x64px bitmap. As for the alpha turning white, just select the corners and delete them.
Third, if I were you and the rest of the bitmaps you have are as basic as the example, I'd trace them all by hand. The less points/nodes the better! You'll discover I'm right when you import them into Blender. I think the point of using .svgs instead of .pngs is because .svg scales and are always lightweight as opposed to any bitmap format.
thanks for your answer. I agree with you that C looks better than A, but that's because A is displayed compressed, the original bitmap is as joined in this answer. The final look that I want to obtain is some 3D cubish logo, each pixel resulting in an extruded cube. I don't know if I'm clear enough please correct me if it's not!
I think I will have to trace them by hand indeed, but I'im not sure how to achieve this pixellized look with inkscape, I'll have to keep on searching.
I forgot to mention it, but I already unchecked the settings in the options tab before my first post. Nice try!
Thanks for the turotial, I found it yesterday and tried to use it for re-creating my icon. The thing is, even though it's great to make around 8 x 8 px images as in the tutorial, it's rather complicated to place each pixel one by one for a 64 x 64 px image.
In GIMP I enlarged the original bitmap 1000%, no interpolation to keep the colors pure, to give Inkscape something to work with. I saved it as an 8-bit PNG (embedded in the .svg). Your file was traced from a bitmap file too small for Inkscape to really outline those big fat pixels you're looking for.
NOW here's where the fun begins. If you open the example above in Inkscape, you'll see that the layers of the auto-trace inverted paths for what you need in Blender (you'll see what I mean). All traced objects are like stencils stacked one on top of the other. You are going to have to do some path operations to really isolate in the pieces necessary for Blender. Otherwise, you'll have to trace by hand.
The moral of the story is "don't work in 64x64px!" Work as big as necessary THEN reduce to size in Inkscape. Actually, it's the render in Blender that has to be 64x64px!
Thank you so much for your answer. That seems like a lot of fun! Ehe,. I'll give it a try, I'm not fixed on the definitive look of the icons so I guess I'll do the hard work at the very end!
Yup I guess I was wrong with my whole "pixel art is low-res" thinking. Lesson learnt, thank you again!
I took a quick look and it seems that simply unchecking the "Stack scans" option in the auto-trace tool solved the issue.
EDIT: (Sorry I just realized I could edit a message, I should have done that instead of posting another comment)
RE-EDIT: I also solved my "remove-background issue", which was once again entirely due to a misunderstanding from myself: I simply had to increase the color steps from 5 to 6 (in order to include the white as a color step) so that Inkscape knows that this is an actual color that I want to keep.
Yes everything looks as I wanted (see the attached video). This is not the final result, but now I know the workflow to follow in order to make these 3D "pixelized" models.
Beyond the Basics Issues when converting 64x64px png to svg
Inkscape.org
Hi everyone,
I'm currently working on a Unity3D project. I have created some 64x64 px png sprites in Gimp that I want to convert into 3D meshes in Blender. Thus, I need to convert the bitmap files into svgs thanks to Inkscape.
I imported a bitmap in Inkscape (A) and selected Trace Bitmap. I configured the settings so that the result keeps the pixelized aspect of the original bitmap. The result in the preview window is exactly as I want it to be (B), but when I eventually trace the bitmap, everything looks less sharp and simplified (C).
Plus, I tried to remove the background (which is the alpha chanel on the corners), but the tool also removes the white fill of the circle (which is part of the foreground), and I couldn't manage to do that neither.
I also tried to use the trace pixel art tool but the results is still smoothed.
Has anyone an idea on how to achieve this?
Thanks!
First off, if you need 64x64px .svg files why do you care if you're not getting all the "stair-stepping" from the raster images? They're going to be seen at 64x64px. Looking at the example file thumbnail, C looks better than A. You actually want to get rid of that aliasing.
Secondly, auto-trace is a great tool but it isn't magic. Actually the result you got was pretty good for being fed a 64x64px bitmap. As for the alpha turning white, just select the corners and delete them.
Third, if I were you and the rest of the bitmaps you have are as basic as the example, I'd trace them all by hand. The less points/nodes the better! You'll discover I'm right when you import them into Blender. I think the point of using .svgs instead of .pngs is because .svg scales and are always lightweight as opposed to any bitmap format.
My .02¢ . Good luck!
Hi greytomorrow,
thanks for your answer. I agree with you that C looks better than A, but that's because A is displayed compressed, the original bitmap is as joined in this answer. The final look that I want to obtain is some 3D cubish logo, each pixel resulting in an extruded cube. I don't know if I'm clear enough please correct me if it's not!
I think I will have to trace them by hand indeed, but I'im not sure how to achieve this pixellized look with inkscape, I'll have to keep on searching.
Many thanks!
Hi Gautzilla,
The trace bitmap menu has a second tab: options.
You could try to uncheck the settings on that tab, in order to get a more pixelized result.
There is also a nice tutorial on how to make pixel art in Inkscape:
https://goinkscape.com/how-to-draw-pixel-art-in-inkscape/
Hi Kirstie,
I forgot to mention it, but I already unchecked the settings in the options tab before my first post. Nice try!
Thanks for the turotial, I found it yesterday and tried to use it for re-creating my icon. The thing is, even though it's great to make around 8 x 8 px images as in the tutorial, it's rather complicated to place each pixel one by one for a 64 x 64 px image.
Thanks anyways!
I wrote this reply this morning...but never clicked "Post"! 🤣
Gautzilla, here is a (semi-) quick test I did using auto-trace of a sprite downloaded from https://www.spriters-resource.com/arcade/arabian/sheet/128199/ just for testing purposes.
In GIMP I enlarged the original bitmap 1000%, no interpolation to keep the colors pure, to give Inkscape something to work with. I saved it as an 8-bit PNG (embedded in the .svg). Your file was traced from a bitmap file too small for Inkscape to really outline those big fat pixels you're looking for.
NOW here's where the fun begins. If you open the example above in Inkscape, you'll see that the layers of the auto-trace inverted paths for what you need in Blender (you'll see what I mean). All traced objects are like stencils stacked one on top of the other. You are going to have to do some path operations to really isolate in the pieces necessary for Blender. Otherwise, you'll have to trace by hand.
Good luck!
The moral of the story is "don't work in 64x64px!" Work as big as necessary THEN reduce to size in Inkscape. Actually, it's the render in Blender that has to be 64x64px!
Hi!
Thank you so much for your answer. That seems like a lot of fun! Ehe,. I'll give it a try, I'm not fixed on the definitive look of the icons so I guess I'll do the hard work at the very end!
Yup I guess I was wrong with my whole "pixel art is low-res" thinking. Lesson learnt, thank you again!
Hi back,
I took a quick look and it seems that simply unchecking the "Stack scans" option in the auto-trace tool solved the issue.
EDIT: (Sorry I just realized I could edit a message, I should have done that instead of posting another comment)
RE-EDIT: I also solved my "remove-background issue", which was once again entirely due to a misunderstanding from myself: I simply had to increase the color steps from 5 to 6 (in order to include the white as a color step) so that Inkscape knows that this is an actual color that I want to keep.
So you have a good result now?
And you have found solutions for several problems, I think. Nice to read it.
Yes everything looks as I wanted (see the attached video). This is not the final result, but now I know the workflow to follow in order to make these 3D "pixelized" models.
Thanks everyone who participated in this topic!