Membuat icon atau logo SVG dengan mudah di Krita

Assalamu'alaikum.

Di tutorial ini, saya akan membahas bagaimana cara membuat logo atau icon vector di Krita. Kemudian mengekspor logo tersebut dalam format SVG. Kita akan membuat logo atau icon yang mirip dengan logo Linux Red Hat. Tapi tentu saja dengan beberapa perbedaan. Kita akan membuat bentuk topi menjadi lebih sederhana. Dan kita juga akan menambahkan elemen api di belakang topinya.

Selain video di atas, saya juga menyediakan versi teks dari tutorial ini, yaitu yang bisa anda baca di bawah berikut ini.

Sebelum kita mulai. Bagi Anda yang baru memulai belajar grafis, ada 3 hal penting yang perlu saya sampaikan.

Yang pertama adalah tentang Krita. Krita adalah perangkat lunak gratis dan open-source yang dapat Anda unduh dari "krita.org". Pada dasarnya, Krita adalah sebuah software digital painting berbasiskan Raster, bukan software Vector. Jadi, tidak adil jika membandingkan fitur vector Krita dengan software vector khusus seperti Adobe Illustrator atau Inkscape, dll. Tapi, meskipun tidak selengkap software vector, untuk membuat grafik vector SVG sederhana seperti logo atau icon, Krita sudah lebih dari cukup.

Hal kedua yang perlu saya sebutkan adalah bagaimana Vector dirender di Krita. Seperti halnya software raster lain yang menyediakan fitur vector, misalnya Photoshop, Gimp, Clip studio paint, dan lain sebagainya. Vector di Krita akan di-render atau ditampilkan seolah-olah seperti Raster. Jadi kalau kita zoom in terlalu dekat. Gambar akan tampak seperti pixelated. Tapi, jangan khawatir, data vector aslinya tidak tergantung pada resolusi gambar. Jadi, jika Anda mengekspor gambarnya ke dalam format vector seperti SVG, gambar vector yang dihasilkan tidak akan menjadi pixelated jika nanti Anda memperbesar atau memperkecilnya.

Kemudian, hal terakhir yang perlu saya singgung adalah tentang format SVG. SVG adalah singkatan dari "Scalable Vector Graphics". Ini adalah format vector dengan standar terbuka. Tidak seperti format vector lainnya, yang umumnya bersifat "eksklusif". Inilah alasan mengapa banyak orang memilih format file ini untuk mentransfer data vector dari satu perangkat lunak ke perangkat lunak lainnya atau menggunakannya untuk ikon dan logo di situs web.

Mari kita mulai dengan membuat dokumen baru. Kita bisa buat lebarnya 1000 pixel, dan tingginya 1000 pixel juga. Untuk resolusinya, kita bisa setel ke 300 PPI.

Harap diperhatikan bahwa kualitas gambar vector tidak terikat oleh ukuran atau resolusi gambar. Artinya, Anda dapat dengan bebas mengubah skala grafik vector tanpa khawatir akan merusaknya. Namun demikian, parameter dokumen ini akan menentukan keadaan "default", ketika nanti Anda melihat file SVG-nya di browser atau "viewer" lainnya. Untuk mempermudah kita sendiri nantinya, sebaiknya kita menggunakan ukuran umum dari gambar raster yang bisa muat di monitor kita. Tidak terlalu kecil dan juga tidak terlalu besar. Untuk parameter lainnya, biarkan saja semuanya di kondisi "default". Kemudian untuk kategori konten, kita akan mulai dengan satu layer saja, yaitu layer "background" yang berwarna putih. Kita akan menambahkan lebih banyak layer lagi nanti secara bertahap. Klik tombol "Create" untuk membuat dokumennya.

Untuk membuat grafik vector di Krita, kita membutuhkan layer khusus yang disebut dengan "Vector layer". Untuk itu, Anda dapat menekan tombol panah kecil di sebelah tombol plus besar di docker "Layers". Kemudian pilih perintah "add vector layer".

Atau Anda juga dapat menggunakan shortcut Shift + Insert. Untuk menyejajarkan objek vector, anda dapat menggunakan docker "Arrange". Tapi dalam tutorial ini, saya ingin menunjukkan cara lain untuk menyejajarkan objek yaitu menggunakan fitur "grid". Untuk menggunakannya, anda dapat membuka menu "View". Kemudian klik pada kotak centang "Show Grid". Anda juga bisa menggunakan shortcut Ctrl + Shift + ". Setelah itu, untuk membuat objek vector dan elemen-elemennya "snap" atau lengket ke titik-titik grid, Anda juga perlu mengaktifkan opsi "Snap to Grid". Anda dapat menggunakan shortcut, Ctrl + Shift + ; untuk mengaktifkan fitur snap ini.

Kita bisa mulai dengan membuat bagian topinya. Saya ingin menggunakan warna biru muda, sedikit ke arah Cyan. Kemudian, aktifkan "Ellipse" tool. Untuk parameter "fill", kita bisa atur ke "Foreground Color". Hal ini agar nantinya area fill menggunakan warna cyan yang kita pilih tadi. Kemudian, untuk parameter "outline", kita tinggal mengaturnya menjadi "No Outline".

Berikutnya, klik-seret pada kanvas untuk membuat bagian atas topi.

Kemudian, gunakan "Select shapes tool". Dan pilih objeknya. Kita bisa menduplikat objek ini dengan menekan Ctrl + C lalu Ctrl + V. Seret objek baru ini sehingga berada tepat di bawah objek pertama. Seperti yang bisa Anda rasakan sendiri, fitur Grid dan Snap membuat proses memposisikan objek menjadi jauh lebih mudah.

Berikutnya, kita ingin membuat persegi panjang yang menghubungkan ujung-ujung elips. Aktifkan "Rectangle" tool. Kemudian buat persegi panjang dengan cara click-drag dari titik kiri ke titik kanan, pada ujung-ujung elips.

Kemudian, aktifkan kembali "Select Shapes Tool". Dan pilih bentuk elips bagian atas. Kemudian kita ubah warnanya menjadi sedikit lebih terang. Klik kanan, lalu pilih "Bring to Front".

Berikutnya, kita bisa memilih persegi panjang dan elips bagian bawah. Klik kanan, kemudian pilih "Logical Operation" yang disebut "Unite".

Pada dasarnya, operasi "unite" akan menggabungkan bentuk yang dipilih menjadi satu bentuk baru. Kemudian, tekan Ctrl + C dan Ctrl + V lagi untuk menduplikasi objeknya. Posisikan ulang sehingga secara horizontal berada di tengah-tengah bentuk lainnya. Tapi buatlah ia sedikit lebih rendah. Klik kanan, dan gunakan perintah "Send to Back".

Kemudian, ubah warnanya ke versi yang jauh lebih gelap. Mendekati warna hitam. Kita ingin membuat area ini terlihat seperti ornamen melingkar.

Kita bisa memilih objek shape biru bagian atas, kemudian menduplikatnya. Posisikan ia ke tengah, tetapi sedikit ke bawah. Kemudian gunakan perintah "Send to Back".

Berikutnya, pilih objek yang di atas. Duplikat lagi. Posisikan agar ia berada di tengah. Kemudian skala objeknya sambil menahan Ctrl dan Shift. Setelah itu, gunakan perintah "Send to Back". Lalu, kita bisa menekan Ctrl + Shift + " untuk menyembunyikan grid. Dan kemudian tekan Ctrl + Shift + ; untuk menonaktifkan fitur grid-snapping.

Berikutnya, buat kotak seleksi dengan click-drag dari kanan ke kiri. Pastikan semua objek shape yang membentuk topi terpilih. Kemudian, klik kanan. Lalu pilih "Group".

Dalam kondisi digrup, kita dapat dengan mudah memutar semuanya sekaligus dengan menggunakan "Select Shapes Tool".

Sekarang, kita akan membuat gambar apinya. Agar prosesnya jauh lebih mudah, kita sebaiknya membuatnya pada layer terpisah. Buat layer Vector baru dengan menekan Shift + Insert. Kemudian klik tombol panah ke bawah pada layer docker, sehingga layer tersebut berada di bawah layer topi.

Untuk membuat bentuk bebas dengan banyak lengkungan, tool yang paling sesuai adalah "Bezier Curve Tool". Untuk sekarang, setel parameter "fill" ke "not filled". Dan untuk parameter "outline", gunakan opsi "brush". Dalam kondisi ini, tool ini akan menggunakan setelan brush yang sedang aktif.

Untuk membuat garis vector yang tipis, Anda bisa menetapkan parameter ukuran brush ke 5 pixel.

Mari kita gunakan warna hitam terlebih dulu supaya lebih mudah nantinya untuk membedakan garis api dari bentuk topinya. Kemudian, kita bisa membuat bentuk apinya dengan tool ini. Jika Anda pernah menggunakan Pen tool di Photoshop atau Adobe Illustrator sebelumnya, in sya Allah, Anda akan dapat menggunakan tool ini dengan mudah.

Tetapi jika Anda belum pernah menggunakan tool ini atau alat vector apa pun sebelumnya, saya sarankan Anda mencari referensi tambahan tentang tool ini. Artikel blog ini terlalu singkat untuk membahas semuanya secara detail. Jika Anda serius ingin belajar Krita, Anda dapat bergabung dengan kursus online saya di Udemy. Dalam kursus tingkat menengah, saya membahas secara rinci cara menggunakan "Bezier Curve Tool" tahap demi tahap, dari dasar hingga mahir. Anda akan belajar cara membuat ilustrasi dengan menggabungkan fitur Vector dan Raster.

Jika Anda masih belum puas dengan bentuknya, Anda dapat mengaktifkan "Edit Shapes Tool". Dengan tool ini, kita bisa mengakses titik-titik vector, handles, dan juga segmen objek vector untuk mengkustomisasi bentuknys lebih lanjut.

Untuk mengisi beberapa shapes dengan warna yang sama, pertama, kita dapat menggabungkan semuanya menjadi satu "compound shape". Untuk melakukan ini, pastikan semua objeknya terseleksi. Klik kanan, dan pilih "Logical Operation" yang bernama "Unite".

Setelah semua shapes digabung menjadi satu objek. Kita dapat mengatur warnanya sekaligus dengan mudah. Untuk warna stroke, kita bisa setel ke "No stroke color".

Dan untuk warna fill, Anda bisa menggunakan warna solid, jika Anda lebih menyukai gaya warna "flat". Tetapi, untuk saat ini, saya ingin menggunakan "gradient".

Akan terlalu panjang untuk membahas pengaturan gradient dalam artikel blog ini. Jadi, mari kita gunakan saja preset gradient yang sudah disediakan oleh Krita. Kita bisa gunakan yang terlihat seperti api.

Warna gradasi ini sebenarnya sudah terlihat bagus, tanpa perlu kita ubah-ubah lagi. Namun demikian, jika Anda masih ingin menyesuaikan orientasi atau distribusi warnanya, Anda bisa menyeret titik kontrol berwarna kuning. Atur saja sampai Anda puas dengan kondisi warna gradasainya.

Anda bisa memilih objek topi di layer "vector layer 1". Kemudian tekan Ctrl + X untuk "cut". Pilih layer api di bawahnya. Kemudian tekan Ctrl + V untuk "paste". Sampai saat ini, Anda mungkin bertanya-tanya. Mengapa kita perlu menggabungkan semuanya menjadi satu layer? Bukankah akan lebih mudah untuk mengaturnya jika mereka tetap terpisah di layer mereka sendiri? Jawabannya adalah karena di Krita, fungsi ekspor ke format file SVG hanya bisa dilakukan per layer. Setidaknya, begitulah yang terjadi di versi Krita yang saya gunakan saat membuat tutorial ini. Jadi, mau tidak mau, kita harus menempatkan semuanya di dalam satu layer. Kita bisa menghapus layer vektor yang ada di atas, karena kita tidak membutuhkannya lagi.

Selanjutnya, kita bisa memilih semua objek vector ini. Kemudian gabungkan mereka sebagai satu objek group. Hal ini kita lakukan agar lebih mudah jika kita ingin melakukan skala atau melakukan jenis transformasi lainnya. Anda bisa menahan Shift sambil skala untuk menjaga "aspect ratio" atau perbandingan lebar dan tinggi gambarnya.

Setelah itu, pastikan layer vector yang ingin Anda ekspor dalam keadaan aktif. Kemudian, buka menu "Layers". Pilih sub-menu "Import-Export". Kemudian pilih perintah "Save vector layer as SVG".

Anda dapat menentukan nama apa pun untuk file SVG-nya. Saya namakan ini "fire hat logo". Selanjutnya, kita bisa menguji kondisi file tersebut dengan membuka filnenya di internet browser. Saat ini saya menggunakan Microsoft Edge. Jika kita perbesar, yaitu dengan cara menahan Ctrl, lalu memutar scroll wheel. Seperti yang bisa Anda lihat, karena logo ini adalah gambar vector, ia tidak akan pecah atau menjadi pixelated.

Kalau teman-teman ingin menguasai Krita secara menyeluruh dengan cepat dan mudah, saya menyediakan 3 online courses di Udemy. Ada 24.5 jam total konten pelajaran berbahasa Indonesia, dengan kurikulum yang terstruktur dan sistematis. Cukup dengan membayar sekali, Udemy memberikan Anda akses seumur hidup ke konten course ini. Udemy juga dapat diakses menggunakan mobile devices melalui app-nya. Sehingga kalian dapat belajar kapan pun dan di mana pun secara lebih fleksibel. Dan yang tidak kalah penting, teman-teman juga akan mendapatkan sertifikat dari online course ini.

Nah, selain Krita, kalau teman-teman ingin belajar computer graphics seperti Photoshop, 3ds Max, Blender 3D, SkethUp dan juga Adobe Illustrator, saya juga menyediakan berbagai courses ini di website utama kami di Expose Academy, selain juga di platform Udemy maupun di Skillshare.

Demikian video tutorial dan artikel ini saya buat, semoga bisa bermanfaat.

Wassalamualaikum.

Hormat saya,

Widhi Muttaqien