Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Typography

Bagaimana Cara Untuk Membuat Ilustrasi Tipografi Poster Klasik di Adobe Illustrator

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called The Wizard of Oz.
Click Your Heels Twice: How to Draw Sequin Ruby Slippers

Indonesian (Bahasa Indonesia) translation by Sittiana Ana (you can also view the original English article)

Final product image
What You'll Be Creating

"Tidak ada tempat selain rumah...” Dorothy membisikan kata-kata tersebut, dengan tiga kali bunyi dari selop berwarna merah delimanya yang berkilauan, dia telah kembali ke Kansas. Dengan momen film yang menarik, kita tidak dapat mengabaikan tema serialtutorial kita Wizard of Oz.

Dalam tutorial ini, kita akan membuat ilustrasi tipografi menggnakan kutipan “No Place Like Home”. Semenjak film The Wizard of Oz mengambil set pada awal 1900 (dan novel The Wonderful Wizard of Oz, karya L. Frank Baum, yang terbit pertama kali pada 1900), kita akan menggunakan tipografi gaya klasik yang terinspirasi pada masa itu.

1. Terinpirasi 

Lihatlah kumpulan tipografi dari akhir tahun 1800an dan awal 1900an. Vintage Me Oh My, sebuah blog yang menampilkan banyak contoh desain grafis bergaya klasik, blog ini merupakan sumber yang baik jika anda mencari inspirasi yang autentik.

vintage typography inspiration

Saya tahu beberapa dalam desain ini terlalu banyak hiasan dan rumit, tetapi tetap percaya--kita tidak akan menggunakan pulpen-dan-tinta atau cat untuk membuat desain buatan tangan seperti yang mereka lakukan pada jaman dulu. Bagaimanapun, kita akan meminjam beberapa bentuk dan gaya yang telah disederhanakan, dan menggunakan beberapa trik murni dan teksture untuk memberikan hasil akhir kita sentuhan antik, terlihat seperti buatan tangan.

2. Bersiap

Langkah 1

Sebelum kita memulai, anda mungkin ingin mengunduh sumber yang kami gunakan untuk melengkapi tutorial ini. Dapatkan secara gratis, dan anda dapat mengunduhnya melalui link dibawah ini:

Juga, jangan lupa untuk mengunduh grafis yang digunakan dalam tutorial ini (lihat tombol Lampiran Unduhan pada sebelah kanan). Dalam berkas tersebut, anda akan menemukan beberapa elemen dekoratif yang saya buat untuk memperlancar proses, semenjak kita akan fokus pada tipografi untuk keseluruhan proyek ini.

Langkah 2

Buka dokumen 8 x 10 in. di Adobe Illustrator. Merupakan ide yang bagus bila anda membuat proyek anda dengan ukuran yang mudah untuk dicetak dan dibingkai, dengan kata lain anda akan menggantungkannya pada diri anda sendiri, memberikannya sebagai hadiah, atau bahkan menjualnya sebagai seni cetak.

opening document in Illustrator

Selanjutnya, kita akan mengatur persiapan latar belakang untuk mengubah tipografi kita. Kita akan menempatkan semua elemen yang ada dengan warna hitam, dan nantinya akan ditambahkan warna.

Langkah 3

Tempatkan grafis selop merah delima (dari berkas yang dilampirkan) dan ukur (secara proporsional, tekan Shift) untuk mengisi bagian sudut bawah secara keseluruhan. Gunakan Ellipse Tool untuk menggambar sebuah lingkaran  untuk mengisi kelebaran halaman secara keseluruhan (punya saya berdiameter 530 px). Posisikan itu dengan menimpa selop dibawah pita.

placing background graphics

Langkah 4

Atur gaya pada lingkaran sampai 10 pt. Lihat dimana lingkaran bertumpuk dengan sepatu, melalui spasi berwarna putih disekitar pita? Pilih Path Eraser Tool (anda akan menemukannya diabawah Pencil Tool; klik-tekan, dan menu menengah akan muncul) dan, pastikan bahwa lingkaran tersebut tetap dipilih, hapus bagian lingkaran yang saling bertumpuk.

adding circle stroke and erasing path

3. Menyusun Tipografi

Sebelum kita memulai dengan tahap ini, pastikan anda mengunduh dan memasang semua bentuk tulisan yang akan kita gunakan (link diatas, pada bagian “Bersiap”).

Semenjak “rumah” menjadi fokus kita untuk kutipan ini, kita akan membuatnya menjadi titik penting dalam ilustrasi kita. Itu akan menjadi kata yang besar dalam rancangan kita, dan kia akan menempatkannya terlebih dahulu, lalu menyusun kata-kata setelahnya.

Langkah 1

Pertama, ketik huruf besar ‘H’ saja, karena akan ada perbedaan ukuran dengan sisa kata yang lain. Kita menggunakan Harrington sebagai bentuk tulisan, dengan ukuran sekitar 305 pt. Tempatkan itu dibawah sebelah kiri dari lingkaran. Lalu ketik “OME” dengan huruf besar--kali ini menggunakan akaPosse dengan ukuran lebih kecil, 128 pt.

typesetting home

Langkah 2

Lanjit, kita akan menambahkan efek ke ‘OME’ jadi bentuknya sesuai dengan kemiringan selop. Menuju ke Effect > Warp > Rise dan atur kemiringan (Bend) sampai 36%.

warping home text

Langkah 3

Buka menu Character dan ubah pengaturan Tracking menjadi 75 untuk membuat jarak antara huruf sedikit melebar. Setelah anda melakukan ini, ‘HOME’ mungkin tidak akan terlihat seperti berada di tengah lingkaran lagi, tapi tidak apa, karena kita masih memiliki beberapa tugas untuk dilakukan.

adjusting text tracking

Langkah 4

Huruf ‘H’ terlihat sedikit ringan dibandingkan huruf ‘OME’ disebelahnya, jadi perlebar dengan menambahkan gaya 7 pt, pada cara yang sama kita mengatur gaya pada lingkaran sebelumnya.

Sekarang, bagi saya, ‘H’ terlihat terlalu lebar, jadi saya mengkliknya dan menarik sedikit ditengah sisi untuk membuatnya terlihat lebih ramping. Dengan itu, saya mampu menggeser ‘H’ kebawah untuk mengisi sudut bawah lingkaran agar telihat lebih baik. Untuk sedikit penyesuaian, saya mengklik pada ‘OME’ dan, menggunakan sudut pegangan, saya memutar sedikit searah putaran jarum jam, jadi ‘O’ akan turun sedikit dan mengisi sudut yang dibuat oleh ‘H’ dan selop. Setelah anda selesai, hasil kerja anda akan seperti ini:

positioning home text

Langkah 5

Ketik ‘like’ tanpa menggunakan huruf kapital, pilih font Smythe dengan ukuran 110 pt.

Sekarang, bungkus teks seperti yang kita lakukan pada ‘OME’, klik Effect > Warp > Rise dan atur Bend sampai 30%.

warping like text

Letakan itu dibawah sudut yang dibuat oleh ‘HOME’, sisakan sedikit jarak vertikal antaea ‘like’ dan ‘OME’ seperti yang ada antara ‘OME’ dan selop.

Langkah 6

Ketika huruf besar ‘P’ menggunakan bentuk huruf Fletcher Gothic ukuran 200 pt. Dan tambahkan stroke 8 pt. Posisikan ‘P’ diakar kata secara diagonal dengan ‘H’ seperti yang tertera dibawah.

Ketik ‘LACE’ dengan huruf besar, menggunakan akaPosse ukuran 110pt.

Gunakan efek untuk membungkus ‘LACE’ (gunakan lagi Effect > Warp > Rise), atur Bend sampai 57%. Jangan klik OK dulu... Kali ini, kita akan mengatur pembungkus yang lain, yaitu Horizontal Disortation. Ini membuat huruf terlihat lebih besar jika anda gerakan dari kiri kekanan. Atur itu sampai 25%.

warping and distorting place text

Langkah 7

Ketik ‘no’ dengan huruf kecil, menggunakan Smythe pada ukuran 75 pt.

Kali ini, dibanding membungkus kata, kita akan memutarkan dan menguntingnya, dimana hal iniakan membuat tulisan terlihat seolah dimiringkan.

Pertama, putar ‘no’ berlawanan jarum jam jadi seolah-olah berada dikemiringan yang sama dengan LACE. Lalu, pilih Object > Transform > Shear, dan ketik 20 pada kotak Shear Angle,

rotating and shearing no text

Posisi ‘no’ seolah berada ditengah jarak putih yang tersisa diatas lingkaran. Kita akan menambahkan hiasan disekitarnya nanti.

Langkah 8

Sekarang menuju ‘There’s’ pada sudut bagian atas halaman, menggunakan efek pengguntingan dan pembungkus lebih banyak, jadi itu akan terbungkus disekitar bentuk lingkaran.

Ketik huruf kapital ‘T’ menggunakan Fletcher Gothic dengan ukuran 205 pt.

Bukankah ‘T’ mempunyai sedikit bentuk pada akhirannya? Kita ingin bentukan itu terlihat sama dengan bentuk lingkaran, jadi kita akan mengguntingnya, seperti yang kita lakukan pada ‘no’.

Pertama, putar ‘T’ searah jarum jam, jadi bentuk pada bagian bawah sejajar dengan kemiringan yang ada pada lingkaran. Sekarang, pilih  Object > Transform > Shear dan ketik 30 di dalam Shear Angle. Ini akan meluruskan ‘T’ dibelakang, sambil tetap memakai garis lengkung pada bagian bawah.

rotating and shearing letter T

Langkah 9

Pindahkan ‘T’ pada tempat dimana garis lengkung bawah cocok dengan lingkaran. Putar sedikit atau atur kepanjangannya untuk menyesuaikan, jika anda menyukainya.

Ketik ‘here’s’ menggunakan Smythe dengan ukuran 110 pt. Putar berlawanan arah jarum jam untuk mengisi jarak antara ‘T’ dengan lingkaran.

typesetting theres

Langkah 10

Pilih Object > Transform > Shear dan ketik 15 di dalam kotak Shear Angle.

shearing theres text

Langkah 11

Pilih Effect > Warp > Arc Lower dan ubah Bend sampai -30%.

warping theres text

Dan ini yang akan kita dapatkan:

typsetting results

4. Menambahkan Warna

Sekarang, kita berada pada bagian dimana kita akan memberikan sentuhan akhir untuk desain ini--pertama, warna. Palet warna kita terinspirasi oleh poster klasik pada tahun 1894 oleh pelukis Jules Chéret. Saya pikir ini akan cocok untuk proyek kali ini, dengan kombinasi warna merah (Kita harus memiliki ‘merah delima’ untuk selopnya, bukan?) dan warna diam yang membantunya terlihat unik. Anda juga dapat mencoba warna lain yang sesuai, jika anda menginginkan.

Jika anda ingin mencoba yang satu ini, dibawah ini anda akan menemukan kode untuk setiap warna yang bisa digunakan kedalam jendela Illustrator Color Picker (cukup memilih objek yang anda ingin warnai; klik dua kali pada kotak Fill dibawah toolbar anda; dan pada jendela baru yang terbuka, ketik kode kedalam kotak yang memiliki tanda nomor didepannya). Setelah ditambahkan, anda dapat menarik warna dari kotak Fill kedalam Swatches anda untuk akses yang lebih mudah.

vintage color palette

Langkah 1

Pertama, pilih semua yang anda miliki dihalaman sejauh ini (Command/Control-A) dan pilih Type > Creare Outlines. Dengan yang telah dipilih, pilih Object > Expand Appearance.

Karena lingkarannya, ‘H’ dan ‘P’ memiliki gaya masing-masing, jadi kita harus bekerja sedikit ekstra untuk perubahan warna. Pilih ketiganya (anda dapat menekan Shift, sambil anda memilih objek lebih dari satu) dan lalu ke Object > Expand. Pastikan bahwa kotak Fill dan Stroke sudah dicentang, klik OK.

expanding text

Langkah 2

Sekarang pergi ke Window > Pathfinder, dan jendelanya akan keluar, pilih Unite (tombol pertama pada barisan diatas). Ini akan menempatkan tiga item tersebut secara grup, yang tidak diingikna, jadi klik Object > Ungroup.

applying pathfinder tool to text

Langkah 3

Pertama, kita akan menambahkan latar belakang yang netral. Buat lapisan baru dan geser itu baik keatas/bawah layer. Pada lapisan inii, gunakan Rectangle Tool, gambar persegi dengan ukuran yang sama pada halaman menggunakan warna kecoklatan, #EFEAD9. Kunci layer-nya jadi tidak bergeser (dalam panel Layers, klik kotak kosong yang berada disebelah ikon mata).

Sekarang, pilih selopnya dan klik Object > Arrange > Bring to Front. Lalu ubah warnanya menjadi merah, #E8412F.

Pilih ‘HOME’, ‘PLACE’, dan ‘There’s’. Ubah warnanya menjadi navy blue, #213552.

Pilih lingkaran, ‘no’, dan ‘like’. Ubah warnanya menjadi lavender-gray shade, #8A6E78.

5. Tambahkan Sentuhan Akhir: Tekstur dan Hiasan Lainnya

Kita akan menambahkan beberapa tipe yang berbeda untuk memberikan desain kita kesan yang klasik, bertinta, terlihat seperti hasil cetak.

Langkah 1

Alat Illustrator Roughen adalah salah satu favorit saya. Anda dapat menggunakannya untuk desain objek dan tulisan anda yang lebih kesat disekitar tepi--dari halus menjadi dramatis. Mari kita coba:

Pilih apa saja yang ada dihalaman. Klik Effect > Distort & Transform > Roughen. Mainkan pengaturan yang ada sampai anda mendapatkan kekesatan yang telah dibuat. Setelah mengklik OK, jika anda ingin pengaturan yang berbeda, cukup atur ulang dengan menuju Window > Appearance dan klik Roughen, yang akan terbuka ulang di jendela. Anda dapat melihat pengaturan yang saya pilih seperti screenshot dibawah:

roughening edges

Langkah 2

Anda mungkin menyadari bahwa saya menambahkan beberapa elemen dekorasi dalam berkas yang sama ditempat anda mendapatkan ilustrasi selop merah delima. Sekarang kita akan menggunakannya. Tempatkan mereka diposisi bawah ini; mereka sudah berada di ukuran kanan dari rancangan, jadi anda hanya perlu menyalin serta menyunting saja. Ganti warnanya menjadi lavender-abu/ #8A6E78

adding embellishments

Jika anda ingin menggambar hiasan anda sendiri, dibandingkan hanya mengisi tempat yang kosong, lakukanlah!

Langkah 3

Jika anda belum siap, unduh vector texture pack gratis ini. Didalam, akan ada tiga berkas Adobe Illustrator (Al). Kita akan menggunakan yang bernama 'tekstur 1' dan 'tekstur 2'.

Buka layar baru dan tempatkan salah satu tekstur (File > Place dan temukan berkasnya dalam komputer anda). Sebuah jendela akan muncul dalam menampakan teksturnya; klik OK.

Teksturnya akan menjadi warna hitam. Klik tombol Edit Contents yang akan dipilih untuk tekstur satuan. Ganti warnanya menjadi kecoklatan/ #EFEAD9.

editing inner texture

Langkah 4

Sekarang putar tekstur menjadi 90 derajat (Object > Transform > Rotate; ketik 90 dan klik Enter / Return.) Teksturnya akan sama dengan ukuran berkas kita, jadi tinggal dibuat ke tengah halaman saja.

Ulang proses yang sama untuk tekstur yang kedua. Ketika anda selesai, kunci lapisan yang suahd memiliki tekstur. Anda akan memiliki hasil yang baik seperti ini:

inner texture

Langkah 5

Sekarang, kita akan menambahkan beberapa struktur dibelakang teks yang berat, tempatkan inner stroke di dalam 'PLACE' dan 'HOME' untuk sentuhan tone keburaman.

Pilih 'PLACE' dan 'HOME' lalu salin dengan (Command/Control-C). Tempel di layer baru menggunakan Edit > Paste in Front (Command/Control-F). Dengan cepat, itu akan segera terlihat bahwa anda menutupi teksturnya.

Dengan kata yang sama, klik Swap Fill and Stroke panah (Shift-X). 

swapping fill and stroke

Langkah 6

Buka panel Stroke (Window > Stroke atau Command/Control-F10). Dibawah pilihan Align Stroke, klik tombol yang berada ditengah, Align Stroke to Inside. Atur ketinggian gaya sampai anda puas dengan hasilnya, saya suka 7 pt.

applying inner stroke

Langkah 7

Sekarang kita akan membuat ulang efek teks yang keluar garis sebagaimana yang kita lihat pada gambar inspirasi pertama kita (Lion Coffee). Lihat bagaimana kerennya kombinasi antara jarak negatif dan bayangan yang berada di huruf utama 'Lion'? Itu efek setelahnya.

Buat layer baru, tarik kebawah untuk menjadi layer kedua anda (atas kanan dengan latar belakang kecoklatan).

Salin 'HOME' dan Paste in Back (Command/Control-B) pada layer baru anda. Ganti warnanya menjadi lavender-abu / #8A6E78 dan gunakan anak panah untuk menggesernya kebawah dan ke kanan kata utama, jadi itu akan terlihat seperti bayangan.

applying offset text effect

Salin bayangan ini dan Paste in Front pada layer yang sama. Ganti warna menjadi kecoklatan / #EFEAD9. Kali ini, geser keatas ( dengan warna navy blue 'HOME') dan geser keatas dengan anak panah anda.

offset text effect

Langkah 8

Kita hampir selesai! Sentuhan akhir untuk desain kita kali ini agar telihat klasik yang dengan tekstur kertas yang tua. Ilustrator pasti memiliki beberapa pilihan yang sama seperti mode mencampur Photoshop, jadi kita tidak perlu mengganti program desain.

Jika anda belum siap, unduh paper texture ini. Tempatkan didalam lapisan yang baru (pastikan untuk lapisan ini yang paling atas) dan ukurannya untuk menutup seluruh halaman.

Dengan tekstur yang sudah dipilih, buka panel Transparency (Window > Transparency). Pilih Soft Light dari menu dibawah, dan atur ketembusan cahaya mencapai 100%.

applying paper texture

Salin tekstur kertas, salin dan tempel itu diatas yang telah anda selesaikan. Untuk kali ini, ganti pengaturan transparency menjadi Darken ke 25% lebih transparan.

Dan ini dia! (Catatan: Anda mungkin menyadari bahwa saya mengganti 'There's' dari biru menjadi merah-- detik terakhir, saya memutuskan bahwa hal itu akan menyeimbangi selop merah delima. Bebas saja, atau anda pun bisa tetap menggunakan warna biru; sebagai seniman atau desainer, itu hak kita!)

finished project

Hentakan Sepatu Anda Secara Bersama

Saya harap tutorial ini membantu anda untuk mempelajari beberapa teknik dan trik yang akan berguna untuk desain dan proyek ilustrasi anda nantinya. Adobe Illustrator telah dilengkapi dengan peralatan yang dapat anda gunakan untuk mengatur tipografi anda, seperti efek Warp dan Roughen yang kita gunakan untuk proyek, dan bereksperimen dapat menghasilkan hasil yang baik. Bagikan pengalaman anda atau tanyakan pertanyaan di kolom komen dibawah ini! Selamat mendesain!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.