วิธีสร้างชุดไอคอน SVG ใน Rayzia
- เปิดโปรแกรมแก้ไข ไปที่ rayzia.com/editor/ สมัครด้วย Google หรืออีเมล แล้วสลับไปที่โหมด Vector ซึ่งใช้ฟรี เพื่อใช้เครื่องมือทำชุดไอคอน
- ตั้งอาร์ตบอร์ดสี่เหลี่ยมจัตุรัสและกริด สร้างอาร์ตบอร์ดสี่เหลี่ยมจัตุรัส (24x24 เป็นค่าเริ่มต้นที่เหมาะสม) แล้วเปิดกริด ผืนผ้าใบที่สม่ำเสมอคือสิ่งที่ทำให้ชุดไอคอนดูเป็นครอบครัวเดียวกัน ไม่ใช่กองงานคนละชิ้น
- วาดไอคอนเอง หรือให้ AI ร่างทั้งชุดคร่าว ๆ ใช้ปากกาและโหนด Bézier พร้อมรูปทรงที่แก้ไขได้และการดำเนินการ boolean เพื่อวาดแต่ละ glyph หรือเชื่อมต่อบัญชี Claude หรือ GPT ที่คุณมีอยู่แล้ว ให้มันร่างทั้งชุดคร่าว ๆ บนผืนผ้าใบ แล้วเก็บรายละเอียดด้วยมือ
- คุมเส้นและขนาดให้สม่ำเสมอ ใช้ symbol ซ้ำ คุมความหนาเส้นให้เท่ากันทุกไอคอน และจัดรูปทรงให้ตรงกริดเดียวกัน แปลงชิ้นส่วนที่ใช้ซ้ำเป็น symbol ที่นำกลับมาใช้ได้ เพื่อให้แก้ครั้งเดียวอัปเดตทุกอินสแตนซ์
- ส่งออก SVG ที่สะอาด ส่งออกไอคอนแต่ละตัวเป็น SVG สำหรับโค้ดเบสของคุณ หรือ PNG สำหรับม็อกอัป ผลลัพธ์เป็นเรขาคณิต SVG จริงที่วางลงคอมโพเนนต์หรือสไตล์ชีตได้เลย หรือป้อนเข้าระบบสร้างไอคอนฟอนต์ก็ได้
ทำไม SVG จึงเป็นฟอร์แมตที่ใช่สำหรับเครื่องมือทำไอคอน
ไอคอนต้องอยู่รอดในทุกขนาดที่มันไปอยู่ PNG จะเบลอทันทีที่ใครขยายเกินความละเอียดต้นฉบับ ส่วน SVG วาดตัวเองใหม่ให้คมทั้งที่ 16px และ 512px เพราะมันเก็บคณิตศาสตร์ ไม่ใช่พิกเซล นี่คือเหตุผลทั้งหมดของการสร้างไอคอนเป็นเวกเตอร์
Rayzia ถือว่า SVG คือตัวเอกสารเอง ไม่ใช่แค่ผลพลอยได้ตอนส่งออก สิ่งที่คุณแก้จึงคือสิ่งที่ได้จริง คุณได้เครื่องมือวาดครบอย่างที่เครื่องมือทำไอคอนตัวจริงควรมี: ปากกาและการแก้ไขโหนด รูปทรงที่แก้ไขได้ เกรเดียนต์ boolean และ shape-builder รวมถึงข้อความบนเส้นพาธด้วยฟอนต์ของคุณเอง และรองรับภาษาไทยกับสคริปต์ซับซ้อนอย่างถูกต้อง Rayzia คือโปรแกรมแก้ไขตัวจริง ไม่ใช่แกลเลอรีเทมเพลต คุณจึงออกแบบไอคอนที่เป็นของคุณเองจริง ๆ และแก้ไขได้ตลอดไป
การทำให้ชุดไอคอนสม่ำเสมอ
ส่วนที่ยากของชุดไอคอนไม่ใช่ตัวแรก แต่คือตัวที่สี่สิบที่ยังต้องดูเป็นพวกเดียวกัน กริดร่วมกัน ความหนาเส้นที่ตรงกัน และน้ำหนักทางสายตาที่จัดให้เท่ากันทำงานส่วนใหญ่ให้ ส่วนที่เหลือเป็นหน้าที่ของ symbol ที่นำกลับมาใช้ได้ ซึ่งให้รูปทรงต้นแบบเดียวควบคุมทุกสำเนา
เมื่ออยากได้จุดเริ่มต้น ชี้บัญชี AI ของคุณไปที่ผืนผ้าใบ แล้วให้มันจัดวาง เปลี่ยนสี และร่างเวอร์ชันต่าง ๆ คร่าว ๆ ให้คุณดู ทุกอย่างที่มันทำย้อนกลับได้ด้วย undo ครั้งเดียว ส่วนเลเยอร์ อาร์ตบอร์ดหลายอัน ประวัติแบบตั้งชื่อได้ และเอฟเฟกต์สด 150+ แบบ พร้อมใช้เมื่อชุดไอคอนโตเกินไม่กี่ตัว
การทำไอคอน: คำถามที่พบบ่อย
Rayzia ทำไอคอนได้ฟรีไหม?
ได้ การวาดไอคอนด้วยปากกา โหนด และ boolean เป็นงานของโหมด Vector ซึ่งใช้ฟรีเช่นเดียวกับโหมด Design และแผนฟรีส่งออก SVG PNG JPG และ WebP ได้ไม่จำกัด ส่วน Pro ราคา $8 ต่อเดือน หรือ $72 ต่อปี ให้พื้นที่จัดเก็บบนคลาวด์มากขึ้น พร้อมการส่งออก PDF เทมเพลตและทรัพยากรพรีเมียม และ Agent Connect ทดลองได้ 14 วันโดยไม่ต้องใช้บัตรเครดิต
ต้องติดตั้งอะไรไหมถึงจะออกแบบไอคอนได้?
ไม่ต้อง Rayzia ทำงานในเบราว์เซอร์รุ่นใหม่ทุกตัวบน Windows, Mac, Linux, ChromeOS และแท็บเล็ต ใช้งานออฟไลน์ได้และบันทึกอัตโนมัติ จึงไม่มีอะไรต้องดาวน์โหลดหรือติดตั้ง
ส่งออกไอคอนเป็น SVG สะอาด ๆ สำหรับโค้ดได้ไหม?
ได้ เพราะเอกสารเป็น SVG โดยกำเนิด คุณจึงส่งออกเรขาคณิต SVG จริงที่วางลงคอมโพเนนต์หรือสไตล์ชีตได้เลย หรือป้อนเข้าระบบสร้างไอคอนฟอนต์ก็ได้ และยังส่งออก PNG สำหรับม็อกอัปได้ด้วย
AI ช่วยสร้างชุดไอคอนอย่างไร?
คุณเชื่อมต่อบัญชี Claude หรือ GPT ที่มีอยู่แล้ว แล้วมันจะวาด เปลี่ยนสี และจัดวางไอคอนบนผืนผ้าใบให้คุณดูสด ๆ และทุกการกระทำย้อนกลับได้ด้วย undo ครั้งเดียว
จะคุมให้ไอคอนทุกตัวในชุดสม่ำเสมอได้อย่างไร?
ทำงานบนอาร์ตบอร์ดสี่เหลี่ยมจัตุรัสและกริดร่วมกัน คุมความหนาเส้นให้ค่าเดียว และแปลงองค์ประกอบที่ใช้ซ้ำเป็น symbol ที่นำกลับมาใช้ได้ เพื่อให้แก้ครั้งเดียวอัปเดตทุกอินสแตนซ์ ส่วนเลเยอร์และประวัติแบบตั้งชื่อได้ช่วยได้มากเมื่อชุดโตขึ้น