Membuat ilustrasi isometric dengan Sketch App
Sedikit cerita
Ini adalah tahun pertama saya bekerja sebagai UI designer. Dan beberapa waktu yang lalu, saya mendapat sebuah tantangan, yaitu membuat ilustrasi isometric. Sebelumnya, saya belum mempunyai pengalaman untuk membuat ilustrasi dengan gaya tersebut.
Saya mencoba mencari cara bagaimana membuat ilustrasi dengan teknik ini. Ada beberapa teknik yang bisa digunakan, misal dengan membuat garis bantu dengan sudut kemiringan tertentu sebagai panduan. Salah satu cara yang saya sukai untuk membuat isometric adalah dengan SSR Method (Scale, Shear, Rotate Method).
Sebenarnya teknik ini sudah umum, namun kendalanya adalah, software yang saya pakai fitur Scale, Shear, dan Rotatenya berbeda dengan yang disebutkan oleh artikel yang saya temukan. Sehingga ada beberapa langkah yang saya lakukan dengan manual.
Persiapan
- Komputer/laptop yang sudah terinstal Sketch app
- Buku sketsa/Kertas & Alat tulis
- Kopi panas tanpa gula
- Musik
Langkah pertama
Setelah menyeruput kopi, biasanya saya memulai membuat moodboard dengan mengumpulkan beberapa refrensi, bisa dari internet, artbook, majalah, dll. Fungsi dari refrensi yang sudah kita kumpulkan adalah kita bisa menemukan komposisi, warna, gaya, dll yang sesuai.
Dalam tahap ini sebaiknya ‘sak madyone’ atau secukupnya. Terlalu sedikit refrensi itu kurang baik, begitupun juga sebaliknya.
Tahap selanjutnya adalah Niteni, Nirokke, Nambahi. Meminjam istilah dari Ki Hajar Dewantoro. Niteni adalah memperhatikan, Nirokke adalah meniru, dan Nambahi, sayangnya saya belum menemukan kata yang tepat dalam bahasa indonesia untuk istilah ini, namun intinya adalah mengembangkan.
Saya lanjutkan dengan menggoreskan ujung pensil di atas kertas untuk membuat gambaran besar serta mencari komposisi dari ilustrasi yang akan saya buat.
Untuk tahap ini, saya tidak mengejar detail dari gambar, karena yang terpenting adalah menuangkan apa yang ada di dalam kepala terlebih dahulu. Proses ini membantu kita untuk memproyeksikan ide untuk diterjemahkan ke dalam sebuah sketsa sebagai panduan kita untuk mengerjakan sebuah ilustrasi agar tidak ‘nggrambyang’.
Gambar sebanyak mungkin jika diperlukan, sampai menemukan komposisi yang dirasa cukup. Saya jarang menggunakan penghapus karena lebih suka membiarkan ujung pensil tersebut menari di atas kertas dengan penuh semangat. Rough & chaos. Jika saya sudah mendapatkan gambaran besar dan komposisinya, saya akan merapikan kembali sketsa saya kembali.
Selanjutnya
adalah mengeksekusi sketsa tersebut menggunakan Sketch app. Pada awalnya saya suka membuat Isometric grid sendiri. Namun untuk menyingkat waktu, akhir-akhir ini saya menggunakan template isometric yang tersedia di internet.
Seperti yang sudah saya sampaikan di awal, kendala saya dalam membuat isometric dengan menggunakan sketch app adalah ada beberapa fitur pada aplikasi ini yang sedikit berbeda dengan software lainnya, seperti Scale, Shear, dan Rotate. Sehingga saya tidak bisa menggunakan SSR Method kali ini. Disitulah letak tantangannya.
Membuat versi digital
Saya akan menunjukan cara membuat isometric dengan menggunakan bantuan Isometric Grid pada Sketchapp.
Pertama, buatlah object berbentuk persegi, pergi ke menu insert > shape > rectangle atau pencetlah tombol R. Dalam contoh ini saya menggunakan ukuran 70 x 70.
Kedua, rotate/putar 45° object tersebut seperti pada gambar 4 dengan memilih menu rotate pada toolbar diatas atau memasukan angka sebesar 45 pada kotak dialog Transform pada sebelah kanan tampilan workspace.
Pilih objek tersebut dan tekan tombol enter pada keyboard agar sudut-sudut pada objeck tersebut bisa kita edit. Mode edit aktif jika pada sudut objek tersebut terdapat lingkaran berwarna putih. Lihat gambar 5
Selanjutnya kita pilih titik pada sudut kanan dan kiri. Lihat gambar 6
Jika kita tarik keatas dua titik tersebut, saya biasa menggunakan tombol arah. Jika tombol tersebut ditekan tanpa menakan shift maka ia akan bergeser 1 px, apabila dibarengi menggunakan tombol shift maka ia akan bergeser sebesar 10 px.
Saya menaikan kedua titik tersebut beberapa pixel keatas, saya hanya mengira-ngira sampai dirasa cukup. Setelah kedua titik tersebut selesai, saya melanjutkan dengan menaikan titik bawah objek dan saya geser kembali ke atas. Lihat gambar 8.
Langkah selanjutnya adalah membuat objek untuk bagian kanan dan kiri. Kita ulangi kembali langkah pertama yang saya jelaskan di atas. Yaitu dengan membuat persegi yang lainnya dan kita sesuaikan sudut kemiringannya sesuai dengan grid.
Lihat gambar 10. Setelah kita rasa cukup, terkadang kita tidak perlu mengulangi langkah tadi kembali. Untuk mempersingkat waktu, saya menggandakan objek tersebut kemudian saya refleksikan.
Pilih objek persegi tersebut lalu kita copy dan paste dengan menekan cmd+c dilanjutkan dengan cmd+v. Setelah itu tekan klik kanan untuk mengeluarkan menu transform, kita pilih flip horizintal. Lihat gambar 11.
Setelah itu kita susun ketiga persegi tersebut seperti pada gambar 12.
Begitulah kurang lebihnya langkah-langkah saya untuk membuat sebuah ilustrasi isometric. Walaupun terlihat sangat sederhana, tapi saya juga tidak bisa mengatakan kalau cara ini cara paling mudah, karena setiap kali saya membuat sebuah objek baru selalu mempunyai tantangan tersendiri. Selain sudut, dalam pembuatan isometric komposisi, warna, dan arah cahaya datang dan bayangan harus diperhatikan.
Akhir kata
Demikian tadi sedikit pengalaman saya tentang proses membuat isometric sederhana menggunakan Sketch app. Tutorial di atas hanyalah garis besar saja belum masuk ke detail teknis dan tentunya masih banyak kekurangan. Untuk teman-teman yang memiliki pertanyaan, kesulitan, atau ingin menambahkan, ditunggu komentarnya :)
