วิธีสร้าง Image Slider โดยใช้ Photoshop & jQuery

ไม่ต้องสงสัยเลยว่าแถบเลื่อนรูปภาพเป็นองค์ประกอบที่ใช้บ่อยที่สุดในการออกแบบเว็บไซต์ธุรกิจเนื่องจากมีขนาดค่อนข้างใหญ่ที่สามารถดึงดูดความสนใจของผู้เข้าชมเมื่อมาถึงเว็บไซต์ แม้ว่าเว็บได้เริ่มคิดใหม่เกี่ยวกับการใช้งานตัวเลื่อนรูปภาพ แต่ก็ยังถือว่าเป็นสิ่งที่ต้องเรียนรู้สำหรับผู้มาใหม่ของอุตสาหกรรมการออกแบบเว็บ.

ในบทช่วยสอนการออกแบบเว็บนี้เราจะเรียนรู้การสร้างแถบเลื่อนรูปภาพที่กำหนดเองด้านบนโดยใช้ Photoshop ซึ่งคุณสามารถดูตัวอย่างผลลัพธ์สุดท้ายได้จากที่นี่ ไม่เพียง แต่เราจะแสดงให้เห็นใน Photoshop เรายังจะเปลี่ยนเป็นการออกแบบให้ใช้งานได้โดยแปลงเป็น HTML / CSS และเพิ่ม jQuery เพื่อเอฟเฟกต์การเลื่อนที่ยอดเยี่ยม.

ฟังดูเหมือนบิตที่ซับซ้อนมากมายที่เกี่ยวข้อง แต่อันที่จริงแล้วมันค่อนข้างตรงไปตรงมาและเข้าใจง่ายมากมาเริ่มกันเลยดีกว่า!

สนใจมากขึ้นเกี่ยวกับการใช้แถบเลื่อนรูปภาพและปรับแต่งตามวิธีหรือไม่ นี่คือโพสต์เฉพาะสำหรับคุณ.

Image Slider: 23 jQuery Sliders
Image Slider: 18 ปลั๊กอินของเวิร์ดเพรส

เริ่มต้นใช้งาน

สำหรับบทช่วยสอนนี้คุณจะต้องใช้ทรัพยากรต่อไปนี้:

26 รูปแบบพิกเซลซ้ำจาก PSDfreemium.
ห้องสมุด jQuery
ปลั๊กอิน Nivo Slider
Modernizr
พบ Textures Paper จาก VandelayPremier
(ทางเลือก) 13 พื้นผิวกระดาษเก่า HQ จากการโอเวอร์โหลด
Rinjani โดย Ciaciya
เจดีย์โดย Agnes Sim
Tally โดย Nino Satria
การเสนอขายโดย Timo Balk
Uluwatu-Bali โดย Aris Wjay

ส่วนที่ 1 - การออกแบบตัวเลื่อนภาพ

ขั้นตอนที่ 1: การตั้งค่าพื้นหลัง

เริ่มต้นด้วยการสร้างไฟล์ใหม่ที่มีขนาด 1,000 × 700 px เติมพื้นหลังด้วย color # efc89e.

เพิ่มการซ้อนทับแบบโดยใช้รูปแบบพิกเซลแบบฟรีจาก PSDfreemium.

ขั้นตอนที่ 2: Slider Base

เปิดใช้งานเครื่องมือสี่เหลี่ยมผืนผ้า สร้างสี่เหลี่ยมผืนผ้าด้วยขนาด 940 × 450 px คุณสามารถใช้สีใดก็ได้มันไม่สำคัญ.

ดับเบิลคลิกเลเยอร์เพื่อเปิดกล่องโต้ตอบสไตล์เลเยอร์ เพิ่ม Layer Style Drop Shadow, Outer Glow และ Stroke.

นี่คือผลลัพธ์ ฐานตัวเลื่อนตอนนี้มีกรอบที่ดีพร้อมเงาที่นุ่มนวลด้านหลัง.

ขั้นตอนที่ 3

เพิ่มภาพถ่ายและวางไว้เหนือฐานเลื่อน กด Ctrl + Alt + G เพื่อแปลงเป็น Clipping Mask และแทรกภาพถ่ายลงในแถบเลื่อน.

ขั้นตอนที่ 4: ริบบิ้น

วาดรูปสี่เหลี่ยมผืนผ้าด้วย color # f4e1ae เพื่อใช้เป็นริบบิ้น.

ดับเบิลคลิกที่เลเยอร์ของรูปร่างแล้วเปิดใช้งาน Bevel และ Emboss, Gradient Overlay และ Pattern Overlay ด้วยการตั้งค่าต่อไปนี้.

นี่คือผลลัพธ์หลังจากเพิ่มสไตล์เลเยอร์.

ขั้นตอนที่ 5

ลองเพิ่มพื้นผิวกระดาษลงบนริบบิ้นเพื่อทำให้สมจริงยิ่งขึ้น วางพื้นผิวด้านบนของรูปทรงริบบิ้น แปลงเป็นรูปแบบการตัดโดยกด Ctrl + Alt + G.

ขั้นตอนที่ 6

ลองวาดเงาและไฮไลท์ลงบนริบบิ้น สร้างเลเยอร์ใหม่เหนือริบบิ้น วาดสีดำที่ส่วนล่างของริบบิ้น แปลงเป็น Clipping Mask (Ctrl + Alt + G) จากนั้นลด Opacity เป็น 10%.

ขั้นตอนที่ 7

ทำซ้ำกระบวนการก่อนหน้านี้ไปยังส่วนบนของริบบิ้น แต่คราวนี้เพิ่มไฮไลต์ด้วยการทาสีขาวแล้วลดความทึบของมันลง 50%.

ขั้นตอนที่ 8: เย็บแผล

เปิดใช้งานเครื่องมือดินสอ กด F5 เพื่อเปิดการตั้งค่าแปรง ตั้งขนาดแปรงเป็น 1 px และเพิ่มระยะห่างจนกว่าเราจะได้เส้นประบนพื้นที่แสดงตัวอย่าง.

ขั้นตอนที่ 9

วาดเส้นดำขนาด 1 px ที่ด้านบนของริบบิ้น ลดความทึบของมันลง 20% ทำซ้ำเลเยอร์โดยการกด Ctrl + J กด Ctrl + I เพื่อสลับสี เพิ่มความทึบแสงเป็น 50% เปิดใช้งานเครื่องมือย้ายแล้วกดลูกศรลงและลูกศรซ้ายหนึ่งครั้งเพื่อเขยิบมัน.

นี่คือผลลัพธ์ที่ดูที่การขยาย 100%.

ขั้นตอนที่ 10

ทำซ้ำขั้นตอนนี้เพื่อวาดลายอื่น ๆ ที่ด้านอีกด้านของริบบิ้น.

ขั้นตอนที่ 11: เพิ่มรูปร่างที่หรูหรา

ตั้งค่าสีพื้นหน้าเป็นสีเทา ใช้แปรงขนนุ่มที่มีขนาด 1 px เพื่อวาดรูปร่างที่หรูหรา มีความคิดสร้างสรรค์คุณสามารถใช้รูปร่างที่คุณชอบ ถัดจากนั้นวาดเส้น 1 px แล้วลบขอบด้านนอกโดยใช้เครื่องมือยางลบที่อ่อนนุ่ม ทำซ้ำบรรทัดพลิกแนวนอนแล้ววางอีกด้านหนึ่ง.

ขั้นตอนที่ 12

เลือกเลเยอร์หรูหราทั้งหมดและรวมเข้าไปในเลเยอร์เดียวโดยการกด Ctrl + E รูปร่างที่ซ้ำกันแล้ววางไว้ภายใต้รูปร่างดั้งเดิมที่หรูหรา กด Ctrl + I เพื่อกลับสี เปิดใช้งานเครื่องมือย้ายแล้วกดลูกศรลงหนึ่งครั้งเพื่อเขยิบมันลง 1 px.

ขั้นตอนที่ 13: ข้อมูลรูปภาพ

พิมพ์ข้อมูลภาพถ่ายภายในริบบิ้น.

ขั้นตอนที่ 14: การนำทาง

ต่อไปเราจะวาดวงกลมสำหรับการนำทางด้วยสไลด์ วาดรูปร่างวงกลมด้วยสี: # 8d877c ที่ส่วนล่างของริบบิ้น.

เพิ่ม Inner Shadow โดยใช้การตั้งค่าต่อไปนี้.

นี่คือผลลัพธ์ วงกลมหมุนเป็นรูตื้นในขณะนี้.

ขั้นตอนที่ 15

กดปุ่ม Alt ค้างไว้แล้วลากเลเยอร์รูปร่างวงกลมเพื่อทำซ้ำ.

ขั้นตอนที่ 16

มาตั้งค่าสภาพแอคทีฟบนลิงค์ใดลิงค์หนึ่งเหล่านี้ เลือกวงกลมหนึ่งวงแล้วเปลี่ยนสีเป็น # bebbb5 เพิ่ม Inner Shadow, Gradient Overlay และ Stroke.

ขั้นตอนที่ 17

กดปุ่ม Ctrl ค้างไว้แล้วคลิกที่รูปขนาดย่อของฐานริบบิ้นในแผงเลเยอร์ สร้างเลเยอร์ใหม่ภายใต้ริบบิ้นและเติมด้วยสีดำ เปิดใช้งานเครื่องมือย้ายแล้วกดลูกศรซ้ายและลูกศรสองสามครั้ง.

ขั้นตอนที่ 18

ทำให้นิ่มลงโดยใช้ตัวกรอง Gaussian Blur คลิกตัวกรอง> เบลอ> Gaussian Blur.

ขั้นตอนที่ 19

วางเงาริบบิ้นไว้เหนือเลเยอร์เฟรมของตัวเลื่อน แปลงเป็นรูปแบบการตัดโดยกด Ctrl + Alt + G.

ขั้นตอนที่ 20

ลดความทึบของเงาเป็น 40%.

ขั้นตอนที่ 21

วาดเงาริบบิ้นบนพื้นหลัง ลดความทึบของมันลง 20%.

ขั้นตอนที่ 22

ใช้เครื่องมือปากกาเพื่อดึงส่วนหลังของริบบิ้น ตั้งค่าสีเป็น # b68f63 วางไว้ด้านหลังตัวเลื่อน.

นี่คือผลลัพธ์ที่ดูที่การขยาย 100%.

ขั้นตอนที่ 23

ทำซ้ำรูปร่างที่เราเพิ่งสร้างขึ้นและวางไว้ด้านหลังด้านบนของริบบิ้น พลิกมันในแนวตั้ง.

ขั้นตอนที่ 24: ผลลัพธ์สุดท้ายใน Photoshop

นี่คือผลลัพธ์สุดท้ายของเราใน Photoshop ต่อไปเราจะรหัสต่อไปในแถบเลื่อนการทำงาน.

ส่วนที่ II - การแปลงเป็น HTML / CSS

ขั้นตอนที่ 25 - การตั้งค่าไฟล์

สร้างโฟลเดอร์ใหม่ที่เรียกว่า My-ภาพ Slider. ภายในโฟลเดอร์นี้สร้างเอกสาร HTML เปล่าใหม่ (index.html) สไตล์ชีทว่างเปล่า (style.css) และโฟลเดอร์สำหรับภาพ (img) เราจำเป็นต้องรวมไลบรารี jQuery และปลั๊กอิน Nivo Slider ไว้ในโฟลเดอร์ด้วย เนื่องจากเราใช้มาร์กอัป HTML5 เราจำเป็นต้องเพิ่มแฮ็ค IE เพื่อเปิดใช้งานองค์ประกอบ HTML5 ใน IE 8 หรือต่ำกว่า เราจะใช้สคริปต์ชื่อ Modernizr เพื่อรองรับ IE.

ขั้นตอนที่ 26 - มาร์กอัป HTML พื้นฐาน

เปิด index.html ในเครื่องมือแก้ไขรหัสที่คุณชื่นชอบ กำหนด DOCTYPE (เราใช้ HTML5), หัว องค์ประกอบ (ที่เราเพิ่มชื่อของเอกสารและลิงค์ CSS และ JavaScript (jQuery Library, Nivo Slider และ Modernizr) นอกจากนี้เรายังเพิ่ม div wrapper (เพื่อจัดกึ่งกลางเค้าโครง), ส่วนหัว องค์ประกอบและเสื้อคลุมสไลด์.

      My Photo Slides

ขั้นตอนที่ 27 - Slice PSD

เปิด mockup PSD และแบ่งภาพที่จำเป็นทั้งหมดออก สำหรับรูปภาพลองจับภาพจาก sxc.hu (ต้องลงชื่อเข้าใช้หากคุณยังไม่มีบัญชีคุณสามารถสมัครได้ฟรี) ปรับขนาดภาพทั้งหมดเป็น 920 × 430 px ใส่ภาพทั้งหมดลงในโฟลเดอร์ภาพ (img).

Rinjani โดย Ciaciya
เจดีย์โดย Agnes Sim
Tally โดย Nino Satria
การเสนอขายโดย Timo Balk
Uluwatu-Bali โดย Aris Wjay

ขั้นตอนที่ 28 - สร้างส่วนหัว

เพิ่มรหัสต่อไปนี้ระหว่าง

และ

  My Photo Slides

ตอนนี้ขอเพิ่มสไตล์ให้กับส่วนหัว นอกจากนี้เรายังเพิ่มสไตล์สำหรับองค์ประกอบร่างกายและเสื้อคลุม ใส่สไตล์ทั้งหมดลงในสไตล์ชีท, style.css.

 / * การออกแบบพื้นฐาน * / เนื้อหา พื้นหลัง: URL โปร่งใส (img / bg.jpg); แบบอักษร: 15px / 2 'Adobe Caslon Pro', จอร์เจีย, เซริฟ; margin: 0; padding: 0;  a outline: 0 none #pagewrap margin: 120px auto; padding: 0; ตำแหน่ง: ญาติ; ความสูง: 100%; ความกว้าง: 960px;  header display: block; ลอย: ขวา; ขอบขวา: 40px; ความกว้าง: 192px; ดัชนี z: 52; ตำแหน่ง: ญาติ;  h1 background: url โปร่งใส (img / separator.png) ที่กึ่งกลางศูนย์ไม่ซ้ำ / * เพิ่มบรรทัดคั่นใต้หัวเรื่อง * / font-size: 18px; font-weight: หนา; ความสูง: 70px; line-height: 1.1; กำไรขั้นต้น: 55px 10px 0; text-align: ศูนย์; ข้อความเปลี่ยน: พิมพ์ใหญ่;

ขั้นตอนที่ 29 - เพิ่ม Photo Slider

ตอนนี้เรากำลังจะเพิ่มรหัสไปยังส่วนหลักของเอกสารของเราคือตัวเลื่อนรูปถ่าย เพิ่มรูปภาพก่อนเถอะ วางรหัสต่อไปนี้ระหว่าง

และ

จากนั้นเพิ่มริบบิ้นและคำบรรยายใต้ภาพสำหรับภาพถ่าย.

 
  ช่างภาพ:
 Enrico Nunziati
 สถานที่ตั้ง:
 ทะเลทรายนามิบ
 รุ่น:
 Vlei ที่ตายแล้ว
 วันที่:
 18 มีนาคม 2554 
  ช่างภาพ:
 Lina Dhammanari
 สถานที่ตั้ง:
 เกาะลอมบอกประเทศอินโดนีเซีย
 รุ่น:
 ภูเขารินจานี
 วันที่:
 8 พฤษภาคม 2008 
  ช่างภาพ:
 Agnes Sim
 สถานที่ตั้ง:
 Borobudur อินโดนีเซีย
 รุ่น:
 เจดีย์ใหญ่
 วันที่:
 12 มิ.ย. 2551 
  ช่างภาพ:
 Nino Satria
 สถานที่ตั้ง:
 ทามานซาฟารีอินโดนีเซีย
 รุ่น:
 ยีราฟนับ
 วันที่:
 16 ส.ค. 2009 
  ช่างภาพ:
 Timo Balk
 สถานที่ตั้ง:
 อูบุดบาหลีอินโดนีเซีย
 รุ่น:
 การเสนอขาย
 วันที่:
 20 ธันวาคม 2009 
  ช่างภาพ:
 Aris Wjay
 สถานที่ตั้ง:
 Uluwatu บาหลี
 รุ่น:
 ชายหาดที่สวยงาม
 วันที่:
 20 ก.ค. 2554

ตอนนี้ถ้าเราเปิด index.html ในเบราว์เซอร์เรามีสิ่งนี้:

ขั้นตอนที่ 30

เรายังต้องแก้ไขลักษณะที่ปรากฏของตัวเลื่อนโดยใช้ CSS.

 #slidewrap position: absolute; #slider ตำแหน่ง: ญาติ; ความสูง: อัตโนมัติ; ความกว้าง: 920px; เส้นขอบ: 10px solid #fff; box-shadow: 0 0 5px # 444; margin: 10px;  .ribbon พื้นหลัง: URL โปร่งใส (img / info-bg.png) ไม่ต้องทำซ้ำ; ความสูง: 482px; ความกว้าง: 192px; position: absolute; ขวา: 40px; ด้านบน: -3px; ดัชนี z: 50;  #slider img position: absolute; ด้านบน: 0px; ซ้าย: 0px; display: none;

นี่คือสิ่งที่เรามีตอนนี้.

ขณะนี้เราได้เชื่อมโยงปลั๊กอินตัวเลื่อนของ Nivo แต่เรายังไม่ได้ติดตั้งสคริปต์ ดังนั้นขอเบ็ดสคริปต์โดยการเพิ่มฟังก์ชั่น JavaScript เหล่านี้ระหว่าง และ ธาตุ.

ขั้นตอนที่ 31: สไตล์สไลเดอร์

ขั้นตอนสุดท้ายคือการเพิ่มสไตล์ของแถบเลื่อน.

 / * สไตล์ Nivo Slider * / .nivoSlider ตำแหน่ง: ญาติ;  .nivoSlider img position: absolute; ด้านบน: 0px; ซ้าย: 0px;  / * หากภาพถูกห่อในลิงค์ * / .nivoSlider a.nivo-imageLink position: absolute; ด้านบน: 0px; ซ้าย: 0px; ความกว้าง: 100%; ความสูง: 100%; ชายแดน: 0; padding: 0; margin: 0; ดัชนี z: 6; display: none;  / * ชิ้นและกล่องใน Slider * / .nivo-slice display: block; position: absolute; ดัชนี z: 5; ความสูง: 100%;  .nivo-box display: block; position: absolute; ดัชนี z: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption position: absolute; ขวา: 20px; text-align: ศูนย์; ด้านบน: 130 x; ความกว้าง: 192px; ดัชนี z: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 10px; ขวา: 20px; ความสูง: 15px; ความกว้าง: 192px; text-align: ศูนย์; จอแสดงผล: บล็อก; ดัชนี z: 51;  .nivo-controlNav a background: url โปร่งใส (img / button.png) ศูนย์กลางที่ไม่ซ้ำ จอแสดงผล: อินไลน์บล็อก ความสูง: 14px; ความกว้าง: 14px; ข้อความเยื้อง: -9999px; เคอร์เซอร์: ตัวชี้;  .nivo-controlNav. active background: url โปร่งใส (img / button_active.png);

ผลสุดท้าย + ดาวน์โหลด

นี่คือผลสุดท้ายของเราคลิกที่นี่เพื่อดูตัวอย่างการทำงาน.

ไม่สามารถบรรลุขั้นตอนบางอย่างใช่หรือไม่ นี่คือไฟล์ PSD ของผลลัพธ์ & โครงการที่สมบูรณ์เพื่อให้คุณทดสอบและเล่น.

ไฟล์ PSD ของ Slider Tutorial
Image Slider Tutorial เสร็จสมบูรณ์โครงการ