Softonic

Zaokrąglone rogi obrazu

Krok 1 / 3 Promień zaokrąglenia

Systemy operacyjne, sklepy z aplikacjami i systemy projektowe UI lubią zaokrąglone rogi, ikony iOS, karty Material, nowoczesne komponenty Tailwind. Wgraj dowolny obraz, a to narzędzie zaokrągli cztery rogi do ustawionego przez Ciebie promienia, wyeksportuje jako PNG z przezroczystymi rogami i opcjonalnie zastosuje inny promień dla każdego rogu, by uzyskać wygląd biletu z odrywanym kuponem albo dymka.

Jak zaokrąglić rogi obrazu

  1. 1

    Wgraj obraz

    JPG, PNG lub WebP.

  2. 2

    Wybierz promień

    W pikselach lub jako procent krótszego boku.

  3. 3

    Opcjonalnie: inny dla każdego rogu

    Zaokrąglij tylko górne rogi (karta) albo asymetrycznie (bilet).

  4. 4

    Wybierz tło

    Przezroczyste (PNG) albo jednolity kolor przy zapisie jako JPG.

  5. 5

    Eksportuj

    PNG zachowuje zaokrąglony kanał alfa; JPG spłaszcza do wybranego koloru.

Wybór promienia dla typowych kształtów UI

Gotowe ustawienia promienia

Kształt Promień
Subtelna karta UI 4-8 px
Karta Material Design 4 px (lub 8 px w M3)
Ikona aplikacji iOS 22,37% boku („squircle“)
Ikona aplikacji macOS 18,75% boku
Dymek relacji na Instagramie 12-16 px
Zaokrąglony awatar 50% krótkiego boku (w pełni okrągły)
Kupon biletu Asymetryczny, zaokrąglij tylko jeden lub dwa rogi
Strona z ogonkiem dymka Jeden róg mały, reszta większe

Problem squircle

Ikony iOS to nie proste zaokrąglone prostokąty, używają „superelipsy“, która jest matematycznie gładsza na przejściu. Prawdziwe squircle wykraczają poza to, co potrafi wyrenderować CSS-owy border-radius czy prosta maska alfa; narzędzie przybliża je zaokrąglonym prostokątem wysokiego rzędu, który przy typowych rozmiarach ikon wygląda nie do odróżnienia.

Zachowanie przezroczystości

  • Wynik PNG jest domyślny, zaokrąglone rogi stają się przezroczystymi pikselami. Przydatne do ikon aplikacji, kart UI i wszędzie, gdzie musisz złożyć obraz na zróżnicowanym tle.
  • Wynik JPG nie może być przezroczysty. Zaokrąglone rogi wypełniają się wybranym kolorem, dzięki czemu zdjęcie wygląda jak oprawione.

Inny promień dla każdego rogu

Wygląd dymka: zaokrąglij trzy rogi przy 12 px i zostaw jeden przy 0 px (róg, w którym doczepiałby się „ogonek“). Kupon biletu: dwa ostre i dwa zaokrąglone. Asymetryczne promienie to szybki sposób, by zasugerować, że obraz doczepia się do czegoś innego.

Antyaliasing

Krzywizny rogów są rysowane z 4-krotnym nadpróbkowaniem, więc wyglądają ostro przy normalnych rozmiarach oglądania. W druku lub przy mocnym powiększeniu promień wciąż jest widocznie gładki.

Najczęściej zadawane pytania

Apple używa squircle, którego krzywizna rogu wynosi około 22,37% boku ikony. Na płótnie 1024 × 1024 to około 229 px efektywnego promienia rogu, choć dokładna matematyka nieco różni się od zwykłego zaokrąglonego prostokąta.

Tak. Promień jest stosowany dla każdego rogu niezależnie od proporcji obrazu. Przy skrajnych proporcjach (bardzo szeroki lub bardzo wysoki) ustawienie promienia na 50% krótkiego boku daje kształt kapsułki.

Nie, JPG nie obsługuje przezroczystości. Albo wyeksportuj jako PNG, by zachować zaokrąglony kanał alfa, albo wybierz kolor tła dla JPG, a rogi wypełnią się tym kolorem.

Tak. Narzędzie dodaje tylko maskę alfa i nie zmienia rozmiaru obrazu. Jeśli chcesz połączyć zaokrąglanie ze zmianą rozmiaru, najpierw zastosuj narzędzie do zmiany rozmiaru.

Powiązane narzędzia

Próbnik kolorów Material Design

Przeglądaj paletę kolorów Material Design. Kopiuj dowolny odcień (od 50 do A700) w formacie HEX, RGB lub HSL jednym dotknięciem.

Kreator flag

Zaprojektuj w przeglądarce prostą własną flagę 3:2 z sześcioma układami, kolorami, tekstem i symbolem. Pobierz SVG lub PNG albo otwórz okno drukowania przeglądarki.

Przytnij GIF

Przytnij statyczny lub animowany GIF według dokładnych współrzędnych i pobierz ponownie zakodowany plik GIF.

Symulator daltonizmu

Symuluj, jak obraz wygląda przy różnych zaburzeniach widzenia barw: protanopii, deuteranopii, tritanopii i achromatopsji.

Kreator broszur

Napisz prywatną, sześciopanelową broszurę w przeglądarce, sprawdź obie strony, wybierz kolory i wydrukuj każdą stronę w oknie przeglądarki.

Skaner dokumentów

Zrób lub wybierz do 10 zdjęć dokumentu, uporządkuj je, popraw wygląd i utwórz lokalnie PDF A4.

Narzędzie jest dostępne w innych językach