Illustrator CC 2015 экспортын дэлгэцийн онцлогийг ашиглах

Зураачтай хамтран ажиллах нэг хүчин зүйл бол би үнэхээр татагдахгүй байгаа нь гар зургийн дүрийг хөдөлгөөнт эсвэл вебсайтад хөрвүүлэх явдал юм. Экспортын> Экспортын As цэсийг ашиглан, шударга байхын тулд Save For Web - Экспорт> Вэбийн Алсаас - ашиглахад яг тохиромжгүй юм.

.svg форматыг хөрвүүлэх нь .svg форматыг нээсэн айдсын харилцан ярианы хайрцгийг онгойлгож, энэ ажлын урсгалын шинэ хүмүүст зориулж хэд хэдэн .svg форматтай байсан бөгөөд тэдгээрийн зөвхөн нэг нь зөв байсан формат. Та энэ ажлын урсгалыг ашиглаж эхлэхэд энэ нь тийм ч том асуудал биш байсан ч суралцах муруй нь огцом байсан.

Энэ нь 2016 оны зургадугаар сард зураач CC 2015- т танилцуулсан Хөрөнгийн Экспортын Экспортын Экспортын> Экспортын Экспортын Хувилбаруудын Шинжлэх Ухаан Экспортын Хувьсагчийн хамтаар өөрчлөгдсөн юм. Энэ "Би хэрхэн яаж ашиглах вэ" боломжууд. Эхэлцгээе.

01 - 04

Adobe Illustrator CC 2015-ийн дэлгэцэнд хэрхэн хандах вэ?

Экспортын for Screens харилцах цонхыг ашиглан гаралтын самбарууд.

Illustrator 88-ээс хойш Illustrator-ыг вэбсайт болон хөдөлгөөнт интерфэйс болон төслүүдэд зориулж дизайныг маш ноцтой дизайн гэж үзэхийг хүсэхгүй байгаагаа би ойлгож байна.

2008 оны CS4 хувилбарт урлагийн бүтээлүүд танилцуулагдахад энэ нь програмын сонирхолтой нэмэлт зүйл гэж би бодсон. Эхний удаа татагдсан "Save For Web" зургийг Illustrator дээрээс харахад дахин сонирхолтой санагдсан боловч Adobe Fireworks дээрх зургийг Illustrator-аас илүү веб графиктай харьцуулсан байна.

Загварын гар утасны анхны хандлага болон гар утасны төслүүдэд зориулж SVG зураг дээр түшиглэн улам өргөжихийн хажуугаар Illustrator нь SVG-д зориулсан миний "явах" хэрэгсэл болсон бөгөөд UI дизайн ажлын урсгалыг чухал болгосон.

Гэсэн хэдий ч хэрэв би гар утсаараа экспортлох шаардлагатай бол Sketch 3 болон Photoshop CC 2015 нь миний сонголтыг хийх хэрэгсэл юм. Illustrator нь 2016 оны зургадугаар сард жагсаалтад багтсан "Export for Screens" цэстэй.

Дээрх жишээн дээр, би iPhone-д зориулж хоёр дэлгэцтэй дэлгэцтэй бөгөөд "Home", "Places" нэртэй Artboards-д байдаг. Үүнийг гарган авахын тулд Файл> Экспорт> Экспортын Экспортыг сонгов. Дэлгэцийн цонхны харилцах цонх нээгдэнэ.

04 дүгээр сарын 02

Дэлгэцийн харилцан ярианы хэлэлцүүлгийн цонхыг хэрхэн ашиглах талаар

Save for Screens цонхны цонхны цөөн хэдэн энгийн сонголтыг хийснээр iOS болон Android-ийн гар зургийн дизайнууд.

Уг харилцах цонх гарч ирвэл сонгож авах урлагийн самбар бүр дээр дар. Энэ нь дараа нь шалгах тэмдэглэгээ хийх болно. Та мөн үүнийг сонгохын тулд artboard-ийн нэрийг хоёр дахин дарж өөрчилж болно. Artboard 1, Artboard 2 гэх мэт нэртэй уран бүтээлүүд таныг юу ч хэлэхгүй байгаа нь энэ юм.

Сонгох талбарт гурван сонголт байна:

Экспортын To хэсэг нь гаралтын хувьд хүрэх газраа сонгох боломжийг олгоно. Анхдагч фолдер нь Illustrator баримт бичгийн одоогийн байршил болно.

Формат бол "ид шид" болдог. Та гурван дүрс байдаг - iOS-тэй байна. Android болон Gear. Эхний хоёр нь өөрөө тайлбарлаж байна. Gear icon нь Format форматыг нээнэ. Энэ нь форматын формат бүрийг хэрхэн оновчтой болгохыг хянах боломжийг танд олгоно. Эдгээр тохиргоонууд нь "формат тодорхойлогдсон" бөгөөд та өөрчлөлтүүдийг хийсний дараа Save Settings товчийг дарж, эдгээр өөрчлөлтүүд нь гаралтын форматад ашиглагдах болно.

Та iOS эсвэл Андройдыг сонгохдоо тухайн платформ дээрх бүх л шийдвэрүүдийг оруулан өөрчлөх болно. IOS жагсаалт нь Retina дэлгэцийн өргөтгөсөн хүчин зүйлсийг харуулах бөгөөд Android сонголт нь Android-ийн бүх төхөөрөмжийг байрлуулах .75x -аас 4х хүртэл хэмжээтэй байна.

Хэрэв та устгахыг хүсч байгаа формат байгаа бол "x" дээр дарна уу. Хэрвээ та нэмж оруулахыг хүсвэл Add Scale товчийг дарна уу.

Бүтээгдэхүүн дуусах үед Экспортын зургийн самбар дээр товшоод процесс дуусахад таныг progress bar дээр харуулах болно.

03 - 04

Adobe Illustrator CC 2015-ийн дэлгэцийн файлуудыг ашиглах нь.

Illustrator-аас гаргасан файлууд нь Adobe Experience Design зэрэг олон прототипинг програмууд дээр хялбархан нэмж болно.

Дэлгэцэнд зориулсан Экспортын үр дүнг харах үед зураач нь дэлгэц тус бүрийг хавтгайруулсан хувилбарыг олох болно. Хэрэв та Illustrator бүх зургийг бүхэлд нь зурсан гэж үзсэн бол гадаргуу дээр энэ нь арай сул байна.

Хэрэв та буцаж ороод бодоод үзээрэй бол энэ нь үнэхээр яг хэрэгтэй зүйл юм. Учир нь та энэ програмыг Adobe Experience Design , Principleformac, Atomic.io , UXPin эсвэл бусад протокол хэрэглэдэг програм

Энэ жишээнд, Adobe Experience Design (XD) програмыг ашиглан энгийн товшилтоор үүсгэж байна. Үйл явцын эхний алхам нь зураачийн интерфэйсийн хэмжээстэй таарах iPhone 6 хэмжээтэй сонголтыг сонгох явдал юм

Интерфейс нээгдэх үед би Artboard хэрэгслийг сонгож, нэг самбар дээр нэмж нэг artboard нэмэх боллоо. Дараа нь би тэднийг "Нүүр хуудас", "Газрууд" гэж нэрлэсэн бөгөөд уран зургийн самбар бүрийг сонгож, png зургийг Illustrator-ыг artboard руу оруулсан.

Хуудасны үр дүнгийн хувьд "халуун цэгүүд" үүсгэхийн тулд би эх дэлгэц дээрх Таблетийн товч дээр тэгш өнцөгт зурж, дүүргэлтийн болон хилийн утгыг Properties panel-д эдгээр шинжүүдийг хасах замаар none-т тавьсан. Би Places хуудас дээрх Буцах товчтой ижил зүйлийг хийсэн.

Интерактив байдлыг нэмэхийн тулд Prototype горимыг сонгоод дараа нь "hotspot" дээр дарна. Дараа нь сумтай утсаар утасдаж - Places хуудас руу шилжиж, Шилжилтийн цэгийг байрлуулах газрууд, Түлхүүрээс түлхэх хөдөлгөөнийг тохируулах, сулрахыг багасгах, 6 секундэд шилжих хугацаа.

Би энэ алхамыг Places хуудас дээр халуун цэгээр давтан явууллаа. Ганц ялгаа нь Түлхүүрийг зөв чиглэлд шилжүүлсэн байсан. Play товч дээр дарахад би загвараа туршлаа.

04 - 04

Adobe Illustrator CC 2015 дээр Экспортын хөрөнгийн самбарыг хэрхэн ашиглах талаар

Гаалийн дүрсүүдийг SVG файл болгон Экспортын Экспортын самбар ашиглан экспорт хийж болно.

Save for Screens цэстэй хамт Adobe мөн шинэ бүрэлдэхүүн хэсэг болох Asset Export - UI Design workflow-д асар их өвдөлтийг арилгасан.

Өвдөлт нь дүрс байсан. Illustrator бол маш сайн вектор зургийн аппликейшн юм. Харин гар аргаар, 10 дүрс, 40 эсвэл 50 хуудас бүхий хуудсан дээр SVG зураг болгон хадгалахыг шаарддаг. Энэ нь SVG самбарт дараалсан аялалын ачаар ердийнхөөсөө илүү цаг хугацаа шаардагдана. Энэ өвдөлтийн цэг бол өнгөрсөн үеийн зүйл юм.

Энэ шинэ цонхыг Window> Asset Export дээрээс олж болно. Уг самбар нээгдэх үед SVG рүү хөрвүүлэхийг хүсч буй хөрөнгийг сонгоод самбар руу чирнэ үү. Та хулганыг суллахдаа хөрөнгийн жижигрүүлэлтийг самбарт нэмнэ. Хөрөнгийг нэрлэнэ үү. Та дууссан бол объектыг самбарт чирж байх хэрэгтэй.

Экспортын тохируулгын талбар бүрийг сонгоно уу, эсвэл бүгдийг нь Shift товчийг дарж, бүгдийг нь сонгоно уу. Өөрийн форматаа сонгох - Энэ жишээнд SVG-г сонгож Экспортын товчлуур дээр дарна уу. Сонгосон зүйлс нь SVG файлууд болох Illustrator файлтай ижил байрлалд байрлана.

Энэ бүх үйл явц бүр илүү сайжирч байгаа бол Asset Export panel-ийг ашиглах шаардлагагүй юм. Хэрвээ та самбарны доод талд Save for Screens товчлуурыг дарвал харилцах цонх нээгдэнэ.

Үүний эсрэгээр, та Хөрөнгийн Экспортын самбар руу хандахын тулд Save for Screen дэлгэц дэх Assets таб дээр дарж болно. Жишээ нь, хэрэв та урлан зургийн самбар дээр өөрчлөн дүрслэлтэй бол Save for Screen харилцах цонхны Хөрөнгийн Экспортын самбарыг нээж, актив Экспортын самбар руу тэр зүйлийг чирж болно.