Surowy zrzut ekranu wygląda płasko wklejony w tweeta, slajd lub landing page. To narzędzie umieszcza go na ładnym gradiencie (lub jednolitym kolorze), dodaje margines dla oddechu, zaokrągla rogi i rzuca pod spodem miękki cień — dopracowany wygląd, jaki widzisz w zrzutach produktów wszędzie. Wybierz proporcje pod social media lub pozostaw automatyczne.
Wszystko komponuje się na żywo na płótnie w Twojej przeglądarce i eksportuje jako plik PNG. Twój zrzut ekranu — który może pokazywać prywatne dane — nigdy nie jest przesyłany.
Jak używać
- Dodaj zrzut ekranuWrzuć obraz, który chcesz upiększyć.
- Nadaj styl ramceWybierz tło, margines, promień zaokrąglenia i cień; wybierz proporcje, jeśli ich potrzebujesz.
- Pobierz plik PNGZapisz dopracowany obraz, gotowy na social media, dokumenty lub slajdy.
Zamień surowy zrzut ekranu w produktowy zrzut ekranu
Narzędzie do upiększania zrzutów ekranu wrzuca Twoje przechwycenie na tło i dodaje trzy rzeczy, które sprawiają, że zrzut ekranu wygląda na zaprojektowany, a nie złapany: odstęp wokół obrazu, zaokrąglone rogi na samym zrzucie ekranu oraz miękki cień rzucany, który unosi go nad powierzchnię. Wybierz gotowy gradient, jednolity kolor lub przezroczyste tło, dostosuj każdą regulację i obserwuj, jak podgląd aktualizuje się na żywo przed wyeksportowaniem PNG.
Wszystko komponuje się na płótnie canvas w Twojej przeglądarce, więc zrzut ekranu nigdy nie jest przesyłany. To ma znaczenie, bo zrzut ekranu może mieścić prywatną wiadomość, fakturę, panel lub token w pasku URL — dodanie cienia nie powinno oznaczać wysyłania czegokolwiek z tego na serwer. Nie ma konta, a gdy strona się załaduje, działa dalej offline.
Właściwy kształt do miejsca, dokąd trafia
Każde miejsce, gdzie publikujesz obraz, woli jakiś kształt. Zablokuj wynik na 16:9 do prezentacji i szerokich kart społecznościowych, 1:1 do kwadratowego wpisu na Instagramie lub LinkedIn, 3:4 do wysokiego obrazu, który wypełnia więcej ekranu telefonu, albo zostaw na Auto, aby ramka opasała zrzut ekranu wraz z jego odstępem. Gdy zablokujesz proporcje, odstęp wypełnia resztę ramki, więc eksport wpada w miejsce bez niezręcznego przycięcia.
Ustaw tło na przezroczyste, a PNG eksportuje się z czystym obszarem odstępu — odstęp, promień rogu i cień wszystkie zostają, znika tylko wypełnienie za cieniem. To ta wersja, którą umieszczasz na własnym tle w Figmie, Keynote lub miniaturze.
Do czego się przydaje
Ujęcia premier i changelogów — Unieś produktowy zrzut ekranu na miękkim gradiencie, aby wpis o wydaniu lub changelog wyglądał na zamierzony, a nie surowy.
Dopracowane tweety i wątki — Dodaj odstęp, zaokrąglone rogi i słaby cień, aby Twój zrzut ekranu przestał zderzać się z tekstem wokół niego.
Prezentacje — Wyeksportuj w 16:9 z czystym tłem, aby zrzuty ekranu siedziały spójnie w całej prezentacji.
Kwadratowe wpisy społecznościowe — Zablokuj 1:1, aby szeroki zrzut ekranu zmieścił się w siatce Instagrama lub LinkedIn bez przycięcia.
Zasoby Figma i Keynote — Wyeksportuj na przezroczystym tle, aby zachować zaokrąglone rogi i cień, a potem wrzuć go na własny układ.
Nagłówki dokumentacji — Umieść zrzut ekranu na jednolitym kolorze marki dla schludnego, spójnego z marką obrazu nagłówkowego w dokumentacji lub wiki.
Goły zrzut ekranu wygląda płasko, gdziekolwiek go wkleisz
Zrzut ekranu prosto z Twojego ekranu to prostokąt pikseli z twardą krawędzią po wszystkich czterech stronach. Sam w sobie jest w porządku do zgłoszenia błędu. Ale w chwili, gdy wrzucisz go w tweet, slajd, sekcję bohaterską strony docelowej czy dokument Notion, wygląda niedokończenie — styka się wprost z otaczającym go tekstem, narożniki wydają się ostre i tanie, a między obrazem a tłem nie ma separacji. Widziałeś dopracowaną wersję sto razy: zrzut ekranu produktu unoszący się na miękkim gradiencie kolorów, z odrobiną przestrzeni do oddychania wokół, delikatnie zaokrąglonymi narożnikami i lekkim cieniem, dzięki któremu odrywa się od strony. Ten wygląd to nie filtr ani gotowy szablon. To trzy małe rzeczy złożone razem, i to narzędzie robi dokładnie te trzy rzeczy.
Wrzucasz zrzut ekranu na płótno, a ono komponuje gotowy obraz na żywo w Twojej przeglądarce. Wybierasz tło — gotowy gradient, jednolity kolor albo przezroczyste — ustawiasz, ile odstępu siedzi wokół zrzutu, wybierasz promień narożnika i podkręcasz cień w górę lub w dół. Podgląd aktualizuje się na bieżąco. Gdy wygląda dobrze, eksportujesz PNG. Zrzut ekranu, który może zawierać wątek e-maili, pulpit, czat, numery kont, cokolwiek, jest rysowany prosto na element <canvas> i nigdy nie opuszcza karty. Bez wysyłania, bez konta, a gdy strona się wczyta, działa dalej z wyłączoną siecią.
Co odstęp, zaokrąglenie, cień i gradient faktycznie robią
- Odstęp daje zrzutowi margines, żeby nie był wciśnięty od krawędzi do krawędzi. Ta luka jest tym, co sprawia, że czyta się jako celowy obiekt umieszczony na powierzchni, a nie surowe przechwycenie.
- Zaokrąglone narożniki na samym zrzucie zmiękczają cztery twarde kąty proste. To drobna zmiana, która natychmiast czyta się jako „zaprojektowane" zamiast „chwycone".
- Miękki cień oddziela zrzut od tła, więc wygląda, jakby siedział lekko nad powierzchnią, a nie był płasko naklejony. Trzymaj go lekki — to jest to, co sprzedaje głębię bez ciężkiego wyglądu.
- Gradientowe (lub jednolite) tło wypełnia odstęp kolorem. Łagodny dwutonowy gradient jest pojedynczym największym powodem, dla którego te zrzuty z premier aplikacji i changelogów wyglądają drogo; jednolity kolor to spokojniejsza, zgodna z marką alternatywa.
Razem to jest wygląd „zrzutu produktu" i to cały zakres narzędzia — nie więcej, nie mniej.
Proporcje pod to, dokąd idzie
Wyjście może być Auto (ramka po prostu opina Twój zrzut plus odstęp) albo zablokowane na 16:9, 4:3, 1:1 lub 3:4. Proporcje mają znaczenie, bo każde miejsce, w którym publikujesz, ma preferowany kształt: 16:9 do prezentacji i szerokich kart społecznościowych, 1:1 do kwadratowego posta na Instagramie czy LinkedInie, 3:4 do wysokiego obrazu, który wypełnia więcej ekranu telefonu. Zablokuj proporcje, a odstęp wypełnia resztę ramki wokół Twojego zrzutu, więc eksport wpada w ten slot bez niezgrabnego przycięcia.
Przezroczyste tło, celowo
Ustaw tło na przezroczyste, a PNG eksportuje się z obszarem odstępu czystym zamiast kolorowym. To ten, którego chcesz, gdy masz zamiar umieścić zrzut z zaokrąglonym narożnikiem i cieniem na własnym tle w Figmie, Keynote czy miniaturze — zachowujesz odstęp, promień i cień i wrzucasz go na dowolną powierzchnię, którą już masz. Cień zostaje; znika tylko wypełnienie za nim.
Dlaczego tylko-lokalnie jest tu sednem
Zrzuty ekranu są po cichu jedną z najbardziej prywatnych rzeczy, których wersję kiedykolwiek zechcesz udostępnić. Pojedyncze przechwycenie może pokazać nazwisko klienta, fakturę, prywatną wiadomość, wewnętrzną metrykę, token w pasku URL. Upiększacz, który wysyła Twój obraz na serwer, by go „przetworzyć", prosi Cię o oddanie tego wszystkiego tylko po to, by dodać cień. Tutaj komponowanie to zwykła praca na płótnie w Twojej własnej przeglądarce, więc nie ma czego wysyłać ani czemu ufać.
Jedna uczciwa uwaga o zakresie: to dodaje polerkę gradient-odstęp-cień i nic więcej. Nie opakowuje Twojego zrzutu w ramkę przeglądarki czy makietę telefonu ani nie dodaje strzałek, rozmyć czy adnotacji — to wygląd upiększenia, jeden zrzut ekranu naraz.
Dlaczego IMG.DIY
Gradient lub jednolity
Gotowe gradienty lub dowolny jednolity kolor.
Margines i zaokrąglenie
Przestrzeń na oddech i zaokrąglone rogi.
Miękki cień
Regulowana głębia dla wrażenia unoszenia się.
Prywatnie
Komponowane lokalnie — nigdy nie przesyłane.