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.

Preview

Berikut adalah hasil akhir yang kita peroleh.

final-large

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:

Tutorial

Langkah 1: Mempersiapkan Bahan Dasar Karakter

Buka Illustrator dan buat file baru berukuran A4.

tutorial-tipografi-custom-loops-01.jpg

Langkah 2

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

tutorial-tipografi-custom-loops-02.jpg

Langkah 3

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

tutorial-tipografi-custom-loops-04
tutorial-tipografi-custom-loops-03

Langkah 4

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

tutorial-tipografi-custom-loops-05.jpg

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.

tutorial-tipografi-custom-loops-06.jpg

Langkah 6

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

tutorial-tipografi-custom-loops-07.jpg

Langkah 7

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

tutorial-tipografi-custom-loops-08.jpg

Langkah 8

Inilah bentuk-bentuk dasar yang akan membentuk karakter.

tutorial-tipografi-custom-loops-09.jpg

Langkah 9: Karakter L

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

tutorial-tipografi-custom-loops-10.jpg

Langkah 10

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

tutorial-tipografi-custom-loops-11.jpg

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.

tutorial-tipografi-custom-loops-12.jpg

Langkah 12

Buat lagi persegi untuk bagian ujung karakter L.

tutorial-tipografi-custom-loops-13.jpg

Langkah 13: Karakter O

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

tutorial-tipografi-custom-loops-14.jpg

Langkah 14: Karakter P

Ambil segmen 135 derajat.

tutorial-tipografi-custom-loops-15.jpg

Langkah 15

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

tutorial-tipografi-custom-loops-16.jpg

Langkah 16

Tambahkan lagi satu persegi di bagian atas karakter P.

tutorial-tipografi-custom-loops-17.jpg
tutorial-tipografi-custom-loops-18.jpg

Langkah 17: Karakter S

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

tutorial-tipografi-custom-loops-19.jpg

Langkah 18: Kembali ke Photoshop

Buat file baru dengan ukuran A4 di Photoshop.

tutorial-tipografi-custom-loops-20.jpg

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.

tutorial-tipografi-custom-loops-21.jpg
tutorial-tipografi-custom-loops-22.jpg

Langkah 20

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

tutorial-tipografi-custom-loops-23.jpg

Langkah 21: Menyiapkan Latar

Isi Background dengan gradasi dari abu-abu ke putih.

tutorial-tipografi-custom-loops-24.jpg

Langkah 22

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

tutorial-tipografi-custom-loops-25.jpg
tutorial-tipografi-custom-loops-26.jpg

Langkah 23: Menyatukan Karakter

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

tutorial-tipografi-custom-loops-27.jpg

Langkah 24

Ulangi terus dengan karakter lainnya.

tutorial-tipografi-custom-loops-28.jpg

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.

tutorial-tipografi-custom-loops-29.jpg

Langkah 26

Klik Filter > Blur > Gaussian Blur.

tutorial-tipografi-custom-loops-30.jpg

Langkah 27

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

tutorial-tipografi-custom-loops-31.jpg

Langkah 28

Ulangi proses ini dengan karakter berikutnya.

tutorial-tipografi-custom-loops-32.jpg

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

tutorial-tipografi-custom-loops-33.jpg
tutorial-tipografi-custom-loops-34.jpg

Langkah 30

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

tutorial-tipografi-custom-loops-35.jpg

Langkah 31

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

tutorial-tipografi-custom-loops-36.jpg
tutorial-tipografi-custom-loops-37.jpg

Hasil Akhir

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

final-large.jpg

final-2.jpg

Lihat hasil akhir dalam tampilan 100%.

Iklan

9 thoughts on “Membuat Tipografi Custom “Loops” dengan Photoshop dan Illustrator

  1. Kalau melihat hasil sepintas tadinya menebak 4-5 step,…. Trnyata lebih. Cuma bisa terkesan dengan karyanya, Mas. Ngga punya skill dsitu 😀

  2. Kalau kita tidak ingin terlalu detail sebetulnya bisa dipersingkat. Tapi, saya terbiasa untuk memperhatikan detail-detail kecil seperti tekstur tipis. Saya rasa itulah membedakan penulis biasa dan penulis berkualitas atau desainer biasa dan desainer berkualitas, perhatian pada detail.

  3. Ingin Bertanya bagaimanakah convert file dari PSD ke Ai supaya ia kekal sebagai vector? sudah dibuat AI kemudian color di PHOTOSHOP dan mahu masukkan kembali ke AI agar ia VECTOR? Harap dapat membantu.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s