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)

Iklan

Satu respons untuk “Mendesain Interface Tombol dari Kulit

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s