17

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.

Pixel image

16

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:

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

    enter image description here

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

    enter image description here

    • 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):

    enter image description here

    • 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.

  • one thing I'm curious about @Takkat is if the same abnormality is in your trace as is in Illustrator. If you look at my answer you'll see that the eye isn't exactly a straight line-- is it the same in Inkscape or does Inkscape perform this better? – Adam Schuld Aug 15 '13 at 22:16
  • @AdamSchuld: in Inkscape it is the "optimize path" option which we have to deactivate to get straight lines rather than Beziers. There might be not 100% right angles however (hard to test). I believe there is a similar option in Illustrator (but I cant test it on my all Open Source system here). – Takkat Aug 16 '13 at 6:51
3

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. enter image description here

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

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

  • thank you @AdamSchuld, I choose Takkat open source solution. But you answer may help illustrator users. – Guillaume Vincent Aug 16 '13 at 10:01
  • His answer was better! Glad I could help – Adam Schuld Aug 16 '13 at 11:02
0

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:

  1. Open your file in GIMP
  2. Select Image > Scale Image
  3. Change the settings to scale your file up
  4. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.