วิธีใช้เปอร์สเปคทีฟพร้อมตัวเลือกการแปลงเพื่อออกแบบกำแพงภาพถ่าย 3 มิติใน Divi

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

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

มาเริ่มกันเลย!

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของผนังภาพถ่าย 3 มิติที่เราจะออกแบบในวันนี้

ดาวน์โหลดตัวอย่างการออกแบบ 3D Photo Wall ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

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

เริ่มต้น

ในการเริ่มต้นใช้งานบทช่วยสอนนี้ สิ่งที่คุณต้องมีคือธีม Divi ที่ติดตั้งและใช้งาน คุณจะต้องใช้รูปภาพเพื่อใช้งาน ดังนั้นโปรดใช้รูปภาพเดียวกับที่ฉันใช้จาก Travel Agency Layout Pack หลังจากนั้น คุณจะต้องสร้างหน้าใหม่ ระบุหน้าและชื่อ และปรับใช้ Divi Builder เพื่อสร้างในส่วนหน้า จากนั้นเลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น" แค่นั้นแหละ. ผืนผ้าใบการออกแบบของคุณกำลังรออยู่!

ทำความเข้าใจว่ามุมมองทำงานร่วมกับตัวเลือกการแปลงอย่างไร

ถ้าคุณเคยเรียนวิชาศิลปะขั้นพื้นฐาน คุณอาจจะคุ้นเคยกับมุมมอง เป็นเทคนิคที่ศิลปินใช้ในการวาดวัตถุที่ดูเหมือน 3 มิติ แม้ว่าจะอยู่บนกระดาษหรือผ้าใบ 2 มิติก็ตาม ในการออกแบบเว็บ คุณสามารถจัดตำแหน่งองค์ประกอบในตำแหน่ง 3 มิติได้โดยใช้คุณสมบัติการแปลง ใน Divi ตัวเลือกการแปลงเหล่านี้มีอยู่ในตัวสร้าง Divi คุณสมบัติการแปลงหลักที่ทำให้องค์ประกอบอยู่ในตำแหน่ง 3 มิติคือการหมุนของการแปลง ซึ่งอนุญาตให้คุณหมุนรายการตามแกน z, x หรือ y อย่างไรก็ตาม หากคุณหมุนรายการโดยใช้การหมุนเพื่อเปลี่ยนรูปแบบ องค์ประกอบจะไม่ปรากฏเป็น 3D เว้นแต่ว่าจะใช้คุณสมบัติเปอร์สเปคทีฟ

ตัวอย่างเช่น สมมติว่าคุณมีโมดูลรูปภาพเดียวที่มีรูปภาพเพิ่มในแถวคอลัมน์เดียว

จากนั้นคุณใช้คุณสมบัติการ transform หมุนเพื่อหมุนภาพตามแนวแกน x ภาพจะหมุนแต่ยังคงเป็น 2D ดังนั้นภาพจึงดูเหมือนถูกบีบจากด้านบนและด้านล่างให้สั้นลง

ตอนนี้ หากคุณเพิ่มเปอร์สเปคทีฟโดยใช้ตัวอย่างขนาดเล็กของ CSS ให้กับองค์ประกอบหลักของแถว (ซึ่งเป็นองค์ประกอบหลักของรูปภาพ) คุณจะเพิ่มเปอร์สเปคทีฟให้กับรูปภาพ คุณสามารถเพิ่มหรือลดระยะทางที่วัตถุปรากฏจากผู้ใช้ที่มองหน้าจอได้ ทั้งนี้ขึ้นอยู่กับค่าเปอร์สเปคทีฟ ต่อไปนี้คือตัวอย่างว่ารูปภาพจะมีลักษณะอย่างไรหากคุณเพิ่ม "มุมมอง: 600px" ลงในแถว

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

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

การออกแบบผนังภาพถ่าย 3 มิติบนและล่าง

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

การสร้างกำแพงรูปภาพ 3 มิติยอดนิยม

ในการเริ่มต้นสิ่งต่างๆ บนหน้าใหม่ของคุณ ให้สร้างส่วนปกติที่มีแถวสี่คอลัมน์

ในคอลัมน์ 1 เพิ่มโมดูลรูปภาพด้วยรูปภาพแรกของคุณ รูปภาพทั้งหมดที่ฉันใช้ในตัวอย่างนี้คือ 600px x 800px

เมื่อคุณอัปโหลดรูปภาพของคุณไปยังโมดูลรูปภาพแล้ว ให้อัปเดตการเติมดังนี้:

Custom Padding: 3% บน, 3% ล่าง, 3% ซ้าย, 3% ขวา

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

ซึ่งจะทำหน้าที่เป็นผนังด้านบน (หรือเพดาน) ที่เราจะหมุนและเพิ่มมุมมองเพื่อสร้างการออกแบบผนัง 3 มิติ

ปรับแต่งส่วนเพื่อเพิ่มมุมมองและซ่อนโอเวอร์โฟลว์

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

ในการดำเนินการนี้ให้เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

สีพื้นหลัง: #000000
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

ในการเพิ่มคุณสมบัติเปอร์สเปคทีฟ ให้เพิ่ม CSS แบบกำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

องค์ประกอบหลัก CSS:

perspective: 400px;

ดูคุณสมบัติล้นดังนี้:

แนวนอนล้น: ซ่อน
ล้นแนวตั้ง: ซ่อน

อัปเดตการตั้งค่าแถว: ความกว้างและความกว้างของรางน้ำ

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

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ความกว้างของรางน้ำ: 1
ความกว้าง: 300px (เดสก์ท็อป แท็บเล็ต และโทรศัพท์)

อัปเดตการตั้งค่าแถว: แปลงการหมุนและจุดเริ่มต้น

ตอนนี้ใช้ตัวเลือกการหมุนการแปลงเพื่อหมุนแถวดังนี้:

เปลี่ยนแกนหมุน Y: -58deg

การเปลี่ยนแปลง Transformer Origin เป็นดังนี้:

กำเนิดการแปลง: กึ่งกลางด้านล่าง (หรือ 100% 50%)

อัปเดตการตั้งค่าแถว: กำหนดความกว้างของคอลัมน์

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

(หมายเหตุ: ตรวจสอบให้แน่ใจว่าตั้งค่าความกว้างของรางน้ำเป็น 1 มิฉะนั้นจะไม่ทำงาน)

คอลัมน์ 1 องค์ประกอบหลัก:

width: 25% !important;

คอลัมน์ 2 องค์ประกอบหลัก:

width: 25% !important;

คอลัมน์ 3 องค์ประกอบหลัก:

width: 25% !important;

คอลัมน์ 4 องค์ประกอบหลัก:

width: 25% !important;

แค่นั้นแหละ. กำแพงรูปภาพ 3 มิติแรกของเราถูกสร้างขึ้นแล้ว

สร้างส่วนหัว

ในการสร้างส่วนหัวสำหรับการออกแบบ เราต้องสร้างส่วนปกติใหม่ที่มีแถวหนึ่งคอลัมน์ใต้ส่วนปัจจุบันโดยตรง

ก่อนที่คุณจะเพิ่มโมดูล ให้อัปเดตส่วนที่มีพื้นหลังสีดำ:

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

จากนั้นเพิ่มคุณสมบัติเปอร์สเปคทีฟเดียวกันให้กับองค์ประกอบหลักของส่วนตามที่เราทำก่อนหน้านี้ดังนี้:

จากนั้นเพิ่มโมดูลข้อความในแถวดังต่อไปนี้:

เนื้อหา: การถ่ายภาพ

แบบอักษรข้อความ: Titillium Web
รูปแบบตัวอักษรของข้อความ: TT
สีข้อความ: #ffffff
ขนาดข้อความ: 5vw
ระยะห่างของตัวอักษรข้อความ: 6px
ความสูงของบรรทัดข้อความ: 1em
การวางแนวข้อความ: ศูนย์

ตอนนี้ เราสามารถเพิ่มการหมุนการแปลงให้กับโมดูลข้อความได้ เมื่อตั้งค่าเปอร์สเปคทีฟไว้ที่พาเรนต์ (หรือส่วน) เอฟเฟกต์ 3D จะเกิดขึ้นเมื่อเราหมุนข้อความ

เพิ่มค่าการหมุนการแปลงดังนี้:

เปลี่ยนแกนหมุน X: -12deg
เปลี่ยนแกนหมุน Y: 32deg

ตอนนี้เราพร้อมที่จะสร้างผนังภาพถ่าย 3 มิติด้านล่างแล้ว

สร้างผนังภาพถ่าย 3 มิติด้านล่าง (หรือพื้น)

ในการสร้างผนังภาพถ่าย 3 มิติด้านล่าง เราสามารถคัดลอกและวางส่วนบนที่มีผนังด้านบนแล้ววางโดยตรงใต้ส่วนหัว

ถัดไป อัปเดตการตั้งค่าแถวของส่วนใหม่ดังนี้:

เปลี่ยนแกนหมุน Y: 58deg

ต้นกำเนิดของการแปลง: ศูนย์ด้านบน

การออกแบบขั้นสุดท้าย

แค่นั้นแหละ! มาดูการออกแบบขั้นสุดท้ายกัน

การออกแบบจะยังคงเหมือนเดิมบนมือถือเช่นกัน (นอกเหนือจากล้นเล็กน้อย)

การสร้างกำแพงภาพถ่าย 3 มิติด้านซ้ายและขวา

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

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

ถัดไปทำซ้ำแถว

ถัดไป คัดลอกแถว (ไม่ใช่ส่วน) ที่มีโมดูลข้อความที่มีส่วนหัวในตัวอย่างการออกแบบแรก จากนั้นวางระหว่างสองแถวที่มีรูปภาพ

นี่เป็นการตั้งค่าที่คล้ายกับการออกแบบแรก ยกเว้นแถวทั้งหมดของเราอยู่ในส่วนเดียว นี่เป็นสิ่งสำคัญสำหรับขั้นตอนต่อไป

เราต้องการให้ผนังภาพทั้งสองของเราอยู่ทางด้านซ้ายและด้านขวาของหน้าโดยมีข้อความอยู่ตรงกลาง วิธีง่ายๆ ในการทำเช่นนี้คือการใช้ display flex ในส่วนของเรา สิ่งนี้จะจัดแนวแถวของเราในแนวนอนภายในส่วน

ในการดำเนินการนี้ ให้เปิดการตั้งค่าส่วนและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

(โปรดทราบว่าเรากำลังเพิ่มค่าเปอร์สเปคทีฟเป็น 700px เพื่อสร้างระยะห่าง “Z space” ในมุมมองของผู้ใช้มากขึ้น)

องค์ประกอบหลัก CSS:

perspective: 700px;
display:flex;

และโว้ว! ผนังของเราเข้าที่และพร้อมสำหรับการหมุน

เพิ่มรูปภาพเพิ่มเติมสำหรับผนังที่สูงขึ้น

ในการทำให้ผนังภาพถ่าย 3 มิติของเราสูงขึ้นเล็กน้อย สิ่งที่เราต้องทำคือเพิ่มภาพอื่นในแต่ละคอลัมน์จากสี่คอลัมน์ในแต่ละแถวที่มีภาพ เพียงตรวจสอบให้แน่ใจว่าพวกเขาพกพาช่องว่างภายใน 3% เหมือนอย่างอื่น

การเปลี่ยนความกว้างของแถวสองด้าน

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

ความกว้าง: 100% (เดสก์ท็อป แท็บเล็ต โทรศัพท์)
ความกว้างสูงสุด: 100%

จากนั้นทำเช่นเดียวกันกับแถวทางด้านขวา

การหมุนแถวด้านข้างสำหรับเอฟเฟกต์ 3D

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

เปลี่ยนแกนหมุน X: 90deg

ถัดไป เปิดการตั้งค่าแถวสำหรับแถวทางด้านขวาและอัปเดตสิ่งต่อไปนี้

เปลี่ยนแกนหมุน X: -90deg

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

ผลสุดท้าย

มาดูผลสุดท้ายกัน

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

เอฟเฟกต์ Hover โบนัส: เหวี่ยงกำแพงเหล่านั้นให้กลายเป็น View on Hover!

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

กำเนิดการแปลง: ศูนย์กลางซ้าย
เปลี่ยนแกนหมุน X (โฮเวอร์): 0deg

จากนั้นในการตั้งค่าแถวด้านขวา ให้อัปเดตสิ่งต่อไปนี้:

กำเนิดการแปลง: ศูนย์ขวา
เปลี่ยนแกนหมุน X (โฮเวอร์): 0deg

ตอนนี้ตรวจสอบผลลัพธ์

ผลการออกแบบโบนัส: ทำให้ภาพแตกออกสู่อวกาศ

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

นี่คือตัวอย่างโดยการเพิ่มการแปลงค่าการแปลบางส่วนเป็นรูปภาพ

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

การสร้าง 3D Photo Walls ใน Divi สร้างผลกระทบที่น่าประทับใจต่อการออกแบบหน้า และต้องบอกว่ามันสนุกมากที่ได้ทดลองกับการออกแบบต่างๆ โดยใช้เทคนิคต่างๆ ในบทความนี้ คุณสมบัติเปอร์สเปคทีฟทำงานร่วมกับตัวเลือกการแปลงเพื่อสร้างชีวิตมากมายเช่นการออกแบบ 3 มิติ! และอย่าลืมว่าแถวเหล่านี้ (หรือกำแพง) สามารถเติมด้วยโมดูลใดก็ได้ใน Divi ดังนั้นอย่าลังเลที่จะลองใช้คำพล่อยๆ ด้วยเช่นกัน ฉันหวังว่าสิ่งนี้จะเป็นแรงบันดาลใจให้คุณสร้างสรรค์สิ่งที่ไม่เหมือนใครในวันนี้

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!