Poradnik projektanta do Pixel Hinting
Pixel-perfect ikony i typografia wyróżniają się wśród tłumu online. Oczywiście wszyscy chcemy dążyć do tak wyrafinowanej pracy, ale czasami nawet po spróbowaniu wciąż kończymy z czymś mniej ... mniej. Pixel Hinting to jedna z umiejętności, która przyjmuje funkcję automatyczną i poprawia jej wyniki. Pomimo ultra wysokiej rozdzielczości wyświetlaczy dzisiaj - takich jak wyświetlacze siatkówki Apple - wciąż musimy "podrabiać" gładkie krzywe, abyśmy nie skończyli z pikselowanym bałaganem.
Wielu projektantów i programistów porusza się teraz w kierunku rozwiązań opartych na SVG i wektorowych; z pomocą tylko coraz lepiej z dnia na dzień. Mimo to rozwiązania oparte na wektorach mają długą drogę, zanim będą wystarczająco dojrzałe, by wykorzystać je w produkcji. SVG świetnie nadaje się do wyświetlania kształtów wektorowych, ale nie jest tak gorący przy zmianie rozmiaru tych kształtów. Tak jak wszystko inne tam, jest czas i miejsce dla każdego rozwiązania.
Czym są wektory?
Wektory są zasadniczo renderowanymi wynikami matematycznej reprezentacji kształtu. Gdy zobaczysz coś na ekranie, dzieje się tak, ponieważ komputer renderuje te obiekty i wiąże je z pikselami na ekranie. W ten sposób komputer podejmuje również decyzje dotyczące tego, co powinno, a co nie powinno, być wyświetlane jako całe piksele. Na przykład wielka litera "D" ma zarówno idealnie prostą linię, jak i zakrzywioną.
Jak widać, bez wygładzania linia zakrzywiona na "D" jest dość pikselizowana. Aby zrekompensować, kiedy kształty wektorowe są renderowane, zwykle są wygładzane, aby zapewnić bardziej ... solidny wygląd. Zamiast wyświetlać tylko piksele, które całkowicie mieszczą się w konturze wektora, piksele są stopniowo zacienione. To zmusza twój mózg do zobaczenia gładszej linii na zakrzywionych kształtach, które nie przyciągają się idealnie do siatki pikseli.
Powyżej widać, jak renderowane "D" otrzymuje tak zwane półpiksele, aby pomóc usunąć poszarpaną pikselację. Jednak ta sama funkcja wprowadza również problem: komputery są okropne, gdy zastanawiają się, co jest atrakcyjne wizualnie. W związku z tym, że dodanie tych połówek pikseli sprawia, że zaokrąglone rogi wyglądają fantastycznie, powoduje to, że linia wewnętrzna góra / dół wygląda na zamazaną. Automatyczne wygładzanie, które pojawia się, gdy renderowany jest kształt wektorowy, sprawia, że większość części kształtu i typografii wygląda świetnie, ale pozostawia inne w jeszcze gorszej jakości niż na początku.
Cześć, podpowiedź pikselowa.
Teraz, gdy masz krótkie tło na temat kształtów wektorowych i ich działania, przejdźmy do prawdziwej pracy. Podpowiedź pikseli polega na przesunięciu punktów kontrolnych wektora, aby spoczywały na obramowaniach pikseli w bardziej estetyczny sposób. Ulepszanie tych linii prostych, pozostawiając półpiksele na zakrętach. Najczęściej piksele są stosowane w typografii i kształtach do obrazów rastrowych (logo, ikony, branding itp.). Teraz, co najważniejsze, aby odpowiednio dopasować wektor, musi on mieć odpowiedni rozmiar i kształt. Gdy piksel podpowiadał ci, co robisz, obracanie lub zmienianie jego rozmiaru może - i prawdopodobnie wyrzuciłoby całą tę pracę, automatycznie zapobiegając jej wygładzeniu. Zanim zaczniemy, upewnij się, że poniższe ustawienia są dostosowane (będę używał Photoshopa do tego zadania):
- Włącz swoją sieć pikseli (Widok> Pokaż> Siatka, upewnij się także, że opcja Dodatki jest zaznaczona nad menu Pokaż)
- Upewnij się, że twoja siatka ma linię siatki co 10 pikseli, z 10 poddziałami. Lub coś podobnego, tak, że istnieje granica pomiędzy każdym pikselem.
- Wyłącz przyciąganie (Widok> odznacz przyciąganie). Nie chcemy przyciągać punktów kontrolnych z krokiem 1 piksela, chcemy przesuwać punkty w pikselach.
Pixel hinting typography
Proces tworzenia kształtów i typografii jest nieco inny, więc przeprowadzę cię przez obie. Idealnie z typografią, chcesz kernować swój typ przed lub w trakcie procesu podpowiedzi. Bez względu na to, pikselowe podpowiedzi powinny być jedną z ostatnich rzeczy, które robisz.
Najpierw wybierz typografię, która ma wskazywać piksel, i utwórz kopię warstwy, a następnie przekształć ją w kształt.
Widać, że tekst spada niezgrabnie poza siatkę, zarówno na osi poziomej, jak i pionowej. Aby to naprawić, delikatnie przesuniemy punkty kontrolne każdej litery, aż do ich lepszego dopasowania do siatki pikseli. Celem jest uzyskanie linii kształtu, jeśli nie bezpośrednio, linii siatki. Powiększ, aby dokładniej podsuwać punkty kotwiczenia. Robiąc to, często pomniejszaj, aby poprawić wygląd.
Nie chcesz dopasowywać się dokładnie do siatki, ponieważ w pierwszej kolejności odejmuje zalety antyaliasingu. Zamiast tego staraj się po prostu zachować spójność - tylko pół piksele z jednej strony każdej osi. Na przykład, zawsze zezwalam na półpiksele na prawą i górną część liter, jednocześnie wciskając lewą i dolną krawędź do siatki.
Jak widać, "wejście" zostało z grubsza dostosowane, podczas gdy "dotyk" pozostaje niezmieniony. Podobnie jak kerning, podpowiedź pikseli jest czymś więcej niż rzemiosłem. Przyglądanie się i rozróżnianie, czy po wyregulowaniu wygląda lepiej czy gorzej, wymaga oko. Nie zniechęcaj się, jeśli znajdziesz typograficzne piksele wskazujące na szorstkość, powtarzanie i kontynuowanie pracy z nim. Jeśli Twój wynik nadal wygląda na podrzędny, zawsze możesz usunąć warstwę i skopiować ponownie z oryginału. To zajmuje trochę czasu, aby typografia wyglądała świetnie, po prostu kontynuuj, a prędzej czy później twoja ciężka praca się opłaci.
Piksel podpowiedzi kształty wektorowe
Generalnie kształty podpowiedzi pikselowych są zarezerwowane dla ikon lub logo. Ponownie, chcesz mieć pewność, że kształt ma odpowiedni rozmiar i obrót, zanim zaczniesz, ponieważ późniejsza korekta może wyrzucić całą twoją ciężką pracę. Dopasowywanie kształtów jest o wiele łatwiejsze i wymaga mniejszego spojrzenia na nieodłączne szczegóły. W związku z tym bardziej skomplikowane kształty trwają dłużej i są trudniejsze do dostosowania, dlatego najlepiej zacząć od czegoś prostego.
Powyżej widać, że nasza strzałka i okrąg znajdują się w niewielkiej odległości od miejsca, w którym chcielibyśmy. Półpiksele utworzone przez wygładzanie powodują, że cały kształt wygląda na zamglony. Więc popchnijmy wszystko, aby nieco lepiej pasowało do siatki.
No to jedziemy! Dostosowując punkty kontrolne do linii siatki, otrzymujemy znacznie ostrzejszą ikonę. Ważne jest, aby wspomnieć, że ponieważ ta ikona jest okręgiem, wszelkie korekty szerokości również muszą być odzwierciedlone na wysokości. Nie zapomnij również upewnić się, że wnętrze kształtu wygląda dobrze i spójnie. Jeśli spojrzysz na poprzedni obraz, zauważysz, że wewnętrzne boki koła nie są wygładzone tak samo.
Podsumowując
Dzięki powyższej pracy uzyskany obraz jest ostrzejszy i bardziej profesjonalny. Oczywiście możesz zastosować te techniki do znacznie ważniejszych rzeczy niż przycisk.
Chociaż automatyczne wygładzanie wykonane przez komputer wygląda na zadowalający, może być lepiej. Więc jeśli chodzi o twoje logo lub ważne ikony / typografię w formie rastrowej, podpowiedź pikselowa to coś więcej niż umiejętność niszowa; do dnia, w którym wszyscy używamy wyświetlaczy o wysokiej gęstości pikseli, jest to niezbędne.