Mendesain Slider Web di Photoshop

Tutorial ini akan memperlihatkan proses pembuatan slider web menggunakan Photoshop. Kita akan memanfaatkan fitur Layer Style dan mengkombinasikannya dengan menggambar manual untuk menghasilkan sebuah slider yang apik.

Preview


Berikut adalah hasil akhir slider yang akan kita peroleh.

final.jpg

Detail Tutorial



  • Tingkat Kesulitan: Pemula, Menengah

  • Software yang Digunakan: Adobe Photoshop

  • Teknik yang Dipelajari: Layer Mask, Layer Style

  • Lama Pengerjaan: 30 menit


Tutorial


Langkah 1: Mempersiapkan Latar


Mulai dengan membuat file baru berukuran 1.000 x 500 px. Isi latar dengan warna #dcf1f7.

desain-slider-web-01.jpg

Langkah 2


Klik Filter > Noise > Add Noise. Aktifkan Monochromatic untuk memberi noise dengan warna grayscale. Penambahan noise akan memberi tekstur pada latar sehingga tidak terlihat terlalu datar.

desain-slider-web-02.jpg

Langkah 3: Bentuk Dasar Slide


Buat shape persegi untuk area gambar. Anda bisa menggunakan warna apa pun, tidak masalah.

desain-slider-web-03.jpg

Klik ganda layer untuk membuka kotak dialog Layer Style. Aktifkan Stroke.

desain-slider-web-04.jpg

desain-slider-web-05.jpg

Langkah 4


Ambil gambar dan simpan di atas shape persegi. Atur ukurannya hingga sesuai. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask dan membuat gambar masuk ke dalam area slide. Di sini, saya menggunakan gambar Gurun Namibia.

desain-slider-web-06.jpg

Langkah 5: Tombol Navigasi - Panah


Buat dua lingkaran di kedua sisi slide dengan warna sama seperti stroke, #dddddd.

desain-slider-web-07.jpg

Langkah 6


Aktifkan tool Polygon. Pilih Sides: 3 untuk menghasilkan sebuah segitiga. Buat segitiga di dalam lingkaran. Turunkan Fill layer ke 0%.

desain-slider-web-08.jpg

Beri Inner Shadow dan Gradient Overlay.

desain-slider-web-09.jpg

desain-slider-web-10.jpg

desain-slider-web-11.jpg

Langkah 7


Ctrl-klik segitiga untuk membuat seleksi baru berdasarkan pada bentuknya. Buat layer baru. Klik kanan dan pilih Stroke. Isikan Width: 1 px dengan warna putih dan Location: Inside.

desain-slider-web-12.jpg

Hapus garis di sisi atas dan kanan lalu turunkan Opacity layer. Ini akan memberi efek bevel pada segitiga.

desain-slider-web-13.jpg

Langkah 8


Duplikasi panah. Lakukan proses transformasi (Ctrl + T), klik kanan dan plih Flip Horizontal. Simpan panah di sisi sebelahnya.

desain-slider-web-14.jpg

Langkah 9: Memberi Efek 3 Dimensi


Duplikasi shape dasar slide dengan menekan Ctrl + J. Simpan ke atas. Di atasnya, buat sebuah layer kosong. Seleksi keduanya lalu pilih Layer Layer > Merge Layers. Langkah ini akan mengubah Layer Style menjadi pixel biasa. Mulai saat ini, Anda bisa bebas mengedit isi pixel tanpa bergantung pada setting Layer Style.

desain-slider-web-15.jpg

Langkah 10


Tahan Ctrl lalu klik thumbnail layer di panel Layers. Isi seleksi dengan warna putih. Kita akan menggunakan layer ini nanti. Untuk sekarang, sembunyikan layer dengan cara klik ikon mata di depan nama layer. Jangan dulu menghilangkan seleksi.

desain-slider-web-16.jpg

Langkah 11


Klik Select > Expand. Isikan 3 pixel untuk memperbesar seleksi sebesar 3 pixel.

desain-slider-web-17.jpg

desain-slider-web-18.jpg

Langkah 12


Buat layer baru dan simpan di bawah slider. Isi seleksi dengan warna putih. Klik ganda layer dan aktifkan Layer Style Outer Glow.

desain-slider-web-19.jpg

desain-slider-web-20.jpg

Turunkan Opacity layer ke 10%.

desain-slider-web-21.jpg

Langkah 13


Munculkan kembali shape yang kita buat di Langkah 10. Agar mudah dilihat, saya mengubah warnanya menjadi hitam. Anda bisa menggunakan warna apa pun, tidak masalah.

desain-slider-web-22.jpg

Klik ganda layer dan aktifkan Layer Style Bevel and Emboss. Turunkan Fill ke 0%.

desain-slider-web-23.jpg

Di bawah Anda bisa melihat perbandingan sebelum dan setelah slide diberi Bevel and Emboss.

desain-slider-web-24.jpg

Langkah 14: Bayangan


Aktifkan tool brush. Atur Hardness ke 0%. Lukis bayangan di bawah slider.

desain-slider-web-25.jpg

Langkah 15


Lakukan proses transformasi dengan menekan Ctrl + T. Klik kanan dan pilih Warp.

desain-slider-web-26.jpg

Geser kotak warp di kedua ujung sehingga diperoleh bentuk seperti di bawah.

desain-slider-web-27.jpg

Turunkan Opacity bayangan ke 50%.

desain-slider-web-28.jpg

Langkah 16: Info Gambar


Berkutnya adalah menambahkan informasi tentang gambar. Informasi ini akan muncul dalam kondisi hover, yaitu ketika kursor berada di atas slide. Seleksi bagian bawah slide. Buat layer baru lalu isi seleksi dengan hitam.

desain-slider-web-29.jpg

Langkah 17


Turunkan Opacity layer ke 50% lalu tuliskan keterangan gambar. Keterangan ini hanya muncul pada kondisi hover, jadi di langkah selanjutnya kita akan menyembunyikannya.

desain-slider-web-30.jpg

Langkah 18: Navigasi Slide - Lingkaran


Buat lingkaran di bawah slide. Kita akan menggunakannya untuk link pada slider yang tidak aktif.

desain-slider-web-31.jpg

Beri Inner Shadow dan Gradient Overlay.

desain-slider-web-32.jpg

desain-slider-web-33.jpg

Seperti inilah tampilan lingkaran yang diperoleh.

desain-slider-web-34.jpg

Langkah 19


Ctrl-klik lingkaran. Buat layer baru di atasnya, klik kanan dan pilih Stroke. Isikan Width: 1 px, warna putih, dan Location: Inside.

desain-slider-web-35.jpg

Langkah 20


Hapus bagian atas stroke lalu turunkan Opacity layer ke 20%. Ini akan memberi sedikit highlight pada lingkaran dan membuatnya terlihat lebih menonjol.

desain-slider-web-36.jpg

Langkah 21


Duplikasi lingkaran dengan cara menggesernya sambil menahan Alt. Kita akan menggunakan lingkaran ini sebagai penanda slide aktif.

desain-slider-web-37.jpg

Langkah 22


Buat lingkaran lebih kecil di dalam lingkaran.

desain-slider-web-38.jpg

Beri Drop Shadow dan Gradient Overlay.

desain-slider-web-39.jpg

desain-slider-web-40.jpg

Inilah hasil yang kita peroleh.

desain-slider-web-41.jpg

Langkah 23


Gandakan lingkaran penanda slide beberapa kali.

desain-slider-web-42.jpg

Langkah 24


Aktifkan tool pencil. Gunakan ukuran brush 1 px lalu lukis garis putih dan hitam. Masing-masing dengan Opacity 70% dan 10%.

desain-slider-web-43.jpg

Kombinasi kedua garis ini akan memberi efek garis inset.

desain-slider-web-44.jpg

Langkah 25


Simpan kedua garis ke dalam sebuah group layer. Beri layer mask lalu lukis hitam pada kedua ujung garis menggunakan brush besar dan lembut.

desain-slider-web-45.jpg

Hasil Akhir


Akhirnya, inilah tampilan slider yang kita peroleh. Anda bisa melihat dalam prosesnya bahwa kita tidak terlalu mengandalkan Layer Style. Kita lebih banyak menggambar secara manual untuk menghasilkan efek subtle.

final

Saya mempersilakan siapa pun yang ingin meneruskan tutorial ini menjadi desain fungsional, baik dalam bentuk tutorial lanjutan atau sekadar berbagi file HTML.