Tworzenie witryn internetowych w wysokiej rozdzielczości za pomocą programu Adobe Muse

Usprawnienia w Adobe Muse CC 2014.3 | Luty 2015 r.

Program Adobe Muse obsługuje teraz wyświetlacze HiDPI, które pracują w systemie Windows. Użytkownicy wyświetlaczy HiDPI pracujących w systemie Windows zauważą, że interfejs programu Adobe Muse wygląda dużo wyraźniej.

HiDPI (ang. High Dots Per Inch) oznacza wysoką liczbę pikseli na cal. Jest to termin, którym określane są wyświetlacze o dużym zagęszczeniu pikseli na cal, zwane po prostu wyświetlaczami o wysokiej rozdzielczości. Dzięki dużemu zagęszczeniu pikseli ekrany HiDPI wyświetlają tekst i grafikę w lepszej jakości niż standardowe ekrany. Przykładem takiego ekranu może być wyświetlacz Apple Retina dostępny w urządzeniach iPhone, iPad, iPad Touch, kilku urządzeniach Windows i innych.

Projekty witryn internetowych utworzone w programie Adobe Muse w pełni wykorzystują jakość wyświetlania ekranów o wysokiej rozdzielczości (HiDPI), takich jak wyświetlacze Retina firmy Apple.

Wykorzystywanie możliwości wyświetlaczy HiDPI w programie Muse jest proste:

• Zmiana ustawień rozdzielczości strony na HiDPI
• Tworzenie obrazów o przynajmniej dwukrotnie większych wymiarach (2x), niż będą one miały po wyświetleniu na stronie

Podczas przesyłania lub eksportowania witryny w rozdzielczości HiDPI z programu Muse wygenerowany kod będzie uwzględniał zarówno obrazy o standardowych jak i powiększonych wymiarach (2x) oraz automatycznie wybierze obraz, który ma zostać wyświetlony podczas przeglądania strony w zależności od tego, czy użyto wyświetlacza o standardowej rozdzielczości, czy HiDPI.

Włączanie HiDPI w programie Adobe Muse

Menu rozdzielczości w nowym oknie dialogowym witryny umożliwia wybór pomiędzy standardową rozdzielczością i HiDPI (2x).

Możesz modyfikować ustawienia rozdzielczości po utworzeniu witryny, wybierając kolejno Plik > Właściwości witryny.

Tworzenie zasobów z danymi obrazów o podwojonych wymiarach (2x)

Aby w pełni wykorzystać zalety ekranów HiDPI, wykorzystywane zasoby muszą być utworzone w wysokiej rozdzielczości. Rozmiar zasobu musi być co najmniej dwa razy większy niż rozmiar wyświetlany w witrynie.

Utworzenie obrazu o podwojonych wymiarach (2x) jest proste. Zasób o podwojonych wymiarach musi być przynajmniej dwukrotnie większy wizualnie od tego, który zostanie wyświetlony na ekranie. Na przykład:

Po umieszczeniu zasobu HiDPI na kanwie witryny internetowej program Adobe Muse optymalizuje obraz, zmniejszając jego rozmiar o 50%. Zmniejszenie rozmiaru ma na celu poprawę płynności i wydajności pracy podczas projektowania. W panelu Zasoby takie obrazy są oznaczone wartością „2x”. Warto zauważyć, że program Adobe Muse zachowuje dane oryginalnego zasobu, aby umożliwić jego wyświetlanie w wysokiej rozdzielczości na ekranach HiDPI. W programie Adobe Muse podczas publikowania lub eksportowania zrasteryzowany tekst oraz efekty wyświetlane jako obrazy są automatycznie generowane zarówno w wymiarach podwójnych (2x), jak i w standardowych rozmiarach.

Aby mieć pewność, że zasoby są dwukrotnie większe (2x) i zawierają wystarczającą ilość danych do wyświetlenia w lepszej jakości, otwórz panel Zasoby (Okno > Zasoby). Jeśli wielkość zasobu jest wystarczająca, obok nazwy zasobu zostanie wyświetlona ikona 2x. Jeśli ikona 2x nie jest wyświetlona obok zasobu, oznacza to, że nie zawiera on wystarczającej ilości danych do wyświetlenia w lepszej jakości i zostanie wyświetlony w standardowej rozdzielczości.

Eksportowanie obrazów HiDPI

Istnieją przypadki, w których program Adobe Muse nie eksportuje obrazów o wysokiej rozdzielczości, tzn. obrazów o podwójnej ilości danych. Gdy obrazy są skalowane w celu wypełnienia kontenerów, np. na stronach zawierających obrazy tła, w pokazach slajdów w trybie pełnoekranowym itp., program Adobe Muse nie eksportuje wersji HiDPI obrazu. Inaczej mówiąc, w takich przypadkach zostaje wyeksportowana jedynie standardowa wersja obrazu:

• Szerokość 100%: Skaluj, aby zmieścić/Skaluj, aby wypełnić
• Pełnoekranowy pokaz slajdów: Skaluj, aby zmieścić/Skaluj, aby wypełnić
• Tło przeglądarki/strony: Skaluj, aby zmieścić i Skaluj, aby wypełnić

Warto również zauważyć, że wobec obrazów z tłem sąsiadującym podejmowane są inne działania niż wobec obrazów tła, dla których ustawiono opcję Skaluj, aby zmieścić / Skaluj, aby wypełnić. W przypadku obrazów sąsiadujących podczas eksportowania witryny program Adobe Muse dostarcza obrazy w standardowej oraz w wysokiej rozdzielczości do zastosowania odpowiednio na ekranach standardowych lub HiDPI.   Jeśli w programie Adobe Muse dla obrazu w wysokiej rozdzielczości zostanie wybrany tryb sąsiadujący, obraz ten jest traktowany jak zwykły obraz i zostaje umieszczony na kanwie witryny internetowej w rozmiarze zmniejszonym o 50% względem oryginału. Obraz o zmniejszonym rozmiarze (50%) jest eksportowany jako obraz o standardowej rozdzielczości, natomiast obraz natywny jako obraz o wysokiej rozdzielczości zawierający dwukrotnie więcej danych.

Pamiętaj o osobach odwiedzających witrynę

Wyświetlacze HiDPI umożliwiają gościom witryny przeglądanie zawartości strony internetowej w najwyższej jakości poprzez wykorzystywanie dodatkowych danych obrazów. Skutkiem podwojonych wymiarów obrazów 2x są pliki obrazów o czterokrotnie większych rozmiarach niż te o standardowej rozdzielczości. Aby przeglądać obrazy HiDPI osoby odwiedzające witrynę muszą pobrać cztery razy więcej danych. Aby zawartość została wyświetlona jak najszybciej na stronach w standardzie HiDPI, program Muse eksportuje zarówno zasoby o standardowej rozdzielczości jak i HiDPI. Zasoby o standardowej rozdzielczości zostają załadowane jako pierwsze, a zasoby w rozdzielczości HiDPI stopniowo je zastępują w trakcie ładowania.

Widżet w formie przycisku HiDPI (wł./wył.)

Stopniowe ładowanie zasobów jest wygodnym rozwiązaniem dla wielu gości witryn, ale może być problematyczne dla osób, które mają plany taryfowe z ograniczeniami transmisji danych, limity lub wysokie ceny pobierania danych. Aby ułatwić takim osobom odwiedzanie witryny, rozważ dodanie widżetu w formie przycisku HiDPI (wł./wył.). Jeżeli widżet w formie przycisku HiDPI (wł./wył.) jest umieszczony na danej stronie, przy pierwszym wyświetleniu zostanie ona załadowana w standardowej rozdzielczości, a przycisk HiDPI pojawi się jako wyłączony. Jeżeli gość witryny włączy wyświetlanie HiDPI za pomocą tego przycisku, to odtąd wszystkie strony zawierające przycisk HiDPI (wł./wył.) będą wyświetlać obrazy w rozdzielczości HiDPI, aż gość wyłączy tę opcję, wyłączy przeglądarkę lub usunie ciasteczka z przeglądarki. Strony, które nie zawierają przycisku HiDPI (wł./wył.), będą zawsze wyświetlać obrazy w rozdzielczości HiDPI podczas przeglądania na ekranach HiDPI lub Retina. Jeżeli strona będzie przeglądana na ekranie innym niż HiDPI lub urządzeniu bez wyświetlacza Retina, przycisk będzie niedostępny, a obrazy zostaną wyświetlone tylko w standardowej rozdzielczości.