Eksportuj rozmiary ikon iOS w Affinity Designer

Chociaż Affinity Designer ma niezwykle użyteczny eksport @ 1x, @ 2x i @ 3x, zastanawiam się, czy istnieje sposób na eksport w różnych rozmiarach wymaganych dla ikony iOS?

Znalazłem siatki zwięzłą potrzebnych rozmiarów tutaj , które będę się rozmnażać w formacie listy:

• 1024x1024
• 180 x 180
• 152x152
• 120 x 120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29x29

To 11 różnych rozmiarów ikon!

Uważam, że cała Export Persona z koncepcją konfiguracji plasterków jest doskonała, zwłaszcza, że ​​można nakładać plasterki na poszczególne warstwy (powiedzmy, dla normalnej i wciśniętej wersji przycisku). Czy jest jakiś sposób, by użyć tego samego narzędzia, aby wykonać eksport w określonych rozmiarach?

Ponieważ wymagania zmieniają się od czasu do czasu, zawsze warto zapoznać się z wytycznymi Apple. Na mojej stronie znajduje się szablon Affinity Designer, który eksportuje 18 rozmiarów, które są obecnie wymagane do uniwersalnych aplikacji.

Wygląda na ogromną, złożoną listę, ale tak naprawdę musisz zbudować tylko 5 rozmiarów:

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

Pierwsze cztery rozmiary (wymienione w punktach) wymagają wersji 1 ×, 2 × i 3 × (jeśli jesteś przyszłościowy, a także obejmuje iPhone 6 Plus).

Niektóre rozmiary, które zobaczysz na liście w sieci i na stronie Apple, dotyczą iOS 6 i niższych (57 × 57 itd.). Nie są one potrzebne, jeśli kierujesz reklamy na iOS 7 i nowsze wersje.

Oto szablon Photoshop, który utworzyłem:

Mam ustawione plasterki do eksportowania każdej ikony oraz akcję zmiany rozmiaru i ponownego eksportu, więc kończę na:

• icon-29.png
• icon-29@2x.png
• icon-29@3x.png
• icon-40.png
• icon-40@2x.png
• icon-40@3x.png
• icon-60.png
• icon-60@2x.png
• icon-60@3x.png
• icon-76.png
• icon-76@2x.png
• icon-76@3x.png

Nie wszystkie te rozmiary są jeszcze potrzebne, ale prawdopodobnie będą w przyszłości. Począwszy od 4 podstawowych rozmiarów, budowanie ikon jest znacznie łatwiejsze.

Korzystam z plasterków w Photoshopie, aby eksportować różne regiony potrzebne dla każdej ikony. Pamiętaj, że dostarczone ikony nie powinny mieć żadnych przezroczystych obszarów - kolor powinien rozciągać się aż do rogów. iOS zamaskuje ikonę, więc nie musisz się o to martwić.

Mógłbyś zrobić to samo, korzystając z funkcji plasterka Affinity?

Aktualizacja: stworzyłem szablony ikon aplikacji open source dla Affinity Designer, Sketch, Photoshop i Illustrator . Mogą być warte rozważenia.

Możesz to zrobić w Affinity Designer, plastry mogą skalować swoje wyniki, używając sufiksów, oto eksport ikon iOS za pomocą sufiksu „w”:

Właśnie znalazłem dobry sposób na zrobienie tego w Affinity Designer. Nie jest jednak w pełni zautomatyzowany. Wyjaśnię, jak uzyskać trzy rozmiary ikon aktualnie potrzebne dla iPhone'a (29pt, 40pt, 60pt), każdy o rozdzielczości 2x i 3x:

1. Utwórz nowy dokument, ustaw jednostkę na „Punkty”, rozmiar strony na 29x29 i zaznacz „Utwórz obszar roboczy” w oknie dialogowym
2. Wklej i umieść swoje dzieło w obszarze roboczym
3. Zmień nazwę obszaru roboczego na „29pt” w panelu Warstwy (opcjonalnie)
4. Kliknij obszar roboczy prawym przyciskiem myszy i wybierz „Duplikuj”
5. Przeciągnij nowy obszar roboczy (aby zobaczyć obie strony obok siebie), a następnie zmień nazwę na „40pt” (ponownie ten krok jest opcjonalny)
6. Zmień rozmiar nowej warstwy na 40x40pt za pomocą panelu Przekształć - grafika zostanie automatycznie przeskalowana
7. Powtórz kroki od 4 do 6, aby również utworzyć obszar roboczy 60pt (w razie potrzeby dodatkowo 76pt i 83,5pt dla iPada)
8. Przejdź do Export Persona, przejdź do panelu Plasterki i wybierz rozdzielczość 2x i 3x (plus 1x dla iPada)
9. Wybierz wszystkie warstwy obszaru roboczego z listy („29pt”, „40pt” itp.) I kliknij „Eksportuj wybrane” u dołu panelu.

Koligacja utworzy wszystkie rozmiary ikon w każdej wybranej rozdzielczości, więc możesz uzyskać więcej ikon, niż faktycznie potrzebujesz. Są one jednak starannie nazwane „29pt@2x.png” itd., Więc przypisanie ich do katalogu zasobów Xcode jest naprawdę łatwe.

Jedno zastrzeżenie: po przejściu do opcji Eksportuj osobowość koligacja automatycznie tworzy wycinek eksportu dla każdego obszaru roboczego (jest to niebieska ramka z etykietą rozmiaru). Odkryłem, że czasami rozmiar tych plasterków jest wyłączony o kilka pikseli. Wygląda na błąd w AD. Możesz to jednak łatwo naprawić, przeciągając rogi plasterków.

Marc Edwards miał świetną odpowiedź, jeśli chodzi o rozmiar ikon, jakie należy utworzyć, użycie do tego plasterków i dobre linki do zasobów Photoshopa. Jednak wciąż szukam rozwiązania, w jaki sposób eksportować w wielu rozmiarach, w szczególności w Affinity Designer .

W końcu zdałem sobie sprawę, że byłoby to możliwe przy użyciu narzędzia Umieść obraz. Utwórz ikonę w jednym pliku, a następnie w innym pliku „szablonu”, możesz użyć narzędzia Umieść obraz, aby utworzyć wiele warstw, które pobierają plik ikony. Każdą z tych warstw można przekształcić w nazwany plasterek.

Wadą jest to, że każda warstwa musi zostać utworzona i skierowana na plik ikony, więc wydaje się, że byłoby to uciążliwe. Jednak po wprowadzeniu zmian w pliku podstawowym można łatwo ponownie wyeksportować wszystko.