These gaps don't exisit in the vector files. They occour only when the images are projected as raster graphics, so either when they are exported as such or also when you look at them on a screen. Since you can't represent diagonal lines in raster graphics they are drawn with "stairs" and the antialiasing process changes the color of pixels close to those edgy lines, so that they appear to be diagonal. So if you have two objects with aligned diagonal lines there can be in fact a small gap since the lines are mapped to pixels and that process can skipp pixels between 2 objects. The scaling is the other big factor. If you scale in uneven numbers, there also can be gaps.
This is actually an example of aliasing in general (which, by the way, is pronounced with a emphasis on the first syllable, Alias - ing, not uh-LIE-as-ing) Basically, you're taking a high-detail signal (the vector file itself) and sampling it into a much lower-detail format (the raster graphics of a computer screen or png file). Aliasing in general can refer to various artefacts you can get from this process---features that were not in the original signal but appear due to the imperfect sampling. darkfire2703 explained more precisely the specifics for this example, but it's a very general problem.
Adding to your explanation, I think this is a feature in Inkscape to easily see during drawing where objects are not connected but just overlapping. Also, sometimes I have relied on the aliasing "feature" to spot duplicates sitting on top of each other
I wonder if the algorithm used for anti-aliasing fails to weigh any proximity object colors? So it only pulls from the layer behind or the background and fails there? That's what it looks like.
Hello, Nick! Thank you for sharing your experience! After watching this video tutorial it came to me a fourth idea to avoid those gaps. It's a variation of the second one, to put a solid object beneath those in front. The problem is that it does'n work when you have two or more colours. So, depending of the colours, I suggest to make a 50% grey object beneath them. It works quite well. Or, with eyedropper ("colour picker") make a mix of colours from those 4 in front to those beneath them. You have to activate the eyedropper, put it on the centre of those 4 objects and by holding left click, drag above all them so the colour of the bottom object is a mix of four from the front. It works quite well when the colours are closer to each other, for instance lighter green-darker green. For different range colours, as I mentioned, works the 50% grey.
Instead of fiddling around with bending the edges out, how about giving each path a tiny stroke, coloured same as the fill? The stroke only has to be as wide as one pixel in the resulting rasterization when you export it.
In cases where all the shapes are being set to the same transparency, you can group them and change the transparency of the group. Also another method that can be used in cases where you don't need exact precise shape sizes is to add a 1 pixel thick stroke of the same color as the fill, the overlap of the strokes fills the gap.
In my case, I found that if I do "Path > Union" it gets rid of it. Note that this will combine the shapes you have selected, which may not always be ideal.
ive been watching your videos for days and when i had that problem i went thru 3 discord channels and 2 forums without any help and suddenly 2 weeks after it led me back to you xD the irony
Another neat way to solve this issue is using Transform to scale the objects twice. First, select all objects. Then go to Object->Transform and select Scale tab. Then tick apply each object separately checkbox or whatever it is called (I am writing from memory, excuse me). Then scale width and height to something like 100.200% each. And click apply. You will notice the gaps are gone, but the size of the objects not exactly the same, you can scale them back using the same method or if that doesn't work. put the size manually after you select all of the objects as if you are resizing a square normally from the toolbar. Hope that helps. I found this method from "Open Source Tutor" channel in a seamless tiling video.
Thanks for the video. I tried the demonstration myself, and discovered, the observed phantom lines are just color bleeding through from underneath; in the case of the Nick's demo, what's seen is the white background bleeding through at paths shared by bordering objects. Also found out that white boxes on black, or red backgrounds show those coming through as well. Thinking about it, seems that, as objects are "drawn" from lowest level/layer to the highest, each is drawn without knowing what colors may appear to be bordering the object. Anti-aliasing done around object's path is done with shades between the fill color, and transparency, depending on the degree of deviation of a pixel to the actual path. Objects with "shared" path segments may be "drawn" containing pixels with partial transparency, allowing underlying colors to partially bleed through. Detecting and "fixing" situations exhibiting this behavior may be a non-trivial software feature that could negatively impact software performance.
Hi, Nick. I made a logo for a logo designing competition in my High School. But I used my own technique, because I'm a beginner and I can't make more somphisticated shapes as you do. So what I've done was drawing a logo on my drawing tablet and converting it to vectors. Then I polished it in Inkscape and added simple geometrical shapes like circles and so on. What do you think about this method as a proffesional designer? Is it inacceptable for more advanced designers to do like that?
I started thinking while watching the video. Maybe the gaps are from the stokes that are non existent? Have you tried putting objects with a stroke line next to each other? I am sure that might mess up art someone is trying to make but I am thinking its a good work around.
Just would like to share if this is a legit method: Before I am seeing some white lines between my customized text, but when I unified them by converting everything to an object then path - union (while everything is selected) pretty much did the work for me. I don't know if this works towards others aside from text, but as far as I know I converted the text to path. Worth a share to you guys because I could not stand passing this one without sharing it to you.
This has to do with Anti Aliasing indeed and showing them on your screen as raster. In Corel it goes away visually if you go in to Normal view. In the no enhance mode of Inkscape the gap is still there. Illustrator doesn't have this issue. A software called ArtPro we use at work also doesn't have it. Corel probably won't bother to fix it (like many other issues). I hope Inkscape will get some love regarding printing. Would love some variation. Oh well! Cheers for the nice videos, I like watching them in my break or before bed!
The third method is one that I've applied many times for a quick "gap fix" but I'm still looking for any possible tweaking in the settings that could prevent these gaps.
Yes I'll be doing some in the future. I still have to work on them though. For the time being you could always download a trial version of Photoshop and use that.
Hi Darah, I had the same quetion, but I found the website www.photopea.com which can handle PSD-files. You can upload a nice mock-up file you downloaded from the internet, change the file (add your logo) and download it. I hope Nick will make something in Gimp so we can try that!
Tell us where you got your colorful, circular application icons on the left side of your desktop. Did you make them? Or can we get them somewhere? Thanks. Please answer if you can, thanks so much.
I don't understand why a vector program has this issue... I mean, I can use procreate or even GIMP and not have this issue. This is an older video, have you since come up with a fix for this that's not so strenuous?
Hi my freind...Thanks for this tutorial its very utility for me... I have a petition i like the dark theme used for you in your videos i'm already instaled but my version of inkscape 0.92 havent any icons its really disapointig me i like to creating a icons set for new inkscape im sure to will a great work for you followers and students im considerating your a disyance student. Greetings and cheers from south america Jorge
I'm having a simular issue when I try to separate a logo with the paint bucket to make an svg file for my vinyle cutter. I separate the sections but when I put them together the sections don't fit.
Dude when you created that square your line are close to the square . But in mine those line become bigger then whatever I draw in inkscape . Will you plzz help me how to correct this problem
To Logos By Nick Could you please help me with problem about the latest Inkscape 1.3 (2023)? I installed to my Windows 10 but unable to use it because the photos I opened or imported turn out like a blank page (already embedded). There was no colors meanwhile the effective area existed. I knew because the "select" arrow cropped that area showing it was existing and when I traced bitmap and viewed in "live preview", it showed black & white image but had no colors. What's wrong in this case? Was it because my own system or the error from 'download & installation'? I downloaded from Inkscape website directly and my windows is 64bit, every step was done correctly. Is there anybody else ever having the same issue like mine? May be you can hlep! Thank you very much in advance.
I noticed that exporting with a higher dpi (like 300) helps a bit. But this of course not suitable for all applications, and I think aliasing is augmented too.
After I have used Bucket fill tool several times on my shapes to try different colors I notice that each time I add a new color to the shape there is residue, a small line of the old color remains and they keep adding, what am I doing wrong here?
This is probably a dumb question...but If anti-aliasing is turned off in document properties, would that resolve the problem? Edit: I noticed if you give a stroke, then stroke to path, break apart, union, then gaps disappear
Ron Brooks not dumb at all, it can really help (antialiasing takes line, looks at pixels it crosses and divides the transparency between them > that creates more transparent pixels on outer side of the edge and those are the ugly lines talked in video - that also explains, why it helps to create more same shapes one above another - the transparency pixels adds; and that also explains the ugly edge when there are lot of shapes one above another ), but it creates even bigger problem with ugly lines elsewhere.
No need for a work-around. Make the stroke the same color as the Fill color. Look at the bottom left of screen that shows the Fill and the Stroke colors. Just make the Stroke color exactly the same as the Fill color. You will notice in the video the Stroke shows "None". Just make it the same color as the Fill color.
Your videos are so useful, thank you! But please, adjust the microphone options, that "s" are Killing me. Or maybe next time can you say "Sassari"? Just for fun :)
I thought snapping actually helps to get rid of the white gaps, but no-- it was just my eyes.. Btw when your final product is done, you can use union. I find that most easier.
Abutting geometry which share vertices should be "stitched" before they are exported (rasterized); unfortunately, Inkscape doesn't even try. Nonetheless, these workarounds are first class.
If you know a little of programming, then you could remove them by removing the digits after the dot in the svg file. That is not hard and it probably removes the white lines.
Ugh, these fixes look absolutely toilsome and create redundant topology. Why just not set a thin stroke with the fill color... or make an Union in case the objects are of the same color? I think when you have multiple objects touching with the same color you can always merge them into a single object.
I know it has its technical reasons, but we designers just don't care about that. This is super annoying and feels like a major bug. I really can't understand that Inkscape doesn't offer an option for "Get rid of these thin lines". Can't be that hard. I mean we fly to the moon, but can't get rid of these bastards? Ridiculous! Sorry for this rant. I'm just stressed out by this.
![InkScape - Tutorial for Beginners in 13 MINUTES! [ FULL GUIDE ]](http://i.ytimg.com/vi/rFYQW2DCM2I/mqdefault.jpg)
These gaps don't exisit in the vector files. They occour only when the images are projected as raster graphics, so either when they are exported as such or also when you look at them on a screen. Since you can't represent diagonal lines in raster graphics they are drawn with "stairs" and the antialiasing process changes the color of pixels close to those edgy lines, so that they appear to be diagonal. So if you have two objects with aligned diagonal lines there can be in fact a small gap since the lines are mapped to pixels and that process can skipp pixels between 2 objects. The scaling is the other big factor. If you scale in uneven numbers, there also can be gaps.
Interesting. Thanks for explaining all of that. Comment pinned so others can see it as well, hope you don't mind.
This is actually an example of aliasing in general (which, by the way, is pronounced with a emphasis on the first syllable, Alias - ing, not uh-LIE-as-ing)
Basically, you're taking a high-detail signal (the vector file itself) and sampling it into a much lower-detail format (the raster graphics of a computer screen or png file). Aliasing in general can refer to various artefacts you can get from this process---features that were not in the original signal but appear due to the imperfect sampling. darkfire2703 explained more precisely the specifics for this example, but it's a very general problem.
In British spelling "artefact" is preferred
Adding to your explanation, I think this is a feature in Inkscape to easily see during drawing where objects are not connected but just overlapping. Also, sometimes I have relied on the aliasing "feature" to spot duplicates sitting on top of each other
I wonder if the algorithm used for anti-aliasing fails to weigh any proximity object colors? So it only pulls from the layer behind or the background and fails there? That's what it looks like.
Nick, thank you veery much for your tutorials! Special thank you for your english speaking easy listening to foreigners!
Hello, Nick! Thank you for sharing your experience! After watching this video tutorial it came to me a fourth idea to avoid those gaps. It's a variation of the second one, to put a solid object beneath those in front. The problem is that it does'n work when you have two or more colours. So, depending of the colours, I suggest to make a 50% grey object beneath them. It works quite well. Or, with eyedropper ("colour picker") make a mix of colours from those 4 in front to those beneath them. You have to activate the eyedropper, put it on the centre of those 4 objects and by holding left click, drag above all them so the colour of the bottom object is a mix of four from the front. It works quite well when the colours are closer to each other, for instance lighter green-darker green. For different range colours, as I mentioned, works the 50% grey.
Thank you for making this "Inkscape Explained" series. Great starting point for me.
Instead of fiddling around with bending the edges out, how about giving each path a tiny stroke, coloured same as the fill? The stroke only has to be as wide as one pixel in the resulting rasterization when you export it.
I think your idea is amazing!
In cases where all the shapes are being set to the same transparency, you can group them and change the transparency of the group. Also another method that can be used in cases where you don't need exact precise shape sizes is to add a 1 pixel thick stroke of the same color as the fill, the overlap of the strokes fills the gap.
In my case, I found that if I do "Path > Union" it gets rid of it. Note that this will combine the shapes you have selected, which may not always be ideal.
I really appreciate these kind of videos just as much as the drawing tuts. Thanks Nick!
ive been watching your videos for days and when i had that problem i went thru 3 discord channels and 2 forums without any help and suddenly 2 weeks after it led me back to you xD the irony
Another neat way to solve this issue is using Transform to scale the objects twice.
First, select all objects. Then go to Object->Transform and select Scale tab. Then tick apply each object separately checkbox or whatever it is called (I am writing from memory, excuse me). Then scale width and height to something like 100.200% each. And click apply.
You will notice the gaps are gone, but the size of the objects not exactly the same, you can scale them back using the same method or if that doesn't work. put the size manually after you select all of the objects as if you are resizing a square normally from the toolbar.
Hope that helps. I found this method from "Open Source Tutor" channel in a seamless tiling video.
Thank you so much for this video, man! I was so frustrated, I thought it was something I was doing wrong.
Keep 'em coming. You are awesome. You should have something where people can donate. This is great.
These white gaps are really anoying sometimes. Thank you very much for the tips :)
Thanks for the video. I tried the demonstration myself, and discovered, the observed phantom lines are just color bleeding through from underneath; in the case of the Nick's demo, what's seen is the white background bleeding through at paths shared by bordering objects. Also found out that white boxes on black, or red backgrounds show those coming through as well. Thinking about it, seems that, as objects are "drawn" from lowest level/layer to the highest, each is drawn without knowing what colors may appear to be bordering the object. Anti-aliasing done around object's path is done with shades between the fill color, and transparency, depending on the degree of deviation of a pixel to the actual path. Objects with "shared" path segments may be "drawn" containing pixels with partial transparency, allowing underlying colors to partially bleed through. Detecting and "fixing" situations exhibiting this behavior may be a non-trivial software feature that could negatively impact software performance.
Hi, Nick. I made a logo for a logo designing competition in my High School. But I used my own technique, because I'm a beginner and I can't make more somphisticated shapes as you do. So what I've done was drawing a logo on my drawing tablet and converting it to vectors. Then I polished it in Inkscape and added simple geometrical shapes like circles and so on. What do you think about this method as a proffesional designer? Is it inacceptable for more advanced designers to do like that?
The illustrated logos are a good technique bro
Yes that's acceptable. Many designers work that way.
Bloody legend you are Nick mate, this has been an issue for me for a long time! Now its problem solved!
I started thinking while watching the video. Maybe the gaps are from the stokes that are non existent? Have you tried putting objects with a stroke line next to each other? I am sure that might mess up art someone is trying to make but I am thinking its a good work around.
That's my solution. Adding a thin line or stroke like a patch.
If you're using the same colour in the adjacent objects, Path => Union seems to work as well...
Nick, thank you very much for your videos. Please make a series of tutorials about filters and extansions.
Great tutorial! I am so glad you are doing these tutorials! Thank you!
Just would like to share if this is a legit method: Before I am seeing some white lines between my customized text, but when I unified them by converting everything to an object then path - union (while everything is selected) pretty much did the work for me.
I don't know if this works towards others aside from text, but as far as I know I converted the text to path.
Worth a share to you guys because I could not stand passing this one without sharing it to you.
Yes unifying is also a great way to correct the problem
Awesome explanations! I really benefitted the most from the solution you offer starting at 7:30 ish Thank you!
Thank you NIck another helpful tutorial. Suppose I want to enhance the white spaces and create a pattern in the process? How would I go about this?
i wish there were more channels like yours on yt
This has to do with Anti Aliasing indeed and showing them on your screen as raster. In Corel it goes away visually if you go in to Normal view. In the no enhance mode of Inkscape the gap is still there. Illustrator doesn't have this issue. A software called ArtPro we use at work also doesn't have it. Corel probably won't bother to fix it (like many other issues). I hope Inkscape will get some love regarding printing. Would love some variation.
Oh well! Cheers for the nice videos, I like watching them in my break or before bed!
Thanks for the video =). Any plans on releasing another video about gradients in particular?
The third method is one that I've applied many times for a quick "gap fix" but I'm still looking for any possible tweaking in the settings that could prevent these gaps.
thank you man i was searching about this problem & found that awesome video :)
Nick, can you make tutorials about mockups in gimp?
I don't want to spend money for Photoshop just to make mockups.
Thanks.
Yes I'll be doing some in the future. I still have to work on them though. For the time being you could always download a trial version of Photoshop and use that.
Hi Darah, I had the same quetion, but I found the website www.photopea.com which can handle PSD-files. You can upload a nice mock-up file you downloaded from the internet, change the file (add your logo) and download it. I hope Nick will make something in Gimp so we can try that!
Leo Van Prooijen Thanks Leo. Will give it a try.
Tell us where you got your colorful, circular application icons on the left side of your desktop. Did you make them? Or can we get them somewhere? Thanks. Please answer if you can, thanks so much.
He's on Ubuntu, I believe those are the icons that come included.
The icon set is called Numix Circle
Thank you very much, now my low poly art will look better without that gap
That intro the best
I don't understand why a vector program has this issue... I mean, I can use procreate or even GIMP and not have this issue. This is an older video, have you since come up with a fix for this that's not so strenuous?
Hi my freind...Thanks for this tutorial its very utility for me... I have a petition i like the dark theme used for you in your videos i'm already instaled but my version of inkscape 0.92 havent any icons its really disapointig me i like to creating a icons set for new inkscape im sure to will a great work for you followers and students im considerating your a disyance student. Greetings and cheers from south america Jorge
I'm having a simular issue when I try to separate a logo with the paint bucket to make an svg file for my vinyle cutter. I separate the sections but when I put them together the sections don't fit.
Dude when you created that square your line are close to the square . But in mine those line become bigger then whatever I draw in inkscape . Will you plzz help me how to correct this problem
Could you please send me the link to that gimp theme you use and the inkscape theme it looks good
To Logos By Nick
Could you please help me with problem about the latest Inkscape 1.3 (2023)? I installed to my Windows 10 but unable to use it because the photos I opened or imported turn out like a blank page (already embedded). There was no colors meanwhile the effective area existed. I knew because the "select" arrow cropped that area showing it was existing and when I traced bitmap and viewed in "live preview", it showed black & white image but had no colors. What's wrong in this case? Was it because my own system or the error from 'download & installation'? I downloaded from Inkscape website directly and my windows is 64bit, every step was done correctly. Is there anybody else ever having the same issue like mine? May be you can hlep! Thank you very much in advance.
I noticed that exporting with a higher dpi (like 300) helps a bit. But this of course not suitable for all applications, and I think aliasing is augmented too.
oh my goodness this is so smart! I need to remember this.
Thanks!
Nice Nick!!
i am following u from turkey. u perfect
After I have used Bucket fill tool several times on my shapes to try different colors I notice that each time I add a new color to the shape there is residue, a small line of the old color remains and they keep adding, what am I doing wrong here?
Maybe I should change color of the object instead of filling it with a bucket. My head is stuck in paint mode
This is probably a dumb question...but If anti-aliasing is turned off in document properties, would that resolve the problem?
Edit: I noticed if you give a stroke, then stroke to path, break apart, union, then gaps disappear
Ron Brooks not dumb at all, it can really help (antialiasing takes line, looks at pixels it crosses and divides the transparency between them > that creates more transparent pixels on outer side of the edge and those are the ugly lines talked in video - that also explains, why it helps to create more same shapes one above another - the transparency pixels adds; and that also explains the ugly edge when there are lot of shapes one above another ), but it creates even bigger problem with ugly lines elsewhere.
Thank you so much man 😁
Helpful, thanks!
thanks nick!!
2021 and I still see those white lines.
Any update?
No need for a work-around. Make the stroke the same color as the Fill color. Look at the bottom left of screen that shows the Fill and the Stroke colors. Just make the Stroke color exactly the same as the Fill color. You will notice in the video the Stroke shows "None". Just make it the same color as the Fill color.
THANK YOU VERY MUCH..
Your videos are so useful, thank you! But please, adjust the microphone options, that "s" are Killing me. Or maybe next time can you say "Sassari"? Just for fun :)
Same problem facing in adobe illustrator , need help nick
Thanks, good trik
I thought snapping actually helps to get rid of the white gaps, but no-- it was just my eyes.. Btw when your final product is done, you can use union. I find that most easier.
That was some help dude.
I always ran into that annoying issue when making low poly artwork
I know its too late to ask this but how do you remove them? I have started making low poly portrait recently and thats why im here.
Abutting geometry which share vertices should be "stitched" before they are exported (rasterized); unfortunately, Inkscape doesn't even try. Nonetheless, these workarounds are first class.
Yeah
Nick, you are saying the word "aliasing" incorrectly. The first A is long as in "alien". Also many thanks for the great tutorials!
Good :)
If you know a little of programming, then you could remove them by removing the digits after the dot in the svg file. That is not hard and it probably removes the white lines.
Omg, I thought it was just my computer or something!
Thank you so much!
I just drew Pixel art with houndreds of touching squares... I'm in shambles
Ugh, these fixes look absolutely toilsome and create redundant topology. Why just not set a thin stroke with the fill color... or make an Union in case the objects are of the same color? I think when you have multiple objects touching with the same color you can always merge them into a single object.
Just use union
I know it has its technical reasons, but we designers just don't care about that. This is super annoying and feels like a major bug. I really can't understand that Inkscape doesn't offer an option for "Get rid of these thin lines". Can't be that hard. I mean we fly to the moon, but can't get rid of these bastards? Ridiculous! Sorry for this rant. I'm just stressed out by this.
Why not just enjoying your white spaces? xD
Please tell me that this shit got fixed