Калі ёсць адзін аспект працы з Illustrator , што я сапраўды не падабаецца гэта пераўтварэнне радкі мастацтва SVG малюнка для мабільнага тэлефона або Інтэрнэту. Выкарыстанне Экспарт> Экспарт у меню і, каб быць сумленныя, Захаваць для вэб-функцыі - Экспарт> Захаваць для Web - былі не зусім просты ў выкарыстанні.
Пераўтварэнне чарцяжа ў фармаце .svg адкрыў дыялогавае акно, а страшэнны, што для пачаткоўцаў у гэты працоўны працэс, прапанаваны заблытаны набор опцый, не кажучы ўжо пра тое, існуе цэлы шэраг .svg фарматаў і толькі адзін з іх быў правільны фармат. Пасля таго, як вы прывыклі да гэтага працоўны працэс гэта не было вялікай праблемай, але крывая навучання быў круты.
Гэта ўсё змянілася з новага экспарту для экранаў асаблівасць - Экспарт> Экспарт для экранаў - і панэль Asset Экспарт , якія былі ўведзеныя ў Illustrator CC 2015 у чэрвені 2016 года ў гэтым «Як» Я збіраюся паказаць вам , як выкарыстоўваць абодва Асаблівасці. Давайце пачнем.
01 з 04
Як атрымаць доступ Экспарт Для экранаў у Adobe Illustrator CC 2015
Будучы карыстальнікам Illustrator, паколькі Illustrator 88 Я думаю, вы можаце зразумець маё нежаданне разглядаць ілюстратар як сур'ёзны інструмент дызайну для вэб-сайтаў і мабільных інтэрфейсаў і праектаў.
Калі мантажныя вобласці былі ўведзены ў CS4 версіі 2008 г., я падумаў, што было цікавым дадаткам да дадатку. Калі я ўпершыню ўбачыў цяпер састарэлае Захаваць для вэб-функцыі ў Illustrator, зноў жа, я знайшоў, што гэта цікава, але я знайшоў тую ж асаблівасць у Adobe Fireworks быў больш выраўнаваны з вэб-графікай, чым Illustrator.
З з'яўленнем мабільных прылад першага падыходу да дызайну і расце залежнасці ад SVG малюнкаў для мабільных праектаў, Illustrator быў мой «перайсці да» інструмент для SVG і стаў важнай прыпынкам ў працоўным працэсе UI Design.
Тым не менш, калі мне трэба экспартаваць актывы для мабільных прылад, эскіз 3 і Photoshop CC 2015 мае інструменты выбару. Ілюстратар увайшоў у спіс у чэрвені 2016 гады з сапраўды вытанчаным экспартам у меню экранаў.
У прыведзеным вышэй прыкладзе, у мяне ёсць два экрана, прызначаныя для iPhone, і яны знаходзяцца на асобным мантажным пад назвай «Home» і «Месца». Для вываду іх, я выбраў Файл> Экспарт> Экспарт для экранаў. Адкрыецца дыялогавае Экспарт Экраны вокны.
02 з 04
Як выкарыстоўваць Экспарт для экранаў дыялогавага акна
Калі з'явіцца дыялогавае акно, націсніце на кожным палатне павінны быць выбраны. Гэта будзе фарсіць галачку. Можна таксама двойчы пстрыкнуць імя мантажнай вобласці, каб абраць яго і змяніць яго. Гэта добрая рэч, каб ведаць, калі вашы мантажныя вобласці названы «1 мантажнай вобласці» і «2 мантажнай вобласці», які, шчыра кажучы, нічога не кажа вам.
У вас ёсць тры варыянты ў галіне Выбару:
- Ўсё: Гэты выбар экспартуе кожны мантажнай вобласці ў дакуменце ў выглядзе асобнага файла.
- Дыяпазон: Увядзіце дыяпазон мантажных экспартавацца. Гэта асабліва карысна для праектаў з некалькімі дзесяткамі мантажных абласцей.
- Поўны дакумент: Абярыце гэта і ўсе мантажныя будзе расцягнуты ў адзіны дакумент.
Вобласць экспарту Для дазваляе абраць тэчку для вываду. Тэчка па змаўчанні будзе бягучае месцазнаходжанне дакумента Illustrator.
Фарматы, дзе «адбываецца чараўніцтва. Вы заўважыце, што ёсць тры icons- IOS. Android і перадач. Першыя два відавочныя. Значок шасцярэнькі адкрывае акно налад фармату, які дазваляе вам кантраляваць, як кожны з фарматаў файлаў у спісе будзе аптымізавана. Гэтыя параметры «спецыфічныя для канкрэтнага фармату», і як толькі вы зрабілі змены, націсніце на кнопку Save Settings, і гэтыя змены будуць ужытыя да фарматам для вываду.
Як толькі вы выбіраеце IOS або Android, то спіс будзе мяняцца, каб ўключыць усе рэзалюцыі даступныя на гэтай платформе. Лістынг IOS пакажа фактары маштабавання для дысплея Retina і Android выбару будзе мець маштабы ад .75x да 4x , якая ўмяшчае практычна ўсе Android прылады там.
Калі ёсць фармат, які паказвае, што вы хочаце выдаліць, націсніце на «х». Калі ёсць адзін вы хочаце дадаць націсніце кнопку + Дадаць Scale.
Калі скончыце, націсніце на кнопку Экспарту палатна і індыкатар пакажа вам, калі працэс будзе завершаны.
03 з 04
Выкарыстоўваючы экспартны для экранаў файлаў з Adobe Illustrator CC 2015.
Калі вы сканчалі вынікі экспарту для экранаў, вы выявіце, што Ілюстратар мае выхад пляскатую версію кожны экрана. На паверхні, гэта можа здацца трохі слабы, асабліва калі вы чакалі ілюстратара экспартавалі ўсе біты і кавалкі як выявы.
Калі вы крок назад і думаць пра гэта на імгненне, гэта на самай справе менавіта тое , што вам трэба , таму што вы можаце выкарыстоўваць гэтую выснову ў дадатку макетавання , такіх як Adobe Experience Design , Principleformac, Atomic.io , UXPin або іншае прыкладанне прототипирования
У гэтым прыкладзе я выкарыстоўваю Adobe Experience Design (XD), каб стварыць просты пстрычка-Thru. Першы крок у гэтым працэсе быў выбраць памер iPhone 6, які ўзгодненых памеры Illustrator інтэрфейсу
Калі інтэрфейс адкрыты, я выбраў інструмент палатна і націснуў адзін раз на мантажным стале, каб дадаць яшчэ адзін мантажную вобласць. Я тады назваў іх «Home» і «Месца», падбіраў кожную мантажную вобласць і імпартаваны PNG малюнак з Illustrator ў палатне.
Для стварэння «гарачых кропак» для мышы-Thru, я намаляваў прастакутнік над кнопкай Даследаваць на галоўным экране і ўсталюйце яго запаўненне і памежныя значэння ніводнаму, адмяніўшы гэтыя ўласцівасці ў панэлі уласцівасцяў. Я зрабіў тое ж самае з дапамогай кнопкі Назад на старонцы Адрасоў.
Каб дадаць інтэрактыўнасці, я выбраў рэжым прататыпа, а затым націснуў на «гарачую кропку». Затым я вывалак Страла называецца провад - да старонкі Адрасоў і ўсталяваць мэта пераходу на месцах, рух да зрух налева, паслабленне, каб палегчыць выхад і працягласць пераходу да .6 секундам.
Я паўтарыў гэты крок з кропкай доступу на старонцы Адрасоў. Адзінае адрозненне было пераход быў усталяваны Націсніце правым. Калі я націснуў на кнопку Play, я праверыў мой прататып.
04 з 04
Як выкарыстоўваць панэль Экспарт актываў у Adobe Illustrator CC 2015
Разам з Save для экранаў меню Adobe таксама дададзеная новая панэль - Asset Export - што выдаліць велізарную кропку болі ў працоўным працэсе UI Design.
Кропка болю абразкі. Illustrator вялікае дадатак вектарнай графікі, але на выхадзе, скажам, 10 абразкоў, на старонцы з 40 або 50 з іх патрабуецца кожны захоўваецца як SVG малюнка. Гэта непазбежна патрабуецца больш часу, чым звычайна, дзякуючы паслядоўным паездкам на панэль SVG. Гэтая кропка болю цяпер рэч мінулага.
Гэтая новая панэль можа быць знойдзена ў Window> Asset Экспарт. Пры адкрыцці панэлі, абярыце актыў, які вы хочаце пераўтварыць у SVG ці іншы фармат і перацягнуць на панэль. Калі вы адпусціце кнопку мышы эскіз актыву дадаецца да панэлі. Назва актыву. Трымаеце перацягвання аб'ектаў у панэль, пакуль вы не скончыце.
Пазначце кожны элемент у галіне налады экспарту, або выбраць іх усё, з Shift, і націснуўшы на кожным з іх. Выберыце фармат - у гэтым прыкладзе я абраў SVG- і націсніце кнопку Экспарт. Выбраныя элементы будуць выводзіцца як SVG-файлаў у тым жа месцы, што і файл Illustrator.
Там, дзе ўвесь гэты працэс становіцца яшчэ больш акуратна, вам не трэба выкарыстоўваць панэль Asset Export. Калі націснуць на кнопку Захаваць для кнопкі экраны ў ніжняй частцы панэлі адкрыецца дыялогавае акно.
З іншага боку, вы можаце націснуць на ўкладку Актывы ў Захаваць для панэлі Экраны для доступу да панэлі Asset Export. Напрыклад, калі ў вас ёсць уласны значок на працоўным полі вы можаце адкрыць панэль Asset Экспарт у дыялогавым акне Захаваць экран для і перацягнуць гэты элемент у панэлі Asset Export.