Caurspīdīgu GIF formātu programmā Adobe Illustrator veic šādi. Dodieties uz Fails> Saglabāt priekš Tīmeklis un ierīces (Alt+Ctrl+Shift+S). Atvērtajā logā laukā Optimizēts faila formāts vispirms jādodas uz cilni Attēla izmērs(Attēla izmērs). Fakts ir tāds, ka pēc noklusējuma visa lapa nonāk optimizācijas logā, un tas parasti nav nepieciešams. Tāpēc cilnē Attēla lielums noņemiet atzīmi no izvēles rūtiņas Klips uz Artboard(Apgriezt līdz lapas izmēram) un noklikšķiniet uz pogas Lietot.
Pēc tam formātu atlases sarakstā atlasiet GIF un atzīmējiet izvēles rūtiņu Caurspīdīgums.
Pēc tam mēs definēsim, kuras krāsas būs caurspīdīgas. Visas attēlā esošās krāsas ir ietvertas cilnē Krāsu tabula(Krāsu tabula) un tiek parādīti kā krāsaini kvadrāti. Atlasiet rīku rīkjoslā loga kreisajā pusē Pilinātājs(pipete).
Ir divi veidi, kā noteikt krāsas. Vienkāršākais veids ir norādīt krāsu ar pilinātāju tieši uz attēla - pēc tam krāsa krāsu tabulā tiks izcelta ar tumšu triepienu. Ja precīzi zināt, kādai krāsai jābūt caurspīdīgai, varat to atlasīt tieši krāsu tabulā, noklikšķinot uz atbilstošā krāsainā kvadrāta. Un pirmajā un otrajā gadījumā, ja jums ir jāizvēlas vairākas krāsas, jums jāstrādā ar nospiestu taustiņu Shift (vai Ctrl). Pēc krāsas izvēles jums ir jāinstruē programma, lai tā būtu caurspīdīga. Lai to izdarītu, jums jānoklikšķina uz ikonas Kartē atlasītās krāsas uz caurspīdīgu(Pievienojiet atlasītās krāsas caurspīdīgumam). Attēlā šī poga ir apvilkta, un sarkanā krāsa ir atlasīta kā caurspīdīga. Attēlā parādīsies caurspīdīgs laukums, un krāsu tabulas kvadrāts mainīs savu izskatu - daļa no tā kļūs par baltu trīsstūri. Lai atceltu atlasīto krāsu, tā ir jāatlasa krāsu tabulā un pēc tam vēlreiz noklikšķiniet uz ikonas Kartē atlasītās krāsas uz caurspīdīgu.
Daži vārdi par caurspīdīguma iestatīšanas veidu. Par to ir atbildīga nolaižamā izvēlne. Norādiet Transparency Dither algoritmu, krievu valodā - Caurspīdības simulācijas algoritms (Zīm. zemāk). Var izdarīt četras izvēles: bez caurspīdīguma, bez algoritma, difūzijas caurspīdīguma sārtuma, izkliedētais algoritms, šablona caurspīdīguma izkliedēšanas algoritms, uz rakstiem balstīts algoritms un trokšņu caurspīdīguma dublikāts, uz troksni balstīts algoritms. Difūzā algoritma režīmā slīdnis kļūst aktīvs Summa(Summa), kas ļauj mainīt difūzijas vērtību. Ko likt lietā? Atkarībā no mērķa un attēla. Es neizmantoju šo opciju un vienmēr atstāju to uz noklusējuma - No Transparency Dither.
Noklikšķiniet uz Saglabāt - caurspīdīgs gifs gatavs. Darbs tika veikts Adobe Illustrator versijā CS4 (v. 14), bet visas darbības un īsinājumtaustiņi attiecas uz iepriekšējo CS3 versiju (v. 13).
Šodien mēs neesam gluži parasti Adobe apmācība Ilustrators. Jo šoreiz taisīsim nevis statisku bildi, bet īstu animāciju. Iedomājies izrādās ar ar Adobe Var arī zīmēt karikatūras programmā Illustrator :)
Un tam mums vispār nekas nav vajadzīgs. Kompetenta slāņu organizēšana un gala darba eksportēšana swf formātā, kur katrs slānis tiek pārveidots par animācijas kadru. Šodienas apmācībā mēs zīmēsim retro filmas stila atpakaļskaitīšanas animāciju. Izvadei vajadzētu būt zibatmiņas video ar šādu atpakaļskaitīšanu.
Pirmā lieta, kas jādara, ir uzzīmēt visus nepieciešamos elementus turpmākajai animācijai. Lai to izdarītu, atsevišķā dokumentā izveidoju divas filmas kadra pozīcijas, atskaites apli, kas tika sagriezts atsevišķos sektoros, faktūru un vertikālu skrāpējumu, lai pievienotu senatnes efektu, kā arī visus skaitļus un uzrakstus. .
Kad visas mūsu multfilmas daļas ir gatavas, varat sākt veidot pašu animāciju. Ērtības labad vislabāk to izdarīt jaunā dokumentā. Šajā gadījumā slāņi spēlēs animācijas kadru lomu. Un pašā pirmajā slānī jums vienkārši jānokopē filmas lentes rāmis. Novietojiet to darba zonas vidū.
Tagad izveidojiet otru slāni un nokopējiet tajā plēves sloksni, kurā caurumi gar malām ir nobīdīti. Tam arī jābūt centrētam.
No šiem diviem slāņiem jau var iegūt kustīgas filmas animāciju. Bet vēlāk mums vajag daudz vairāk slāņu. Tāpēc atlasiet pirmos divus slāņus, dodieties uz paneļa opcijām un izveidojiet slāņu kopiju.
Tāpat mums ir jāuzkrāj 12 filmas kinofilmu slāņi.
Tagad mums ir vesela virkne slāņu, un tie visi ir redzami. Tādā ziņā, ka augšējie slāņi aizsprosto apakšējos, kas nav īpaši ērti darbam. Tāpēc dažus slāņus var izslēgt, noklikšķinot uz ikonas ar aci pa kreisi no slāņa nosaukuma. Lai izslēgtu vai ieslēgtu visus slāņus vienlaikus, turiet nospiestu taustiņu Alt, vienlaikus noklikšķinot uz acs ikonas. Ieslēdzot un izslēdzot slāņus, jūs varat redzēt tieši to, kas atrodas noteiktā mūsu nākotnes animācijas kadrā. Un tagad, lai mēs pievienotu nelielu trīci filmas kustībai, mums ir nedaudz jāpārvieto iegūtie kadri dažādos virzienos. Lai to izdarītu, iekļaujiet tikai slāni, ar kuru plānojat strādāt Šis brīdis un pēc tam pabīdiet rāmi par pāris pikseļiem uz abām pusēm.
Kad esat izgājis cauri visiem slāņiem un pievienojis nelielu nobīdi, varat sākt veidot kustīga apļa animāciju. Lai to izdarītu, no dokumenta ar karikatūras daļām nokopējiet apli, kas sastāv no sektoriem, un novietojiet to uz pirmā slāņa virs filmas lentes rāmja.
Ja noņemsiet loka atlasi, tas izskatīsies kā viens vesels. Tas ir tieši tas, kas mums vajadzīgs.
Bet, tā kā tas sastāv no atsevišķiem sektoriem, jūs varat izveidot animāciju ļoti ātri un vienkārši, mainot to krāsu. Lai to izdarītu, kopējiet šo apli uz otro slāni un padariet pirmo sektoru gaišāku. Jūs atceraties, ka mūsu filma kustības laikā satricina, tāpēc nav nepieciešams precīzi novietot apli kadra centrā. Novietojiet to virs acs.
Līdzīgi jums ir jākopē aplis uz katru nākamo slāni, vienlaikus krāsojot ar gaišāku krāsu par vienu sektoru vairāk nekā iepriekšējā reizē. Kopā šie 12 slāņi veido plēvi ar pildījuma apli.
Tālāk mums jāpievieno tekstūra mūsu slāņiem. Ieslēdziet pirmo slāni un nokopējiet tur esošo tekstūru no oriģinālā faila ar rezerves daļām.
Pēc tam pēc kārtas ieslēdziet nākamos slāņus un kopējiet tur to pašu tekstūru. Lai tas katrā kadrā izskatītos savādāk, vienkārši pagrieziet to par 90 grādiem. Kā jūs, iespējams, uzminējāt, mums ir jāpievieno tekstūra visiem 12 kadriem.
Ja jau ir apnicis kopēt, tad varu iepriecināt - palicis pavisam maz. Grūtākā daļa ir beigusies. Atliek pievienot vertikālas skrāpējumus un gandrīz visu. Lai to izdarītu, vēlreiz nokopējiet oriģinālo skrāpējumu un ievietojiet to patvaļīgā vietā vairākos slāņos. Manā gadījumā skrāpējumi parādās tikai divos slāņos.
Tagad, kad galvenā cilpa ar filmas animāciju ir gatava, atliek pievienot skaitļus. Tā kā mēs skaitām no 3 līdz 1 plus vārds Go, mums ir nepieciešams vēl vairāk slāņu. Nevis 12, bet 48. Lai to izdarītu, ir jāizveido vēl trīs gatavo slāņu kopijas ar filmas animāciju.
Un tad viss ir vienkārši. Ieslēdziet pašu pirmo slāni un ielieciet tur ciparu trīs.
Pēc tam šis numurs ir jākopē nākamajos slāņos, līdz beidzas apļa animācija. Kad jūs nonākat pie nākamās slāņu kopijas, kur aplis atkal tiks pilnībā aizpildīts, jums jau jāievieto numurs divi. Tādā pašā veidā kopējiet numuru viens vajadzīgajos slāņos. Kad esat nonācis līdz pēdējiem slāņiem Go !!! parakstam, vienkārši izdzēsiet apli pirms paraksta kopēšanas vajadzīgajā slānī.
Tas viss ar animāciju. Šeit galvenais ir neapjukt. Var dot slāņiem kādus ērtus nosaukumus, bet man kaut kā bija slinkums :) Un tomēr, kad pabeigsi darbu, noteikti ieslēdz visus slāņus atpakaļ, noklikšķinot uz acs ikonas.
Logā ar eksportēšanas iestatījumiem noteikti iestatiet Eksportēt kā: AI slāņus uz SWF Frames. Šī opcija pārvērš ilustratoru slāņus animācijas kadros. Pēc tam noklikšķiniet uz pogas Papildu.
Atvērsies papildu iestatījumi... Šeit jums jāiestata kadru nomaiņas ātrums. Man ir 12 kadri sekundē. Atzīmēšanas rūtiņa Looping ir atbildīga par animācijas cilpu veidošanu. Pateicoties viņai, video tiks atskaņots aplī. Un opcija Slāņu secība: no apakšas uz augšu atveido ilustratora slāņus panelī no apakšas uz augšu. Tieši tā mēs veidojām savu animāciju.
Izvadā mēs iegūstam flash video ar mūsu animāciju.
Tagad jūs varat redzēt, ka vienkāršas animācijas izveide programmā Adobe Illustrator nav tik sarežģīta, kā šķiet no pirmā acu uzmetiena.
Bet, lai izveidotu garus video vai interaktīvas lietojumprogrammas, tomēr labāk ir izmantot Adobe Flash vai citus zibatmiņas redaktorus. Piemēram, es izgatavoju šo kaķi vecā Macromedia Flash, ko es izraku savā darbā.
Tāpat pēdējā laikā HTML5 un CSS3 arvien vairāk tiek izmantoti animāciju veidošanai. Šo kodu atbalsta mūsdienu pārlūkprogrammas, un tam nav nepieciešams flash atskaņotājs.
Romāns aka dacascas speciāli emuāram Microstock ilustratora piezīmes
Abonējiet mūsu biļetenu, lai nepalaistu garām neko jaunu:
Sveiki visiem! Šodien es mēģināšu aprakstīt programmas iespējas Adobe ilustrators salīdzinot to ar skalošanas iespējām. Šī nebūs globāla programmas analīze pēc kauliem, bet gan dažu interesantu mikroshēmu apraksts, ko es atklāju šajā programmā. Informāciju vācu pa gabalu, kā to pētīju, lai visu saliktu vienā ierakstā. Uzreiz jāatzīst, ka neesmu nekāds superpieredzējis ilustratora lietotājs, zīmēšanā izmantoju tikai pēdējo pusgadu (pirms tam visu krāsoju zibspuldzē). Daudzi cilvēki sūdzas, ka ilustrators ir sarežģīts, ne vienmēr intuitīvi skaidrs. Zināmā mērā es piekrītu, ka pēc skalošanas šī programma ir sarežģīta. Bet galvenais šeit ir nevis pamest, bet gan turpināt studijas. Un pēc pāris nedēļām parādās doma, kā gan es agrāk bez viņa varēju iztikt!
Tātad, kas man patika ilustratorā un ko es pats atradu, kas nav Flash.
1. Sākšu ar visvienkāršāko, bet tajā pašā laikā nepieciešamo. Mēģiniet zibenīgi sakārtot objektus aplī. Bija iepriekš Deko rīks, bet tas tika noņemts, acīmredzot uzskatīts par nevajadzīgu. Nolēmām, ka jautrāk to darīt ar pildspalvām. Illustrator ir šāda funkcija: Efekts — izkropļot un pārveidot — pārveidot.
Viss ir ātri un vienkārši, vērtības (attālums starp objektiem, kopiju skaits) iestatījumos iestatām paši.
2. Zig-zags
Vēl vienkāršāka, bet tomēr noderīga lieta. Šķiet, ka tas ir sīkums, bet zibenīgi jāzīmē ar roku, ilustratorā tas ir sekunžu jautājums.
3. Objektu deformācija (Warp)
Nekas tāds zibenīgi nenotiek. Tālāk esošajā piemērā es parādīju tikai 2 veidus, kā deformēt vienkāršas formas (Efekts - Warp - Arc / Fish). Faktiski jaunākajā programmas versijā ir 15 no tiem.
4. Automātiska stūru noapaļošana (apaļie stūri)
To var izdarīt manuāli: uz grafiskā objekta, kad tas ir atlasīts, stūrī (pie visām acīm) parādās balts punkts un noapaļotas līnijas simbols. Velkam ar peli, pieskaņojam savai gaumei.
Bet tas attiecas tikai uz formām, ar zīmuļa līniju nedaudz savādāk - izmantojiet noapaļošanas efektu ( Efekts - Stilizēt - Apaļi stūri). Izejā mēs iegūstam tādu pašu rezultātu.
5. Rupināt (rupjība)
Efekts tiek piemērots vienkāršas formas (Efekts — izkropļot un pārveidot — raupināt). Izvadā mēs iegūstam kaut ko tādu, kas atgādina zema polietilēna 3D modeli. Manuprāt, forši :) Un galvenais - ļoti vienkārši.
6. Pucker & Bloat(vilkšana un vēdera uzpūšanās)
Piemērs attēlā zemāk:
7. Veidlapas paplašināšana (nobīdes ceļš)
Zibspuldzei ir Expand Fill funkcija; atšķirībā no ilustratora tā vispār nedarbojas ar zīmuļa līnijām.
8. Otas (Art Brush, Pattern Brush, Scatter Brush)
Skatiet attēlu zemāk ar piemēriem:
9.Texture Brush
Programmā Illustrator ir arī daudz tekstūras otu, par kurām es rakstīju un kā tās parādījās jauna versija flush -. Ir novērots, ka otu izmantošana programmā Adobe Animate ir ārkārtīgi lēna. Tieši tā:(
10. Es neesmu pārliecināts, vai tas ir vienkāršs triks, bet es vēlos koncentrēties uz otu ar smieklīgu nosaukumu. BlobOta... Atrodas instrumentu kastē, ļoti jauka birste lietošanai. Ir daudz iestatījumu, man tas patīk vairāk nekā parasti. Grūti vārdos izskaidrot tās priekšrocības, labāk vienreiz pamēģināt.
10. Sadalīt uz režģi
Noderīga ir arī funkcija Split to Grid (Object-Path-Split to Grid), kas ļauj sagriezt formu vienādos segmentos. Ko tas mums atgādina? Tieši tā – logi ir daudzstāvu ēkā. Kas attiecas uz mani, forša lieta zīmēšanai, piemēram, pilsētas ainavas;)
Vēl vienu noderīgs rīks prezentēts Illustrator, iespējams, kopš tā pirmās izlaišanas. To var izmantot, lai izveidotu, piemēram, koka faktūras:
12. Pārvietot (pa labi — pārveidot — pārvietot)
Objekta pārvietošana noteiktā attālumā. Ja vēlaties, varat uzreiz izveidot kopiju, kas tiks novietota vēlamajā attālumā no izvēlētā objekta horizontāli / vai vertikāli. Iepriekšējai Flash versijai bija tāds spraudnis šī funkcija... Diemžēl neatceros tā nosaukumu.
Ir ļoti ērti izveidot bezšuvju modeļus programmā Illustrator ( Objekts-Pattern-Make). Es atceros, kā es biju izmisīgi izsmalcināts zibspuldzes radīšanā. CC 2015 ilustratora versijā viss ir automatizēts, virkne iestatījumu palīdzēs veidot rakstu desmitiem variāciju, pie rokas ir tikai daži grafiskie elementi. Vairāk agrīnās versijas programmas viss bija jādara manuāli, kā līdz šim zibatmiņā.
(Piezīme - paraugu var padarīt par vektoru rediģējamu objektu, izmantojot parsēšanas funkciju ( Objekts — izvērst izskatu).
14. Objektu mozaīka
Krāsu paletes izveidošana, pamatojoties uz esošu attēlu. Mēs importējam attēlu, kas mums patīk, slikti (Open), tad Objekts — izveidojiet objekta mozaīku... Iestatījumos mēs norādām dalīšanas biežumu augstumā un platumā.
Un izejā mēs iegūstam:
15.Blend
Izmanto, lai izveidotu gradientus. Varat izveidot soli pa solim pārejas, kā, piemēram, attēlā. Neteikšu, ka lietoju bieži, bet kādam var noderēt. Es domāju, ka to var izmantot, lai izveidotu vienkāršus fona attēlus.
Arī rīku var izmantot objektu klonēšanai. Novietojiet divus objektus vienu no otra attālumā un izmantojiet Blend Options, izvēlieties soļu skaitu (klonēto objektu skaitu).
16. Rīku veidošanas formas rīks.Ļoti parocīga lieta darbam ar primitīviem. Vienā mirklī man tas šķita mazāk ērti.
Turot nospiestu taustiņu Alt un noklikšķinot uz atlasītajiem segmentiem - izdzēsiet segmentus. Ja mēs vienkārši velkam peli pār vairākiem atlasītajiem apgabaliem - savienojumi.
Papildinājums ir rīks, kas palīdz automātiski izgriezt, pievienoties utt. izceltās formas. Kas attiecas uz mani, tas nav īpaši ērti, es to izmantoju biežāk BūvētFormaRīks.
(mākslas dēļi)
18. Pielāgots rīku panelis
Iespēja pašam izveidot savu rīkjoslu, izmetot nevajadzīgos, un atlasīt tikai tos, kurus izmantojat.
Programmā Flash, zīmējumu dēļi, proti, ainas ( 1., 2., 3. aina..) atrodas atsevišķi, un jums ir jāpārslēdzas starp tām (Shift + F2). Programmā Illustrator varat tos visus novietot savu acu priekšā. Tas ir ērti, ja vienam zīmējumam veido vairākas versijas, lai visas iespējas būtu acu priekšā salīdzināšanai.
19 izometrijas izmantošana Grafiskie stili
Un pēdējais ir izveidot izometriju, neizmantojot to ar 1 klikšķi (vai precīzāk, ar 3 klikšķiem, jo mums ir 3 malas;) izmantojot grafiskos stilus ( Grafiskie stili). Kā tas tiek darīts, parakstīšu nākamreiz.
Illustrator ir kopīgs ar zibspuldzi - iespēja saglabāt objektu simbolā, un tikpat vienkārši šo simbolu var pārnest uz zibspuldzi (atvērt flash .ai failā, izmantojot Importēt — importēt uz skatuves).
Simbolam programmā Illustrator ir tādas pašas īpašības kā Flash.
Un beigās es uzrakstīšu, ka ilustratorā, manuprāt, tas ir zemāks par zibspuldzi. Jā, jā, un ir tāda lieta. Un šis ir aizpildīšanas rīks ( Krāsas spainis). Lai kā es censtos pierast slimā, zibspuldzē ir ērtāk.
Ja manas piezīmes jums noderēja vai vēlaties kaut ko pievienot no sevis - laipni lūdzam komentāros! Veiksmi visiem ;)
Tīmekļa grafikas optimizēšana
Grafiskā informācija tiek pārsūtīta daudz lēnāk nekā teksta informācija, un attēlu ielādes laiks ir proporcionāls to grafisko failu lielumam. Tātad ātra ielāde Tīmekļa lapās ir mazs iegultās grafikas izmērs, kas tiek panākts ar to optimizāciju. Ar attēla optimizāciju tiek saprasta tā transformācija, kas nodrošina minimālo faila izmēru, vienlaikus saglabājot nepieciešamo šajā gadījumā attēla kvalitāte, kas tiek panākta galvenokārt, samazinot krāsu skaitu grafiskajos attēlos, izmantojot saspiestus un īpašus failu formātus un optimizējot kompresijas iestatījumus atsevišķiem attēlu fragmentiem.
Illustrator ir iebūvēti attēlu optimizācijas rīki, kas, pateicoties dažādas metodes priekšskatiet ātru un efektīvu optimizācijas procesa ieviešanu. Priekšskatījums sniedz diezgan precīzu priekšstatu par to, kā optimizētais attēls izskatīsies reāllaikā, kas palīdz novērtēt optimizācijas rezultātu un veiksmīgi atlasīt nepieciešamos iestatījumus. Un jūs varat optimizēt gan attēlus, kas izveidoti tieši Illustrator, gan citus, piemēram, fotogrāfijas, kuras ir paredzēts ievietot tīmekļa vietnē.
Optimizācijas parametri tiek iestatīti logā Saglabāt tīmeklim(Saglabāt tīmeklim), ko izsauc ar tāda paša nosaukuma komandu no izvēlnes Fails(Fails). Programma piedāvā izmantot vienu no četriem priekšskatījuma režīmiem, bet divi ir vislabāk piemēroti optimizācijas kvalitātes novērtēšanai:
- 2-Up(divas iespējas) - oriģināla un optimizētā attēla vienlaicīga apskate atbilstoši norādītajiem iestatījumiem (1. att.);
- 4-Up(četras iespējas) - šajā režīmā skata laukums ir sadalīts četros logos (2. att.), lai parādītu sākotnējo attēlu un trīs optimizētā versijas: pirmā versija tiek izveidota, pamatojoties uz iestatītajām optimizācijas vērtībām, bet pārējās divas ir pašreizējo optimizācijas iestatījumu varianti.
Abi režīmi var ievērojami ietaupīt laiku meklēšanai labāks variants optimizācija, jo tie novērš nepieciešamību saglabāt attēlus no dažādi iestatījumi optimizācija un to sekojošā vizuālā salīdzināšana. Turklāt ir iespējams novērtēt ne tikai optimizētā attēla kvalitāti, bet arī tā izmēru un ielādes laiku dažādām savienojuma iespējām. Salīdzinājumam ērtākais režīms ir 4-Up (četras iespējas), kas ļauj vizuāli novērtēt saspiešanas vai paletes samazināšanas ietekmi uz attēla kvalitāti un tā izmēru un galu galā noteikt labākie parametri optimizācija.
Illustrator ļauj optimizēt tīmekļa grafiku ne tikai GIF, JPG, PNG-8 un PNG-24, bet arī SWF un SVG formātos. Indeksēti attēli ar neliels daudzums krāsas tiek saglabātas GIF formātā. Lai saglabātu pilnkrāsu un pelēktoņu attēlus — fotogrāfijas un krāsainus grafikus, piemēram, gradientu aizpildījumus — izmantojiet JPG formātā... Piesakieties pilnkrāsu attēliem ar caurspīdīgiem laukumiem PNG formātā kas ļauj saglabāt gan indeksētos, gan pilnkrāsu attēlus, savukārt PNG-8 formātā maksimālais iespējamais optimizēta attēla krāsu skaits ir 256, savukārt PNG-24 formātā attēlam var būt miljoniem krāsu, un tāpēc tas ir līdzīgi kā JPEG formātā. PNG-24 atšķiras no JPEG ar to, ka saspiešanas metode, ko izmanto, lai optimizētu PNG-24 attēlus, nezaudē kvalitāti, bet palielina faila lielumu. SVG un SWF formāti apvieno grafiku, tekstu un interaktīvos komponentus, un tos var arī optimizēt.
Apskatīsim konkrētu attēlu optimizācijas piemēru. Pieņemsim, ka vietnes logotips tika izstrādāts programmā Illustrator (3. att.), kas sākotnēji tika saglabāts AI formātā. Mēģinājums nekavējoties optimizēt to tīmeklim ne pie kā laba nenovedīs, jo šajā gadījumā attēls tiks automātiski apgriezts, kas neņems vērā deformācijas rezultātā radušos burtu patieso stāvokli (4. un 5. att.) .
Tāpēc mēģināsim eksportēt logotipu uz PSD formāts komanda Fails => Eksportēt(Fails => Eksportēt) - izveidotā attēla izmērs būs 143 KB. Atveriet iegūto PSD failu un izmantojiet komandu Fails => Saglabāt tīmeklim(Fails => Saglabāt tīmeklim). Ņemot vērā ierobežoto attēlā iesaistīto krāsu skaitu, šajā gadījumā GIF formāts ir optimāls, ar kura specifiskajiem iestatījumiem jums ir jāizlemj. Eksperimentējot ar iestatījumiem, varat par to pārliecināties vislabākā kvalitāte sniedz programmas noklusējuma saspiešanas algoritmu Selektīvs(Selektīvs). Kas attiecas uz antialiasing, ņemot vērā gradienta aizpildījuma klātbūtni, labāk izvēlēties algoritmu ar trokšņu ģenerēšanu - Troksnis(6. att.). Iegūtā optimizācijas faila izmērs būs 6 729 Kbaiti (7. att.), savukārt fona caurspīdīgums tiks saglabāts, par ko ir viegli pārliecināties, saglabājot attēlu GIF formātā kopā ar HTML failu (8. att.). Rezultātā šajā piemērā faili emblem.html un emblem.gif tika iegūti mapē Primer1.
Pogas
Neaizstājams specifisks jebkuras Web lapas dizaina elements ir grafiskās vadības ierīces - pogas. Ir vienkārši neiespējami iedomāties lapu bez tiem. Pogu zīmēšana mūsdienās ir kļuvusi par īpašu žanru, un programma Illustrator ļauj izveidot vissarežģītākās iespējas. Piemēram, pogas, kas veidotas kā režģa objekti un/vai ar pārklājuma maskām, izskatās daudz iespaidīgāk nekā parasti.
Apsvērsim iespēju programmā Illustrator izveidot apaļu izliektu pogu. Uzzīmējiet apļa formas vektora objektu, kas piepildīts ar jebkuru krāsu (9. attēls) un pārveidojiet to par sietu, izmantojot komandu Objekts => Izveidot gradienta tīklu(Objekts => Izveidot gradienta tīklu), norādot četras rindas un četras kolonnas, un sarakstā Izskats(Skatīt), izvēloties opciju Uz centru Izcelt(Fona apgaismojums) vienāds ar 60 (10. att.). Izvēlieties rīku Tiešā atlase un noklikšķiniet pa kreisi augšējais stūris objektu, izceļot tur esošos mezglpunktus (11. att.). Mainiet atbilstošās šūnas krāsu uz baltu, atlasot to paletē Paraugi(12. att.).
Paņemiet instrumentu Elipse(Elipse), novietojiet peles marķieri pirms šī izveidotā apļa centrā un, turot nospiestus taustiņus Alt un Shift, izstiepiet jauno apli virs vecā tā, lai tas no visām pusēm būtu par 1-2 pikseļiem lielāks nekā vecais. Padari viņai melnu apmali ( Insults) 1–2 pikseļu platumā un aizpildiet ar radiālu gradientu no sarkanas līdz baltai (13. attēls). Velciet izveidoto vektora objektu par 1-2 pikseļiem pa labi un uz leju, pēc tam, nenoņemot atlasi, ar peles labo pogu noklikšķiniet uz tā un no konteksta izvēlne izvēlieties komandu Sakārtot => Sūtīt atpakaļ(Sakārtot => Sūtīt atpakaļ). Rezultātā jūs saņemat pogas tukšu vietu, kas parādīta attēlā. 14.
Parasti jebkurā Web lapā ir vairākas viena veida pogas, kas atšķiras, piemēram, tikai uz tām uzzīmēto bultiņu virzienā, kas norāda kustības virzienu caur vietni. Apsveriet vienkāršāko gadījumu, kad ir divas pogas, no kurām viena ar bultiņu uz leju nozīmē pāreju uz nākamā lapaspuse, un augšupvērstās bultiņas pogu, lai pārietu uz iepriekšējo. Kā tukšu bultiņu ņemiet parastu trīsstūri, kas uzzīmēts ar instrumentu Daudzstūris(Daudzstūris), piepildīts ar melnu krāsu un veidots arī kā sieta objekts lielākam efektam. Pārvietojiet bultiņu uz pogu un pielāgojiet visu objektu novietojumu vienam pret otru, izmantojot atbilstošās pogas uz paletes Izlīdzināt(Izlīdzināšana). Pirmā no iegūtajām pogām ir parādīta attēlā. 15. Izveidojiet pogas slāņa kopiju, izvēloties komandu Slāņa dublikāts Slāņi, - rezultātā mēs iegūstam divus identiskus slāņus. Pēc tam slāņa kopijā atlasiet bultiņu un pagrieziet to par 180°, atlasot komandu Pārveidot => Pagriezt- Transformācija => Rotācija. Mēs iegūstam to pašu pogu, kā parādīts attēlā. 16. Ņemiet vērā, ka daudz ērtāk ir glabāt visas viena projekta viena tipa pogas vienā failā dažādos slāņos, kas tiek parādīts šajā gadījumā.
Tagad jums ir jāsaglabā katras pogas optimizētās versijas. Vispirms padariet apakšējo slāni neredzamu - šajā gadījumā augšējā slāņa poga tiks saglabāta. Izvēlieties komandu Fails => Saglabāt tīmeklim(Fails => Saglabāt tīmeklī), konfigurējiet pogu optimizācijas opcijas, piemēram, kā parādīts attēlā. 17, noklikšķiniet uz pogas Saglabāt(Saglabāt) un ievadiet faila nosaukumu. Rezultātā saglabātā poga ir parādīta attēlā. 18. Tagad atgrieziet apakšējā slāņa redzamību, bet augšējo padariet par neredzamu un tādā pašā veidā saglabājiet otro pogu, piešķirot tai citu nosaukumu. Rezultāts ir parādīts attēlā. deviņpadsmit.
Tagad atliek tikai pārliecināties, vai pogas Web lapā izskatās labi, un novietot tās pielāgotā lapā (20. attēls). Rezultātā šajā piemērā fails Primer2.html un divi grafiskie attēli attēlu mapē (mape Grunts2).
Ja vēlaties, optimizācijas procesa laikā pogu var viegli pārvērst šķēlē. Šajā gadījumā pēc komandas izvēles Fails => Saglabāt tīmeklim(Fails => Saglabāt tīmeklim) un iestatot optimizācijas parametrus, atlasiet rīku no rīku paletes Šķēles atlase(Izvēlieties šķēli) un veiciet dubultklikšķi uz attēla, kas galu galā automātiski pārvērtīsies par šķēli ar sērijas numuru 1 (21. att.). Veicot dubultklikšķi uz peles vēlreiz, tiks atvērts logs Šķēles iespējas(Slice options), kurā būs jānorāda saite un, ja vēlaties, jāmaina šķēluma nosaukums (22. att.), un pēc tam jāsaglabā optimizētais attēls. Rezultāts šajā gadījumā būs faili Primer3.html (23. att.) un Primer3.gif (mape Primer3).
Interaktīvie elementi
Viens veids, kā atdzīvināt lapu, ir ieviest dizaina elementus, kas to maina izskats(vai stāvoklis) atkarībā no peles uzvedības vai, retāk, citu situāciju gadījumā: mērogošana, ritināšana, ielāde, kļūdas utt.
Starp šādiem elementiem slavenākie ir rollovers (no angļu valodas roll over - roll, turn over) - elementi, kas peles ietekmē maina savu izskatu. Animētas pogas ir tipisku apgāšanās piemēri. Apgāšanās bieži tiek izmantota, lai izveidotu citus vietnes navigācijas elementus. Faktiski jebkura apgāšanās ir nevis viens, bet vairāki (līdz četriem) attēliem, no kuriem katrs atbilst konkrētam notikumam. Galvenie notikumi tiek uzskatīti par šādiem: Normāls - normāls stāvoklis, Virs - peles kursora virzīšana virs elementa un uz leju - peles kreisās pogas nospiešana, kad kursors atrodas virs tā. Teorētiski var tikt iesaistīti tādi notikumi kā Click - peles kreisās pogas atlaišana pēc nospiešanas, Up - pēc pogas atlaišanas, Out - izejot no aktīvās zonas. Tomēr praksē tie bieži aprobežojas ar elementa maiņu tikai pirmajos trīs vai pat divos notikumos.
Klasiskie rolloveri
Klasiskā izpratnē rollover ir GIF attēlu sērija un atbilstošs HTML kods, kura dēļ, atkarībā no peles uzvedības, viens attēls pārlūkprogrammas logā aizstāj citu.
Illustrator nav paredzēts tiešai klasisko apgāšanās radīšanai, taču tas var palīdzēt izveidot to sākotnējos elementus. Ideja šajā gadījumā ir izveidot slāni ar attēlu, kas atbilst pirmajam notikumam. Pēc tam izveidojiet slāņa kopiju un pārveidojiet attēlu, lai tas atbilstu otrajam notikumam utt. Iegūtais daudzslāņu attēls tiek eksportēts uz PSD failu ar saglabātiem slāņiem, uz kuru pamata programmā Image Ready tiek izveidots apgāšanās. Illustrator izmantošanas priekšrocība, tāpat kā daudzos citos gadījumos, ir vairākas interesantas funkcijas, kas nav pieejamas citos gadījumos. programmatūras rīki, kopā ar vektorgrafikas pārveidošanas ērtībām.
Mēģināsim izveidot apgāšanās uzrakstu, kas maina krāsu atkarībā no peles uzvedības. Atveriet programmu Illustrator un izveidojiet noapaļotu, ar melnu krāsu aizpildītu taisnstūra formu (24. attēls), izveidojiet tās kopiju un novietojiet to brīvā ekrāna apgabalā. Konvertējiet pirmo taisnstūra kopiju par sieta objektu ar izcēlumu centrā (komanda Objekts => Izveidot gradienta tīklu- Object => Create Gradient Mesh), norādot četras rindas un desmit kolonnas (25. attēls). Aktivizējiet otro taisnstūra kopiju un pielāgojiet tam gradienta aizpildījumu, kā parādīts attēlā. 26. Sapludiniet gradienta objektu virs sieta, samaziniet gradienta objekta necaurredzamību līdz aptuveni 80% un tā izmēru par aptuveni 1 pikseli, lai atdarinātu trieciena efektu. Un pēc tam ierakstiet tekstu virs objektiem. Sākotnējā formā lai tam ir balta krāsa, kas atbildīs Normālajam stāvoklim (27. att.), un tad, mainoties apgāšanās stāvoklim, paraksta krāsa mainīsies, piemēram, uz zaļu - kad peles kursors atrodas virs tā (Over state) un zils - kad peles poga ir nospiesta (Down status).
Pievērsiet uzmanību paletei Slāņi- šajā posmā tajā ir tikai viens viens slānis. Izmantojot komandu, izveidojiet divas šī slāņa kopijas Slāņa dublikāts(Duplicate Layer) no paletes izvēlnes Slāņi, - paletē būs trīs slāņi (28. att.). Pēc tam pirmajā slāņa eksemplārā nomainiet paraksta krāsu uz zaļu, bet otrajā - uz zilu (29. att.). Rezultātā jūs iegūsit nepieciešamo sagatavi apgāšanās veikšanai.
Eksportējiet izveidoto attēlu PSD formātā, saglabājot slāņus, izmantojot komandu Fails => Eksportēt(Fails => Eksportēt) un izvēloties RGB krāsu modeli (30. att.). Atveriet izveidoto PSD failu programmā ImageReady (31. un 32. att.). Izveidojiet rāmjus no slāņiem, izvēloties komandu Izveidojiet rāmjus no slāņiem(Izveidot rāmjus no slāņiem) no paletes izvēlnes Animācija... Animācijas logs izskatīsies kā attēlā. 33. Tajā pašā laikā paletē Apgāšanās sākotnēji tiks izveidots viens normāls stāvoklis.
Pēc tam logā Animācija atlasiet rāmi, kas atbilst kursora novietojuma stāvoklim, atrodoties paletē Slāņi slānis tiek atlasīts automātiski 1. slāņa kopija(34. att.). Iet uz paleti Apgāšanās un noklikšķiniet uz pogas Izveidot apgāšanās statusu(Izveidot apgāšanās stāvokli) — att. 35, kas novedīs pie stāvokļa parādīšanās Pāri valstij paletē Apgāšanās(36. att.). Izveidojiet stāvokli tādā pašā veidā Dzemdības stāvoklis... Aktivizējiet stāvokli Normāls paletē Apgāšanās un izdzēsiet paletē Animācija visi kadri, izņemot to, kuram jāatbilst stāvoklim Normāls... Rezultātā katram apgāšanās stāvoklim paletē Animācija būs tikai viens rāmis (37., 38. un 39. att.).
Rīsi. 38. Attēla skats, Animācijas logi un slāņu un apgāšanās paletes statusam Over State
Pārbaudiet rezultātu, noklikšķinot uz pogas Priekšskatījums noklusējuma pārlūkprogrammā(Pārlūkprogrammas priekšskatījums) rīkjoslā un pārejiet uz pārlūkprogrammas logu (40. attēls). Pēc tam saglabājiet failu, izmantojot komandu Fails => Saglabāt optimizēts(Fails => Saglabāt optimizēts) un norādot opciju HTML un attēli (* .html)... Rezultātā šajā piemērā mēs ieguvām failu Primer4.html un grafisko attēlu sēriju attēlu mapē.
Rīsi. 40. Pārlūka logs ar Rollover elementu
SVG apgāšanās
Pieaugošā SVG formāta (Scalable Vector Graphics - Scalable Vector Graphics) popularitāte, kas radīta, pamatojoties uz XML standartu, arī ļauj saņemt dažādus interaktīvus elementus, jo īpaši rollovers, tikai praksē tas tiek realizēts pavisam citādi. Vērts atzīmēt, ka interaktīvo SVG rolloveru izveidei, atšķirībā no klasiskajiem, kad atbilstošais HTML kods tiek ģenerēts pilnīgi automātiski, ir nepieciešamas JavaScript valodas zināšanas un izpratne par objektorientētās programmēšanas pamatprincipiem.
Ir īpaša palete darbam ar SVG objektiem. SVG interaktivitāte, kuru ir viegli atvērt, izmantojot komandu Logs => SVG interaktivitāte(Logs => SVG interaktivitāte) - att. 41.
Apsveriet šo iespēju apgāšanās izveide, izmantojot interaktīvas pogas piemēru, kuras paraksta krāsa mainīsies no melnas uz zilu, kad virzīsiet peles kursoru, un atkal pārveidosies par melnu, kad pele atstāj aktīvās zonas.
Izveidojiet taisnstūrveida pogu ar noapaļotām malām un izvēlieties tai piemērotu gradienta aizpildījumu, piemēram, kā parādīts attēlā. 42. Noregulējiet pogas caurspīdīgumu paletē Caurspīdība(Caurspīdīgums) — šajā piemērā parametra vērtība Necaurredzamība(Necaurredzamība) iestatīts uz 50%. Dublējiet pogu, aizpildiet to ar tumši zaļu krāsu (43. att.) un pēc tam konvertējiet to par sieta objektu ar komandu Objekts => Izveidot gradienta tīklu(Objekts => Izveidot gradienta tīklu), norādot četras rindas un desmit kolonnas, un sarakstā Izskats(Skatīt), izvēloties opciju Uz centru(Centrs) un iestatiet vērtību Izcelt(Izcelt) vienāds ar 100. Samaziniet sieta objekta slāņa necaurredzamību par aptuveni 40% (44. att.). Novietojiet sieta objektu virs gradienta, un poga būs līdzīga tai, kas parādīta attēlā. 45.
Rīsi. 44. Pogas kopijas pārvēršana par sieta objektu
Pabeidziet pogu ar paredzēto uzrakstu un noregulējiet tās pozīciju, izmantojot atbilstošās pogas paletes Izlīdzināt(Izlīdzināšana). Iegūtajā attēlā būs viens slānis ar trīs uzliktiem objektiem (46. attēls). Ieplānotie notikumi attieksies uz teksta objektu, tāpēc ērtības labad mainiet tā nosaukumu uz Teksts veicot dubultklikšķi uz objekta un ievadot jaunu nosaukumu. Mainiet slāņa nosaukumu tādā pašā veidā no 1. slānis uz slāni(47. att.).
Notikumu apstrāde paredz JavaScript procedūru izmantošanu, tāpēc jums ir jāiekļauj fails, kurā aprakstītas šīs procedūras. To sauc par Events.js un instalēšanas laikā tiek saglabāts diskā mapē Sample Files \ Sample Art \ SVG \ SVG Adobe programmas Ilustrators. Lai savienotu failu Events.js, izmantojiet komandu JavaScript faili SVG interaktivitāte(48. att.). Tālāk jums jānospiež poga Pievienot(Pievienot) un atrast vēlamo failu jūsu cietajā diskā. Kad viņa vārds parādās laukā URL(49. att.), noklikšķiniet uz pogas Gatavs(Izlogoties).
Rīsi. 48. Komandas JavaScript faili izvēle
Pēc tam jums jādefinē objekta reakcija uz peles notikumiem. Teksts... Laukā atlasiet objektu Teksts Pasākums(Notikumu) paletes SVG interaktivitāte izvēlieties notikumu uzvediet peles kursoru elemColor (evt, "Teksts", "# 3333FF")- tas nozīmēs, kad pele atrodas virs objekta Teksts tā krāsa mainās uz zilu (50. att.). Lai teksta krāsa mainītos uz melnu pēc tam, kad pele atstāj aktīvās zonas, jums būs jāizveido cits notikums onmouseout- atlasiet to laukā Pasākums(Notikumu) paletes SVG interaktivitāte... Pēc tam darbības rindā ievadiet tekstu elemColor (evt, "Teksts", "# 000000")- tas atgriezīsies melnā krāsā (51. att.).
Rīsi. 51. SVG interaktivitātes paletes gala skats objektam Teksts
Saglabājiet izveidoto pārvēršanu kā SVG failu ar komandu Fails => Saglabāt kā(Fails => Faila veids formātā SVG, un pēc tam konfigurējiet SVG faila saglabāšanas opcijas, kā parādīts attēlā. 52. Pēc saglabāšanas jūs saņemsiet tikai vienu failu ar paplašinājumu SVG, nevis divus, kā klasiskā apgāšanās gadījumā - šajā gadījumā tika iegūts Primer5.svg fails (Primer5 mape). Taču, lai apgāšanās tiešām darbotos, mapē ar SVG failu papildus jāiekopē Events.js fails ar JavaScript procedūru aprakstu. Pēc tam varat pārbaudīt, vai apgāšanās darbojas - rezultāts izskatīsies kā parādīts attēlā. 53.
SVG animācija
SVG formātu var izmantot arī animācijas pārraidīšanai. Mēģināsim izveidot visvienkāršāko animācijas elementu (šajā gadījumā tā būs informācija par uzņēmumu), kas parādīsies ekrānā, virzot peles kursoru virs atbilstošā grafiskā objekta, un pazudīs, kad pele tiek noņemta no interaktīvā elementa.
Izveidosim grafikas un teksta objektu sēriju, piemēram, attēlā redzamo. 54. Pārdēvēt ērts veids visus izveidotos objektus, secīgi noklikšķinot uz nākamā objekta nosaukuma paletē Slāņi un ievadot vajadzīgo nosaukumu (55. att.). Lūdzu, ņemiet vērā, ka attēlā izceltais. 56 objekti - Teksts1, Teksts2, Teksts3 un Ceļš1- vienmēr būs redzams, un visi pārējie - tikai tad, kad virzīsiet peles kursoru virs objekta Teksts1.
Rīsi. 54. Attēla oriģinālais skats
Izmantojot komandu, iekļaujiet failu Events.js ar JavaScript procedūru aprakstu JavaScript faili (JavaScript faili) no paletes SVG interaktivitāte nospiežot pogu Pievienot(Pievienot), atlasot vajadzīgo failu cietajā diskā un noklikšķinot uz pogas Gatavs(Izlogoties).
Definējiet objekta reakciju uz peles notikumiem Teksts1... Izvēlieties objektu Teksts, laukā Pasākums(Notikumu) paletes SVG interaktivitāte izvēlieties notikumu uzvediet peles kursoru un zemāk esošajā rindā ievadiet tekstu elemShow (evt, "Teksts4"); elemShow (evt, "Path2")... Tā rezultātā, kad pele atrodas virs objekta Teksts1 objekti kļūs redzami Teksts4 un Ceļš2... Lūdzu, ņemiet vērā, ka, ja notikuma laikā ir jāveic vairākas darbības, tās jānorāda ar ";" zīmi. Pēc tam veiciet līdzīgu darbību notikumam onmouseout ievadot tam tekstu, kas nozīmēs objektu slēpšanu (57. att.).
Saglabājiet rezultātu kā SVG failu ar komandu Fails => Saglabāt kā(Fails => Saglabāt kā), norādot faila nosaukumu, atlasot laukā Faila veids SVG formātā un pēc tam konfigurējiet SVG faila saglabāšanas opcijas, kā parādīts attēlā. 58. Pēc saglabāšanas jūs iegūsit failu Primer6.svg (mape Primer6). Neaizmirstiet kopēt failu Events.js mapē ar šo failu. Ja pēc tam jūs palaist cos šo failu, tad jūs redzēsiet rezultātu, kas parādīts attēlā. 59. Tas ir gandrīz tas, kas jums nepieciešams. Vienīgais, kas mūsu plānos nebija iekļauts, bija objektu sākotnējais izskats Teksts 4 un Ceļš 2 sāknēšanas laikā. Lai atbrīvotos no šī trūkuma, atlasiet abus šos objektus vienlaikus un izveidojiet tiem darbību. elemHide (evt, "Teksts4"); elemHide (evt, "Path2") pasākumā ielāde(60. att.). Saglabājiet failu vēlreiz un pārliecinieties, vai objekti tagad ir Teksts4 un Ceļš2 redzams tikai tad, kad virzāt peles kursoru virs objekta Teksts1.
GIF animācija
Jebkura Web lapa nav iedomājama bez tīmekļa animācijas, tostarp animētiem gifiem. Viena no to izveides iespējām ir lietojumprogrammas Adobe ImageReady izmantošana, kas cita starpā ļauj veidot animācijas no slāņiem. Šajā gadījumā pašu daudzslāņu attēlu var sagatavot dažādās lietojumprogrammās, tostarp Adobe Illustrator.
Ir ļoti vienkārši izveidot animāciju, pamatojoties uz elementiem no paletes Simboli(Simboli), ko atver komanda Logs => Simboli(Logs => Simboli) vai no vienas no simbolu bibliotēkām, kuras var atvērt, izmantojot komandu Logs => Simbolu bibliotēkas(Logs => Simbolu bibliotēkas).
Piemēram, mēģināsim palielināt jebkura simbola objekta izmēru, objekta palielināšanas procesa galvenie posmi ir jāiestata atsevišķos slāņos. Vispirms vienkārši novietojiet simbolu objektus vienu virs otra un pēc tam palieliniet katra nākamā objekta izmēru, piemēram, kā parādīts attēlā. 61. Rezultātā paletē Slāņi tiks izveidots viens slānis ar daudziem objektiem (62. att.). Ja šo attēlu tieši eksportēsit uz PSD formātu, tas nedarbosies, jo ir tikai viens slānis, un, protams, atverot PSD failu programmā ImageReady, būs arī tikai viens slānis. Tāpēc vispirms ir jānovieto objekti dažādos slāņos. To var izdarīt dažādi – vienkāršākais veids ir vispirms atlasīt slāni. 1. slānis slāņu paletē un izmantojiet komandu Atbrīvot uz slāni(Atbrīvot uz slāņiem). Rezultātā katrs objekts tiks pārvietots uz savu slāni, bet tie visi tiks ievietoti slānī. 1. slānis... Tāpēc visi ligzdotie slāņi būs manuāli jāvelk uz slāņu paletes augšdaļu, lai tie atrastos virs slāņa. 1. slānis un tad tukšais slānis 1. slānis vienkārši noņemiet (63. zīm.). Eksportējiet attēlu PSD formātā, izmantojot komandu Fails => Eksportēt(Fails => Eksportēt) ar iestatījumiem, kā parādīts attēlā. 64.
Ielādējiet izveidoto PSD failu programmā ImageReady (65. un 66. attēls). Atveriet paletes izvēlni AnimācijaIzveidojiet rāmjus no slāņiem(Izveidojiet rāmjus no slāņiem). Rezultātā tiks izveidoti pieci kadri, no kuriem katrs atbildīs savam slānim, un paletes logs Animācija būs tāda forma kā attēlā. 67.
Pēc tam iestatiet katra izveidotā kadra ilgumu - šajā gadījumā visu kadru ilgums ir iestatīts uz 0,2 s. Un pēc tam saglabājiet optimizēto animāciju ar komandu Fails => Saglabāt optimizēts(Fails => Saglabāt optimizēts). Rezultāts var atgādināt att. 68.
Vēl ērtāk ir iegūt sagataves, kuras ImageReady ir viegli pārvērst animācijā, izmantot funkcijas Dzīvi maisījumi Illustrator programmatūra. Šī Illustrator un ImageReady kombinētā izmantošana ievērojami paātrina GIF izveides procesu.
Piemēram, uzzīmējiet divus patvaļīgus daudzkrāsainus objektus un pēc tam sajauciet tos ar atbilstošiem parametriem (69. att.). Nav iespējams tieši izmantot šo failu, lai izveidotu animāciju, jo attēls atrodas vienā slānī (70. att.). Tāpēc vispirms katrs sajaukšanas objekta elements ir jānovieto atsevišķā slānī. Par to logā Slāņi iezīmējiet līniju
Rīsi. 70. Slāņu loga sākotnējais stāvoklis
Eksportējiet izveidoto failu PSD formātā ar komandu Fails => Eksportēt(Fails => Eksportēt). Atveriet izveidoto PSD failu programmā ImageReady (73. att.). Lūdzu, ņemiet vērā, ka visi Illustrator izveidotie slāņi parādīsies logā Layers (74. att.) un logā. Animācija pagaidām būs tikai viens kadrs.
Aktivizējiet paletes izvēlni Animācija noklikšķinot uz melnās bultiņas paletes augšējā labajā stūrī un izvēlieties komandu Izveidojiet rāmjus no slāņiem(Izveidot rāmjus no slāņiem) - kā rezultātā šajā piemērā tiks izveidoti pieci kadri un paletes logs Animācija iegūs formu saskaņā ar att. 75. Atlasiet visus kadrus, turot nospiestu Shift, un iestatiet atbilstošo kadra ilgumu - šajā piemērā katram no kadriem tiek ņemts vienāds laiks 0,2 s. Pēc tam saglabājiet optimizēto failu ar komandu Fails => Saglabāt optimizēts(Fails => Saglabāt optimizēts), iestatot sarakstā Faila veids opciju Tikai attēli (* .gif)... Animācija atgādinās att. 76.
Daudz interesantāk ir nevis kustība, bet gan vienmērīga jauktu objektu izmēru maiņa. Piemēram, varat izmantot jau izveidoto sajaukšanas pāreju. Šajā gadījumā pēc atsevišķu slāņu izveides katram sajaukšanas pārejas elementam novietojiet visus objektus vienu virs otra, izmantojot pogas Horizontāli izlīdzināt centru(Horizontālā centra izlīdzināšana) un Vertikālās līdzināšanas centrs(Vertikālā centra izlīdzināšana) palete Izlīdzināt(77. att.).
Eksportējiet izveidoto failu PSD formātā ( Fails => Eksportēt- File => Export) un atver izveidoto PSD failu programmā ImageReady (78. att.). Izveidojiet animācijas kadrus ( Izveidojiet rāmjus no slāņiem- Izveidojiet kadrus no slāņiem) un izvēlieties tiem piemērotu ilgumu (79. att.). Un tad, lai padarītu animāciju efektīvāku, kopējiet esošos kadrus, bet iekšā apgrieztā secībā- tā, lai attēls vispirms palielinātos un pēc tam samazinātos, un tā tālāk pa apli (80. att.). Pēc tam saglabājiet optimizēto failu ( Fails => Saglabāt optimizēts- Fails => Saglabāt ar optimizāciju). Rezultātā iegūtā animācija ir parādīta attēlā. 81.
Rīsi. 80. Animācijas loga stāvoklis pēc kadru dublēšanas
Rīsi. 81. Pabeigta animācija
Flash faila formāts (SWF) ir balstīts uz vektorgrafika un ir paredzēts mērogojamai, kompaktai grafikai tīmeklī. Tā kā šis faila formāts ir balstīts uz vektorgrafiku, objekts saglabā attēla kvalitāti jebkurā izšķirtspējā un ir ideāli piemērots animācijas kadru veidošanai. Programmā Illustrator varat izveidot atsevišķus animācijas kadrus uz slāņiem un pēc tam eksportēt attēlu slāņus kā atsevišķus kadrus izmantošanai savā vietnē. Varat arī definēt simboliem Illustrator failā, lai samazinātu animācijas izmēru. Eksportējot, katrs simbols SWF failā tiek definēts tikai vienu reizi.
Eksportēšanas komanda (SWF)
Nodrošina vislielāko kontroli pār animāciju un bitu saspiešanu.
Nodrošina lielāku kontroli pār SWF un bitkartes formātu kombināciju sadrumstalotā izkārtojumā. Šī komanda piedāvā mazāk attēla opciju nekā komanda Eksportēt (SWF), taču tajā tiek izmantotas pēdējās izmantotās komandas Eksportēšanas opcijas (sk.).
Sagatavojot objektu saglabāšanai SWF formātā, ņemiet vērā tālāk norādītās vadlīnijas.
Izmantojot Device Central, varat redzēt, kā lietojumprogrammā izskatīsies Illustrator mākslas darbi. Flash atskaņotājs dažādās rokas ierīcēs.
Illustrator mākslas darbu ievietošana
Programmā Illustrator izveidotos mākslas darbus var ātri, vienkārši un vienkārši kopēt un ielīmēt programmā Flash.
Tālāk norādītie atribūti tiek saglabāti, ielīmējot Illustrator attēlu programmā Flash.
Līnijas biezums
Gradientu definīcija
Teksts (tostarp OpenType fonti)
Saistītie attēli
Sajaukšanas režīmi
Kontūras un formas
Turklāt Illustrator un Flash atbalsta tālāk norādīto, ievietojot mākslas darbu.
Atlasot slāņus Illustrator mākslas darbā augstākais līmenis un ievietojot tos Flash, tiek saglabāti slāņi un to īpašības (redzamība un bloķēšana).
Illustrator krāsu formātus, kas nav RGB (CMYK, pelēktoņu un pielāgotie formāti), Flash pārveido par RGB. RGB krāsas tiek ielīmētas parastajā veidā.
Importējot vai ielīmējot Illustrator mākslas darbus, varat izmantot dažādas opcijas, lai noteiktus efektus (piemēram, teksta radīto ēnu) saglabātu kā Flash filtrus.
Flash saglabā Illustrator maskas.
SWF failu eksportēšana no Illustrator
No Illustrator eksportētie SWF faili atbilst no Flash eksportēto SWF failu kvalitātei un saspiešanas pakāpei.
Eksportējot, varat izvēlēties no dažādiem iepriekš definētiem stiliem, lai nodrošinātu optimālu izvadi, un norādīt, kā tiek izmantoti vairāki zīmējumu dēļi, kā tiek pārveidoti simboli, slāņi, teksts un maskas. Piemēram, varat eksportēt Illustrator simbolus kā filmas vai grafiku un izveidot SWF simbolus no Illustrator slāņiem.
Illustrator failu importēšana programmā Flash
Lai izveidotu pilnu izkārtojumu programmā Illustrator un pēc tam vienā darbībā importētu to programmā Flash, varat saglabāt mākslas darbu Illustrator vietējā formātā (AI) un ar augstu precizitāti importēt to Flash, izmantojot apgabalu Fails> Importēt darbvirsmā. vai Fails> Importēt. uz bibliotēku.
Ja jūsu Illustrator failā ir vairāki zīmējumu dēļi, dialoglodziņā Flash importēšana atlasiet importējamo zīmējumu un norādiet iestatījumus katram šī zīmējuma tāfeles slānim. Visi objekti atlasītajā zīmējumā tiek importēti Flash programma kā viens slānis. Importējot citu zīmējumu dēli no tā paša AI faila, objekti no šī zīmējuma tāfeles tiek importēti programmā Flash kā jauns slānis.
Importējot Illustrator mākslas darbus kā AI, EPS vai PDF pielikums Flash saglabā tos pašus atribūtus, kas tiek saglabāti, ielīmējot Illustrator mākslas darbus. Turklāt, ja importētajā Illustrator failā ir slāņi, varat tos importēt kādā no šiem veidiem.
Konvertējiet Illustrator slāņus uz Flash slāņiem.
Pārvērtiet Illustrator slāņus Flash kadros.
Konvertējiet visus Illustrator slāņus uz vienu Flash slāni.
