Ако има един аспект от работата с 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 беше моят инструмент "go to" за SVG и стана важен спирка в работния поток на UI Design.
Все пак, ако имах нужда да експортирам активи за мобилни устройства, Sketch 3 и Photoshop CC 2015 са моите инструменти по избор. Илюстраторът е влязъл в списъка през юни 2016 г. с наистина изгодното меню "Експортиране на екрани".
В горния пример имам два екрана, предназначени за iPhone, и те са на отделни Artboards, наречени "Home" и "Places". За да ги изведе, избрах Файл> Експортиране> Експортиране за екрани. Отваря се диалоговият прозорец Експортиране на екрани.
02 от 04
Как да използвате диалоговия прозорец Експортиране за екрани
Когато се появи диалоговият прозорец, кликнете върху всеки плакат, който ще бъде избран. Тогава ще спортува отметка. Можете също така да щракнете двукратно върху името на платката, за да я изберете и да я промените. Това е добре да знаете дали вашите плакати са наречени "Artboard 1" и "Artboard 2", които, честно казано, не ви казва нищо.
В областта Избор имате три възможности:
- Всички: Този избор изнася всеки графичен документ в документа като отделен файл.
- Обхват: Въведете набор от плакати за експортиране. Това е особено полезно за проекти с няколко десетина картинки.
- Пълен документ: Изберете това и всички плакати ще бъдат сплескани в един документ.
Областта "Експортиране" ви позволява да изберете целевата папка за изхода. Папката по подразбиране ще бъде текущото местоположение на документа на Illustrator.
Форматите са там, където се случва "магията". Ще забележите, че има три икони - iOS. Android и Gear. Първите две са обясними. Иконата Gear отваря настройките за формат, които ви позволяват да контролирате начина, по който всеки от файловите формати в списъка ще бъде оптимизиран. Тези настройки са "специфични за формата" и след като направите промените си, кликнете върху бутона "Запазване на настройките" и тези промени ще бъдат приложени към изходните формати.
След като изберете iOS или Android, списъкът ще се промени, за да включва всички резолюции, налични на тази платформа. Записът на iOS ще покаже факторите за мащабиране на дисплея на Retina, а изборът на Android ще има мащаби от 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 и кликнах веднъж върху пакета, за да добавим друга графика. След това ги наименувах "Дом" и "Места", избрах всеки плакат и импортирах изображението от Illustrator в платката.
За да създадете "горещите точки" за щракване, извадих правоъгълник над бутона "Изследване" на началния екран и не зададох нивата му за попълване и границата на никой, като премахнах тези свойства от панела "Свойства". Направих същото и с бутона "Назад" на страницата "Места".
За да добавите интерактивността, избрах Prototype режим и след това кликнах върху "hotspot". След това изтеглих стрелката, наречена проводник, на страницата Места и зададох целта "Преход" в Места, движението "Натисни наляво", улесняването, за да се улесни и продължителността на прехода до .6 секунди.
Повторих тази стъпка с горещата точка на страницата "Места". Единствената разлика беше, че преходът беше настроен на Push Right. Когато натиснах бутона за възпроизвеждане, тествах моя прототип.
04 от 04
Как да използвате панела за експортиране в Adobe Illustrator CC 2015
Заедно с менюто "Запазване на екрани", Adobe също добави нов панел - Export Asset (Активиране на активи), който премахна огромна точка на болка в работния процес на UI Design.
Точката на болка е икони. Illustrator е чудесно приложение за векторно рисуване, но за изход, да речем 10 икони, на страница с 40 или 50 от които се изисква всеки от тях да се запази като SVG изображение. Това неизбежно изискваше повече време, отколкото обикновено, благодарение на последователните пътувания до панела на SVG. Тази болка е вече нещо от миналото.
Този нов панел може да се намери в прозореца> Експортиране на активи. Когато панелът се отвори, изберете актива, който искате да конвертирате в SVG или друг формат, и плъзнете в панела. Когато пуснете мишката, в панела се добавя миниатюра на актива. Дайте име на актива. Дръжте плъзгащи се обекти в панела, докато не приключите.
Изберете всеки елемент В областта за настройки за експортиране или ги изберете всички, като задържите клавиша Shift и кликнете върху всеки от тях. Изберете вашия формат - в този пример, избрах SVG - и щракнете върху бутона Експортиране. Избраните елементи ще бъдат изведени като SVG файлове на същото място като файла на Illustrator.
Когато този процес стане още по-чист, не е нужно да използвате панела за експортиране на активи. Ако кликнете върху бутона Запиши за екрани в долната част на панела, ще се отвори диалоговият прозорец.
Обратно, можете да кликнете върху раздела Активи в панела "Запазване на екрани", за да отворите панела "Експортиране на активи". Ако например имате персонализирана икона в графика, можете да отворите панела "Износ на активи" в диалоговия прозорец "Запиши за екран" и да преместите този елемент в панела "Експортиране на активи".