หน้าแรก / บล็อก / การออกแบบ

สี่สไตล์ภาพประกอบ กับแบบเดียวที่ได้ใช้จริง

29 สิงหาคม 2569 · อ่าน 6 นาที · Dimesum Engineering

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

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

อาร์คีไทป์ทั้งสี่อยู่ใน docs/design/brand/ART-STYLES.md หนึ่งแบบต่อหนึ่งภาพอ้างอิงที่ผู้ก่อตั้งรวบรวมไว้ เราวาดครบทั้งสี่แทนที่จะถกเถียงกัน คือสามหัวข้อที่ Dimesum เป็นเจ้าของ เรนเดอร์หนึ่งครั้งด้วยลายมือและจานสีของแต่ละอาร์คีไทป์ make ui-art-styles เขียนคอนแทกต์ชีตขนาด 4x3 ออกมา

สำหรับงานภาพของผลิตภัณฑ์ ความสามารถในการสร้างใหม่สำคัญกว่าความสวยงาม

งานภาพของผลิตภัณฑ์ถูกสร้างใหม่ ส่วนงานภาพการตลาดวาดครั้งเดียว Dimesum มีจานสี 18 ชุด และเกี๊ยวตัวเดียวกันต้องคงอยู่ได้ที่ 24px ในแถวรายการ และที่ 200px บนหน้าจอเริ่มต้นใช้งาน สไตล์ที่ต้องใช้นักวาดสำหรับทุกจานสีใหม่ทำงานทั้งสองอย่างนี้ไม่ได้

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

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

คณะนักแสดง เป็นสไตล์ระบายสีโทนอุ่น ซึ้งสานที่มีพื้นผิวจริง พื้นสีอำพัน และเกี๊ยวที่มีแขนขาปีนป่ายไหกระบอกตะเกียบ มันมีเสน่ห์มากที่สุดในสี่แบบ แต่ก็ยังใช้จริงไม่ได้ แสงไฮไลต์แบบระบายคือการไล่เฉดที่มีจุดหยุดสองจุดและตำแหน่งกึ่งกลาง ไม่ใช่ค่าเลขฐานสิบหกที่สลับได้ และการแรเงาเละที่ 24px

โปสเตอร์ เป็นเรขาคณิตแบน สีมะกอกและทองบนเสื่อสาน มันไม่มีเส้นขอบเลย รูปทรงถูกแยกด้วยสีเพียงอย่างเดียว งดงามแต่มีจุดตายเชิงโครงสร้าง เพราะการเปลี่ยนธีมเลื่อนสีและพาขอบเขตไปด้วย ใบหน้าของมันอยู่ที่ราว 8% ของความกว้างลำตัว ดังนั้นที่ขนาด 24px ถึง 48px ที่ Dimesum ใช้ มันจึงอ่านเป็นช่องว่าง

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

สติกเกอร์ เป็นเวกเตอร์คาวาอิสะอาดตา และเป็นแบบที่เราใช้จริง เส้นขอบบางสม่ำเสมอ สีทึบแบน ตาจุด ปื้นแก้มสีปะการังใหญ่ ไม่มีการแรเงา ทุกสีในนั้นเป็นโทเคน จานสีทั้ง 18 ชุดจึงเปลี่ยนธีมให้ฟรี มันคงอยู่ได้ที่ 24px และที่ 200px และเป็นลายมือเดียวกับไอคอน Lucide ของเราที่ 24px ด้วยเส้นหัวมนหนา 2px

คำถามชี้ขาด สีเป็นโทเคนได้หรือไม่

สีทึบคือสิ่งที่ทำให้สีตั้งชื่อได้ และการตั้งชื่อคือสิ่งที่ทำให้จานสี 18 ชุดฟรี เกี๊ยวของสติกเกอร์คือหนึ่งโทเคนสีทึบบวกหนึ่งโทเคนเส้นขอบ ปื้นแก้มคือ rust-600 ที่ค่าความทึบ 0.42 แทนที่จะเป็นสีพาสเทลแบน มันจึงยืมโทนอุ่นใดก็ตามที่สคีมมีมาใช้ แทนที่จะตั้งชื่อสีของตัวเอง ซึ้งไม้ไผ่คือบันไดโทนเดียวที่ผสมจาก gold-600 ของแต่ละธีม ขอบที่รับแสงจึงเป็นทองนั้นบวกกระดาษ 22% และพื้นของมันบวกหมึก 38% ในทุกสคีม

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

สามการแก้ไขที่มีเพียงการเทียบเคียงกันเท่านั้นที่จับได้

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

ปากถูกวาดกว้าง 20u และอ่านเป็นหน้ายิ้มทันทีที่วางข้างภาพอ้างอิง มันลดลงเหลือ 10u หนึ่งในสามของช่องว่างระหว่างตา 28u และคาแรกเตอร์ก็กลับมาเป็นเกี๊ยว จานตาลดลงในเวลาเดียวกัน จาก r5 เป็นวงรี 3.4u ที่สูงกว่ากว้าง

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

ปมที่รวบต้องตัดผ่านเส้นขอบ เกี๊ยวตัวแรกของเราเป็นโดมเรียบที่มีเส้นบางสามเส้นระบายไว้ด้านบน และผลรีวิวกลับมาด้วยคำเดียว ผม เส้นที่วาดบนเส้นโค้งที่ไม่ถูกตัดจะอ่านได้เป็นผมเท่านั้น เพราะไม่มีอะไรในรูปทรงบอกว่าแป้งถูกรวบ กลีบแยกจากกันเฉพาะในช่วง 8% บนสุดของความสูง ตัดลึกกว่านั้นแล้วจะได้หูกระต่าย ซึ่งได้ใช้จริงไปสองครั้งก่อนจะถูกจับได้

สิ่งที่เราเก็บไว้จากสามแบบที่ไม่ได้เลือก

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

ตัวภาพศึกษาเองไม่เคยได้ใช้จริง ui/dumplings/styles/ มีสถานะเดียวกับ refs/ คือคำอ้างอิง ไม่ใช่ต้นทาง และเลเยอร์ผลิตภัณฑ์ต้องไม่นำเข้ามัน ตัวสร้างแยกวิเคราะห์รายการอาร์คีไทป์ออกจากหัวเรื่องของเอกสารเอง ดังนั้นอาร์คีไทป์ที่ห้าที่เพิ่มลงใน ART-STYLES.md จะปรากฏในชีตในการบิลด์ครั้งถัดไป และหัวเรื่องที่มันวาดไม่ได้จะทำให้การบิลด์ล้มเหลว