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.

Informacje o grafice internetowej

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żywanie kolorów z palety internetowej

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

Utrzymanie balansu pomiędzy jakością obrazu i rozmiarem pliku

Duże znaczenie dla efektywności rozpowszechniania obrazów w Internecie mają małe rozmiary 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 obejrzeć rozmiar pliku graficznego i szacunkowy czas jego wczytywania.

Wybieranie najlepszego formatu dla danej 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.

Uwaga:

Illustrator zawiera wiele specjalnych szablonów przeznaczonych do obsługi Internetu, np. stron internetowych lub banerów. Aby wybrać szablon, wybierz polecenie Plik > Nowy z szablonu.

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.

Wyłączona opcja Podgląd pikseli (u góry) i opcja włączona (u dołu)
Wyłączona opcja Podgląd pikseli (u góry) i opcja włączona (u dołu)

Uwaga:

Wygląd siatki pikseli zależy od punktu zerowego (0,0) miarki. Jego przesunięcie zmienia sposób rasteryzacji kompozycji.

Wskazówki dotyczące tworzenia obrazów w programie Illustrator przeznaczonych dla urządzeń przenośnych

Aby zoptymalizować zawartość graficzną przeznaczoną dla urządzeń przenośnych, zapisz kompozycję utworzoną w programie Illustrator w dowolnym formacie SVG, a zwłaszcza SCG-t, zaprojektowanym specjalnie dla urządzeń przenośnych.

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

  • Do tworzenia zawartości stosuj standard SVG. Stosowanie standardu SVG przy publikowaniu grafiki wektorowej wpływa na mały rozmiar pliku, niezależność od 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 o format XML, możesz 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 przenośnego(urządzeń przenośnych). Chociaż format SVG jest skalowalny, praca w odpowiednim rozmiarze zapewnia, że grafika ostateczna będzie zoptymalizowana pod względem jakości i rozmiaru dla urządzania docelowego.

  • 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 zmniejszyć liczbę obiektów (grup) albo je uprościć (mniej punktów). Stosowanie mniejszej liczby punktów znacząco redukuje ilość informacji tekstowej, niezbędnej do opisania kompozycji w pliku SVG. Aby zredukować liczbę punktów wybierz 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 definiują tylko jednokrotnie wektory opisujące obiekt. Jest to użyteczne, gdy kompozycja zawiera obiekty takie, jak tła przycisków używane wielokrotnie.

  • Projektując animację grafiki, ogranicz liczbę używanych obiektów i spróbuj, jeżeli można, używać obiektów wielokrotnie, aby zmniejszyć rozmiar pliku. Stosuj animacje grup obiektów zamiast animacji pojedynczych obiektów, aby unikać powtórzeń kodu.

  • Zastanów się nad zastosowaniem formatu SVGZ, skompresowanej programem gzip wersji formatu SVG. W zależności od zawartości, kompresja może znacznie zmniejszyć rozmiar pliku. Tekst można zwykle znacznie skompresować natomiast zawartość kodowaną binarnie, taką jak osadzone obrazy rastrowe (pliki JPEG, PNG i GIF) słabo daje się skompresować. Pliki SVGZ mogą być rozpakowane przez dowolną aplikację rozpakowującą pliki skompresowane przez program gzip. Jeśli chcesz używać formatu SVGZ, sprawdź czy docelowe urządzenie przenośne potrafi rozpakowywać pliki gzip.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online