Photoshop ve jQuery kullanarak Resim Kaydırıcı Nasıl Oluşturulur

Kuşkusuz, resim kaydırıcısı, iş web tasarımında en sık kullanılan unsurlardan biridir, çünkü ziyaretçinin siteye ulaştığında dikkatini çekebilecek büyüklüğü nedeniyle. Web, görüntü kaydırıcısının kullanılabilirliği hakkında yeniden düşünmeye başlasa da, yine de web tasarım endüstrisinin yeni gelenleri için öğrenmesi gereken bir ders olarak kabul ediliyor..

Bu web tasarım dersinde, nihai sonucu buradan önizleyebileceğiniz Photoshop kullanarak yukarıda özel resim kaydırıcısını oluşturmayı öğreneceğiz. Sadece Photoshop'ta göstermeyeceğiz, aynı zamanda HTML / CSS'ye dönüştürerek ve harika kayma efekti için jQuery ekleyerek işlevsel bir tasarıma dönüştüreceğiz..

Çok fazla karmaşık parçaya benziyor, ama aslında oldukça basit ve anlaşılması çok kolay, hadi başlayalım.!

Bir resim kaydırıcısını benimsemek ve yolda özelleştirmek için daha fazla ilgileniyor musunuz? İşte size özel yazılar.

• Image Slider: 23 jQuery Sürgüleri
• Image Slider: 18 WordPress Eklentileri

Başlamak

Bu eğitim için aşağıdaki kaynaklara ihtiyacınız olacak:

• PSDfreemium'dan 26 Tekrarlanabilir Piksel Deseni.
• jQuery kütüphanesi
• Nivo Slider eklentisi
• Modernizr
• VandelayPremier'den Bulunan Kağıt Dokular
• (Alternatif) Aşırı dozdan 13 HQ Old Paper Textures
• Rinjani Ciaciya tarafından
• Agnes Sim tarafından Stupa
• Nino Satria tarafından Tally
• Teklifler Timo Balk
• Aris Wjay tarafından Uluwatu-Bali

Bölüm I - Image Slider Tasarımı

Adım 1: Arkaplan Kurma

1000 × 700 px boyutunda yeni bir dosya oluşturarak başlayın. Arka planı renkle doldurun # efc89e.

PSDfreemium'dan ücretsiz piksel desenini kullanarak Desen Yerleşimi ekleyin.

Adım 2: Sürgü Tabanı

Dikdörtgen Aracı'nı etkinleştirin. 940 × 450 piksel boyutunda bir dikdörtgen oluşturun. Herhangi bir rengi kullanabilirsiniz, farketmez.

Katman Stili iletişim kutusunu açmak için katmanı çift tıklatın. Katman Stili Alt Gölge, Dış Işıma ve Kontur Ekleme.

Sonuç bu. Kaydırıcı tabanın arkasında yumuşak gölgeli güzel bir çerçeve var.

Aşama 3

Bir fotoğraf ekleyin ve sürgü tabanının üstüne yerleştirin. Kırpma Maskesi'ne dönüştürmek için Ctrl + Alt + G tuşlarına basın ve fotoğrafı kaydırıcıya yerleştirin.

4. Adım: Şerit

Şerit olarak kullanılacak renkli # f4e1ae ile dikdörtgen bir şekil çizin.

Şeklin katmanını çift tıklatın ve aşağıdaki ayarları kullanarak Eğim Ver ve Kabart, Degrade Yerleşimi ve Desen Yerleşimini etkinleştirin.

Katman Stilleri eklendikten sonraki sonuç budur.

Adım 5

Daha gerçekçi hale getirmek için şerit üzerine kağıt dokusu ekleyelim. Doku şerit şeklinin üstüne yerleştirin. Ctrl + Alt + G tuşlarına basarak Kırpma Maskesine dönüştürün.

6. adım

Şerit üzerine bazı gölgeler ve vurgular çizelim. Şeridin üstünde yeni katman oluşturun. Şeridin alt kısmına siyah boyayın. Kırpma Maskesine (Ctrl + Alt + G) dönüştürün ve Opaklığını% 10'a düşürün.

7. adım

Şeridin üst kısmına önceki işlemi tekrarlayın. Fakat bu kez, beyaza boyayarak vurgulayın ve Opaklığını% 50'ye düşürün.

Adım 8: Dikişler

Kurşun Kalem Aracı'nı etkinleştirin. Fırça ayarını açmak için F5'e basın. Fırça boyutunu 1 piksele ayarlayın ve önizleme alanında noktalı bir çizgi elde edene kadar boşluğu artırın.

9. adım

Şeridin üstüne 1 px siyah çizgi çizin. Opaklığını% 20'ye düşür. Ctrl + J tuşlarına basarak yinelenen katman. Rengini tersine çevirmek için Ctrl + I tuşlarına basın. Opaklığı% 50'ye yükseltin. Taşı Aracı'nı etkinleştirin ve ardından kaydırmak için aşağı oka ve sol oka bir kez basın..

İşte sonuç% 100 büyütmede görülüyor.

10. Adım

Şeridin diğer tarafına diğer dikişleri çizmek için bu işlemi tekrarlayın..

Adım 11: Süslü Şekil Ekleme

Ön plan rengini gri olarak ayarlayın. Süslü bir şekil çizmek için 1 px boyutunda yumuşak bir fırça kullanın. Yaratıcı olun, istediğiniz herhangi bir şekli kullanabilirsiniz. Yanına, 1 piksellik bir çizgi çizin ve yumuşak bir Silgi Aracı kullanarak dış kenarını silin. Çizgiyi çoğaltın, yatay olarak çevirin ve diğer tarafa yerleştirin.

Adım 1/2

Tüm süslü katmanları seçin ve Ctrl + E tuşlarına basarak bir katmana birleştirin. Şekli çoğaltın ve ardından orijinal süslü şeklin altına yerleştirin. Rengini tersine çevirmek için Ctrl + I tuşlarına basın. Taşıma Aracı'nı etkinleştirin ve ardından 1 piksel aşağı kaydırmak için aşağı oka bir kez basın..

Adım 13: Fotoğraf Bilgisi

Fotoğraf verilerini şeridin içine yazın.

Adım 14: Gezinme

Sonra, slayt gezinti için bazı çevreler çizeceğiz. Renkli bir daire şekli çizin: şeridin alt tarafında # 8d877c.

Aşağıdaki ayarları kullanarak İç Gölge'yi ekleyin.

Sonuç bu. Çember şimdi sığ bir deliğe dönüşüyor.

15. adım

Alt'ı basılı tutun ve çoğaltmak için daire şekli katmanını sürükleyin.

16. adım

Bu bağlantılardan birinde aktif durumu ayarlayalım. Daireden birini seçin ve rengini # bebbb5 olarak değiştirin. İç Gölge, Degrade Yerleşimi ve Konturu Ekleme.

17. Adım

Ctrl tuşunu basılı tutun ve ardından Katmanlar Panelinde şerit tabanı küçük resmine tıklayın. Şeridin altında yeni katman oluşturun ve siyahla doldurun. Taşıma Aracı'nı etkinleştirin ve birkaç kez sola ve aşağı oka basın.

18. adım

Gauss Bulanıklığı filtresi uygulayarak yumuşatın. Filtre> Bulanıklaştır> Gauss Bulanıklığı'nı tıklayın..

19. Adım

Şerit gölgeyi kaydırıcı çerçeve katmanının üzerine yerleştirin. Ctrl + Alt + G tuşlarına basarak Kırpma Maskesine dönüştürün.

20. adım

Gölge Opaklığını% 40'a düşür.

21. Adım

Şerit gölge arka plan üzerinde boya. Opaklığını% 20'ye düşürün.

Adım 22

Şeridin bir kısmını geri çekmek için Kalem Aracını kullanın. Rengini # b68f63 olarak ayarlayın. Kaydırıcının arkasına yerleştirin.

Bu,% 100 büyütmede görülen sonuçtur..

23. Adım

Yeni oluşturduğumuz şekli kopyalayın ve şeridin tepesinin arkasına yerleştirin. Dikey olarak çevir.

Adım 24: Photoshop'ta Son Sonuç

Bu Photoshop'taki son sonucumuz. Sonra, işlevsel bir kaydırıcıda kodlamaya devam edeceğiz.

Bölüm II - HTML / CSS'ye Dönüştürme

Adım 25 - Dosyaları Kurma

Adlı yeni bir klasör oluşturun. Benim-Fotoğraf-Sürgü. Bu klasörün içinde yeni bir boş HTML belgesi oluşturun (index.html), boş stil sayfası (style.css) ve görüntüler için klasör (img). Ayrıca jQuery kütüphanesini ve Nivo Slider eklentisini de klasöre eklememiz gerekiyor. HTML5 işaretlemesini kullandığımız gibi, IE 8 veya daha üstündeki HTML5 öğelerini etkinleştirmek için bir IE hack eklememiz gerekir. IE'ye uyum sağlamak için Modernizr adlı bir komut dosyası kullanacağız.

Adım 26 - Temel HTML İşaretlemesi

Açık index.html En sevdiğiniz kod editöründe. Tanımlayın DOCTYPE (HTML5 kullanıyoruz), kafa öğeler (belgelerin başlığını eklediğimiz ve CSS ile JavaScript'i (jQuery Library, Nivo Slider ve Modernizr) bağlayacağız. div sarıcı (düzeni ortalamak için), başlık öğe ve kaydırıcı.

Adım 27 - Dilim PSD

PSD maketini açın ve gerekli tüm görüntüleri dilimleyin. Resim için sxc.hu'dan aşağıdaki resimleri alalım (giriş yapmanız gerekiyor, henüz bir hesabınız yoksa, ücretsiz kaydolabilirsiniz). Tüm görüntüleri 920 × 430 piksel değerine yeniden boyutlandırın. Tüm görüntüleri resim klasörüne yerleştirin (img).

1. Rinjani Ciaciya tarafından
2. Agnes Sim tarafından Stupa
3. Nino Satria tarafından Tally
4. Teklifler Timo Balk
5. Aris Wjay tarafından Uluwatu-Bali

Adım 28 - Başlık Oluştur

Aşağıdaki kodları arasına ekleyin.

ve

.

 
 Fotoğraf Slaytlarım 
 

Şimdi başlığa stil ekleyelim. Ayrıca gövde ve sarıcı elemanlar için stil ekledik. Tüm stilleri stil sayfasına yerleştirin, style.css.

 / * Temel Tasarım * / gövde background: transparent url (img / bg.jpg); font: 15px / 2 'Adobe Caslon Pro', Gürcistan, Şerif; marjı: 0; dolgu: 0;  a outline: 0 none #pagewrap margin: 120px otomatik; dolgu: 0; konum: göreceli; Yükseklik: 100%; en: 960 piksel x;  başlık display: block; Sağa çık; margin-right: 40px; en: 192px; Z-endeksi: 52; konum: göreceli;  h1 background: transparent url (img / separator.png) tekrarlanmayan merkez alt; / * Başlığın altına bir ayırıcı çizgi ekleyin * / font-size: 18px; Font-ağırlık: Kalın; yüksekliği: 70 piksel; satır yüksekliği: 1.1; marj: 55 piksel 10 piksel 0; text-align: center; Metin-dönüşümü: büyük harf;  

Adım 29 - Fotoğraf Kaydırıcı Ekle

Şimdi, belgemizin ana bölümüne, fotoğraf kaydırıcısına kod ekleyeceğiz. Önce fotoğrafları ekleyelim. Bu aşağıdaki kodları arasına yerleştirin.

.

Ve sonra fotoğraflar için şerit ve resim yazısı ekleyin.

 
 
 Fotoğrafçı:
 Enrico Nunziati
 Yer:
 Namib Çölü
 Model:
 Ölü Vlei
 Tarih:
 18 Mar 2011 
 
 Fotoğrafçı:
 Lina Dhammanari
 Yer:
 Lombok Adası, Endonezya
 Model:
 Rinjani Dağı
 Tarih:
 8 Mayıs 2008 
 
 Fotoğrafçı:
 Agnes Sim
 Yer:
 Borobudur, Endonezya
 Model:
 Büyük Stupa
 Tarih:
 12 Haz 2008 
 
 Fotoğrafçı:
 Nino Satria
 Yer:
 Taman Safari Endonezya
 Model:
 Taksitli zürafa
 Tarih:
 16 Ağu 2009 
 
 Fotoğrafçı:
 Timo Balk
 Yer:
 Ubud, Bali, Endonezya
 Model:
 teklifleri
 Tarih:
 20 Ara 2009 
 
 Fotoğrafçı:
 Aris Wjay
 Yer:
 Uluwatu-Bali
 Model:
 Güzel bir plaj
 Tarih:
 20 Tem 2011 
 

Şimdi açarsak index.html Tarayıcıda şöyle bir şeyimiz var:

30. adım

CSS kullanarak kaydırıcının görünümünü düzeltmemiz gerekiyor.

 #slidewrap position: absolute; #slider position: relat; yüksekliği: otomatik; en: 920px; sınır: 10px katı #fff; kutu-gölge: 0 0 5px # 444; marjı: 10px;  .ribbon background: transparent url (img / info-bg.png) tekrar yok; Yükseklik: 482px; en: 192px; konum: mutlak; Sağ: 40px; En: -3px; Z-endeksi: 50;  #slider img position: absolute; En: 0px; left: 0px; görüntü yok;  

Şimdi sahip olduğumuz şey bu.

Şu anda, Nivo slider eklentisini bağladık, ancak betiği bağlamadık. Öyleyse, bu JavaScript işlevlerini arasına ekleyerek komut dosyasını bağlayalım. ve eleman.

Adım 31: Kaymak Stili

Son adım, kaydırıcının stilini eklemek..

 / * Nivo Slider stilleri * / .nivoSlider position: relat;  .nivoSlider img position: absolute; En: 0px; left: 0px;  / * Bir resim bir bağlantıya sarılırsa * / .nivoSlider a.nivo-imageLink position: absolute; En: 0px; left: 0px; en: 100%; Yükseklik: 100%; border: 0; dolgu: 0; marjı: 0; Z-endeksi: 6; görüntü yok;  / * Kaydırıcıdaki dilimler ve kutular * / .nivo-slice display: block; konum: mutlak; Z-endeksi: 5; Yükseklik: 100%;  .nivo-box ekran: blok; konum: mutlak; Z-endeksi: 5;  .nivo-directionNav görüntüleme: yok! önemli .nivo-html-caption görüntüleme: yok;  .nivo-caption position: mutlak; Sağ: 20px; text-align: center; En: 130px; en: 192px; Z-endeksi: 60;  .nivo resim yazısı p marj: 0 .nivo resim yazısı .title font-style: italic .nivo-controlNav position: absolute; alt: 10px; Sağ: 20px; yüksekliği: 15 piksel; en: 192px; text-align: center; Ekran bloğu; Z-endeksi: 51;  .nivo-controlNav a background: transparent url (img / button.png) tekrarlanmayan merkez merkezi; Ekran: sıralı blok; yüksekliği: 14px; en: 14px; text-indent: -9999px; İmleç: işaretçi;  .nivo-controlNav .active background: transparent url (img / button_active.png);  

Son Sonuç + İndir

Bu bizim nihai sonucumuz, çalışma demosunu görmek için buraya tıklayın.

Belli bir adımı alamıyor musunuz? İşte sonucun PSD dosyası ve test edip oynayabileceğiniz eksiksiz bir proje..

• Image Slider Tutorial PSD Dosyası
• Image Slider Tutorial Tamamlanmış Proje