Mendesain Interface Tombol dari Kulit

tutorial-hotoshop-interface-tombol-kulit-67

Anda mungkin mengira bahwa Photoshop hanya digunakan untuk editing gambar saja. Padahal tidak, Photoshop juga populer digunakan dalam desain interface. Misalnya, seperti ditunjukkan dalam tutorial ini, untuk menggambar tombol dengan material dari kulit.

Detail Tutorial


• Tingkat Kesulitan: Pemula, Menengah
• Lama Pengerjaan: 1 jam
• Program yang digunakan: Adobe Photoshop CS6 ke atas
• Teknik yang dibahas: Layer Styles, Layer Mask, Vector Shape, Gaussian Blur

Resource Yang Digunakan


Untuk mengikuti tutorial ini, silakan download resource berikut.


Preview


Di bawah adalah tampilan akhir tombol yang akan kita buat. Perhatikan tekstur dan pencahayaan yang digunakan dalam tombol ini.

tutorial-hotoshop-interface-tombol-kulit-01

Tutorial


Langkah 1: Persiapan


Mulai dengan membuat file baru (File > New) berukuran 800 x 600 pixel.

tutorial-hotoshop-interface-tombol-kulit-02

Langkah 2


Ambil file tekstur kulit lalu simpan ke atas kanvas.

tutorial-hotoshop-interface-tombol-kulit-03

Langkah 3


Tekan Ctrl + A untuk memilih seluruh kanvas. Buat layer isi. Klik Edit > Stroke. Gunakan radius besar dengan warna hitam. Klik tombol OK.

tutorial-hotoshop-interface-tombol-kulit-04

Langkah 4


Haluskan garis stroke dengan memberi filter Gaussian Blur. Klik Filter > Blur > Gaussian Blur.

tutorial-hotoshop-interface-tombol-kulit-05

Langkah 5


Buat layer baru dan isi dengan gradasi radial dari putih ke hitam. Pusat gradient di bagian atas kanvas untuk memberi efek pencahayaan dari atas.

tutorial-hotoshop-interface-tombol-kulit-06

Langkah 6


Dari panel Layers, turunkan Opacity layer hingga 15%.

tutorial-hotoshop-interface-tombol-kulit-07

tutorial-hotoshop-interface-tombol-kulit-08

Langkah 7


Klik ikon Add Adjustment Layer dan pilih Hue/Saturation. Aktifkan Colorize lalu geser ketiga slider untuk mengubah warna tekstur kulit menjadi coklat.

tutorial-hotoshop-interface-tombol-kulit-09

tutorial-hotoshop-interface-tombol-kulit-10

Langkah 8: Dasar Tombol


Kita mulai dengan membuat dasar tombol. Buat sebuah rounded rectangle dengan warna #7f5b36 dan Radius: 10 px.

tutorial-hotoshop-interface-tombol-kulit-11

Langkah 9


Kita akan membuat bentuk rounded rectangle datar ini menjadi bentuk tiga dimensi dengan mengkombinasikan beberapa layer styles. Pertama, kita tambahkan Bevel and Emboss untuk menebalkan permukaan shape. Klik ganda layer lalu aktifkan Bevel and Emboss dengan setting seperti di samping.  Gunakan sudut 90° dan aktifkan Use Global Light.

tutorial-hotoshop-interface-tombol-kulit-12

tutorial-hotoshop-interface-tombol-kulit-13

Langkah 10


Selanjutnya, tambahkan Inner Shadow dengan warna putih dan blend mode Screen. Layer style ini akan memberikan bayangan putih di sekeliling permukaan shape. Karena sudut yang digunakan 90°, cahaya akan berasal dari atas sehingga bayangannya akan muncul di sisi atas permukaan.

tutorial-hotoshop-interface-tombol-kulit-14

tutorial-hotoshop-interface-tombol-kulit-15

Langkah 11


Selenjutnya, tambahkan Inner Glow. Inner Glow akan memberikan kilauan di sekeliling layer. Untuk kasus ini, pilih warna hitam dengan blend mode Multiply. Turunkan Opacity hingga 5% dan perbesar nilai Size. Hasilnya, kita akan memperoleh bayangan lembut di sekeliling layer.

tutorial-hotoshop-interface-tombol-kulit-16

tutorial-hotoshop-interface-tombol-kulit-17

Langkah 12


Dalam kehidupan nyata tidak ada warna solid, semua permukaan memiliki gradasi. Tambahkan layer style Gradient Overlay dengan gradasi dari hitam ke putih, Blend Mode: Normal, Opacity: 5%.

tutorial-hotoshop-interface-tombol-kulit-18

tutorial-hotoshop-interface-tombol-kulit-19

Langkah 13


Terakhir, tambahkan Drop Shadow untuk memberikan bayangan pada shape. Ini akan memberikan ilusi ketinggian pada layer.

tutorial-hotoshop-interface-tombol-kulit-20

tutorial-hotoshop-interface-tombol-kulit-21

Langkah 14: Tombol Utama


Buat rounded rectangle lebih kecil di dalam shape sebelumnya dengan warna #e48553.

tutorial-hotoshop-interface-tombol-kulit-22

Langkah 15


Seperti tadi, kita akan mengubahnya menjadi bentuk tiga dimensi dengan kombinasi layer styles.

tutorial-hotoshop-interface-tombol-kulit-23

tutorial-hotoshop-interface-tombol-kulit-24

tutorial-hotoshop-interface-tombol-kulit-25

tutorial-hotoshop-interface-tombol-kulit-26

tutorial-hotoshop-interface-tombol-kulit-27

Di bawah adalah tampilan tombol sebelum dan setelah diberi layer styles.

tutorial-hotoshop-interface-tombol-kulit-22

tutorial-hotoshop-interface-tombol-kulit-28

Langkah 16


Aktifkan tool Pen. Klik salah satu sisi shape lalu geser titik yang diperoleh. Langkah ini
akan membuat bentuk tombol tidak terlalu sempurna, sesuai dengan kondisi di dunia
nyata

tutorial-hotoshop-interface-tombol-kulit-29

tutorial-hotoshop-interface-tombol-kulit-30

Langkah 17


Buat layer baru lalu Ctrl-klik layer shape. Tekan D lalu Alt + Delete untuk mengisi
seleksi dengan hitam. Tekan Ctrl + D untuk menghilangkan seleksi. Haluskan dengan
klik Filter > Blur > Gaussian Blur.

tutorial-hotoshop-interface-tombol-kulit-31

tutorial-hotoshop-interface-tombol-kulit-32

Langkah 18


Geser bayangan ke belakang shape. Turunkan Opacity layer hingga 50% agar bayangannya terlihat lembut.

tutorial-hotoshop-interface-tombol-kulit-33

Langkah 19


Buat rounded rectangle lebih kecil di tengah-tengah shape. Di baris pilihan pilih warna Fill: #d77a48 dan Stroke: #9d6423 dengan ukuran 2 pt.

tutorial-hotoshop-interface-tombol-kulit-34

Langkah 20


Tambahkan layer style Inner Shadow dan Gradient Overlay. Untuk Gradient Overlay, gunakan gradasi putih di atas dan hitam di bawah. Ini akan membuat permukaan tombol terlihat menonjol.

tutorial-hotoshop-interface-tombol-kulit-35

tutorial-hotoshop-interface-tombol-kulit-36

tutorial-hotoshop-interface-tombol-kulit-37

Langkah 21


Tekan Ctrl + J untuk menduplikasi shape tadi. Di baris pilihan, kosongkan Fill dan pilih tipe garis Stroke putus-putus. Turunkan juga ukuran Stroke menjadi 1 pt.

tutorial-hotoshop-interface-tombol-kulit-38

Langkah 22


Kita akan mengubah garis putus-putus ini menjadi jahitan dengan memberinya layer
style Drop Shadow, Gradient Overlay, dan Bevel and Emboss.

tutorial-hotoshop-interface-tombol-kulit-39

tutorial-hotoshop-interface-tombol-kulit-40

tutorial-hotoshop-interface-tombol-kulit-41

Di bawah adalah tampilan tombol yang kita peroleh.

tutorial-hotoshop-interface-tombol-kulit-42

Langkah 23


Aktifkan Tool Rounded Rectangle. Di Baris Pilihan isikan Radius: 30 px. Buat shape baru di kanan atas tombol. Untuk warnanya, gunakan #d98d65. Tambahkan layer style Inner Shadow dan Gradient Overlay dengan setting sama seperti di
Langkah 20.

tutorial-hotoshop-interface-tombol-kulit-43

Langkah 24: Banner


Tambahkan shape lagi hingga memotong bagian atasnya. Di baris pilihan, ubah mode path ke Subtract From Shape.

tutorial-hotoshop-interface-tombol-kulit-44

Langkah 25


Ctrl-klik shape untuk membuat seleksi baru berdasarkan ukurannya. Buat layer baru dan isi dengan hitam. Tekan Ctrl + D. Klik Filter > Blur > Gaussian Blur. Terakhir, geser  layer bayangan ke belakang shape.

tutorial-hotoshop-interface-tombol-kulit-45

tutorial-hotoshop-interface-tombol-kulit-46

tutorial-hotoshop-interface-tombol-kulit-47

Langkah 26


Buat layer baru dan lukis garis hitam di sekeliling shape. Turunkan Opacity layer hingga 10%. Ini akan menjadi tempat untuk menyimpan jahitan.

tutorial-hotoshop-interface-tombol-kulit-48

tutorial-hotoshop-interface-tombol-kulit-49

Langkah 27


Buat rounded rectangle tepat di sekeliling shape. Kosongkan warna Fill dan isi warna
Stroke dengan #a26b2b. Gunakan setting Stroke putus-putus dan beri layer style yang sama seperti di jahitan sebelumnya.

tutorial-hotoshop-interface-tombol-kulit-50

tutorial-hotoshop-interface-tombol-kulit-51

Langkah 28


Seleksi bagian jahitan yang menempel di permukaan shape. Klik ikon Add Layer Mask untuk menyembunyikan bagian lainnya.

tutorial-hotoshop-interface-tombol-kulit-52

tutorial-hotoshop-interface-tombol-kulit-53

Langkah 29


Ctrl-klik shape untuk memilihnya. Buat layer baru lalu lukis putih dan hitam dengan Tool Brush. Lakukan ini di layer terpisah untuk mempermudah pengaturannya. Anda bisa menurunkan atau menaikkan Opacity layer untuk mengubah intensitas highlight dan shadow yang diperoleh.

tutorial-hotoshop-interface-tombol-kulit-54

tutorial-hotoshop-interface-tombol-kulit-55

Langkah 30


Aktifkan Tool Custom Shape dan pilih bentuk panah. Klik dan geser untuk membuat panah berwarna putih di atas shape.

tutorial-hotoshop-interface-tombol-kulit-56

tutorial-hotoshop-interface-tombol-kulit-57

Langkah 31


Klik ganda layer dan aktifkan layer style dengan setting seperti berikut.

tutorial-hotoshop-interface-tombol-kulit-58

tutorial-hotoshop-interface-tombol-kulit-59

tutorial-hotoshop-interface-tombol-kulit-60

tutorial-hotoshop-interface-tombol-kulit-61

Langkah 32


Selanjutnya, turunkan Fill layer hingga 10%. Di gambar samping terlihat bentuk panah seolah-olah melubangi tekstur kulit.

tutorial-hotoshop-interface-tombol-kulit-62

Langkah 33: Memberi Tekstur Kulit


Ambil tekstur kulit yang tadi sudah Anda ambil. Simpan ke atas tombol. Tekan Ctrl + Shift + U untuk menghilangkan warnanya. Ctrl-klik dasar tombol untuk membuat seleksi berdasarkan bentuknya.

tutorial-hotoshop-interface-tombol-kulit-63

Langkah 34


Klik ikon Add Layer Mask. Sekarang tekstur kulit ini akan berada tepat di dalam tombol.

tutorial-hotoshop-interface-tombol-kulit-64

Masih dari panel Layers, ubah blend mode layer ke Soft Light lalu turunkan nilai Opacity layer.

tutorial-hotoshop-interface-tombol-kulit-65

Hasil Akhir


Untuk penutup, kita tambahkan teks Desaindigital dan memberi layer style yang sama dengan bentuk panah. Di bawah terdapat tampilan tombol yang kita peroleh. Anda juga bisa membuat variasi lain, misalnya dengan mengubah layer styles teks sehingga membuatnya terlihat tiga dimensi, teks bukan berlubang tapi menonjol.

tutorial-hotoshop-interface-tombol-kulit-66

tutorial-hotoshop-interface-tombol-kulit-67

Download File


File PSD (6,5 MB)