รูปภาพมุมที่โค้งมน

รัศมีมุม

ระบบปฏิบัติการ ร้านแอป และระบบออกแบบอินเทอร์เฟซผู้ใช้ ล้วนมีลักษณะมุมที่โค้งมน เช่น ไอคอนของ iOS, คารด์แบบ Material และองค์ประกอบสมัยใหม่จาก Tailwind ให้เพียงอัปโหลดภาพใดๆ เครื่องมือนี้จะปรับมุมทั้งสี่ด้านให้มีความโค้งตามรัศมีที่คุณกำหนด จากนั้นส่งออกเป็นไฟล์ PNG ที่มุมโปร่งใส และสามารถกำหนดรัศมีที่แตกต่างกันสำหรับแต่ละมุม เพื่อให้ได้ลักษณะคล้ายติกเก็ตหรือฟองคำพูดได้

วิธีปัดมุมของภาพให้กลม

  1. 1

    อัปโหลดรูปภาพ

    JPG, PNG หรือ WebP

  2. 2

    เลือกรัศมี

    ในหน่วยพิกเซล หรือเป็นเปอร์เซ็นต์ของด้านที่สั้นกว่า

  3. 3

    ตัวเลือกเสริม: แตกต่างกันในแต่ละมุม

    ทำมุมกลมเฉพาะด้านบน (การ์ด) หรือแบบไม่สมมาตร (ตั๋ว)

  4. 4

    เลือกพื้นหลัง

    แบบโปร่งใส (PNG) หรือสีเดียว หากบันทึกเป็นไฟล์ JPG

  5. 5

    ส่งออก

    PNG รักษาลักษณะของมุมที่โค้งมนไว้ ส่วน JPG จะปรับให้พื้นผิวเรียบและเป็นสีตามที่คุณเลือก

ตัวเลือกขนาดสำหรับรูปทรงที่ใช้บ่อยในอินเทอร์เฟซผู้ใช้

ค่ารัศมีสำเร็จรูป

รูปร่าง รัศมี
การ์ดอินเทอร์เฟซแบบเรียบง่าย 4–8 พิกเซล
การ์ดแบบ Material Design 4 พิกเซล (หรือ 8 พิกเซลใน M3)
ไอคอนแอปบน iOS 22.37% ของด้าน (ทรง “squircle”)
ไอคอนแอปบน macOS 18.75% ของด้าน
ฟองสตอรีอินสตาแกรม 12–16 พิกเซล
อวาตาร์ทรงกลม 50% ของด้านสั้น (กลมสมบูรณ์)
ตอบัตร แบบไม่สมมาตร, ทำมุมกลมเพียงหนึ่งหรือสองมุม
ด้านหางของฟองแชท มุมหนึ่งเล็ก ส่วนที่เหลือใหญ่กว่า

ปัญหาของ squircle

ไอคอนของ iOS ไม่ใช่สี่เหลี่ยมผืนผ้ามุมมนแบบเรียบง่าย แต่ใช้รูปทรง “ซูเปอร์เอลลิปส์ (superellipse)” ซึ่งมีความนุ่มนวลทางคณิตศาสตร์ในจุดเปลี่ยนผ่าน ส่วน squircle ที่แท้จริงนั้นเกินขีดความสามารถของ CSS border-radius หรือแมสก์อัลฟาแบบง่ายในการแสดงผล เครื่องมือนี้จึงประมาณค่าด้วยสี่เหลี่ยมผืนผ้ามุมมนระดับสูง ซึ่งเมื่อใช้ในขนาดไอคอนทั่วไปจะแทบแยกไม่ออกจากของจริง

พฤติกรรมด้านความโปร่งใส

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

รัศมีต่างกันในแต่ละมุม

ลักษณะแบบฟองแชท: ทำมุมสามด้านให้มีขนาด 12 พิกเซล และเว้นมุมหนึ่งไว้ที่ 0 พิกเซล (ตรงที่ส่วน “หาง” จะต่อเข้ากัน) ส่วนแบบตอบัตร: สองมุมแหลมและอีกสองมุมกลม การใช้รัศมีที่ไม่สมมาตรเป็นวิธีรวดเร็วในการสื่อว่าภาพนั้นเชื่อมต่อกับสิ่งอื่น

การต้านการเบลอภาพ (Anti-aliasing)

เส้นโค้งมุมถูกวาดด้วยเทคนิคการสุ่มตัวอย่างแบบซูเปอร์แซมพลิง (super-sampling) ระดับ 4 เท่า เพื่อให้ดูคมชัดแม้ในขนาดการแสดงผลปกติ ไม่ว่าจะพิมพ์หรือใช้ฟีเจอร์ซูมในระดับสูง ก็ยังคงเห็นความเรียบเนียนของรัศมีได้อย่างชัดเจน

คำถามที่พบบ่อย

แอปเปิลใช้ทรง squircle ที่มีความโค้งของมุมประมาณ 22.37% ของความยาวด้านของไอคอน โดยบนผืนผ้าใบขนาด 1024 × 1024 พิกเซล จะให้รัศมีมุมที่ใช้งานได้จริงประมาณ 229 พิกเซล แม้ว่าค่าทางคณิตศาสตร์ที่แท้จริงจะแตกต่างจากสี่เหลี่ยมผืนผ้ามุมมนธรรมดาเล็กน้อยก็ตาม

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

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

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

เครื่องมือที่เกี่ยวข้อง

เครื่องมือทำภาพโมเสกจากตัวต่อ LEGO

เปลี่ยนรูปถ่ายเป็นแบบโมเสกจัตุรัส 16, 32 หรือ 48 ช่องต่อด้าน ดูสีโดยประมาณ นับแผ่นตัวต่อ 1×1 และดาวน์โหลดคู่มือประกอบที่มีหมายเลขกำกับ

สร้างกระดาษบรรทัดห้าเส้น

สร้างกระดาษบรรทัดห้าเส้นเปล่า เลือกจำนวนชุดบรรทัดห้าเส้นต่อหน้า ระยะห่างของเส้น ขนาดกระดาษ ขอบกระดาษ และเครื่องหมาย G หรือ F ดูตัวอย่างแล้วดาวน์โหลด PDF หรือ SVG

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

แปลงข้อความเป็นลายมือ

พิมพ์หรือวางข้อความ เลือกฟอนต์ลายมือหนึ่งในห้าแบบ กระดาษเปล่า มีเส้นบรรทัด หรือตาราง พร้อมสีหมึก แล้วดาวน์โหลดเป็น PNG ทุกอย่างวาดในเบราว์เซอร์ แต่ฟอนต์ไม่มีอักษรไทย

เครื่องมือแบ่งกริดรูปภาพ Instagram

แบ่งรูปภาพขนาดใหญ่ให้เป็นกริด Instagram ขนาด 3×3 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย

เครื่องมือนี้มีให้บริการในภาษาอื่น