Utwórz w Vector Studio osobny kwadratowy obszar roboczy dla każdej ikony, a następnie użyj Slice Studio, aby wyeksportować osobne pliki w wymaganych rozmiarach. Ten sposób pracy na Macu obejmuje jednakowe wymiary obszarów roboczych, czytelne nazewnictwo oraz ustawienie DPI dokumentu wpływające na eksport wycinków.

Instrukcje te opierają się na aktualnym Centrum pomocy Affinity, którego interfejs wykorzystuje Vector Studio i Slice Studio. Celem jest utworzenie niewielkiego zestawu ikon w jednym dokumencie i wyeksportowanie każdej ikony osobno. Affinity opisuje narzędzie Obszar roboczy w Vector Studio oraz jednoczesny eksport obszarów roboczych za pomocą Slice Studio. Narzędzie Obszar roboczy, Eksportowanie obszarów roboczych.

Zdecyduj, które różnice wymagają osobnych obszarów roboczych

Użyj osobnego obszaru roboczego dla każdego odrębnego rysunku ikony. Na potrzeby tego przykładowego projektu utwórz trzy neutralne ikony geometryczne — koło, kwadrat i romb — na osobnych obszarach roboczych o wymiarach 64 × 64 px. Każdy rysunek będzie miał identyczne płótno, nawet jeśli widoczny kształt zajmuje mniejszą przestrzeń.

Jeśli ten sam rysunek ma być po prostu wyeksportowany w kilku rozmiarach, pozostaw go na jednym obszarze roboczym i skonfiguruj wiele rozmiarów eksportu. Affinity obsługuje wiele formatów i rozmiarów w ustawieniach eksportu każdego wycinka. Osobne obszary robocze przydają się, gdy chcesz niezależnie edytować rysunki — na przykład utworzyć uproszczoną, mniejszą wersję z innymi odstępami. To decyzja projektowa wynikająca z możliwości eksportu, a nie wymóg Affinity. Panel Wycinki.

Twoje wymaganie Zalecana konfiguracja
Trzy różne ikony o jednakowych wymiarach płótna Trzy obszary robocze o jednakowych wymiarach
Jeden niezmieniony rysunek eksportowany w kilku rozmiarach Jeden obszar roboczy z kilkoma rozmiarami eksportu wycinka
Mała ikona wymagająca innej geometrii Osobny obszar roboczy dla zmienionego rysunku
Jeden plik ikony wyeksportowany do kontroli Nazwany obszar roboczy w oknie dialogowym Eksportuj

W tym przykładzie zaplanuj trzy obszary robocze i dwa rozmiary PNG dla każdego: 64 × 64 px oraz 128 × 128 px. Oczekiwanym wynikiem jest sześć plików. Ta prosta liczba plików ułatwi sprawdzenie eksportu.

Utwórz pierwszy obszar roboczy ikony z dokładnymi wymiarami

Zacznij w Vector Studio i wybierz Plik > Nowy. Ustaw Jednostki dokumentu na piksele, Szerokość strony i Wysokość strony na 64 px, a DPI na 72 w tym przykładzie. Włącz Przezroczyste tło, jeśli chcesz uzyskać niepomalowane tło, a przed utworzeniem dokumentu włącz opcję obszaru roboczego. W pomocy dotyczącej tworzenia nowych dokumentów opcja ta nazywa się Obszary robocze, a w instrukcjach dotyczących obszarów roboczych — Utwórz obszar roboczy. Tworzenie nowych dokumentów, Dodawanie i usuwanie obszarów roboczych.

Ustawienie 72 DPI jest celowe. Dokumentacja Slice Studio Affinity pokazuje, że dokument 64 × 64 px przy 72 DPI eksportuje się do rozmiaru 64 × 64 px w skali 1x i 128 × 128 px w skali 2x. Inne ustawienia DPI dokumentu mogą zmienić zależność między mnożnikiem wycinka a wymiarami eksportowanych pikseli. Eksportowanie za pomocą Slice Studio.

Jeśli masz już dokument, wybierz Narzędzie Obszar roboczy w Vector Studio. Aby ustawić dokładne, niestandardowe wymiary, udokumentowana metoda na Macu polega na kliknięciu strony z wciśniętym klawiszem Command przy aktywnym tym narzędziu, a następnie wpisaniu wymiarów w oknie dialogowym Utwórz obszar roboczy. Na pasku kontekstowym narzędzia znajdują się także udokumentowane kontrolki Szer., Wys., Rozmiar i Wstaw obszar roboczy. Dodawanie i usuwanie obszarów roboczych, Narzędzie Obszar roboczy.

Jeśli wymagany jest dokładny rozmiar w pikselach, nie oceniaj wymiarów płótna na oko, przeciągając myszą. Przeciąganie to obsługiwany sposób tworzenia obszaru roboczego, ale wpisanie wartości liczbowych precyzyjnie określa wymagane wymiary. Wybierz też bezpośrednio Narzędzie Obszar roboczy: aktualna pomoc nie podaje dla niego domyślnego skrótu klawiszowego. Dodawanie i usuwanie obszarów roboczych, Narzędzie Obszar roboczy.

Dodaj pasujące obszary robocze i uporządkuj ich zawartość

Aby uzyskać konfigurację łatwą do sprawdzenia, utwórz dodatkowe obszary robocze przed narysowaniem ikon. Zaznacz pierwszy pusty obszar roboczy, a następnie wybierz Edycja > Duplikuj > Zaznaczenie. Przenieś duplikat w osobne miejsce i powtórz czynność, aby utworzyć trzeci obszar. Affinity opisuje także przeciąganie z wciśniętym klawiszem Command zaznaczonego obszaru roboczego za pomocą Narzędzia Przesuwanie lub Narzędzia Obszar roboczy jako metodę duplikowania. Dodawanie i usuwanie obszarów roboczych.

Ułóż obszary w czytelnym rzędzie. Opcja Odstępy Narzędzia Obszar roboczy określa rozmieszczenie klonowanych obszarów roboczych i pomaga w podejmowaniu decyzji dotyczących przyciągania podczas przesuwania obszaru w pobliżu innego. Użyj tej opcji do uporządkowania przestrzeni roboczej; docelowe płótno ikony nadal ma mieć wymiary 64 × 64 px. Narzędzie Obszar roboczy.

Zmień nazwy obszarów na circle, square i diamond. Kliknij dwukrotnie nazwę obszaru roboczego nad nim na obszarze montażowym albo kliknij dwukrotnie jego nazwę w panelu Warstwy. Krótkie nazwy ułatwią późniejsze dopasowanie każdego obszaru do wpisu eksportu. Dodawanie i usuwanie obszarów roboczych.

Narysuj odpowiedni kształt wewnątrz każdego obszaru, pozostawiając tyle marginesu, ile wymaga projekt. Przykładowo wyśrodkowany kształt o prostokącie ograniczającym 40 × 40 px pozostawia po 12 px z każdej strony kwadratowego płótna o boku 64 px: (64 − 40) ÷ 2 = 12. To przykład układu, a nie ustawienie wstępne Affinity ani uniwersalna specyfikacja ikon.

Podczas pracy sprawdzaj panel Warstwy: obiekty każdej ikony powinny należeć do przeznaczonego dla niej obszaru roboczego. Affinity informuje, że obiekty utworzone wewnątrz obszarów roboczych są domyślnie przycinane do ich granic. Przeniesienie zawartości między obszarami zmienia jej element nadrzędny w stosie warstw, dlatego hierarchia pomaga sprawdzić, do którego obszaru należy dany rysunek. Przenoszenie zawartości obszaru roboczego.

To przypisanie ma znaczenie podczas eksportu. Wycinek utworzony z elementu przez Eksportowanie warstw zawiera wyłącznie zawartość warstwy źródłowej. Wycinek narysowany Narzędziem Wycinek zawiera zawartość wszystkich widocznych warstw w jego obszarze. Aby zachować jednakowe płótna ikon, używaj wycinków opartych na całych obszarach roboczych i trzymaj grafikę w odpowiednich kontenerach. Eksportowanie za pomocą Slice Studio.

Skonfiguruj osobne eksporty ikon w Slice Studio

Włącz Slice Studio za pomocą Menedżera Studio. Instrukcje Affinity dotyczące eksportu obszarów roboczych mówią, że wycinki obszarów roboczych są już dostępne w panelu Wycinki. Rozwiń wpis każdego obszaru, aby skonfigurować jego eksport. Jeśli panel jest ukryty, otwórz Okno > Ogólne > Wycinki. Eksportowanie obszarów roboczych, Panel Wycinki.

Jeśli obszar roboczy wymaga wycinka, otwórz Okno > Ogólne > Eksportowanie warstw, zaznacz obszar i kliknij Utwórz wycinek. Zaznacz cały obszar roboczy, jeśli chcesz uwzględnić całe płótno; zaznaczenie wyłącznie obiektu ikony sprawi, że ten obiekt stanie się źródłem wycinka. Panel Eksportowanie warstw (Slice Studio).

Skonfiguruj wycinek pierwszego obszaru roboczego w następujący sposób:

  1. Rozwiń jego wpis w panelu Wycinki i wybierz PNG jako format pliku.
  2. Ustaw rozmiar eksportu 1x.
  3. Użyj wciętego przycisku + pod wpisami rozmiarów, aby dodać rozmiar eksportu 2x.
  4. Sprawdź nazwy plików, aby oba rozmiary miały odrębne nazwy, na przykład circle-64 i circle-128.
  5. Powtórz czynności dla pozostałych wycinków obszarów roboczych. Affinity opisuje dodatkowe formaty, wiele rozmiarów oraz konfigurację nazw plików eksportu w ustawieniach wycinków. Eksportowanie wycinków, Eksportowanie obszarów roboczych.

W przypadku większego zestawu skonfiguruj jeden wycinek, a następnie użyj opcji Kopiuj konfigurację eksportu do schowka i Zastąp konfigurację eksportu ze schowka, aby przenieść ustawienia formatu i skali na inny zaznaczony wycinek. Potem sprawdź nazwy plików docelowych. Pozwala to ograniczyć powtarzanie konfiguracji, a jednocześnie dokładnie sprawdzić nazewnictwo. Panel Wycinki.

Zaznacz pola przy trzech wycinkach zamierzonych obszarów roboczych. Wyłącz niepotrzebny wpis Strona, który reprezentuje całą stronę lub wszystkie obszary robocze. Kliknij Eksportuj wycinki (n), wybierz folder docelowy i wyeksportuj pliki. Przycisk eksportu zbiorczego eksportuje zaznaczone pozycje w panelu; samo wyróżnienie wiersza nie określa zawartości eksportu zbiorczego. Panel Wycinki.

Sprawdź wymiary i udokumentowane ograniczenia eksportu

Zanim skonfigurujesz więcej ikon, obejrzyj sześć przykładowych plików. Sprawdź, czy każdy zawiera jedną kompletną ikonę, czy wymiary płótna wynoszą zgodnie z zamierzeniem 64 × 64 px lub 128 × 128 px oraz czy nazwy rozróżniają rysunek i rozmiar. Oprócz samego rysunku sprawdź też otaczającą go pustą przestrzeń.

Jeśli wymiary się różnią, sprawdź jednocześnie DPI dokumentu i skalę wycinka. Opublikowany przykład Affinity podaje następujące wyniki dla dokumentu 64 × 64 px:

DPI dokumentu Eksport 1x Eksport 2x Eksport 3x
72 64 × 64 px 128 × 128 px 192 × 192 px
144 32 × 32 px 64 × 64 px 96 × 96 px

Wartości pochodzą z tabeli DPI w dokumentacji Affinity. Pokazują, dlaczego nie można zakładać, że etykieta 1x zawsze oznacza te same wymiary w pikselach przy każdym DPI dokumentu. Eksportowanie za pomocą Slice Studio.

Affinity opisuje także bezwzględne rozmiary wycinków, takie jak 100w. W przypadku kwadratowego obszaru roboczego, dla którego wymagane jest jawne podanie szerokości, ustawienie eksportu z bezwzględną szerokością to kolejna obsługiwana metoda; sprawdź też wynikową wysokość. Jeśli chcesz bezpośrednio odwzorować zależność między rozmiarami 1x i 2x z tego przykładu, pozostaw ustawienie 72 DPI. Eksportowanie obszarów roboczych.

Aby wyeksportować pojedynczy plik do kontroli, wybierz Plik > Eksportuj > Eksportuj i wskaż nazwany obszar roboczy w polu Obszar. Dokumentacja jest niespójna w kwestii opcji Cały dokument: strona dotycząca eksportowania obszarów roboczych opisuje łączony wynik, natomiast strona Ustawienia eksportu wspomina o osobnych obrazach obszarów roboczych lub stronach PDF, zależnie od formatu. W przypadku opisanego w tym artykule eksportu zbiorczego do osobnych plików użyj jawnie opisanej procedury Slice Studio. Eksportowanie obszarów roboczych, Ustawienia eksportu.

Jeśli brakuje grafiki, sprawdź zarówno przypisanie jej do obszaru roboczego, jak i opcję Pokaż element przy eksporcie w panelu Eksportowanie warstw. To ustawienie jest niezależne od zwykłej widoczności. Jeśli później ponownie otworzysz dokument, jeszcze raz sprawdź folder docelowy: według dokumentacji Affinity folder eksportu wycinków jest zapamiętywany tylko w bieżącej sesji edycji. Panel Eksportowanie warstw (Slice Studio), Eksportowanie wycinków.

Gdy przykładowa konfiguracja z trzema obszarami roboczymi wygeneruje sześć poprawnie nazwanych plików o wymaganych wymiarach, zastosuj te same ustawienia do pozostałych ikon. Używaj osobnego obszaru roboczego dla każdego odrębnego rysunku, ponownie stosuj sprawdzoną konfigurację eksportu i kontroluj wynik za każdym razem, gdy wprowadzasz inny rozmiar płótna lub wymaganie eksportu.

Źródła