Mobile app version of vmapp.org
Login or Join
Speyer780

: How to transform a pixel image in vector logo in Inkscape? I don't know if I'm in the right place, but I would like to know how to transform a pixel image I've made into a vector logo

@Speyer780

Posted in: #PixelArt #SoftwareRecommendation #Vector

I don't know if I'm in the right place, but I would like to know how to transform a pixel image I've made into a vector logo ?

I use this picture for my favicon of my personal web site.
And if you have any software recommendations, I work on mac. I prefer use an open source one.

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Speyer780

3 Comments

Sorted by latest first Latest Oldest Best

 

@Lee3735518

There is no need to use vector graphics when you want a pixel-y look. You can just use GIMP to upscale your PNG file. Here's how:


Open your file in GIMP
Select Image > Scale Image
Change the settings to scale your file up
Export your upscaled file as another PNG (press Ctrl+Shift+E or select File > Export)


However, if you're extruding the pixel icon in Blender, then you will have to use the Inkscape method.

10% popularity Vote Up Vote Down


 

@BetL875

Inkscape

This powerful vector graphics application is free, cross-platform, and Open Source. It comes with an inbuilt function to trace vector graphics from bitmaps.

These are the steps involved:


File - Import...: choose to "embed" the bitmap.
Select the embedded bitmap.
Choose Path -Trace Bitmap.... This will open the following dialog:


Make the following settings for preserving the pixelated square box appearance in the Mode, and in the Options tabs:




Tick Colors.
Choose 11 Scans for the 11 colors of your source image.
Tick Stack scans to have one object per color stacked above one another.
Untick Smooth corners and Optimize paths for resulting square boxes.
Click on Update for a preview, OK for tracing the bitmap.
Move the vector graphic next to the bitmap for comparing the result (here the selected vector trace is on the right side):





Copy the vector object to a new drawing and save in a file format of your choice.



Note:

This guide will not lead to the desired result of a pixelated vector graphic when working on a very small icon source. To still get the pixelated effect on tracing we have to first upscale the icon before importing to Inkscape.

10% popularity Vote Up Vote Down


 

@Angela777

I'm not proficient in the program, but it can be done in Inkscape. I'm sure someone will swoop in and explain it in inkscape. One thing I noticed when I zoomed in on the image is that there is an impreciseness with those squares in your image. Whoever made this image used alternating row width of 7 pixels and 8 pixels which makes it slightly more involved of a process when making a grid for the pixelated effect.

The low down, quick way is to use image tracing in Adobe Illustrator, it literally takes less than a minute compared to the more involved process of recreating the pixels using a grid. I'm not 100% sure if bitmap tracing in Inkscape will yield the same result.

In any case the process in Illustrator is to import the image and then use the image trace with roughly the same settings as the image below. It will yield a rigid pixel-like effect.


The effect zoomed in. For most of the effect there will be no abnormalities.


However, certain areas you will need to fix the paths manually because they are slightly off.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme