Vector Batik Pattern
This tutorial will show you how to make a seamless tileable batik pattern fill using Inkscape. To know how to make a pattern that would seamlessly tileable is important in any vector graphic software, in this case I'm using Inkscape. I know there are many websites out there which provide any kinds of vector tileable patterns for free to use and download, but when it comes to a custom pattern, and it's hard to find elsewhere on internet, well you need to get your hands dirty making one for you. If you can't make one, of course you could contact me for making one for you.cough-selfpromotion-cough.Ok, lets start finding some batik pattern on google for the reference. My pick was on this batik pattern.
I don't really know where this batik pattern was originated from, but from google search, it says batik Solo, so I'm guessing it's one of batik that was originated from Solo, also know as Surakarta, that's one of the city in Central Java.Batik reference from googleNow import that image to Inkscape by dragging it into Inkscape workspace. And rename the default layer into something meaningfull, like image reference or batik reference, or any name as long as you know what is that layer for. I like to get thing organized by using layers when working in Inkscape so that I would not get lost when by the end of the day there are dozens of layers to work for. And also it helps me to isolate things when doing with layers.Step one - Preparation.Setup the document properties.
1,451 Best Batik Pattern Free Brush Downloads from the Brusheezy community. Batik Pattern Free Brushes licensed under creative commons, open source, and more! Find vector batik stock images in HD and millions of other royalty-free stock. Naxxramas map. Seamless pattern with abstract floral, Indonesian batik motif, traditional style.
It's depend on your project, but for this pattern making project, I switch the unit from default centimeters (cm) to pixels (px). And create a new axonometric grid from the grid tab in document properties. Change X and Z rotation value to both 45, and adjust the scaling as fit as you need. The real factor here is the rotation value.
If we take a look on the batik pattern, it's as close to 45 degree angle. So I just put the number there on the grid rotation inputs. And it fits quite nicely with the batik pattern reference.Also from the grid, I made 10 boxes rotated in 45 degree angle and positioned horizontally and vertically like so in the image. Those in the corner are in outline because they didn't occupy a full box. Then use a rectangle tool to draw a square from those outlined boxes middle point, and make that square as the width and height of the Inkscape document by opening up the document properties. Watch the video below if it's a bit confusing.Now the document size fits perfectly in the center of those boxes. We're going to make the batik pattern inside this page.Step 2 - The Grid.This is the fun part.
After a quite sometime playing with the grid for this particular batik, I came up with this grid. According to the image, the pattern object 'cut' on top side arrow needs to meet with the opposite bottom arrows. The same with the left and right sides. And if we see the image, the part of the pattern objects that are 'cut' out of canvas needs to be able to find their repeatable part on the other side so that would make them seamlessly tileable pattern.
If those top part and bottom are not meet with each other, then they need mode adjutment either in position or the size of the pattern object. If you watch the video, I tried to find the correct position for those area to have them really connecting and meet with each other. Once I got it, I'll check them by using clipping the objects and duplicate them into a desireable position just to see if those pattern objects are nicely fit with each other seamlessly.In order to help me more on making the pattern, I added more diagonal grid object like so.
This is where everything gets more interesting.Number one, I added those diagonal grid objects using bezier tool on seperate grid layer.Number two, just playing with the grid and added those intersection four lines in the middle and.Number three, from the additional dashed grid lines in the middle, I made yellow boxes in order from one right there in the middle, and continue making another based on the intersections made by the grid. I found there is some sort of like math pattern, if I may say, so it goes like this:40px to 60px (20px in between)60px to 100px (40px in between) then goes back to.100px tp 60px60px to 40pxNow I don't know if this is coincidence or it's the product from the 10 rotated boxes earlier, and also I'm not a batik expert, so I don't if this math pattern is there in this batik, or probably just a coincidence. Again the more I played with the grid in this batik pattern, the more I realized of this math pattern. And I also read somewhere long time ago that almost everywhere in nature have some soft of mathematical pattern. Maybe like factal pattern where it may look somewhat irregular pattern, but if we take away our lenses back further away, we actually see a perfectly seamless not-irregular pattern. Again I'm not batik expert or math magician, so.
Let's back to the fill pattern we're going to make in Inkscape, shall we.but still those things really get me interested for days.c'mon!!Ok. Move onStep 3 - The Main Patterns.If we see our batik pattern now, we can recognize there are actually two main patterns. As, I said, patterns within these two color boxes are the ones the we can focused on when making the batik pattern. Even if we look on the right image where we can see more detailed sections by the blue, yellow, orange, green and red color boxes, the only parts the we need to really focus on are the blue, orange, green on the first main pattern, and the yellow color on the second main pattern. The rest are quite similar patterns with just a duplicate and flip on them, then we got our full batik pattern.And also, we can see that there are some irregularities on this batik pattern shape, like the second main pattern where consists of many long and rounded shapes, they're look similar but with a slight anomaly on the shape. I don't know if this batik was made by painting direcly or by stamp but for this pattern making purpose in Inkscape, we're just going to trace couple shape for our batik pattern objects, not all of them.
After some clean up by removing all pattern objects outside the white area by using path operations and a delete, that is the new pattern with just two main pattern objects from step 3. And if we see the comparison on the right, it's clearly shows less objects were used in the second pattern after being cleaned up. And also we used the grid from early stage on making this pattern, so this new pattern also 'inherit' the seamless tileable feat on it. So we don't have to readjust or anything to make it seamless.
Vector Batik Pattern Download
And look how 'slim' it is compare to the square one.Anyway, I also have made these pattern available for, in two version, the full color and white monotone color, which I think also looks cool. END UPDATE.Step 4 - Making the Pattern ObjectsAlright, the whole process of making the pattern objects using Inkscape would not be enough if I describe the whole process here. There's going to be a really long post. So it should be easier to watch the timelapse video from this step. The actual total video is like 2.5 hours, after the speed up the video length just 27 minutes or so.The main tools are the bezier tool, rectangle tool, node tool, path operations (union, difference, intersection, etc), align tool, and of course the custom color swatches. Again using color swatches really helps when it comes to change to colors of the pattern objects, especially with many complex objects like this batik fill pattern. Check here for in Inkscape, or directly on, also in Indonesian but has English caption.Right, the timelapse video on how to make a batik pattern fill in Inkscape.