Funkcje i tajemnice projektowania stron internetowych dla wyświetlaczy siatkówki i uprawnień 4K i 5K

1. Technologie wysokiej rozdzielczości
2. Korzystanie z SVG
3. CSS
4. Skrypt
5. Ikony i czcionki
6. Adobe Generator w Photoshopie
7. Operacje Photoshopa
8. Skrypt eksportu układu
9. Wniosek

Na rynku smartfonów, laptopów i komputerów PC udział urządzeń z rozdzielczością ekranów 2K, 4K i 5K stale rośnie i każdego roku takie produkty stają się coraz bardziej. W związku z tym rozwój grafiki cyfrowej, wideo, projektowania stron internetowych, animacji również nie stoi w miejscu i powinien być dla nich odpowiedni, aby w wysokich rozdzielczościach wszystko wyglądało dobrze i pięknie. Na przykład ta sama usługa YouTube obsługuje już wideo 2K i 4K, Apple od 2014 roku sprzedaje komputery iMac z wyświetlaczami Retina 4K / 5K.

Dla projektantów i programistów internetowych ten rozwój technologii oznacza, że ​​nadszedł czas nie tylko na zoptymalizowanie witryny i jej adaptację, ale także na zwrócenie szczególnej uwagi na grafikę, aby była doskonale wyświetlana w wysokich rozdzielczościach. Aby zrozumieć postęp toczący się na ludzkości, przyjrzymy się cechom wyświetlaczy Retina o wysokiej rozdzielczości w tym materiale. przysługa Photoshopa dla projektanta stron internetowych w tej sprawie. Faktem jest, że ekrany Retina są instalowane na urządzeniach iPad / iPhone / iMac / MacBook i innych urządzeniach Apple, a ponieważ udział użytkowników tej technologii rośnie na świecie, strony internetowe powinny już mieć wsparcie dla tej technologii.

Technologie wysokiej rozdzielczości

Jaka jest różnica między 4K, 5K, Retina? Wszystko sprowadza się do pikseli i wiele osób zna je niemal na pamięć. Ale pamiętaj.

• HD ma rozdzielczość 720 px.
• Full HD - 1920 px w poziomie.
• QHD lub 2K - 2048 px w poziomie i 1080 w pionie.
• Quarter High Definition (nie mylić z poprzednią) - jedna czwarta Full HD, 960x540 px, to głównie urządzenia mobilne.
• Ultra HD lub 4K ma rozdzielczość 3840 x 2160 pikseli (dla urządzeń konsumenckich, na przykład monitory) i 4096 x 2160 pikseli dla kin cyfrowych.
• Retina 4K ma rozdzielczość 4096 x 2304 px.
• Retina 5K w Apple iMac ma rozdzielczość 5120 x 2880.

Apple, wprowadzając własną technologię Retina, powiedział i zapewnił wszystkich, że ludzkie oko jest w stanie dostrzec znacznie większą liczbę pikseli, więc jeśli matryca standardowego ekranu o przekątnej 15 cali i rozdzielczości 1440 x 900 składa się z pikseli o tym samym numerze (1440 x 900), to na ekranach Retina Rozdzielczość 15 cali to 2880 x 1800 (dokładnie dwa razy). Oznacza to, że cała technologia Retina polega na zwiększeniu liczby pikseli na klatkę.

Nikt nie twierdzi, że jakość obrazu z taką liczbą pikseli jest niesamowicie wysoka, a obraz wygląda jak w błyszczących czasopismach lub na zdjęciach. Jeśli strony mają grafikę wektorową, to oczywiście wszystko też wygląda świetnie. Jednak prawie zawsze projektowanie stron internetowych wykorzystuje grafikę rastrową i problemy z wyświetlaczem już się zaczynają. To nie ma znaczenia, iMac u klienta / gościa lub iPhone'a / iPada. Problem dotyczy samej technologii Retina.

Wygląda to tak: jeśli mamy obraz o wymiarach 600 x 400 pikseli, to na ekranie Retina jakość ulegnie znacznemu pogorszeniu, będzie rozmazana, rozmyta itd., Ponieważ sama rozdzielczość musi być dwa razy większa (dla 2K) lub cztery razy (dla 4K), z dużą liczbą pikseli. Sam oryginalny obraz zwiększa się w procentach i pojawia się zniekształcenie.

Tak, oczywiście, możesz natychmiast utworzyć tylko pliki o dużej rozdzielczości i, używając kodu CSS / HTML, przepisać sposób wyświetlania każdego obrazu ( img src = "logo.png" wysokość = "150" szerokość = "150" ).

Ale ponieważ nie wszyscy użytkownicy mają urządzenia Apple (tylko Retina na nich), odwiedzający z regularnymi ekranami monitora będą musieli poświęcić ruch internetowy, aby przesłać obrazy wysokiej jakości, a następnie poczekać, aż spadną. Nie każdy może to zrobić, więc odwiedzającym łatwiej będzie opuścić witrynę i znaleźć dla niej alternatywę.

Wygodne rozwiązanie problemów z grafiką dla wszystkich w tym samym czasie - mieć kilka obrazów do projektu, dzięki czemu każdy użytkownik może zobaczyć, co jest dla niego przeznaczone. Przyjmuje się, że rozdzielczości ekranów Retina są oznaczone @ 2x, @ 3x, @ 4x, a wzrost odbywa się w procentach - 100, 200 i tak dalej.

Korzystanie z SVG

Wszystkie obrazy można zapisać jako skalowalną grafikę wektorową lub SVG. To bardzo wygodny i nietypowy format. Nie przechowuje danych obrazu w pikselach, w formatach rastrowych, ale w tekście XML, który opisuje geometrię obrazu i jest w formacie wektorowym. Jest to wygodne, ponieważ obrazy są łatwo skalowane i zachowują swoją jakość. Photoshop nie może z nim współpracować, ale istnieją skrypty i rozszerzenia do eksportowania do tego formatu.

Jednak SVG nie obsługuje pracy ze zdjęciami lub sztuką. W tym celu nadal musisz tworzyć pliki rastrowe o różnych rozdzielczościach. Jednak SVG jest wygodny dla logo, ikon, wykresów, diagramów. Alternatywą może być PNG, jednak obecnie prawie wszystkie przeglądarki obsługują ten format.

CSS

Niektóre pojedyncze cienie, gradienty, narożniki, podpisy zamiast obrazów można opisać. za pomocą CSS . Jest to wygodne, ponieważ żądania http będą mniejsze, ruch zmniejszy się, a przetwarzanie wyświetlania na ekranie zacznie działać szybciej.

Skrypt

Może używać skryptu Retina.js . Bardzo przydatna rzecz. Gdy tylko użytkownik otworzy stronę witryny, skrypt automatycznie sprawdza, jaka rozdzielczość jest wyświetlana na ekranie i jaka jest macierz pikseli. Następnie, w przypadku Retiny, szuka niezbędnych plików obrazów na serwerze i zastępuje je lepszymi. Warunek jest następujący: obrazy dla urządzeń Retina powinny mieć postscript @ 2x, @ 3x, @ 4x w nazwach.

Na przykład: [email protected].

Już w tej wersji formaty plików graficznych mogą być różne: JPEG, PNG, GIF. Sposób pracy ze skryptem jest opisany na stronie projektu i jest to najprostszy scenariusz, który istnieje w Internecie.

Ikony i czcionki

Wiele liter i liter można zastąpić ikonami, a dokładniej czcionką ikony za pomocą reguły CSS - @ font-face . Mogą zastąpić napisy e-mail, numery telefonów, nazwy pól w formularzach, tytuły widżetów. Możesz je znaleźć w usługach Kochamy czcionki ikon , Czcionka niesamowita , Icomoon . W tym ostatnim jest system do generowania PNG / SVG lub czcionki i niezbędny kod CSS.

Czcionkę ikony można skalować, są one obsługiwane przez wszystkie przeglądarki i często są wygodniejsze niż obrazy.

Adobe Generator w Photoshopie

Oczywiście, tworząc układ strony i dostosowując go do urządzeń z wyświetlaczami Retina, pojawia się pytanie, w jaki sposób Photoshop może pomóc. Odpowiedź: aby tworzyć obrazy w różnych rozdzielczościach. W samej aplikacji Adobe wprowadziło już wygodną funkcję, która umożliwia natychmiastowe ustawienie rozszerzenia dla plików obrazów i ich wymagany rozmiar dla wyświetlaczy Retina.

W rezultacie nie musisz kopiować warstw, wycinać ich, eksportować i zapisywać żądanych. Ponadto, dodając tylko współczynnik skalowania do nazwy pliku, plik jest tworzony automatycznie.

Działa w Photoshop CC . Podczas pracy z PSD otwórz Plik -> Generuj -> Zestaw obrazów . Nie pojawi się absolutnie nic, ani powiadomienia, ani okna. Ale teraz możesz ustawić nazwę warstwy i żądanego rozszerzenia, a następnie zobaczyć w Eksploratorze Windows utworzony folder z plikiem lub, w naszym przypadku, z plikami obrazów.

Tagi w tytułach mogą być :

• Rozszerzenie png jest standardowym png32 z przezroczystym kanałem alfa.
• Rozszerzenie .png8 / .png24 / .png32
• Rozszerzenie .jpg to standard z jakością kompresji 9
• Rozszerzenie .jpg (1-10) lub .jpg (1-100%) jest podobnym wyborem jakościowym w liczbach lub procentach
• .Gif rozszerzenie
• N-% lub Npx X Npx - wskazanie skalowania i rozmiaru nowego obrazu.

Na przykład 200% logo.png - oryginalny obraz jest skalowany o 200% i zapisywany w pliku logo.png. Inna opcja: logo.jpg5 - obraz zapisuje z jakością kompresji 5.

Jeśli chcesz utworzyć dwa pliki, jeden dla urządzeń Retina, drugi dla normalnego, to piszemy: 200% logo.png, logo.png

Operacje Photoshopa

Inną opcją automatycznego zapisywania w różnych rozdzielczościach jest użycie akcji dla Photoshopa , która jest określana jako Retinize to . Mówiliśmy o tym wcześniej, ale pamiętajmy, że działa w podobny sposób, ale dodatkowo przedstawia projektantowi okno z opcją zapisania obrazu.

Skrypt eksportu układu

Kiedy mistrz pracuje nad projektem, musi stale zwiększać dokument źródłowy do 200% lub 400%, aby dowiedzieć się, jak będzie on wyświetlany na wyświetlaczach Retina. Może być znacznie łatwiejszy dzięki skryptowi psd-export-document-retina-png .

Możesz pobrać go z GitHub i skopiować do Adobe Photoshop (twoja wersja) Ustawienia Skrypty

Następnie, pracując nad projektem układu w rozdzielczości 1x, otwórz Plik -> Skrypty -> ExportDocument2xPNG (lub 3x). Proces nie jest zbyt szybki, ale tatuaż Retina z plikiem png pojawi się w folderze z plikiem PSD. Będzie to ten sam układ, z którym pracujesz, ze spłaszczonymi warstwami i zwiększony o 200%. W takim przypadku wszystkie obrazy zostaną odpowiednio zoptymalizowane, co jest ważne, a nie tylko powiększone. Jak widać na zrzucie ekranu. Logo, na przykład, nie zostało zniekształcone, jak pokazano na zrzutach ekranu na początku artykułu ze zwykłym skalowaniem.

Jest to wygodne, aby zobaczyć dokładnie, co jeszcze trzeba poprawić w przypadku większych rozdzielczości. Następnie możesz wybrać żądane warstwy i zapisać je w wymaganym rozmiarze i formacie.

Wniosek

Dostosowanie układu strony dla urządzeń Apple z wyświetlaczami Retina wymaga oczywiście uwzględnienia specyfiki technologii. Czy powinienem wykonać optymalizację domyślną? Zależy od klienta, ale - pożądane, ponieważ wiele osób ma ten sam iPhone / iPad. Jeśli chodzi o drogi iMac i urządzenia z 4K i 5K, jest to rzadkie, ale są używane. Z drugiej strony, w standardowej rozdzielczości 4K standardowe obrazy będą wyglądać dziwnie.

Oczywiście nadal istnieje wiele pytań dotyczących sposobu pracy z czcionkami i zastąpienia ich ikonami, co wybrać svg lub png i wiele więcej. Ale to nie jest dla tego materiału.

Rozważaliśmy tylko część i próbowaliśmy usystematyzować to, czym jest Retina 4K / 5K, jakie znaczenie ma technologia i jak „dostroić” projekt strony internetowej, aby strona wyglądała równie dobrze na wszystkich urządzeniach. A co najważniejsze, jak przetwarzać obrazy, jak zapobiegać zniekształceniom. Czy dostosowujesz projekt strony do 2K lub 5K, ale zasada jest zawsze taka sama - własne zdjęcia dla każdej rozdzielczości. Dla wygody wygodniej jest zapisać je w osobnych folderach na serwerze. Jest wygodny dla wszystkich użytkowników i poprawny w stosunku do przyszłych użytkowników . Jeśli chodzi o duży rozmiar pliku, istnieją różne sposoby dodatkowej kompresji.