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