Користите Иллустратор ЦЦ 2015 Екпорт за функције екрана

Ако постоји један аспект рада са Иллустратор-ом да заиста не уживам, претварање линије је у свг слике за мобилни или веб. Помоћу менија Извоз> Извоз као и, да бисте били брутално искрени, функција Саве Фор Веб - Екпорт> Саве Фор Веб - није баш једноставна за коришћење.

Претварање цртежа у .свг формат отворило је прилично застрашујући оквир за дијалог који је, за људе који су нови у овом раду, понудили збуњујуће низ опција да не помињемо чињеницу да је било више .свг формата и само је један од њих био исправан формату. Једном када сте се навикли на овај ток посла, то није било никакве везе, али кривуља учења је била стрма.

То се променило са новом функцијом Извоз за екране - Извоз> Извоз за екране - и панел за извоз имовине који су представљени Иллустратор ЦЦ 2015 у јуну 2016. године. У овом "Како" ћу вам показати како да користите оба Карактеристике. Хајде да почнемо.

01 од 04

Како приступити извозу екрана у Адобе Иллустратор ЦЦ 2015

Излазне табеле користећи дијалог Извоз за екране.

Пошто сам био корисник Иллустратор-а од Иллустратор-а 88, мислим да можете разумети моју неспремност да Илустратор размотрите као озбиљан алат за дизајн веб и мобилних интерфејса и пројеката.

Кад су уметци уведени у ЦС4 верзију 2008, мислио сам да је то занимљив додатак апликацији. Када сам први пут видео заштићену функцију Саве Фор Веб у Иллустратор-у, поново сам се нашао занимљивим, али сам нашао да је иста карактеристика у Адобе Фиреворкс-у била више усклађена са веб графиком од Иллустратор-а.

Уз појаву мобилног првог приступа дизајнирању и све већу ослањање на СВГ слике за мобилне пројекте, Иллустратор је био мој алат за "отићи на" за СВГ и постао је важан зауставак у УИ дизајном.

Ипак, ако ми требам извозити средства за мобилне уређаје, Скетцх 3 и Пхотосхоп ЦЦ 2015 су моја алата за избор. Илустратор је ушао на листу у јуну 2016. године са стварно изузетним Извозом за екране.

У претходном примеру, имам два екрана намењена за иПхоне и налазе се на одвојеним плочама под именом "Хоме" и "Плацес". Да их изађем, изабрао сам Филе> Екпорт> Екпорт за екране. Отвара се оквир за извоз за екране.

02 од 04

Како користити дијалог за екране за екране

Излазне плоче за иОС и Андроид тако што ћете направити неколико једноставних избора у дијалогу Спреми за екране.

Када се појави дијалог, кликните на сваку таблу која ће бити изабрана. Он ће онда играти знак за чекање. Такође можете двапут кликнути на име артборда да је одаберете и промените. Ово је добра ствар да знате да ли су ваши плочице названи "Артбоард 1" и "Артбоард 2" који, искрено, не говоре ништа.

Имате три избора у области Селецт:

Извоз у поље омогућава вам да одаберете одредишну фасциклу за излаз. Подразумевани фолдер ће бити тренутна локација Иллустратор документа.

Формати су тамо где се "магија дешава. Приметили сте да постоје три иконе - иОС. Андроид и Геар. Прва два су самообјашњива. Икона Геар отвара поставке формата које вам омогућавају да контролишете како ће се сваки од формата датотека у листи оптимизовати. Ова подешавања су "специфична за формат" и након што извршите измјене, кликните на дугме Сачувај поставке и те промјене ће се примијенити на формате које ће се изводити.

Када одаберете иОС или Андроид, листа ће се променити тако да укључи све резолуције доступне на тој платформи. Списак иОС-а ће приказати факторе скалирања за Ретина дисплеј, а Андроид селекција ће имати скале у распону од .75к до 4к, у којима се практично налази сваки Андроид уређај.

Ако постоји формат који показује да желите уклонити, кликните на "к". Ако постоји један који желите додати, кликните на дугме + Додај величину.

Када завршите, кликните на дугме Екпорт Артбоард и трака напретка ће вам показати када је процес завршен.

03 од 04

Коришћење датотеке за извоз екрана за екране од Адобе Иллустратор ЦЦ 2015.

Датотеке које излазе из Иллустратор-а се лако могу додати било којем броју прототипних апликација као што је Адобе Екпериенце Десигн.

Када проверите резултате Извоза за екране, открићете да Иллустратор има излазну плочу верзију сваког екрана. На површини, ово може изгледати мало помало посебно ако сте очекивали да ће Иллустратор извести све делове као слике.

Ако се вратите и размислите на тренутак, то је управо оно што вам треба, јер можете користити овај излаз у апликацији за прототиповање као што су Адобе Екпериенце Десигн , Принциплеформац, Атомиц.ио , УКСПин или друга апликација за прототиповање

У овом примеру користим Адобе Екпериенце Десигн (КСД) да креирам једноставан клик-кроз. Први корак у процесу је био одабир величине иПхоне 6 који одговара димензијама Иллустратор интерфејса

Када је интерфејс отворен, одабрао сам алат Артбоард и кликнули једном на картону да додам још једну таблу. Затим сам их назвао "Хоме" и "Плацес", изабрао је сваку артбоард и увезао пнг слику из Иллустратора у артбоард.

Да бисте креирали "вруће тачке" за клик-тхру, нацртао сам правоугаоник изнад дугмета Истраживање на почетном екрану и поставио своје вриједности попуњавања и границе на ниједан тако што сам их одвојио на панелу својстава. Исто сам урадио са дугметом "Назад" на страници "Места".

Да бих додао Интерактивност, изабрао сам Прототипе мод, а затим кликнула на "хотспот". Затим сам повукао стрелицу - названа жича - на страницу "Места" и поставила циљ транзиције на Места, покретање Притиснуте лево, опуштање за олакшање и трајање преласка на 6 секунди.

Поновио сам овај корак са хотспотом на страници "Места". Једина разлика је била да је транзиција постављена на Пусх Ригхт. Када сам кликнуо дугме Плаи, тестирао сам свој прототип.

04 од 04

Како користити панел за извозна средства у Адобе Иллустратор ЦЦ 2015

Прилагођене иконе могу се извозити као СВГ датотеке користећи панел Ассет Екпорт.

Поред менија Саве фор Сцреенс, Адобе је додао и нову таблу - Ассет Екпорт - која је уклонила огромну тачку боља у току рада УИ дизајна.

Тачка болова била су иконе. Илустратор је одлична апликација за цртање вектора, али за излаз, рецимо 10 икона, на страници са 40 или 50 захтјева свака од њих је сачувана као СВГ слика. То је неизбежно захтијевало више времена од уобичајеног захваљујући узастопним путовањима до СВГ панела. Ова болна тачка је сада ствар прошлости.

Овај нови панел можете наћи на прозору> Извоз средстава. Када се панел отвори, изаберите средство које желите да конвертујете у СВГ или други формат и превуците у панел. Када ослободите миша, екран се додаје на панел. Назовите имовину. Држите вуче предмете у панел док не завршите.

Изабери сваку ставку У области Поставке извоза, или их све изабрати држећи тастер Схифт и кликом на сваки од њих. Изаберите свој формат - у овом примеру, изабрао сам СВГ и кликните на дугме Извоз. Изабране ставке ће се изводити као СВГ датотеке на исту локацију као и датотека Иллустратор.

Тамо где цео процес постаје још неатнији јесте да не морате користити панел Ассет Екпорт. Ако кликнете на дугме Сачувај за екране на дну панела отвара се дијалошки оквир.

Насупрот томе, можете кликнути на картицу Средства у панелу Спреми за екране да бисте приступили панелу за извоз активе. На примјер, ако имате икону прилагођену на табли, можете отворити панел панела Ассет у дијалогу Сачувај за екран и превући ту ставку у панел Ассет Екпорт.