วิธีสร้างและใช้พื้นหลังที่มีพื้นผิวพร้อมตัวเลือกการออกแบบของ Divi

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

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

ผลลัพธ์รูปภาพที่สร้างด้วยรูปร่าง

ภาพแรกที่เราจะแสดงให้คุณเห็นถึงวิธีการสร้างด้วย Photoshop มีลักษณะดังนี้:

ผลลัพธ์ด้วยตัวเลือกการออกแบบของ Divi

และเมื่อรวมเข้ากับ Divi แล้ว คุณจะได้ผลลัพธ์ที่น่าทึ่งเช่นนี้:

ผลลัพธ์รูปภาพทำด้วยแปรง

ภาพที่สองที่เราจะสร้างมีลักษณะดังนี้:

ผลลัพธ์ด้วยตัวเลือกการออกแบบของ Divi

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

วิธีสร้างและใช้พื้นหลังที่มีพื้นผิวพร้อมตัวเลือกการออกแบบของ Divi

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

สร้างพื้นหลังที่มีพื้นผิวด้วย Photoshop

ทำด้วยรูปทรง

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

ไฟล์ใหม่

เปิด Photoshop และเริ่มต้นด้วยการเพิ่มไฟล์ใหม่ ไฟล์นี้จะต้องมีความกว้าง 1920px และความสูง 847px

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

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

เพิ่มเลเยอร์2

ดำเนินการต่อโดยเพิ่มเลเยอร์ใหม่เหนือเลเยอร์แรก

เพิ่มรูปร่างแรกให้กับเลเยอร์2

จากนั้นเลือก Polygonal Lasso Tool และเริ่มสร้างรูปร่างในขณะที่เลือก Layer 2

เมื่อเสร็จแล้ว ให้เลือก Paint Bucket Tool และใช้ '#747474' เพื่อระบายสีส่วนที่เลือก

เพิ่มเลเยอร์ 3

จากนั้นเพิ่มเลเยอร์อื่นที่อยู่เหนือเลเยอร์ 2

เพิ่มเลเยอร์รูปร่างที่สอง3

ดำเนินการต่อโดยสร้างรูปร่างอื่น เช่นเดียวกับในหน้าจอพิมพ์ด้านล่าง โดยใช้ Polygonal Lasso Tool

เลือก Paint Bucket Tool และใช้ '#6a6a6a' ในครั้งนี้

จนถึงตอนนี้ ภาพของคุณควรมีลักษณะดังนี้:

ใช้เครื่องมือยางลบบนเลเยอร์ 3

ดำเนินการต่อ เลือกเครื่องมือยางลบในขณะที่เลือกเลเยอร์ 3

ใช้เครื่องมือยางลบพร้อมกับแปรงที่มีความแข็ง 0% และขนาด 338px

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

ทำซ้ำ แปลง หมุน และวางเลเยอร์ไว้ฝั่งตรงข้าม

ตอนนี้เราสร้างด้านซ้ายแล้ว อีกด้านหนึ่งจะเร็วขึ้นมาก เราต้องการให้เหมือนกันทุกประการ นั่นคือเหตุผลที่เราจะเลือกทั้งเลเยอร์ 2 และเลเยอร์ 3 จากนั้นเราจะสร้างเลเยอร์ซ้ำ

เมื่อทำซ้ำแล้ว คุณจะเห็นรายการเลเยอร์เหล่านั้น

ขณะที่เลือกเลเยอร์ที่ซ้ำกันทั้งสองเลเยอร์ ให้ไปที่ Edit > Transform > Rotate 180° แล้วลากเลเยอร์ไปที่อีกด้านหนึ่งของรูปภาพ

บันทึกสำหรับเว็บ

สิ่งเดียวที่ต้องทำคือการบันทึกภาพ ในการทำเช่นนั้น ให้คลิกที่ File > Export > Save for Web

สุดท้าย ตรวจสอบให้แน่ใจว่าไฟล์นั้นเป็นไฟล์ JPG หรือ PNG และบันทึก

ทำด้วยแปรง

ต่อไป เราจะแสดงวิธีสร้างพื้นหลังที่มีพื้นผิวโดยใช้แปรง พื้นหลังที่มีพื้นผิวซึ่งเราจะแสดงวิธีการสร้างรูปลักษณ์ใหม่ในกรณีนี้ดังนี้:

ไฟล์ใหม่

เริ่มต้นใหม่ด้วยการสร้างเอกสารใหม่โดยใช้ความกว้าง 1920px และความสูง 847px

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

เมื่อเสร็จแล้ว เพิ่มพื้นหลังให้กับเลเยอร์แรกด้วยรหัสสี '#8f8f8f'

ค้นหา Matching Brush ออนไลน์

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

อัพโหลดแปรง

ค้นหาไฟล์ ABR บนคอมพิวเตอร์ของคุณและไปที่ Photoshop เพื่อโหลดแปรง เลือก Edit > Presets > Preset Manager > Brushes > Load และเลือกไฟล์ ABR ที่คุณบันทึกไว้ในคอมพิวเตอร์ของคุณ

เพิ่มเลเยอร์2

เมื่อเสร็จแล้วให้เพิ่มเลเยอร์อื่นที่อยู่เหนือเลเยอร์ 1

ใช้แปรงที่มีสีอ่อนที่สุด

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

เลือกแปรงที่คุณต้องการด้วยขนาด 600px และใช้ความทึบ 60%

'

สีแรกที่เราจะใช้คือ '#a0a0a0' ไปข้างหน้าและสร้างเลเยอร์แปรงแรกบนรูปภาพของคุณ

ใช้แปรงเดียวกันกับสีที่เข้มกว่า

จากนั้นแทนที่สีก่อนหน้าด้วย '#ababab' และทำสิ่งเดียวกัน

ใช้แปรงเดียวกันกับสีที่เข้มที่สุด

สุดท้าย คุณจะต้องใช้สี '#686868' เพื่อทำให้พื้นหลังที่มีพื้นผิวของคุณสมบูรณ์

บันทึกสำหรับเว็บ

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

อีกครั้ง เลือกว่าคุณต้องการบันทึกภาพเป็นไฟล์ JPG หรือ PNG

เพิ่มพื้นหลังที่มีพื้นผิวให้กับส่วนต่างๆ

พื้นหลังพื้นผิวทำด้วยรูปทรง

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

พื้นหลังไล่โทนสี

ใช้พื้นหลังไล่ระดับสีต่อไปนี้สำหรับส่วนของคุณ:

• สีแรก: #474ab6
• สีที่สอง: #9271f6
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 41%
• ตำแหน่งสุดท้าย: 100%

ตัวเลือกการผสมผสานรูปภาพ

จากนั้น อัปโหลดรูปภาพและใช้การตั้งค่าต่อไปนี้:

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

พื้นหลังพื้นผิวทำด้วยแปรง

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

พื้นหลังไล่โทนสี

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

• สีแรก: #474ab6
• สีที่สอง: #9271f6
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 270deg
• ตำแหน่งเริ่มต้น: 70%
• ตำแหน่งสุดท้าย: 100%

ตัวเลือกการผสมผสานรูปภาพ

จากนั้น อัปโหลดภาพพื้นหลังและใช้การตั้งค่าต่อไปนี้:

• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

ผลลัพธ์

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

ผลลัพธ์รูปภาพที่สร้างด้วยรูปร่าง

ผลลัพธ์ด้วยตัวเลือกการออกแบบของ Divi

ผลลัพธ์รูปภาพทำด้วยแปรง

ผลลัพธ์ด้วยตัวเลือกการออกแบบของ Divi

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

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

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

ภาพเด่นโดย WEB-DESIGN / shutterstock.com