Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

Membuat Kartu Nama Bertekstur Siap Cetak

Tutorial kali ini akan mengambil proses pembuatan kartu nama terbaru saya. Kartu nama saya mengikuti ciri khas situs ini, sedikit bertekstur. Di tutorial ini, saya akan membahas secara lengkap proses di Photoshop hingga kartu nama siap dicetak.

Preview

Sebelumnya, lihat terlebih dahulu desain kartu nama yang akan kita buat. Perhatikan bahwa kartu nama ini didominasi dengan header DesainDigital. Untuk menjaga konsistensi desain kartu nama dengan desain situs, kita akan menggunakan color scheme dan font yang sama.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Source yang Dibutuhkan

Langkah 1: Mempersiapkan File, Guide, dan Bleed

Kita mulai dengan membuat file baru berukuran tepat sesuai kartu nama standar, 8,5 x 5 cm. Karena akan dicetak, pastikan bahwa kita menggunakan resolusi 300 dpi. Untuk mode warna, gunakan RGB agar proses kerja di Photoshop tetap maksimal.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 2

Aktifkan ruler dengan menekan Ctrl + R. Klik dan geser dari ruler ke semua sisi kanvas untuk membuat guide di sekelilingnya.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 3

Untuk keperluan cetak, kita tidak bisa menggunakan ukuran tepat dengan hasil akhir. Kita perlu menambahkan bleed yaitu area di luar luar kertas. Bleed ini berfungsi mencegah agar tidak muncul garis putih kosong di salah satu sisi hasil desain kita.

Untuk menambah bleed, klik Image > Canvas Size. Aktifkan relative dan isikan 1 cm untuk width dan height. Perintah ini akan memperbesar ukuran kanvas 1 cm ke semua arah atau 0,5 cm ke setiap sisi. Daerah 0,5 cm ini akan menjadi bleed. Pihak percetakan akan memotong hasil cetak kurang lebih tepat pada area guide.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 4: Memberi Sedikit Tekstur

Ambil tekstur grunge dan turunkan opacity layer ke 20%.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 5

Ambil lagi tekstur kain. Simpan di atas tekstur sebelumnya. Ubah blend mode ke Multiply untuk mempertahankan bagian gelapnya.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 6

Tahan Alt lalu klik ikon Add Layer Mask untuk menyembunyikan tekstur. Pilih warna depan putih dan lukis mask dengan brush beropacity rendah. Anda bisa melihat mask yang saya buat di bawah. Selanjutnya turunkan opacity tekstur ke 50% untuk menjaganya tetap minimal.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 7

Sekarang saya akan menambahkan tekstur grid. Kita mulai dengan membuat polanya. Buat file baru dengan ukuran 33 x 33 px, background transparan.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 8

Dengan tool marquee persegi, seleksi 2 pixel di sisi kanan dan 2 pixel di sisi bawah. Isi dengan hitam.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 9

Simpan gambar sebagai pola. Klik Edit > Define Pattern.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 10

Kembali ke kartu nama, buat layer baru. Klik Edit > Fill. Pilih Use: Pattern dan pilih pola grid yang tadi kita buat. Klik OK, Turunkan opacity layer ke 50%.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 11

Mirip dengan Langkah 6, Alt-klik ikon Add Layer Mask. Lukis dengan warna putih dan brush ber-opacity rendah.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 12

Sebelum menambahkan teks, kita perlu membuat jarak antara teks dengan sis luar kartu nama. Ini mencegah agar teks tidak seperti mau keluar dari kertas. Sekali lagi buat guide sekitar 1 cm dari sisi luar kanvas.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 13: Desain Belakang

Kita akan mulai membuat bagian belakang kartu nama yang berisikan informasi nama saya dan sebuah poligon. Buat group layer baru dan beri nama Belakang.  Semua elemen berikutnya akan disimpan dalam group layer ini.

Aktifkan tool pen dan buat shape poligon seperti di bawah. Saya menggunakan warna #302003 karena warna ini memang cukup dominan di header situs.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 14

Tambahkan nama dan kontak yang diinginkan. Untuk nama saya menggunakan font Bauhaus sesuai dengan jenis font dalam teks DESAIN di header. Warna teks yang digunakan diambil dari warna latar. Ini memberi kesan seolah poligon berlubang dan memberinya lebih banyak kontras. Siapa pun yang melihat desain ini, pasti dia akan langsung melihat nama saya baru kemudian detail info di bawahnya.

Untuk kontak saya pilih courier new sesuai dengan teks Digital di header. Warnanya disamakan dengan warna poligon. Tergantung kebutuhan, Anda mungkin ingin menambahkan data lain seperti nomor telepon atau fax.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 15: Desain Depan

Bagian belakang sudah selesai. Kita lanjutkan dengan mendesain bagian depannya. Buat group layer baru dengan nama Depan. Gandakan poligon dari desain belakang lalu geser ke sisi kiri kartu nama. Ini memberi kesan seolah-olah poligon ini menyambung ke bagian belakang kartu nama. Inilah yang kita namakan kesinambungan desain.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 16

Ambil header DesainDigital lalu simpan di tengah-tengah kanvas.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 17: Menyembunyikan Bleed

Saat ini, ukuran kanvas yang kita lihat sudah termasuk dengan bleed. Bleed akan dibuang, jadi ada baiknya kita sedikit bekerja ekstra. Kita akan membuat layer untuk menyembunyikan bleed secara sementara.

Aktifkan tool marquee persegi lalu seleksi bagian kanvas sesuai dengan ukuran akhir. Balikkan seleksi dengan menekan Ctrl + Shift + I. Buat layer baru dan isi dengan putih.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Sekarang kita bisa melihat hasil akhir desain yang akan kita peroleh. Perhatikan bahwa layer ini hanya untuk membantu kita melihat hasil akhir. Layer ini tidak diperlukan dalam proses cetak.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 18: Menyiapkan File untuk Percetakan

Saat ini kita bekerja dengan mode RGB untuk memaksimalkan fungsi Photoshop. Percetakan bekerja dengan mode yang berbeda, CMYK. Klik Image > Mode > CMYK. Kita akan diberi pilihan untuk flatten image, yaitu meratakan semua layer. Klik Don’t Flatten untuk mempertahankan semua informasi layer.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Langkah 19

Percetakan belum tentu memiliki Photoshop. Kewajiban kita untuk menyediakan file yang bisa  mereka kenali. Pilihan terbaik adalah TIFF. Sebelumnya simpan dulu file dalam format PSD untuk backup. Jika ada perubahan, kita bisa kembalike file ini.

Untuk keperluan ini, kita perlu membuat dua file TIFF. Satu untuk desain depan dan satu lagi untuk desain belakang. Untuk menyimpan file TIFF desain depan, aktifkan group layer Depan dan sembunyikan group layer Belakang. Klik File > Save As dan pilih TIFF. Kosongkan pilihan Layer untuk meratakan semua layer dan klik Save. Di pilihan compression pilih LZW. LZW adalah tipe kompresi lossless, yaitu bisa memperkecil ukuran data tanpa mengubah pixel sehingga kualitas gambar tidak berkurang. Jangan pilih JPEG, karena ini adalah kompresi lossy, artinya mengurangi ukuran data dengan mengubah pixel. Tipe kompresi ZIP juga tidak disarankan karena tidak didukung semua software.

Ulangi proses ini untuk membuat file belakang.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak

Hasil Akhir

Setelah selesai, kita tinggal membawa kedua file TIFF ke percetakan. Jangan lupa, jelaskan padanya bahwa kita sudah menyiapkan bleed 0,5 cm di semua sisi. Bayar uang muka. Tunggu beberapa hari dan inilah hasilnya.

Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak
Tutorial Photoshop Membuat Kartu Nama Bertekstur Siap Cetak


Dari tutorial ini saya harap Anda belajar banyak hal, seperti penggunaan bleed dalam proses cetak, mengubah mode warna, dan menambah subtle texture. Semoga Anda menyukainya.

Link Download

Download File PSD

, ,

23 Responses to Membuat Kartu Nama Bertekstur Siap Cetak

  1. ajir 29 July 2010 at 6:01 pm #

    hehe..akhirnya bikin kartu nama jg bg.. :D sip sip!

    tp sedikit saran, keterangan jabatan sama nama website lebih baik dibedakan dari segi ukuran atau bisa dipisah sedikit melalui spasi agar mudah dibedakan dan enak dilihat. :)

    • jeprie 29 July 2010 at 7:58 pm #

      Kurang kontras ya? Saya tidak begitu memperhatikan. Trims.

  2. Joko Sutarto 29 July 2010 at 9:26 pm #

    Sama seperti komentar Mas Ajir. Sepertinya ya, Mas Jeprie. 3 baris kata di bawah nama, yaitu nama jabatan, alamat email dan URL blog sepertinya harus dibedakan agar tak nampak flat dan monoton.

    Komentar saya pada step 18, antara mode RGB di komputer dan mode CMYK pada saat mencetak, saya jadi ingat banyak yang bilang begitu, karena seringkali terjadi perbedaan/ pergeseran warna antara versi cetak dengan warna yang tampil di monitor PC apalagi kalau monitornya jenis LCD (bukan CRT).

    • jeprie 29 July 2010 at 10:41 pm #

      Sepertinya cukup dengan mengubah ukuran teks agar ada kontras. Kalau mengganti font hasilnya akan jelek.

      Langkah 18 itu tujuannya mengubah mode warna file dari RGB ke CMYK. Dalam proses pengerjaan awal lebih baik bekerja dalam mode RGB untuk menyesuaikan dengan cara kerja monitor dan mengoptimalkan Photoshop. Setelah selesai baru kemudian diubah ke CMYK dan dilakukan proses editing tambahan, jika perlu.

      Jangkauan warna CMYK memang tidak seluas RGB. Jadi, memang akan ada distorsi, biasanya warnanya tidak terlalu vivid atau mencolok jika diprint. Hasil cetak selalu cenderung lebih gelap sesuai dengan cara kerja printer, menyatukan warna-warna ke kertas putih, makin banyak warna maka akan makin gelap.

      Sebetulnya ada banyak faktor yang bisa mengubah warna. Misalnya perbedaan brightness monitor kita dan monitor di percetakan, perbedaan setting gamma, bahkan perbedaan cahaya ruangan. Berharap memperoleh hasil yang konsisten dalam faktanya sulit sekali. Untuk projek personal seperti ini, perubahan warna tidak perlu dipermasalahkan.

      Sedikit tips kalau mendesain untuk mencetak, buat desain yang lebih terang.

  3. IkazNarsis 30 July 2010 at 11:23 pm #

    apa bukannya repot bg jep, klo awalnya buat di RGB lalu di set ke CMYK.

    kadang kan designer dah memilih warna yang menarik untuk desainnya tapi tiba-tiba waktu di set ke CMYK malah warna yang di set awal berubah..

    sering x klo cetak logo punya orang seperti logo undp, birunya itu kadang susah dapatnya..

    klo saya biasanya untuk design yang di cetak, langsung awalnya ubah ke CMYK, jadinya waktu desain kita dah tau warnanya gak berubah waktu di cetak.

    kebiasaan saya sih gitu, waktu di percetakan dulu..

    • Jeprie 31 July 2010 at 7:06 am #

      Ada tiga pertimbangan:

      Pertama, Photoshop tidak maksimal di CMYK. Di CMYK, ada beberapa fungsi yang tidak jalan.

      Kedua,monitor menggunakan mode RGB. Jadi, sebetulnya yang dilihat di monitor tetap saja akan beda dengan hasil cetak.

      Ketiga, ketika convert RGB ke CMYK kita kan tidak meratakan informasi layer. Kita masih bisa mengedit warna-warna yang digunakan, misalnya dalam logo itu.

      Jika memang harus sangat akurat, kita bisa mengunakan spot color di logo dengan warna Pantone. Tentunya dengan tambahan biaya karena penggunaan spot color lebih mahal.

  4. ObatAntiRokok 3 August 2010 at 8:17 pm #

    Mantap berbaginya! gak tanggung-tanggung!
    Keep berbagi! ditunggu desain dukungan anti rokoknya :D

    • jeprie 4 August 2010 at 7:25 pm #

      Terima kasih. Situs ini memang sengaja bertujuan untuk berbagi. Saya memang tidak pernah merokok.

  5. jaka zulham 4 August 2010 at 10:19 pm #

    Langsung diaplikasikan kepercetakan ya mas jeprie?
    keren ya tutorialnya
    :)

    tapi font Mohammad Jeprienya gag asik tuh kang..
    (menurut saya),,

    • jeprie 5 August 2010 at 6:41 am #

      Tidak jadi masalah. Sebelum ke percetakan, teksnya diubah ke Shape (klik kanan dan pilih Convert to Shape). Dengan cara ini percetakan tidak perlu memiliki fontnya.

  6. kodoketawa 7 August 2010 at 10:59 pm #

    lama ga mampir makin keren aja euy tutorialna, salute.

    disainya simple, nulis yg seperlunya nujukin kalo mas jepri gak takut rugi karena gak perlu nulis smua keahlian dan jasa. mas jepri emg uda pro. :)

    buat lgi tutorial yg singkat tapi padat ya mas^^

    • jeprie 8 August 2010 at 6:32 am #

      Desain kertu nama memang sebaiknya simple. Dengan cara ini, penerima bisa fokus pada isi yang kita tonjolkan. Terlalu banyak informasi malah bisa jadi membuat isinya sulit dibaca.

  7. PRATEEK GUPTA 12 October 2010 at 7:40 pm #

    great tutorials sir hope you post more like this

    • Jeprie 12 October 2010 at 7:49 pm #

      Thanks. I’m sorry I didn’t translate this to English, I don’t have much to time to run the English version.

  8. PRATEEK GUPTA 13 October 2010 at 7:38 pm #

    no sir its ok we all are greatful to you that you share your great tutorial with us thank you very much.

    • Jeprie 13 October 2010 at 7:51 pm #

      You’re welcome. I hope you find it usefull. If you have any questions, feel free to ask.

  9. PRATEEK GUPTA 18 October 2010 at 3:22 pm #

    In step 5 there is a mistake sir what texture we can take again grunge texture or the texture of fabric, you write {Take again the texture of fabric} i think there is a typing mistake or something else help me

    • Jeprie 18 October 2010 at 6:55 pm #

      Take fabric texture, place it above previous texture. Set blend mode to Multiply to retain its dark areas.

  10. PRATEEK GUPTA 18 October 2010 at 3:32 pm #

    After Hold down the Alt key and click the Add Layer Mask icon to hide the texture. & I don’t understand this{Choose colors and paint the front white mask with a brush beropacity low. You can see the mask that I created below. Further cuts to 50% opacity texture to keep it minimal.}

    • Jeprie 18 October 2010 at 6:52 pm #

      Set foreground color to white and paint layer mask using low opacity brush. You can see mask I created below. Next, set texture opacity to 50% to keep it minimal.

  11. Enciknas Art 25 January 2011 at 1:34 pm #

    Salam kenal, ane dari aceh. juga mempunya saya juga seorang desainer grafis namun tinggkat pemula masih sekarang berkerja di salah satu advertising digitalprinting di aceh.. juga pengurus aceh blogger community saya senang bisa berbagi dengan mas Jeprie.. tips dan triknya keren2…

    izin unduh ya mas.. salam sukses…

    • Jeprie 25 January 2011 at 8:27 pm #

      Salam kenal juga. Mungkin kenal juga dengan Ajir ya?

  12. deni 31 March 2013 at 4:32 am #

    mulai Langkah 4: Memberi Sedikit Tekstur.yg dimaksud tekstur itu mengambilnya dari mana mas jepri,,maaf newbi

Tinggalkan komentar Anda.

var _gaq = _gaq || []; _gaq.push([\'_setAccount\', \'UA-9527890-1\']); _gaq.push([\'_trackPageview\']); (function() { var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true; ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })(); (function() { var em = document.createElement(\'script\'); em.type = \'text/javascript\'; em.async = true; em.src = (\'https:\' == document.location.protocol ? \'https://id-ssl\' : \'http://id-cdn\') + \'.effectivemeasure.net/em.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(em, s); })();