Preview

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

Tampilan 100%.

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

Resource yang Dibutuhkan

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

• Tekstur Beton dari Vandelay Premier
• Pixel Pattern dari PSDfreemium

Tutorial

Langkah 1: Mempersiapkan Bahan Dasar Karakter

Buka Illustrator dan buat file baru berukuran A4.

Langkah 2

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

Langkah 3

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

Langkah 4

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

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.

Langkah 6

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

Langkah 7

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

Langkah 8

Inilah bentuk-bentuk dasar yang akan membentuk karakter.

Langkah 9: Karakter L

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

Langkah 10

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

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.

Langkah 12

Buat lagi persegi untuk bagian ujung karakter L.

Langkah 13: Karakter O

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

Langkah 14: Karakter P

Ambil segmen 135 derajat.

Langkah 15

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

Langkah 16

Tambahkan lagi satu persegi di bagian atas karakter P.

Langkah 17: Karakter S

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

Langkah 18: Kembali ke Photoshop

Buat file baru dengan ukuran A4 di Photoshop.

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.

Langkah 20

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

Langkah 21: Menyiapkan Latar

Isi Background dengan gradasi dari abu-abu ke putih.

Langkah 22

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

Langkah 23: Menyatukan Karakter

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

Langkah 24

Ulangi terus dengan karakter lainnya.

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.

Langkah 26

Klik Filter > Blur > Gaussian Blur.

Langkah 27

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

Langkah 28

Ulangi proses ini dengan karakter berikutnya.

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%.

Langkah 30

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

Langkah 31

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

Hasil Akhir

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

Tampilan 100%.

Related posts:

• Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
• Membuat Poster Petarung dengan Bentuk Rumit di Illustrator dan Photoshop
• Membuat Poster Bertema Objek Geometris Menggunakan Photoshop dan Illustrator
• Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop (Bagian 1)
• Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop (Bagian 2)

Preview

Berikut adalah illustrative lettering yang akan kita buat dalam tutorial ini. Kalimat yang digunakan adalah ucapan kutipan dari Jacky Chan.

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

Tutorial

Langkah 1: Membuat Tulisan Tangan

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

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.

Langkah 3

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

Langkah 4

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

Langkah 5

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

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.

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.

Langkah 8

Pilih tipe scanner yang digunakan.

Langkah 9: Tracing Tulisan

Buat file baru di Illustrator dengan ukuran A4.

Langkah 10

Paste gambar hasil scan ke atas kanvas.

Langkah 11

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

Langkah 12

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

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.

Langkah 14

Ulangi juga hal yang sama dengan W.

Langkah 15

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

Langkah 16

Inilah hasil trace yang saya peroleh.

Langkah 17

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

Langkah 18

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

Langkah 19

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

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.

Langkah 21

Ulangi pada huruf-huruf yang lain.

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.

Langkah 23

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

Langkah 24

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

Langkah 25

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

Langkah 26

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

Langkah 27

Perbaiki garis-garis yang menembus keluar teks.

Langkah 28

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

Langkah 29: Menambahkan Tekstur

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

Langkah 30

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

Langkah 31

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

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%.

Langkah 33

Akhirnya, saya putar gambar Jacky sedikit.

Hasil Akhir

Berikut adalah hasil akhir yang kita peroleh.

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

Bagaimana menurut Anda?

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

Related posts:

• Karya Tipografi Tulisan Tangan dari Chris Piascik
• Membuat Ikon Gambar Tangan dengan Cara Manual
• Membuat Teks 3D Bermotif Bunga
• Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
• Membuat Tipografi Custom “Loops” dengan Photoshop dan Illustrator

1. Happy New Hair

Huruf-huruf ini terbuat dari rambut. Untuk memperkuat bentuknya, setiap huruf disemprot dengan hair spray.

Happy New Hair

Happy New Hair

2. Eat My Art

Huruf buatan tangan dari Hand Made Font. Huruf-huruf ini terbuat dari daging.

Eat My Art

Eat My Art

3. I’m Not Here

Semua huruf ini dibuat dengan cara menjahitnya.

I’m Not Here

I’m Not Here

4. Must Be Funny

Kumpulan huruf yang terbuat dari uang kertas.

Must Be Funny

Must Be Funny

5. Concrete Rock (Beton)

Concrete Rock

6. Beard (Janggut)

Beard

7. CigaretteType (Rokok)

CigaretteType

CigaretteType

8. CondomType

CondomType

CondomType

9. GreenLeavesType

GreenLeavesType

GreenLeavesType

10. HairType

Seperti nomor 1, huruf-huruf ini terbuat dari rambut. Bedanya, di sini rambut tidak diperkuat sehingga terlihat lebih lembut.

HairType

HairType

11. PillsType

PillsType

PillsType

12. Rock Around the Clock

Huruf ini terbuat dari kumpulan semacam baut besi.

Rock Around the Clock

Rock Around the Clock

13. 5-A-Day Type

5-A-Day Type

14. Watercolor Typography

koleksi huruf-huruf yang dibuat secara manual menggunakan cat air.

Watercolor Typography

Watercolor Typography

15. Paper font

Paper font

16. Mech type

Huruf-huruf ini terbuat dari lempengan besi.

Mech type

Mech type

17. Tie-pography

Ide yang digunakan sangat unik. Semua huruf dibuat dengan melipat dasi.

Tie-pography

Tie-pography

18. Alphabet using oil and vinegar

Huruf ini dibuat dari oli dan cuka. Secara hati-hati, kedua bahan ini ditempatkan hingga membentuk huruf.

Alphabet using oil and vinegar

Alphabet using oil and vinegar

Alphabet using oil and vinegar

Bagaimana Menurut Anda?

Huruf terbuat dari rambut bukan sesuatu yang biasa kita lihat sehari-hari. Bagi saya, huruf rambut ini selain menarik juga menjijikan. Bagaimana menurut Anda, ide mana yang dirasa paling unik?

Related posts:

• Membuat Tipografi Custom “Loops” dengan Photoshop dan Illustrator
• Karya Tipografi Tulisan Tangan dari Chris Piascik
• Galeri Kinetik Tipografi Menakjubkan Diambil dari Adegan Film
• 35 Manipulasi Foto Unik: Penggabungan Hewan dan Tumbuhan
• Kombinasi Unik Foto dan Illustrasi dari Jurryt Visser

All My Bikes: 28, FBM The Joint 2

I’ll Know It When I See It

The Future

Paula Scher

All My Bikes Zine

Hungry, Like the Wolf

Print Brigade : Selected Designs

Selected Lettering

Vote!

Discovery Channel: The Colony

700!

Gocco Prints

Hallowzine

Selected Illustration Work

Mad Men Season 4 Episode 13

The Say Something Poster Project

Kabar Menarik!

OMG! Bukankah karyanya terlihat sangat menarik? Saya pribadi sangat menyukai karya-karya Chris Piascik. Berita bagus lain buat Anda, saya telah mempersiapkan tutorial cara pembuatan tipografi tulisan tangan. Tunggu saja akhir minggu ini.

Related posts:

• Membuat Illustrative Lettering dari Tulisan Tangan
• Gambar Tangan dan Manipulasi Foto dari Maruciel
• Karya-Karya Menginspirasi dari They Hate My Design
• 18 Tipografi Eksperimental dengan Ide Unik
• Galeri Kinetik Tipografi Menakjubkan Diambil dari Adegan Film

House

House adalah film seri tentang seorang dokter jenius berwatak keras kepala, kasar, dan pemarah yang akan melakukan apa pun untuk menyelamatkan pasiennya.

Fight Club

Diambil dari film Fight Club. Bercerita tentang seorang petinju jalanan dari kalangan Gipsy, diperankan Brad Pitt. Kombinasi teks dan gerakan yang diperlihatkan di sini bisa mewakili kesan suasana dalam film.

Dexter

Film seri TV Dexter berkisah tentang pembunuh gila yang memiliki etika kebaikan, hanya membunuh para penjahat yang lolos dari jeratan hukum. Dialog dalam film ini menceritakan konflik batin Dexter sebagai seorang pembunuh.

Pulp Fiction

Diambil dari Pulp Fiction, film buatan Quentin Tarrantino. Adegan ini memperlihatkan John Travolta yang tidak sengaja membunuh salah seorang rekannya. Tipografi ini memperlihatkan dengan sangat kental efek kengerian dan kebingungan yang muncul di film.

Rocky Balboa

Dialog ini berisi nasehat Rocky pada anaknya tentang sukses. Kalau pun Anda tidak begitu suka film ini, Anda pasti tersentuh dengan pesan yang disampaikannya.

Monk

Monk bercerita tentang Adrian Monk, seorang detektif cerdas yang memiliki fobia akut.

Batman: The Dark Knight

Ini diambil dari adegan terakhir film Batman: The Dark Knight. Berisi dialog Komisaris Gordon menjelaskan status Batman sebagai penjaga tak terlihat Kota Gotham, seorang Dark Knight. Sepintas terlihat biasa tapi lihat bagian akhir tipografi ini.

V for Vendetta

Adegan ini ketika V memperkenalkan diri pada Eevy, menggunakan kata-kata acak.

Related posts:

• Poster Film Dexter
• Karya Tipografi Tulisan Tangan dari Chris Piascik
• Karya Seni Batman Dari DeviantArt
• Film Promo Cars 2 versi LEGO
• Head Up Display (HUD) Terinspirasi dari Film

Source yang diperlukan:

• Brush suddenly spring.
• Brush flower.
• Awan.

1. Di Illustrator buat huruf T lalu klik Effect|3D|Extrude & Bevel. Gunakan setting seperti di bawah.

2. Lakukan lagi untuk huruf Y, P, dan O. Untuk setiap huruf putar posisinya dengan klik dan geser ke kiri atau kanan di dalam kotak preview. Hasil akhir keempat huruf seperti di bawah.

3. Seleksi huruf satu persatu, klik Edit|Copy. Buka Photoshop lalu klik Edit|Paste. Pilih Smart Object dalam pilihan paste.

4. Buat path baru lalu dengan sangat hati-hati trace bagian depan teks.

5. Ubah path jadi seleksi dengan ctrl+Enter. Buat layer baru lalu gradasi dari hitam ke putih.

6. Hilangkan seleksi (ctrl+D). Turunkan opacity layer ke 20%.

7. Aktifkan tool custom shape. Dari daftar shape pilih bentuk seperti terlihat di bawah.

8. Buat shape ini di bagian paling bawah gambar. Turunkan opacity layer ke 15%.

9. Klik Layer|Layer Style|Gradient Overlay. Gunakan setting seperti di bawah.

10. Buat layer baru di atas gradient yang kita buat di awal. Ambil brush flower. Lalu lukis bunga-bunga di bagian depan huruf.

11. Klik Layer|Create Clipping Mask. Bunga-bunga akan masuk ke bagian depan huruf. Turunkan opacity ke 20%.

12. Ambil lagi brush suddenly spring. Kali ini lukis bunga-bunga di belakang huruf.

13. Masalah yang muncul biasanya kita merasa terbatas dengan bentuk brush yang itu-itu saja. Untuk mensiasatinya buka panel brush lalu ubah Angle atau klik dan geser panah preview brush untuk memutar bentuk brush. Dengan cara ini setiap brush akan terlihat unik.

14. Ambil gambar awan. Paste ke atas gambar. Simpan di bagian paling bawah gambar.

15. Beri layer mask. Lukis dengan hitam hingga hanya sedikit awan yang terlihat. Turunkan opacity ke 5%. Ini akan menghasilkan sedikit efek yang cukup menarik.

16. Sekarang buat bunga besar di layer baru.

17. Klik Filter|Blur|Gaussian Blur. Teknik ini akan memberikan kesan kedalaman atau depth of field kamera. Saya pernah membahas teknik ini di tutorial manusia terbang.

18. Hingga saat ini kita hanya menggunakan warna hitam. Membosankan? Tidak masalah, di panel Adjustments pilih Hue/Saturation. Aktifkan colorize dan geser slider-slidernya hingga gambar jadi berwarna.

19. Di sini, saya baru menyadari bahwa teks terlalu kecil. Saya bisa saja mengulangi dari awal dan membuat teks baru tapi saya pilih untuk memotong gambar dengan tool crop hingga memperoleh komposisi seperti ini.

20. Di bagian bawah gambar buat layer baru dan isi dengan gradasi radial dari putih ke hitam.

21. Turunkan opacity layer ke 10%. Gradasi ini membuat teks semakin menonjol.

22. Buat layer baru di bawah teks. Dengan tool lasso poligon buat seleksi untuk bayangan setiap huruf di lantai. Isi seleksi dengan hitam.

23. Klik Filter|Blur|Gaussian Blur. Turunkan opacity layer ke 50%.

24. Buat lagi layer baru, secara manual lukis warna hitam dengan brush lembut (opacity 0%) tepat di bawah bagian huruf yang menempel langsung ke lantai.

25. Dan inilah hasil yang kita peroleh. Klik di sini atau klik pada gambar untuk melihat versi high res.

Related posts:

• Membuat Manipulasi Foto disertai Efek Teks Berwarna
• Menyatukan Teks 3 Dimensi ke Dalam Foto Nyata
• Membuat Ulang Efek Teks Film Avenger dengan Photoshop dan Illustrator
• Membuat Tipografi Custom “Loops” dengan Photoshop dan Illustrator
• Menggambar Teks Tiga Dimensi Menggunakan Projeksi Isometrik