สร้างรูปแบบ Tilable สำหรับภาพพื้นหลังของเว็บไซต์: 8 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:09

นี่เป็นวิธีที่ตรงไปตรงมาและเรียบง่าย (ฉันคิดว่า) สำหรับการสร้างรูปภาพที่สามารถเรียงต่อกันโดยไม่ต้องดู "แบบกริด" เกินไป บทช่วยสอนนี้ใช้ Inkscape (www.inkscape.org) ซึ่งเป็นโปรแกรมแก้ไขกราฟิกเวกเตอร์โอเพนซอร์ส ฉันคิดว่าวิธีนี้สามารถนำไปใช้กับโปรแกรมกราฟิกเวกเตอร์ราคาแพงอย่าง Adobe Illustrator ได้เช่นกัน เฮ้ มันคือเงินของคุณ

ขั้นตอนที่ 1: ตั้งค่าเอกสาร

หลังจากเปิด Inkscape คุณจะต้องตั้งค่าคุณสมบัติของเอกสาร ([ไฟล์ -> คุณสมบัติเอกสาร])ขั้นแรก ให้เปลี่ยนความกว้างและความสูงของเอกสารเป็นตัวเลขที่ง่ายต่อการใช้งาน สำหรับบทช่วยสอนนี้ ฉันสร้างรูปภาพสี่เหลี่ยมจัตุรัส แต่สัดส่วนใดๆ ก็ได้ ถัดไป คุณจะต้องตั้งค่าตาราง ใน Inkscape เวอร์ชันเก่า มีเพียงกริดเดียวที่เป็นไปได้ ในเวอร์ชันที่ใหม่กว่า คุณจะต้องสร้างกริดใหม่ เปลี่ยนระยะห่างกริดเพื่อให้ค่าเหล่านี้แบ่งเท่าๆ กันในค่าของความกว้างของเอกสาร & hegiht โดยทั่วไปแล้ว การทำงานจากรูปภาพขนาดใหญ่แล้วลดขนาดลงตามความจำเป็นเป็นความคิดที่ดี เนื่องจากนี่คือศิลปะเวกเตอร์ ขนาดทางเทคนิคไม่สำคัญ แต่ในทางปฏิบัติ มันจะง่ายกว่าในเชิงแนวคิดด้วยตัวเลขที่มากกว่า ในบทช่วยสอนนี้ ฉันใช้รูปภาพขนาด 500x500px และตารางของฉันอยู่ที่ช่วง 10px สุดท้าย ตรวจสอบให้แน่ใจว่าได้เลือกตัวเลือก "เปิดใช้งานการสแนป" แล้ว

ขั้นตอนที่ 2: เครื่องมือสี่เหลี่ยมผืนผ้า

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

ขั้นตอนที่ 3: การโคลนรูปแบบ

กลุ่ม])" "บน":0.38721804511278196 "ซ้าย":0.354 "ความสูง":0.35902255639097747 "ความกว้าง":0.372}]">

เพิ่มรูปภาพที่คุณต้องการให้มีในรูปแบบของคุณ หากรูปภาพของคุณเป็นไฟล์ SVG โดยปกติแล้ว คุณสามารถลากและวางลงในเอกสารที่เปิดอยู่ได้ สร้างโคลนของรูปภาพนี้ ([แก้ไข -> โคลน -> สร้างโคลน] หรือคุณสามารถกด Alt+D) ย้ายรูปภาพต้นฉบับออกไปให้พ้นทางเพื่อไม่ให้รบกวนพื้นที่ทำงานของคุณ ย้ายรูปภาพที่ลอกแบบไปยังช่องสี่เหลี่ยมแล้วสร้างสำเนาสองสามชุด ของโคลน เหตุผลในการใช้โคลนแทนสำเนาต้นฉบับจะปรากฏให้เห็นในภายหลัง ต่อไปนี้เป็นวิธีง่ายๆ ในการทำสำเนาในพื้นที่หมึก: ลากวัตถุที่จะคัดลอก แล้วกดแป้นเว้นวรรคเพื่อวางสำเนาที่จุดนั้น (กดปุ่มเมาส์ค้างไว้). โดยทั่วไป คุณไม่จำเป็นต้องมีสำเนามากกว่า 2 หรือ 3 ชุดเพื่อสร้างรูปแบบ อย่างที่คุณเห็น ฉันมีรูปภาพ 3 สำเนา แต่ฉันลงเอยด้วยการลบออกในภายหลัง เมื่อคุณคิดว่าคุณมีเพียงพอแล้ว ให้จัดกลุ่มรายการเหล่านี้เข้าด้วยกัน

ขั้นตอนที่ 4: การโคลนเพิ่มเติม

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

ขั้นตอนที่ 5: ผู้ย้ายที่เชี่ยวชาญ

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

ขั้นตอนที่ 6: เกี่ยวกับการใช้ภาพโคลน

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

ขั้นตอนที่ 7: เสร็จสิ้นการสัมผัส

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

ขั้นตอนที่ 8: ผลิตภัณฑ์ขั้นสุดท้าย

เสร็จแล้ว!วางไว้บนเดสก์ท็อป ใช้สำหรับเว็บไซต์ของคุณ หรือพิมพ์ออกมาแล้วขายเป็นกระดาษติดผนัง!