Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
3  
Are you trying to keep the pixelated look, or are you trying to smooth it out? –  Brendan Aug 15 '13 at 12:37
3  
Similar question, but for Illustrator: How to convert every pixel of raster picture to square objects in Illustrator? –  JohnB Aug 15 '13 at 14:03
    
Also relevant: **Pixel-sized drawings in vector –  JohnB Aug 15 '13 at 14:04
    
The slight problem is that the image isn't well formed they aren't perfect squares when zoomed in. –  Adam Schuld Aug 15 '13 at 14:12
    
@brendan I want to keep the pixelated look –  guillaumevincent Aug 15 '13 at 16:52

2 Answers 2

up vote 6 down vote accepted

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.
share|improve this answer
1  
sweet. well explained –  Adam Schuld Aug 15 '13 at 22:14
    
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

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

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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