semprong sketchbook

Membuat Illustrasi Vektor Hari Raya Idul Fitri di Inkscape

2019-06-09T23:08:00.001+07:00

Sebelum mulai,

Selamat Hari Raya Idul Fitri 2019
Mohon Maaf Lahir & Batin.

Setelah bulan Ramadhan berakhir, tiba saatnya hari raya Idul Fitri. Masih dalam suasana hangat hari raya, kali ini akan membahas sekilas pembuatan ilustrasi ucapan untuk hari raya Idul Fitri.

Seperti di video timlapse sebelumnya, berikut bahan-bahan ramuan untuk membuat ilustrasi ini:

Inkscape - sebagai program untuk membuat grafik berbasis vektor
SimpleScreenRecorder- untuk merekam proses pembuatan ilustrasinya di monitor
Keymon - untuk menampilkan tombol-tombol keyboard dan mouse yang aktif
Shotcut - untuk editing hasil video yang sudah direkam oleh SimpleScreenRecorder
dan terakhir... Elementary Juno sebagai OS utama untuk membuat ilustrasi & disain lainnya.

Wokeh... silahkan dicari dulu bahan ramuannya dari websitenya masing-masing, kalau belum ada. Semuanya open source dan gratis.

Langkah Pertama
Bahan racikan Inkscape digodog setengah matang sampai aplikasinya terbuka. Karena saya sudah memiliki beberapa template untuk beberapa projek di Inkscape, jadi waktu membuka menu File - New From Template, akan muncul beberapa template untuk file baru yang sudah pernah disimpan sebelumnya sebagai template di Inkscape. Disini dipilih template untuk membuat banner di LinkedIn. Inkscape akan langsung membuat beberapa layer yang biasa saya gunakan, beserta grid plus ukuran standar untuk banner di LinkedIn.

Langkah Kedua
Campurkan bahan ramuan nomor 2 sebelum mulai proses selanjutnya, SimpleScreenRecorder, agar apa yang dibuat dengan Inkscape bisa terekam. Selain SimpleScreenRecorder ada banyak alternatif lain diluar sana dari yang gratis sampai berbayar. Tinggal disesuaikan dengan selera dan kantong Anda saja.

Langkah Ketiga
Jangan lupa tambahkan 1/2 sendok makan Keymon. Rasanya yang sedikit pedas bisa membuat mata tetap menatap dengan mantap, sehingga bisa terlihat tombol apa saja yang dipencet sewaktu mencicipi Inkscape... walaupun nantinya divideo ini akan percepat 30x sih.

Langkah Keempat
Masukan sketsa gambar, jika ada, dengan cara drag-n-drop dari files / folder kedalam Inkscape. Disini bisa pilih menggunakan link image, agar file Inkscape ini tidak terlalu besar. Tapi jika gambar sketsa ingin di embed didalam file, pilih embed image. Atur sesuai selera.

Langkah Kelima
Disinilah kita mulai untuk memasak secara perlahan semua bahan-bahan tadi agar bisa menjadi ramuan mujarab untuk meringankan beban di hati... kecuali kalau putus dengan pacar ya.

Dilangkah kelima ini kita bisa bereksperimen waktu menggodog semua bahan tadi, mulai dengan membuat objek satu persatu hingga menjadi suatu kumpulan objek yang menjadi sebuah ilustrasi.

Mulai menggunakan bezier tool, untuk membuat objek dengan cara mengikuti gambar dari sketsa yang sudah di import sebelumnya. Bisa jua menggunakan primitive objects yang disediaka oleh Inkscape, seperti rectangle atau ellipse, kemudian memodifikasi dari objek primitif tadi.

Untuk membuat objek yang tumpang tindih, tapi tetap memiliki bentuk yang sama dengan objek dibawahnya, gunakan boolean tool. Disini banyak menggunakan boolean tool seperti union, intersection, difference, dan lainnya. Ini dia contohnya:

Ada satu fitur yang hilang dari Inkscape dari versi lama, yaitu rounded corner. Walaupun ada extension untuk rounded corner, tapi masih ada keterbatasan dan sepertinya belum ada update versi lebih baru (CMIIW). Karenanya, mari kita membuat rounded corner secara manual dan ... semi otomatis.

Untuk cara manual, yaitu dengan menggunakan objek tambahan lingkaran dengan radius yang sama, dan diposisikan di titik dimana bagian siku yang ingin di buat melengkung (rounded corner). Berikut cuplikannya cara manual:

Cara semi otomatis... dengan cara Path - Dynamic Offset. Gunakan Dynamic Offset pada objek, kemudian geser titik kontrolnya sedikit keluar dari objek, sampai bentuk lengkungan yang diinginkan, kemudian convert objek tersebut dengan cara klik menu Path - Object to Path. Kemudian bisa dikecilkan objeknya dengan scale tool, atau kembali menggunakan offset path tool. Ini contohnya:

Disini ada saya juga menggunakan path effect - pattern along path, untuk membuat objek berkelok-kelok sesuai dengan path yang mengontrol objek tersebut. Selama objek tersebut masih belum di konversi menjadi path, saat diduplicate efek pattern along path akan tetap ada di objek hasil duplicate. Jika sudah sesuai dengan selera, objek dengan path effect - pattern along path tadi bisa diconvert menjadi path agar hasil efeknya permanen.
Berikut cuplikannya:

Untuk pewarnaan, disini banyak menggunakan radial gradient untuk memberikan kesan timbul pada tiap lapisan objek. Awalnya ingin menggunakan filter inner shadow, tetapi kemudian ingat kalau banyak objek menggunakan filter, maka Inkscape saya akan mulai mendidih sehingga bisa jadi basi hasil ramuannya. Disamping itu, Inkscape juga mulai kurang responsif dengan banyaknya filter yang digunakan.

Dengan radial gradient sebenarnya juga membuat Inkscape mulai mendidih sih, tetapi yang menjadi salah satu pertimbangan kenapa akhirnya menggunakan radial gradient adalah kemudahan dalam mengontrol dan mengubah warna dan posisi gradasinya langsung di viewport (?) dibandingkan harus membuka tab filter.

Selanjutnya tinggal diteruskan membuat ramuan sesuai dengan sketsa yang ada. Sketsa disini fungsinya sebagai guidance dalam membuat ilustrasi vektor ini, jadi tidak harus terlalu pakem mengikuti sketsa tersebut. Begitu ilustrasi vektor ini sudah mulai menampakan objeknya secara komprehensif, bisa dilakukan grouping objek-objeknya untuk memudahkan dalam mengelola objek-objek tersebut nantinya, karena yakinlah pasti akan banyak objek berceceran di kanvas Inkscape ini dan akan sedikit sulit jika ingin mengubah posisi atau mengubah ukuran nantinya. So, sejak awal saya suka menempatkan objek yang ada di Inkscape sesuai dengan layer yang digunakan. Sekali lagi, ini bisa disesuaikan menurut selera masing-masing.

Oke, langkah terakhir...
Touch up! Agar secara keseluruah objek-objek ini tidak semuanya saling selfie dan menonjolkan diri masing-masing, disini ditambahkan layer khusus dimana kumpulan objek (group of objects) yang sudah membentuk suatu gambar, akan saya duplicate, kemudia di ungroup, dan di union path supaya menjadi satu objek yg mirip dengan objek asalnya. Sedikit warna gradasi untuk melunakan warna dasar dari objek aslinya yang saling tumpang tindih, sehingga secara keseluruhan warnanya akan lebih soft dan membaur dengan warna background, memberikan kesan objek tersebut lebih jauh dari objek lainnya, dan mengurangi fokus ke objek tersebut.

Objek dimana ingin menjadi pusat perhatian, hanya dikurangi sedikit opacity dari objek gradasi di atasnya yang tumpang tindih. Sedikit membingungkan? Silahkan lihat video timelapsenya dibawah ini:

Sebagai topping tambahan, disini ditambahkan vector assets dari library sendiri berupa kumpulan ilustrasi vektor orang dengan berbagai gaya.

Bahan penutup untuk mengikat semua ramuan sehingga menjadi ilustrasi vector ini adalah dua tetes Elementary Juno, dimana ilustrasi vector dengan Inkscape ini berhasil menjadi suatu ramuan mujarab pendingin hati.

Bahan ramuan lain, Shotcut, digunakan setelah ramuan dasar ini jadi. Dengan Shotcut ini ramuan yg setengah matang ini, di percepat 30x - karena durasi total videonya sekitar 15jam 💪 ... dan tdak ada yang mau nonton video membosankan 15jam ini di youtube.

Hasil akhir... setelah berbagai pertimbangan akhirnya dibikin menjadi square, dengan target utama di instagram. Sedikit modif dan akhirnya jadi square.

View this post on Instagram

Another vector illustration for Eid Mubarak. Check on the blog for process detail. . . Timelapse: https://youtu.be/N08aFO-Up1o. . . . . #inkscape #gimpscapeid #inkscapeid #vectorillustrations #vectorart #illustrations #design #graphicdesign #graphicillustration #instaart #behance #dribbble #designinspiration #flatdesign #illustrator

A post shared by Ferd! (@sipedet) on Jun 9, 2019 at 10:45am PDT

Akhirnya setelah 3 jam membuat tulisan ini, ramuan ilustrasi vektor untuk Hari Raya Lebaran Idul Fitri menggunakan Inkscape ini matang juga.

Semoga ramuan ini mujarab untuk menyambung silaturahim dan pendingin hati.

Timelapse Vector Banner - 73rd Republic of Indonesia Independence Day using Inkscape

2018-08-19T15:05:00.000+07:00

This is another vector illustration timelapse for 73rd Republic Indonesia Independence Day using Inkscape.

As always, I use bezier curve tools, boolean tools, and swatches to create this vector illustration in inkscape. I did two versions, the one in landscape for office purpose, and the square version with minor editing for my instagram. The timelapse video was capturing the landscape version, as that was my first priority to meet the office deadline. Once that finished, I re-edit to square version.

So, here is from my instagram...

Hut RI & Asian Games 2018 #vectorillustration ... . . . #inkscape #inkscapeid #inkscapeindonesia #indonesia #hutri73 #asiangames2018 #illustration #vectorart #behance #dribbble #vectorindonesia #instaart #designer #graphicdesigndaily #jakarta #palembang

A post shared by Ferd! (@sipedet) on Aug 17, 2018 at 12:46am PDT

And this is thethe landscape version

Here is the timelapse video

Enjoy

Digital Illustration Using Krita

2017-12-04T19:08:00.000+07:00

An Overview on Digital Illustration Using Krita

Ok... so I've heard about Krita for quite sometime, but at that time I was still comfortable using Firealpaca. Not until I switch my OS to Elementary Loki. There is no linux version for Firealpaca (at this moment of writing), which in the end "force" me to switch and use other digital painting software that should be reliable in linux. And then this is where I remember about Krita, an open source painting program running in multiplatform operating systems. Next thing is I downloaded Krita and start using it for doing digital illustration works.

Coming from Firealpaca where there aren't so many settings like in Krita (brush engine), I was a little bit overwhelmed, but also amazed in the same time. To fill in the blanks, I watched some tutorials in youtube about Krita basic usage. But the best teacher to learn enything is to experience it, and try it out yourself, and so I did.

Krita Brush Presets

Right Click Pop-up Menu

This pop-up menu in Krita really helped me a lot to group together the brushes that I use the most, so that I didn't have to switch back and forth looking the brush I'm going to use from different groups. And also we can adjust the size and the opacity of the brush directly from this pop-up menu in Krita. The shorcuts for resizing and play with the brush size and opacity also available if you prefer to work with keyboard shortcuts as well.

Krita Brush Settings

This is my custom brush settings in Krita. There are so many things in there, but just playing with few of them, I can get the brush that I'm looking for. The panel on the right is where we can create the thumbnail of the custom brush.

Krita Assistant Tool

Now this is the best part for me. It's the Asisstant Tool!
With these tools, we can draw a smooth curvy lines or drawing perspective easily. As you can see, there are several Assistant Tool you can play with in Krita.

I tried my first digital illustration in Krita doing this classic Superman illustration. I had to try different brush settings on the way to fit with my liking. Here is the digital illustration I made in Krita first try:

Lineart in Krita

Superman Fanart Digital Illustration in Krita

back to #superman #doodling ... . . . #illustration #digitalillustration #doodle #digitalart #krita #instaart #instadraw #illustrations #dccomics #fanart #wacombamboo #digitaldrawing #timelapse #dccomics #timelapsedrawing #digitalinking

A post shared by Ferd! (@sipedet) on Oct 27, 2017 at 6:25am PDT

I actually did two versions of Superman illustrations, the first one is the one with Man of Steel costume, second is from classic outfit. Not bad for my first try using Krita eh :)

I was thinking more on "how to do this" at first try when doing Superman digital illustration in Krita, rather than just "go with the flow" and paint, so I did another try doing digital illustration on this Ryu from Streetfighter. My second attempt was more "relaxed" because I did some customizations on Krita preference, and made me more comfortable using Krita. Here is my second digital illustration using Krita:

Rough Sketch in Krita

The first step, I loosely draw the character with pencil brush in Krita just to get the overall idea of the illustration, the shape, proportion, etc.

Final Lineart in Krita

When I'm happy with pose and proportion, I move on to do the lineart with layer on top of the rough sketch. And also tune down the rough sketch layer opacity so that I can see the smooth lineart progress.

Digital Coloring in Krita

Hadouken!! . . . #ryu #streetfighter #digitalillustration #digitaldrawing #digitalart #hadouken #illustrator #illustrations #illustrationofinstagram #instaart #drawing #deviantart #wacombamboo #behance #dribbble #krita #digitalpainting #fanart

A post shared by Ferd! (@sipedet) on Nov 28, 2017 at 10:15pm PST

Lastly, just color the piece with different layers for each individual parts, for example layer for body color, layer for hair color, layer for belt color, and so on, so later on I can tweak individualy when I need to. When the coloring is done, I color the lineart with alpha lock on that layer switched on, so the color only apply within the lineart only. The result is we can see the lineart has different colors corresponds to the parts of the character, and not just black color outline.

In the end, I think I can move on doing my digital illustration using Krita, yet there is two things that got me in the head. First, Krita tends to show slow performance on using textured brush, especially in large canvas with high dpi like 2048px x 2048px 600dpi, probably (definitely) because of my PC (i3 3ghz with 4GB Ram). It created almost like 1gig cache file for both my digital illustration works. The work around with this, when I'm happy with my digital inking and coloring, I merge them into one layer, and resize the image size half. Then working from that file for polishing or adding some extra wow for the final digital illustration. And also, maybe it's time to do some major upgrading for my PC, and see how it goes with high dpi on large canvas.

Second, I definitely need to convert my other works that was done using Firealpaca to Krita, which is not a really big deal, but a bit tedious with so many files to work on with.

Anyways, in the mean time, maybe I'm going to share some video on digital illustration using Krita, like a timelapse, but after I feel more confident to do that in Krita. Right now, there are so much to learn with this piece of amazing software.

Editing Image Banner for Instagram

2017-10-25T08:00:00.000+07:00

Using iPhone 5, a flashlight tied to tripod, and power bank - ha obviously... using ProCam photo app in my iPhone literally eating up so much power - and additional mango picture from pixabay, plus a patience in croping and color correction, here goes the timelapse of the photo used in istagram account for @lavalina.dessert.

I had to cropped the original photo into several pieces, so that I can compose with other images and adjust the color later on each elements.

The first step is to create mask for the two plastic jars. I need only those and going to replace the rest of the image.

Original Photo from iPhone 5

Cropped Photo

Then, using photo from pixabay, I also created mask for the mango piece along with the bowl, so that it may be composed with my original photo.

https://pixabay.com/en/mango-hd-mango-mango-fruit-2360551/

Using photoshop layer filter, I added custom water drops as I wanted to show little bit condensation on the plastic jars and the mango piece, with a small amount on the table. It's hardly to see, but it's there.

Last elements are the shadows. Without shadow those cropped elements look floating on the table and not well integrated. So using laso tool to create simple shadow objects, blurred and played with the opacity, all elements now look like sitting on the table.

For the final touch, adjust the color using brightness contrast and color balance so those elements were having similar tone, lightness, and somehow was shot in the same place in the same time. Vignette also added for dramatic feel and focus on the center of the photo which is the plastic jars. Plus added some text and we're done.

No need to add the logo, because the plastic jars labels already have the logo on them.

And... this is the final photo, and below is the one I posted on my instagram with the timelapse.

Ini dia si Es Mager - ManggaSegeeeer.... dalam kemasan ukuran sedang, cucok untuk minum rame-rame bareng orang terdekat ❤️❤️ ... nyegerin deech pastinya 🍹🍹🍹 ... potongan mangganya yg dipiring kecil gk termasuk yaa . . . #esmager #lavalinadesserts #minuman #minumanseger #minumanenak #jusmangga #jusmanggaseger #jusenak #pesanan #jusbuah #esbuah #desserts #dessert #dessertenak #dessertjakarta #jualansis #jualan #enak #jakarta #jakartafood #depok #depokfood #cemilan #instagram #instapic #instadessert #laperbanget #qraved #wowkuliner #zomatoid

A post shared by Lavalina Salads & Desserts (@lavalina.dessert) on Sep 24, 2017 at 9:45pm PDT

Photo editing for @lavalina.dessert . . . #photoedit #photoediting #timelapse #instavideo #instagram #instadaily #mobilephotography #dessert #mangojuice #lavalinadesserts #mango #drinks

A post shared by Ini Ferd! lho (@sipedet) on Sep 21, 2017 at 7:14pm PDT

Enjoy.

Logo Design Iteration in Inkscape

2017-09-21T09:00:00.000+07:00

Here are some logo iterations I made for this Mall in Cibinong. This logo design iterations were supposed to give a new fresh and modern feel over the first old logo, which is the first logo on the left.

After some discussion with one of the superior employee, we feel that the logo needs to be simplified but without losing to much of the old half butterfly shape. Well, I did the first logo, which is the one on the left in the above image, it works ok with full color, but not really well when used in mono tone color. So, by the end of the day, the discussion ended with the need of new simplified logo.

This time I had more time to explore the logo design concepts. Tweak the designs so that it will work better either in full color or in mono tone / black and white color. Then come up with the last logo design (on the right).

The middle logo design was, I called it 'transition' logo from old to new logo design. The actual sketches and logo iterations are actually more than three iterations. But I only show these there logo iterations as I feel they are reperesent the most between the old - new logo design concept.

Here goes the logo design iterations, made in vector using Inkscape. For other who have not have inkscape installed or doesn't know how to use inkscape, I provided them with hi-res png and editable pdf file. while the master FA file remains in inkscape native format which is SVG format.

But as this time of writing this post, The new logo, even though has been approved, haven't really made into real usage in the Mall, and don't ask me why.

logo iterations. . . #logo #design #graphicdesign #graphicdesigner #logoinspirations #logoinstagram #logodesigner #logodaily #logoinspiration #logodesain #vector #vectorart #vectorindonesia #vectorillustration #logovector #vectorlogo #instavector #inkscape #inkscapeid #inkscapeindonesia #vectorartindonesia #logodaily #vectorgraphics #behance #gimpscapeid #cibinong #cibinongmall #instalogo #instagram #lateposts

A post shared by Ini Ferd! lho (@sipedet) on Sep 14, 2017 at 4:00am PDT

Enjoy the show.

Vector Rocket Logo in Inkscape

2017-09-18T08:00:00.000+07:00

Here's another vector rocket-corn logo using Inkscape I did few months ago. The idea was to combine a rocket and a corn, flying over the field. To get a sense of dynamic movement, I added that rocket trail and a little "fish eye" distortion on the field, so it looks like the rocket-corn is moving fast.

The greenish tone for the overall look just to give a sense that this product is actually organic and naturally from... nature. As the yellow in the corn, well... it is corn... and to give a little contrast with the background.

So with the fast dynamic movement and organic nature green color should read as you will get this organic natural product fast and pronto, as fast as the rocket goes to your place. Hopefully that'll make sense :)

I also uploaded this vector rocket-corn logo in my instagram, so check it out and.. engage.

Rocket-corn . . #logo #design #designers #logoinspire #logoinspirations #inkscape #logovector #logodesain #graphicdesign #graphicdesigner #logodaily #instalogo #designlogo #vector #vectorart #vectorillustration #vectorindonesia #inkscapeid #gimpscapeid #behance #vectorlogo

A post shared by Ini Ferd! lho (@sipedet) on Sep 4, 2017 at 10:30pm PDT

Enjoy.

Lavalina Dessert and Salad Logo Design

2017-09-11T22:10:00.000+07:00

The logo is for a homemade dessert and salad product, called Lavalina. The owner wanted to have a vintage badge look with some classy sense on it. So we went into this direction, using slightly modified font with simple ribbon below, and dark color with yellow / gold accents for the classy look. A little red ribbon with "Homemade" text is also giving another accent on the logo, not to strong but just enough.

These colors came up after I saw their testimony with a picture of apple crumble and coffee, and it suddenly "taste" a bold dark color right away in my mind. Maybe that coffee was playing tricks on my mind.

And yes, it's a quite bold in appearance with these chosen colors, but I think it also look elegant and classy, especially the yellow / gold color on top of the dark blueish color. Yet, for alternative color, it has greenish main color with white to replace the yellow, for salad products.

To finish this logo, I use Firealpaca to digitally sketching the idea roughly, and finalizing using Inkscape for vector output, as using vector will enable me to resize the logo without any quality loss of the image. As for photo manipulation I finally using Gimp, after long run using Pixelmator, because now my mac is dead :(. But Gimp also did the job done. And finally, I'm using this simple graphic conversion tool, Converseen, to convert the png to jpg for final upload file format.

The initial sketches of the logo:

And these are some iterations from basic default font to slightly modified font as the final logo:

Also, here are some web banners and instagram pics for Lavalina - Homemade Dessert and Salads:

#applecrumble #cake #lavalinadesserts #pesankue #pesankuejakarta #pesanankue #kueonline #kueonlinejakarta #pesandessert #officebreak #meetingsnack #meetingsnackjakarta #kueenak #enak

A post shared by Lavalina Salads & Desserts (@lavalina.dessert) on Aug 23, 2017 at 2:24am PDT

Mari diorder sist Apple Crumblenya... . . #applecrumble #cake #lavalinadesserts #pesankue #pesankuejakarta #pesanankue #kueonline #kueonlinejakarta #pesandessert #officebreak #meetingsnack #meetingsnackjakarta #kueenak #enak #pesanantar #pesanantarmakanan

A post shared by Lavalina Salads & Desserts (@lavalina.dessert) on Aug 23, 2017 at 2:23am PDT

Yang suka salad buah, ini musti dicobain deh... nyegeerin bangets lho. . . #lavalinadesserts #saladbuah #fruitsalad #segar #enak #saladjakarta #saladsegar #pesansaladbuah #instagram #instapic #jakartasalad #jakarta #pesanantar #pesanantarmakanan

A post shared by Lavalina Salads & Desserts (@lavalina.dessert) on Aug 29, 2017 at 12:30am PDT

Hopefully you guys like the logo, and please share your thought on this.

Vector Logo Illustration using Inkscape

2017-09-04T07:00:00.000+07:00

Vector tree logo illustration showcase done in Inkscape. The tree was really fun to make, especially with all those strokes. The leaves however, just a simple shape with semi transparent colors applied to them.

Inkscape's tools used for this logo mostly using create bezier tool, node tool, and path operations.

Enjoy the show.

Tree... . . #logo #design #graphicdesign #logoinspirations #logoinstagram #logodesiger #logoinspiration #logodesain #tree #treelogo #vector #vectorart #vectorindonesia #vectorillustration #logovector #vectorlogo #instagram #instadaily #instavector #inkscape #inkscapeid #inkscapeindonesia #vectorartindonesia #logodaily #vectorgraphics #illustration #behance #dribbble #gimpscapeid

A post shared by Ini Ferd! lho (@sipedet) on Aug 29, 2017 at 5:51am PDT

Vector logo Illustration - Ninja

2017-08-29T22:07:00.000+07:00

Vector logo illustration using inkscape made for fun. It was uploaded in instagram couple days ago, and just found out to embed this in my blog.

Have a look and enjoy. Be sure to join the fun in my IG at @sipedet :).

Ninja . . #vector #vectorart #vectorartindonesia #graphicdesign #design #logo #graphicdesigner #designvector #instaart #instagram #vectorillustrator #vectorillustration #inkscape #inkscapeid #inkscapeindonesia #behance #dribbble #ninja #illustration #gimpscapeid

A post shared by Ini Ferd! lho (@sipedet) on Aug 24, 2017 at 11:39am PDT

Vector Batik Seamless Pattern in Inkscape

2017-06-28T04:21:00.000+07:00

Inkscape Tutorial

How to Make a Seamless Batik Pattern Fill Using Inkscape

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 google

Now 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. 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 60px
60px to 40px

Now 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. Anyway.. 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 on

Step 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. So, the finished pattern from thi tutorial is going to be a batik pattern with exact pattern object without any anomalies, as we're going to duplicate those pattern objects and rearrange them in a way to make it look like batik.

**** UPDATE 1 Juli 2017 ***

Before moving on to the last step number 4 below, and also as the video only showing the progress from step number 4, now I kind of have another thought on making the pattern based on the step number 3 above, where it says focus on those two main patterns (the yellow and red colored area in the image above).

Say, I've been playing with this pattern more and come up with different direction on making the pattern with less pattern objects and thus it also gives better "performance" on my PC, obviously. Well I don't have a really highend PC, so yeah optimize performance is a must for me.

Here what I did with the pattern:

In above image, I rotated counter clock wise the square pattern object and use guides to help me have the straighten the pattern. That semi transparent white object is the one that has two main pattern objects from step 3.

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. And look how 'slim' it is compare to the square one.

Anyway, I also have made these pattern available for download, in two version, the full color and white monotone color, which I think also looks cool.

**** END UPDATE ****

Step 4 - Making the Pattern Objects

Alright, 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 color swatches tutorial (Indonesian) in Inkscape, or directly on youtube, also in Indonesian but has English caption.

Right, the timelapse video on how to make a batik pattern fill in Inkscape...

By the way... did you see the 8 sided star in the grid?

...

did you?

...

Here you go...

Ha!.. ok just still bugged by the grid.

Anyway, hopefully this tutorial is usefull and please don't take it so seriously about the grid thing, and keep doing your thinkscape.

Cheers.

Membuat Gambar Vector Karakter Komik di Inkscape

2017-06-05T11:41:00.000+07:00

Liputan kali ini sang penulis akan menampilakan karya masa lampau djaman kuliah dimana waktu itu bikinnya dengan cat poster dan hasilnya lumayan berantakan. Biar nggak bobro -bobrok amat untuk dipajang disini, sekarang dibuat ulang dengan membuat gambar vector karakter komiknya menggunakan Inkscape.

Gambar Sketsa

Setelah selesai gambar skestanya, di-scan, dan di import ke Inkscape untuk ditracing menjadi gambar vector. Proses tracing gambar vector karakter komiknya di Inkscape juga tidak terlalu sulit karena sudah ada sketsa sebagai acuan untuk membuat gambar vectornya di Inkscape.

Tools yang digunakan juga nggak terlalu banyak, masih berkutat di draw bezier tool, node tool, path operations, draw square tool, dan terakhir memakai warna dari swatches. Dan disini juga sang penulis memilih untuk tidak menggunakan lineart untuk di gambar karakternya. Mungkin kali ini lagi doyan membuat ilustrasi vector komik yang tampilannya tanpa stroke outline seperti di gambar Spiderman Homecoming ini. Tapi kalau tertarik ingin tahu cara membuat lineart vector untuk ilustrasi menggunakan Inkscape, bisa dibaca disini lho.

Okeh, untuk melihat proses pembuatan cara membuat gambar vector karakter komik dengan Inkscape, simak di video berikut ini aja, dijamin menghibur dengan musiknya yang bernada semangat. Nontonnya sambil senam aerobik juga boleh kok, soalnya enak sih musiknya untuk di dengar sambil sit-up.

Enjoy

Perbedaan Vector dengan Bitmap

2017-05-22T08:00:00.000+07:00

Sebelum memulai pertandingan, ada baiknya kita mengetahui dulu perbedaan dan pengertian antara vektor dengan bitmap atau raster images.

Vector Image

Vector adalah sebuah gambar digital yang dibuat berdasarkan perhitungan matematis, sehingga gambar tersebut akan selalu terlihat tajam walaupun diperbesar atau diperkecil. Gambar hasil vektor tidak tergantung dari jumlah dot per pixel yang biasa digunakan pada gambar bitmap atau raster.

Bitmap / Raster Image

Sedangkan gambar bitmap atau raster, adalah hasil gambar yang ditampilkan dengan menggunakan dot per pixel hingga membentuk suatu kesatuan gambar secara menyeluruh. Jika gambar diperbesar atau diperkecil, sudah dipastikan hasil gambar tidak akan setajam ukuran sebelumnya, karena perbedaan jumlah ukuran dot per pixel tadi.

Dari sisi ukuran file, untuk file vektor umumnya lebih kecil ukurannya dibandingkan dengan ukuran file berbasis bitmap, karena file bitmap menyimpan informasi warna tadi per pixel, maka semakin besar gambar akan semakin banyak jumlah pixel yang dibutuhkan, dan secara otomatis akan membutuhkan file yang lebih besar. Selain ukuran, banyaknya warna juga menentukan ukuran file berbasis bitmap. File berbasis vector tidak terpengaruh oleh besar ukuran dan jumlah pixel yang dibutuhkan, oleh karenanya lebih kecil ukuran filenya.

Beberapa Perbedaan Vector & Bitmap
Vector Images	Bitmap / Raster Images
Tidak tergantung resolusi per pixel	Tergantung dari resolusi per pixel
Ukuran file lebih kecil	Ukuran file lebih besar
Hasil gambar tidak terpengaruh jika diperbesar atau diperkecil	Kualitas gambar mengalamai degradasi jika diperbesar / diperkecil
Gambar disusun oleh kumpulan objek yang berdasarkan perhitungan matematis	Gambar disusun berdasarkan pixel
Hasil gambar bisa terlihat "real" tetapi cukup rumit pengerjaannya	Hasil gambar bisa terlihat "real" dan lebih mudah mengolahnya

Kalau dikelompokkan, file pengolah berbasis vector diantaranya adalah Adobe Illustrator, Inkscape, Sketch, Vectr, dan lainnya. File pengolah bitmap diantaranya Adobe Photoshop, Gimp, Pixelmator, dan lainnya.

Nah, sekarang pertanyaannya adalah, kapan menggunakan aplikasi berbasis vector dan kapan menggunakan aplikasi berbasis raster atau bitmap?

Jika desain yang akan dibuat kurang membutuhkan gambar raster seperti hasil foto, maka gunakan aplikasi berbasis vector. Tetapi jika desain yang dibuat sangat banyak menggunakan gambar-gambar foto dan lainnya, gunakan software pengolah bitmap.

Contohnya, waktu saya membuat mock-up untuk sebuah UI aplikasi mobile, saya lebih suka menggunakan aplikasi berbasis vector. Kemudian jika disalah satu halamnya diperlukan gambar foto, gambar foto tersebut diedit di aplikasi pengolah bitmap, setelah final diimport kembali ke aplikasi berbasis vector untuk dilanjutkan dari sana.

Dengan Inkscape untuk memasukan gambar (import) ke dalam desain yang sedang dibuat selalu dengan opsi link yang diaktifkan. Dengan link, saat ada revisi dengan gambar foto tersebut, setelah selesai diedit dan di export menjadi jpg atau png di Gimp misalnya, file tersebut jika sebelumnya sudah diimport dengan opsi link di Inkscape, maka akan otomatis berubah, tidak perlu di import ulang.

Contoh lain saat membuat gambar kolase foto yang membutuhkan banyak gambar di crop, di Inkscape bisa saja sih, namun akan lebih mudah dan cepat jika menggunakan Gimp atau Photoshop misalnya, yang memang software tersebut memiliki keunggulan di bagian tersebut.

Dari pengalaman menggunakan software tersebut, menurut saya aplikasi-aplikasi tersebut sebenarnya saling "diperlukan" satu sama lain. Ibaratnya kita adalah sang koki, aplikasi tersebut adalah garam dan kecap, satunya asin, satunya manis, kalau dipadukan dengan bahan foto... maksudnya bahan makanan hasilnya bisa lezat dilidah.

Ini hanya berdasarkan pengalaman SOKTOY aja sih, pastinya tiap orang memiliki cara masing-masing.

Pertanyaan terakhir, kapan kamu akan menggunakan aplikasi vector atau bitmap hayoo..?

Ilustrasi Komik Homecoming Spiderman Menggunakan Inkscape

2017-05-15T16:31:00.000+07:00

Langsung saja, berawal dari sketsa kasar yang kemudian di tracing menggunakan Inkscape. Prosesnya sendiri memakan waktu kurang lebih 13 jam, dan itulah salah satu sebab kenapa video timelapse ini dibagi menjadi 3 bagian. Saya ingin video time lapse yang hanya berdurasi kisaran 15-10 menit saja.

Proses tracingnya manual menggunakan bezier tool dan bantuan path operation di Inkscape. Bezier tool untuk membuat bentuk dasarnya, dan kemudian detail ditambahkan bertumpuk diatas objek sebelumnya. Agar tumpukan objek mempunyai bentuk yang sama, atau tumpukannya tidak keluar dari bentuk objek dasarnya, path operation tool lah yang mengambil alih peran, mulai dari union, subtract, dan lainnya. Jadi jangan heran kalau di video time lapse bikin ilustrasi komik Homecoming Spiderman ini di Inkscape, banyak yang awalnya keluar dari bentuk dasar, kemudian di "rapihkan" dengan bantuan path operation tadi.

Full Color Version

Semakin objeknya bertambah banyak, mulai terasa si Inkscape kurang responsif. Entah karena screen capturenya nyala yang bikin berat, atau memang objeknya di Inkscape yang mulai banyak. Apalagi setelah ditambah filter blur dan layer mode yang beda-beda. Inkscape sempat crash dua kali... tapi untungnya fitur autosave saya nyalakan dari preference, dan ada autobackup dari Inkscape, jadi mulainya lagi dari crash tidak terlalu jauh.

Outline Mode Version

Gambar final disini sudah diedit dimensinya menjadi 1280 x 720px, dan sedikit perubahan dari komposisi objeknya. Dimensi awal (dari sketsanya) adalah 960px x 700px, jadi lumayan jauh perbedaan lebarnya.

Untuk lebih jelasnya, silahkan dipelototin video time lapse cara membuat ilustrasi komik Spiderman Homecoming ala Inkscape dibawah ini. Kalau terlalu cepat time lapsenya, harap maklum yak.

Part 1

Part 2

Part 3

Semoga menghibur...

Awas Penyakit Buta Warna Ternyata Menular

2017-05-11T07:00:00.000+07:00

Yup.. mengerikan bukan.
Ini beneran lho, dan benar-benar terjadi.

So... hati-hati teman, efek menularnya pun sangat cepat, melebihi wabah malaria maupun wabah muntahber. Ini lebih dahsyat...

Kenyataan ini saya alami sendiri, dan saya lihat sendiri, bahkan saya pun suka tertular juga...
Yaa... tergantung kondisi sih.

Jadi begini ceritanya, setiap pagi sudah menjadi kegiatan resmi saya untuk pergi mengantar anak ke sekolah menggunakan sepeda motor. Berangkatnya pun selalu dibawah jam tujuh pagi, pastinya lah. Diatas jam tujuh pagi sudah dipastikan anak saya terlambat masuk sekolah. Selama perjalanan menuju sekolah, disekitar rumah jalanannya walaupun ramai dan agak tersendat, tapi sebagai pengguna biker masih bisa jalan melipir-melipir disisi jalan, bahkan disamping mobil jarak tipis. Disitu masih "lancar", karena belum ketemu yang namanya lampu merah.

Naah... begitu sampai lampu merah, disitu saya tersentak karena melihat banyak banget pasien buta warna yang mengendarai kendaraan bermotor, terutama roda dua. Mereka mungkin penyakit buta warnanya sudah sedemikian akut, jadi sering kali langsung asal terabas jalanan walaupun lampunya sedang merah. Sering kali saya heran dan hanya melongo kalau melihat brother bikers yang main terabas lampu merah karena dari arah lain yang lampunya hijau, kendaraannya mulai bergerak maju. Sering kali brother bikers yang menerabas lampu merah itu musti kepat-kepot main gocek salip tipis biar gak keseruduk oleh kendaraan yang lampunya hijau. Memang tidak semua brother bikers yang terabas lampu merah, tapi banyak yang begitu. Dan kalau pun lagi pada anteng dan normal nih matanya, begitu ada seorang pelopor yang main terabas, langsung deh menular tuh penyakit buta warnanya just like that... instantly bro. Untuk biker pemula seperti saya yang masih suka ragu-ragu untuk follow the pack, dengan cap-cip-cup-daun-kancut... suka tertular juga akhirnya. Tapi kalau lagi bawa anak sekolah, nanti suka ingat ada penumpang, baru deh mata kembali normal. Serius, untuk menahan gejolak wabah buta warna itu memang penuh godaan, apalagi waktu lagi naik motor sendiri.

Kalau lagi giliran saya yang dapat lampu hijau, waktu mau maju, eh dari arah berlawanan yang lampunya merah, malah ada yang maju nerabas..bas..bas kearah saya. Kalau dipepetin malah dianya yang lebih galak sambil teriak "Woi.. jalan sebelah lu masih luas kali!!".

Masalahnya bukan jalanan diruas saya lebih luas atau tidak, tapi situ yang nyerobot jalur saya. Udah salah sewot lebih galak. Kalau saya mah waktu lagi kumat buta warnanya, waktu didepan ada orang yang arahnya lampu hijau dan saya lagi nerabas, saya yang melipir minggir, ciut seperti ayam mau nyebrang dijalan, karena walaupun lagi kumat, saya sadar ambil jalur orang. Selain itu saya orangnya cinta damai wkwkwkwk.

Orang bilang hidup di kota besar seperti Jakarta keras, tapi bukan berarti musti seenak jidat terabas sana sini. Mungkin mereka terlambat bangun karena semalam habis ngerjain revisi jadi paginya telat bangun, mungkin mereka terlalu banyak sarapan yang manis-manis jadi sugar-rush efeknya dunia serasa melambat padahal orang lain yang melihat mah dia udah jalan setengah terbang, atau mungkin selain buta warna dia juga berkepribadian ganda yang salah satu keperibadiannya adalah sang pembalap Rossi... apapun itu, tolong deh dipahami kalau lampu warnanya merah berarti stop, hijau berarti jalan. Sederhana kok. Saya juga pasien buta warna yang masih dalam tahap pengobatan dan kadar buta warnanya sudah menurun jauh. Jadi kalau sama-sama berobat buta warna, saya yakin, tidak ada lagi brother bikers yang main serabar-serobot lampu merah.

Inget pepatah lama... Bebek aja bisa ngantri, masa ente tidak.

Eh.. bicara soal antri... ada wabah baru lagi tuh... paling sering kejadian waktu mau bayar di mini market... tapi itu cerita dilain waktu. Kalau ditulis di sini nanti kehabisan bahan dong sayah.

Salam Bikers.

Demo Membuat Isometric Skuter di Inkscape

2017-05-08T09:52:00.000+07:00

Kali ini saya akan mendemonstrasikan bagaimana membuat gambar vektor skuter atau vespa dengan menggunakan proyeksi isometrik di Inkscape. Caranya masih mirip dengan tutorial sebelumnya disini, yaitu dengan menggunakan snap to grid dan draw bezier tool. Dan jangan lupa, setelah semua objeknya selesai, pewarnaannya melalui swatch agar nantinya memudahkan kita jika ingin mengganti warna-warnanya setelahnya. Untuk lebih tahu soal menggunakan swatch, bisa dilihat di edisi sebelumnya disini.

Untuk cuplikannya bisa dilihat di video dibawah ini.

Semoga bermanfaat, wassalam.

Tutorial Inkscape - Tips Menggunakan Swatches

2017-05-05T07:00:00.000+07:00

Saat membuat gambar dengan proyeksi isometri menggunakan Inkscape, saya akhirnya mendapatkan wangsit agar saat kita mau mengganti warna pada objek-objeknya bisa diganti lebih cepat. Ya kita tahu, kadang dalam membuat gambar vektor di Inkscape, objeknya bisa menjadi sangat kompleks dan saling bertumpuk. Kalau sejak awal tidak di organisir, nantinya akan sedikit susah untuk memilih atau seleksi objek yang ada di tumpukan paling bawah. Di Inkscape kita bisa membuka tampilan tab "Object", namun dengan banyaknya objek yang saling tumpang tindih juga berarti kita harus scroll ke bawah sampai menemukan objek yang kita cari.

Nah, dalam kasus ini, jika saya ingin mengganti warna pada objek dan tanpa perlu ribet untuk memilih objeknya ada dimana, kita bisa menggunakan swatch. Swatch itu sendiri adalah kumpulan warna-warna yang diambil dan dimasukan ke dalam swatch atau palet warna di Inkscape. Kemudian kita gunakan warna-warna dari swatch tersebut ke objek yang diingikan. Jika nantinya kita ingin mengganti warna objek tersebut, karena tadi telah diberikan warnanya dari swatch, cukup seleksi objek dengan warna yang sama dari swatch, kemudian geser-geser slider warnanya sampai puas. Objek lain dengan warna swatch yang sama akan otomatis ikut berubah warnanya.

Monggo dilihat cuplikannya di video berikut ini untuk demonstrasinya.

Silahkan dikomentari gan & sis.

Demo Membuat Gambar Isometric di Inkscape

2017-04-27T20:06:00.000+07:00

Hari ini saya ingin memperlihatkan proses kilat, atau bahasa gaulnya timelapse video 😆, proses membuat gambar menggunakan proyeksi isometric di Inkscape. Prosesnya gak njelimet, hanya butuh ketabahan dan kesabaran untuk membuat gambarnya karena kita bermain dengan perspektif. Dan satu lagi yang dibutuhkan untuk membuat gambar vector ini, yaitu Inkscape... pastinya.

Kenapa butuh kesabaran dan ketabahan? Karena kita musti memperhatikan grid isometric tersebut waktu membuat gambar vektornya. Dan sering-sering untuk zoom-in dan zoom-out supaya saat snapping point-point dari bezier toolnya bisa lengket sempurna di titik grid yang diinginkan.

Langkah pertama setelah membuka Inkscape adalah, membuat axonometric grid di document properties. Pilih tab Grids kemudian dari menu drop down Creation pilih Axonometric Grid, dan klik di tombol New.

Grids tab in Inkscape Document Properties

Jika ukuran grid terlalu kecil bisa diperbesar dengan mengganti nilai yang ada di kolom spacing Y. Contohnya disini saya mengganti nilai Spacing Y menjadi 10 dan tampilan gridnya akan menjadi lebih besar.

Bigger Spacing Y in Inkscape Axonometric Grid

Kemudian aktifkan snapping tool dan pilih grid, jika belum aktif, dan lanjut dengan mulai menggambar menggunakan bezier tool. Menggunakan snapping tool saat membuat gambar dengan proyeksi isometrik sangat penting di Inkscape agar gambar yang dihasilkan presisi dan akurat sesuai dengan grid isometriknya.

Simple Objects using Isometric Grid in Inkscape

Dan juga kadang diperlukan untuk membuat garis bantu tambahan yang lebih pendek ukurannya daripada grid yang disediakan Inkscape.

Additional grids with different sizes

After using the additional grids

Untuk objek yang bentuk dasarnya silinder atau tabung, kita juga perlu menggunakan perspective dari path effect.

Untuk jelasnya, monggo diplototin video timelapse dibawah ini. Monggo dikomen kalau ada yang suka main dengan proyeksi isometrik di Inkscape, atau lihat demo membuat skuter dengan proyeksi isometrik menggunakan Inkscape disini.

Wasalam.

Hasil Logo Menggunakan Inkscape

2017-04-14T01:30:00.000+07:00

Logo Design

Hasil Membuat Logo Menggunakan Inkscape

Membuat logo menggunakan Inkscape tidak berbeda dengan menggunakan aplikasi desain lainnya misalnya seperti Adobe Illustrator, karena pada dasarnya hampir semua aplikasi tersebut memiliki kesamaan fitur. Yang utama adalah bukan menggunakan aplikasinya, tetapi ide untuk membuat logo tersebut. Karena aplikasi-aplikasi desain itu hanyalah sebuah alat untuk memudahkan kita dalam mengerjakan suatu pekerjaan desain. Bagi yang ingin mengetahui tentang aplikasi-aplikasi desain, bisa dilihat disini. Disitu sang penulis membagi pengalamannya menggunakan software-software desain tersebut dan tidak terpaku hanya dengan aplikasi berbasis opensource saja, aplikasi berbayar juga berguna jika memang akan memudahkan dalam proses membuat desain, dan jika memungkinkan dari sisi biaya.

Untuk desain logo ini, proses pembuatannya menggunakan Inkscape juga tidak terlalu rumit. Di Inkscape sudah tersedia tools yang sangat memungkinkan untuk membuat logo dari hasil goretan pensil yang kemudian di tracing di Inkscape. Jadi awal mulainya adalah menggunakan alat yang "paling primitif" yaitu pensil dan kertas. Jika sudah final hasilnya, baru kemudian discan dan di import ke Inkscape untuk di tracing menjadi gambar digital berbasis vektor.

Sangat disarankan saat membuat logo menggunakan aplikasi desain berbasis vector seperti Inkscape atau Illustrator, karena hasil gambar digital berbasis vektor tidak akan pudar dimakan usia, maksudnya jika kita ingin memperbesar atau memperkecil kualitas gambarnya tidak akan mengalami penurunan kualitas atau degradasi, dibandingkan jika dari awal sudah membuat menggunakan aplikasi berbasis raster atau bitmap seperti Photoshop misalnya. Jika sejak awal ukuran dimensi dan resolusi canvas yang digunakan tidak cukup tinggi, maka jika suatu saat akan diperbesar akan mengalami degradasi kualitas, seperti jagged atau pecah-pecah gambarnya. Untuk detail tentang perbandingan vektor dan raster bisa dilihat disini.

Kembali ke desain logo, setelah logo selesai dibuat di Inkscape, biasanya sang penulis akan membuat satu file copy yang isinya sebagai display dari presentasi logo seperti gambar diatas. Tidak harus menampilkan grid yang digunakan seperti gmabar diatas, namun bagi sang penulis dengan menampilkan gridnya lebih menarik dibandingkan hanya mnampilkan logonya saja.

Jangan lupa untuk membuat logonya dengan versi hitam-putih setelah versi dengan warna jadi, karena versi hitam putih akan diperlukan untuk media tertentu dimana jika menggunakan logo dengan versi full color tidak memberikan hasil kontras dengan medianya, shingga logo sulit terlihat. Dan sertakan juga palet warna final yang digunakan pada logo untuk mempermudah nantinya saat akan mencari tema warna yang akan digunakan pada materi lainnya seperti kartu nama dan lainnya.

Inilah hasil akhir dari desain logo untuk platform aplikasi komunitas gamers di Indonesia, menggunakan Inkscape.

Monggo diterawangi gambar logonya.

Auto Bat Script untuk Bikin Folder Project

2017-04-08T01:13:00.000+07:00

Tips

Cara Membuat Beberapa Folder Sekaligus Secara Otomatis Di Windows Menggunakan Batch

Salah satu app di MacOS yang paling saya suka adalah Automator. Dengan app ini, kita bisa bikin automation workflow tanpa perlu nyekript... bikin script diketik manual maksudnya, tinggal drag & drop aja.

Nah, salah satu workflow dari Automator yang paling sering dipakai adalah untuk bikin struktur folder secara otomatis untuk projek yang akan digarap. Jadi tidak perlu berulang kali bikin susunan folder setiap mau bikin projek baru, cukup klik workflow yang dibikin di Automator tadi... jadi dah abrakadabret.

Sekarang lagi coba di Windows untuk bikin "app" yang sama... mmm... mungkin bukan app sih, terlalu canggih kalau ini disebut app, karena cuma file .bat aja hehehe. Dan sebagai pengingat kalau nanti lupa atau file .bat-nya hilang, jadi dicopas disini.

Struktur susunan folder yang saya ingin buat adalah:

* Nama Project
** assets
(seluruh file asset pendukung project disimpan disini, umumnya file pendukung seperti gading-gajah.jpg, gajah-betina.png, makanan-gajah.ai untuk file vector pendukung, dll).

** artworks
(seluruh file project disimpan disini, misalnya file gambar-gajah.svg, gambar-gajah.psd, gambar-gajah.ai, dll).

**dump
(seluruh hasil final yang sudah diexport disimpan disini, misal final.pdf, final.jpg, final.tiff, dll).
Dan dengan menyimpan file hasil akhir di folder dengan nama yang konsisten untuk setiap projek, kalau ada yang tanya dimana file final untuk projek A, gampang tinggal bilang aja di folder projek A folder dump.
Dan nantinya seiring berjalannya projek, didalam folder dump ini akan saya bikin lagi folder tambahan seperti "OLD", untuk menyimpan hasil file-file final sebelum revisi. Dan dari penamaan filenya pun, untuk saya lebih mudah dengan menggunakan format:

mmyy_nama-file_versi.ext

contoh:

0317_annual-book-report_pt-sinar-rejeki_001.indd

dimana 03 menandakan bulan ke-3, 17 sebagai tahun 2017, diikuti dengan nama projek, diakhiri dengan versi.

** raw
(biasanya untuk simpan file diluar kategori diatas, seperti note reivisi, atau file brief pekerjaan dengan format *.txt, *.docx, dll).

Kalau untuk project bukan gambar-gambar, misal ingin membuat project folder pekerjaan motion graphic, susunan foldernya bisa disesuaikan, tapi biasanya kalau saya mah seperti ini:

* Nama Project Animasi
** assets
*** assets/clips
*** assets/audio
*** assets/images
** scenes
** renderedScenes
** dump
** raw

Berikut hasil "script" auto bat-nya:

@echo off
set /p x=Nama Project :
md "%x%"
cd %x%
md assets artworks dump raw

Nah diawal baris pertama perlu ada:

01. @echo off

Biar waktu dijalankan di command line tidak muncul semua tulisan script bat ini.

02. set /p x=Nama Project :

Baris kedua untuk membuat variable "x" dengan nama yang akan diketik untuk nama projek yang diinginkan.

03. md "%x%"

Baris ketiga, untuk membuat folder atau directory dengan nama yang diketik tadi sewaktu muncul tulisan "Nama Project:" di teminal Wndows... bukan terminal Lebak bulus loh.

04. cd %x%

Baris ke-4 untuk pindah ke folder atau directory yang telah dibuat

05. md assets artworks dump raw

Baris terakhir untuk membuat susunan folder dengan nama "assets", "artworks", "dump", dan "raw" didalam folder yang telah dibuat. Untuk baris terakhir bisa di modif sesuai kebutuhan, misal hanya butuh folder "images" aja, sok silahkan. Atau misal hanya perlu folder "kawinan", monggo silahken. Jika ingin menggunakan nama folder lebih dari 1 kata dan ada spasi, gunakan tanda kutip dobel buka dan tutup, misalnya ingin menambahkan folder dengan nama "Foto Bulan Madu", contohnya di baris ke-5 jadi seperti ini:

md assets artworks dump raw "Foto Bulan Madu"

Kalau didalam folder utama yang dibikin tadi tidak mau ada isi sub-folder didalamnya, gampang caranya, cukup diketik sampai baris ke-4 saja, atau alternatif cara paling mudahnya adalah klik kanan dan pilih new - Folder. Ya iyalah, kalau gk perlu bikin sub-folder tambahan ngapain pakai auto bat kaya gini ya?

Kalau sudah selesai, save filenya dengan extension bat. Jadi misal nama filenya "bikin_folder.bat" atau "bikin folder.bat", atau "bikin foto bulan madu.bat", terserah aja namanya, yang penting extensionnya kudu .bat. Namanya juga file auto bat.

Jika mengikuti dari script diatas (diluar yang ada bau-bau bulan madu atau kawinan), setelah dijalankan akan muncul seperi ini:

Setelah diberi nama "Project Bikin Animasi Gajah Terbang", akan muncul folder baru dengan susunan folder seperti ini:

Atau ini demo videonya:

Oks... semoga bermanpaat.

Inkscape Vector Illustration - The Sheriff

2017-03-29T23:32:00.000+07:00

Vector illustration test drive using Inkscape 0.92. Really like the new feature on blend mode per object. But somehow still buggy in Win OS, but works fine on my eOS (needs to add ppa for this version, as I couldn't find it in official repo).

Anyway, here goes the sheriff, gun-fighting with some bad guys. Bring it on!
ps: those barrels are actually to hide unfinished boots xp...

7 Aplikasi Untuk Membuat Desain

2016-02-17T16:14:00.000+07:00

7 Aplikasi Opensource dan Proprietary Terbaik Untuk Desain Grafis

Versi Soktoy

Kali ini saya akan membahas aplikasi atau program terbaik untuk membuat karya visual seperti desain grafis, illustrasi, animasi 3 dimensi dan motion graphic ... versi Soktoy tentunya. Hal ini sering ditanya oleh beberapa teman kepada saya kalau bikin karya desain grafis pakai program apa. Memang di dunia yang maunya cepat jadi dengan cepat seperti mie instan, ditambah lagi dengan perkembangan teknologi yang makin canggih, banyak bermunculan aplikasi-aplikasi untuk membuat sebuah karya desain menjadi lebih ... "Mudah". Maksudnya adalah setiap orang yang dapat menguasai aplikasi tersebut, sudah dapat membuat suatu karya desain, diluar dari bagus tidaknya karya tersebut.

Diluar itu semua yang perlu diingat adalah, saya kutip dari kata-kata George Lucas,

"You’re Telling a Story Using Tools, Not Using Tools to Tell a Story".

Ngerti kan maksudnya he he he. Tools, aplikasi, program, atau apapun namanya hanya sebagai ... alat. Story, ide, konsep, atau apapun namanya adalah hal utama dalam suatu karya. Jangan terjebak dengan kebalikannya, "Hey gue pakai program X nih untuk bikin gambar Y, canggih lho si X". Seperti kata papatah, It's man behind the gun that matter.

Dan saya juga tidak fanatik atau anti terhadap jenis software apakah itu berbayar atau opensource. Yang jadi pertimbangan adalah apakah program ini bisa membantu saya menyelesaikan suatu projek atau malah membuat saya musti googling mencari cara untuk mengerjakan projek saya dengan program tersebut.

Nah kembali ke topik gosip utama kita yaitu aplikasi untuk membuat desain terbaik versi Soktoy, inilah daftar program terbaik untuk membuat karya desain / visual versi Soktoy:

1. INKSCAPE

Ya.. pilihan utama saya jatuh kepada Inkscape. Aplikasi opensource untuk olah gambar berbasis vector ini bisa didapat secara gratis di website resminya. Didukung oleh komunitas yang besar dan terus dikembangkan oleh developernya, membuat saya akhirnya beralih dari Adobe Illustrator ke Inkscape. Walaupun pada awalnya sempat merasa kagok untuk beralih, tapi setelah dipaksa dan dibiasakan mengerjakan real projek menggunakan Inkscape, akhirnya mantap makin menancapkan jangkar untuk tetap berlabuh di Inkscape.

Aplikasi ini mampu mengakomodir kebutuhan saya dalam membuat suatu karya desain. Walaupun mungkin fiturnya masih belum selengkap Illustrator, tapi kalau dilihat dari road map pengembangannya, fitur-fitur tersebut sudah direncanakan dan bahkan mulai di implementasikan.

Tanpa adanya fitur tadi bukannya tidak bisa dibuat oleh Inkscape, tapi proses pembuatannya hanya lebih memakan waktu dibandingkan dengan Illustrator yang sudah memiliki fitur tersebut. Contohnya adalah fitur 3D Text yang di Illustrator sangat mudah membuatnya, tapi di Inkscape perlu beberapa langkah untuk membuatnya. Masih bisa dibuat, namun prosesnya tidak sesingkat Illustrator.
Ada salah satu fitur Inkscape yang paling saya suka yaitu proses pembuatan filter. Dimana kita bisa meramu beberapa filter efek untuk mendapatkan hasil yang diinginkan. Contohnya ada pada artikel membuat offset outline pada objek di artikel ini.

Selain itu, kumpulan efek untuk objek path bawaan Inkscape sangat-sangat membantu dalam proses membuat suatu karya. Contohnya adalah efek power stroke yang sangat berguna untuk membuat lineart pada gambar atau untuk tracing gambar sehingga outline tersebut bisa menyerupai hasil goresan menggunakan dip pen atau kuas. Contohnya bisa dilihat diartikel ini dan ini. Tinggal menunggu waktu saja sampai fitur-fitur yang diinginkan mulai dimasukan oleh tim pengembangnya ke versi berikutnya.

Untuk lebih tahu seperti apa aplikasi Inkscape ini, silahkan dicoba sendiri dengan mendownload di website resminya www.inkscape.org. Khusus bagi pengguna OSX, disitu tersedia versi resmi yang bisa didownload, tapi jika ingin mencicipi versi yang berjalan secara native di OSX bisa didownload halaman ini dari website resminya. Versi native ini dikembangkan oleh salah satu user di komunitas Inkscape agar bisa berjalan secara native di OSX tanpa perlu menginstall XQuartz karena sudah dicompile menjadi satu aplikasi didalamnya.

2. FIREALPACA

Naah... program ini sebenarnya lebih khusus untuk ilustrasi. Saya menemukan program ini baru beberapa bulan kebelakang tapi langsung membuat saya berpaling dari Sketchbook Pro. Memang untuk brush preset dan pengaturan custom brush tidak sebanyak Sketchbook Pro, tetapi begitu mencoba FireAlpaca, dengan segala "keterbatasan" fiturnya mampu membuat tangan ini memegang pen wacom untuk trus bergerak diatas tabletnya. Fitur standar seperti selection, pen, eraser dan lainnya sudah ada. Ditambah lagi penggunaan layer, pengaturan warna, penggunaan snap, stabilization juga tersedia.

Fitur snap ini yang paling saya suka. Karena FireAlpaca memang dibuat untuk bikin manga, maka tersedia beberapa fungsi snap untuk membantu saat menggambar seperti manga. Misal curve snap untuk membantu menggambar goretan melengkung dengan mulus, atau radial snap untuk membuat goretan garis seperti efek pergerakan cepat. Ada 6 fungsi snap yang pastinya mambantu saat ingin membuat goretan garis yang mulus.

Ada versi alternatifnya yaitu MediBang. Sebenarnya mirip, tapi MediBang ditambah fitur cloud, preset brush bisa didownload dari cloudnya MediBang, dan file kita pun juga bisa di simpan di cloud. Selebihnya mirip-mirip dengan FireAlpaca. Dan dua-duanya juga gratis.

3. PIXELMATOR

Program ini adalah salah satu andalan saya saat mengedit gambar. Pixelmator sendiri adalah software untuk mengolah gambar berbasis bitmap yang hanya ada di OSX. Program sejenis adalah Adobe Photoshop, GIMP, dan lain-lainya. Dibandingkan dengan Adobe Photoshop atau GIMP, mungkin masih banyak fitur yang belum tersedia di Pixelmator. Namun tools dan fitur dasarnya sudah tersedia di Pixelmator. Dan walaupun Pixelmator sering dianggap sebagai program untuk para hobbyist dan kurang profesional, bagi saya selama itu bisa membantu dalam menyelesaikan suatu karya dan projek, mengapa tidak?

Dari sisi harga, angkanya juga relatif dibawah dengan Adobe Photoshop. Sekitar USD 29.99, sekali bayar, kalau dibandingkan dengan Adobe Photoshop yang dibandrol sekitar Rp. 193.000 / bln dengan skema berlangganan selama setahun, atau sekitar Rp. 289.000 /bln jika hanya ingin berlangganan satu bulan saja tanpa terikat annual plan.

Faktor ini juga yang membuat saya berpikir sudah tidak relevan lagi mengunggulkan suatu software hanya karena program tersebut gratis, karena sepertinya sekarang mulai banyak program berbayar yang mulai mengubah cara penjualannya dengan skema berlangganan seperti Adobe Photoshop tadi. harganya pun relatif terjangkau bagi mereka yang secara profesional ingin menggunakan aplikasi tersebut untuk mengerjakan projek-projek mereka tanpa menggunakan versi bajakan.

4. ADOBE PHOTOSHOP

Yup... ini rajanya program olah gambar, pastinya sudah banyak yang tahu dong. Tapi kenapa ini bisa di bawah Pixelmator? Nah dalam versi Soktoy ini, Pixelmator saya tempatkan nomor 2 karena memang paling sering saya gunakan untuk edit gambar dibandingkan Adobe Photoshop, dan sudah jarang sekali saya menggunakan Photoshop.

Fiturnya yang kaya dan lengkap membuat program ini sulit dicari tandingannya untuk olah gambar. Mungkin yang agak mendekati adalah GIMP. Dari sisi harga, dulu harganya memang lumayan mencengangkan, tapi kini setelah Adobe mengubah cara penjualannya menjadi berlangganan, harganya relatif lebih terjangkau.

Dengan fitur editing gambar yang sangat lengkap, filter bawaan yang sangat banyak, export file yang mendukung banyak format, dukungan warna RGB dan CMYK untuk percetakan, serta basis pengguna yang sangat besar, membuat software ini sulit digeser posisinya dari aplikasi untuk edit gambar profesional. Kalau yang berminat menggunakan yang non-bajakan juga harganya kini relatif terjangkau seperti disebutkan diatas. Fungsinya pun tidak hanya terpaku pada edit foto atau bikin meme aja, tapi ikut merambah ke digital coloring untuk ilustrasi dan komik.

5. BLENDER

Bukan blender alat yang ada didapur lho. Tapi ini adalah software untuk membuat objek dan animasi 3 dimensi berbasis opensource. Walaupun Blender ini sebenernya "bukan termasuk" aplikasi untuk membuat sebuah desain, namun dalam beberapa hal saya sering menggunakannya untuk membuat sebuah elemen desain yang membutuhkan hasil output 3 dimensi dalam bentuk still image.

Blender ini memiliki banyak fitur mulai dari fitur standar untuk 3D seperti modeling, animasi, texturing, rigging, dan render, namun juga ada fitur untuk video editing dan compositing, game engine, camera & motion tracking, video editing, dan lainnya. Semuanya ada di Blender secara gratis...tis...tis.

Untuk bikin 3D animation, sudah tidak diragukan lagi kemampuannya, dan mulai banyak animasi dibuat menggunakan Blender. Tim pengembangnya pun suka membuat animasi film pendek untuk melakukan test fitur-fitur baru di Blender dalam skala besar. Hanya memang saat pertama kali menggunakannya, jika migrasi dari software 3D lainnya akan terasa sedikit canggung dengan tampilan UI-nya dan workflownya yang lebih mengandalkan shortkey. Namun jika sudah terbiasa akan sangat cepat saat menggunakannya.

6. ADOBE AFTER EFFECTS

Program untuk membuat motion graphic ini masih sulit dicari penggantinya. Fitur lengkap dan banyak plugin tersedia membuat After Effects menjadi salah satu program pilihan bagi para pembuat motion graphic. Mau coba tracking kamera hasil video bikinan sendiri? Bisa. Mau ganti background video atau memoles kualitas gambar hasil video sendiri? Juga bisa.

Dan salah satu kelebihannya adalah After Effects terintegrasi dengan seluruh lini produknya Adobe, sehingga memudahkan saat mau menambah atau mengedit hasil olah video ke produk Adobe lainnya. Tutorialnya juga sangat banyak sehingga memudahkan kita saat ingin mempelajari After Effects.

Sampai saat ini saya sendiri masih belum menemukan program untuk motion graphic yang memiliki fitur paling tidak sama dan memiliki kemudahan dalam menggunakan sebagai alternatifnya, baik yang gratis maupun berbayar dengan harga lebih rendah.

Kalau program untuk melakukan compositing, ada beberapa alternatifnya seperti Black Magic Fusion yang memiliki versi gratisnya, dan ada juga Blender yang modul compositingnya terintegrasi dengan modul lain didalamnya. Tetapi untuk motion graphic, mohon dibantu jika ada yang tahu alternatifnya. Dulu sempat baca tentang Jahshaka & natron, dan dilihat dari fiturnya kelihatannya menarik. Mungkin bagi yang sudah mencicipi Jahshaka di Mac dan OSX terkini bisa membantu memberikan review? Atau ada yang sudah mencoba Apple Motion?

7. InDesign

Menurut saya inilah program desktop publishing terbaik. Untuk untuk membuat layout, template, styling untuk paragraf dan teksnya sangat sangat mudah digunakan. Pengaturan halaman per halaman, pengaturan grid, import gambar, dan lainnya sudah sangat mumpuni. Ditambah integrasi dengan produk Adobe lainnya juga memberikan kemudahan saat membuat sebuah layout. Memang posisi InDesign sebagai aplikasi untuk desktop publishing masih sulit untuk digeser.

Ada beberapa program sejenis seperti Scribus yang opensource dan gratis, Quark Express, dan lainnya, tapi entah selalu kembali ke InDesign. Bagi saya satu-satunya pesaing dengan harga yang ... gratis juga adalah Apple Pages. Yap, Apple Pages, walaupun masih minim fitur seperti Adobe InDesign, tetapi setelah tidak menggunakan InDesign lagi, alternatif yang akhirnya saya pilih adalah Apple Pages. Memang harus banyak kompromi dengan fiturnya yang masih minim, tapi transisi dari InDesign ke Apple Pages tidak membutuhkan learning curve yang lama, dimana dalam mengerjakan suatu projek, waktu adalah seperti sesuatu tidak pernah cukup.

Jika dalam mempelajari program lain untuk mengerjakan projek membutuhkan waktu dan learning curve yang tidak sedikit, lebih baik saya mencari software lain atau tetap menggunakan yang lama. Kalau begitu kenapa pindah software? Banyak hal, contohnya diwajibkan untuk menggunakan program dengan lisensi asli, atau spek komputer yang makin bolot sehingga jika menggunakan aplikasi yang memiliki fitur palugada (apa lu mau gue ada) performa komputernya makin lambat, atau bisa jadi lebih cepat dikerjakan dengan program lain.

Sempat coba Scribus, program DTP yang opensource, namun bagi saya butuh learning curve yang rada panjang. Maklum prosesor diotak juga sudah mulai sering kernel panic, jadi lebih baik saya cari alternatif lain yang lebih sesuai dengan prosesor diotak saya. Dan terakhir saya pakai Scribus di OSX, masih kurang stabil, mungkin sekarang sudah tidak, tetapi mungkin nanti kalau waktu sudah menjadi sahabat saya, akan dicoba lagi.

PNGYU & Adobe Illustrator (Bonus)

Pngyu ini fungsinya lebih ke kompresi file format PNG agar lebih kecil. Bagi saya yang sering menggunakan file dengan format .png untuk kebutuhan gambar di website, program ini sangat membantu untuk membuat kompresi file gambarnya lebih kecil agar saat digunakan di web, tidak banyak memakan bandwidth.

Tidak terlalu berpengaruh sih bagi mereka yang menggunakan koneksi internet broadband, tapi bagi pengguna mobile / smartphone, saat membuka gambar di internet setiap byte ukurannya akan sangat berarti, karena makin besar ukuran file gambar itu, makin banyak quota yang terpakai dan makin lama juga untuk melihat gambarnya. Ukuran file yang dimaksud disini adalah bukan dimensi panjang dan lebar, tetapi ukuran file gambar itu sendiri dalam kilobyte. Pngyu bisa di download gratis dari websitenya. Alternatif lain bagi penggemar CLI, bisa menggunakan imagemagick.

Yang terakhir sebagai bonus adalah Adobe Illustrator. Ini memang rajanya pengolah gambar berbasis vector. Semua kelebihannya, seperti integrasi dengan seluruh produk Adobe, fitur pengolah vector yang solid, kumpulan efek yang mumpuni, apalagi untuk bermain efek di appearance objek yang flownya undestructible, ditambah lagi menjadi standar industri untuk desain, kelihatannya sulit untuk menggeser posisi si Illustrator ini.

Namun begitu mencoba Inkscape, entah mengapa, akhirnya malah sulit berpaling lagi.Kecuali jika ada suatu projek yang mengharuskan untuk menggunakan Illustrator, maka mau tidak mau harus menggunakan Illustrator, walaupun pada kenyataannya biasa mengerjakannya di Inkscape dulu, kemudian setelah final untuk dijadikan FA dalam format AI, baru di convert dari svg ke AI he he he.

Nah itulah seven deadly sins program terbaik untuk membuat karya visual versi Soktoy. Memang ada banyak program lainnya seperti GIMP, Sketch, iDraw, Corel Painter, Black Magic Fusion, Autodesk Maya, Sidefx Houdini, Adobe Premiere, dan lainnya, tapi 7 aplikasi inilah yang paling sering saya gunakan, terutama mulai dari nomor 1 - 3.

Setiap orang pasti punya pandangan sendiri soal program untuk membuat desain grafis, tergantung dari preferensi masing-masing, tetapi yang paling utama adalah bukan masalah software apa yang digunakan, melainkan karya apa yang sudah dihasilkan.

Karenanya mari sama-sama membuat karya yang syukur-syukur bisa memberi inspirasi atau manfaat bagi orang lain tanpa terjebak dengan perdebatan software X lebih baik dengan software Y, atau kalau software X tidak berjalan mulus di OS A atau OS B, pakai OS C aja, dan sebaliknya. Lha wong yang ditanya soal program untuk desain, jawabannya malah ngelantur ke harus pakai OS yang mana biar fiturnya jalan hehehe...

Seperti kata almarhum dosen DKV saya dulu, sebaik-baiknya karya desain adalah yang bisa membantu memecahkan suatu masalah. Walaupun karya saya masih belum sampai ke level itu he he he...

Salam.

Offset Stroke Effect Filter in Inkscape

2015-12-21T11:32:00.000+07:00

Using Inkscape Filter: Custom Offset Stroke Effect

Brief explanation on inkscape offset stroke effect in the video below.

Here's how I made the filter...


Filter in Inkscape

Inkscape filter effect process

Brief explanation here...
This filter requires two morphology effects, an offset effect, and two composite effects.

The first morphology would expand the original text, and acts as the cut out for the second morphology effect. This will basically creates some sort of a "hole" that cuts or masks the area that intersect with second morphology effect result.

The second morphology effect then followed by the offset effect so that we can adjust the direction of the offset later.

The first composite effect combines these two morphology effects by taking ouput connections from first morphology and offset effect, and when composite operator is sets to "Out", this will leave the area where both morphology effects were intersect with each other.

For more information on this composite effect please go here.

The second composite effect is getting first input connection from source graphic (which is the text object), and second connection from composite output, with operator sets to "Over", this would put the first connection over the second connection, in this case the source graphic over the first composite output.

And the final result is we have this offset "partial" stroke effect for our text object. To fine tune the thickness just play with both morphology effects' radius. But with one condition, that is, the first morphology needs to have bigger radius value than the second morphology.

We can also apply this filter to any object other than text. And of course, one may achieve similar result with other filter in inkscape (or path effects maybe?), but I'll leave that to you guys to explore.

Have fun.

Demo Tracing Gambar di Inkscape

2015-11-01T16:39:00.000+07:00

Video ini menampilkan timelapse demo mentracing gambar menjadi vector menggunakan Inkscape. Untuk melihat caranya silahkan melihat video ini, walaupun agak panjang videonya. Yang lumayan menyita waktu saat proses tracing sarungnya. Tapi karena tools di Inkscape cukup lengkap, dan sesuai dengan kebutuhan saya, proses tracing gambar menjadi vector di Inkscape jadi tidak membuat isi hati gundah.

Membuat Gambar Dengan Cara Tracing di Inkscape

2015-09-17T10:32:00.000+07:00

Masih bermain-main dengan membuat gambar dengan cara tracing vektor pakai Inkscape. Dari sketsa gambarnya terlihat sederhana, tapi begitu ditracing, dan mulai diwarnai, mulai lah otak mendidih, jari jemari pegal linu terutama jari telunjuk karena musti klak-klik tombol mouse menyesuaikan bezier tool dengan gambar sketsanya di Inkscape.

Awalnya dicoba menggunakan gradient mesh, tapi eh tetapi.. ternyata masih suka mendadak nutup sendiri si Inkscapenya, entah lagi gak mood atau sudah panas. Akhirnya, diambil cara paling tradisional yakni manual tracing vector membuat objek per objek, ditumpuk-tumpuk untuk membentuk warna dan tekstur yang diinginkan.

Mungkin si gradient mesh sering crash karena saat itu saya menggunakan Inkscape 0.91+devel+osxmenu r12896, versi development... Kalau saja fitur gradient mesh itu sudah solid, yakin deh pasti lebih cihuy untuk bikin warna dan tekstur seperti yang bisa dilihat di gambar hasil akhir ini. Namun sebelum itu terjadi, cara paling aman menggunakan Inkscape versi development untuk membuat gambar dengan cara tracing menggunakan Inkscape ini yaitu dengan jurus maut cmd-s... untuk terus-terusan save progresnya supaya waktu crash, filenya masih bisa dimulai dari versi terakhir.

Enjoy....

Hasil Desain UI di Inkscape

2015-06-04T12:02:00.000+07:00

Ini adalah hasil desain UI menggunakan Inkscape yang akan digunakan sebagai tampilan antar muka aplikasi mobile yang pernah diajukan tapi tidak jadi dipakai karena tim developernya sudah terlanjur membuat tampilan user interfacenya lebih dulu dan deadline mereka juga sudah mepet, akan perlu waktu serta effort lebih untuk mengganti tampilan yang sudah ada dengan tampilan desain user interface yang ini.

Tampilan desain user interfacenya dengan nuansa hijau agar lebih ramah dipandang dan sedikit secercah warna kuning disampingnya untuk memberikan efek cacthy serta nuansa hitech. Warna hijau dipilih berdasarkan dari warna dasar logo yang sudah ada, tapi sedikit di geser ke arah warna biru kehijauan supaya lebih kalem.

Kombinasi dengan warna putih dan kuning untuk elemen seperti font, border, tombol, dan lainnya, agar desain tampilan antar muka untuk aplikasi mobile ini memiliki kontras sehingga lebih mudah dibaca. Dan supaya tingkat kontrasnya lebih kuat, beberapa elemen seperti background untuk menu, panel block, diisi dengan warna hitam yang tingkat opacitynya dikurangi.