Membuat Efek Letterpress Dengan Mudah di Photoshop

Ada 20 Komentar Seru

Oleh: Richard Fang

29 October 2009

efek_letterpress

Efek Letterpress merupakan efek yang sangat populer sekali di dunia desain website, kita sering melihat nya di gunakan sebagai pemanis text pada tombol, sampai kepada headline dengan font besar menggunakan efek ini juga. Pada tutorial kali ini kita akan belajar menghasilkan efek letterpress dengan sangat mudah di Photoshop.

Efek ini terinspirasi dari teknik cetak yang bernama sama, yaitu Letterpress. Efek ini merupakan kebalikan dari emboss, kalau emboss itu huruf menjadi timbul, sebaliknya efek Letterpress akan memberikan efek seperti ‘masuk’ ke dalam, ya sesuai namanya seperti di “press”.

Kita bisa dengan sangat mudah membuatnya di Photoshop, bagi kalian yang sering mendesain website pasti sering menggunakan teknik ini (termasuk saya juga) untuk memberikan detil yang tidak terlalu menonjol tetapi kalau tidak ada rasanya akan berbeda (terlalu plain). Ok, langsung saja, bagi yang belum pernah mencoba, pasti ketagihan akan efek ini :)

Langkah 1

Buka dokumen baru di Photoshop berukuran 640 x 480 pixel seperti gambar di bawah ini.

Efek_Letterpress_langkah1

Langkah 2

Beri warna merah maroon pada background dengan menggunakan Paint Bucket Tool (G). Setelah itu berikan efek cahaya dengan menggunakan Filter > Render > Lightning Effects , dan atur setting Lightning Effects nya sesuai yang kamu mau. Untuk kali ini, saya membuat seolah-olah ada cahaya dari atas.

Efek_Letterpress_langkah2

Efek_Letterpress_langkah3

Langkah 3

Ketiklah kata/text yang kamu inginkan, yang perlu di perhatikan adalah efek Letterpress ini akan terlihat bagus bila hurufnya tebal dan besar, namun tidak menutup kemungkinan huruf yang tipis juga akan menghasilkan efek yang bagus pula.

Efek_Letterpress_langkah4

Langkah 4

Ini kuncinya, kita akan memberikan efek Letterpress pada text yang sudah kita ketik. Untuk menghasilkan efek ini, di perlukan 3 jenis layer Style, yaitu, Drop Shadow, Inner Shadow, dan Gradient Overlay. Dobel klik layer text kamu dan mulailah memberikan Layer Style dengan setting seperti 3 gambar berikut.

Efek_Letterpress_langkah5

Efek_Letterpress_langkah6

Efek_Letterpress_langkah7

Setelah semua Layer Style kamu berikan, maka kamu akan mendapatkan hasil akhir text kamu seperti berikut ini.

Efek_Letterpress_langkah8

Kita sudah selesai! Mudah bukan? :D kamu bisa mencobanya dengan elemen selain huruf, tentu di sesuaikan dengan kebutuhan desain kamu sendiri. Selain untuk desain website, kita juga bisa menggunakan teknik ini misalnya pada desain kartunama, dan kebutuhan desain cetak yang lain nya.

Hasil Akhir

Efek_Letterpress_langkah9

Silakan unduh dokumen hasil akhir di atas (475 Kb) supaya kamu bisa lebih jelas membedah teknik tersebut.

Catatan :
- Warna Background harus lebih terang daripada warna text.
- Jangan terlalu jelas memberikan efek Drop Shadow (perhatikan Opacity) , karena akan memberikan kesan tidak riil.

Tautan Terkait :
Contoh Penerapan Efek Letterpress di Desain Website

Bagi yang belum bergabung di Grup Flickr Jurus Grafis, mari bergabung! :) atau temui Jurus Grafis di Facebook Page.

Efek Letterpress sangat Mudah (471)

Tentang Penulis

/ Richard Fang

Menikmati proses rancang website, khusus nya dari sisi tampilan antar muka dan penggunaan. Tidak bisa hidup tanpa Gmail, Google Reader dan Twitter. Sering menghabiskan waktu mengarungi samudra informasi.
Share to Facebook
Tweet This!
Share

Ada 20 Komentar Seru Tentang Posting Ini

  1. 29 October 2009
    fajarfaqih bilang,

    great tutorial fang !!
    makasih juga buat file .psd nya. Bisa nyimpen stylenya doang.. hehehe.
    Mau tanya bos, kalo hasil kedua akhir sama yang akhir berasa agak beda bos.. apanya ya? apa ada sentuhan lain gitu?

    Reply
    • 29 October 2009
      fajarfaqih bilang,

      oia, mau tanya lagi, kalo di illustrator ada caranya nggak ? soalnya agak susah tuh kalo di illus bikin Letterpress effect tuh.. :(

      Reply
  2. 29 October 2009
    Japestinho bilang,

    Done with succed Mr. Fang :D
    Thanks buat tips menariknya. Udah sekian lama nemu tuts gini baru nyoba dalam bahasa Indonesia hehe :D

    Reply
    • 29 October 2009
      Richard Fang bilang,

      sama2 bro :D senang klo pada bisa :)

      @fajarfaqih _ maksudnya, hasil akhirnya beda ya? iya karena gue tambahin efek cahaya dikit, dan warna text di terangin dikit :) bisa di cek di psd nya..

      untuk efek letterpress di Illustrator prinsipnya sama aja, maen dropshadow, dan innershadow, cuma agak ribet sedikit , ada nih linknya, Efek Letterpress di Illustrator

      Reply
      • 30 October 2009
        fajarfaqih bilang,

        hmm… pantesan.. :)

        thanks linknya fang !! (iya agak ribet nih, 3 kali).
        btw maen2 bro ke blog gw.. hehehe

        Reply
  3. 29 October 2009
    Japestinho bilang,

    Boleh nambahin link example nya nih Fang? Siapa tau ada yang kepengen tau contoh nyatanya di dunia web design :D
    http://line25.com/articles/web-design-trend-showcase-letterpress-text-effect

    Reply
  4. 30 October 2009
    -GoenRock- bilang,

    Adudududuh… Saya pikir tutorialnya bakal pakai font yang sama dengan yg dipakai di judul postingan dan header blog hihihihi… *penasaran* Nice tutorial mas Bro :)

    Reply
    • 30 October 2009
      Richard Fang bilang,

      mau pakai font apa aja juga teknik nya sama Gun hehehe malah yg untuk header image posting ini, hanya copy paste layer style aja dari yang tutorial hehehe

      Reply
  5. 31 October 2009
    Bang Aswi bilang,

    wah, mantep nih tutorialnya. Terima kasih ya dan salam kenal….

    Reply
  6. 31 October 2009
    zam.web.id bilang,

    ternyata pakai inner shadow saja tidak cukup,
    pakai teknik di atas, jadi lebih real :)
    thanks richard

    Reply
  7. 31 October 2009
    Agus bilang,

    dah pake xixi

    Reply
  8. 2 November 2009
    FIK bilang,

    ahahah dah gw coba2 di psd, tetep hasilnya ga sesuai..
    lebih enak pake Ai hahahah.

    Reply
    • 4 November 2009
      Richard Fang bilang,

      thanks guys :)

      @ FIK _ wah klo di AI malah lebih susah klo gue hahaha

      Reply
  9. 19 November 2009
    Ricco bilang,

    Itu pakai font apa yaa??

    Reply
  10. 19 November 2009
    Ricco bilang,

    yg di gambar plg pertama*

    Reply
  11. 12 April 2010
    Redesain Bloggingly April 2010 bilang,

    [...] gradasi dan efek inset: Membuat Efek Letterpress Dengan Mudah di Photoshop (Jurus [...]

    Reply
  12. 22 April 2010
    Can Masagi bilang,

    Oom Richard.. kalau di adaptasi buat GIMP bisa nggak?

    Reply
    • 23 April 2010
      Richard Fang bilang,

      wah kurang tau bro hehehe, tapi logika nya sih harusnya sama, pake dropshadow gitu

      Reply

Mari Berkomentar!

*informasi yang di perlukan

Space for Sale!
Advertise Here
Mojo Themes
The Shadow Puppet
Thedoart

Posting Populer

Mari Berbagi Informasi

    • Mewarnai gambar hasil Scan di Photoshop

      sebenarnya bagaimana cara mewarnai gambar manual kita dengan photoshop, caranya sangat mudah ikuti tutirialnya disini

    • 41 Inspirasi Foto Efek Glowing

      Tentunya Anda sudah pernah menemui bermacam-macam Foto Efek yang sangat bagus, disini saya suguhkan 41 Inspirasi Foto Efek Glowing yang mungkin bisa membantu Anda untuk menemukan ide untuk mengedit foto Anda.

    • Gestalt For Life!

      de Gestalt berakar pada teori oleh Johann Wolfgang von Goethe, Immanuel Kant, dan Ernst Mach. Max Wertheimer kontribusi yang unik adalah untuk menekankan bahwa “Gestalt” adalah perseptual primer, menentukan bagian-bagian yang tenang, dan bukan sebagai kualitas sekunder yang muncul dari bagian…

    • June’s Best Resources for CSS3

      Here are the best CSS3 coding techniques and tutorials of June 2010, 43 fresh resources to help keeping up with new technologies.

    • Tutorial CSS Dalam Bahasa Indonesia Part 2

      Kelanjutan dari Tutorial CSS dalam bahasa Indonesia part 1

    • Typographic Potrait Sederhana dengan Illustrator

      Memainkan komposisi tipografi adalah salah satu pilihan unik yang bisa diterapkan untuk membuat sebuah karya seni visual. Banyak sekali karya seni visual yang menggunakan permainan tipografi bertebaran di dunia maya. Seperti kali ini, kita akan belajar membuat sebuah karya potrait siluet wajah de…

    • Kutipan-kutipan Inspiratif tentang Desain Grafis

      Kutipan-kutipan menarik selalu saja dapat menjadi inspirasi para desainer untuk memahami lebih jauh tentang desain grafis. Kutipan juga menjadi motivator yang mendorong semangat desainer untuk terus belajar mengasah kemampuan. Berikut ini adalah kutipan-kutipan inspiratif seputar desain grafis ya…

    • 30 Logo Kreatif yang Menggunakan Wanita sebagai Si…

      Sifat dan karakter feminim dari seorang wanita sering kali diibaratkan dengan berbagai simbol seperti bunga dan sebagainya. Hal ini sudah lazim digunakan sebagai simbol dari sebuah logo yang ingin membangun karakter feminis melalui bentuk grafis yang ditampilkan. Namun bagaimana jika wanita itu s…

    • 15 Great Corporate Identity Designs

      In creating a corporate identity or branding identity design (some also call it visual identity), consistency is one of the most important aspect that designers should consider

    • Efek Goresan Pencil dengan Photoshop

      Tutorial Photoshop membuat Efek Goresan Pencil.

Galeri Pembaca

Mau Berlangganan Jurus Grafis Melalui Email? Ya! tentu saja!