Najlepszy przepływ pracy w projektowaniu ikon: zacząć od dużego, czy zacząć od małego?

Czy projektując ikony, które muszą być dostarczane w kilku rozmiarach, zaczynasz od mniejszego rozmiaru, a następnie skalujesz do większych rozmiarów? A może zaczynasz duże i zmniejszasz?

Oba mają kilka zalet. Próbuję udoskonalić przepływ pracy, więc pomoc od innych byłaby pomocna. Załóżmy, że projektujemy ikonę Maca lub Windowsa, gdzie odnoszą się rozmiary - są to w większości dokładne wielokrotności.

W przypadku OS X standardowe rozmiary ikon aplikacji to:

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 i 1024 × 1024.

W systemie Windows 7 standardowe rozmiary ikon aplikacji to:

• 16x16, 32x32, 48x48, 64x64 i 256x256.

W przypadku iOS standardowe rozmiary ikon aplikacji to:

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 i 1024x1024.

W przypadku Androida standardowe rozmiary ikon aplikacji to:

• 36x36, 48x48, 72x72, 96x96 i 512x512.

W przypadku systemów iOS i Android rozmiary ikon są nieco bardziej przypadkowe, a skale również się nie odnoszą, więc mądre podejście do siatki projektowej ma mniejsze znaczenie, ponieważ mniej prawdopodobne jest znalezienie współrzędnych, które uderzają w granice pikseli dla wielu rozmiarów.

Metoda 1: Zmniejszenie

1. Zaprojektuj ikonę o największym rozmiarze (często 1024 × 1024) przy użyciu wektorów i wygenerowanych efektów, takich jak style warstw.

2. Powiel i przeskaluj dokument, aby utworzyć mniejsze rozmiary.

3. Dokonaj wymaganych poprawek i zapisz ostateczny obraz.

To świetnie, ale brakuje możliwości wyrównania elementów do siatki, która działa dla wielu rozmiarów. Używanie grubej siatki do przyciągania wydaje się nieco pomóc. Na przykład dokument 1024 × 1024 z siatką 16 pikseli oznacza, że ​​punkty przyciągania dadzą przyciągnięte piksele do rozmiaru 64 × 64. Chodzi o to, aby projektować ze szczegółami, ale dopasować do mniejszych rozmiarów siatek, abyś trafił w te ważne pozycje.

Metoda 2: Zwiększanie skali

1. Zaprojektuj ikonę w najmniejszym lub jednym z najmniejszych rozmiarów (często 32 × 32 lub 64 × 64) przy użyciu wektorów i wygenerowanych efektów, takich jak style warstw. Zwykle nie ma wystarczającej ilości szczegółów w formacie 16 × 16, aby użyć go jako punktu wyjścia.

2. Duplikuj i skaluj dokument w górę, aby utworzyć większe rozmiary, a w dół w przypadku małych rozmiarów.

3. Dokonaj wymaganych poprawek i zapisz ostateczny obraz.

Prowadzi to do prostych ikon bez szczegółów, więc nie lubię tak pracować.

Metoda 3: Skalowanie w górę, a następnie w dół

1. Utwórz szorstki projekt w mniejszym rozmiarze (często 32 × 32 lub 64 × 64) przy użyciu wektorów i wygenerowanych efektów, takich jak style warstw.

2. Skaluj dokument do największego rozmiaru i dodaj szczegóły. To jest punkt, w którym ikona jest wygładzana i dodawana jest większość szczegółów.

3. Powiel i przeskaluj dokument dla wszystkich mniejszych rozmiarów.

4. Dokonaj wymaganych poprawek i zapisz ostateczny obraz.

To wydaje się być najlepsza metoda, z zaletami i wadami innych metod. Jako nieco powiązany punkt, oznacza to również, że zwykle projektuję ikony iOS w rozdzielczości 912 × 912, ponieważ jest to dokładnie 16 razy rozmiar ikony iPhone'a innej niż Retina 57 × 57.

Czy istnieje lepsza metoda projektowania ikon, które należy dostarczyć w kilku rozmiarach?

Celem jest osiągnięcie jak najlepszego wyniku przy jak najmniejszym wysiłku.

Drobna korekta twoich założeń: chociaż Windows i Mac używają wielokrotności 16, nie skalują się w tym samym tempie. Standardowe rozmiary Vista / 7 to 16 ² , 32 ² , 48 ² , 256 ² . OS X to 16 ² , 32 ² , 128 ² , 512 ² (+ wersje HiDPI). Aby jeszcze bardziej skomplikować sprawę, domyślne poziomy powiększenia w systemie Windows Vista / 7 wydają się wynosić 16 ² , 48 ² , 96 ² , 256 ² i z radością skalują się w krokach tak małych, jak 2px. Nie powinno to mieć większego wpływu na przebieg pracy, z wyjątkiem tego, że eliminuje potrzebę dbania o określone siatki pikseli na wszystkich poziomach powiększenia.

Mój przepływ pracy jest inny niż twój, ponieważ nie zmieniam rozmiarów. Nowy obraz jest tworzony dla każdego poziomu rozmiaru i nie próbuję odtworzyć dokładnie tego samego układu.

Rozmiar, od którego zaczynam, zależy od platformy. Jeśli projektuję dla Windows, zaczynam od 48x48. (Nie mam na to żadnych podstaw naukowych, ale domyślny poziom powiększenia systemu Windows 7 to „Średni”, który wynosi 48 x 48. Ikony Vista, OS X, iPhone, iPad i Android również są wystarczająco zbliżone do tego rozmiaru, więc jest wygodny i wygodny.)

W pełni ukończona ikona jest wykonywana w tym rozmiarze i stanowi odniesienie dla innych ikon w rodzinie. Jeśli robię aplikację komputerową, stworzę inne wersje 16x, 96x i 256x, aby pasowały do ​​domyślnych poziomów Windows (chyba że oczywiście na Maca). 96x jest zwykle bardzo podobny do 48x.

Wersja 256x będzie całkowicie nowym dziełem. Znacznie więcej szczegółów (nawet jeśli są to małe rzeczy, takie jak teksturowanie elementów tła). Zostaną dodane wszystkie szczegóły, których nie mogłem zmieścić w mniejszych wersjach. Jeśli ktoś ma ustawiony ekran na gigantyczne ikony, powinien być zadowolony z tego, co widzi.

Wersja 16x to także nowe dzieło. Bardzo mało szczegółów. Identyfikacja logo lub bardzo prostej ikonografii z taką samą paletą kolorów jak w większych wersjach. W tym rozmiarze nie staram się robić niczego pięknego - po prostu natychmiast rozpoznawalnego.

Więc przynajmniej dla mnie nie jest to kwestia skalowania w górę lub w dół w nadziei posiadania identycznego obrazu lub zastosowania tego samego układu podstawowego we wszystkich rozmiarach. Myślę o tym jak o wjeździe do miasta - w oddali jest to tylko niewielka, ale rozpoznawalna linia horyzontu. Zbliżasz się i zaczynasz wybierać budynki. Jesteś w nim i czujesz wszystkie detale i wymiary. Z każdej odległości wygląda to inaczej, ale płynne przejście z rozmiaru na rozmiar sprawia, że ​​cała rodzina nigdy nie czuje się rozłączona.

Zdecydowanie zacznij od dużych i zmniejszaj. Ilekroć projektanci projektują ikony dla mojego oprogramowania, wolę zobaczyć, jak będzie wyglądać ikona w większym rozmiarze, a następnie mogę zdecydować, które funkcje usunąć lub podkreślić w mniejszych rozmiarach. Musisz wiedzieć, co jest na ikonie, zanim usuniesz elementy z małej. Ikony glyfx mają kilka dobrych przykładów interpretacji dużych i małych ikon tego samego projektu.

Wolę robić wszystko dla najmniejszej gęstości i skalować. Jeśli projektujesz cały układ dla aplikacji, praca z siatką jest znacznie łatwiejsza i pozwala zaoszczędzić wielu bólów głowy, ponieważ przesuwasz obiekty na mniejszej siatce.

Więc mój przepływ pracy wygląda następująco: 1. Tworzę układ w najmniejszej skali dpi w Photoshopie i ciągle robię ikony w programie Illustrator, ponieważ obrazy wektorowe nie mają problemu ze skalowaniem w górę. 2. Kiedy tworzę każdą ikonę / obiekt itp., Tworzę wszystkie przeskalowane wersje w tym samym czasie (kiedy uznaję, że wygląda to dobrze w układzie) i przekazuję programistom ostatnie pngs.

Muszę zauważyć, że zacząłem od iOS.