Bagaimana Membuat Slider Imej menggunakan Photoshop & jQuery

Tidak dinafikan, slider imej adalah salah satu unsur yang paling sering digunakan dalam reka bentuk web perniagaan, kerana saiz yang agak besar yang dapat menarik perhatian pengunjung sebaik sahaja mereka tiba di laman web ini. Walaupun web telah mula memikirkan semula kegunaan slider imej, ia masih dianggap sebagai mesti belajar untuk pendatang baru industri reka bentuk web.

Dalam tutorial reka bentuk web ini, kami akan belajar untuk membuat slider imej tersuai di atas menggunakan Photoshop, yang boleh anda pratonton hasil akhir dari sini. Bukan sahaja kita akan menggambarkannya dalam Photoshop, kita juga akan mengubahnya menjadi reka bentuk berfungsi dengan mengubahnya menjadi HTML / CSS dan menambah jQuery untuk kesan gelongsor yang mengagumkan.

Bunyi seperti banyak bit rumit yang terlibat, tetapi sebenarnya ia cukup mudah dan sangat mudah difahami, mari kita mulakan!

Lebih tertarik dengan menggunakan slider imej dan menyesuaikannya dalam perjalanan? Berikut adalah jawatan khusus untuk anda.

Slider Imej: 23 Slider jQuery
Slider Imej: 18 WordPress Plugins

Bermula

Untuk tutorial ini, anda memerlukan sumber berikut:

26 Pola Pixel Ulang dari PSDfreemium.
perpustakaan jQuery
Plugin Nivo Slider
Moden
Menemui Tekstur Kertas dari VandelayPremier
(Alternatif) 13 HQ Kertas Tekstur Lama dari overdosse
Rinjani oleh Ciaciya
Stupa oleh Agnes Sim
Tally oleh Nino Satria
Tawaran oleh Timo Balk
Uluwatu-Bali oleh Aris Wjay

Bahagian I - Merancang Slider Imej

Langkah 1: Menetapkan Latar Belakang

Mulakan dengan membuat fail baru dengan saiz 1000 × 700 px. Isi latar belakang dengan warna # efc89e.

Tambah Overlay Corak menggunakan corak piksel percuma dari PSDfreemium.

Langkah 2: Pangkalan Slider

Aktifkan Alat Rectangle. Buat segi empat tepat dengan saiz 940 × 450 px. Anda boleh menggunakan mana-mana warna, tidak mengapa.

Lapisan klik dua untuk membuka kotak dialog Layer Style. Tambah Shadow Drop Style Layer, Glow Luar, dan Stroke.

Inilah hasilnya. Pangkalan gelangsar kini mempunyai bingkai yang bagus dengan bayangan lembut di belakangnya.

Langkah 3

Tambah foto dan letakkan di atas pangkalan gelangsar. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask dan masukkan foto ke dalam slider.

Langkah 4: Reben

Lukiskan bentuk segi empat dengan warna # f4e1ae untuk digunakan sebagai reben.

Klik ganda lapisan dan aktifkan Bevel and Emboss, Overlay Gradien, dan Overlay Corak dengan tetapan berikut.

Inilah hasilnya selepas menambah Gaya Layer.

Langkah 5

Mari tambahkan tekstur kertas ke reben untuk menjadikannya lebih realistik. Letakkan tekstur di atas bentuk reben. Tukar ke Clipping Mask dengan menekan Ctrl + Alt + G.

Langkah 6

Mari kita cat beberapa bayang dan sorotan ke reben. Buat lapisan baru di atas reben. Cat hitam pada bahagian bawah reben. Tukar kepada Clipping Mask (Ctrl + Alt + G) dan kemudian mengurangkan Opacitynya kepada 10%.

Langkah 7

Ulangi proses sebelumnya ke bahagian atas reben. Tetapi kali ini, tambah sorotan dengan lukisan putih dan kemudian mengurangkan Opacitynya kepada 50%.

Langkah 8: Jahitan

Aktifkan Alat Pensil. Tekan F5 untuk membuka tetapan Berus. Tetapkan saiz berus kepada 1 px dan tingkatkan jarak sehingga kita mendapatkan garis putus-putus di kawasan pratonton.

Langkah 9

Lukis 1 garisan hitam px di atas reben. Kurangkan Opacitynya kepada 20%. Lapisan pendua dengan menekan Ctrl + J. Tekan Ctrl + I untuk membalikkan warnanya. Meningkatkan Opacity hingga 50%. Aktifkan Pindah Alat dan kemudian tekan panah ke bawah dan anak panah kiri sekali untuk menaikkannya.

Berikut adalah hasil yang dilihat pada pembesaran 100%.

Langkah 10

Ulangi proses ini untuk menarik jahitan lain di sisi lain reben.

Langkah 11: Tambah Bentuk Ornate

Tetapkan warna latar ke kelabu. Gunakan berus lembut dengan saiz 1 px untuk menarik bentuk yang berhias. Jadilah kreatif, anda boleh menggunakan bentuk yang anda suka. Di sebelahnya, lukis baris 1 px dan kemudian padamkan kelebihannya dengan menggunakan Alat Pemadam yang lembut. Duplikat garisan, flipnya secara mendatar, dan letakkannya di sisi lain.

Langkah 12

Pilih semua lapisan hiasan dan sambungkannya ke satu lapisan dengan menekan Ctrl + E. Bentuk pendua kemudian letakkannya di bawah bentuk hiasan asal. Tekan Ctrl + I untuk membalikkan warna. Aktifkan Pindah Alat dan kemudian tekan panah ke bawah sekali untuk menjentikkannya 1 px ke bawah.

Langkah 13: Maklumat Foto

Taipkan data foto di dalam reben.

Langkah 14: Navigasi

Seterusnya, kami akan menarik beberapa kalangan untuk navigasi slaid. Lukiskan bentuk bulatan dengan warna: # 8d877c pada bahagian bawah reben.

Tambah Inner Shadow menggunakan tetapan berikut.

Inilah hasilnya. Lingkarannya kini berubah menjadi lubang cetek.

Langkah 15

Tahan Alt dan kemudian seret lapisan bentuk bulatan untuk menduplikasinya.

Langkah 16

Mari tentukan keadaan aktif di salah satu pautan ini. Pilih salah satu bulatan dan tukar warna ke # bebbb5. Tambah Inner Shadow, Gradient Overlay, dan Stroke.

Langkah 17

Pegang Ctrl dan kemudian klik pada imej kecil asas reben di Panel Lapisan. Buat lapisan baru di bawah pita dan isikannya dengan hitam. Aktifkan Alat Pindah dan tekan panah kiri dan bawah beberapa kali.

Langkah 18

Melembutkannya dengan melakukan penapis Blur Gaussian. Klik Penapis> Blur> Gaussian Blur.

Langkah 19

Letakkan bayangan reben di atas lapisan bingkai slider. Tukar ke Clipping Mask dengan menekan Ctrl + Alt + G.

Langkah 20

Kurangkan Kesedaran bayangan hingga 40%.

Langkah 21

Cat bayangan pita di latar belakang. Kurangkan Opacitynya kepada 20%.

Langkah 22

Gunakan Alat Pen untuk menarik balik sebahagian daripada reben. Tetapkan warna ke # b68f63. Letakkan di belakang gelangsar.

Ini adalah hasil yang dilihat pada pembesaran 100%.

Langkah 23

Duplikat bentuk yang baru kita buat dan letakkan di belakang bahagian atas reben. Keluarkannya secara menegak.

Langkah 24: Keputusan Akhir dalam Photoshop

Inilah hasil akhir kami dalam Photoshop. Seterusnya, kami akan terus memasukkannya ke slider berfungsi.

Bahagian II - Menukar Ke HTML / CSS

Langkah 25 - Menyediakan Fail

Buat folder baru yang dipanggil My-Photo-Slider. Di dalam folder ini, buat dokumen kosong HTML baruindex.html), lembaran gaya kosong (style.css), dan folder untuk imej (img). Kami juga perlu memasukkan pustaka jQuery dan plugin Nivo Slider ke folder. Semasa menggunakan markup HTML5, kita perlu menambah hack IE untuk mengaktifkan elemen HTML5 pada IE 8 atau ke bawah. Kami akan menggunakan skrip yang dipanggil Modernizr untuk menampung IE.

Langkah 26 - Markup HTML Asas

Buka index.html dalam editor kod kegemaran anda. Tentukan DOCTYPE (kami menggunakan HTML5), kepala unsur-unsur (di mana kita menambah tajuk dokumen dan menghubungkan CSS dan JavaScript (Perpustakaan jQuery, Nivo Slider, dan Modernizr). div bungkus (untuk memusatkan susun atur), kepala elemen, dan pembalut slaid.

      Slaid Foto saya

Langkah 27 - Slice JPA

Buka jaring PSD dan potong semua imej yang diperlukan. Untuk gambar, mari ambil gambar berikut dari sxc.hu (log masuk diperlukan, jika anda belum mempunyai akaun, anda boleh mendaftar secara percuma). Ubah saiz semua imej ke 920 × 430 px. Letakkan semua imej ke dalam folder imej (img).

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

Langkah 28 - Buat Header

Tambah kod berikut ini di antara

dan

  Slaid Foto saya

Sekarang mari tambahkan gaya ke tajuk. Kami juga menambah gaya untuk elemen badan dan pembalut. Letakkan semua gaya ke dalam lembaran gaya, style.css.

 / * Styling Basic * / body background: url transparent (img / bg.jpg); fon: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; margin: 0; padding: 0;  outline: 0 none #pagewrap margin: 120px auto; padding: 0; kedudukan: relatif; ketinggian: 100%; lebar: 960px;  header display: block; terapung: betul; margin-right: 40px; lebar: 192px; z-index: 52; kedudukan: relatif;  h1 latar belakang: url telus (img / separator.png) no-repeat bottom center; / * Tambahkan garis separator di bawah tajuk * / font-size: 18px; font-weight: bold; ketinggian: 70px; garis ketinggian: 1.1; margin: 55px 10px 0; teks-align: center; teks-transform: huruf besar;

Langkah 29 - Tambah Slider Foto

Sekarang kita akan menambah kod ke bahagian utama dokumen kami, slider foto. Mari tambahkan foto terlebih dahulu. Letakkan kod berikut ini di antara

dan

Dan kemudian tambah pita dan kapsyen untuk foto.

 
  Juru gambar:
 Enrico Nunziati
 Lokasi:
 Padang pasir Namib
 Model:
 Dead Vlei
 Tarikh:
 18 Mac 2011 
  Juru gambar:
 Lina Dhammanari
 Lokasi:
 Lombok Island, Indonesia
 Model:
 Gunung Rinjani
 Tarikh:
 8 Mei 2008 
  Juru gambar:
 Agnes Sim
 Lokasi:
 Borobudur, Indonesia
 Model:
 Stupa Besar
 Tarikh:
 12 Jun 2008 
  Juru gambar:
 Nino Satria
 Lokasi:
 Taman Safari Indonesia
 Model:
 Tally Giraffe
 Tarikh:
 16 Ogos 2009 
  Juru gambar:
 Timo Balk
 Lokasi:
 Ubud, Bali, Indonesia
 Model:
 Tawaran
 Tarikh:
 20 Dis, 2009 
  Juru gambar:
 Aris Wjay
 Lokasi:
 Uluwatu-Bali
 Model:
 Pantai yang Indah
 Tarikh:
 Jul 20, 2011

Sekarang, jika kita buka index.html dalam pelayar, kami mempunyai sesuatu seperti ini:

Langkah 30

Kami masih perlu menetapkan penampilan slider menggunakan CSS.

 #slidewrap position: absolute; #slider position: relative; ketinggian: auto; lebar: 920px; sempadan: 10px pepejal #fff; box-shadow: 0 0 5px # 444; margin: 10px;  .ribbon latar belakang: url telus (img / info-bg.png) no-repeat; ketinggian: 482px; lebar: 192px; kedudukan: mutlak; kanan: 40px; atas: -3px; z-indeks: 50;  #slider img position: absolute; atas: 0px; kiri: 0px; paparan: tiada;

Inilah yang kita ada sekarang.

Pada masa ini, kami telah memaut plugin Nivo slider tetapi kami tidak menyambungkan skrip tersebut. Oleh itu mari kita menghubungkan skrip dengan menambah fungsi JavaScript ini di antara dan elemen.

Langkah 31: Gaya Slider

Langkah terakhir ialah menambahkan gaya gelangsar.

 / * Gaya Nivo Slider * / .nivoSlider kedudukan: relatif;  .nivoSlider img position: absolute; atas: 0px; kiri: 0px;  / * Jika imej dibungkus dalam pautan * / .nivoSlider a.nivo-imageLink position: absolute; atas: 0px; kiri: 0px; lebar: 100%; ketinggian: 100%; sempadan: 0; padding: 0; margin: 0; z-indeks: 6; paparan: tiada;  / * Irisan dan kotak di Slider * / .nivo-slice display: block; kedudukan: mutlak; z-indeks: 5; ketinggian: 100%;  .nivo-box display: block; kedudukan: mutlak; z-indeks: 5;  .nivo-directionNav paparan: none! important .nivo-html-caption display: none;  .nivo-caption position: absolute; betul: 20px; teks-align: center; atas: 130px; lebar: 192px; z-indeks: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute; bawah: 10px; betul: 20px; ketinggian: 15px; lebar: 192px; teks-align: center; paparan: blok; z-index: 51;  .nivo-controlNav a background: url transparent (img / button.png) no-repeat center center; paparan: blok dalam talian; ketinggian: 14px; lebar: 14px; teks-indent: -9999px; kursor: penunjuk;  .nivo-controlNav .active background: url transparent (img / button_active.png);

Keputusan Akhir + Muat Turun

Inilah hasil akhir kami, klik di sini untuk melihat demo kerja.

Tidak dapat mencapai langkah tertentu? Berikut adalah fail PSD hasil & projek lengkap untuk anda menguji dan bermain dengan.

Fail Slider Tutorial Fail JPA
Tutorial Slider Imej Lengkap Projek