Membuat Ikon Gambar Tangan dengan Cara Manual

Dalam tutorial ini, kita akan membuat ikon dari gambar tangan. Gambar tangan di sini berarti benar-benar gambar tangan secara manual, bukan hasil permainan efek filter. Tekniknya sederhana, menggambar dengan pensil di kertas biasa, proses scanning lalu sedikit editing di Photoshop.

[hr]

Preview

Ini adalah hasil akhir ikon yang akan kita peroleh.

Membuat Ikon Twitter Gambar Tangan secara Manual

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Alat yang Digunakan: Kertas putih, Scanner, Pensil HB, dan Pensil 2B
  • Teknik yang Dipelajari: Channel Alpha, Proses Scan
  • Lama Pengerjaan: 20 menit

[hr]

Tutorial

Langkah 1: Persiapan

Mulai dengan mencari logo twitter untuk referensi. Simpan gambar ke dalam satu file lalu cetak.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 2: Mulai Menggambar

Siapkan kertas putih kosong, pensil HB, dan pensil 2B. Secara manual, mulailah menggambar ikon. Anda bisa menggambar langsung atau menjiplak referensi yang telah kita siapkan. Jika menjiplak, saya sarankan Anda untuk menggambar di atas kaca. Tidak perlu alat khusus, kaca jendela juga cukup.

Jangan khawatir dengan detail. Tujuan kita memang menghasilkan gambar yang alami dan sangat mengesankan gambar tangan manual. Di bawah, saya juga menulis beberapa teks follow us on yang ternyata tidak digunakan dalam hasil akhir ikon ini.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 3

Ingat bahwa gambar ini bukan hasil akhir ikon. Kita masih akan mengeditnya di Photoshop. Anda bisa lihat di sini, gambar burung yang saya buat tidak seimbang dengan logo twitter. Namun, ini tidak menjadi masalah karena kita bisa menyesuaikan ukurannya di Photoshop.

Secara umum, gambar ini digambar dengan pensil HB. Untuk memberi kesan gradasi warna, bagian bawah digambar ulang dengan pensil 2B yang memberi hasil lebih gelap.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 4

Scan gambar dalam resolusi tertinggi. Pastikan untuk selalu melakukan proses scanning di resolusi tertinggi. Dalam proses scanning akan selalu ada penurunan kualitas. Mungkin ada goresan yang hilang, bagian yang kurang gelap, atau ada warna yang hilang. Resolusi tertinggi akan memaksimalkan hasil yang diperoleh. Selain itu, proses editing juga lebih mudah dilakukan di resolusi tinggi. Di bawah adalah hasil scan.

Membuat Ikon Twitter Gambar Tangan secara Manual

Anda bisa membandingkan tampilan hasil scan dalam tampilan 100% dan 25%. Dalam ukuran 100%, gambar terlihat buruk dan cacat. Namun, dalam tampilan lebih kecil terlihat cukup rapi.

Membuat Ikon Twitter Gambar Tangan secara Manual
Logo Twitter pada perbesaran 100%.
Membuat Ikon Twitter Gambar Tangan secara Manual
Gambar burung twitter pada perbesaran 100%.
Membuat Ikon Twitter Gambar Tangan secara Manual
Tampilan perbesaran 25%.

Langkah 5: Logo Twitter

Langkah selanjutnya adalah memperjelas goresan pensil. Seleksi logo twitter lalu tekan Ctrl + J untuk menduplikasinya ke layer baru. Tekan Ctrl + L untuk menjalankan perintah Levels. Geser panah hitam dan abu ke tengah hingga goresan pensil makin jelas.

Membuat Ikon Twitter Gambar Tangan secara Manual
Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 6

Buat file dengan ukuran 400 x 300 px. Ambil logo twitter hasil scan dan perkecil ukurannya. Seperti bisa Anda lihat di bawah, logo ini terlihat semakin jelas setelah diperkecil. Namun, garis luar logo terlihat kurang jelas.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 7

Kembali lagi ke gambar hasil scan. Seleksi garis terluar logo menggunakan tool lasso.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 8

Gunakan perintah Levels (Ctrl + L) untuk memperkuat kontras.

Membuat Ikon Twitter Gambar Tangan secara Manual

Di bawah, Anda bisa melihat perbandingan garis luar logo sebelum dan setelah proses pengeditan.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 9

Sekali lagi, simpan gambar logo ke atas file berukuran 400 x 300 px. Kali ini, garis luar logo terlihat lebih jelas.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 10: Burung

Lakukan proses yang sama untuk gambar burung. Seleksi burung, duplikasi ke layer baru, dan perjelas dengan perintah Levels (Ctrl + L).

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 11

Simpan gambar burung ke dalam file 400 x 300 px.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 12: Menyiapkan Transparansi Ikon

Ikon ini belum selesai. Di titik ini, ikon tidak transparan dan memiliki latar putih. Ada cara mudah untuk menghasilkan transparansi ikon ini, yaitu dengan channel alpha.

Buka panel Channels. Lihat terlebih dahulu channel Red, Green, dan Blue yang tersedia. Cari channel dengan kontras paling tinggi.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 13

Di antara ketiga channel ini, ternyata channel Blue paling kontras. Gandakan channel Blue dengan menariknya ke atas ikon New Channel. Balikkan warna channel dengan perintah Image > Adjustments > Invert (Ctrl + I). Saat ini, ikon akan berwarna putih sementara latarnya hitam.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 14

Tahan Ctrl lalu klik channel alpha untuk mengubahnya menjadi seleksi. Sembunyikan layer lain kecuali Background, buat layer baru lalu isi seleksi dengan hitam.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 15

Sembunyikan semua layer. Anda bisa melihat bahwa saat ini ikon kita sudah transparan.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 16: Menyimpan Ikon

Klik File > Save Image for Web (Ctrl + Shift + Alt + S). Pilih tipe file PNG-24 dan pastikan transparansi aktif.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 17

Seperti inilah tampilan ikon ketika disimpan di atas latar bertekstur.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 18: Mengubah Tipe Goresan

Ikon ini aslinya dibuat dengan pensil. Namun, kita bisa mengubahnya menjadi goresan ballpoint. Buat adjustment layer Solid Color berwarna biru. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask.

Membuat Ikon Twitter Gambar Tangan secara Manual

[hr]

Hasil Akhir

Seperti Anda lihat, cara manual tidak akan pernah mati. Saat ini, Anda praktis hampir bisa melakukan semua hal secara digital. Kondisi ini membuat cara manual memiliki kesan yang lebih unik.

Membuat Ikon Twitter Gambar Tangan secara Manual

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2011/05/tutorial-ikon-gambar-tangan/tutorial-membuat-ikon-gambar-tangan.zip”%5DDownload File PSD[/ilink]

Membuat Illustrative Lettering dari Tulisan Tangan

Dalam tutorial ini, kita akan bereksperimen membuat illustrative lettering ala Chris Piascik yang karyanya telah ditampilkan beberapa hari lalu. Dalam tutorial ini, kita akan mengambil kalimat inspiratif dari Jacky Chan.

[hr]

Preview

Berikut adalah illustrative lettering yang akan kita buat dalam tutorial ini. Kalimat yang digunakan adalah ucapan kutipan dari Jacky Chan.
[quote]I don’t want to be the next Bruce Lee. I want to be the first Jacky Chan. –Jacky Chan[/quote]

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

[hr]

Resource Yang Dibutuhkan:

  1. Kertas Putih
  2. Pensil 2B
  3. Pensil HB
  4. Penghapus Karet
  5. Scanner
  6. Adobe Photoshop
  7. Adobe Illustrator
  8. Tekstur Noise
  9. Tekstur kertas

[hr]

Tutorial

Langkah 1: Membuat Tulisan Tangan

Ambil selembar kertas putih. Siapkan pensil HB, pensil 2B, dan penghapus plastik.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 2

Dalam tahap sketsa, kita masih menggunakan pensil HB karena lebih tipis dan seandainya ada kesalahan mudah dihapus. Mulai dengan membuat sketsa posisi teks. Ini akan membantu kita dalam penempatan huruf-huruf.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 3

Dalam prakteknya, sketsa bisa dilabrak untuk menyesuaikan dengan kreativitas kita.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 4

Saya ingin menonjolkan Bruce Lee jadi tulisannya dibuat dengan ukuran besar.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 5

Begitu juga dengan Jacky Chan. Saya menulisnya dengan huruf berukuran besar.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan
Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 6

Inilah hasil akhir tulisan yang saya buat. Untuk memastikan tulisan ini bisa di-scan dengan mudah, tebalkan tulisan dengan pensil 2B lalu hapus bagian yang tidak diperlukan.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 7: Proses Scan

Saatnya untuk memasukkan teks ke komputer Anda. Caranya bisa berbeda tergantung pada tipe scanner yang Anda gunakan. Saya saat ini menggunakan scanner Epson TX111. Di Photoshop, klik File > Import > WIA Support. Atur settingnya jika perlu.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan
Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 8

Pilih tipe scanner yang digunakan.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan
Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 9: Tracing Tulisan

Buat file baru di Illustrator dengan ukuran A4.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 10

Paste gambar hasil scan ke atas kanvas.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 11

Klik ganda layer berisi gambar hasil scan. Pilih template. Ini akan mengunci gambar untuk kemudian digunakan sebagai panduan dalam proses tracing.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 12

Ambil tool pen. Secara manual, gambar ulang semua huruf dan karakter. Untuk memudahkan, kosongkan dulu setting Fill.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan
Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 13

Dalam kalimat ini, ada sebagian huruf yang sengaja saya lubangi. Misalnya huruf “O” di bawah. Untuk sekarang, tutup saja huruf-huruf yang berlubang ini.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 14

Ulangi juga hal yang sama dengan W.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 15

Khusus tulisan “I want to be”, itu dibuat dari garis panjang, bentuk path-nya tidak perlu ditutup.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 16

Inilah hasil trace yang saya peroleh.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 17

Seleksi semua teks yang penuh. Isi fill dengan putih dan stroke hitam.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 18

Perbaiki juga detail-detail kecil seperti posisi teks yang bertumpukan.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 19

Buat persegi dan simpan dibelakang semua huruf. Beri warna biru. Ini akan menjadi latar gambar.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 20

Bisa kita lihat bahwa teks-teks seperti D atau O saat ini tidak berlubang. Untuk memperbaikinya, seleksi huruf dan lubangnya lalu klik ikon Subtract.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 21

Ulangi pada huruf-huruf yang lain.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 22

Beri warna yang sama pada huruf dari satu kata, misalnya T, O, B, dan E dari “TO BE”. Ini akan membuat tulisan lebih mudah dibaca. Tulisan “Don’t Want” sengaja dibuat putih utuk memberi kesan tidak menyenangkan. Teks BRUCE LEE diberi kuning karena ini mengingatkan pada baju terkenal Bruce Lee di film Game of Death.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 23

Pindahkan gambar hasil scan ke atas. Gandakan teks dan simpan ke atas gambar. Kosongkan nilai Fill.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 24

Hapus sebagian huruf untuk membuatnya terpotong. Misalnya pada huruf “O” di bawah.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan
Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 25

Kadang Anda perlu memberi garis tambahan seperti pada huruf di bawah.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 26

Sembunyikan gambar hasil scan. Seleksi semua teks yang ada di bawah dan kosongkan Stroke.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 27

Perbaiki garis-garis yang menembus keluar teks.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 28

Inilah hasil yang diperoleh di Illustrator. Ekspor gambar ke format JPEG atau TIFF lalu buka di Photoshop.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 29: Menambahkan Tekstur

Ambil Tekstur Noise. Simpan ke atas gambar dan ubah blend mode layer ke Screen.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan
Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 30

Ambil lagi tekstur kertas. Kali ini ubah blend mode layer ke Multiply.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 31

Turunkan opacity layer agar tekstur terlihat lebih lembut. Buang area yang tidak dibutuhkan dengan tool crop.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 32: Menambahkan Jacky Chan

Sebetulnya, sampai saat ini gambar bisa dibilang selesai. Namun, saya tidak bisa menahan diri untuk tidak menambahkan Jacky Chan ke dalam gambar. Jadi, saya cari gambar Jacky dari Google. Ubah blend mode layer ke Multiply. Beri layer mask dan luis area yang tidak dibutuhkan dengan hitam. Turunkan opacity layer hingga 5%.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Langkah 33

Akhirnya, saya putar gambar Jacky sedikit.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

[hr]

Hasil Akhir

Berikut adalah hasil akhir yang kita peroleh.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

Berikut adalah hasil yang saya peroleh sebelumnya. Di sini saya berhasil menahan diri untuk tidak menambahkan foto Jacky.

Tutorial Membuat Illustrative Lettering dari Tulisan Tangan

[hr]

Bagaimana menurut Anda?

Ternyata setelah projek ini selesai, saya baru ingat bahwa sebetulnya nama yang benar bukan Jacky Chan tapi Jackie Chan. Sorry, Jackie!