Nowości dla projektantów stron internetowych w programie Illustrator CC
6 maja firma Adobe ogłosiła najnowsze aktualizacje swojego oprogramowania kreatywnego. Niektóre z tych aktualizacji mają duży wpływ na sposób pracy użytkowników z ich narzędziami. W tym artykule chciałbym sprawdzić, co Adobe zmieniło w programie Illustrator i jak wpływa to na projektantów stron internetowych.
Oczywiście jest kilka nowych funkcji, takich jak biblioteki AutoCAD, biały nadruk, zamiana pełnoekranowa i wypełnienie dla tekstu, automatyczne tworzenie narożników, obsługa znaków, pliki pakietów, nieużywane obrazy, wiele plików, narzędzia typu dotykowego, bezpłatne narzędzia do przekształcania i obrazy w pędzlach. Jeśli jesteś narkomanem z programu Illustrator, są to wartościowe funkcje, ale chcę skupić się na najważniejszych ulepszeniach, które pomogą każdemu stworzyć dzieło sztuki na ekranie.
Obsługa HiDPI
Wraz z pojawieniem się wyświetlaczy o wysokiej rozdzielczości (takich jak Macbook Pro z wyświetlaczem Retina), Illustrator CS6 i wcześniejszy wyglądały na zamglone. Grafika i ikony wyglądały na piksele, a tekst wyglądał na wygładzony. Naturą programu Illustrator jest wyraźne bogactwo grafiki, więc to doświadczenie było mniej niż pożądane. Na szczęście Adobe ulepszyło program Illustrator CC, aby móc korzystać z tych wyświetlaczy o wysokiej rozdzielczości. Grafika będzie wyglądać lepiej, tekst będzie wyglądał ostro, elementy interfejsu użytkownika (ikony, kursory itp.) Będą wyglądać gładko. Ulepszyli także proces renderowania. Teraz korzysta z wielordzeniowych maszyn i używa renderowania z gwintem do renderowania grafiki. Powinieneś zauważyć poprawę w zadaniach takich jak powiększanie, przesuwanie, kopiowanie, przeciąganie i upuszczanie itp.
Ulepszenia przewodników
Przewodniki są szeroko stosowane podczas planowania i układania stron. Tworzenie makiet w programie Illustrator za pomocą prowadnic pozwala precyzyjnie rozmieścić zawartość. W programie Illustrator CC dostępne są cztery rozszerzenia instrukcji:
- Podwójne kliknięcie na linijce tworzy przewodnik w tej konkretnej lokalizacji na linijce.
- Po przytrzymaniu Shift, a następnie dwukrotnym kliknięciu określonego miejsca na linijce, prowadnica utworzona w punkcie zostanie automatycznie przyciągnięta do najbliższego znaku (podziału) na linijce.
- Jeśli ukryjesz przewodniki (Ctrl / Cmd +;), a następnie wybierzesz je, przewodniki nie zostaną automatycznie zablokowane, tak jak w poprzednich wersjach.
- Twórz prowadnice poziome i pionowe w jednym działaniu. Oto jak: w lewym górnym rogu okna programu Illustrator kliknij przecięcie linijki i naciśnij Ctrl (lub Cmd na komputerze Mac) i przeciągnij wskaźnik myszy w dowolne miejsce w oknie programu Illustrator; wskaźnik myszy zmienia się w krzyżyk, wskazując miejsce, w którym można utworzyć prowadnicę poziomą i pionową; zwolnij wskaźnik myszy, aby utworzyć przewodniki.
Rozszerzenia wyszukiwania czcionek
Typowe wyszukiwanie z wyprzedzeniem przeszukuje tylko pierwsze słowo w nazwie czcionki, co zwykle nie daje natychmiastowych najlepszych wyników. Ponadto wyszukiwanie i przeglądanie dużej liczby czcionek może być trudne. Nowa opcja funkcji wyszukiwania "Wyszukaj całą nazwę czcionki" została dodana do paneli sterowania i znaków. Dodatkowo, integracja TypeKit dla czcionek pulpitu została niedawno ogłoszona w MAX. Oznacza to, że można łatwo projektować makiety za pomocą tych samych czcionek, które mają być używane w Internecie.
Udoskonalenia wyszukiwania kolorów
Znalezienie określonego koloru z wielu różnych kolorów może być czasochłonne i frustrujące. W programie Illustrator CC wprowadzono zmiany, które znacznie uprościły zadanie wyszukiwania i znajdowania koloru. Okno dialogowe selektora kolorów (kliknij dwukrotnie opcję Wypełnij proxy na pasku narzędzi) ma teraz widget wyszukiwania w oknie Próbki kolorów. Po kliknięciu opcji Próbki kolorów pasek wyszukiwania pojawia się pod wstępnie zdefiniowaną listą kolorów. Wpisz nazwę koloru lub wartości RGB (lub CMYK do wydrukowania). Jeśli wpiszesz "niebieski", wyświetlone zostaną wszystkie próbki kolorów ze słowem niebieskim w nazwie. Wpisanie R = 77 spowoduje wyświetlenie wszystkich próbek kolorów, które mają czerwony kolor o wartości 77 w skali RGB. Widget wyszukiwania jest domyślnie włączony.
Udoskonalono również opcję wyszukiwania w panelu Próbki. Pole nie wymusza automatycznego ukończenia. Wprowadzane znaki nie są automatycznie zastępowane przez najbliższe znalezione pasujące kolory. Możesz wpisać nazwę koloru lub po prostu wpisać wartości koloru RGB (lub CMYK do druku), aby wyszukać, czy taka kombinacja kolorów istnieje. Pole wyszukiwania nie jest włączone domyślnie i musi być włączone po raz pierwszy z podmenu panelu.
Warto również zauważyć, że Kuler został upieczony w programie Illustrator. Jeśli więc używasz tej usługi Adobe do tworzenia motywów i grup kolorów, możesz łatwo uzyskać dostęp do tej zawartości bezpośrednio w programie Illustrator CC.
Panel właściwości CSS
Oczywiście największą zaletą sieci są usprawnienia w przepływach pracy CSS i SVG. Jeśli jesteś zapalonym użytkownikiem programu Illustrator, być może użyłeś czegoś w CS5 zwanego pakietem HTML5, który był dostępny w AdobeLabs. Z jakiegoś powodu nigdy nie pojawił się w CS6, ale wiele z tych funkcji powróciło z tą aktualizacją CC. Funkcje te przypominają to, co zostało już udostępnione programowi Photoshop CS6 za pośrednictwem aktualizacji i funkcji Creative Cloud dostępnych w programie Fireworks CS6.
Panel Właściwości CSS pozwala wyodrębnić CSS z dokumentu programu Illustrator i zapewnia kilka sposobów na jego wykonanie. Kluczowym krokiem w wykonaniu tych wszystkich czynności jest jednak nazwanie warstw w panelu warstw. Z pewnością Illustrator może generować CSS bez obiektu o nazwie w panelu warstw, ale otwierasz się na niezorganizowany i potencjalnie niechlujny sposób generowania kodu. Zasadniczo jest to sposób, w jaki Illustrator będzie określał reguły klasowe, które dla ciebie tworzy. Wygenerowany CSS może mieć prefiksy przeglądarki dla Webkit, Firefox, Opera i Internet Explorer. Może przechwytywać wyglądy obsługiwane przez CSS, takie jak gradienty i zaokrąglone rogi.
Możesz kontrolować sposób generowania CSS, korzystając z okna dialogowego Opcje eksportu CSS. Możesz uzyskać dostęp do okna dialogowego, klikając przycisk Opcje eksportu CSS, który jest pierwszym z czterech przycisków w prawym dolnym rogu panelu. Panel udostępnia kilka funkcji dla przepływów pracy CSS:
- Zobacz CSS dla wybranego obiektu
- Skopiuj kod CSS dla wybranego obiektu
- Eksportuj wybrany obiekt do pliku CSS wraz z obrazami używanymi w CSS
- Eksportuj kod CSS dla wszystkich obiektów w dokumencie do pliku CSS
Dodatkowo możesz wyeksportować kod CSS dla wszystkich obiektów w dokumencie, przechodząc do menu Plik i wybierając Eksportuj. To otworzy okno dialogowe, a stamtąd możesz wybrać CSS z menu formatu.
Jeśli masz obiekt, zaznacz go i upewnij się, że został poprawnie nazwany w panelu Warstwy. Po wybraniu tej opcji zobaczysz CSS potrzebny do wygenerowania grafiki w przeglądarce w panelu Właściwości CSS.
Kod SVG
We wcześniejszych wersjach programu Illustrator należało zapisać dokument jako SVG. Tutaj, w aktualizacji CC, możesz skopiować coś w dokumencie, a następnie przejść do ulubionego edytora HTML i po prostu wkleić; cały kod SVG zostanie umieszczony w dokumencie. To zaskakująco przyjemny przepływ pracy. Jeśli to ci nie pomoże, bardziej tradycyjna metoda zapisywania dokumentu jako SVG jest nadal dostępna.
Ponadto firma Adobe dodała obsługę eksportu nieużywanych stylów. Podczas projektowania często tworzysz wiele stylów graficznych podczas tworzenia grafiki. Nie możesz używać wszystkich dostępnych stylów. Podczas eksportowania grafiki w formacie SVG nieużywane style nie są eksportowane. Ponadto w wyeksportowanym kodzie CSS style graficzne nie mają nazw skojarzonych z nimi i może być trudno zidentyfikować odpowiedni styl graficzny.
Program Illustrator CC oferuje dwie funkcje, które zwiększają możliwości pracy ze stylami w formacie SVG, które rozwiązują następujące problemy:
- Nazwa stylu graficznego. Po wybraniu eksportu stylów graficznych nazwa każdego stylu jest eksportowana wraz z definicją stylu w nomenklaturze CSS.
- Eksportuj nieużywane style. Podczas eksportowania grafiki w formacie SVG można teraz wyeksportować nieużywane style. Pozwala to innemu projektantowi lub programistce, który importuje style, aby użyć nieużywanych stylów graficznych w innych dziełach sztuki.
Jak z niego skorzystasz
To z pewnością nie jest narzędziem do kodowania kompletnych stron internetowych. To, co widzę, to używanie Illustratora do tworzenia makiet, a następnie ręczne kodowanie struktury w HTML i kodu układu w CSS. Gdy potrzebny jest cień, gradient, wzór, a nawet logo, korzystanie z tych nowych opcji CSS i SVG będzie bardzo przydatne i zapewni dużą oszczędność czasu.
Jeśli chcesz dowiedzieć się więcej o nowych funkcjach programu Illustrator CC, odwiedź stronę z programem Illustrator.
Czy jesteś fanem ilustratora? Jakie funkcje programu Illustrator CC najbardziej Cię ekscytują? Daj nam znać w komentarzach.