Najlepsze praktyki w zakresie tworzenia grafiki internetowej

Program Illustrator zapewnia różne narzędzia do tworzenia układów dla stron internetowych lub tworzenia i optymalizacji grafiki internetowej. Należy na przykład używać kolorów z palety internetowej, zwracać uwagę na stosunek jakości obrazu do rozmiaru pliku, wybierać najlepszy format pliku dla danej grafiki. Grafika internetowa może korzystać z plasterków i map obrazów, użytkownik ma też do dyspozycji szereg opcji optymalizacji — pozwala to mieć pewność, że pliki będą wyświetlane w Internecie w poprawny sposób.

Projektując grafikę przeznaczoną dla Internetu, należy położyć nacisk na inne elementy niż w przypadku grafiki przeznaczonej do druku.  

Aby ułatwić podejmowanie decyzji w trakcie tworzenia grafik internetowych, pamiętaj o następujących zasadach:

Używaj kolorów z palety internetowej

Kolor stanowi często kluczowy element kompozycji. Trzeba jednak pamiętać, że kolory widoczne na etapie projektowania grafiki nie zawsze będą odpowiadały kolorom wyświetlanym przez przeglądarki internetowe. Aby uniknąć wystąpienia ditheringu (inaczej roztrząsania — metody symulacji kolorów niedostępnych) i innych problemów z kolorami, podczas projektowania grafiki warto przestrzegać dwóch ogólnych zasad. Po pierwsze, zawsze pracuj w trybie RGB. Po drugie, zawsze używaj kolorów z palety internetowej.

Zadbaj o równowagę między jakością obrazu a rozmiarem pliku

Aby umożliwić rozpowszechnianie obrazów w Internecie, konieczne jest zachowanie małych rozmiarów plików graficznych. Gdy pliki są małe, serwery WWW mogą wydajniej przechowywać i transmitować obrazy, a użytkownicy mogą je szybciej pobierać. W oknie dialogowym Zapisz dla Internetu i urządzeń można sprawdzić rozmiar pliku graficznego i szacunkowy czas jego wczytywania.

Wybierz format odpowiedni do rodzaju grafiki

Różne rodzaje grafiki powinny być zapisywane w różnych formatach, dostosowanych do jej przeznaczenia. Aby uzyskać więcej informacji o poszczególnych formatach, zobacz Opcje optymalizacji grafiki internetowej.

Informacje o trybie podglądu pikseli

Aby umożliwić projektantom stron internetowych tworzenie precyzyjnych projektów, do programu Illustrator dodano właściwość wyrównania do pikseli. Gdy właściwość wyrównania do pikseli jest włączona dla danego obiektu, wszystkie poziome i pionowe segmenty w tym obiekcie są wyrównywane do siatki pikseli. Pozwala to uzyskać niezwykłą ostrość obrysów. Przy każdym przekształceniu, pod warunkiem, że właściwość ta jest ustawiona dla danego obiektu, jest on ponowne wyrównywany do siatki pikseli zgodnie ze swymi nowymi współrzędnymi. Tę właściwość można włączyć, wybierając w panelu Przekształć opcję Wyrównaj do siatki pikseli. Na poziomie dokumentu program Illustrator dysponuje również opcją Wyrównuj nowe obiekty do siatki pikseli, która domyślnie włączana jest dla dokumentów internetowych. Po włączeniu tej właściwości wszystkie nowe obiekty, które zostaną narysowane, mają domyślnie ustawioną właściwość wyrównywania do pikseli.

Aby uzyskać więcej informacji, zobacz Rysowanie wyrównanych do pikseli ścieżek dla obiegu pracy w Internecie.

Jeśli kompozycja jest zapisywana w formacie grafiki bitmapowej, np. JPEG, GIF lub PNG, program Illustrator rasteryzuje kompozycję z rozdzielczością 72 piksele na cal. Wygląd obiektów po rasteryzacji można sprawdzić po wybraniu polecenia Widok > Podgląd pikseli. Tryb ten jest szczególnie przydatny, gdy trzeba kontrolować rozmieszczenie, rozmiary i opcje wygładzania obiektów w zrasteryzowanej  grafice .

Aby przekonać się, w jaki sposób Illustrator dzieli obiekty na piksele, otwórz plik z obiektami wektorowymi, wybierz polecenie Widok > Podgląd pikseli, a następnie powiększ kompozycję, tak aby były widoczne pojedyncze piksele. Rozmieszczenie pikseli określa siatka pikseli, która dzieli obszar ilustracji na kratki 1-punktowe (1/72 cala). Użytkownik może przeglądać siatkę pikseli, po ustawieniu powiększenia  na  600%. Podczas przesuwania, dodawania i przekształcania obiektów są one przyciągane do siatki pikseli. Przyciąganie to powoduje, że znika efekt wygładzania “przyciągniętych” krawędzi (zwykle są to lewe i górne krawędzie). Teraz wyłącz opcję Widok > Przyciągaj do pikseli i przesuń obiekt. Tym razem, obiekt będzie umieszczany pomiędzy liniami siatki. Warto zwrócić uwagę na wpływ tego efektu na wygładzanie obiektu. Jak widać, naprawdę  bardzo  małe zmiany wpływają na rasteryzację obiektu.

Wskazówki dotyczące tworzenia obrazów w programie Illustrator przeznaczonych na urządzenia mobilne

Aby zoptymalizować zawartość graficzną przeznaczoną na urządzenia mobilne, zapisz kompozycję utworzoną w programie Illustrator w dowolnym formacie z grupy SVG. Szczególnie przydatny jest format SVG-t, zaprojektowany specjalnie z myślą o takich urządzeniach.

Skorzystaj z poniższych wskazówek, aby upewnić się, że obrazy utworzone w programie Illustrator będą wyświetlane poprawnie na urządzeniach mobilnych:

• Do tworzenia zawartości stosuj standard SVG. Stosowanie standardu SVG przy publikowaniu grafiki wektorowej zapewnia mały rozmiar pliku, obsługę dowolnego ekranu, doskonałą kontrolę nad kolorami, możliwość powiększania obrazu oraz możliwość edycji tekstu (w kodzie źródłowym). Ponieważ format SVG jest oparty na języku XML, można dołączać do obrazów elementy interaktywne, takie jak podświetlanie, podpowiedzi, efekty specjalne, dźwięki i animacje.

• Od początku pracuj w rozmiarze docelowego urządzenia lub urządzeń. Chociaż format SVG jest skalowalny, praca w odpowiednim rozmiarze zapewnia, że wynikowa grafika na urządzeniach docelowych będzie zoptymalizowana pod względem jakości i rozmiaru.

• Ustaw tryb kolorów RGB w programie Illustrator. Format SVG jest wyświetlany na wyświetlaczach rastrowych RGB, takich jak monitor.

• Aby zmniejszyć rozmiar pliku, spróbuj zredukować liczbę obiektów (grup) albo je uprościć (mniej punktów). Stosowanie mniejszej liczby punktów znacząco redukuje ilość danych tekstowych niezbędnych do opisania kompozycji w pliku SVG. Aby zredukować liczbę punktów wybierz polecenie Obiekt > Ścieżka > Uprość i wypróbuj różne ustawienia, aby znaleźć kompromis pomiędzy jakością obrazu a liczbą punktów.

• Stosuj symbole, gdy jest to możliwe. Symbole umożliwiają jednokrotne zdefiniowanie wektorów opisujących obiekt, dzięki czemu nie trzeba wielokrotnie powtarzać tej samej definicji. Jest to użyteczne, gdy kompozycja zawiera takie obiekty, jak tła przycisków, które są używane wielokrotnie.

• Projektując animację grafiki, ogranicz liczbę używanych obiektów i jeśli to możliwe, staraj się używać obiektów wielokrotnie, aby zmniejszyć rozmiar pliku. Stosuj animacje grup zamiast pojedynczych obiektów, aby unikać powtórzeń kodu.

• Rozważ zastosowanie formatu SVGZ — czyli wersji formatu SVG skompresowanej programem gzip. W zależności od zawartości taka kompresja może znacznie zmniejszyć rozmiar pliku. Tekst można zwykle znacznie skompresować, natomiast zawartość kodowana binarnie, taka jak osadzone obrazy rastrowe (pliki JPEG, PNG i GIF) nie poddaje się dobrze kompresji. Pliki SVGZ mogą być rozpakowywane przez dowolne aplikacje wyodrębniające pliki skompresowane w formacie gzip. Jeśli chcesz używać formatu SVGZ, sprawdź, czy docelowe urządzenie mobilne jest w stanie rozpakowywać pliki gzip.