Cara Membuat Slider Gambar menggunakan Photoshop & jQuery

Tidak diragukan lagi, slider gambar adalah salah satu elemen yang paling umum digunakan dalam desain web bisnis, karena ukurannya yang relatif besar yang mampu menarik perhatian pengunjung begitu mereka tiba di situs. Meskipun web telah mulai memikirkan kembali tentang kegunaan slider gambar, itu masih dianggap sebagai harus-belajar untuk pendatang baru dari industri desain web.

Dalam tutorial desain web ini, kita akan belajar membuat slider gambar khusus di atas menggunakan Photoshop, yang dapat Anda pratinjau hasil akhirnya dari sini. Kami tidak hanya akan mengilustrasikannya di Photoshop, kami juga akan mengubahnya menjadi desain fungsional dengan mengubahnya menjadi HTML / CSS dan menambahkan jQuery untuk efek gesernya yang mengagumkan.

Kedengarannya seperti banyak bit rumit yang terlibat, tetapi sebenarnya itu cukup mudah dan sangat mudah dimengerti, mari kita mulai saja!

Lebih tertarik mengadopsi slider gambar dan menyesuaikannya di jalan? Berikut adalah posting yang didedikasikan untuk Anda.

Penggeser Gambar: 23 Penggeser jQuery
Penggeser Gambar: 18 Plugin WordPress

Mulai

Untuk tutorial ini Anda membutuhkan sumber daya berikut:

26 Pola Pixel yang Dapat Diulang dari PSDfreemium.
perpustakaan jQuery
Pengaya Nivo Slider
Modernizr
Ditemukan Tekstur Kertas dari VandelayPremier
(Alternatif) 13 HQ Tekstur Kertas Tua dari overdosis
Rinjani oleh Ciaciya
Stupa oleh Agnes Sim
Tally oleh Nino Satria
Penawaran oleh Timo Balk
Uluwatu-Bali oleh Aris Wjay

Bagian I - Merancang Image Slider

Langkah 1: Mengatur Latar Belakang

Mulailah dengan membuat file baru dengan ukuran 1000 × 700 px. Isi latar belakang dengan warna # efc89e.

Tambahkan Pattern Overlay menggunakan pola pixel gratis dari PSDfreemium.

Langkah 2: Basis Penggeser

Aktifkan Rectangle Tool. Buat persegi panjang dengan ukuran 940 × 450 px. Anda dapat menggunakan warna apa pun, tidak masalah.

Klik dua kali layer untuk membuka kotak dialog Layer Style. Tambahkan Layer Style Drop Shadow, Outer Glow, dan Stroke.

Ini hasilnya. Basis slider sekarang memiliki bingkai yang bagus dengan bayangan lembut di belakangnya.

Langkah 3

Tambahkan foto dan letakkan di atas dasar slider. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask dan memasukkan foto ke dalam slider.

Langkah 4: Pita

Gambarlah bentuk persegi panjang dengan warna # f4e1ae untuk digunakan sebagai pita.

Klik dua kali layer bentuk dan aktifkan Bevel dan Emboss, Gradient Overlay, dan Pattern Overlay dengan pengaturan berikut.

Ini adalah hasil setelah menambahkan Layer Styles.

Langkah 5

Mari tambahkan tekstur kertas ke pita agar lebih realistis. Tempatkan tekstur di atas bentuk pita. Konversikan ke Clipping Mask dengan menekan Ctrl + Alt + G.

Langkah 6

Mari kita lukis beberapa bayangan dan highlight ke pita. Buat layer baru di atas pita. Cat hitam di bagian bawah pita. Konversikan ke Clipping Mask (Ctrl + Alt + G) dan kemudian kurangi Opacity menjadi 10%.

Langkah 7

Ulangi proses sebelumnya ke bagian atas pita. Tapi kali ini, tambahkan highlight dengan mengecat putih lalu kurangi Opacity menjadi 50%.

Langkah 8: Jahitan

Aktifkan Alat Pensil. Tekan F5 untuk membuka pengaturan Brush. Atur ukuran kuas menjadi 1 px dan tingkatkan jarak sampai kita mendapatkan garis putus-putus pada area pratinjau.

Langkah 9

Gambarlah 1 px garis hitam di atas pita. Kurangi Opacity menjadi 20%. Gandakan layer dengan menekan Ctrl + J. Tekan Ctrl + I untuk membalikkan warnanya. Tingkatkan Opacity menjadi 50%. Aktifkan Move Tool dan kemudian tekan panah bawah dan panah kiri satu kali untuk mendorongnya.

Inilah hasilnya dilihat pada pembesaran 100%.

Langkah 10

Ulangi proses ini untuk menggambar jahitan lain di sisi lain pita.

Langkah 11: Tambahkan Bentuk Hiasan

Atur warna latar depan menjadi abu-abu. Gunakan sikat lembut dengan ukuran 1 px untuk menggambar bentuk hiasan. Jadilah kreatif, Anda dapat menggunakan bentuk apa pun yang Anda suka. Di sebelahnya, gambar garis 1 px dan kemudian hapus tepi luarnya menggunakan Alat Penghapus lunak. Gandakan garis, balikkan secara horizontal, dan letakkan di sisi yang lain.

Langkah 12

Pilih semua lapisan hiasan dan gabungkan menjadi satu lapisan dengan menekan Ctrl + E. Bentuk duplikat dan kemudian letakkan di bawah bentuk hiasan asli. Tekan Ctrl + I untuk membalikkan warnanya. Aktifkan Move Tool dan kemudian tekan panah ke bawah satu kali untuk mendorongnya 1 px ke bawah.

Langkah 13: Informasi Foto

Ketikkan data foto di dalam pita.

Langkah 14: Navigasi

Selanjutnya, kami akan menggambar beberapa lingkaran untuk navigasi slide. Gambarlah bentuk lingkaran dengan warna: # 8d877c di bagian bawah pita.

Tambahkan Inner Shadow menggunakan pengaturan berikut.

Ini hasilnya. Lingkaran itu berubah menjadi lubang dangkal sekarang.

Langkah 15

Tahan Alt lalu seret layer bentuk lingkaran untuk menduplikasinya.

Langkah 16

Mari atur kondisi aktif pada salah satu tautan ini. Pilih salah satu lingkaran dan ubah warnanya menjadi # bebbb5. Tambahkan Inner Shadow, Gradient Overlay, dan Stroke.

Langkah 17

Tahan Ctrl dan kemudian klik pada thumbnail dasar pita di Panel Layers. Buat layer baru di bawah pita dan isi dengan hitam. Aktifkan Move Tool dan tekan panah kiri dan bawah beberapa kali.

Langkah 18

Lembutkan dengan melakukan filter Gaussian Blur. Klik Filter> Blur> Gaussian Blur.

Langkah 19

Tempatkan bayangan pita di atas lapisan bingkai slider. Konversikan ke Clipping Mask dengan menekan Ctrl + Alt + G.

Langkah 20

Kurangi Opacity bayangan hingga 40%.

Langkah 21

Lukis bayangan pita di latar belakang. Kurangi Opacity menjadi 20%.

Langkah 22

Gunakan Pen Tool untuk menarik kembali bagian dari pita. Setel warnanya ke # b68f63. Tempatkan di belakang slider.

Ini adalah hasil yang dilihat pada pembesaran 100%.

Langkah 23

Gandakan bentuk yang baru saja kita buat dan letakkan di belakang bagian atas pita. Balikkan secara vertikal.

Langkah 24: Hasil Akhir di Photoshop

Ini adalah hasil akhir kami di Photoshop. Selanjutnya, kami akan terus kode itu menjadi slider fungsional.

Bagian II - Mengubah Ke HTML / CSS

Langkah 25 - Mengatur File

Buat folder baru bernama Slider Foto Saya. Di dalam folder ini, buat dokumen HTML kosong baru (index.html), stylesheet kosong (style.css), dan folder untuk gambar (img). Kita juga perlu memasukkan pustaka jQuery dan plugin Nivo Slider ke folder. Saat kita menggunakan markup HTML5, kita perlu menambahkan hack IE untuk mengaktifkan elemen HTML5 pada IE 8 atau di bawahnya. Kami akan menggunakan skrip yang disebut Modernizr untuk mengakomodasi IE.

Langkah 26 - Markup HTML Dasar

Buka index.html di editor kode favorit Anda. Tentukan DOCTYPE (kami menggunakan HTML5), kepala elemen (di mana kami menambahkan judul dokumen dan tautan CSS dan JavaScript (jQuery Library, Nivo Slider, dan Modernizr). Kami juga menambahkan div wrapper (untuk memusatkan tata letak), tajuk elemen, dan pembungkus slide.

      Slide Foto Saya

Langkah 27 - Iris PSD

Buka mockup PSD dan potong semua gambar yang diperlukan. Untuk gambarnya, mari kita ambil gambar berikut dari sxc.hu (diperlukan login, jika Anda belum memiliki akun, Anda dapat mendaftar secara gratis). Ubah ukuran semua gambar menjadi 920 × 430 px. Masukkan semua gambar ke dalam folder gambar (img).

Rinjani oleh Ciaciya
Stupa oleh Agnes Sim
Tally oleh Nino Satria
Penawaran oleh Timo Balk
Uluwatu-Bali oleh Aris Wjay

Langkah 28 - Buat Header

Tambahkan kode berikut ini di antara

dan

  Slide Foto Saya

Sekarang mari kita tambahkan gaya ke header. Kami juga menambahkan gaya untuk elemen body dan wrapper. Masukkan semua style ke dalam stylesheet, style.css.

 / * Gaya Dasar * / tubuh latar belakang: url transparan (img / bg.jpg); font: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; margin: 0; bantalan: 0;  a outline: 0 none #pagewrap margin: 120px auto; bantalan: 0; posisi: relatif; tinggi: 100%; lebar: 960px;  header display: block; mengapung: benar; margin-right: 40px; lebar: 192px; z-index: 52; posisi: relatif;  h1 latar belakang: url transparan (img / separator.png) di bagian bawah tengah tanpa pengulangan; / * Tambahkan garis pemisah di bawah judul * / font-size: 18px; font-weight: bold; tinggi: 70px; garis-tinggi: 1.1; margin: 55px 10px 0; perataan teks: tengah; text-transform: huruf besar;

Langkah 29 - Tambahkan Foto Slider

Sekarang kita akan menambahkan kode ke bagian utama dokumen kita, slider foto. Mari kita tambahkan foto terlebih dahulu. Tempatkan kode berikut ini di antara

dan

Dan kemudian tambahkan pita dan keterangan untuk foto.

 
  Juru potret:
 Enrico Nunziati
 Lokasi:
 Gurun Namib
 Model:
 Dead Vlei
 Tanggal:
 18 Mar 2011 
  Juru potret:
 Lina Dhammanari
 Lokasi:
 Pulau Lombok, Indonesia
 Model:
 Gunung Rinjani
 Tanggal:
 8 Mei 2008 
  Juru potret:
 Agnes Sim
 Lokasi:
 Borobudur, Indonesia
 Model:
 Stupa besar
 Tanggal:
 12 Juni 2008 
  Juru potret:
 Nino Satria
 Lokasi:
 Taman Safari Indonesia
 Model:
 Tally Giraffe
 Tanggal:
 16 Agustus 2009 
  Juru potret:
 Timo Balk
 Lokasi:
 Ubud, Bali, Indonesia
 Model:
 Penawaran
 Tanggal:
 20 Des 2009 
  Juru potret:
 Aris Wjay
 Lokasi:
 Uluwatu-Bali
 Model:
 Pantai yang indah
 Tanggal:
 20 Jul 2011

Sekarang, jika kita buka index.html di browser, kami memiliki sesuatu seperti ini:

Langkah 30

Kami masih perlu memperbaiki tampilan slider menggunakan CSS.

 #slidewrap position: absolute; #slider position: relative; tinggi: otomatis; lebar: 920px; perbatasan: 10px solid #fff; box-shadow: 0 0 5px # 444; margin: 10px;  .ribbon background: url transparan (img / info-bg.png) jangan-ulangi; tinggi: 482px; lebar: 192px; posisi: absolut; kanan: 40px; atas: -3px; z-index: 50;  #slider img position: absolute; atas: 0px; kiri: 0px; display: tidak ada;

Inilah yang kita miliki sekarang.

Saat ini, kami telah menautkan plugin slider Nivo tetapi kami belum menghubungkan skrip. Jadi mari kita menghubungkan skrip dengan menambahkan fungsi-fungsi JavaScript ini antara dan elemen.

Langkah 31: Gaya Slider

Langkah terakhir adalah menambahkan gaya slider.

 / * Gaya Slider Nivo * / .nivoSlider position: relative;  .nivoSlider img position: absolute; atas: 0px; kiri: 0px;  / * Jika suatu gambar dibungkus dengan tautan * / .nivoSlider a.nivo-imageLink position: absolute; atas: 0px; kiri: 0px; lebar: 100%; tinggi: 100%; perbatasan: 0; bantalan: 0; margin: 0; z-indeks: 6; display: tidak ada;  / * Irisan dan kotak di Slider * / .nivo-slice display: block; posisi: absolut; z-index: 5; tinggi: 100%;  .nivo-box display: block; posisi: absolut; z-index: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption position: absolute; kanan: 20px; perataan teks: tengah; atas: 130px; lebar: 192px; z-index: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute; bawah: 10px; kanan: 20px; tinggi: 15px; lebar: 192px; perataan teks: tengah; display: blok; z-indeks: 51;  .nivo-controlNav a background: url transparan (img / button.png) pusat pusat tanpa pengulangan; display: inline-block; tinggi: 14px; lebar: 14px; indentasi teks: -9999px; kursor: pointer;  .nivo-controlNav .active background: url transparan (img / button_active.png);

Hasil Akhir + Unduhan

Ini adalah hasil akhir kami, klik di sini untuk melihat demo yang berfungsi.

Tidak dapat mencapai langkah tertentu? Ini adalah file PSD hasil & proyek lengkap untuk Anda uji dan mainkan.

File PSD Tutorial Slider Gambar
Tutorial Slider Gambar Proyek Lengkap