Poradnik wideo: kadrowanie i skalowanie obrazów

Ten film pokazuje, jak kadrować i skalować wsadowo obrazy z Figmy za pomocą wtyczki HyperCrop.

Po przejściu na inną stronę w Figmie wczytują się rozmiary kadrowania i ustawienia eksportu zapisane dla tej strony. Strona bez zapisanych rozmiarów kadrowania zaczyna od domyślnych presetów.

Wybieranie presetów popularnych rozmiarów

HyperCrop zawiera dziesiątki presetów rozmiarów, dzięki którym łatwo przytniesz wsadowo i wyeksportujesz obrazy dla popularnych platform i urządzeń – bez samodzielnego sprawdzania i wpisywania wymiarów każdego z nich.

Możesz dodać (i usunąć) dowolny z tych rozmiarów, przewijając listę i klikając pole wyboru obok danej pozycji. Zaznaczenie rozmiaru doda go do listy wybranych rozmiarów, a odznaczenie go z niej usunie.

Dostępne rozmiary popularnych platform i urządzeń

Możesz wybierać spośród dziesiątek presetów z poniższych kategorii:

• Facebook
• Google Ads
• Instagram
• LinkedIn
• Papier
• Telefony
• Pinterest
• Ekrany
• Snapchat
• Tablety
• Twitch
• Twitter (X)
• YouTube.

Dodawanie własnych presetów rozmiarów kadrowania

Możesz dodać (i usunąć) dowolny z tych rozmiarów, przewijając listę i klikając pole wyboru obok danej pozycji. Zaznaczenie rozmiaru doda go do listy rozmiarów, a odznaczenie go z niej usunie.

Używanie szerokości lub wysokości „Auto”

Jeśli chcesz podać tylko szerokość albo wysokość, a HyperCrop ma sam ustalić drugi wymiar, wypełnij pole Crop Width albo Crop Height, a drugie zostaw puste. Tekst zastępczy pustego pola zmieni się wtedy na Auto. Gdy ustalona szerokość lub wysokość Ci odpowiada, kliknij przycisk Add Custom Crop Size +, aby dodać ją do dostępnych własnych rozmiarów kadrowania.

Usuwanie własnego presetu kadrowania

Aby usunąć własny preset z listy dostępnych kadrów, kliknij ikonę Trash obok własnego rozmiaru kadrowania, a potem potwierdź, klikając Delete. Rozmiar zniknie z listy wybranych rozmiarów i zostanie całkowicie usunięty z listy dostępnych kadrów.

Wybieranie obrazów do kadrowania wsadowego

Wszystkie obrazy dostępne do kadrowania wsadowego pojawiają się po prawej stronie wtyczki HyperCrop. Klikając pole wyboru obok obrazu na liście, decydujesz, czy HyperCrop ma uwzględnić go w kadrowaniu wsadowym, czy go pominąć.

Liczba wybranych obrazów zostanie pomnożona przez liczbę wybranych rozmiarów – wynik to łączna liczba obrazów, które HyperCrop wyeksportuje.

Obrazy muszą mieć ustawienia eksportu, aby pojawiły się w HyperCrop. Aby obrazy lub warstwy z Figmy były widoczne we wtyczce HyperCrop, dodaj do warstwy, którą chcesz przyciąć, co najmniej jedno ustawienie eksportu – kliknij ikonę + w prawej kolumnie Figmy, pod nagłówkiem Export.

Szybkie zaznaczanie i odznaczanie. Aby odznaczyć (lub ponownie zaznaczyć) wszystkie obrazy naraz, kliknij pole wyboru na samej górze listy, obok etykiety X of XX Images Selected.

Ustawianie punktów ostrości kadru

Domyślnie HyperCrop kadruje i skaluje obrazy wsadowo z zakotwiczeniem Center/Center, co oznacza, że punkt ostrości zawsze znajduje się dokładnie na środku obrazu.

Czasem zechcesz to zmienić, aby punkt ostrości leżał w innej części obrazu, na przykład Top/Left lub Center/Right.

Aby to zrobić, najedź kursorem na obraz, dla którego chcesz zmienić punkt ostrości, kliknij listy rozwijane pionową (↕) i poziomą (↔) i wybierz w każdej odpowiednią opcję.

Włączanie inteligentnego kadrowania

Jeśli nie chcesz ręcznie ustawiać punktu ostrości za pomocą list rozwijanych pionowej (↕) i poziomej (↔), możesz użyć przełączników Content Aware i Detect Faces.

Możesz włączyć jedną z tych funkcji (lub obie), najeżdżając kursorem na obraz, dla którego chcesz je włączyć (lub wyłączyć), i klikając odpowiedni przełącznik.

Content Aware

Włączenie opcji Content Aware sprawia, że HyperCrop używa modeli inteligentnego kadrowania, aby ustalić, gdzie na obrazie znajdują się ważne lub interesujące fragmenty. Jeśli obraz nie wymaga kadrowania twarzy do trudnego zestawu rozmiarów, nie musisz włączać tego ustawienia, bo po jego włączeniu kadrowanie trwa dłużej.

Detect Faces

Włączenie opcji Detect Faces sprawia, że HyperCrop używa modeli rozpoznawania twarzy, aby ustalić, gdzie na obrazie znajdują się twarze. Jeśli obraz nie zawiera twarzy lub nie wymaga kadrowania twarzy do trudnego zestawu rozmiarów, nie musisz włączać tego ustawienia, bo po jego włączeniu kadrowanie trwa dłużej.

Obsługa przeglądarek. Z powodu problemów ze zgodnością przeglądarek funkcja Detect Faces w HyperCrop nie działa w Safari. Uruchom wtyczkę w innej przeglądarce (na przykład w Chrome) albo w aplikacji desktopowej Figma.

Konfigurowanie ustawień eksportu kadrowania wsadowego

Gdy wybierzesz rozmiary kadrowania i obrazy, a ustawienia kadru każdego z nich Ci odpowiadają, możesz przygotować się do wsadowego kadrowania i eksportu.

Aby otworzyć panel ustawień, kliknij przycisk Batch Crop w nagłówku HyperCrop.

W panelu ustawień kadrowania wsadowego możesz wybrać m.in. Image Format (JPG lub PNG), Image Compression (jakość i rozmiar obrazu) oraz Image Fill (dotyczy tylko kadrów nieinteligentnych).

Dodawanie własnego formatu nazw plików

Przy kadrowaniu wsadowym HyperCrop pozwala ustawić własny format nazw plików, który zostanie zastosowany do wszystkich eksportowanych obrazów. Przydaje się to do spójnego nazewnictwa lub grupowania obrazów w sensowne struktury podfolderów.

To pole jest opcjonalne. Jeśli zostawisz je puste, użyty zostanie format domyślny #{collection}/#{name}_#{width}x#{height}.

Dostępne zmienne w nazwach plików

W swoim wzorcu podfolderów i nazw plików możesz dowolnie łączyć wszystkie poniższe zmienne, a także zwykły tekst i znaki (na przykład podkreślenia, litery lub cyfry).

• #{name} Nazwa warstwy w Figmie (na przykład „My Figma Layer Name”)
• #{collection} Nazwa kolekcji presetów rozmiarów (na przykład „facebook”)
• #{label} Etykieta presetu w kolekcji (na przykład „profile”)
• #{width} Szerokość obrazu po skalowaniu (na przykład „1024”)
• #{height} Wysokość obrazu po skalowaniu (na przykład „768”)

Tworzenie podfolderów. Aby utworzyć podfolder, dodaj „/” w dowolnym miejscu własnego formatu nazw plików. Na przykład #{collection}-crops/#{width}x#{height}/#{name} utworzy dynamiczną strukturę folderów, taką jak facebook-crops/1024x768/my_figma_layer_name.jpg (zmienne są podstawiane dla każdej kolekcji i każdej kombinacji szerokości i wysokości).

Pobieranie obrazów z kadrowania wsadowego na komputer

Gdy skonfigurujesz wszystkie opcje i format nazw plików tak, jak chcesz, kliknij przycisk Crop & Download Images, aby rozpocząć wsadowe kadrowanie i skalowanie obrazów w HyperCrop.

Pamiętaj, że przetworzone zostaną wszystkie wybrane rozmiary dla każdego zaznaczonego obrazu, więc im więcej obrazów i rozmiarów, tym dłużej to potrwa.

Po zakończeniu kadrowania wsadowego zobaczysz ekran z potwierdzeniem, że obrazy są gotowe do pobrania. Aby pobrać plik .zip z Figmy na komputer, kliknij przycisk Download your .zip file we wtyczce HyperCrop.

Zapisywanie pobranych plików z Figmy. Jeśli korzystasz z aplikacji desktopowej Figma, pojawi się okno pobierania pliku. Jeśli jednak używasz Figmy w przeglądarce internetowej, plik zostanie domyślnie automatycznie pobrany na komputer (zwykle do folderu Downloads / Pobrane).

Otwieranie wyeksportowanego pliku .zip

Po pobraniu pliku .zip z Figmy na komputer otwórz w eksploratorze plików folder, w którym został zapisany. Dwukrotne kliknięcie wyeksportowanego pliku .zip rozpakuje go do folderu ze wszystkimi obrazami i podfolderami (zgodnie ze wzorcem podfolderów i nazw plików ustawionym w ustawieniach eksportu HyperCrop).

Wstawianie obrazów z kadrowania wsadowego do bieżącego pliku Figmy

Gdy skonfigurujesz wszystkie opcje i format nazw plików tak, jak chcesz, możesz też wstawić przycięte obrazy bezpośrednio do Figmy, klikając przycisk Crop & Insert to Figma. Wtyczka utworzy w bieżącym pliku Figmy zupełnie nową stronę i wstawi na nią wszystkie warstwy z przyciętymi obrazami.