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.

Iklan

15 thoughts on “Mendesain Slider Web di Photoshop

  1. Ini nanti maksudnya hasil akhir seperti gambar yang berganti-ganti seperti tampilan slide itu, ya Mas Jeprie? Saya sering melihat beberapa situs yang punya slide gambar seperti itu.

  2. Saya bukan pengguna blogspot. Saya juga tidak mengerti maksud pertanyaannya.

    Pertanyaan diharapkan sesuai dengan tema artikel atau tutorial.

  3. mas klo yang diatas itu kan gambarnya ,klo kita upload ke web tu pasti ada kode kode nya dan saya tidak terlalu mengerti tentang kode tersebut ,
    makasih atas jawabannya .

  4. Untuk menjadikan slider ini fungsional, diperlukan pengkodean HTML, CSS, dan jQuery. Saya tidak kompeten masalah ini. Silakan tanyakan ke coder.

  5. Sama-sama. 🙂

    Selama pertanyaannya berkaitan dengan bahasan posting, akan coba saya jawab. Perlu diketahui, pertanyaan atau komentar tidak penting tidak akan dijawab.

  6. Slider ini terkadang kalau penggunaannya kurang pas,sepertinya akan memperlambat proses pemuatan halaman webnya.Untuk web-web yang tak bermasalah dengan hostingnya boleh saja menggunakannya,untuk yang lambat sepertinya tak sepadan dengan fungsional slider web ini.

  7. Betul sekali, ada banyak faktor. Salah satunya kecepatan situs, kecepatan internet pengunjungnya, dan tema desain situs secara kesuluruhan.

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 )

Gambar Twitter

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

Foto Facebook

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

Foto Google+

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

Connecting to %s