Jeśli istnieje jeden aspekt pracy z programem Illustrator, który naprawdę mi się nie podoba to konwertowanie grafiki liniowej do obrazów svg na telefon komórkowy lub internet. Korzystając z menu Eksportuj> Eksportuj jako i, mówiąc brutalnie szczerze, funkcja Zapisz dla Internetu - Eksportuj> Zapisz dla Internetu - nie była łatwa w użyciu.
Konwertowanie rysunku na format .svg otworzyło raczej zastraszające okno dialogowe, które dla osób nowszych w tym przepływie pracy oferowało mylące wachlarz opcji, nie wspominając o tym, że istniało wiele formatów .svg i tylko jeden z nich był prawidłowy. format. Kiedy już przyzwyczaiłeś się do tego przepływu pracy, nie było to nic wielkiego, ale krzywa uczenia się była bardzo stroma.
To wszystko zmieniło się dzięki nowej funkcji Eksportuj do ekranów - Eksportuj> Eksportuj do ekranów - oraz panelowi Eksport zasobów, które zostały wprowadzone do programu Illustrator CC 2015 w czerwcu 2016 r. W tym "Jak to zrobić" pokażę, jak używać obu funkcje. Zacznijmy.
01 z 04
Jak uzyskać dostęp do eksportu do ekranów w Adobe Illustrator CC 2015
Będąc ilustratorem od czasu Illustratora 88, myślę, że rozumiesz moją niechęć do traktowania Illustratora jako poważnego narzędzia do projektowania interfejsów i projektów internetowych i mobilnych.
Kiedy w wersji CS4 2008 wprowadzono obszary robocze, pomyślałem, że jest to interesujący dodatek do aplikacji. Kiedy po raz pierwszy zobaczyłem wycofaną funkcję Save For Web w programie Illustrator, ponownie uznałem to za interesujące, ale odkryłem, że ta sama funkcja w programie Adobe Fireworks była bardziej zgodna z grafiką WWW niż Illustrator.
Wraz z pojawieniem się mobilnego pierwszego podejścia do projektowania i coraz większego polegania na obrazach SVG dla projektów mobilnych, Illustrator był moim narzędziem "przejdź do" dla SVG i stał się ważnym punktem w przepływie pracy w interfejsie użytkownika.
Mimo to, jeśli potrzebowałem wyeksportować zasoby do urządzeń mobilnych, Sketch 3 i Photoshop CC 2015 to moje wybrane przeze mnie narzędzia. Illustrator wszedł na listę w czerwcu 2016 z naprawdę fajnym menu Export for Screens.
W powyższym przykładzie mam dwa ekrany przeznaczone dla iPhone'a i są one na oddzielnych obszarach roboczych o nazwie "Dom" i "Miejsca". Aby je wypisać, wybrałem opcję Plik> Eksportuj> Eksportuj dla ekranów. Otworzy się okno dialogowe Eksport do ekranów.
02 z 04Jak korzystać z okna dialogowego Eksportuj dla ekranów
Po wyświetleniu okna dialogowego kliknij każdy obszar roboczy, który ma zostać wybrany. Następnie będzie oznaczony znacznikiem wyboru. Możesz także dwukrotnie kliknąć nazwę obszaru roboczego, aby ją wybrać i zmienić. Dobrze jest wiedzieć, czy obszary robocze noszą nazwy "Obszar roboczy 1" i "Obszar roboczy 2", co, szczerze mówiąc, nic nie mówi.
Masz trzy możliwości w obszarze Wybierz:
- Wszystko: Ten wybór powoduje eksportowanie każdego obszaru roboczego w dokumencie jako osobnego pliku.
- Zasięg: Wprowadź zakres obszarów roboczych do wyeksportowania. Jest to szczególnie przydatne w przypadku projektów z kilkudziesięcioma obszarami roboczymi.
- Pełny dokument: Wybierz to i wszystkie obszary robocze zostaną spłaszczone w jednym dokumencie.
Obszar Eksportuj do pozwala wybrać folder docelowy dla danych wyjściowych. Domyślnym folderem będzie bieżąca lokalizacja dokumentu programu Illustrator.
Formaty to miejsce, w którym "magia się dzieje. Zauważysz, że są trzy ikony - iOS. Android i urządzenie Gear. Pierwsze dwa są oczywiste. Ikona koła zębatego otwiera Ustawienia formatu, które pozwalają kontrolować sposób optymalizacji każdego z formatów plików na liście. Te ustawienia są "specyficzne dla formatu" i po wprowadzeniu zmian kliknij przycisk Zapisz ustawienia, a zmiany zostaną zastosowane do formatów, które mają być wyprowadzane.
Po wybraniu systemu iOS lub Android lista zmieni się, aby uwzględnić wszystkie rozdzielczości dostępne na tej platformie. W wykazie systemu iOS zostaną wyświetlone współczynniki skalowania ekranu Retina, a wybór systemu Android będzie miał skalę od .75x do 4x, która będzie obsługiwać praktycznie każde urządzenie z systemem Android.
Jeśli istnieje format pokazujący, że chcesz usunąć, kliknij "x". Jeśli istnieje taki, który chcesz dodać, kliknij przycisk + Dodaj skalę.
Po zakończeniu kliknij przycisk Eksportuj obszar roboczy, a pasek postępu pokaże Ci, kiedy proces się zakończy.
03 z 04Korzystanie z eksportu do ekranów plików z Adobe Illustrator CC 2015.
Po sprawdzeniu wyników eksportu dla ekranów odkryjesz, że Illustrator wyświetla spłaszczoną wersję każdego ekranu. Na pozór może to wydawać się nieco słabe, szczególnie jeśli spodziewałeś się, że Illustrator wyeksportuje wszystkie bity jako obrazy.
Jeśli cofniesz się o krok i pomyślisz o tym przez chwilę, jest to dokładnie to, czego potrzebujesz, ponieważ możesz użyć tego wyniku w aplikacji do prototypowania, takiej jak Adobe Experience Design, Principleformac, Atomic.io, UXPin lub innej aplikacji do prototypowania
W tym przykładzie używam Adobe Experience Design (XD), aby utworzyć proste kliknięcie. Pierwszym krokiem w tym procesie było wybranie rozmiaru iPhone'a 6, który odpowiadał wymiarom interfejsu programu Illustrator
Po otwarciu interfejsu wybrałem narzędzie Artboard i kliknąłem raz na stole, aby dodać kolejny obszar roboczy. Nazwałam je "Dom" i "Miejsca", wybrałem każdy obszar roboczy i zaimportowałem obraz png z programu Illustrator do obszaru roboczego.
Aby utworzyć "punkty aktywne" dla kliknięcia, narysowałem prostokąt nad przyciskiem Przeglądaj na ekranie głównym i ustaw jego wartości wypełnienia i obramowania na wartość none, usuwając zaznaczenie tych właściwości w panelu Właściwości. Zrobiłem to samo z przyciskiem Wstecz na stronie Miejsca.
Aby dodać interaktywność, wybrałem tryb Prototype, a następnie kliknąłem na "hotspot". Następnie przeciągnąłem strzałkę - zwaną drutu - na stronę Miejsca i ustawiłem cel Przejścia w Miejscach, ruch w kierunku Wciśnięcia w lewo, łagodzenie w celu ułatwienia i czas przejścia do 0,6 sekundy.
Powtórzyłem ten krok z punktem aktywnym na stronie Miejsca. Jedyną różnicą było ustawienie przejścia na Push Right. Kiedy kliknąłem przycisk Play, przetestowałem mój prototyp.
04 z 04Jak korzystać z panelu eksportu zasobów w Adobe Illustrator CC 2015
Wraz z menu Zapisz dla ekranów Adobe dodał także nowy panel - Eksport zasobów - który usunął ogromny problem w przepływie pracy w interfejsie użytkownika.
Punktem bólu były ikony. Illustrator jest świetną aplikacją do rysowania wektorów, ale na wyjściu, powiedzmy 10 ikon, na stronie z 40 lub 50 wymaganymi, każdy z nich jest zapisywany jako obraz SVG. To nieuchronnie wymagało więcej czasu niż zwykle dzięki kolejnym podróżom do panelu SVG. Ten punkt bólu należy już do przeszłości.
Ten nowy panel można znaleźć w oknie> Eksport zasobów. Po otwarciu panelu wybierz zasób, który chcesz przekonwertować na format SVG lub inny i przeciągnij do panelu. Po zwolnieniu myszy do panelu zostanie dodana miniatura zasobu. Nazwij zasób. Wciąż przeciągaj obiekty do panelu, aż skończysz.
Wybierz każdy element W obszarze Ustawienia eksportu lub zaznacz wszystkie, przytrzymując klawisz Shift i klikając każdy z nich. Wybierz swój format - w tym przykładzie wybrałem SVG- i kliknę przycisk Eksportuj. Wybrane elementy będą wyprowadzane jako pliki SVG do tej samej lokalizacji, co plik programu Illustrator.
Tam, gdzie cały ten proces jest jeszcze lepszy, nie musisz korzystać z panelu Eksport zasobów. Po kliknięciu przycisku Zapisz dla ekranów u dołu panelu otworzy się okno dialogowe.
I odwrotnie, możesz kliknąć kartę Zasoby w panelu Zapisz ekrany, aby uzyskać dostęp do panelu Eksport zasobów. Jeśli na przykład masz niestandardową ikonę w obszarze roboczym, możesz otworzyć panel Eksport zasobów w oknie dialogowym Zapisz na ekranie i przeciągnąć ten element do panelu Eksport zasobów.
