Ishni optimallashtirish Hammaga salom! Bugun men dasturning imkoniyatlari tavsifini yaratishga harakat qilaman

Adobe Illustrator
, fleshning imkoniyatlariga muvofiq, bu cho'tkadan dasturlarning global tahlili emas, balki men ushbu dasturda o'zim uchun kashf etgan ba'zi foydali fokuslar tavsifi bo'ladi. Men hamma narsani bitta postga joylashtirish uchun tibbiyot olamidan ma'lumotlarni to'pladim. Men darhol tan olamanki, men rasmdagi qolgan vikorist yogodan tashqari (men hamma narsani chirog'dan bo'yab qo'yganman) o'zimning ajoyib rassom emasligimni tan olaman. Ko'pchilik illyustratorning yig'ilishi mumkinligidan shikoyat qiladi, ammo intuitiv ravishda u har doim ham aqlli emas..

Qo'shiq dunyosi men uchun yaxshi, chunki miltillagandan so'ng bu dastur yig'iladi.

Ale smut, uni tashlamang, lekin uni tirik saqlang.

Va juda ko'p qiyinchiliklardan keyin men ilgari hech narsasiz qanday qilib yurganman degan fikr paydo bo'ladi!

Oh, men Illustrator'dan nima oldim va o'zim uchun Flashda yo'q nimani topdim?

1. Men kerak bo'lganda, eng oddiy narsalardan boshlayman. Chiroq bilan qoziq atrofida narsalarni harakatlantirishga harakat qiling. Ilgari

Deko vositasi

, Ale yogo tozalandi, ehtimol keraksiz sabablarga ko'ra hurmat qilindi.

Ular qo'llaringizdan foydalanish qiziqarliroq ekanligiga ishonishdi. Illustrator-da bu funksiya: Effekt - Buzmoq va O'zgartirish - O'zgartirish

Hammasi oddiy va sodda, qiymatlar (ob'ektlar orasidagi masofa, nusxalar soni) sozlamalarda o'rnatiladi.

2. Zig-zag Bu yanada sodda, ammo chiroyli narsa. Chiroq qo'lda chizishni talab qiladiganga o'xshaydi, illyustratorda o'ng tomonda ikkinchi bor.

3. Ob'ektlarning deformatsiyasi (Warp) Flash-da bunday narsa yo'q.
Quyidagi rasmda ko'milgan:

7. Ofset yo'li

Fleshli to'ldirishni kengaytirish funksiyasiga ega, bu piktogramma satrlariga ta'sir qilmaydi, lekin Illustrator ko'rinishini o'zgartirishni talab qilmaydi.

8. Cho'tkalar (badiiy cho'tka, naqsh cho'tkasi, soch cho'tkasi)
Men dumbali qisqaroq bolalarni ko'rmayapman:

9.Texture Brush

Shuningdek, illyustratorda men yozgan va paydo bo'lganlar haqida ko'plab teksturali elementlar mavjud. yangi versiyalar flesh -.

Adobe Animate cho'tkasi tanlovi juda oqsoqlanganligi ta'kidlandi. Aks buni qil :(10. Bu shunchaki hiyla ekanligiga ishonchim komil emas, lekin kulgili ismdan bir tiyin olmoqchiman Blob

Cho'tkasi

.

Vikoriston penzelidan qabul qilingan bo'lsa ham, asboblar panelida joylashgan.

Ko'p tuzatish bo'lishi mumkin, favqulodda vaziyat uchun ko'proq pul to'lashim kerak.

Ushbu afzalliklarni so'z bilan tushuntirish, aniqrog'i ularni bir marta sinab ko'rish muhimdir.

10.Split to Grid Yana bir ajoyib narsa - Split to Grid (Object-Path-Split to Grid) funksiyasi. Shaklni tekis bo'laklarga kesish imkonini beradi. Bu bizga nimani bildiradi? To'g'ri - boylarning tepasida derazalari bor. Menga kelsak, bu rasm chizish uchun ajoyib narsa, masalan, kichik landshaftlar;)

Illustrator-da taqdim etilgan yana bir ajoyib vosita birinchi marta chiqarilish arafasida. Ushbu yordam bilan, masalan, yog'och to'qimalarini yaratishingiz mumkin:).

12. Ko'chirish (o'ngga - O'zgartirish - Ko'chirish)

Ob'ektni vazifaga tayinlang, o'rnidan turing. Tanlanganda, siz darhol tanlangan ob'ektning gorizontal/vertikal ravishda kerakli joyiga joylashtiriladigan nusxasini yaratishingiz mumkin. Flashning oldingi versiyasida ushbu funktsiyani qo'shadigan plagin mavjud edi. Afsuski, uning nomi esimda yo'q. Illustrator-da choksiz naqshlar yaratish oson (

Ob'ekt - Naqsh - Yaratish

).

Vicor gradient yaratish uchun ishlatiladi.

Siz, masalan, rasmda bo'lgani kabi, tosh o'tishlarini yaratishingiz mumkin.

Men Vikoristni tez-tez ishlataman deb aytmayman, aks holda menga kerak bo'lishi mumkin. O'ylaymanki, siz uni noqulay fon tasvirlarini yaratish uchun ishlatishingiz mumkin.

Ob'ektlarni klonlash uchun vositadan ham foydalanishingiz mumkin.

Biz ikkita ob'ektni bir tomonga joylashtiramiz va qirralarning sonini (aralashtirish uchun ob'ektlar soni) tanlab, Blend Options-ni o'rnatamiz. 16. Shaklni yaratish vositasi.Primitivlar bilan ishlash uchun juda qulay narsa.Chiroq, ma'lum bo'lishicha, unchalik qulay emas.

Segmentlarni o'chirish uchun Alt tugmasini bosing va ko'rinadigan segmentlarni bosing.

Biz ko'rgan ko'plab uchastkalar - ulanishlar ustida ayiqni cho'zayotgandek.

Qo'shimcha - avtomatik ravishda kesish, ulash va hokazolarga yordam beradigan vosita.

shaklni ko'rish. Men kabi, men juda do'stona emasman, o'zimni tez-tez tanbeh qilaman Qurish

Shakl

Asbob. (o'rnatish joylari) 18. Maxsus asboblar paneli

O'zingizga kerak bo'lmaganlarni tashlab, keraklilarini tanlab, o'zingizning asboblar panelini yaratishingiz mumkin. Chiroqda tahrirlash joylari va sahnaning o'zi ().
Sahna 1,2,3.
) aralash qirralar va siz ularni aralashtirishingiz kerak (Shift+F2). Illustrator-da siz ularning barchasini ko'zingiz oldida sozlashingiz mumkin. Agar sizda o'sha kichik narsa uchun bir nechta variant mavjud bo'lsa, bu juda yaxshi, shunda barcha variantlar siz uni tenglashtirishingizdan oldin bo'ladi.
19.Yordam uchun izometriya Grafik uslublar

Va u qoladi - grafik uslublar yordamida 1 marta bosishda (aniqrog'i, 3 marta bosishda, bizda 3 tomon bor;) buzilishsiz yaratilgan izometriya (
Grafik uslublar

Agar ikkilanmasam, keyingi safar imzolayman. Illustrator-da flesh-dan ko'proq - siz ob'ektni ramzdan saqlashingiz mumkin va shuning uchun bu belgi hech qanday muammosiz flesh-dan o'tkazilishi mumkin (darvoqe, flash.ai faylini oching.
Import - bosqichga import qilish

Illustratordagi belgi fleshkadagi kabi kuchga ega.

Va nihoyat, men Illustrator-da yozaman, mening fikrimcha, u fleshni qurbon qiladi.
Ha, ha, ha, ha.

quyish vositasi (

Bo'yoq paqir
Keling, qoziqdan bir oz ichamiz:
- konturning eng past nuqtasi ko'rinadi, yoy chizilgan;
- yoyning pastki qismini qoplaydigan to'g'ri chiziqni torting va uni tortib oling

Malyunok 2 - 1) aylana chizish;

2) gradient;
3) nuqtani o'chirish
3) Men to'g'ri ichakni bo'yab, uning nusxasini yarataman
- bitta tekis kesuvchi;

- boshqa tik o'simlik, quyuq kulrang 4) Yulduzdan Trikutnikni torting, o'zgarishlar sonini belgilang - 3

Malyunok 3 - 1) to'g'ri yorug'lik;

2) to'g'ri qorong'i;

3) uchburchak 5) Yordam uchun mushukni bo'yash Qalam va oddiy raqamlar
Malyunok 4 – 1) bosh;

2) bo'yin;

3) tana;
4) oyoqlar;

5) quyruq

Va endi o'zimGOLOVNIY

moment
Rasmlarni to'plarga bo'ling (jonlantiriladiganlar bir xil to'pda), o'q quyidagicha: Malyunok 5 - barcha rasmlar (qizil belgi muhim qatlamlar)
Endi hamma narsa saqlangan.

Men pulni tejash uchun qilingan tuzatishlardan hayratdaman

Malyunok 6 - Saqlash
Va endi hujum bosqichi. Yopiq Adobe Illustrator va After Effects.

After Effects-ga import qiling

Fayl - Import - Fayl - saqlash faylimizni tanlang

Illustrator. Biz Illustrator-dan to'plarni import qilishni tanlaymiz, agar biz tasvirlarni taqdim qilsak, rasmni birlashtirilgan sharlar bilan chiqaramiz, lekin bu shart emas.
Malyunok 7 - Tarkibi sifatida import qilish Hammasi import qilingan. Va endi bizda nima borligini ko'rib chiqaylik.

Kompozitsiyani ikki marta bosing

, Shunday qilib, to'plar paydo bo'ldi va biz to'plarni silkitdik (agar biz hamma narsani to'g'ri otgan bo'lsak, to'plar to'plami bo'lar edi).
Keling, buni rad qilaylik, div.
Malyunok 8 - Ochiq kompozitsiya
Va endi biz bugun nima uchun keldik - Animatsiya.
Animatsiya ichida

- Y).
Biz shunchaki dog'ni olib, uni kerakli joyga olib boramiz. Natijada, u shunday ko'rinadi..
Malyunok 9 - Pan asbobi va qatlamlar
Xo'sh, endi biz animatsiya uchun to'plarga o'tamiz.

Keling, o'q haqida gapiraylik.

Keling, ro'yxatni ko'rib chiqaylik, biz buni yubileyda bosishimizni bilamiz.

Shunday qilib, biz qalampir parchasini nol soniyaga joylashtirdik.

Animatsiya taxminan 2 soniya davom etadi.
Xo'sh, o'qni hali ham sozlash kerak (jami 3 ta nuqta qo'yamiz)
Ikkinchi Render navbatiga qo'shish
Render paneli ochiladi va Chiqish modulida (ikki marta bosish) chiqish formatini tanlang.

Men *.movni oldim

Malyunok 12 - Render
RENDER tugmasini bosing va natijani tanlang (faqat yo'lni kiritishni unutmang).

Ana xolos.

Sizda qo'shimcha animatsiya bilan jonlanmoqchi bo'lgan bir yoki ikkita piktogramma mavjud.

Nima uchun boshlaysiz?

Aytaylik, sizda SVG fayllari, Illustrator CC va After Effects CC bor yoki yechim sizga bog‘liq.

Ushbu maqolada men SVG faylni qanday qilib osongina jonlantirishingiz mumkinligini, shu jumladan Illustrator-da SVG faylni tayyorlash va After Effects CC-ga import qilishni namoyish qilmoqchiman.

Shuningdek, yogoni Shape Layers-ga qanday o'zgartirishingiz va ruhni qo'shishingiz mumkinligini tushuntiraman.

Va, mayli, eksport va ko'rsatish haqida gapiraylik. Ishning yakuniy natijasi. Endi oxirgi qismga o'tamiz - tasvirni jonlantirishni o'rganish.

SVG faylingizni Adobe Illustrator CC da ochishdan boshlaylik.

Men Week Of Icons’da bepul bo‘lgan kichik avtomobil belgisini jonlantiryapman. Faylni ochgandan so'ng, biz barcha ob'ektlarni to'plarga ajratishimiz va ajratishimiz kerak. Siz uni qo'lda yoki vikoristovati orqali yaratishingiz mumkin Qatlamlarga chiqarish (ketma-ketlik) jarayonni tezlashtirish uchun. Birinchidan, faylni After Effects-ga import qiling, uni Illustrator formatida saqlashingiz kerak. Qimmatli vaqtni behuda sarflamaslik uchun biz qatlamlarga chiqarish (ketma-ketlik) yordamida ob'ektlarni guruhdan ajratishimiz mumkin. Faylingizni After Effects CC-ga import qiling va tartibga soling Endi hamma narsa After Effects CC ga import qilishga tayyor. Keling, vikoristaga kalitlarni olamiz Ctrl+I (Windows) yoki boshqa Buyruq+I(Mac) dialog oynasini ishga tushirish uchun.

Shuningdek, biz tayyorlagan Illustrator CC faylini tanlang va bosing

Import. Tanlangan fayl nomi bilan kichik dialog oynasi paydo bo'ladi. Tanlang Tarkibi nomi ostida ochiladigan ro'yxatdan Import turi Ko'proq Shved usuli.

Endi, agar siz yangi toʻplarni koʻrsangiz, ularni Illustrator CC toʻplari ustidagi panelning yuqori qismiga torting, soʻngra hidga taʼsir qilmasligi uchun Illustrator CC toʻplarini olib tashlang.

Agar bunga ehtiyoj bo'lmasa, teri to'piga boshqa nom berish va/yoki uni rang sifatida belgilash muhimdir.

Quyida ko'rsatilgan misolda yozuvlarning rangi ko'proq yoki kamroq ular ifodalagan to'plarni to'ldirishni aks ettiradi. Turli xil nomlar, ranglar, harflar va moslashtirilgan shakldagi qatlamlarni etiketlash juda amaliy. Siz uni qo'lda yoki vikoristovati orqali yaratishingiz mumkin Parametrlarni sozlash uchun vikory tugmalaridan foydalaning Ctrl+K/Buyruq+K

Kompozitsiya > Kompozitsiya sozlamalari… Kompozitsiya sozlamalarida biz kenglik, balandlik, kadr tezligi va davomiyligini (kenglik, balandlik, kadr tezligi va davomiyligi) tanlashimiz kerak..

Ayni paytda hamma narsa ishga tayyordek tuyuladi, ammo yana bir vazifani bajarish kerak.

Biz qo'shiq aytayotgan to'plarni guruhlashimiz kerak, shunda ularning qo'llari biz nazorat qila oladigan asosiy to'p bilan sinxronlashtiriladi.

Bu usul deyiladi

Otaning to'pini to'p sifatida ko'rsatish uchun Pick Whip-dan foydalaning.

Magistral, albatta, kechiriladi.

Men uni mashinaning orqa tomoniga qo'ydim va pastki chap tepada mos yozuvlar nuqtasini yaratdim. Vikoristovuyuchi Pick Whip, men otamning tanasi to'pini taniyman.

Oldingi dizayn o'rash effektini berdi, bu avtomobil ishlab chiqarish momentini yanada realroq qildi. Bodymovin Lottie mobil kutubxonasiga ulangan.

P.S.

Siz mening Illustrator CC va After Effects CC fayllarimni topishingiz mumkin.

Bepul yuklab olish mumkin bo'lgan piktogramma to'plami.

Bugungi Adobe Illustrator darsi unchalik ajoyib emas.

Shunday qilib, birinchi raqamni kerakli to'plarga ko'chiring.

Va Go!!! yozish uchun ishlatiladigan yakuniy to'plarga etib borganingizda, shunchaki doirani o'chiring va avval harfni kerakli to'pga ko'chiring. Bu animatsiya haqida. Quyonlar bu erda yo'qolmaydi. Siz to'plarga har qanday qo'lda nom berishingiz mumkin, lekin xuddi molt kabi :) Va shuningdek, ishni tugatgandan so'ng, belgini bosib, barcha to'plarni qayta yoqishni unutmang. Eksport sozlamalari sozlangan oynada Export As: AI Layers to SWF Frames ni oʻrnatishingiz kerak.

Ushbu parametrning o'zi illyustrator to'plarini animatsiya ramkalariga aylantiradi. Keyin Kengaytirilgan-ni bosing. Qo'shimcha parametrlar ochiladi.

Bu erda siz kvadrat tezligini o'rnatishingiz kerak Frame Rate. Menda soniyada 12 kadr bor.

Looping belgilash katakchasi animatsiyaning tsiklik xususiyatini ko'rsatadi.

Har safar video ochilganda, u qoziq bilan boshlanadi.

I variant Qatlam tartibi: Pastdan yuqoriga panelning pastki qismidagi illyustrator sharlarini ochadi. Biz animatsiyamizni shunday yaratdik. Chiqish bizning animatsiyamizdan olingan flesh-video. Endi siz Adobe Illustrator-da oddiy animatsiya bilan ishlash birinchi qarashda ko'rinadigan darajada qiyin emasligini ko'rasiz. Yangi videolar yoki interaktiv qo'shimchalar yaratish uchun vikoristdan foydalanish hali ham yaxshiroqdir Veb-sahifalar ma'lum bir grafik tasvirlardan foydalanish to'g'risida oz miqdordagi ma'lumotlarni uzatadi, ularni optimallashtirish yordamida erishish mumkin. Tasvirni optimallashtirishda kerakli o'lchamlarni saqlash bilan birga minimal fayl hajmini ta'minlaydigan o'zgartirishni ko'rib chiqing bu yigitga

tasvir yorqinligi, biz grafik tasvirlardagi ranglar sonini o'zgartirishdan, mavjud va maxsus fayl formatlarini tanlashdan va ma'lum tasvir qismlari uchun siqish sozlamalarini optimallashtirishdan oldin erishishimiz mumkin. Illustrator-da optimallashtirish jarayoni turli xil istiqbolli usullarda samarali ishlashini ta'minlash uchun o'rnatilgan tasvirni optimallashtirish vositalari mavjud. Oldinga ko'rinish Bu optimallashtirilgan tasvirlarning real vaqtda qanday paydo bo'lishi haqida aniqroq ma'lumot olish imkonini beradi, bu esa optimallashtirish natijasini baholash va sozlash ehtiyojlarini aniqlashga yordam beradi. Va siz uni to'g'ridan-to'g'ri yaratilgan tasvirlar sifatida optimallashtirishingiz mumkin

Illustrator dasturlari , va boshqalar, masalan, veb-saytga joylashtiriladigan fotosuratlar. Optimallashtirish parametrlari oynada o'rnatiladi Veb uchun saqlash(Web Saving) menyusidan xuddi shu buyruqni bosish orqali

• Fayl(Fayl) Dastur to'rtta istiqbolli rejimdan birini qo'llashni taklif qiladi, ammo optimallashtirish samaradorligini baholash uchun ikkitasi eng mos keladi:
• 2-yuqoriga(ikkita variant) ■ sozlamalarga qarab asl va optimallashtirilgan tasvirni bir soatlik ko'rib chiqish (1-rasm);

4-yuqoriga (qaysi variant bo'lishidan qat'iy nazar) ushbu rejimda ko'rish maydoni chiqish tasvirini va uchta optimallashtirilgan versiyani ko'rsatish uchun to'rtta oynaga (kichik 2) bo'linadi: birinchi versiya optimallashtirish qiymatlari sozlamalari asosida yaratiladi va ikkitasi boshqa mavjud. nozik sozlash optimallashtirish imkoniyatlari. Huquqbuzarlik rejimlari qidiruv uchun bir soatni tejash imkonini beradi

Illustrator nafaqat GIF, JPG, PNG-8 va PNG-24, balki SWF va SVG formatlarida veb-grafikalarni optimallashtirish imkonini beradi. Kam sonli ranglarga ega indekslangan tasvirlar GIF formatida saqlanadi. Ko'p rangli va yuqori ohangli tasvirlarni, fotosuratlarni va rangga to'yingan grafikalarni, masalan, gradient to'ldirishni saqlash uchun JPG formati qo'llaniladi.

Aniq bo'limlari bo'lgan ko'p rangli tasvirlar uchun PNG formati qo'llaniladi, bu sizga indekslangan va ko'p rangli tasvirlarni saqlashga imkon beradi, PNG-8 formatida esa optimallashtirilgan tasvirning maksimal mumkin bo'lgan ranglar soni 256 , va PNG-24 formatida tasvirlar millionlab ranglarga ega bo'lishi mumkin va shunga o'xshash

JPEG formati . PNG-24-ning JPEG-dan ustunligi shundaki, PNG-24 formatidagi tasvirlarni optimallashtirish uchun ishlatiladigan siqish usuli yorqinlikni yo'qotmaydi, bu esa fayl hajmining oshishiga olib keladi. SVG va SWF formatlari grafik, matn va interaktiv komponentlarni qabul qiladi va ularni optimallashtirish ham mumkin. Keling, tasvirni optimallashtirishning aniq misolini ko'rib chiqaylik. Aytaylik, Illustrator dasturi sayt uchun logotipni ajratgan (3-rasm), lekin uni asosan AI formati uchun saqlab qolgan. Ularni Internet uchun optimallashtirishga urinish hech qanday yaxshi narsaga olib kelmaydi, chunki bu holda tasvir avtomatik ravishda kesiladi, bu deformatsiya natijasida olib tashlangan harfning to'g'ri pozitsiyasini ta'minlamaydi (4 va 5-rasm). Shunday qilib, buyruq yordamida logotipni PSD formatiga eksport qilishga harakat qilaylik Fayl=>Eksport (Fayl=>Eksport) Yaratilgan tasvir hajmi 143 KB ga aylanadi. PSD faylini oching va uni buyruq bilan oching

File=>Web uchun saqlash

Har qanday veb-sahifalarni loyihalashda ajralmas o'ziga xos element tugmalar joylashuvining grafik elementlari hisoblanadi.

Ularsiz sahifani ko'rsatishning iloji yo'q. Tugma bilan bo'yash maxsus janrga aylandi va Illustrator sizga eng aqlli variantlarni yaratishga imkon beradi. Misol uchun, to'rli ob'ektlar yoki niqoblar bilan qoplangan tugmalar odatdagidan ko'ra ancha samaraliroq ko'rinadi. Keling, Illustrator dasturida yumaloq qavariq tugmani yaratish variantini ko'rib chiqaylik. Qoziq yaqinidagi vektor ob'ektini mos rangga bo'yash (9-rasm) va uni to'r buyrug'iga aylantiring. Object=>Gradient Mesh yaratish (Object=>Gradient mash yaratish), bir nechta satr va ustunlarni va roʻyxatda Tashqi ko'rinish Variantni tanlash orqali (Ko'rish). Markazga Ajratish(Oldindan o'tish) 60 ga teng (10-rasm).

Asbobni tanlang To'g'ridan-to'g'ri tanlash Va tugun nuqtalarini ko'rgan ob'ektning yuqori chap burchagini bosing (11-rasm). Oq markazning rangini panelda tanlash orqali oq rangga o'zgartiringі Swatchlar(12-rasm). Asbobni oling Ellips (Elips), sichqoncha belgisini avval yaratilgan qoziqning o'rtasiga qo'ying va tugmachalarni bosing Alt Shift, yangi uzukni eskisining ustiga cho'zing, shunda u har ikki tomondan eskisidan 1-2 pikselga kattaroq ko'rinadi.

Uning qora kordonini oling ( Qon tomir) 1-2 piksel kengligida va uni qizildan oqgacha radial gradient bilan to'ldiring (13-rasm). Yaratilgan vektor ob'ektini 1-2 piksel o'ngga va pastga torting, so'ngra tasvirni ko'rmasdan, sichqonchaning o'ng tugmasi bilan yangisini bosing. kontekst menyusi jamoani tanlang Tartibga solish=>Orqaga yuborish, natijada ikkita bir xil to'p tanlanadi. Keyin to'pning nusxasida o'q ko'rinadi va kontekst menyusidan buyruqni tanlash orqali 180 ° ga aylantiriladi. Transform=>Burish

Transform = aylantirish. SVG va SWF formatlari grafik, matn va interaktiv komponentlarni qabul qiladi va ularni optimallashtirish ham mumkin. Rasmda ko'rsatilganidek, biz xuddi shu tugmani bo'shatamiz. 16. Shuni esda tutingki, bitta loyiha uchun bir xil turdagi tugmachalarni bitta faylda turli xil sharlarda saqlash ancha oson, bu bu erda ko'rsatilgan. Endi teri tugmachasining optimallashtirilgan variantlarini saqlash kerak.

Birinchidan, pastki to'pni ko'rinmas holga keltiring - bu holda yuqori to'pdagi tugma saqlanadi. Jamoa tanlang).

(Fayl => Veb uchun saqlash), tugmani optimallashtirish parametrlarini sozlang, masalan, rasmda ko'rsatilganidek. SVG va SWF formatlari grafik, matn va interaktiv komponentlarni qabul qiladi va ularni optimallashtirish ham mumkin. 17, tugmani bosing Saqlash(Saqlash) va fayl nomini kiriting. Saqlangan tugma rasmda ko'rsatilgan. 18. Endi pastki to'pning ko'rinishini aylantiring va yuqori qismini ko'rinmas holga keltiring va shunga o'xshash boshqa tugmani unga boshqa nom ko'rsatib saqlang.

Natija rasmda ko'rsatilgan.

19. Endi tugmalarni veb-sahifada chiroyli ko'rinishi uchun qayta sozlash va ularni alohida sahifaga joylashtirish vaqti keldi (20-rasm). Ushbu ilovada natija Primer2.html fayli va ikkita grafik tasvir papkasidagi tasvirlar (papka

Bunday elementlar orasida rolloverlar (inglizcha roll over - ko'chirish, ag'darish) eng mashhur bo'ldi - sichqonchaning harakatlanishi bilan tashqi ko'rinishini o'zgartiradigan elementlar.

Odatiy aylanishlarga misollar animatsion tugmalarni o'z ichiga oladi.

Rolloverlar ko'pincha saytda boshqa navigatsiya elementlarini yaratishda ishlatiladi.

Darhaqiqat, har qanday rollover bitta emas, balki bir nechta (bir nechtagacha) tasvirlarga ega, ularning har biri ma'lum bir turni ko'rsatadi. Bosqichlarni hurmat qilish uchun asosiy qadamlar qo'yiladi: Oddiy - baland pozitsiya, Ustida - sichqoncha kursorini elementga yo'naltirish va Pastga - kursorni unga qaratib, sichqonchaning chap tugmasini bosish. Nazariy jihatdan, sichqonchaning chap tugmasi bosilgandan so'ng bo'shatilganda bosing, tugma bo'shatilgandan so'ng yuqoriga, faol zonadan tashqariga chiqqanda Out kabi harakatlar.

Biroq, amalda, elementni dastlabki uch yoki ikki bosqichda o'zgartirish tez-tez talab qilinadi. Tugma bilan bo'yash maxsus janrga aylandi va Illustrator sizga eng aqlli variantlarni yaratishga imkon beradi. Ob'ekt => To'rt qator va o'nta ustunni belgilab, gradient to'rini yarating (25-rasm).

Rectocutnik-ning boshqa nusxasini faollashtiring va taxminan rasmda ko'rsatilganidek, gradient to'ldirishni sozlang. Tartibga solish=>Orqaga yuborish 26. Gradient ob'ektini to'rning ustiga qo'ying, gradient ob'ektining shaffofligini taxminan 80% ga va o'lchamini taxminan 1 pikselga o'zgartiring, natijada bo'rtiq effekti minimal bo'ladi. jamoani tanlang Va keyin yozuvni ob'ektlar ustiga o'rang. Tartibga solish=>Orqaga yuborish Yakuniy ko'rinish oq rangga ega bo'lib, u Oddiy holatga o'xshaydi (27-rasm), so'ngra aylanma rangini o'zgartirganda rang, masalan, sichqoncha belgisini ko'rsatganingizda yashil rangga o'zgaradi (rasm). Over) va sichqoncha tugmalari bosilganda qora rangga (pastga).

Palitraga hurmat bilan qayting . Ushbu bosqichda unda faqat bitta to'p bor. Buyruqni staking orqali ushbu to'pning ikkita nusxasini oling Panel menyusidan (Dublikat to'p). , palitrada uchta to'p bor (28-rasm). Keyin to'pning birinchi nusxasining rangini yashil rangga, ikkinchisida esa qora rangga o'zgartiring (29-rasm). Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi. Tezkor buyruq yordamida saqlangan aktsiyalardan yaratilgan tasvirni PSD formatida eksport qiling (Fayl => Eksport) va tanlash rang modeli

RGB (30-rasm). Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi. Yaratilgan PSD faylni ImageReady dasturida oching (kichik 31 va 32). Tartibga solish=>Orqaga yuborish Buyruqni tanlash orqali sharlar asosida ramkalar yarating Qatlamlardan ramkalar yasash(To'plardan ramkalar yaratish) palitrasi menyusidan (Fayl => Eksport) va tanlash Animatsiya . Animatsiya oynasi rasmdagi kabi ko'rinadi. 33. Panelda bo'lganda Rollovers (Fayl => Eksport) va tanlash Boshidan boshlab bitta Oddiy lager yaratiladi. Keyin derazada paneldagi induktsiya holatiga mos keladigan ramkaga qarang avtomatik ravishda to'pni ko'radi Rollovers (Fayl => Eksport) va tanlash 1-qavat nusxasi Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi.(34-rasm). avtomatik ravishda to'pni ko'radi Palitraga o'ting Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi. va tugmani bosing

Rollover holatini yarating

(Ajratish joyini yaratish) rasm. 35, paydo bo'lishimdan oldin nima olib kelaman? Davlat ustidan palitrada(36-rasm). Xuddi shu tarzda lager yarating.

Ilovaning natijasi Primer4.html faylini va tasvirlar papkasida bir qator grafik tasvirlarni chiqarish edi.

Guruch. 40. Rollover elementli brauzer oynasi

SVG aylantirish Mashhurlik kasb etayotgan SVG (Scalable Vector Graphics) formati XML standartiga asoslanadi, shuningdek, turli xil interaktiv elementlarni yaratishga, rolloverlarni ko'rishga imkon beradi, ammo amalda u butunlay amalga oshiriladi Bu ular uchun boshqacha. E'tibor bering, agar tegishli HTML kodi to'liq avtomatik tarzda yaratilgan bo'lsa, klassik o'rniga interaktiv SVG rolloverlarini yaratish bilim talab qiladi.

kino javascript va ob'ektga yo'naltirilgan dasturlashning asosiy tamoyillari haqida tushuncha. SVG ob'ektlari bilan ishlash uchun maxsus palitrasi mavjud SVG interaktivligi, chunki qo'shimcha buyruqlar uchun javob berish qiyin

Oyna=>SVG interaktivligi

(View=>SVG interaktivligi) rasm. 41. Keling, interaktiv tugmachada aylanma yaratishning ushbu variantini ko'rib chiqamiz, matn rangi sichqonchani olib kelganda qora rangdan ko'k rangga o'zgaradi va sichqoncha faol zonadan tashqariga chiqqanda yana qora rangga o'zgaradi. Dumaloq qirralari bo'lgan to'rtburchaklar tugmachani yarating va u uchun shunga o'xshash gradient to'ldirishni tanlang, masalan, rasmda ko'rsatilganidek. 42. Paneldagi tugmaning ko'rinishini sozlang Tugma bilan bo'yash maxsus janrga aylandi va Illustrator sizga eng aqlli variantlarni yaratishga imkon beradi. Shaffoflik Keling, Illustrator dasturida yumaloq qavariq tugmani yaratish variantini ko'rib chiqaylik. Qoziq yaqinidagi vektor ob'ektini mos rangga bo'yash (9-rasm) va uni to'r buyrug'iga aylantiring. Object=>Gradient Mesh yaratish(Ko'rinish) ushbu ilovada parametr qiymatlari (Object=>Gradient mash yaratish), bir nechta satr va ustunlarni va roʻyxatda Shaffoflik

(Opacity) 50% ga o'rnatiladi.

Tugmaning nusxasini yarating, uni quyuq yashil rang bilan to'ldiring (kichik 43), so'ngra buyruq yordamida uni tarmoqli ob'ektga o'tkazing. Yaratilgan vektor ob'ektini 1-2 piksel o'ngga va pastga torting, so'ngra tasvirni ko'rmasdan, sichqonchaning o'ng tugmasi bilan yangisini bosing.(Ob'ekt => Gradient mash yaratish), to'rt qator va o'nta elementni va ro'yxatda belgilang (Markazga) va qiymatlarni o'rnatish(Sozlash) 100 ga teng. To'r ob'ekti bilan to'pning shaffofligini taxminan 40% ga kamaytiring (44-rasm). To'r ob'ektini gradientning tepasiga qo'ying va tugma rasmda ko'rsatiladi. 45.

Ushbu jarayonni qayta ishlash JavaScript protseduralarini o'tkazadi, shuning uchun siz ushbu protseduralar tavsifi bilan faylni kiritishingiz kerak. U Events.js deb ataladi va Adobe Illustrator tomonidan o'rnatilganda Diskda Sample Files\Sample Art\SVG\SVG papkasida saqlanadi. va ob'ektga yo'naltirilgan dasturlashning asosiy tamoyillari haqida tushuncha. Events.js fayliga ulanish uchun buyruqdan foydalaning JavaScript fayllari(48-rasm). Keyin tugmani bosishingiz kerak Qo'shish (Qo'shish) va qattiq diskdagi kerakli faylni toping. Dalada qachon paydo bo'lishim kerak?

URL

(49-rasm), tugmani bosing (Markazga) va qiymatlarni o'rnatish Bajarildi (Tizimga kirish). Guruch. 48. JavaScript Files buyrug'ini tanlang va ob'ektga yo'naltirilgan dasturlashning asosiy tamoyillari haqida tushuncha. Ushbu izdan so'ng, ob'ekt uchun nishonning reaktsiyasini aniqlang . Maydon yaqinidagi obyekt matniga qarang Tadbir (Markazga) va qiymatlarni o'rnatish(Podiya) palitrasi toifani tanlang sichqoncha ustida (Tizimga kirish). Guruch. 48. JavaScript Files buyrug'ini tanlang va ob'ektga yo'naltirilgan dasturlashning asosiy tamoyillari haqida tushuncha. elemColor(evt, "Matn", "#3333FF") Bu sichqonchaning ob'ekt ustida joylashganligini anglatadi Bu rang ko'k rangga o'zgaradi (50-rasm).

Sichqoncha faol zonadan chiqqandan keyin matn rangi qora rangga o'zgarishi uchun siz yana bir qadam yaratishingiz kerak

mouseout maydonda uni tanlang. Keyin qatorga matn kiriting elementColor(evt, "Matn", "#000000") Bu qora rangga keltiriladi (51-rasm). Guruch. 51. Matn obyekti uchun SVG Interaktivlik panelining qoldiq ko'rinishi

Buyruq yordamida aylantirilgan ijodlarni SVG fayli sifatida saqlang

Fayl=>Saqlash

(Fayl => Tartibga solish=>Orqaga yuborish Fayl turi formatі SVG, va keyin SVG fayli uchun saqlash opsiyalarini shaklda ko'rsatilganidek sozlang. 52. Saqlagandan so'ng, SVG kengaytmalari bo'lgan faqat bitta fayl chiqariladi, klassik rollover holatidagi kabi ikkita emas, bu holda Primer5.svg fayli (Primer5 papkasi) chiqariladi..

Biroq, aylantirish samarali ishlashi uchun siz JavaScript protseduralari tavsifi bilan Events.js faylini SVG fayli bo'lgan jildga qo'shimcha ravishda nusxalashingiz kerak.

JavaScript protseduralari tavsifi bilan Events.js faylini qo'shing, buyruqni o'rnating U Events.js deb ataladi va Adobe Illustrator tomonidan o'rnatilganda Diskda Sample Files\Sample Art\SVG\SVG papkasida saqlanadi.(JavaScript fayllari) palitrasidan va ob'ektga yo'naltirilgan dasturlashning asosiy tamoyillari haqida tushuncha., tugmasini bosing JavaScript fayllari(Qo'shish) qattiq diskingizga kerakli faylni kiriting va tugmani bosing (Qo'shish) va qattiq diskdagi kerakli faylni toping. Dalada qachon paydo bo'lishim kerak?

Ob'ekt uchun nishonga reaktsiyani aniqlang 52. Saqlagandan so'ng, SVG kengaytmalari bo'lgan faqat bitta fayl chiqariladi, klassik rollover holatidagi kabi ikkita emas, bu holda Primer5.svg fayli (Primer5 papkasi) chiqariladi.. (Markazga) va qiymatlarni o'rnatish Ob'ektga qarang (Tizimga kirish). Guruch. 48. JavaScript Files buyrug'ini tanlang va ob'ektga yo'naltirilgan dasturlashning asosiy tamoyillari haqida tushuncha. Ushbu izdan so'ng, ob'ekt uchun nishonning reaktsiyasini aniqlang ., dalada Quyidagi qatorga matn kiriting elemShow(evt, "Matn4"); 52. Saqlagandan so'ng, SVG kengaytmalari bo'lgan faqat bitta fayl chiqariladi, klassik rollover holatidagi kabi ikkita emas, bu holda Primer5.svg fayli (Primer5 papkasi) chiqariladi. elemShow (evt, "Path2") .і Natijada, sichqoncha bir soat davomida ob'ekt ustida harakat qiladi xira ko'rinadigan narsalarga aylanadi toifani tanlang Matn 4

Yo'l 2 maydonda uni tanlang. Keyin qatorga matn kiriting E'tibor bering, agar siz yuqoriga ko'tarilganingizda qog'oz paydo bo'lishi mumkin bo'lsa, unda aybdorlik ";" belgisi orqali ko'rsatilishi kerak. (Markazga) va qiymatlarni o'rnatish Keyin quyida shunga o'xshash operatsiyani bajaring , matningizni kiritganingizdan so'ng, bu ob'ektlarni qo'lga kiritish muhimligini anglatadi (57-rasm). Natijani buyruq yordamida SVG fayl sifatida saqlang (Fayl=>Saqlash) maydonni tanlash orqali fayl nomini kiriting SVG formatini tanlang, so'ngra SVG faylini saqlash uchun opsiyalarni rasmda ko'rsatilganidek sozlang. 58. Saqlagandan so'ng Primer6.svg fayli (Primer6 papkasi) olinadi. Events.js faylini ushbu fayl bilan jildga nusxalashni unutmang. .і Natijada, sichqoncha bir soat davomida ob'ekt ustida harakat qiladi Agar siz yaratish faylini ishga tushirsangiz, rasmda ko'rsatilgan natijani ko'rasiz. 52. Saqlagandan so'ng, SVG kengaytmalari bo'lgan faqat bitta fayl chiqariladi, klassik rollover holatidagi kabi ikkita emas, bu holda Primer5.svg fayli (Primer5 papkasi) chiqariladi..

59. Tse mayzhe kerak bo'lganlar.

Bizning rejalarimizga kiritilmagan yagona narsa - bu ob'ektlarning birinchi ko'rinishi.

4 ta Yo'l Attraksionning 2-soati. Bu kichkina narsadan xalos bo'lish uchun ob'ekt qayerda xafa bo'lganini ko'ring va ular uchun biror narsa yarating elemHide(evt, "Matn4"); elemHide(evt, "Path2") hozirgi paytda

yuklash Tartibga solish=>Orqaga yuborish yuzsiz narsadan bitta to'p hosil bo'ladi (62-rasm). Agar siz rasmni to'g'ridan-to'g'ri PSD formatiga eksport qilsangiz, siz hech narsa olmaysiz, faqat bitta to'p bo'ladi va, albatta, ImageReady dasturida PSD faylini ochganingizda, faqat bitta to'p bo'ladi. Shuning uchun, ob'ektlarni turli xil to'plarga joylashtirish kerak. Buni turli yo'llar bilan qilish mumkin - eng oson yo'li to'pni darhol ko'rishdir 1-qavat Agar siz rasmni to'g'ridan-to'g'ri PSD formatiga eksport qilsangiz, siz hech narsa olmaysiz, faqat bitta to'p bo'ladi va, albatta, ImageReady dasturida PSD faylini ochganingizda, faqat bitta to'p bo'ladi. Qatlamlar panelida va buyruqni tezda ishlating Agar siz rasmni to'g'ridan-to'g'ri PSD formatiga eksport qilsangiz, siz hech narsa olmaysiz, faqat bitta to'p bo'ladi va, albatta, ImageReady dasturida PSD faylini ochganingizda, faqat bitta to'p bo'ladi. Layerga chiqaring Agar siz rasmni to'g'ridan-to'g'ri PSD formatiga eksport qilsangiz, siz hech narsa olmaysiz, faqat bitta to'p bo'ladi va, albatta, ImageReady dasturida PSD faylini ochganingizda, faqat bitta to'p bo'ladi.(Zilnit u shari). . Ob'ektlardan sizning to'pingizga terining harakati natijasi, ammo to'pda hid paydo bo'ladi

. Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi., palitrada uchta to'p bor (28-rasm). Keyin barcha to'plarni qo'lda Qatlamlar palitrasining yuqori qismiga sudrab o'tishingiz kerak bo'ladi, shunda hidlar to'pning tepasida qoladi. Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi., keyin esa bo'sh bo'lgan to'p

faqat qarang (63-rasm). palitrada Buyruq yordamida rasmni PSD formatiga eksport qiling

(Fayl => Eksport) shaklda ko'rsatilgandek sozlamalar bilan. 64. ImageReady dasturi yordamida PSD fayl yarating (kichik 65 va 66).

Panel menyusini oching Tartibga solish=>Orqaga yuborish(To'plardan ramkalar yarating). Natijada har biri sizning to'pingizga mos keladigan beshta ramka va palitra oynasi bo'ladi Men uni birdan rasmdagi kabi ko'raman. 67. Swatchlar Shundan so'ng, yaratilgan ramkalar uchun terining sezgirligini o'rnating, barcha ramkalar uchun 0,2 s sezgirlik o'rnatiladi. Agar siz rasmni to'g'ridan-to'g'ri PSD formatiga eksport qilsangiz, siz hech narsa olmaysiz, faqat bitta to'p bo'ladi va, albatta, ImageReady dasturida PSD faylini ochganingizda, faqat bitta to'p bo'ladi. Va keyin qo'shimcha buyruqlar uchun animatsiyani optimallashtirish bilan saqlang Agar siz rasmni to'g'ridan-to'g'ri PSD formatiga eksport qilsangiz, siz hech narsa olmaysiz, faqat bitta to'p bo'ladi va, albatta, ImageReady dasturida PSD faylini ochganingizda, faqat bitta to'p bo'ladi.(Fayl=>Optimallashtirish bilan saqlash).

Natijani rasmda ko'rishingiz mumkin.

68. .(Fayl => Eksport). Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi. Yaratilgan PSD faylni ImageReady dasturida oching (kichik 73).

Esda tutingki, to'plar oynasida Illustrator dasturida yaratilgan barcha sharlar (kichik 74) va to'plar ko'rsatiladi. Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi. Faqat bitta ramka bo'ladi. , palitrada uchta to'p bor (28-rasm). Panel menyusini faollashtiring Natijada, ag'darish uchun kerakli tayyorgarlik olib tashlanadi. palitraning yuqori o'ng burchagidagi qora o'qni bosish va buyruqni tanlash orqali Swatchlar(To'plardan ramkalar yaratish) ushbu ilovada natijada beshta ramka va palitra oynasi yaratiladi palitrada Kelajakda men xuddi rasmga o'xshayman. Keyin qatorga matn kiriting 75. Tugmachani bosib ushlab barcha kadrlarga o'ting , va kadrlarning oʻrtacha chastotasini oʻrnating, bunda har bir kadr uchun joriy soat 0,2 s olinadi. Keyin faylni optimallashtirish buyrug'i yordamida saqlang

(Fayl=>Optimallashtirish bilan saqlash), uni roʻyxatga joylashtirish xilma-xillik Faqat rasmlar (*.gif) . Animatsiyani ko'proq bashorat qilish mumkin. Yaratilgan vektor ob'ektini 1-2 piksel o'ngga va pastga torting, so'ngra tasvirni ko'rmasdan, sichqonchaning o'ng tugmasi bilan yangisini bosing. 76.

Eng ta'sirli ko'rinadigan narsa - siljish emas, balki aralashtirilgan ob'ektlar hajmining silliq o'zgarishi. . Misol uchun, siz allaqachon yaratilgan aralash o'tishni tezlashtirishingiz mumkin. , palitrada uchta to'p bor (28-rasm). Bunday holda, aralash o'tishning teri elementi uchun qo'shni to'plarni yaratgandan so'ng, tugmachalarni bosib, barcha ob'ektlarni birma-bir joylashtiring. palitrada Gorizontal tekislash markazi

(Gorizontal markazga tekshirish) va

Vertikal tekislash markazi