Pixel Art in Inkscape

Post questions on how to use or achieve an effect in Inkscape.
Henry432
Posts: 53
Joined: Fri Dec 20, 2013 12:11 pm

Pixel Art in Inkscape

Postby Henry432 » Thu Jun 08, 2017 6:57 am

Poison Mushroom.svg
Poison Mushroom Vector
(57 KiB) Downloaded 323 times
I love making/tracing pixel art in Inkscape from games and various other sources, but there is just one problem, Anti-aliasing. Anti-aliasing is great, although I do wish there was an option to turn it off when exporting pixel art to .png, jpeg, etc... In the following images below, you can see what a difference anti-aliasing can make.

In this first image, anti-aliasing is on, notice you can see gaps in-between the individual squares:

Image

In this image, anti-aliasing is turned off. The difference is like sour and sweet, night and day, happy and sad...:

Image

I tried exporting to .png with anti-aliasing turned off in the Documents Property settings, but the exported image still came out anti-aliased regardless whether anti-aliasing is checked off in the Documents Property settings.

Would it be possible for the Inkscape gods to come out with a feature that would allow the user to export their work with the option of having anti-aliasing off or on? Here is a picture of what I have in mind:

Image
Last edited by Henry432 on Wed Jun 14, 2017 1:43 pm, edited 1 time in total.

Polygon
Posts: 393
Joined: Thu Dec 19, 2013 3:27 am

Re: Pixel Art in Inkscape

Postby Polygon » Thu Jun 08, 2017 8:25 am

Let´s see if this will help. You need to make sure your art is aligned to a pixel-based grid first. Then make a pixel copy (alt+B) of your art work and check Image-rendering to Optimized for Speed at its object-properties (shift+cmd+O) and export that selection while the dpi should be an integer number. This should avoid any anti-aliasing due export.
Here are the first 4 rows of your image as an PNG:
RasterImage.png
RasterImage.png (1.77 KiB) Viewed 9393 times


Cheers
P.

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Pixel Art in Inkscape

Postby Lazur » Thu Jun 08, 2017 5:22 pm

There are some ways eliminating the problem with anti-aliasing on.

By using overlapping, you won't experience any gap even if zooming out as much as the squares of your image are rendered at 1 px (theoretically, haven't checked it again).

See the description here.


As much as it works, it's not a preferred solution by developers (although it could be automated I guess).
Hence they prefer altering the rendering routine.

There are two ways of doing that, with filtering.
First, there is the pixellize filter, which makes the alpha values "steeper".
It works as if you duplicated your objects atop eachother many times (which is another suggested solution at the official faq section), but personally I'd not use that, only if in a hurry.
By raised alpha values you alter the object's opacity, so semi-transparent pixelart won't work.

Lastly, it all comes down to how the objects alpha values are composited.
By default, the background is obscured by an object with alpha A (60% for the example) and another object with alpha B (let it be 40%).
Now, they are rendered that after the first object you'll get 40% of the background, 60% of the object, and after that with object B
on screen it will be 40% of object B, and 60% of (40% background plus 60% object A).
As you can see, alpha values are not adding up, you can still see the background through the two objects.
If A and B was composited first, and alpha compositing would be after, 40+60 would make a fully opaque pixel.

So there is a way to simulate that by custom filtering.
Quite time consuming and complicated, but you can pull in all objects with the image filter primitive, and composite them manually.
If it's for a pixel art, there would be no issues with the rendering even if there are semi-transparent pixels, only problem appears when the objects are overlapping -where 200% of adding up alpha is rendered solid white.
At least I couldn't see an issue.

Here are some examples:
compositing two squares

compositing alot more

compositing non-squares with some overlapping here and there

and the original idea is presented here.



edit:
These apply to your other topic too.
There, the double edges atop eachother represent object A and B with semi-transparent subpixels atop the background,
and although the background shows through, the bottom object is rendered as well.
If those were inverted colours, you'd see grey instead of the fill from the bottom.

Moini
Posts: 3381
Joined: Mon Oct 05, 2015 10:44 am

Re: Pixel Art in Inkscape

Postby Moini » Fri Jun 09, 2017 10:33 am

The listed workarounds will be useful - Inkscape 0.93 will contain the solution: https://bugs.launchpad.net/inkscape/+bug/180612

(when you have a request for Inkscape devs, take a look into the bug tracker, to see if it has been requested before, or create a new bug/feature request there, so devs can know about it. This forum is generally not frequented by Inkscape developers.)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Pixel Art in Inkscape

Postby brynn » Fri Jun 09, 2017 11:36 am

Moini wrote:The listed workarounds will be useful - Inkscape 0.93 will contain the solution: https://bugs.launchpad.net/inkscape/+bug/180612


Fabulous!

Meanwhile, just to make sure all the options are covered, here's the faq about this issue https://inkscape.org/en/learn/faq/#ther ... n-patterns

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Pixel Art in Inkscape

Postby Lazur » Fri Jun 09, 2017 4:40 pm

So all that new export option does is removing anti-aliasing from the exporting?

I'd be more glad if there was an additive alpha rendering mode.

Moini
Posts: 3381
Joined: Mon Oct 05, 2015 10:44 am

Re: Pixel Art in Inkscape

Postby Moini » Sat Jun 10, 2017 6:35 am

Make a feature request, Lazur ;-)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Pixel Art in Inkscape

Postby Lazur » Sat Jun 10, 2017 8:16 am


Reptorian
Posts: 19
Joined: Fri Nov 20, 2015 3:16 am

Re: Pixel Art in Inkscape

Postby Reptorian » Sat Jun 10, 2017 10:13 am

Right now, if I had to do pixel art with Inkscape, I'd do it with conjunction with GIMP and Krita since GIMP has the best indexing mode capability, and Krita has the best image-editing capability in my opinion. GIMP for processing, and Krita for editing exported png. That's the only workaround I can suggest for some form of pixel art. One day, I would like to do something like ProwlerGFX did, but with Inkscape, Krita, and GIMP, and especially when Inkscape developed to the point where gradient mesh are easy to use.

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Pixel Art in Inkscape

Postby v1nce » Sun Jun 11, 2017 4:22 am

Right now, if I had to do pixel art
...
I will not use Inkscape.
Because there is zero advantage to use a vector tool to do a bitmap image.

At least the way you do it (individual squares) there are only downsides (antialising).

Reptorian
Posts: 19
Joined: Fri Nov 20, 2015 3:16 am

Re: Pixel Art in Inkscape

Postby Reptorian » Sun Jun 11, 2017 3:15 pm

v1nce wrote:Right now, if I had to do pixel art
...
I will not use Inkscape.
Because there is zero advantage to use a vector tool to do a bitmap image.

At least the way you do it (individual squares) there are only downsides (antialising).


Krita and Photoshop have vector tools for people to use as an aid to raster-based art. Vectors tools can be pretty useful. Also, vectors are scalable, so you can generate pixel art of any resolution with the aid of GIMP for processing and Krita for its ease of use layer manipulation. I use GIMP for its indexing mode and that it is all I use it for besides GIMP and Export Layers.

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Pixel Art in Inkscape

Postby v1nce » Sun Jun 11, 2017 7:29 pm

> so you can generate pixel art of any resolution

Designing your image in a vector tool using "pixels" (=square syde by side) is a nonsense (to me, until someone proves me wrong). It doesn't make your image more scalable than a bitmap one. (it doesn't make it less scalable either, but you are just using the wrong tool imho)

You can take a bmp image of pixel art, feed it in a vectorizer (no the one in inkscape that is "too clever") that wil transform every pixel of the image into a square. Now you can zoom in in inkscape and pretend it is "scalable". But if you zoom it inside gimp then it will look 100% identical. So what was the point of going vector ?

So imo inkscape is not a tool for pixel pusher BUT it is a great (*) tool to make small pixel aligned vector icons

* not that great because of blurry pixels if you don't use extensions or use a x2 grid

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Pixel Art in Inkscape

Postby Lazur » Sun Jun 11, 2017 7:43 pm

By using raster for pixelart you are limited by the renderer -blocky/non-interpolated rendering is not an option in every image viewer.
Vectors can serve as a base for "pixelart" that is off of the raster range.

Image

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Pixel Art in Inkscape

Postby v1nce » Mon Jun 12, 2017 2:02 am

If he ends up by exporting its vector to png to edit it in gimp, I don't see any practical reason why not to start it in gimp from the very start. Except if he's better at inkscape or inkscape has some tools (I don't know of) that pixel pushers can't find in gimp.

IMO (layers of) bitmaps would be a more usual and practical source for voxel than vector ones (svg).

Reptorian
Posts: 19
Joined: Fri Nov 20, 2015 3:16 am

Re: Pixel Art in Inkscape

Postby Reptorian » Mon Jun 12, 2017 7:38 am

v1nce wrote:> so you can generate pixel art of any resolution

Designing your image in a vector tool using "pixels" (=square syde by side) is a nonsense (to me, until someone proves me wrong). It doesn't make your image more scalable than a bitmap one. (it doesn't make it less scalable either, but you are just using the wrong tool imho)

You can take a bmp image of pixel art, feed it in a vectorizer (no the one in inkscape that is "too clever") that wil transform every pixel of the image into a square. Now you can zoom in in inkscape and pretend it is "scalable". But if you zoom it inside gimp then it will look 100% identical. So what was the point of going vector ?

So imo inkscape is not a tool for pixel pusher BUT it is a great (*) tool to make small pixel aligned vector icons

* not that great because of blurry pixels if you don't use extensions or use a x2 grid


You don't have to use squares in Inkscape for pixel art. You can use any shapes you want. Besides, you can change exported png DPI, and use Krita+GIMP to finalized your work using indexing techniques. The fun part of vector is that I can recreate Yoshi in pixel art that fits a huge monitor using indexing mode all the way down to icon size. The point of going vector is mostly for smoothness factor. Indexing is a technique which may or may not involve dithering, but it is all about reducing colors. If Inkscape and/or Illustrator has NURBS techniques being applicable to gradient mesh, I would not use Photoshop or Krita to create a concept when I can do everything using vectors as the base or for entire creation. Scalable >>>> Non-Scalable.

Oh, and Inkscape has pixelize filter which works at 100 percent.

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Pixel Art in Inkscape

Postby v1nce » Mon Jun 12, 2017 9:33 am

It looks like OP is pushing pixels.
That is the true spirit of pixel art and it's fine (as long as it's in a bitmap editor).
But doing so in a vector editor is "inefficient".
Except if you want to do it for the "beauté du geste".

If you want to do it in a vector way then you would use (stacked) shapes such as straight lines, rect. This will solve (most of) your aliasing issues.
At this point, your creation is still on the border of what I called pixel art.
As soon as you start using rounded rect, circle or nurbs then your image become "scalable" but then it's no more pixel art. Just because you start "cheating" and let the algorithm interpolate pixel for you.

So :
if it's not scalable it's easier to do it in a bitmap editor (why bother drawing a square in inkscape when you can just push pixel in gimp)
if it's scalable then it's vector then do it in inkscape but it's no more pixel art.
if it's scalable but carefully pixel aligned then it's near from pixel art. But you're still a cheater. Even if you reworked it later in a bitmap editor to remove the pixel that were interpolated. Real pixel artist can draw circles by hand despite their 30° line looks more like it's 26.56 ;)
As long as it makes good icon I won't throw you stone at.

But maybe all of that it's because I'm too old and anything produced outside of Deluxe Paint (or maybe neochrome if you chose the bad side :twisted: ) does not qualify as pixel art to me. ;)

Reptorian
Posts: 19
Joined: Fri Nov 20, 2015 3:16 am

Re: Pixel Art in Inkscape

Postby Reptorian » Mon Jun 12, 2017 10:11 am

Letting some algorithms do the work for you is kind of the idea of my post. If you look at ProwlerGFX's art in YouTube, I'd think you find it easier to just let the algorithms does the work for you, and do some manual pixeling to be very efficient if you want to keep your original work looks, but also have copies which is the pixelated ones. Inkscape -> GIMP Index Mode -> Convert to RGB -> Fix in Krita -> GIMP index mode is how one can do it. Another way is to go from Inkscape to Krita, and then GIMP when finished, and then fix back in Krita. If Krita has a good index filter, I would just go straight to Krita.

Henry432
Posts: 53
Joined: Fri Dec 20, 2013 12:11 pm

Re: Pixel Art in Inkscape

Postby Henry432 » Wed Jun 14, 2017 2:45 pm

Here is an interesting thing I found out experimenting with Paint. It doesn't like anti-aliased images. Paint somehow converts anti-aliased images to aliased images when imported into Paint. I played with this and found a way to turn my pixel art into a raster file without the spaces in-between the squares, although transparency will not be available. Even though paint is the best image editing software in the planet, it has it's limitations. :D

First open the file I have in my main post named Poison Mushroom.svg in inkscape.
Turn it into a negative: Extensions →Color →Negative
Now export the vector file to a .png and open the exported .png in Paint.
Go to Image→Invert Colors and save the file.
Image should have no spaces in-between the squares. Not the best way to do this but it works. Still wish this could be done in Inkscape with ease.

Henry432
Posts: 53
Joined: Fri Dec 20, 2013 12:11 pm

Re: Pixel Art in Inkscape

Postby Henry432 » Wed Jun 14, 2017 2:54 pm

Lazur wrote:By using raster for pixelart you are limited by the renderer -blocky/non-interpolated rendering is not an option in every image viewer.
Vectors can serve as a base for "pixelart" that is off of the raster range.

Image


You did this in Inkscape?

It would be sweet if you could type up a quick thread demonstrating how you did this. Awesome work!

Henry432
Posts: 53
Joined: Fri Dec 20, 2013 12:11 pm

Re: Pixel Art in Inkscape

Postby Henry432 » Wed Jun 14, 2017 3:24 pm

v1nce wrote:Right now, if I had to do pixel art
...
I will not use Inkscape.
Because there is zero advantage to use a vector tool to do a bitmap image.

At least the way you do it (individual squares) there are only downsides (antialising).


I prefer Inkscape because I can easily edit each and every square to my liking. I also can export to any size I need without quality loss. Furthermore, decals(Plotter) and other cool stuff can be made from the .svg file. Lastly, I find it relaxing to snap squares next to each other and in the end create something that looks pleasing to the eyes.

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Pixel Art in Inkscape

Postby Lazur » Wed Jun 14, 2017 6:26 pm

Henry432 wrote:You did this in Inkscape?


No I didn't.
Not that it would be any of a problem.
I'd probably start with blender, export obj and use thre render 3D polyhedron extension, but could also construct all of it inside inkscape.
For animation purposes and an animated gif output there probably wouldn't be any benefit of using inkscape, blender could do the job in once.

Besides my previous answers to your problem got no attention whatsoever from anyone, not even with the two feature request which would make any further actions creating pixelart unnecessary. Got no time for wasting effort.

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Pixel Art in Inkscape

Postby v1nce » Wed Jun 14, 2017 8:50 pm

For voxels have a look at magicavoxel

https://ephtracy.github.io/

Henry432
Posts: 53
Joined: Fri Dec 20, 2013 12:11 pm

Re: Pixel Art in Inkscape

Postby Henry432 » Thu Jun 15, 2017 5:02 am

Besides my previous answers to your problem got no attention whatsoever from anyone, not even with the two feature request which would make any further actions creating pixelart unnecessary. Got no time for wasting effort.


If I could give you an award for being the most helpful member, I would! :D I'm sorry for not giving you the thanks you deserve. I want everyone on the forum who has been helpful to know that they are most certainly not forgotten. I understand It takes time to help the members out on this forum and I am completely grateful for all of the time and hard work that you guys put in your replies. I just wish there was a rep system in place so that I don't have to keep replying and bumping the thread up. I want to give everyone an equal chance to get their thread seen. I hope you understand Lazur.


Return to “Help with using Inkscape”