Thursday, December 10, 2015

Cara Membuat Metal Typography (Metallic Typography) Pada Photoshop



Ada beberapa temen yang bilang "Kalo posting typography tuh jangan cuma posting yang udah jadinya, dong! Sesekali posting bareng Tut's-nya ngapa?" Untuk mengatasi kesewotan di dunia persilatan, saya akan coba bikin sebuah contoh Tutorial Typography. Dan untuk mengantisipasi efek pusing, mual, galau bahkan meriang bagi yang baru mengenal Photoshop, saya berusaha membuat Tut ini se-detail mungkin, walau mungkin gak detail banget. Oke, kita mulai dengan niat yang tulus dan secangkir kopi.

Klik gambar untuk memperbesar. 

1. Buatlah Dokumen baru untuk background dengan ukuran 1000x1000 pixel dengan Mode RGB Color dan Resolusi 72dpi. Setelah itu buatlah Layer baru dan berilah warna pada layer baru tersebut menggunakan ‘Paint Bucket Tool’ dengan kode warna ‘#272727’.


2. Dalam poin ini kita akan memberi efek tekstur pada layer background menggunakan ‘Subtle Grunge Brush’.


3. Untuk mendapatkan efek background yang lebih dramatis, sekali lagi buatlah sebuah layer, lalu Fill dengan menggunakan ‘Soft Round Brush’ (Size:  800px, Hardness; 0%) dengan cara melingkar ke semua sisi/sudut Layer, bagian tengah Layer biarkan kosong. Pilih ‘Layer’ pada’Menu Bar’ lalu pilih ‘Layer Style’ dan ‘Blending Option’, selanjutnya setting ‘Opacity’ dengan parameter 47%. 


4. Background sudah jadi dan sekarang kita akan mulai bermain dengan Font. Buatlah sebuah kalimat mengguakan ‘Type Tool ’ (T) yang terletak pada ‘Tool Box’. Disini saya menggunakan Font ‘Contour Generator’ dengan Size 380pt.


5. Sekarang kita akan memberi beberapa efek pada Font. Pertama kita akan memeberikan efek bayakangan dengan  cara pilih ‘Layer’ pada ‘Menu Bar’ lalu pilih ‘Layer Style’ dan pilih ‘Drop Shadow’. Settinglah dengan parameter: Blend Mode = Normal, Opacity = 80 %, Distance = 24 %, Spread = 0%, Size = 32%, Contour = Linear, Noise = 0%. Bisa dilihat pada gambar dibawah ini


6. Masih pada ‘Layer Style’, kini beralih pada setting ‘Inner Shadow’. Blend Mode = Normal, Opacity = 100%, Angle = 110, Distance = 18px, Choke = 0%, Size = 11%, Contour = Linear, Noise = 1%. Jangan tutup Tab ‘Layer Style’ ini, karena kita akan beranjak ke settingan selanjutnya


7. Beralih ke setting ‘Bevel and Emboss’. Pada kolom Structure: Style = Inner Bevel, Technique = Smooth, Depth = 29%, Size = 24px, Soften = 1px. Pada kolom Shading: Angle = 110, Altitude = 41, Gloss Contour = Double Ring, Highlight Mode = Screen, Opacity = 97%, Shadow Mode = Multiply, Opacity = 82%


8. Masih pada setting ‘Bevel and Emboss’, pilih dan beri tanda centang pada menu ‘Contour’, lalu pada kolom Elements, pilih style ‘Half Round’.


9. Sekarang kita beri efek Satin: Blend Mode = Normal, Opacity = 75%, Angle = 19, Distance = 30px, Size = 13px dan Contour = Linear. 


10. Untuk ‘Color Overlay’: Blend Mode = Normal (Dengan kode warna #979797), Opacity = 100%.


11. Terakhir adalah setting Stroke: Size = 4px, Position = Outside, Blend Mode = Normal, Opacity = 100%, Fill Type = Gradient, Style = Linear (Centang ‘Align With Layer’), Angle = -90, Scale = 91%. Nah jika settingan anda sesuai dengan settingan saya, maka akan menghasilkan gambar seperti pada gambar berikut.


Sudah selesai? Ah tentu aja belum, kalau ada yang mau ngopi dulu silahkan, karena ini baru setengah jalan. Nahlo!

Udah ngopinya? Oke kita lanjutkan ke tutorial bagian 2.

1. Duplikat Layer yang tadi kita edit dengan cara klik kanan pada thumbnail Layer, pilih ‘Duplicate Layer’ lalu klik ‘OK’. Setelah itu klik kanan lagi pada hasil duplikat Layer barusan dan cari tulisan ‘Clear Layer Style’, langkah ini bertujuan untuk menghilangkan efek yang sudah kita bubuhkan pada layer pertama, karena pada Layer kedua ini kita akan membubuhkan efek dengan style yang berbeda. Perhatikan bagian gambar yang diberi tanda panah merah.


2. Pertama kita akan melakukan setting pada menu ‘Drop Shadow’: Blend Mode = Normal, Opacity = 80, Angle = 110, Distance = 6px, Spread = 0%, Size = 8px, Contour = Linear, Noise = 0%.


3. Selanjutnya kita masuk ‘Inner Shadow’. Blend Mode = Normal, Opacity = 100%, Angle = 110, Distance =20px, Choke = 0%, Size = 26%, Contour = Linear, Noise = 2%. 


4. Untuk ‘Outer Glow’ silahkan masukan setting berikut: Blend Mode = Screen, Opacity = 20%, Noise = 0 %, Technique = Softer, Spread = 0%, Size = 55px, Contour = Linear, Range = 100%, Jitter = 2%. 


5. Beralih lagi ke setting ‘Bevel and Emboss’. Pada kolom Structure: Style = Inner Bevel, Technique = Smooth, Depth = 113%, Size = 30px, Soften = 11px. Pada kolom Shading: Angle = 110, Altitude = 40, Gloss Contour = Linear, Highlight Mode = Linear Light (dengan kode warna #dea565), Opacity = 78%, Shadow Mode = Multiply, Opacity = 0%.


6. Jika pada layer pertama tadi tidak menggunakan style ini, maka disini kita akan membubuhkannya dengan settingan: Blend Mode = Normal, Opacity = 38%, Style = Linear, Angle = 90, Scale = 100


7. Sekarang kita memasuki style ‘Pattern Overlay’: Blend Mode = Normal, Opacity = 100%, Pattern = Canvas.


8. Sekarang kita beri efek Satin: Blend Mode = Color Burn, Opacity = 50%, Angle = 19, Distance = 10px, Size = 9px dan Contour = Gaussian.


9. Kali ini benar-benar yang terakhir, yaitu setting ‘Stroke’: Size = 11px, Position = Inside, Blend Mode = Normal, Opacity = 0%, Fill Type = Color. Nah jika keseluruhan setting sesuai, maka hasilnya akan tampak seperti pada gambar dibawah ini. Sekarang tinggal finishing yaitu klik tombol ‘Save’ untuk penyimpan Dokumen PSD, dan tombol ‘Save As…’ untuk menyimpan file berbentuk file JPG. 

Dan silahkan lihat hasil dari editing kali ini pada gambar diawal postingan ini. Selamat mencoba dengan  menyesuaikan kalimat dan font sesuai selera anda. Saya mau ngaso dulu sambil-ngupi-ngupi. Terima kasih.

24 comments:

  1. Coba Mas, bikin logo KPK dari sini, pasti keren dan ada kenangan manis.

    ReplyDelete
    Replies
    1. Maksudnya logo KPK dengan gaya Metallic kayak gini, Mas?

      Delete
    2. pentolannya tuh yg kudu disetrap

      Delete
    3. KPK itu kenangan manis loh.
      yang manis mbak Ririe yang lain kenangan

      Delete
  2. runtun banget tutornya mas, saya sedu kopi dulu deh :)

    ReplyDelete
  3. wah mantab nih.. coba saya dibikinkan logo pakai metal typography metallic kang...

    ReplyDelete
  4. ternyata mas rudy jago bikin typography loya.
    kenapa nggak bilang2 saya coba?

    ReplyDelete
    Replies
    1. kemana nih orangnya
      masak udah tidur sih

      Delete
    2. Sayama males kalo disuruh tidur, belom ada yang nemenin soalnya, gimana coba?

      Delete
    3. dikasih mata sama alis.
      terus dikasih taring

      Delete
  5. wah keren juga ya mas? itu font Contour Generator nya sudah ada bawaan dari komputernya atau kita harus instal terlebih dahulu ya mas??

    ReplyDelete
    Replies
    1. Contour Generator bukan bawaan windows, jadi harus download dulu. Banyak kok di internet

      Delete
  6. saya makin bingung nih...si admin betah juga bikin tulisan sedetil ini yah.....

    kalau saya udah ga betah terlalu banyak seperti ini mas, btw ini yang disukai pembaca sih...

    ReplyDelete
    Replies
    1. Soalnya kalo gak detail malah suka di komplen, jadi mendingan detail sekalian hehe

      Delete
  7. Lumayan bikin mual untuk saya yang pemula mas.
    Btw izin praktik terus sampai jadi seperti gambar di atas.

    ReplyDelete