Ако има еден аспект на работа со Illustrator дека јас навистина не уживам во тоа е конвертирање на линија уметност да svg слики за мобилни или на интернет. Користејќи го менито Експортирај> Извоз како и, за да бидеш брутално искрен, функцијата Зачувај за веб-експортер> Извоз> Зачувај за веб-не беше точно лесна за употреба.
Конвертирањето на цртеж во формат .svg отвори прилично заплашувачки дијалог-кутија, што за луѓето што се ново на овој работен тек понудија збунувачка низа опции за да не го спомнуваме фактот дека имаше голем број на .svg формати и само еден од нив беше соодветен формат. Откако ќе се навикнеш на овој работен тек, тоа не беше голема работа, но кривата на учење беше стрмен.
Сето тоа се сменило со новата функција Експорт за екрани - Експорт> Експорт за екрани - и панелот за извоз на средства, кои беа претставени на Illustrator CC 2015 во јуни 2016 година. Во овој "Како да", ќе ви покажам како да ги користите двата карактеристики. Ајде да почнеме.
01 од 04
Како да пристапите до извозот за екрани во Adobe Illustrator CC 2015
Откако станав корисник на Illustrator од Illustrator 88, мислам дека може да се разбере мојата неподготвеност да го разгледа Илустратор како сериозна алатка за дизајн за веб и мобилни интерфејси и проекти.
Кога беа претставени artboards во CS4 верзија 2008, мислев дека тоа е интересно дополнување на апликацијата. Кога првпат ја видов сега застарената функција Зачувај за веб во Illustrator, повторно, ми беше интересно, но сфатив дека истата функција во Adobe Fireworks е повеќе усогласена со веб-графика од Illustrator.
Со доаѓањето на првиот мобилен приод кон дизајнот и зголемената зависност од SVG сликите за мобилни проекти, Illustrator ми беше алатката "одат" за SVG и стана важна точка во работниот тек на UI Design.
Сепак, ако треба да извезувам средства за мобилни, Sketch 3 и Photoshop CC 2015 се мои алатки за избор. Illustrator влезе на листата во јуни 2016 година со навистина извонредна Експорт за екрани мени.
Во примерот погоре, имам два екрани наменети за iPhone и тие се на одделни плочки со име "Дома" и "Места". За да ги излез, избрав File> Export> Export for Screens. Отвора дијалог прозорецот Експорт за екрани.
02 од 04
Како да го користите дијалогот за екран за екрани
Кога ќе се појави дијалог-кутија, кликнете на секоја одбор за да се избере. Тогаш ќе се одбележи ознаката за проверка. Можете исто така да двоен клик на името на артиклот за да го изберете и да го промените. Ова е добра работа да се знае дали вашите плочки се именувани како "Artboard 1" и "Artboard 2", кои, искрено, не ви кажуваат ништо.
Имате три избори во областа Избор:
- Сите: Овој избор го извезува секоја табла во документот како посебна датотека.
- Опсег: Внесете голем број на табли за извоз. Ова е особено корисно за проекти со неколку десетина плочки.
- Целосен документ: Изберете го ова и сите плочи ќе бидат срамнети со земја во еден документ.
Областа за извоз на To ви овозможува да ја одберете дестинацијата на папката за излез. Стандардната папка ќе биде моменталната локација на документот Illustrator.
Форматите се однесуваат на "магијата". Ќе забележите дека постојат три икони - iOS. Андроид и Gear. Првите две се очигледни. Иконата "Gear" ги отвора поставките за формат кој ви овозможува да контролирате како ќе се оптимизираат сите формати на датотеки во листата. Овие подесувања се "специфични за формат" и откако ќе ги направите вашите промени, кликнете на копчето Зачувај поставувања и тие промени ќе се применат во форматите што ќе бидат изведени.
Откако ќе изберете iOS или Android, листата ќе се промени за да ги вклучи сите резолуции достапни на таа платформа. Листата на iOS ќе ги прикаже факторите за скалирање на Retina дисплејот, а изборот на Android ќе има скали во опсег од .75x до 4x кој ќе го приспособи практично секој уред со Android.
Ако има формат кој покажува дека сакате да го отстраните, кликнете на "x". Ако постои оној што сакате да го додадете кликнете на копчето + Додади скала.
Кога ќе завршите, кликнете на копчето Export Artboard и лентата за напредок ќе ви покаже кога процесот е завршен.
03 од 04
Користење на датотеките за екран за екрани од Adobe Illustrator CC 2015.
Кога ќе ги проверите резултатите од Export for Screens, ќе откриете дека Illustrator има излезено срамнето верзија на секој екран. На површината, ова може да изгледа дека е малку слабо, особено ако очекувате Illustrator да ги извезува сите делови и делови како слики.
Ако се повлечете и размислите за тоа за момент, ова всушност е токму она што ви треба, бидејќи можете да го користите овој излез во апликација за прототипирање како Adobe Experience Design , Principleformac, Atomic.io , UXPin или друга апликација за прототипирање
Во овој пример, јас го користам Adobe Experience Design (XD) за да создадам едноставен клик-преку. Првиот чекор во процесот беше да ја изберете големината на iPhone 6 која одговараше на димензиите на интерфејсот на Illustrator
Откако се отвори интерфејсот, ја избрав алатката Artboard и еднаш еднаш ја кликнав на пастилот за да додадам друга табла. Потоа ги именував "Дома" и "Места", ги избрав сите плочи и ја увезува сликата од сликата од Illustrator во табла.
За креирање на "жариштата" за кликање-преку, јас повлече правоаголник над копчето Истражувај на почетниот екран и ги поставив своите пополни и гранични вредности на ниту еден, со тоа што не ги избришам тие својства во панелот својства. Истото го сторив со копчето Назад на страната Места.
За да додадам Интерактивност, го избрав Прототипскиот режим и потоа го кликнав "жариштето". Потоа ја влечев стрелката - наречена жица - на страната Места и ја поставив целта на транзицијата во Местата, движењето да се притисне лево, олеснување за олеснување и времетраењето на транзицијата на 6 секунди.
Го повторив овој чекор со жариштето на страницата Места. Единствената разлика беше што Транзицијата беше поставена на "Притисни десно". Кога го кликнав копчето Play, го тестирав прототипот.
04 од 04
Како да го користите Панелот за извоз на средства во Adobe Illustrator CC 2015
Заедно со менито Save for Screens, Adobe исто така додаде нов панел - Asset Export - што отстранува огромна точка на болка во работниот тек на УИ.
Точката на болка беше икони. Illustrator е одлична апликација за цртање на вектори, но за излез, да речеме 10 икони, на страница со 40 или 50 од нив се бара секој е зачуван како SVG слика. Ова неизбежно бараше повеќе време од вообичаеното благодарение на последователните патувања до SVG панелот. Оваа точка на болка сега е нешто од минатото.
Овој нов панел може да се најде во прозорецот> Извоз на средства. Кога ќе се отвори панелот, одберете го средството што сакате да го конвертирате во SVG или друг формат и влечете во панелот. Кога го пуштате глувчето, на плочата се додава слика од имотот. Наведете го средството. Држете ги влечените предмети во панелот додека не завршите.
Изберете ја секоја ставка Во областа Експортирај извози, или одберете ги сите со држење на копчето Shift и кликнување на секоја од нив. Изберете го формат - во овој пример, избрав SVG- и кликнете на копчето Извоз. Избраните елементи ќе бидат изведени како SVG датотеки на истата локација како и датотеката Illustrator.
Онаму каде што целиот процес станува уште попрецизен е дека не мора да го користите панелот за Извоз на средства. Ако кликнете на копчето Зачувај за екрани на дното на панелот се отвора диалоговото поле.
Спротивно на тоа, можете да кликнете на табулаторот "Средства" во панелот Зачувај за екрани за да пристапите до панелот за извоз на средства. На пример, ако имате прилагодена икона на табла, можете да го отворите Панелот за Извоз на средства во дијалогот Зачувај за екран и повлечете го тој елемент во панелот за Извоз на средства.