Если есть один аспект работы с Illustrator, который мне действительно не нравится, это преобразование линейного искусства в svg-изображения для мобильных устройств или Интернета. Используя меню «Экспорт»> «Экспорт как» и, чтобы быть грубо честным, функция «Сохранить для Интернета» - «Экспорт»> «Сохранить для Интернета» - была не совсем проста в использовании.
Преобразование чертежа в формат .svg открыло довольно устрашающее диалоговое окно, которое для людей, новых для этого рабочего процесса, предложило запутанный массив опций, не говоря уже о том, что существует ряд форматов .svg, и только один из них был правильным формат. Как только вы привыкли к этому документообороту, это было неважно, но кривая обучения была крутой.
Все это изменилось с помощью новой функции «Экспорт для экранов» - «Экспорт»> «Экспорт для экранов» и панели «Экспорт активов», которая была представлена в Illustrator CC 2015 в июне 2016 года. В этом «Как» я собираюсь показать вам, как использовать оба функции. Давайте начнем.
01 из 04
Как получить доступ к экранам в Adobe Illustrator CC 2015
Будучи пользователем Illustrator с Illustrator 88, я думаю, вы можете понять мое нежелание рассматривать Illustrator как серьезный инструмент проектирования для веб-и мобильных интерфейсов и проектов.
Когда в CS4 версии 2008 были внесены монтажные платы, я подумал, что это интересное дополнение к приложению. Когда я впервые увидел устаревшую функцию Save For Web в Illustrator, я снова нашел ее интересной, но я обнаружил, что такая же функция в Adobe Fireworks была больше совмещена с веб-графикой, чем с Illustrator.
С появлением мобильного подхода к дизайну и растущей зависимости от изображений SVG для мобильных проектов Illustrator стал моим инструментом «перейти к» для SVG и стал важной остановкой в рабочем процессе UI Design.
Тем не менее, если мне нужно экспортировать активы для мобильных устройств, Sketch 3 и Photoshop CC 2015 являются моими инструментами выбора. Illustrator вошел в список в июне 2016 года с действительно отличным меню «Экспорт для экранов».
В приведенном выше примере у меня есть два экрана, предназначенные для iPhone, и они находятся на отдельных монтажных досках с именем «Главная» и «Места». Чтобы вывести их, я выбрал «Файл»> «Экспорт»> «Экспорт для экранов». Откроется диалоговое окно «Экспорт для экранов».
02 из 04Как использовать диалоговое окно «Экспорт для экранов»
Когда появится диалоговое окно, щелкните по каждой монтажной области, которая будет выбрана. Затем он будет иметь галочку. Вы также можете дважды щелкнуть имя арматуры, чтобы выбрать его и изменить. Это хорошая вещь, чтобы знать, если ваши монтажные наборы называются «Artboard 1» и «Artboard 2», которые, честно говоря, ничего не говорят.
У вас есть три варианта в области «Выбрать»:
- Все: Этот выбор экспортирует каждую монтажную область в документе в виде отдельного файла.
- Спектр: Введите диапазон монтажных областей для экспорта. Это особенно полезно для проектов с несколькими десятками монтажных областей.
- Полный документ: Выберите это, и все монтажные панели будут сплющены в один документ.
В области «Экспорт в» вы можете выбрать целевую папку для вывода. Папка по умолчанию будет текущим расположением документа Illustrator.
Форматы - это то, где происходит «волшебство». Вы заметите, что есть три иконки - iOS. Android и Gear. Первые два не требуют пояснений. Значок Gear открывает параметры формата, которые позволяют вам контролировать, как каждый из форматов файлов в списке будет оптимизирован. Эти настройки являются «специфичными для формата», и как только вы внесли свои изменения, нажмите кнопку «Сохранить настройки», и эти изменения будут применены к форматам, которые будут выводиться.
После выбора iOS или Android список изменится, чтобы включить все разрешения, доступные на этой платформе. В списке iOS будут показаны коэффициенты масштабирования для дисплея Retina, а выбор Android будет иметь шкалы от 0,75x до 4x, которые вмещают практически все устройства Android.
Если есть формат, показывающий, что вы хотите удалить, нажмите «x». Если есть один, который вы хотите добавить, нажмите кнопку + Добавить масштаб.
Когда закончите, нажмите кнопку «Экспорт текстового поля», и индикатор выполнения покажет вам, когда процесс будет завершен.
03 из 04Использование экспорта файлов экранов из Adobe Illustrator CC 2015.
Когда вы просматриваете результаты экспорта для экранов, вы обнаружите, что Illustrator выводит сглаженную версию каждого экрана. На первый взгляд это может показаться немного слабым, особенно если вы ожидали, что Illustrator экспортирует все биты и куски в виде изображений.
Если вы отступите и подумайте об этом на мгновение, это на самом деле именно то, что вам нужно, потому что вы можете использовать этот вывод в приложении для создания прототипов, например, в Adobe Experience Design, Principleformac, Atomic.io, UXPin или другом прототипировании
В этом примере я использую Adobe Experience Design (XD) для создания простого клика. Первым шагом в этом процессе был выбор размера iPhone 6, который соответствовал размерам интерфейса Illustrator
Когда интерфейс был открыт, я выбрал инструмент «Artboard» и один раз щелкнул на картотеке, чтобы добавить еще одну редакционную панель. Затем я назвал их «Главная» и «Места», выбрал каждую монтажную область и импортировал png-изображение из Illustrator в монтажную область.
Чтобы создать «горячие точки» для click-thru, я нарисовал прямоугольник над кнопкой «Исследуйте» на главном экране и не задал значения заливки и границы ни одному, отменив выделение этих свойств на панели «Свойства». Я сделал то же самое с кнопкой «Назад» на странице «Места».
Чтобы добавить Интерактивность, я выбрал режим Prototype, а затем нажал на «горячую точку». Затем я перетащил стрелку, называемую проводкой, на страницу «Места» и установил цель перехода на «Места», движение для нажатия «Влево», ослабление для облегчения и длительность перехода на 0,6 секунды.
Я повторил этот шаг с горячей точкой на странице «Места». Единственное отличие заключалось в том, что переход был настроен на Push Right. Когда я нажал кнопку Play, я протестировал свой прототип.
04 из 04Как использовать панель «Экспорт активов» в Adobe Illustrator CC 2015
Наряду с меню «Сохранить для экранов» Adobe также добавила новую панель - «Экспорт активов», которая удалила огромную точку боли в рабочем процессе пользовательского интерфейса.
Больной - это значки. Illustrator - отличное приложение для рисования векторов, но для вывода, скажем, 10 значков, на странице с 40 или 50 из них требуется, чтобы каждый из них был сохранен как изображение SVG. Это неизбежно потребовало больше времени, чем обычно, благодаря последовательным поездкам на панель SVG. Эта точка боли теперь ушла в прошлое.
Эта новая панель можно найти в окне> Экспорт активов. Когда панель открывается, выберите объект, который вы хотите преобразовать в SVG или другой формат, и перетащите его в панель. Когда вы отпускаете мышь, миниатюра актива добавляется в панель. Назовите этот актив. Продолжайте перетаскивать объекты в панель, пока не закончите.
Выберите каждый элемент. В области «Параметры экспорта» или выберите их все, удерживая клавишу Shift и нажимая на каждый из них. Выберите свой формат - в этом примере я выбрал SVG- и нажмите кнопку «Экспорт». Выбранные элементы будут выводиться в виде файлов SVG в том же месте, что и файл Illustrator.
Когда весь этот процесс становится еще более аккуратным, вам не нужно использовать панель «Экспорт активов». Если вы нажмете кнопку «Сохранить для экранов» в нижней части панели, откроется диалоговое окно.
И наоборот, вы можете щелкнуть вкладку «Активы» на панели «Сохранить для экранов», чтобы открыть панель «Экспорт активов». Например, если у вас есть пользовательский значок на монтажной панели, вы можете открыть панель «Экспорт активов» в диалоговом окне «Сохранить для экрана» и перетащить этот элемент на панель «Экспорт активов».
