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

Cara Membuat Hand-Lettered Housewarming Poster di Adobe Photoshop

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Home Sweet Home.
How to Draw a House Step by Step
Best of the Design Web: April 2017

Indonesian (Bahasa Indonesia) translation by Adya Rosyada Yonas (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial ini, kita akan membuat sebuah poster tulisan tangan yang akan membuat rumah kita nyaman dan menjadikan suasana lebih hangat bagi interior apapun. Kita akan menggunakan bermacam-macam drawing tools dan fungsi dari Adobe Photoshop untuk menciptakan huruf yang indah dari goresan dan mendigitalisasi tulisan tangan kita, mengubahnya dari bentuk kertas ke dalam Photoshop dan mengeditnya agar sesuai dengan poster kita.

Pada akhir tutorial ini, anda akan mempelajari beberapa tip dan trik yang akan menginspirasi anda untuk membuat lebih banyak ilustrasi tulisan, seperti poster tulisan ini. Dan jika anda bertanya-tanya bagaimana poster anda akan terlihat saat dicetak dan ditempatkan dalam bingkai, anda dapat mencoba beberapa frame poster ini untuk melihat bagaimana tampilannya dalam kehidupan nyata!

Mari kita mulai!

1. Cara Membuat Tulisan dengan Pen Tool

Langkah 1

Semuanya dimulai dari goresan. Pertama-tama, kita harus mempunyai ide mengenai apa yang akan kita buat. Karena kita berencana membuat housewarming poster, saya memutuskan untuk memilih sebuah kutipan bagus untuk suasana yang nyaman. Saya telah membuat beberapa sketsa thumbnail kasar, menulis "Home is where your heart is" dan menekankan pada kata "home".

Pada sketsa pertama, saya mencoba memasukkan kutipan di dalam bentuk rumah, namun dalam kasus ini, menurut saya gambar itu tampak agak sempit dan sibuk dengan detail yang tidak dibutuhkan, sedangkan bagian utama dari komposisi - hurufnya sendiri - adalah Terlalu monoton. Selain itu, hal tersebut tidak berinteraksi dengan kata "heart", yang merupakan unsur penting dan bermakna dari keseluruhan ungkapan, menyeimbangkan dengan kata "home".

Berpikir seperti ini, saya membuat sketsa kasar lainnya (bahkan lebih kasar daripada yang pertama, seperti yang mungkin anda perhatikan), di mana saya dengan jelas menekankan pada kedua kata tersebut. Saya juga menambahkan sentuhan simbolisme, menggambarkan atap yang bergaya di atas kata "home" dan menempatkan kata "heart" ke dalam bentuk hati. Sekarang semuanya terlihat lebih seimbang dan bermakna. Mari buat poster dari sketsa kedua!

thumbnail sketches

Jika anda ingin menggunakan sketsa yang sama dengan gambar referensi, anda bisa klik kanan mouse pada screenshot di bawah ini dan Simpan ke komputer anda.

home lettering sketch

Langkah 2

Mari buat sebuah dokumen baru 3000 x 3000 px, 300 ppi dan tempatkan sketsa anda di sana.

Gunakan Eyedropper Tool (I) untuk memilih warna biru gelap dari sketsa dan terapkan pada Background Layer menggunakan Paint Bucket Tool (G).

Turunkan Opacity dari Sketsa menjadi 25%, jadikan semi transparan jika terlalu banyak mengganggu anda.

place sketch into photoshop

Langkah 3

Sekarang mari kita gunakan Pen Tool (P) dan mulai menguraikan huruf dari kata "home". Gunakan polyline untuk menggambar batang kiri huruf "H". Tutup jalan dan beralih ke batang sebelah kanan, buatlah lebih tipis.

use the pen tool to trace the letter

Merasa goyah dan tidak percaya diri dengan Pen Tool? Jangan khawatir, anda hanya perlu sedikit latihan lagi! Tool ini sebenarnya tidak begitu menakutkan dan sulit untuk digunakan seperti yang terlihat! Lihat petunjuk yang mudah diikuti tentang Pen Tool ini dan lihat sendiri!

Langkah 4

Buatlah bentuk persegi panjang untuk palangnya dan mari persatukan semua unsur huruf kita! Pilihlah semuanya dengan menggunakan Direct Selection Tool (A) dan menuju ke menu Path Operations di panel kontrol di bagian atas. Dari sini, pilih Combine Shape dan terapkan dengan menekan Merge Shape Components pada bagian bawah menu. Di sanalah kita memilikinya! Sekarang semua bagian huruf sudah tergabung!

 Combine Shapes in Path Operations

Langkah 5

Mari kita lanjutkan dan telusuri huruf "O". Ini akan terdiri dari beberapa elemen, jadi mari kita mulai dengan bagian utamanya. Cobalah untuk membuat garis halus dan melengkung dengan menyeret dasar pegangan setiap kali anda membuat sebuah titik. Buatlah sebuah oval dan satu lagi untuk counter  "O".

Pilih kedua oval dengan menggunakan Direct Selection Tool (A) dan sekarang biarkan Exclude Overlapping Shapes pada menu Path Operations. Klik Merge Shape Component untuk memotong lingkaran dalam.

Exclude Overlapping Shapes in the Path Operations menu

Langkah 6

Kita dapat mengisi huruf kita dengan beberapa warna untuk melihat apakah Path Operation bekerja. Buka panel Paths (Window > Path) dan klik Fill path with foreground color di bagian bawah panel, aplikasikan Foreground Color yang sudah diatur putih pada panel Color kita.

Fill path with foreground color in the Paths panel

Langkah 7

Mari kita Undo (Control-Alt-Z) tindakan kita sebelumnya untuk menghapus isinya dan lanjutkan merancang huruf.

Gunakan Pen Tool (P) untuk membentuk bekas huruf "O", dengan menggunakan sketsa sebagai dasar dan telusuri di atasnya. Mulai dari bagian kiri atas huruf "O" dan secara bertahap bergerak ke kanan, buatlah kurva berbentuk pisang.

add a swash to the letter

Langkah 8

Ingat bahwa anda dapat mengubah arah jalan tanpa melepaskan tombol mouse (atau pena tablet grafis anda) dan tanpa berganti tool. Cukup klik dan seret untuk membuat handle dari anchor point yang tampak. Kemudian, tahan tombol mouse, klik Alt, putar dan gerakkan handlenya. Tutup jalannya, hubungkan dengan titik dasar pertama dari sisi.

Kita selalu dapat menggunakan Direct Selection Tool (A) untuk memindahkan anchor points, membuat garis tampak halus.

add a swash to the letter 2

Langkah 9

Pilih kedua elemen dari "O" dan gunakan fungsi Combine Shapes dan Merge Shape Components untuk menyatukan bentuk.

use the Combine Shapes and Merge Shape Components functions

Langkah 10

Mari kita lanjutkan dan gunakan Pen Tool (P) untuk menggambar huruf "M" dengan polyline.

use the Pen Tool to draw out the letter M

Langkah 11

Lanjut ke huruf "E"; yang satu ini akan jadi lebih kompleks dari pada huruf-huruf sebelumnya. Mulailah membuat bentuk bulat panjang dengan Pen Tool (P) sama dengan yang kita lakukan dengan huruf "O". Gunakan garis lurus untuk membentuk huruf terakhir, dan kemudian terus membentuk jalur melengkung untuk bagian dalam "E"

Continue to the letter E

Langkah 12

Secara perlahan bergeraklah ke atas. Tahan Alt untuk mengubah arah anchor handle untuk membuat sudut di palang huruf "E". Selesaikan siluetnya, tutup jalannya.

change the direction of the anchor handle to make a crossbar

Langkah 13

Tambahkan bentuk drop-like untuk bagian dalam (the counter) dari huruf tersebut. Sekarang kita dapat memilih kedua elemen dan menerapkan Exclude Overlapping Shapes (jangan lupa untuk Merge Shape Components setelah memilih fungsi yang diinginkan dalam Path Operations).

Kita bisa memeriksa huruf kita pada panel Paths dengan mengisinya dengan warna putih.

Add a drop-like shape for counter of the letter

Langkah 14

Sekarang mari kita tambahkan swash ke sisi berlawanan dari palang, menggunakan Pen Tool (P) untuk membentuk bentuk melengkung.

add a swash to the opposite side of the crossbar

Langkah 15

Pilih kedua bagian dan Combine Shape di Path Operations. Klik Merge Shape Components untuk menerapkan efeknya.

Combine Shapes in the Path Operations

Langkah 16

Bagus! Semua huruf dari kata "home" sudah siap. Mari kita lihat mereka dan gunakan panel Paths untuk mengisi huruf dengan warna putih.

Sekarang mari kita membuat huruf terlihat lebih menarik dan beragam dengan menerapkan beberapa efek pada isi.

use the Paths panel to fill the letters

2. Cara Menambahkan Bayangan dan Gradien

Langkah 1

Mari menambahkan beberapa volume ke huruf kita menggunakan gradien. Ambil Gradient Tool (G) (anda dapat menemukannya di menu drop-down yang sama dengan Paint Bucket Tool).

Pertama-tama, menuju ke panel Layers dan Lock transparent pixels dari layer "home" kita sehingga semua yang kita lakukan hanya diterapkan pada huruf kita, tanpa mempengaruhi area di sekitarnya.

Pergi ke panel Color dan atur warna biru untuk foreground color dan warna putih untuk background color.

Kemudian gunakan Gradient Tool (G) dan seret dari bawah ke atas kata "home", terapkan gradien linier vertikal dari biru menjadi putih. Anda dapat memeriksa pengaturan gradien di panel kontrol pada bagian atas, pilih jenis gradien yang diinginkan.

apply linear gradient

Langkah 2

Mari buat bayangan pada background dengan huruf untuk membuat kata "home" sedikit lebih menonjol. Buatlah Layer Baru  tepat di bawah layer "home". Sekarang, simpan layer baru yang dipilih, tahan tombol Control dan klik layer "home". Dengan cara ini kita membuat seleksi "semut berbaris" di sekitar huruf.

Atur warna foreground ke warna biru tua di panel Color, pilih Paint Bucket Tool (G) dan klik untuk mengisi, buat salinan biru gelap dari kata "home" pada layer baru. Sekarang kita bisa menggerakkan layer bawah beberapa piksel lebih rendah dan ke kanan, membuat bayangan biru tua terlihat.

create a shadow from selection

Langkah 3

Sekarang mari kita lihat bagaimana kita bisa menambahkan bayangan lembut pada huruf-hurufnya, membuatnya terlihat lebih tiga dimensi. Kita akan menggunakan Pen Tool (P) atau Freeform Pen Tool untuk membuat bentuknya. Mari kita perbesar (Control- +) pada huruf "E" dan buat jalur yang menghubungkan sisinya dengan palangnya, seperti yang ditunjukkan pada gambar di bawah ini.

Lanjutkan untuk membangun jalan, buat bentuk persegi panjang. Tidak harus sempurna-hanya pastikan itu lebih lebar dari pada hurufnya.

use the Pen Tool to connect the swash with the crossbar

Langkah 4

Pilih layer "home" di panel Layers, tahan Alt, dan klik tombol Create New Layer. Pada jendela pop-up New Layer, centang kotak Use Previous Layer to Create Clipping Mask untuk membuat layer terhubung. Anda akan melihat panah kecil di sebelah layer baru kita, menunjukkan bahwa apapun yang kita gambar akan muncul hanya di dalam batas-batas objek pada layer utama.

Mari kita lihat bagaimana cara kerjanya. Klik kanan mouse dan pilihlah Make Selection. Gunakan Gradient Tool untuk menerapkan gradien linear diagonal dari biru menjadi putih.

Make Selection and apply gradient

Langkah 5

Alihkan Blending Mode dari layer yang terhubung ke Multiply, buat bagian putih dari gradien transparan. Dengan cara ini kita telah menciptakan bayangan lembut, memisahkan palang (dan sisinya) dari tubuh huruf "E".

Tambahkan bayangan serupa di atas palang, kali ini ubah arah gradien menjadi kebalikannya.

Switch the Blending Mode to Multiply

Langkah 6

Gunakan teknik yang sama untuk menambahkan bayangan pada huruf "O", pisahkan ayunannya yang melengkung dari bentuk mangkuk huruf itu.

Sekarang seluruh kata terlihat tiga dimensi dan sudah selesai! Mari beralih ke elemen komposisi berikutnya!

add the shadow to the letter O

3. Cara Menambahkan Bentuk Kustom dan Mendigitalkan Huruf Anda

Langkah 1

Apa yang akan kita lakukan selanjutnya adalah menambahkan bentuk hati. Untungnya, kita tidak perlu menggambar secara manual, karena kita bisa memakai Custom Shape Tool, memilih bentuk hati dari daftar Shapes di panel kontrol di atas, dan membuat hati dengan ukuran yang diinginkan, menggunakan sketsa kita sebagai referensi.

create a heart with custom shape tool

Langkah 2

Pilih Direct Selection Tool (A) dan pindahkan anchor handles, buat hati lebih menonjol dan membulat di bagian bawah. Jika Anda tidak dapat melihat handlenya, gunakan Convert Point Tool untuk mengeklik dan seret handle dari titik anchor.

Kita dapat beralih antara FIll dan Stroke (atau menerapkan keduanya, atau atur keduanya ke none) dari panel kontrol di atas, pilih warna yang diinginkan dari panel drop-down.

Saya mengatur Warna Fill ke None untuk saat ini karena saya perlu melihat huruf-huruf sketsa saya di dalam bentuk hati.

reshape the heart

Langkah 3

Mari beralih ke kata "heart". Untuk tulisan tulisan tangan bergaya skrip seperti itu, sebenarnya saya lebih suka menggunakan pena kuas asli dan kertas. Jika anda selalu ingin mencoba tulisan tangan, ini adalah titik awal yang bagus. Salah satu pena kuas terbaik untuk memulai adalah Tombow Fudenosuke, atau bisa juga pena kuas pilihan anda.

Anda juga bisa melakukannya hanya dengan pena gel biasa atau bahkan pensil, menciptakan apa yang disebut "fake calligraphy", menggambar downstroke yang lebih tebal secara manual dan mengisinya dengan warna. Dalam kasus kita, tidak masalah bagaimana anda mencapai efek tulisan tangan ini asalkan terlihat bagus, karena kita akan men-tweaknya di Photoshop.

Jadi saya hanya menggambar huruf-huruf saya di selembar kertas, memposisikan huruf sedemikian rupa sehingga komposisi itu menyerupai bentuk hati. Kita bisa men-tweak posisi setiap huruf nanti jika tidak sesuai dengan hati kita, jadi jangan khawatir, tapi tetap coba buat terlihat mendekati huruf-huruf yang kita miliki di sketsa referensi kita.

Scan tulisan anda (atau buat foto) dan pindahkan ke Photoshop. Pergilah ke Image> Adjustments> Levels (Control-L) dan dari sini kita perlu meningkatkan keseluruhan kontras dan kecerahan dari layer tulisan kita untuk membuat huruf gelap benar-benar hitam dan warna latar belakang putih, sehingga tekstur kertas hilang.

Untuk melakukan ini, seret slider hitam ke kanan dan slider yang berlawanan (putih) ke kiri, menempatkannya lebih dekat ke slider tengah. Anda akan melihat perbedaannya sekaligus menyesuaikan posisi kedua slider, membuat gambar terlihat tajam dan bersih.

digitise your lettering and use Levels

Langkah 4

Setelah puas dengan tulisan kontras anda, buka Select> Color Range untuk membuka jendela opsi. Dari sini, anda akan memiliki Eyedropper Tool yang dipilih secara default. Gunakan untuk mengarahkan kursor ke kata "heart" dan klik salah satu huruf hitamnya. Tinggalkan slider Fuzziness sebesar 40% atau atur nilainya jika anda merasa tidak semua area hitam terlihat di preview. Klik OK setelah anda siap dan anda akan melihat seleksi "berisan semut" di sekitar huruf. Copy (Control-C) huruf-hurufnya.

use Select Color Range to select black letters

Langkah 5

Sekarang kita dapat melakukan Paste (Control-V) kata "heart" ke dalam poster kita dan tekan Control-T untuk Free Transform untuk mengubah ukuran dan memutar layer, sehingga pas dengan bentuk hati.

Jika beberapa huruf tidak pas dengan bentuk hati, gunakan Lasso Tool (L) untuk menyeleksi huruf (gambarlah hanya disekitarnya), lalu tekan Control-T lagi dan putar / ubah ukuran huruf yang dipilih satu per satu.

Mari kita membuat huruf kita agar terlihat dan cerah. Pilih layer "heart" dan masuk ke Image> Adjustment> Invert, ubah warna huruf dari hitam ke putih.

Paste and Invert the layer

Langkah 6

Mari tambahkan beberapa detail lebih kecil di sekitar huruf. Pilih Brush Tool (B) dan buka panel Brush (Window> Brush) atau tekan tombol mouse sebelah kanan untuk membuka daftar brush dan pilih Hard Round Brush.

Jika anda tidak melihat semua ini di daftar anda, buka menu drop-down dengan mengklik ikon gerigi kecil di pojok kanan atas dan temukan Round Brushes with Size pada daftar. Klik dan ganti atau tambahkan ke daftar brush anda.

open the brush panel or list of brushes

Langkah 7

Anda dapat menemukan pengaturan brush di panel kontrol di bagian atas. Saya menjaga kedua Opacity dan Flow pada 100%, untuk membuat garis tajam dan tebal. Saya menggambar titik dan goresan di sekitar huruf "H", dengan menggunakan tablet grafis.

add minor details

Langkah 8

Lanjutkan menambahkan goresan dan titik di sekitar setiap huruf. Setelah selesai dan puas dengan hasilnya, pilih layer berbentuk hati, klik Custom Shape Tool untuk membuat menu Shape di panel kontrol aktif atas, dan atur warna Fill menjadi merah, isi bagian dalam hati.

fill the heart with red color

Langkah 9

Mari kita berikan tulisan "heart" kita lebih terlihat emas atau metalik dengan menerapkan gradien linier sederhana dari kuning ke putih. Dengan cara ini, dia terlihat lebih tiga dimensi.

apply gradient to the lettering

Langkah 10

Selanjutnya, kita akan menggambar kata "is", yang digunakan dua kali dalam kutipan kita. Jadi anda bisa benar-benar menuliskannya dua kali untuk membuat setiap elemen terlihat unik dan ditulis tangan, atau hanya menduplikat satu yang anda buat.

Saya menggunakan Hard Round Brush dan tablet grafis di isi untuk menggambar huruf kecil "i", dengan menggunakan sketsa sebagai referensi. Seperti yang bisa anda lihat, saya menggambar garis horisontal atas dan bawah di tempat pertama, dan kemudian saya menambahkan dua garis vertikal untuk tepi huruf, menentukan ketebalannya. Dan akhirnya, saya hanya mengisi bagian dalam huruf dengan warna biru muda, hampir putih.

Lalu saya menggunakan teknik yang sama persis untuk huruf "s": Saya menggambar siluetnya dan kemudian saya mengisi bagian dalamnya dengan warna.

write with hard round brush

Langkah 11

Di sini kita bisa melihat bagaimana poster kita terlihat sejauh ini. Saya telah menggunakan salinan layer "is" (Control-J) untuk menambahkannya tepat di bawah hati.

use the copy of the is layer

Langkah 12

Sekarang kita bisa beralih ke elemen komposisi berikutnya dan menambahkan kata "where your" tepat di atas bentuk hati.

Anda bisa bereksperimen dengan Hard Round Brushes atau Calligraphic Brushes dari Adobe Photoshop untuk mendapatkan efek tulisan tangan jika anda memiliki tangan yang kuat dan sebuah tablet grafis. Atau anda bisa mengikuti teknik yang sama seperti yang kita gunakan untuk kata "heart".

Kemudian, mari tuliskan frase "where your" di atas kertas menggunakan pena kuas, lalu scan dan pindahkan ke Photoshop untuk membuatnya bersih dan kontras dengan menggunakan Levels (Control-L). Selanjutnya, gunakan Select> Color Range untuk memilih huruf hitam, Copy (Control-C) mereka dan Paste (Control-V) langsung ke poster. Gunakan Free Transform (Control-T) untuk memutar dan mengubah ukuran kata, membuatnya sesuai dengan bagian atas bentuk hati.

Jangan lupa menuju Image> Adjustment> Invert layer untuk membuat huruf putih.

Seperti yang dapat anda lihat dari gambar di bawah, saya juga mulai menambahkan titik dan goresan merah di sepanjang tepi kiri hati dengan cara yang sama seperti yang kita lakukan untuk kata "heart". Ini memberi tampilan yang rumit dan menyenangkan pada keseluruhan desain poster kita, jadi mari kita berpegang pada itu, menambahkan lebih banyak detail hias semacam ini.

scan and digitize your hand-lettering

Langkah 13

Lanjutkan menambahkan detail dekoratif kecil di sekitar hati, dengan menggunakan Hard Round Brush dengan Opacity dan Flow 100%.

ad minor decorative details around the heart

Langkah 14

Begitu selesai dengan hati, mari beralih ke bagian atas poster kita dan menggambar atap bergaya untuk rumah kita dengan gaya ornamen yang sama. Buat New Layer, atur warna foreground menjadi biru muda, dan ubah ukuran brushnya, buat dasar segitiga atap sedikit lebih tebal dari titik dan goresan di sekitarnya.

Saya menambahkan elemen yang berputar-putar di sisi kanan atap, menggambarkan asap sangat sederhana, hampir abstrak, dari cerobong asap perapian.

Selanjutnya, saya menambahkan beberapa goresan di bawah kata "home", membengkok ke arah yang berlawanan untuk menyeimbangkan atapnya.

draw a stylized roof of our house

Langkah 15

Mari beralih dan membuat Layer Baru untuk elemen dekoratif lain. Di sini saya membuat warna foreground jauh lebih gelap dan menambahkan putaran, goresan, dan titik di sekitar huruf dari kata "home". Anda bisa menuju Image> Adjustment> Invert layer jika goresan terlalu gelap untuk dikerjakan dan kemudian lakukan Invert kembali saat anda selesai dengan keseluruhan kata.

create another set of decorative elements

Langkah 16

Ornamen gelap kita di sini sudah selesai! Mari kita lanjutkan!

dark ornaments are finished

Langkah 17

Kita akan menambahkan beberapa pusaran dan goresan di sekitar hati. Mulailah dengan mengisi sisi kiri gambar dan kemudian pindah ke sisi yang berlawanan, buat hiasan serupa agar komposisi terlihat seimbang.

Selesaikan dengan menambahkan goresan horizontal biru muda di kedua sisi kata "is" di bagian paling bawah poster.

Finish up by adding light-blue horizontal strokes

Home Sweet Home! Housewarming Poster Kita sudah Siap!

Kerja bagus, kawan! Saya berharap tutorial ini akan menginspirasi anda untuk membuat lebih banyak poster tulisan tangan lucu untuk interior nyaman anda atau untuk dicetak. Jangan ragu untuk menggunakan semua tip dan trik yang dijelaskan di artikel ini, dan jangan lupa bagikan hasil anda.

Selamat mendesain!

Our Housewarming Poster is Ready
Advertisement
Advertisement
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.