Illustrator CC 2015 dan foydalaning ekranlar xususiyati

Illustrator bilan ishlashning bir jihati bor bo'lsa, men uni yoqtirmayman, chunki u chiziqli tasvirni san'at va vebda svg tasvirlariga aylantiradi. Export> Export As menyusidan foydalanib, shafqatsiz halol bo'lish uchun, Veb uchun Saqlash xususiyati - Export> Vebni Saqlash - foydalanishning aniqligi oson emas edi.

.svg formatiga chizishni aylantirish juda qo'rqinchli dialog oynasini ochdi, bu ish uchun yangi bo'lgan odamlar uchun ko'plab .svg formatlari mavjudligi haqida gapirmaslik uchun ko'pgina variantlarning bosh karıştırıcıları taqdim etildi va ulardan faqat bittasi formati. Ushbu ishlov berish uchun ishlatilganingizdan keyin bu katta ish emas edi, ammo o'rganishning egri chiziqli edi.

Buning natijasi 2016 yil iyun oyida Illustrator CC 2015 bilan tanishtirilgan Export Export Screens xususiyati - Export> Export for Screens - va Asset Export panelida o'zgardi. Ushbu "Qanday qilib" men sizga ikkalasini qanday ishlatishni ko'rsataman Xususiyatlari. Qani boshladik.

01dan 04gacha

Adobe Illustrator CC 2015-da ekranlar uchun eksportga qanday kirish mumkin

Eksport uchun ekranlar dialog oynasini ishlatib, chiqdi jadvallarini chiqaring.

Illustrator 88 dan keyin Illustrator foydalanuvchisi bo'lib, Illustratorni veb-va mobil interfeys va loyihalar uchun jiddiy dizayn vositasi sifatida ko'rib chiqishni istamasligimni tushunaman deb o'ylayman.

Versiyalar 2008 yilda CS4 versiyasiga kiritilganida, bu ilova uchun qiziqarli qo'shimcha deb o'yladim. Endi men Illustrator-da saqlanadigan Veb uchun Saqlash xususiyatini birinchi marta ko'rganimda, men uni qiziqarli topdim, lekin Adobe Fireworks'dagi bir xil xususiyatni Illustratorga qaraganda veb-grafikalar bilan ko'proq moslashtirilgan deb topdim.

Dizaynerlik uchun dastlabki mobilizatsiyaning yondashuvi va mobil loyihalar uchun SVG tasvirlarga bo'lgan ishonchning oshib borishi bilan Illustrator SVG uchun "ketishim" vositasiga aylandi va UI Design ish oqimida muhim ahamiyatga ega bo'ldi.

Shunday bo'lsa-da, agar men aktivlarni mobil qurilmalarga eksport qilmoqchi bo'lsam, Sketch 3 va Photoshop CC 2015 tanlov vositalarim. Illustrator ro'yxatni 2016 yil iyun oyida "Ekranlar uchun eksport" menyusi bilan chinakamiga kiritdi.

Yuqoridagi misolda iPhone uchun mo'ljallangan ikkita ekran bor va ular "Uy" va "Joylar" deb nomlangan alohida taxtachalarda. Ularni chiqarish uchun Men Fayl> eksport> Ekranlarni eksport-ni tanladim. Ekranlar uchun eksport dialog oynasi ochiladi.

02/04

Displeylarni eksport uchun dialog oynasidan qanday foydalanish kerak

Screens for Screens (Screens for Screens) (Screens for Screens) muloqot oynasida bir nechta oddiy tanlov orqali iOS va Android uchun ishlaydigan rasm chizmalar.

Muloqot oynasi ochilganda, tanlangan har bir satrni bosing. So'ngra tasdiq belgisi bilan o'ynaydi. Bundan tashqari, uni tanlash va o'zgartirish uchun ustunning nomini ikki marta bosishingiz mumkin. Bu sizning ustki panellaringiz "Artboard 1" va "Artboard 2" deb nomlangan yoki yo'qligini bilish uchun yaxshi narsa.

Tanlash maydonida sizda uchta variant mavjud:

Mintaqga eksport qilish, chiqish uchun maqsad papkani tanlab olish imkonini beradi. Standart papka Illustrator hujjatining joriy joylashuvi bo'ladi.

Formatlar "sehrli" bo'ladi. Siz uchta belgini ko'rasiz - iOS. Android va Gear. Birinchi ikkitasi o'zini tushuntirib beradi. Tishli belgisi, ro'yxatdagi fayl formatlarining qanday qilib optimallashtirilishini nazorat qilish imkonini beruvchi Format Sozlamalarini ochadi. Ushbu sozlamalar "formatga mos" va o'zgarishlarni kiritganingizdan so'ng Sozlamalarni Saqlash-ni bosing va ushbu o'zgarishlar chiqadigan formatlarga qo'llaniladi.

IOS yoki Android-ni tanlagandan so'ng, ro'yxat ushbu platformada mavjud bo'lgan barcha rezolyutsiyalarni o'z ichiga oladi. IOS ro'yxatida Retina displeyining miqdoriy omillari ko'rsatiladi va Android tanlovida deyarli har bir Android qurilmasiga ega bo'lgan .75x dan 4xgacha bo'lgan farqlar bo'ladi.

Agar olib tashlashni xohlagan format ko'rsatilsa, "x" ni bosing. Agar siz qo'shishni xohlasangiz, + Skala qo'shish tugmasini bosing.

Tugatsangiz, "Tasvirni eksport qilish" tugmachasini bosing va jarayon tugagandan so'ng sizni ko'rsatadigan harakat paneli ko'rsatiladi.

03/04

Adobe Illustrator CC 2015 dan ekranlarni eksport qilish fayllaridan foydalanish.

Illustrator dasturidan olingan fayllar Adobe ilovalar dizayni kabi biron-bir prototipli ilovaga osongina qo'shilishi mumkin.

Displeyni eksport qilish natijalarini ko'rib chiqqandan so'ng, Illustrator har ekranning yassilangan versiyasini chiqarganini bilib olasiz. Masalan, Illustrator tomonidan barcha bitlarni va qismlarni tasvir sifatida eksport qilishni kutganingizda, bu yuzada, biroz zaif ko'rinadi.

Agar siz orqaga qadam bosgan bo'lsangiz va bu haqda bir lahzada o'ylab ko'rsangiz, bu aslida kerak bo'lgan narsadir, chunki siz bu chiqishni Adobe ilovalar dizayni , Principleformac, Atomic.io , UXPin yoki boshqa prototipli ilovalar kabi prototipli dasturda ishlatishingiz mumkin.

Ushbu misolda men oddiy sekin urish yaratish uchun Adobe Developer Design (XD) dan foydalanmoqdaman. Ushbu jarayonning birinchi bosqichi Illustrator interfeysining o'lchamlariga mos keladigan iPhone 6 o'lchamini tanlash edi

Xabar interfeysi ochilganda, Men Artboard vositasini tanladim va boshqa kartonni qo'shish uchun kartonga bir marta bosgan edim. Keyin ularni "Uy" va "Joylar" deb nomladim, har bir satrni tanladim va PNG tasvirni Illustratordan ish stoliga import qildim.

Tugmachalar uchun "hotspots" yaratish uchun menyuda "Boshlash" tugmachasi bo'ylab to'rtburchakka chizilgan va uning xususiyatlari va panellari qiymatlarini "Xususiyatlar" panelida o'chirib tashlab qo'ymaslik kerak. Joylar sahifasida Orqaga tugmasi bilan bir xil narsani qildim.

Interaktivani qo'shish uchun Prototip rejimini tanladim va "hotspot" ni tanladim. So'ngra, o'qni - simli deb nomlangan o'qni - Joylar sahifasiga sudrab qo'ydim va "O'tish" manzilini "Joylarda", chapga surish uchun harakatni, qulaylashtirishni o'chirish uchun va 6 soniyasiga o'tish muddatini belgilab qo'ydim.

Ushbu qadamni Joylar sahifasida hotspot bilan takrorladim. O'tish faqat o'ng tomonga o'tish uchun o'rnatildi. Men Play tugmasini bosganimda prototipimni sinab ko'rdim.

04/04

Adobe Illustrator CC 2015-da eksport aktivlari panelidan qanday foydalanish kerak

Maxsus piktogrammalar SVG fayllari sifatida Asset Export panelidan foydalanib eksport qilinadi.

Screens to Save (Screens for Screens) menyusi bilan bir qatorda Adobe shuningdek, UI Design ish oqimida katta og'riq nuqtasini olib tashlagan yangi Asset Export - panelini ham qo'shdi.

Og'riq nuqtasi belgilar edi. Illustrator ajoyib vektor chizilganli dasturdir, lekin chiqishda, masalan, 10 ta tumov, 40 yoki 50 tasi har birining SVG tasviri sifatida saqlangan sahifada aytaylik. SVG paneliga navbatdagi safarlar tufayli muqarrar ravishda odatdagidan ko'proq vaqt kerak bo'ldi. Bu og'riq nuqtasi endi o'tmishdagi narsadir.

Ushbu yangi panelni Window> Asset Export-da topishingiz mumkin. Panel ochilganda SVG yoki boshqa formatga aylantirish kerakli obyektni tanlang va panelga torting. Sichqoncha qo'yib yuborilganda, obyektning kichkina qismi panelga qo'shiladi. Aktivni nomlang. Siz tugatmaguncha moslamalarni panelga surib qo'ying.

Har bir narsani tanlang Shift tugmachasini bosib, har birini bosib, Xaritalarni eksport qilish sohasida tanlang yoki ularni tanlang. Sizning formatingizni tanlang - bu misolda SVG-ni tanladim va Export tugmasini bosing. Tanlangan ma'lumotlar SVG fayllari sifatida Illustrator fayli bilan bir xil joyga chiqariladi.

Bu jarayon butunlay nosoz bo'lgan joyda Asset Export panelidan foydalanish shart emas. Panelning pastki qismidagi Screens to Save ni bosganingizda dialog oynasi ochiladi.

Aksincha, Asset Export paneliga kirish uchun Saqlash uchun Saqlash panelidagi Aktivlar yorlig'ini bosishingiz mumkin. Misol uchun, agar sizda ish stoli ustidagi maxsus belgi mavjud bo'lsa, Saqlash ekranida dialog oynasidagi Asset Export panelini oching va ushbu elementni Asset Export paneliga olib keling.