เค้าโครงและองค์ประกอบ: เค้าโครง ตาราง และลำดับชั้นภาพ

กำไร:

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

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

เหตุใด AI จึงทำเลย์เอาต์เพียงอย่างเดียวไม่ได้

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

หลักการพื้นฐานของการจัดองค์ประกอบ

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

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

ตั้งค่าเค้าโครงทีละขั้นตอน

1. กำหนดวัตถุประสงค์: การออกแบบนี้ควรทำอย่างไร? (ประกาศการขายข้อมูล) กำหนดลำดับความสำคัญ
2. คลังเนื้อหา: ชื่อ ข้อความแสดงแทน รูปภาพ โลโก้ โทร (ปุ่ม/CTA) คืออะไร
3. สร้างลำดับชั้น: วางองค์ประกอบที่สำคัญที่สุดไว้ในตำแหน่งและขนาดที่แข็งแกร่งที่สุด
4. เลือกตาราง: กำหนดโครงสร้างคอลัมน์ที่คุณจะจัดแนวองค์ประกอบ
5. สร้างภาพด้วย AI: สร้างพื้นหลัง/องค์ประกอบด้วยสัดส่วนที่เหมาะสม โดยมีพื้นที่สำหรับข้อความ
6. จัดแนวในโปรแกรมออกแบบ: จัดแนวข้อความ โลโก้ การโทร; กำหนดช่องว่าง
7. การทดสอบ: ซูมเข้า มองจากระยะไกล ตรวจสอบว่าดวงตาไปตรงไหนก่อน

เทคนิคการปฏิบัติเพื่อกำกับดวงตา

จริงๆ แล้วการจัดองค์ประกอบคือศิลปะในการกำกับดวงตา การจ้องมองของผู้ชมไม่ได้เดินไปอย่างสุ่ม มันเป็นไปตามสัญญาณบางอย่างและนักออกแบบที่ดีก็ใช้มันอย่างมีสติ ประการแรกคือขนาดและคอนทราสต์: องค์ประกอบที่ใหญ่ที่สุดและตัดกันมากที่สุดจะดึงดูดสายตาเป็นอันดับแรก ดังนั้นให้ใส่ข้อความที่สำคัญที่สุดไว้ตรงนั้น ประการที่สองคือเส้นนำ: เส้นธรรมชาติในภาพ (เส้นทาง ระยะแขนเอื้อม ขอบโต๊ะ) จะนำสายตาไปยังจุดใดจุดหนึ่ง การวางผลิตภัณฑ์หรือชื่อตรงจุดสิ้นสุดของบรรทัดเหล่านี้จะช่วยเพิ่มเอฟเฟกต์ ประการที่สาม การเน้นด้วยพื้นที่: พื้นที่ว่างขนาดใหญ่รอบๆ องค์ประกอบทำให้องค์ประกอบนั้นโดดเด่น — คำที่ยืนอยู่คนเดียวบนหน้าที่หนาแน่นนั้นทรงพลัง ประการที่สี่ ทิศทางการอ่าน: ในวัฒนธรรมส่วนใหญ่ ดวงตาจะเคลื่อนที่ในรูปแบบ "Z" หรือ "F" จากซ้ายบนไปขวาล่าง ดังนั้นการใส่โลโก้ไว้ที่ด้านซ้ายบนและปุ่มโทร (ปุ่ม) ที่ด้านขวาล่างจึงทำให้เกิดความลื่นไหลที่เป็นธรรมชาติ คุณสามารถนำเทคนิคเหล่านี้ไปใช้ได้ทันทีเมื่อสร้างพื้นหลังด้วย AI: "การจัดองค์ประกอบภาพจากซ้ายล่างไปขวาบน" หรือ "องค์ประกอบเดียวตรงกลาง พื้นที่กว้างรอบๆ" ฯลฯ ดังนั้น ภาพจึงไม่เพียงแต่สวยงามเท่านั้น แต่ยังเป็นเครื่องมือในการถ่ายทอดข้อความในลำดับที่ถูกต้องด้วย

รูปแบบ - ความสนใจเป็นพิเศษ

สื่อแต่ละประเภทมีกฎของตัวเอง: โพสต์ Instagram 1:1 หรือ 4:5, เรื่องราว 9:16, แบนเนอร์เว็บ 16:9 แนวคิดของโซนปลอดภัยเป็นสิ่งสำคัญ: เก็บองค์ประกอบสำคัญไว้จากขอบเพื่อไม่ให้ถูกตัดหรืออยู่ใต้องค์ประกอบอินเทอร์เฟซ (โปรไฟล์ในเรื่องราว ปุ่ม) ในการพิมพ์ จำเป็นต้องมีการตัดตก: เพื่อขยายการออกแบบเล็กน้อยจากขอบ เพื่อหลีกเลี่ยงเส้นสีขาวที่ขอบการตัด

มินิเคสสามอัน

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

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

กรณีที่ 3 — พิมพ์ตกเลือด พิมพ์โบรชัวร์โดยไม่มีเลือดออก มีเส้นสีขาวบางๆ ปรากฏขึ้นที่ขอบ และชิ้นส่วน 300 ชิ้นถูกทิ้ง (สูญเสียไปประมาณ 1,200 TL) งานต่อไปเพิ่มเลือดออก 3 มม. ให้กับการออกแบบ รอยตัดออกมาสะอาด

เทมเพลตที่คัดลอกได้

1) การสร้างพื้นหลังแบบเว้นระยะสำหรับข้อความ:

สร้างภาพพื้นหลังสำหรับการออกแบบ [สื่อ] อัตราส่วน: [1:1 / 9:16 / 16:9] รักษาช่องที่ 3 บนสุดให้ว่างและว่างเปล่า (สำหรับชื่อเรื่อง) โทนสีของแบรนด์: [คำคุณศัพท์] การใส่ข้อความ/โลโก้ที่อ่านง่าย สีเข้ากับชุดสี: [สี]

2) แผนลำดับชั้น:

สร้างแผนลำดับชั้นแบบภาพสำหรับการออกแบบต่อไปนี้ วัตถุประสงค์: [ประกาศ/การขาย/ข้อมูล]. องค์ประกอบ: [ชื่อเรื่อง ข้อความแสดงแทน รูปภาพ โลโก้ คำบรรยายภาพ] ให้ความสำคัญกับแต่ละองค์ประกอบ ตำแหน่งที่แนะนำ และขนาดสัมพัทธ์ อธิบายเส้นทางที่ดวงตาจะเดินตาม (โฟกัส → รอง)

3) คำแนะนำตารางและการจัดตำแหน่ง:

แนะนำตารางและรูปแบบการวางแนวอย่างง่ายสำหรับเนื้อหาต่อไปนี้: [รายการเนื้อหา] อัตราส่วน [x] ฉันควรใช้กี่คอลัมน์ ฉันจะจัดองค์ประกอบอย่างไร ฉันควรเว้นพื้นที่ (ระยะขอบ) ไว้เท่าใด ทำให้มันเรียบง่ายและสมดุล

4) การควบคุมเค้าโครง:

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

พรอมต์อ่อน / พรอมต์แข็งแกร่ง

จุดอ่อน: สร้างภาพแบนเนอร์ลดราคาแล้วบอกว่า 50%

ผลลัพธ์: AI เขียนความเสียหาย "50%" องค์ประกอบถูกจัดเรียงแบบสุ่ม คุณไม่สามารถแก้ไขข้อความได้ ไม่สามารถใช้งานได้

ทรงพลัง: สร้างภาพพื้นหลังสำหรับแคมเปญลดราคา: อัตราส่วน 4:5, โทนสีอบอุ่นที่มีพลัง, พื้นที่ว่างขนาดใหญ่สำหรับข้อความที่ด้านซ้ายบน, สินค้าที่มุมขวาล่าง การใส่ข้อความที่อ่านได้ ฉันจะจัดตำแหน่งชื่อ ข้อมูล "50%" และปุ่มในโปรแกรมออกแบบ

ผลลัพธ์: พื้นหลังแบบลำดับชั้นที่แก้ไขได้ซึ่งเหลือพื้นที่สำหรับข้อความ

ความแตกต่าง: วิธีการที่เข้มงวดจะแยกข้อความออกจาก AI วางแผนระยะห่างและสัดส่วน และปล่อยให้นักออกแบบเป็นผู้ออกแบบ

ตารางหลักองค์ประกอบ

หลักการ

ให้อะไร

เคล็ดลับที่เป็นประโยชน์

ลำดับชั้น

ลำดับการอ่าน

ทำให้สิ่งที่สำคัญที่สุดมีขนาดใหญ่ที่สุด/ตรงกันข้าม

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

ความรู้สึกเป็นระเบียบ

เรียงเส้นที่มองไม่เห็น

ตาราง

ความสม่ำเสมอ

ใช้ระบบคอลัมน์

พื้นที่

ความสามารถในการอ่าน

การบีบตัว ปล่อยลมหายใจ

พื้นที่ปลอดภัย

ไม่ตัด

เก็บสิ่งของเข้าจากขอบ

เลือดออก

พิมพ์สะอาด

มีขอบ 3 มม

ข้อผิดพลาดทั่วไป

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

โดยสรุป

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

งานสมัคร

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

รายการตรวจสอบ

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