วิธีสร้างเอฟเฟกต์การเลื่อนพื้นหลังสองชั้นด้วย Divi

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

1. กำลังเตรียมไฟล์ภาพสองไฟล์ใน Adobe Photoshop
2. การสร้างการออกแบบภายใน Divi
3. การใช้เอฟเฟกต์การเลื่อนเพื่อทำให้พื้นหลังเคลื่อนไหว

คุณจะสามารถดาวน์โหลดไฟล์ JSON และไฟล์รูปภาพได้ฟรีเช่นกัน!

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลด The Layout ฟรี

หากต้องการวางเลย์เอาต์ฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

1. สร้างไฟล์รูปภาพใน Photoshop

เลือกรูปภาพสินค้าด้วยพื้นหลังที่สะอาด & ​​เปิดใน Photoshop

ในส่วนแรกของบทช่วยสอนนี้ เราจะสร้างไฟล์รูปภาพที่เราจะใช้ตลอดการสอน Divi ในการสร้างสิ่งเหล่านี้ เราจะใช้ Adobe Photoshop แต่อย่าลังเลที่จะใช้ซอฟต์แวร์แก้ไขภาพอื่นๆ ที่คุณเลือก เอฟเฟกต์ภาพพื้นหลังสองชั้นจะทำงานได้ดีที่สุดหากรูปภาพที่คุณใช้งานมี:

1. โฟกัสที่ชัดเจนบนวัตถุภายในภาพ
2. พื้นหลังที่สะอาด

ภาพด้านล่างเป็นตัวอย่างที่สมบูรณ์แบบ คุณสามารถค้นหาไฟล์รูปภาพนี้ได้ในโฟลเดอร์ซิปที่แชร์ในพื้นที่ดาวน์โหลดของโพสต์นี้

เลเยอร์ซ้ำ

เมื่อคุณเปิดภาพใน Photoshop แล้ว ให้โคลนเลเยอร์เดิมหนึ่งครั้ง เราจะดำเนินการกับเลเยอร์ที่ซ้ำกัน

ซ่อนเลเยอร์ดั้งเดิม

เพื่อให้แน่ใจว่าเราเห็นผลลัพธ์ในขณะที่เรากำลังเลื่อนลงในบทช่วยสอน ให้ซ่อนเลเยอร์ดั้งเดิม

สร้าง PNG จากการเลือกวัตถุในภาพ

ใช้เครื่องมือ Quick Selection บนเพลท

โดยรวมแล้ว เราต้องการไฟล์รูปภาพสองไฟล์สำหรับบทช่วยสอน:

1. PNG ของวัตถุ ในกรณีนี้ จาน
2. JPEG ของพื้นหลังที่ ไม่มี วัตถุ

เรากำลังแยกวัตถุออกจากพื้นหลัง เพื่อให้เราสามารถจัดการวัตถุแต่ละชิ้นได้ภายในสภาพแวดล้อม Divi

ในการเริ่มต้นเลือกวัตถุ ให้เลือก "เครื่องมือการเลือกอย่างรวดเร็ว" ในแถบเครื่องมือและพยายามครอบคลุมวัตถุให้มากที่สุด

เลือก + การเลือกมาสก์

คุณจะสังเกตเห็นว่าการเลือกวัตถุยังไม่เพียงพอ คุณสามารถปรับแต่งลักษณะการเลือกของคุณโดยใช้ตัวเลือก "เลือกและปิดบัง" เมื่อคุณคลิกขวาที่ส่วนที่เลือก เมื่อถึงที่หมายแล้ว คุณสามารถเล่นด้วยความโปร่งแสง ความราบรื่น ฯลฯ

สร้าง Layer Mask จาก Selection

แม้ว่าเราจะสร้างการเลือกที่ราบรื่น แต่ก็ยังมีบางส่วนภายในวัตถุที่ยังไม่ได้เลือก เราจะเพิ่มส่วนเหล่านี้ลงในการเลือกของเราด้วยตนเองโดยคลิกที่ปุ่มเลเยอร์มาสก์ที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง:

Finetune Selection Inside Mask พร้อมแปรง

เมื่อสร้างเลเยอร์มาสก์แล้ว คุณสามารถเริ่มใช้แปรงเพื่อแก้ไขเลเยอร์มาสก์ได้ ตรวจสอบให้แน่ใจว่าได้เลือกเลเยอร์มาสก์ของคุณแล้ว

• การใช้แปรงสีดำ (#000) จะลบเลเยอร์มาสก์ของคุณออก
• การใช้แปรงสีขาว (#fff) จะเพิ่มส่วนหลังของเลเยอร์มาสก์ของคุณ

ใช้แปรงที่ไม่มีความแข็งมากเกินไป คุณไม่จำเป็นต้องมีความแม่นยำมาก

ตรวจสอบหน้ากากด้วยเลเยอร์สี

คุณสามารถตรวจสอบเลเยอร์มาสก์ของคุณอีกครั้งโดยวางเลเยอร์สีไว้ด้านล่าง เลเยอร์สีจะปล่อยมันไปได้ง่ายขึ้นหากคุณพลาดจุดหนึ่ง

บันทึกการเลือก PNG เป็นไฟล์รูปภาพแยกต่างหาก

สร้างไฟล์ใหม่

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

ขนาดของวัตถุของเรามีขนาดเล็กกว่าขนาดไฟล์เริ่มต้น ดังนั้นเราจะสร้างไฟล์ใหม่สำหรับวัตถุของเราและนำมันมา

พอดีกับการเลือกในไฟล์ใหม่

คัดลอกและวางเลเยอร์ด้วยเลเยอร์มาสก์ภายในไฟล์ใหม่ที่คุณสร้างขึ้น

ส่งออกสำหรับ Web

และส่งออกไปยังเว็บเป็น PNG

บีบอัดไฟล์รูปภาพ

PNG ที่มีพื้นหลังโปร่งใสมักจะมีขนาดไฟล์ที่ใหญ่กว่า ดังนั้นจึงแนะนำให้คุณบีบอัดไฟล์โดยใช้เครื่องมือที่คุณเลือก

ลบวัตถุในภาพต้นฉบับ

เลือกเลเยอร์มาสก์

กลับไปที่ไฟล์ Photoshop เริ่มต้น! ที่นั่น เราจะสร้างภาพพื้นหลังโดยไม่มีวัตถุ เรากำลังใช้ชั้นบนสุดในไฟล์ของเราเพื่อทำเช่นนั้น ขั้นแรก ตรวจสอบให้แน่ใจว่าได้เลือกเลเยอร์มาสก์ของคุณแล้ว

พลิกหน้ากาก

จากนั้นไปที่คุณสมบัติของเลเยอร์นี้แล้วคลิก "กลับด้าน"

ใช้ Layer Mask

คุณจะสังเกตเห็นว่าวัตถุนั้นโปร่งใสภายในเลเยอร์เริ่มต้น เราจะใช้เลเยอร์มาสก์กับเลเยอร์ของเราโดยคลิกขวาและเลือก "ใช้เลเยอร์มาสก์"

เติมพื้นที่ว่างโดยใช้ Clone Tool

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

บันทึกภาพโดยไม่มีวัตถุ

ส่งออกสำหรับ Web

เมื่อคุณสร้างภาพพื้นหลังโดยไม่มีวัตถุเสร็จแล้ว คุณสามารถบันทึกเป็นไฟล์ JPEG ที่คุณภาพ 70%

บีบอัดไฟล์รูปภาพ

อย่าลืมบีบอัดภาพนี้ด้วย

2. สร้างเอฟเฟกต์พื้นหลังสองชั้นใน Divi

เพิ่มมาตราใหม่

อัพโหลดภาพพื้นหลัง

เมื่อคุณมีไฟล์รูปภาพทั้งสองไฟล์แล้ว ก็ถึงเวลาเปลี่ยนไปใช้ Divi! เปิดหน้าใหม่และเพิ่มส่วนใหม่ อัปโหลดภาพพื้นหลังที่คุณสร้างไว้ในส่วนแรกของบทช่วยสอน

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและใช้ค่าการเว้นวรรคแบบกำหนดเอง ระยะขอบด้านล่างที่เราเพิ่มเข้าไปจะช่วยให้เราเห็นผลที่เข้าที่ โดยปกติ ระยะขอบนี้จะถูกแทนที่ด้วยส่วนถัดไปในการออกแบบของคุณ

• ขอบล่าง: 100vh
• แผ่นรองด้านบน:
  • เดสก์ท็อป: 100px
  • แท็บเล็ตและโทรศัพท์: 50px
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป: 100px
  • แท็บเล็ต: 600px
  • โทรศัพท์: 500px

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ไปที่การตั้งค่าระยะห่างของแถวถัดไป และลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ตำแหน่ง

จากนั้น ปรับตำแหน่งทั้งแถว

• ตำแหน่ง: Absolute
• ที่ตั้ง:
  • เดสก์ท็อป: ศูนย์
  • แท็บเล็ตและโทรศัพท์: Center Bottom
• ออฟเซ็ตแนวตั้ง:
  • เดสก์ทอป: /
  • แท็บเล็ตและโทรศัพท์: 30vh

เพิ่มโมดูลรูปภาพใน Row

อัปโหลดรูปภาพ PNG

เมื่อคุณตั้งค่าแถวเสร็จแล้ว ให้เพิ่มโมดูลรูปภาพในแถวและอัปโหลดไฟล์ PNG ที่คุณสร้างไว้ในส่วนแรกของบทช่วยสอน

การจัดตำแหน่ง

ไปที่แท็บออกแบบและเปลี่ยนการจัดแนวรูปภาพ

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

เปลี่ยนการตั้งค่าขนาดต่อไป

• ความกว้าง:
  • เดสก์ท็อป: 36%
  • แท็บเล็ตและโทรศัพท์: 60%

เพิ่มแถว #2

โครงสร้างคอลัมน์

จากนั้น เพิ่มแถวอื่นในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

เปิดการตั้งค่าแถวและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #ffffff

ขนาด

แก้ไขการตั้งค่าการปรับขนาดต่อไป

• ความกว้าง: 90%
• ความกว้างสูงสุด: 550px
• การจัดแนวแถว:
  • เดสก์ท็อป: ซ้าย
  • แท็บเล็ตและโทรศัพท์: ศูนย์

ระยะห่าง

จากนั้น ใช้ค่าการเติมที่กำหนดเอง

• ช่องว่างภายในด้านบน: 11%
• ช่องว่างภายในด้านล่าง: 11%
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

ออฟเซ็ตแนวนอน

เรากำลังเพิ่มออฟเซ็ตแนวนอนให้กับการตั้งค่าตำแหน่งด้วย

• ออฟเซ็ตแนวนอน:
  • เดสก์ท็อป: 5%
  • แท็บเล็ตและโทรศัพท์: 0%

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 1

เพิ่มเนื้อหา H2

ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกที่มีเนื้อหา H2 บางส่วน

การตั้งค่าข้อความ H2

จัดรูปแบบข้อความ H2 ดังนี้:

• แบบอักษรของหัวเรื่อง 2: Kumbh Sans
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อป: 90px
  • แท็บเล็ต: 60px
  • โทรศัพท์: 45px

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

เพิ่มคำอธิบาย เนื้อหา

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าและแทรกเนื้อหาคำอธิบายที่คุณเลือก

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความของโมดูลตามลำดับ:

• แบบอักษรของข้อความ: Kumbh Sans
• ความสูงของบรรทัดข้อความ: 2em

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

โมดูลสุดท้ายที่เราต้องการในคอลัมน์นี้คือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

จัดรูปแบบปุ่มตามลำดับ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20px
• สีข้อความของปุ่ม: #6b6443
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px

• แบบอักษรของปุ่ม: Kumbh Sans
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• แสดงไอคอนปุ่ม: ใช่
• ตำแหน่งไอคอนปุ่ม: ซ้าย
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: ไม่

กล่องเงา

ใส่เงากล่องด้วย

• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 2px
• สีเงา: #6b6443

3. เพิ่มเอฟเฟกต์การเลื่อน

ภาพเคลื่อนไหวแนวตั้ง

ในส่วนสุดท้ายของบทช่วยสอนนี้ เราจะเน้นที่การเพิ่มเอฟเฟกต์การเลื่อนไปยังโมดูลรูปภาพที่มีไฟล์รูปภาพ PNG เปิดการตั้งค่าของโมดูล ไปที่แท็บขั้นสูง และใช้การตั้งค่าการเคลื่อนไหวในแนวตั้งต่อไปนี้:

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น:
  • เดสก์ท็อป: 0
  • แท็บเล็ตและโทรศัพท์: 4 (ที่ 0%)
• ออฟเซ็ตกลาง:
  • เดสก์ท็อป: 0
  • แท็บเล็ตและโทรศัพท์: 0 (ที่ 97%)
• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: 0
  • แท็บเล็ตและโทรศัพท์: -2 (ที่ 100%)

ภาพเคลื่อนไหวแนวนอน

เรากำลังดำเนินการออกแบบให้เสร็จสิ้นโดยใช้การตั้งค่าการเคลื่อนไหวในแนวนอนดังต่อไปนี้:

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น:
  • เดสก์ท็อป: 0 (ที่ 0%)
  • แท็บเล็ตและโทรศัพท์: 0
• ออฟเซ็ตกลาง:
  • เดสก์ท็อป: 0 (ที่ 65%)
  • แท็บเล็ตและโทรศัพท์: 0 (ที่ 97%)
• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: -10 (ที่ 100%)
  • แท็บเล็ตและโทรศัพท์: 0

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

ในโพสต์นี้ เราได้แสดงวิธีสร้างพื้นหลังสองชั้น และทำให้เคลื่อนไหวด้วยเอฟเฟกต์การเลื่อนในตัวของ Divi ในส่วนแรกของบทช่วยสอน เราได้เตรียมไฟล์รูปภาพไว้ใน Adobe Photoshop ในส่วนที่สองของบทช่วยสอน เราเน้นที่การใช้ไฟล์รูปภาพใน Divi เพื่อสร้างการออกแบบที่ตอบสนอง คุณสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับ Divi และรับ Divi freebies เพิ่มเติม อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้เป็นหนึ่งในคนกลุ่มแรกๆ ที่รู้จักและรับประโยชน์จากเนื้อหาฟรีนี้เสมอ