วิธีสร้างการเปลี่ยนส่วนที่มีรูปร่างไม่สม่ำเสมอด้วย Divi

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

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

ตัวอย่างผลลัพธ์

มาดูตัวอย่างเลย์เอาต์ที่มีการเปลี่ยนส่วนที่มีรูปร่างไม่สม่ำเสมอกันอย่างน่าทึ่งกัน:

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

วิธีสร้างการเปลี่ยนส่วนที่มีรูปร่างไม่สม่ำเสมอด้วย Divi

สมัครสมาชิกช่อง Youtube ของเรา

สร้างเส้นขอบใสด้วย Photoshop

คุณสามารถบรรลุเป็นรูปร่างดั้งเดิมตามที่คุณต้องการด้วย Photoshop คุณสามารถเลือกทางเลือกฟรีที่เรียกว่า GimpShop สำหรับบทช่วยสอนนี้ เราจะใช้ Photoshop

เปิด Photoshop

เริ่มต้นด้วยการเปิด Photoshop บนคอมพิวเตอร์ของคุณ

เปิดภาพ

เมื่อคุณทำเสร็จแล้ว ให้เปิดภาพที่คุณต้องการใช้งาน

ดับเบิลคลิกที่รูปภาพและสร้างเลเยอร์

เมื่อรูปภาพของคุณถูกอัปโหลดใน Photoshop แล้ว ให้ดับเบิลคลิกที่เลเยอร์รูปภาพและสร้างเลเยอร์ใหม่สำหรับเลเยอร์นั้น (เลเยอร์ 0)

เพิ่มเลเยอร์อื่น

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

เลือกแปรง & ขนาด

ในขณะที่เปิดใช้งานเลเยอร์ 1 ให้ไปข้างหน้าและคลิกที่ไอคอนแปรง

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

เริ่มใช้แปรงบนขอบ

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

CTRL (Windows) หรือ Command (Mac) + เลือก New Layer

เมื่อเสร็จแล้ว คุณสามารถกด CTRL (สำหรับ Windows) หรือ Command (สำหรับ Mac) บนแป้นพิมพ์และคลิกที่ Layer 1 พร้อมกัน คุณจะเห็นว่า Photoshop จะเลือกทุกสิ่งที่คุณเพิ่มลงในเลเยอร์นั้น ซึ่งในกรณีนี้คือเส้นขอบที่มีรูปร่าง

ทำให้มองไม่เห็นเลเยอร์ใหม่

ถัดไป ทำให้เลเยอร์ 1 ล่องหนโดยการเอาตาออกตามที่ทำเครื่องหมายไว้ในหน้าจอการพิมพ์ด้านล่าง

เลือกรูปภาพ & ลบเลเยอร์ใหม่

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

เลือกเครื่องมือ Marquee สี่เหลี่ยม & คลิกที่รูปภาพ

คลิกเครื่องมือ Rectangular Marquee Tool แล้วกดแบบสุ่มบนรูปภาพ

บันทึกรูปภาพเป็น PNG

สุดท้าย คุณจะต้องบันทึกรูปภาพเป็น PNG เพื่อใช้บนเว็บไซต์ของคุณ

เพิ่มพื้นหลังให้กับ Divi

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

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

เพิ่มหน้าใหม่ สลับไปที่ Visual Builder และเพิ่มส่วนมาตรฐานใหม่ให้กับหน้านั้น

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

เมื่อคุณวางโมดูลทั้งหมดที่คุณต้องการให้ปรากฏในส่วนฮีโร่แล้ว คุณสามารถเพิ่มรูปภาพที่คุณได้สร้างไว้ในส่วนก่อนหน้าของโพสต์นี้ได้

เพิ่มสีพื้นหลัง

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

ตรวจสอบให้แน่ใจว่ามีช่องว่างภายในเพียงพอ

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

เพิ่มสีพื้นหลังเดียวกันในส่วนถัดไป

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

ตัวอย่าง

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

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

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!