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 oraz możliwość pracy z Device Central. 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.

Korzystanie z Adobe Device Central przy pomocy programu Illustrator

Device Central pozwala użytkownikom programu Illustrator zobaczyć, jak pliki będą wyglądały na różnych urządzeniach przenośnych.

Programu Illustrator może na przykład używać grafik projektujący tapetę dla telefonu komórkowego. Po stworzeniu pliku, może on z łatwością przetestować go na różnych telefonach. Następnie może wprowadzić poprawki polepszające wygląd pliku na pewnej liczbie telefonów lub stworzyć dwa osobne pliki pasujące do większej liczby wyświetlaczy popularnych aparatów.

Dostęp do programu Illustrator z Adobe Device Central

  1. Uruchomienie Device Central
  2. Wybierz Plik > Nowy dokument w > Illustrator

    W Device Central pojawi się panel Nowy dokument zawierający prawidłowe opcje do stworzenia nowego dokumentu przenośnego w zaznaczonej aplikacji.

  3. Wprowadź niezbędne zmiany, takie jak wybranie Wersji odtwarzacza, Rozmiaru ekranu, Wersji programu Flash lub typu Zawartości.
  4. Wykonaj jedną z następujących czynności:
    • Wybierz Własny rozmiar dla opcji Wszystkie zaznaczone urządzenia, następnie dodaj szerokość i wysokość (w pikselach).

    • Wybierz urządzenie lub wiele urządzeń z listy Zestawy urządzeń lub Dostępne urządzenia.

  5. Jeśli wybrałeś wiele urządzeń, Device Central wybierze automatycznie rozmiar. Jeśli chcesz wybrać inny rozmiar, kliknij na inne urządzenie lub zestaw urządzeń.
  6. Kliknij na Utwórz.

    Wybrana aplikacja otworzy się z nowym dokumentem przenośnym gotowym do edycji.

Tworzenie zawartości dla urządzeń przenośnych w programie Adobe Device Central i Illustrator

  1. W programie Illustrator, wybierz Plik > Nowy.
  2. W Profil nowego dokumentu, wybierz Przenośne i urządzenia.
  3. Kliknij Device Central, aby zamknąć okno dialogowe w programie Illustrator i otworzyć Device Central.
  4. Wybierz typ zawartości.

    Znajdująca się po lewej lista dostępnych urządzeń zostanie zaktualizowana i pokaże urządzenia obsługujące wybrany typ zawartości.

  5. W Device Central wybierz urządzenie, kilka urządzeń lub zestaw urządzeń.

    W zależności od wybranych urządzeń (urządzenia) i typu zawartości Device Central zaproponuje do utworzenia jeden lub więcej rozmiarów obszaru roboczego. Aby utworzyć pojedynczy dokument, wybierz sugerowany rozmiar dokumentu (lub wybierz Własny rozmiar dla opcji Wszystkie wybrane urządzenia i wprowadź własne wartości Szerokość i Wysokość).

  6. Kliknij na Utwórz.

    W programie Illustrator otwarty zostanie pusty plik AI o wybranym rozmiarze. Nowy plik ma ustawione domyślnie następujące parametry:

    • Tryb koloru: RGB

    • Rozdzielczość rastra: 72 ppi

  7. Wypełnianie pustego pliku AI zawartością w programie Illustrator.
  8. Po zakończeniu pracy wybierz polecenie Plik > Zapisz dla Internetu i urządzeń.
  9. W oknie dialogowym Zapisz dla Internetu i urządzeń zaznacz wybrany format i zmień według potrzeb inne ustawienia eksportu.
  10. Kliknij Device Central.

    W zakładce Emulator Device Central wyświetlony zostanie tymczasowy plik zawierający zaznaczone ustawienia eksportu. Aby kontynuować testowanie, kliknij dwukrotnie nazwę innego urządzenia na liście Zestawy urządzeń lub Dostępne urządzenia.

  11. Jeśli po obejrzeniu pliku w Device Central musisz wprowadzić zmiany w pliku, cofnij się do programu Illustrator.
  12. W programie Illustrator, w oknie dialogowym Zapisz dla Internetu wprowadź poprawki, takie jak wybranie innego formatu lub jakości.
  13. Aby ponownie przetestować plik z nowymi ustawieniami eksportu, kliknij Device Central.
  14. Po osiągnięciu zadowalających rezultatów kliknij Zapisz w programie Illustrator, w oknie dialogowym Zapisz dla Internetu i urządzeń.

    Uwaga:

    Aby otworzyć Device Central z programu Illustrator (zamiast tworzyć i testować plik), wybierz Plik > Device Central.

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