รูปภาพมุมที่โค้งมน
ต้นฉบับ: x
ระบบปฏิบัติการ ร้านแอป และระบบออกแบบอินเทอร์เฟซผู้ใช้ ล้วนมีลักษณะมุมที่โค้งมน เช่น ไอคอนของ iOS, คารด์แบบ Material และองค์ประกอบสมัยใหม่จาก Tailwind ให้เพียงอัปโหลดภาพใดๆ เครื่องมือนี้จะปรับมุมทั้งสี่ด้านให้มีความโค้งตามรัศมีที่คุณกำหนด จากนั้นส่งออกเป็นไฟล์ PNG ที่มุมโปร่งใส และสามารถกำหนดรัศมีที่แตกต่างกันสำหรับแต่ละมุม เพื่อให้ได้ลักษณะคล้ายติกเก็ตหรือฟองคำพูดได้
วิธีปัดมุมของภาพให้กลม
-
1
อัปโหลดรูปภาพ
JPG, PNG หรือ WebP
-
2
เลือกรัศมี
ในหน่วยพิกเซล หรือเป็นเปอร์เซ็นต์ของด้านที่สั้นกว่า
-
3
ตัวเลือกเสริม: แตกต่างกันในแต่ละมุม
ทำมุมกลมเฉพาะด้านบน (การ์ด) หรือแบบไม่สมมาตร (ตั๋ว)
-
4
เลือกพื้นหลัง
แบบโปร่งใส (PNG) หรือสีเดียว หากบันทึกเป็นไฟล์ JPG
-
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 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย
เครื่องมือนี้มีให้บริการในภาษาอื่น
- Bo tròn góc ảnh [VI]
- Sudut Membulat pada Gambar [ID]
- Zaokrąglone rogi obrazu [PL]
- 画像の角を丸めます [JA]
- تدوير زوايا الصورة [AR]
- Bild mit abgerundeten Ecken [DE]
- Cantinhos Arredondados da Imagem [PT]
- 이미지 모서리 둥글게 [KO]
- Esquinas Redondeadas de Imagen [ES]
- Coins arrondis d'image [FR]
- Bild med rundade hörn [SV]
- Afgeronde hoeken van de afbeelding [NL]
- Image Rounded Corners [EN]
- Immagini con angoli arrotondati [IT]
- Изображение с закруглёнными углами [RU]
- Görüntü Köşelerini Yuvarlatma [TR]
- 图像圆角 [ZH]