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.
Mendesain Slider Web di Photoshop

Langkah 1: Mempersiapkan Latar

Mulai dengan membuat file baru berukuran 1.000 x 500 px. Isi latar dengan warna #dcf1f7.
Mendesain Slider Web di Photoshop

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.

Mendesain Slider Web di Photoshop

Langkah 3: Bentuk Dasar Slide

Buat shape persegi untuk area gambar. Anda bisa menggunakan warna apa pun, tidak masalah.
Mendesain Slider Web di Photoshop
Klik ganda layer untuk membuka kotak dialog Layer Style. Aktifkan Stroke.

Mendesain Slider Web di Photoshop
Mendesain Slider Web di Photoshop

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.
Mendesain Slider Web di Photoshop

Langkah 5: Tombol Navigasi – Panah

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

Mendesain Slider Web di Photoshop

Langkah 6

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

Mendesain Slider Web di Photoshop 
Beri Inner Shadow dan Gradient Overlay.

Mendesain Slider Web di Photoshop
Mendesain Slider Web di Photoshop
Mendesain Slider Web di Photoshop

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.

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

Mendesain Slider Web di Photoshop 

Langkah 8

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

Mendesain Slider Web di Photoshop 

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.

Mendesain Slider Web di Photoshop 

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.

Mendesain Slider Web di Photoshop

Langkah 11

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

Mendesain Slider Web di Photoshop
Mendesain Slider Web di Photoshop 

Langkah 12

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

Mendesain Slider Web di Photoshop
Mendesain Slider Web di Photoshop 
Turunkan Opacity layer ke 10%.

Mendesain Slider Web di Photoshop 

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.

Mendesain Slider Web di Photoshop 
Klik ganda layer dan aktifkan Layer Style Bevel and Emboss. Turunkan Fill ke 0%.

Mendesain Slider Web di Photoshop 
Di bawah Anda bisa melihat perbandingan sebelum dan setelah slide diberi Bevel and Emboss.

Mendesain Slider Web di Photoshop 

Langkah 14: Bayangan

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

Mendesain Slider Web di Photoshop 

Langkah 15

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

Mendesain Slider Web di Photoshop 
Geser kotak warp di kedua ujung sehingga diperoleh bentuk seperti di bawah.

Mendesain Slider Web di Photoshop 
Turunkan Opacity bayangan ke 50%.

Mendesain Slider Web di Photoshop 

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.

Mendesain Slider Web di Photoshop 

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.

Mendesain Slider Web di Photoshop 

Langkah 18: Navigasi Slide – Lingkaran

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

Mendesain Slider Web di Photoshop 
Beri Inner Shadow dan Gradient Overlay.

Mendesain Slider Web di Photoshop
Mendesain Slider Web di Photoshop 
Seperti inilah tampilan lingkaran yang diperoleh.

Mendesain Slider Web di Photoshop 

Langkah 19

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

Mendesain Slider Web di Photoshop

Langkah 20

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

Mendesain Slider Web di Photoshop 

Langkah 21

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

Mendesain Slider Web di Photoshop 

Langkah 22

Buat lingkaran lebih kecil di dalam lingkaran.

Mendesain Slider Web di Photoshop 
Beri Drop Shadow dan Gradient Overlay.

Mendesain Slider Web di Photoshop
Mendesain Slider Web di Photoshop 
Inilah hasil yang kita peroleh.

Mendesain Slider Web di Photoshop

Langkah 23

Gandakan lingkaran penanda slide beberapa kali.

Mendesain Slider Web di Photoshop 

Langkah 24

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

Mendesain Slider Web di Photoshop 
Kombinasi kedua garis ini akan memberi efek garis inset.

Mendesain Slider Web di Photoshop

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.

Mendesain Slider Web di Photoshop 

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.

Mendesain Slider Web di Photoshop 

No comments:

Post a Comment

Wellcom To My Blog