Menambahkan Highlight Pada Teks di Adobe InDesign

Tutorial ini terinspirasi dari quicktips di Tutsplus yang membahas cara menambahkan highlight pada teks di Adobe InDesign. Di sini, digunakan dua teknik, yaitu menggunakan Paragraph Rules dan Underline. Kedua teknik ini memiliki kelebihan masing-masing.

Video Tutorial

Preview

Inilah tampilan teks dengan highlight yang akan kita peroleh. Dalam tutorial ini teks dibuat di Adobe InDesign CC 2015. Tapi, Anda bisa menggunakan versi lebih lama.

menambahkan-highlight-teks-indesign-01
Highlight Teks di InDesign

Lanjutkan membaca “Menambahkan Highlight Pada Teks di Adobe InDesign”

Tips Menggunakan Bahasa Arab di Photoshop

Artikel ini berasal dari pengalaman mengerjakan projek pro-bono di bulan Ramadhan yang telah berlalu. Saya diminta untuk membuat sebuah kartu undangan yang disertai dengan ayat Al-Qur’an dan hadits. Ternyata ada trik khusus untuk melakukannya.

Preview

Berikut hasil akhir teks arab yang digabungkan dengan teks biasa.

Tips Menggunakan Bahasa Arab di Photoshop

Langkah 1

Saya sama sekali tidak bisa menulis bahasa arab di komputer. Jadi, cara termudah adalah dengan menyalin teks arab yang sudah ada. Untuk ayat al-qur’an, saya biasa mengambil dari tanzil.net.

Tips Menggunakan Bahasa Arab di Photoshop

Langkah 2

Jika Anda langsung paste teks itu ke Photoshop, teks akan terbalik dan tidak menyambung.

Tips Menggunakan Bahasa Arab di Photoshop

Langkah 3

Buka panel Preferences (Ctrl + K). Di pilihan Type aktifkan Middle Eastern untuk mengaktifkan teks dari timur tengah (Arab). Klik OK, lalu restart Photoshop.

Tips Menggunakan Bahasa Arab di Photoshop

Langkah 4

Buat file baru lalu paste teks. Teks akan tampil seperti seharusnya. Simpan file ini. Buka panel Preferences (Ctrl + K) lalu kembalikan pilihan Type ke East Asian. Klik OK, lalu restart Photoshop.

Tips Menggunakan Bahasa Arab di Photoshop

Langkah 5

Lakukan proses desain seperti biasa. Di kotak teks, sisakan paragraf khusus untuk teks Arab.

Tips Menggunakan Bahasa Arab di Photoshop

Langkah 6

Buka file yang tadi kita isi dengan ayat suci al-Qur’an. Akan muncul peringatan bahwa teks ini dibuat dengan format timur tengah. Peringatan ini sebetulnya memberitahu bahwa saat ini Anda tidak akan bisa menulis teks Arab. Tidak jadi masalah karena kita telah selesai menulis teks Arab. Klik saja OK.

Tips Menggunakan Bahasa Arab di Photoshop

Langkah 7

Seleksi paragraf yang telah disediakan untuk bahasa lalu timpa dengan ayat al-Qur’an dari file sebelumnya.

Tips Menggunakan Bahasa Arab di Photoshop

Ulangi proses ini untuk menambahkan teks lainnya.

Tips Menggunakan Bahasa Arab di Photoshop

Langkah 8

Anda masih bisa mengatur setting teks, misalnya mengubah tipe dan ukuran font.

Tips Menggunakan Bahasa Arab di Photoshop

[box type=”info”]Secara default, Photoshop menggunakan font Adobe Arabic untuk teks arab, Anda bisa menggantinya dengan font lebih baik. Untuk ayat al-Qur’an, font yang lebih sesuai bisa Anda temukan di zekr atau quran.mursil.com.[/box]

Langkah 9

Jika menggunakan CS6, saya sarankan Anda untuk menggunakan fitur Styles.

Tips Menggunakan Bahasa Arab di Photoshop
Tips Menggunakan Bahasa Arab di Photoshop

Hasil Akhir

Di bawah adalah tampilan teks arab dalam undangan. Kaligrafi diambil dari vektor gratis di PSDfreemium.

Tips Menggunakan Bahasa Arab di Photoshop
Tips Menggunakan Bahasa Arab di Photoshop

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Sistem projeksi isometrik adalah cara paling sederhana untuk menggambar objek tiga dimensi dalam media dua dimensi. Di tutorial ini saya akan menunjukkan konsep dasar praktek penggunaannya dalam pembuatan teks tiga dimensi menggunakan Adobe Illustrator.

[hr]

Preview

Berikut adalah hasil yang akan kita peroleh.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Illustrator
  • Teknik yang Dipelajari: Projeksi Isometrik, Pembuatan Guide, Editing Shape, Dasar Tipografi
  • Lama Pengerjaan: 45 menit

[hr]

Tutorial

Langkah 1: Mengatur Preference Illustrator

Untuk mempermudah pembuatan guide untuk proyeksi isometrik terlebih dahulu kita perlu mengatur setting Preferences Illustrator. Tekan Ctrl + K untuk membuka kotak dialog Preferences. Di pilihan General ubah Keyboard Increment ke 1 cm.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 2: Membuat Bentuk Dasar Teks

Sebelum membuat tampilan tiga dimensinya, untuk mempermudah kita mulai dengan membuat tampilan teks dalam dua dimensi. Langkah awal kita akan membuat guide. Buat garis vertikal lalu tekan Alt + Panah Kiri untuk menduplikasinya. Tekan Ctrl + D untuk mengulangi proses duplikasi. Lakukan terus hingga kita peroleh cukup banyak garis.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik
Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 3

Seleksi semua garis lalu tekan Ctrl + C dan Ctrl + F untuk menduplikasinya. Putar garis 90°.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 4

Seleksi semua garis. Klik View > Guides > Make Guides (Ctrl + 5) untuk mengubah garis-garis tadi menjadi guide.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik


Langkah 5


Kita mulai dengan membuat huruf T. Untuk ukurannya, kita gunakan proporsi standar 5:3. Di sini saya buat huruf T seperti di bawah.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 6

Di bawah untuk huruf Y. Masih dengan proporsi yang sama, 5:3.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 7

Di bawah adalah tampilan seluruh huruf.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 8: Membuat Grid Isometrik

Setelah selesai mendesain huruf, berikutnya adalah mempersiapkan grid isometrik. Buat layer baru khusus untuk menyimpan grid isometrik. Aktifkan tool Line lalu klik sekali pada kanvas. Gunakan sudut 30°.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 9

Tekan Alt + Panah Kanan untuk menduplikasi garis lalu tekan Ctrl + D untuk mengulangi proses duplikasi tadi.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik
Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Di bawah adalah tampilan garis yang diperoleh. Pastikan tinggi garis melebihi ukuran kanvas.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 10

Seleksi semua garis, klik kanan dan pilih Reflect. Pilih Vertical dan klik Copy.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik
Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 11

Seleksi semua garis lalu tekan Ctrl + 5 untuk mengubahnya menjadi Guides.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 12

Untuk mempermudah proses menggambar selanjutnya, pastikan untuk mengaktifkan Snap to Point dari menu View.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 13

Jika Guides yang diperoleh sulit dilihat Anda bisa mengubah warnanya melalui kotak dialog Preferences (Ctrl + K).

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 14: Belajar Membuat Balok Isometrik

Sebelum maju ke projek tipografi mari kita mulai dengan belajar menggambar balok sederhana. Gunakan tool Persegi untuk membuat sebuah persegi empat.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 15

Aktifkan tool Direct Selection lalu geser titik-titik ujungnya satu per satu hingga menempel pada bidang.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 16

Ulangi proses ini untuk membuat sisi yang lain.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 17

Saya temukan bahwa penggunaan Guide di Illustrator tidak begitu akurat. Illustrator entah kenapa tidak memiliki fitur Snap to Guide tapi hanya Snap to Point. Ini membuat titik Anda mungkin sekali menempel secara tidak tepat. Anda bisa melihatnya pada titik yang ditandai di bawah.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 18

Untuk memperbaikinya, Anda perlu men-zoom gambar ke tampilan maksimal lalu menggeser titik tersebut secara manual ke posisi sebenarnya.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik
Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 19: Menggambar Teks Tiga Dimensi

Setelah memahami teknik dasar menggambar isometrik barulah kita masuk ke proses menggambar teks. Gambar bagian depan huruf T dengan proporsi sama dengan sketsa yang kita buat di Langkah 5.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 20

Berikutnya menggambar sisi teks.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik
Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 21

Lakukan proses ini pada huruf-huruf yang lain.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 22

Anda bisa berhenti di sini dan memberikan warna pada huruf.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Di bawah adalah tampilan hitam putih.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 23

Kita akan melanjutkan menambah Stroke di sekeliling teks. Efek ini biasa digunakan dalam gambar karakter kartun. Duplikasi semua huruf dan sembunyikan teks asli. Caranya dengan seleksi semua huruf lalu tekan Ctrl + A. Buat layer baru lalu tekan Ctrl + F. Klik ikon mata di depan layer huruf yang asli.

Seleksi huruf T lalu gabungkan dengan klik Unite di Pathfinder.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 24

Hapus garis tambahan yang mungkin dihasilkan proses ini.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik
Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 25

Ulangi proses yang sama pada huruf-huruf yang lain.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 26

Ini adalah hasil yang diperoleh.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 27

Kosongkan Fill lalu naikkan Weight Stroke hingga 3 pt.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 28

Munculkan kembali teks asli.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 29

Sepintas terlihat bagus tapi jika dilihat lebih dekat ada beberapa detail yang tidak logis. Salah satunya adalah garis Stroke menutupi huruf. Untuk memperbaikinya geser layer Stroke ke belakang huruf.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 30

Mungkin sekali sebagian Stroke masih menutupi teks.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

Langkah 31

Untuk memperbaikinya, Anda perlu mengatur posisi huruf agar yang di depan berada di posisi lebih atas.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

[hr]

Hasil Akhir

Ini adalah hasil yang kita peroleh. Semoga tutorial sederhana ini membantu Anda memahami cara menggambar dengan metode isometrik.

Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2011/12/tutorial-efek-teks-isometrik/isometrik.zip”%5DDownload File Ai[/ilink]

Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator

Semua film super hero selalu menyebalkan dan tidak layak ditonton. Tentu saja kecuali Batman besutan Christopher Nolan. Anyway, Avenger adalah satu lagi film super hero berkualitas buruk yang hanya mengandalkan spesial efek khas Hollywood. Jika Anda penasaran dengan efek teks dalam judul filmnya, pastikan untuk mengikuti tutorial ini.

Tutorial ini ditulis ekslusif untuk Hongkiat.
[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini tidak sekadar meniru efek teks yang ada di film. Dalam tutorial ini, kita akan menggunakan membuat sendiri teks yang mirip dengan karakter teks Avenger. Kita akan melakukannya secara manual di Illustrator. Proses selanjutnya adalah memberi kesan tiga dimensi memberi kombinasi layer style dan tekstur di Photoshop.

Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Menyatukan Teks 3 Dimensi ke Dalam Foto Nyata

Dalam tutorial ini, kita akan mencoba menyatukan teks ke dalam sebuah foto nyata sehingga terlihat real. Tidak ada program 3D atau teknik canggih dalam prosesnya, hanya sedikit bermain dengan brush di Photoshop.

[hr]

Preview

Sebelum memulai, lihat terlebih dahulu hasil akhir yang akan kita peroleh.

Menyatukan Teks dengan Foto Nyata

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Melukis Highlight dan Shadow, Layer Mask, Layer Style
  • Lama Pengerjaan: 30 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Tutorial

Langkah 1: Mempersiapkan Foto

Ambil gambar singa lalu potong dengan tool crop hingga tersisa bagian kepala seperti di bawah.

Menyatukan Teks dengan Foto Nyata

Langkah 2: Menambah Teks

Tambahkan teks LION.

Menyatukan Teks dengan Foto Nyata

Langkah 3

Klik kanan layer teks dan pilih Convert to Shape untuk mengubah teks menjadi shape. Mulai saat ini, teks tidak lagi bisa diedit. Kita melakukan ini agar bentuk teks dapat diedit dengan mudah.

Menyatukan Teks dengan Foto Nyata

Langkah 4

Lakukan proses transformasi dengan menekan Ctrl + T. Tahan Alt + Shift + Ctrl lalu geser pojok atas untuk mentransformasi dengan perspektif. Kita mengubah perspektif teks dari depan ke seperti ini karena dalam kondisi nyata, tampilan depan secara sempurna sangat jarang terjadi dan akan terlihat buatan.

Menyatukan Teks dengan Foto Nyata

Langkah 5

Beri Layer Style Gradient Overlay untuk menghindarkan kesan warna yang terlalu datar.

Menyatukan Teks dengan Foto Nyata
Menyatukan Teks dengan Foto Nyata

Langkah 6

Simapan teks dalam sebuah group. Beri layer mask lalu lukis gigi dan sebagian lidah sehingga bagian itu berada di depan teks. Di bawah Anda bisa melihat perbadingan layer mask dan hasilnya.

Menyatukan Teks dengan Foto Nyata

Langkah 7

Gandakan teks lalu simpan di bawah teks asli. Geser teks beberapa pixel ke kiri bawah.

Menyatukan Teks dengan Foto Nyata

Langkah 8

Edit beberapa bagian teks dengan menambahkan ttik baru untuk memberi kesan bentuk teks 3 dimensi.
Di bawah adalah tampilan titik tambahan di huruf N dan I.

Menyatukan Teks dengan Foto Nyata
Menyatukan Teks dengan Foto Nyata

Langkah 9

Di bawah hasil dari tampilan teks tiga dimensi yang diperoleh.

Menyatukan Teks dengan Foto Nyata

Langkah 10

Buat layer baru di atas teks kedua dan ubah menjadi Cliping Mask dengan menekan Ctrl + Alt + G. Lukis hitam di beberapa tempat untuk menggelapkan teks dan memperkuat kesan efek teks 3 dimensi. Lukis juga bayangan mulut singa pada teks.

Menyatukan Teks dengan Foto Nyata

Langkah 11

Lukis bayangan gigi pada teks.

Menyatukan Teks dengan Foto Nyata

Langkah 12

Tahan Ctrl lalu klik teks. Buat layer baru di atas teks lalu isi dengan gradasi radial dari putih ke hitam. Turunkan Opacity layer dan ubah blend mode layer ke Screen.

Menyatukan Teks dengan Foto Nyata
Menyatukan Teks dengan Foto Nyata

Langkah 13

Kita perlu memperkuat garis luar teks untuk membuatnya terlihat lebih tiga dimensi. Tahan Ctrl lalu klik teks paling depan. Klik kanan dan pilih Stroke. Pilih warna Stroke hitam.

Menyatukan Teks dengan Foto Nyata

Langkah 14

Beri filter Gaussian Blur.

Menyatukan Teks dengan Foto Nyata

Langkah 15

Hapus sebagian garis tadi.

Menyatukan Teks dengan Foto Nyata

Langkah 16

Ambil brush besar dengan hardness 0%. Lukis bayangan mulut pada teks. Buat teks terlihat berada jauh di dalam mulut. Lukis juga bayangan besar di belakang teks LION dengan Opacity sangat rendah, 10-15%.

Menyatukan Teks dengan Foto Nyata
Menyatukan Teks dengan Foto Nyata

Langkah 17

Lukis bayangan teks pada lidah.

Menyatukan Teks dengan Foto Nyata

Langkah 18

Dengan tool eyedropper, ambil warna kumis singa. Lukis sedikit kumis singa di depan huruf N. Gandakan kumis baru ini, ubah warnanya menjadi hitam lalu haluskan dengan Gaussian Blur. Geser ke bawah untuk menjadikannya bayangan kumis pada huruf.

Menyatukan Teks dengan Foto Nyata

Langkah 19

Lukis sedikit kilauan di bagian bawah huruf dekat lidah. Kilauan bisa berasal dari ludah singa atau hembusan nafasnya.

Menyatukan Teks dengan Foto Nyata

Langkah 20: Memperbaiki Warna

Ambil sebagian rambut singa dan simpan di depan huruf N. Hapus sebagian dengan tool eraser lembut. Lakukan proses ini hingga rambut terlihat berada di depan huruf.

Menyatukan Teks dengan Foto Nyata

Langkah 21: Memperbaiki Warna

Tambahkan Adjustment Layer Hue/Saturation, Levels, dan Color Balance dengan setting seperti di bawah.
Ambil sebagian rambut singa dan simpan di depan huruf N. Hapus sebagian dengan tool eraser lembut. Lakukan proses ini hingga rambut terlihat berada di depan huruf.

Menyatukan Teks dengan Foto Nyata
Menyatukan Teks dengan Foto Nyata
Menyatukan Teks dengan Foto Nyata

Langkah 22

Buat seleksi ellipse di tengah kanvas. Haluskan seleksi dengan klik Select > Modify > Feather Selection.

Menyatukan Teks dengan Foto Nyata

Langkah 23

Balikkan seleksi, Ctrl + Shift + I. Isi seleksi dengan hitam.

Menyatukan Teks dengan Foto Nyata

Langkah 23

Terakhir, turunkan Opacity layer ke 20%.

Menyatukan Teks dengan Foto Nyata

[hr]

Hasil Akhir

Di bawah adalah hasil akhir tutorial yang kita peroleh. Seperti yang Anda lihat, yang kita lakukan sebetulnya tidak rumit. Kita mencoba bermain dengan highlight dan shadow seakurat mungkin dengan memperhitungkan kondisi real yang mungkin terjadi seperti ludah, hembusan nafas pada teks, atau tampilan perspektif teks. Kita juga mencoba menambahkan sebanyak mungkin detail seperti rambut dan sedikit kumis di depan huruf.

Menyatukan Teks dengan Foto Nyata

Membuat Tipografi Custom “Loops” dengan Photoshop dan Illustrator

Dalam tutorial ini, saya akan menunjukkan cara membuat teks “Loops” menggunakan font buatan sendiri. Kita akan menggambar karakter di Adobe Illustrator lalu mengimpor bentuk vektor yang diperoleh ke Photoshop.

[hr]

Preview

Berikut adalah hasil akhir yang kita peroleh. Klik pada gambar untuk melihatnya di ukuran sebenarnya.

Judul Tutorial
Judul Tutorial
Tampilan 100%.

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop, Adobe Illustrator
  • Teknik yang Dipelajari: Clipping Mask, Membuat Custom Shape, Menggabungkan Path di Illustrator
  • Lama Pengerjaan: 30 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Tutorial

Langkah 1: Mempersiapkan Bahan Dasar Karakter

Buka Illustrator dan buat file baru berukuran A4.

Judul Tutorial

Langkah 2

Karakter teks yang kita buat terbuat dari bahan dasar lingkaran. Buat lingkaran dengan Stroke 40 pt. Kosongkan Fill.

Judul Tutorial

Langkah 3

Klik File > Object > Expand. Pilih Stroke lalu klik OK. Klik kanan lingkaran yang sudah berubah menjadi donat dan pilih Ungroup.

Judul Tutorial
Judul Tutorial

Langkah 4

Gandakan hingga diperoleh 4 buah lingkaran. Kita akan membaginya sehingga diperoleh segmen 45 derajat, 90 derajat, dan 135 derajat.

Judul Tutorial

Langkah 5

Sekarang kita mulai membuat segmen 45 derajat. Seleksi lalu hapus kedua titik di posisi jam 3 dan 6. Menggunakan tool pen, sambungkan kedua titik yang terpisah. Lakukan pada sisi yang lain hingga bentuk ini tertutup.

Judul Tutorial

Langkah 6

Berikutnya adalah segmen 90 derajat. Hapus dua titik di posisi jam 3. Sammbungkan titik-titik yang terpotong.

Judul Tutorial

Langkah 7

Untuk segmen 135 derajat. Kita perlu menghapus salah satu segmen garis di antara jam 3 dan 6.

Judul Tutorial

Langkah 8

Inilah bentuk-bentuk dasar yang akan membentuk karakter.

Judul Tutorial

Langkah 9: Karakter L

Buat garis dengan stroke 40 pt. Klik Object > Expand. Klik kanan dan pilih Ungroup.

Judul Tutorial

Langkah 10

Ambil segmen 45 derajat. Putar segmen dan simpan di bawah persegi.

Judul Tutorial

Langkah 11

Hapus segmen garis yang akan disatukan. Geser titik dari persegi hingga menyatu. Seleksi kedua titik yang menumpuk lalu klik ikon Connect di baris pilihan atau klik Objek > Path > Join.

Judul Tutorial

Langkah 12

Buat lagi persegi untuk bagian ujung karakter L.

Judul Tutorial

Langkah 13: Karakter O

Tambahkan dua O. Saya mengubah warna karakter agar dapat dengan mudah dibedakan.

Judul Tutorial

Langkah 14: Karakter P

Ambil segmen 135 derajat.

Judul Tutorial

Langkah 15

Tambahkan garis di bawahnya lalu gabungkan. Proses pembuatannya sama dengan proses pembuatan karakter L.

Judul Tutorial

Langkah 16

Tambahkan lagi satu persegi di bagian atas karakter P.

Judul Tutorial
Judul Tutorial

Langkah 17: Karakter S

Terakhir, tambahkan segmen 45 derajat untuk karakter S. Inilah hasil akhir yang saya peroleh.

Judul Tutorial

Langkah 18: Kembali ke Photoshop

Buat file baru dengan ukuran A4 di Photoshop.

Judul Tutorial

Langkah 19: Mengambil Bentuk Vektor

Seleksi karakter di Illustrator lalu tekan Ctrl + C. Kembali ke Photoshop, tekan Ctrl + V untuk memasukkannya ke Photoshop. Pada pilihan Paste As pilih Path.

Judul Tutorial
Judul Tutorial

Langkah 20

Gandakan path dengan menggesernya ke atas ikon New Path. Hapus karakter-karakter lainnya hingga tersisa hanya satu karakter di setiap path.

Judul Tutorial

Langkah 21: Menyiapkan Latar

Isi Background dengan gradasi dari abu-abu ke putih.

Judul Tutorial

Langkah 22

Ambil tekstur beton dari Vandelay Premier lalu ubah blend mode layer ke Screen dan turunkan Opacity-nya.

Judul Tutorial
Judul Tutorial

Langkah 23: Menyatukan Karakter

Aktifkan path berisi huruf L. Klik ikon Adjustment Layers dan pilih Solid Color. Pilih warna merah.

Judul Tutorial

Langkah 24

Ulangi terus dengan karakter lainnya.

Judul Tutorial

Langkah 25: Menambahkan Kedalaman

Tahan Ctrl lalu klik thumbnail layer O pertama. Buat layer baru dan sisipkan di antara L dan O. Isi seleksi dengan hitam.

Judul Tutorial

Langkah 26

Klik Filter > Blur > Gaussian Blur.

Judul Tutorial

Langkah 27

Ubah layer menjadi Clipping Mask dengan menekan Ctrl + Alt + G.

Judul Tutorial

Langkah 28

Ulangi proses ini dengan karakter berikutnya.

Judul Tutorial

Langkah 29: Huruf S

Khusus untuk huruf S, beri Layer Style Gradient Overlay dengan gradasi dimulai dari warna O kedua. Turunkan Opacity layer ke 50% dan Fill ke 0%.

Judul Tutorial
Judul Tutorial

Langkah 30

Tahan Ctrl lalu klik path pertama yang berisi semua karakter Loops. Isi seleksi dengan hitam.

Judul Tutorial

Langkah 31

Beri Layer Style Pattern Overlay dengan pola pixel dari PSDfreemium dan Stroke hitam.

Judul Tutorial
Judul Tutorial

[hr]

Hasil Akhir

Di bawah adalah hasil akhir tutorial yang kita peroleh. Klik gambar untuk melihatnya di ukuran lebih besar.

Judul Tutorial
Judul Tutorial
Tampilan 100%.

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!