Wiele z najbardziej dramatycznych zmian w sposobie korzystania z programu Illustrator ma miejsce w dziedzinie tłumaczenia obrazów wektorowych do Internetu, a niedoceniany format SVG jest kluczowym ogniwem w tym procesie. Pliki SVG zachowują cenione funkcje skalowalności grafiki wektorowej i są obsługiwane niemal powszechnie w witrynach internetowych i środowiskach programistycznych. Przygotowując grafikę wektorową do publikacji w Internecie, należy unikać standardowych efektów programu Illustrator, a zamiast tego używać filtrów SVG.
Illustrator zawiera przyzwoity, ale minimalistyczny zestaw filtrów SVG, ale oto kilka wskazówek, jak znaleźć i dodać filtry SVG, a także zasoby do tworzenia własnych filtrów SVG. Dla tych, którzy pracują z twórcami stron internetowych i aplikacji, ułatw sobie życie i zwiększ produktywność, sprawdzając ściągawkę do przekazywania kodu SVG.
Kiedy tworzysz pliki SVG dla ekranów w programie Illustrator i chcesz zastosować efekty (takie jak cienie), powinieneś zastosować je jako filtry SVG. W ten sposób Twoje pliki SVG zachowują nieskończoną skalowalność bez zniekształceń.
Poniższe kroki przeprowadzą Cię przez proces stosowania filtra SVG do grafiki w programie Illustrator:
Wybierz obiekt(y), do którego stosujesz filtr.
Wybierz Efekt → Filtry SVG.
Wybierz filtr z wyświetlonej listy.
Większość filtrów ma opisowe nazwy. Na przykład te z cieniem w nazwie to cienie, te z gaussem w nazwie to rozmycia gaussowskie. Przepływ pracy jest nieco dziwny i okrężny, ale musisz najpierw wybrać filtr, aby uzyskać dostęp do wszystkich dostępnych opcji jego zastosowania.
Aby zmienić wybrany filtr:
Po wybraniu filtra kliknij OK w panelu Zastosuj filtr SVG.
Zestaw filtrów SVG programu Illustrator jest minimalistyczny, ale można go ulepszyć, projektując własne filtry lub pobierając gotowe zestawy filtrów SVG ze źródeł internetowych. Projektowanie filtrów obejmuje kodowanie, ale jest to wykonalne, jeśli znasz HTML. Polecam tutorial w w3Schools do tworzenia filtrów SVG. Możesz też kupić zestawy filtrów online, a nawet znaleźć fajne zestawy bezpłatnych filtrów SVG w Createo .
Po zakupie lub utworzeniu własnych filtrów SVG zainstaluj je w programie Illustrator w następujący sposób:
Wybierz Efekt→Filtry SVG→Importuj filtr SVG.
W wyświetlonym oknie dialogowym przejdź do utworzonego lub pobranego bezpłatnie pliku filtrów SVG i kliknij go dwukrotnie.
Plik, którego szukasz, powinien być plikiem SVG (wiele filtrów jest zawartych w jednym pliku SVG).
Twoje nowe filtry są teraz dostępne w podmenu Filtry SVG.
Wybierz Efekt → Filtry SVG, aby zastosować nowe filtry do wybranych obiektów.
Często grafika SVG, którą tworzysz w programie Illustrator, jest przekazywana projektantom gier, animatorom, infografikom lub innym wynikom, w których programiści będą pracować z kodem za grafiką SVG. Jako ilustrator nie musisz wiedzieć, jak stworzyć ten kod, ale być może będziesz musiał wiedzieć, jak go zdobyć i przekazać programiście. Oto jak.
Ścieżka do eksportowania grafiki SVG jako kodu przebiega przez funkcje Zapisz programu Illustrator. Menu Zapisz zawiera opcje (niełatwe do znalezienia), które eksportują plik jako kod SVG. Prawdopodobnie będziesz chciał komunikować się w czasie rzeczywistym z twórcą ekranu podczas generowania tego kodu, ponieważ kilka opcji zależy od tego, jak ten kod będzie używany:
Wybierz Plik→Zapisz (lub Zapisz jako, jeśli ponownie zapisujesz plik).
W otwartym oknie dialogowym wybierz SVG z menu Format.
Zignoruj opcję pliku SVGZ, która dotyczy skompresowanego pliku, który nie jest wyświetlany w przeglądarkach.
Kliknij Zapisz, aby otworzyć okno dialogowe Opcje SVG.
Zawsze wybieraj SVG 1.1 z listy rozwijanej Profile SVG. Inne wersje są przestarzałe.
Jeśli w pliku SVG są osadzone lub połączone obrazy, wybierz opcję Osadź z listy rozwijanej Lokalizacje obrazów. Jednak najpierw skonsultuj się z programistą internetowym w sprawie tego wyboru.
Wybierz opcję Zachowaj możliwości edycji programu Illustrator, aby umożliwić edycję pliku w programie Illustrator.
Ten wybór zwiększa rozmiar pliku, ale umożliwia pracę z pojedynczym plikiem SVG, który można edytować, aktualizować i udostępniać programistom internetowym.
Jeśli wyświetlony jest przycisk Więcej opcji, kliknij go, aby uzyskać dostęp do opcji zaawansowanych. i dokonaj wyboru.
Zasadniczo różne opcje generują CSS z plikiem, który definiuje właściwości w następujący sposób. Skonsultuj się z kolegą z zespołu programistów stron internetowych, jak zdefiniować te właściwości CSS:
Usuń zaznaczenie pięciu pól wyboru na dole okna Opcje SVG, chyba że Twój partner-deweloper zażąda ich zaznaczenia.
Te opcje są przeznaczone do wysoce specjalistycznych zastosowań.
Aby wygenerować kod SVG na podstawie wyborów dokonanych w oknie dialogowym Opcje SVG, kliknij przycisk Kod SVG .
Wygenerowany kod SVG jest wyświetlany w edytorze tekstu systemu operacyjnego. Możesz zapisać ten kod jako plik tekstowy za pomocą edytora tekstu systemu operacyjnego i przekazać plik programiście.
Po wygenerowaniu kodu kliknij OK, aby zapisać plik.
Możesz ponownie otworzyć i edytować ten plik w programie Illustrator.
Możesz użyć narzędzia Migawka w programie Adobe Acrobat CS5, aby zaznaczyć tekst i obrazy oraz utworzyć obraz określonego obszaru w pliku PDF. Wynik jest powszechnie określany jako zrzut ekranu sekcji w pliku PDF. Rezultatem jest obraz, a Twój tekst nie jest […]
Zaprojektowany dla badaczy i naukowców, możliwości pomiarowe w Photoshop CC są dość potężne. Możesz zmierzyć prawie wszystko i policzyć cokolwiek na obrazie technicznym, być może z mikroskopu lub teleskopu. Jeśli znasz dokładny rozmiar dowolnego elementu na obrazie, możesz odkryć prawie wszystko […]
Korzystając z narzędzi Skraplanie w programie Adobe Creative Suite 5 (Adobe CS5) Illustrator, można wyginać obiekty — nadawać im fale, lepkość lub kolce — tworząc zniekształcenia od prostych do złożonych. Narzędzia Skraplanie mogą wykonywać wszelkiego rodzaju kreatywne lub zwariowane (w zależności od tego, jak na to patrzysz) zniekształcenia obiektów. Ty […]
Gdy masz tekst w projekcie Adobe XD, możesz zacząć zmieniać właściwości tekstu. Te właściwości obejmują rodzinę czcionek, rozmiar czcionki, grubość czcionki, wyrównanie, odstępy między znakami (kerning i śledzenie), odstępy między wierszami (interlinię), wypełnienie, obramowanie (pociągnięcie), cień (cień) i rozmycie tła. Przyjrzyjmy się więc, jak te właściwości są stosowane. O czytelności i czcionce […]
Za pomocą programu InDesign można tworzyć i modyfikować grafikę z kodem QR. Kody QR to forma kodów kreskowych, które mogą przechowywać informacje, takie jak słowa, liczby, adresy URL lub inne formy danych. Użytkownik skanuje kod QR za pomocą aparatu i oprogramowania na urządzeniu, takim jak smartfon, a oprogramowanie wykorzystuje […]
Podobnie jak w programie Adobe Illustrator, obszary robocze programu Photoshop umożliwiają tworzenie osobnych stron lub ekranów w ramach jednego dokumentu. Może to być szczególnie przydatne, jeśli tworzysz ekrany dla aplikacji mobilnej lub małej broszury. Obszar roboczy można traktować jako specjalny rodzaj grupy warstw utworzonej za pomocą panelu Warstwy. Jego […]
Zawijanie tekstu w programie Adobe Illustrator CC to nie to samo, co zawijanie prezentu — to prostsze! Zawijanie tekstu wymusza zawijanie tekstu wokół grafiki, jak pokazano na tym rysunku. Ta funkcja może dodać trochę kreatywności do każdego utworu. Grafika wymusza zawijanie tekstu wokół niej. Najpierw utwórz […]
Projektując w programie Adobe Illustrator CC, często potrzebujesz kształtu o dokładnym rozmiarze (na przykład 2 x 3 cale). Po utworzeniu kształtu najlepszym sposobem zmiany jego rozmiaru do dokładnych wymiarów jest użycie panelu Przekształć, pokazanego na tym rysunku. Zaznacz obiekt, a następnie wybierz Okno → Przekształć do […]
Dowiedz się, jak zastosować przezroczystość do grafiki SVG w programie Illustrator. Dowiedz się, jak drukować SVG z przezroczystym tłem i stosować efekty przezroczystości.
Po zaimportowaniu obrazów do programu Adobe XD nie masz zbyt dużej kontroli nad edycją, ale możesz zmieniać rozmiar i obracać obrazy, tak jak każdy inny kształt. Możesz także łatwo zaokrąglić rogi importowanego obrazu za pomocą widżetów narożnych. Maskowanie obrazów Definiując zamknięty kształt […]
