Belajar Buat SlideShow Dengan Photoshop

Kreasi Me - 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.

Berikut adalah hasil akhir slider yang akan kita peroleh.

Langkah 1: Mempersiapkan Latar

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

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.

Langkah 3: Bentuk Dasar Slide

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

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

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.

Langkah 5: Tombol Navigasi – Panah

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

Langkah 6

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

 

Beri Inner Shadow dan Gradient Overlay.

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.

 

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

 

Langkah 8

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

 

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.

 

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.

Langkah 11

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

 

Langkah 12

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

 

Turunkan Opacity layer ke 10%.

 

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.

 

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

 

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

 

Langkah 14: Bayangan

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

 

Langkah 15

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

 

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

 

Turunkan Opacity bayangan ke 50%.

 

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.

 

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.

 

Langkah 18: Navigasi Slide – Lingkaran

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

 

Beri Inner Shadow dan Gradient Overlay.

 

Seperti inilah tampilan lingkaran yang diperoleh.

 

Langkah 19

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

Langkah 20

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

 

Langkah 21

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

 

Langkah 22

Buat lingkaran lebih kecil di dalam lingkaran.

 

Beri Drop Shadow dan Gradient Overlay.

 

Inilah hasil yang kita peroleh.

Langkah 23

Gandakan lingkaran penanda slide beberapa kali.

 

Langkah 24

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

 

Kombinasi kedua garis ini akan memberi efek garis inset.

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.

 

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.

 

sumber