Անիմացիայի ստեղծում illustrator-ում: Անիմացիաների ստեղծում Illustrator-ում: Illustrator ֆայլերի ներմուծում Flash հավելվածում
Վեբ գրաֆիկայի օպտիմիզացում
Գրաֆիկական տեղեկատվությունշատ ավելի դանդաղ է, քան տեքստը, և պատկերների բեռնման ժամանակը համաչափ է նրանց գրաֆիկական ֆայլերի չափին: Ահա թե ինչու արագ բեռնումՎեբ էջերը պահանջում են փոքր չափի գրաֆիկական պատկերներ, որոնք ներկառուցված են դրանցում, ինչը ձեռք է բերվում դրանց օպտիմալացման միջոցով: Պատկերի օպտիմիզացումը հասկացվում է որպես դրա փոխակերպում, որն ապահովում է ֆայլի նվազագույն չափը՝ պահպանելով տվյալ դեպքում պահանջվող պատկերի որակը, ինչը հիմնականում ձեռք է բերվում գրաֆիկական պատկերների գույների քանակի կրճատման, սեղմված և հատուկ ֆայլերի ձևաչափերի օգտագործմամբ և սեղմման պարամետրերը անհատների համար օպտիմալացնելու միջոցով: պատկերի բեկորներ.
Illustrator-ն ունի պատկերների օպտիմալացման ներկառուցված գործիքներ, որոնք ապահովում են օպտիմիզացման արագ և արդյունավետ գործընթաց՝ նախադիտման տարբեր մեթոդների միջոցով: Նախադիտումտալիս է բավականին ճշգրիտ պատկերացում այն մասին, թե իրական ժամանակում ինչպիսի տեսք կունենա օպտիմիզացված պատկերը, որն օգնում է գնահատել օպտիմալացման արդյունքը և ընտրել ճիշտը ցանկալի կարգավորումներ. Եվ դուք կարող եք օպտիմիզացնել և՛ պատկերները, որոնք ստեղծվել են անմիջապես Illustrator-ում, և՛ մյուսները, օրինակ՝ լուսանկարները, որոնք դուք մտադիր եք տեղադրել վեբ կայքում:
Օպտիմալացման պարամետրերը սահմանվում են պատուհանում Պահպանել վեբի համար (Save for Web), որը կոչվում է մենյուից համանուն հրամանով Ֆայլ(Ֆայլ): Ծրագիրն առաջարկում է օգտագործել նախադիտման չորս ռեժիմներից մեկը, բայց երկուսը լավագույնն են օպտիմալացման որակը գնահատելու համար.
- 2-Վերև(երկու տարբերակ) բնօրինակի և օպտիմիզացված պատկերի միաժամանակյա դիտում՝ նշված պարամետրերին համապատասխան (նկ. 1);
- 4-Վեր(չորս տարբերակ) Այս ռեժիմում դիտման տարածքը բաժանվում է չորս պատուհանների (նկ. 2)՝ ցուցադրելու բնօրինակ պատկերը և օպտիմիզացվածի երեք տարբերակները. առաջին տարբերակը ստեղծվում է սահմանված օպտիմալացման արժեքների հիման վրա, իսկ մյուս երկուսը։ օպտիմիզացման ընթացիկ պարամետրերի տարբերակներ են:
Երկու ռեժիմները թույլ են տալիս զգալիորեն խնայել ժամանակը լավագույն օպտիմալացման տարբերակը գտնելու համար, քանի որ դրանք վերացնում են տարբեր օպտիմալացման պարամետրերով պատկերներ պահպանելու անհրաժեշտությունը և դրանց հաջորդականությունը: տեսողական համեմատություն. Բացի այդ, հնարավոր է գնահատել ոչ միայն օպտիմիզացված պատկերի որակը, այլև դրա չափը և բեռնման ժամանակը, երբ տարբեր տարբերակներկապեր. Համեմատության համար ամենահարմար ռեժիմը 4-Up-ն է (չորս տարբերակ), որը թույլ է տալիս տեսողականորեն գնահատել գունապնակի սեղմման կամ կրճատման ազդեցությունը պատկերի որակի և չափի վրա և, ի վերջո, որոշել. լավագույն տարբերակներըօպտիմալացում։
Illustrator-ը թույլ է տալիս օպտիմիզացնել վեբ գրաֆիկան ոչ միայն GIF, JPG, PNG-8 և PNG-24 ձևաչափերով, այլ նաև SWF և SVG: Ինդեքսավորված պատկերները, որոնք ունեն փոքր քանակությամբ գույներ, պահվում են GIF ձևաչափով: Լրիվ գունավոր և մոխրագույն պատկերները պահելու համար լուսանկարները և գունավոր հարուստ գրաֆիկան, ինչպիսիք են գրադիենտ լրացումները, օգտագործվում է JPG ձևաչափը: Թափանցիկ տարածքներով ամբողջական գունավոր պատկերների համար օգտագործվում է PNG ձևաչափը, որը թույլ է տալիս պահպանել ինչպես ինդեքսավորված, այնպես էլ ամբողջական գունավոր պատկերներ, մինչդեռ PNG-8-ում օպտիմալացված պատկերի առավելագույն հնարավոր գույների քանակը 256 է, իսկ PNG-ում: 24 պատկերը կարող է ունենալ միլիոնավոր գույներ, և հետևաբար այն նման է jpeg ձևաչափ. PNG-24-ի և JPEG-ի միջև տարբերությունն այն է, որ PNG-24 պատկերների օպտիմալացման համար օգտագործվող սեղմման մեթոդը չի հանգեցնում որակի կորստի, բայց այն մեծացնում է ֆայլի չափը: SVG և SWF ձևաչափերը համատեղում են գրաֆիկան, տեքստը և ինտերակտիվ բաղադրիչները և կարող են նաև օպտիմիզացվել:
Հաշվի առեք կոնկրետ օրինակպատկերի օպտիմիզացում: Ասենք, Illustrator ծրագրում մշակվել է կայքի տարբերանշան (նկ. 3), սկզբնապես պահպանված AI ձևաչափով։ Համացանցում այն անմիջապես օպտիմալացնելու փորձը ոչ մի լավ բանի չի հանգեցնի, քանի որ այս դեպքում պատկերն ավտոմատ կերպով կկտրվի, ինչը հաշվի չի առնի դեֆորմացիայի արդյունքում ստացված մակագրության իրական դիրքը (նկ. 4 և 5).
Հետևաբար, եկեք փորձենք հրամանով զինանշանը արտահանել PSD ձևաչափի Ֆայլ => Արտահանում(File=>Export) Ստեղծված պատկերի չափը կլինի 143 ԿԲ: Բացեք ստացված PSD ֆայլը և օգտագործեք հրամանը Ֆայլ=>Պահել համացանցում(File=>Save for Web). Հաշվի առնելով պատկերի մեջ ներգրավված գույների սահմանափակ քանակությունը, այս դեպքում GIF ձևաչափը օպտիմալ է, որի կոնկրետ կարգավորումներով դուք պետք է որոշեք: Փորձարկելով կարգավորումները՝ կարող եք համոզվել, որ լավագույն որակը տրվում է ծրագրի կողմից լռելյայն ընտրված սեղմման ալգորիթմով: ընտրովի(Ընտրովի): Ինչ վերաբերում է հարթեցմանը, ապա, հաշվի առնելով գրադիենտ լցոնի առկայությունը, ավելի լավ է ընտրել աղմուկի առաջացման ալգորիթմ աղմուկ(նկ. 6): Ստացված օպտիմալացման ֆայլի չափը կկազմի 6,729 ԿԲ (նկ. 7), մինչդեռ ֆոնի թափանցիկությունը կպահպանվի, ինչը հեշտ է ստուգել՝ պահպանելով GIF պատկերը HTML ֆայլի հետ միասին (նկ. 8): Արդյունքում ներս այս օրինակը emblem.html և emblem.gif ֆայլերը ստացվել են Primer1 թղթապանակում:
Կոճակներ
Ցանկացած վեբ էջերի դիզայնի անփոխարինելի հատուկ տարր են գրաֆիկական կառավարման կոճակները: Առանց դրանց էջն ուղղակի անհնար է պատկերացնել։ Կոճակներ նկարելը այսօր դարձել է հատուկ ժանր, և Illustrator-ը թույլ է տալիս ստեղծել ամենաբարդ տարբերակները: Օրինակ, կոճակները, որոնք նախատեսված են որպես ցանցային օբյեկտներ և (կամ) դիմակներով, շատ ավելի արդյունավետ տեսք ունեն, քան սովորականները:
Դիտարկենք Illustrator-ում կլոր բարձրացված կոճակ ստեղծելու տարբերակը: Գծե՛ք կամայական գույնով լցված վեկտորային օբյեկտ շրջանագծի տեսքով (նկ. 9) և հրամանի միջոցով այն վերածեք ցանցի։ Object=>Ստեղծել գրադիենտ ցանց(Object=>Create Gradient Mesh)՝ նշելով չորս տող և չորս սյունակ և ցուցակում. Արտաքին տեսք(Դիտել)՝ ընտրելով որևէ տարբերակ Դեպի Կենտրոն ընդգծել(Հետևի լույս) մինչև 60 (Նկար 10): Ընտրեք գործիք Ուղղակի ընտրությունև սեղմեք օբյեկտի վերին ձախ անկյունում՝ ընտրելով այնտեղ գտնվող խարիսխի կետերը (նկ. 11): Փոխեք համապատասխան բջիջի գույնը սպիտակի` ընտրելով այն ներկապնակում Հավաքածուներ(նկ. 12):
Վերցրեք գործիք Էլիպս(Ellipse), մկնիկի նշիչը դրեք նախկինում ստեղծված շրջանագծի կենտրոնում և սեղմած պահելով ստեղները ալտԵվ Հերթափոխ, նոր շրջանագիծը ձգեք հնի վրա այնպես, որ այն բոլոր կողմերից 1-2 պիքսելով մեծ լինի հինից։ Դարձրեք այն սև եզրագիծ Կաթված) 1-2 px լայնությամբ և լրացրեք այն շառավղային գրադիենտով կարմիրից մինչև սպիտակ (Նկար 13): Ստեղծված վեկտորային օբյեկտը քաշեք 1-2 պիքսել աջ և ներքև, այնուհետև, առանց ընտրությունը հանելու, սեղմեք դրա վրա աջ սեղմելով և համատեքստային մենյուընտրել թիմ Arrange=>Ուղարկել Հետ(Կազմակերպել=>Հետ ուղարկել): Արդյունքում, մենք ստանում ենք նկ. 14.
Որպես կանոն, ցանկացած վեբ էջում կան նույն տիպի մի քանի կոճակներ, որոնք տարբերվում են, օրինակ, միայն դրանց վրա գծված սլաքների ուղղությամբ, որոնք ցույց են տալիս կայքում տեղաշարժվելու ուղղությունը: Դիտարկենք երկու կոճակ ունենալու ամենապարզ դեպքը, որոնցից մեկը՝ ներքև սլաքով, նշանակում է տեղափոխել հաջորդ էջ, իսկ սլաքով կոճակը՝ դեպի նախորդը։ Որպես սլաքի դատարկ՝ վերցնենք գործիքով գծված կանոնավոր եռանկյունին Բազմանկյուն(Բազմանկյուն) լցված սևով և նաև ոճավորված որպես ցանցի առարկա՝ ավելի մեծ էֆեկտի համար: Տեղափոխեք սլաքը կոճակի վրա և կարգավորեք բոլոր առարկաների դիրքը միմյանց նկատմամբ՝ օգտագործելով համապատասխան պալիտրա կոճակները Շարել(Հավասարեցում): Ստացված կոճակներից առաջինը ներկայացված է նկ. 15. Կոճակով կրկնօրինակեք շերտը՝ ընտրելով հրամանը Կրկնվող շերտ Շերտեր, արդյունքում ստանում ենք երկու նույնական շերտ։ Այնուհետև ընտրեք շերտի պատճենի սլաքը և պտտեք այն 180°-ով` ընտրելով հրամանը համատեքստի ընտրացանկից: Փոխակերպում => ՊտտելՓոխակերպում => Պտտել: Մենք ստանում ենք նույն կոճակը, ինչպես ցույց է տրված Նկ. 16. Խնդրում ենք նկատի ունենալ, որ շատ ավելի հարմար է մեկ նախագծի բոլոր նույն տիպի կոճակները պահել մեկ ֆայլում՝ տարբեր շերտերի վրա, ինչը ցուցադրվում է այս դեպքում։
Այժմ դուք պետք է պահպանեք օպտիմիզացված տարբերակները կոճակներից յուրաքանչյուրի համար: Ներքևի շերտը նախ անտեսանելի դարձրեք, այս դեպքում վերին շերտի կոճակը կպահպանվի: Ընտրեք թիմ Ֆայլ=>Պահել համացանցում(File=>Save for Web), կարգավորեք կոճակի օպտիմալացման պարամետրերը, օրինակ, ինչպես ցույց է տրված նկ. 17, սեղմեք կոճակը Պահպանել(Պահպանել) և մուտքագրել ֆայլի անունը: Արդյունքում պահպանված կոճակը ներկայացված է Նկ. 18. Այժմ տեսանելի դարձրեք ներքևի շերտը, անտեսանելի դարձրեք վերին շերտը և նույն կերպ պահպանեք երկրորդ կոճակը՝ տալով այլ անուն։ Արդյունքը ցույց է տրված նկ. 19.
Այժմ մնում է միայն համոզվել, որ կոճակները լավ տեսք ունեն վեբ էջում և տեղադրել դրանք հատուկ էջում (Նկար 20): Արդյունքում, այս օրինակում Primer2.html ֆայլը և երկու գրաֆիկական պատկերներ ստացվեցին պատկերների թղթապանակում (թղթապանակ Այբբենարան 2).
Ցանկության դեպքում, օպտիմալացման գործընթացում, կոճակը հեշտությամբ կարող է վերածվել շերտի: Այս դեպքում հրամանն ընտրելուց հետո Ֆայլ=>Պահել համացանցում(File => Save for Web) և օպտիմալացման կարգավորումները պետք է ընտրվեն գործիքների պալիտրա գործիքից Slice Select(Slice selection) և կրկնակի սեղմեք պատկերի վրա, որն ավտոմատ կերպով կվերածվի 1 սերիական համարով հատվածի (նկ. 21): Կրկնակի սեղմելով՝ պատուհանը կբացվի Slice Ընտրանքներ(Slice Options), որում պետք է նշել հղումը և ցանկության դեպքում փոխել հատվածի անվանումը (նկ. 22), իսկ հետո պահպանել օպտիմիզացված պատկերը։ Արդյունքն այս դեպքում կլինեն Primer3.html (նկ. 23) և Primer3.gif (Primer3 թղթապանակ) ֆայլերը։
Ինտերակտիվ տարրեր
Էջը համեմելու եղանակներից մեկը դիզայնի տարրերի ներմուծումն է, որոնք փոխում են դրանց տեսքը(կամ վիճակ) կախված մկնիկի վարքագծից կամ ավելի հազվադեպ՝ այլ իրավիճակների դեպքում՝ խոշորացում, ոլորում, բեռնում, սխալներ և այլն։
Այս տարրերից առավել հայտնի են պտտվող տարրերը (անգլերենից roll over to roll, roll over), որոնք մկնիկի ազդեցության տակ փոխում են իրենց տեսքը։ Անիմացիոն կոճակները բնորոշ շրջադարձերի օրինակներ են: Շրջվելը հաճախ օգտագործվում է կայքի նավիգացիոն այլ տարրեր ստեղծելիս: Իրականում ցանկացած rollover-ը ոչ թե մեկ, այլ մի քանի (մինչև չորս) պատկեր է, որոնցից յուրաքանչյուրը համապատասխանում է որոշակի իրադարձության։ Հիմնական իրադարձությունները համարվում են հետևյալը. Նորմալ նորմալ վիճակ, մկնիկի կուրսորը տարրի վրայով սավառնելը և ներքև՝ սեղմելով մկնիկի ձախ կոճակը դրա վրա սավառնելիս: Տեսականորեն, կարող են ներգրավվել այնպիսի իրադարձություններ, ինչպիսիք են Սեղմել՝ սեղմելուց հետո մկնիկի ձախ կոճակն ազատելը, կոճակը բացելուց հետո վերև, ակտիվ գոտին լքելիս դուրս գալը: Այնուամենայնիվ, գործնականում այն ավելի հաճախ սահմանափակվում է տարրի փոփոխությամբ միայն առաջին երեք կամ նույնիսկ երկու իրադարձությունների համար:
Դասական գլորումներ
Դասական իմաստով rollover-ը GIF ձևաչափով և դրանց համապատասխան HTML կոդով գրաֆիկական պատկերների շարք է, որի շնորհիվ, կախված մկնիկի վարքագծից, բրաուզերի պատուհանում մի պատկեր փոխարինում է մյուսին։
Illustrator-ը նախատեսված չէ դասական իմաստով ուղղակիորեն վերափոխումներ ստեղծելու համար, սակայն այն կարող է օգնել նրանց համար նախնական տարրերի մշակմանը: Գաղափարն այս դեպքում առաջին իրադարձությանը համապատասխանող պատկերով շերտ ստեղծելն է։ Այնուհետև պատրաստեք շերտի պատճենը և փոխակերպեք պատկերը, որպեսզի համապատասխանի երկրորդ իրադարձությանը և այլն: Ստացված շերտավոր պատկերը արտահանվում է PSD ֆայլ՝ պահպանված շերտերով, որի հիման վրա ստեղծվում է rollover: Պատկերային ծրագիրՊատրաստ. Illustrator-ի օգտագործման առավելությունը, ինչպես շատ այլ դեպքերում, նրա մի շարք հետաքրքիր առանձնահատկություններ են, որոնք հասանելի չեն մյուսներում: ծրագրային գործիքներ, վեկտորային գրաֆիկայի փոխակերպման հարմարության հետ միասին:
Փորձենք ստեղծել շրջադարձ մակագրության տեսքով, որը փոխում է գույնը՝ կախված մկնիկի վարքագծից։ Բացեք Illustrator-ը և ձևավորեք կլորացված և սև ուղղանկյունով լցված ձև (նկ. 24), պատճենեք այն և տեղադրեք էկրանի ազատ հատվածում։ Ուղղանկյունի առաջին պատճենը վերածեք ցանցի օբյեկտի, որի կենտրոնում ընդգծված է (հրաման Object=>Ստեղծել գրադիենտ ցանց Object=>Create Gradient Mesh)՝ նշելով չորս տող և տասը սյունակ (նկ. 25): Ակտիվացրեք ուղղանկյան երկրորդ օրինակը և դրա համար դրեք գրադիենտ լցոն, որը նման է նկ. 26. Գրադիենտ օբյեկտը ծածկեք ցանցի վերևում, գրադիենտ օբյեկտի անթափանցիկությունը կրճատեք մինչև մոտ 80%, իսկ գրադիենտ օբյեկտի չափը մինչև մոտ 1 պիքսել՝ վերջում ուռուցիկ էֆեկտը նմանակելու համար: Եվ այնուհետև օբյեկտների վրա տպեք մակագրությունը: Իր սկզբնական ձևով թող այն ունենա սպիտակ գույն, որը կհամապատասխանի Normal վիճակին (նկ. 27), իսկ հետո երբ փոխվում է շրջվելու վիճակը, մակագրության գույնը կփոխվի, օրինակ, կանաչ, երբ մկնիկի նշիչը սավառնել է դրա վրա (Over State) և կապույտ, երբ մկնիկի կոճակը սեղմված է (Down վիճակ):
Ուշադրություն դարձրեք գունապնակին Շերտերայս փուլում այն ունի միայն մեկ շերտ: Կատարեք այս շերտի երկու օրինակ՝ օգտագործելով հրամանը Կրկնվող շերտ(Duplicate Layer) ներկապնակի մենյուից Շերտեր, գունապնակում կլինի երեք շերտ (նկ. 28): Այնուհետև շերտի առաջին օրինակում մակագրության գույնը փոխեք կանաչի, իսկ երկրորդում՝ կապույտի (նկ. 29): Արդյունքում կստացվի գլորվելու համար անհրաժեշտ բլանկը։
Ստեղծված պատկերը արտահանեք PSD ձևաչափով՝ հրամանի միջոցով պահպանված շերտերով Ֆայլ => Արտահանում(File=>Export) և ընտրել գունային մոդել RGB (նկ. 30): Բացեք ստեղծված PSD ֆայլը ImageReady-ում (Նկարներ 31 և 32): Ստեղծեք շրջանակներ՝ հիմնված շերտերի վրա՝ ընտրելով հրամանը Շերտերից շրջանակներ պատրաստեք(Ստեղծեք շրջանակներ շերտերից) գունապնակի ընտրացանկից անիմացիա. Շարժապատկերման պատուհանը նման կլինի նկ. 33. Միեւնույն ժամանակ ներկապնակում ԳլորումներՍկզբում կստեղծվի միասնական Նորմալ պետություն։
Հետո պատուհանում անիմացիաընտրեք սավառնած վիճակին համապատասխան շրջանակը՝ ներկապնակում գտնվելու ժամանակ Շերտերշերտը ավտոմատ կերպով ընտրվում է Շերտ 1 Պատճեն(նկ. 34): Գնացեք պալիտրա Գլորումներև սեղմեք կոճակի վրա Ստեղծեք Rollover State(Ստեղծել rollover վիճակ) նկ. 35, որը կհանգեցնի պետության ի հայտ գալուն Նահանգի վրայովգունապնակում Գլորումներ(նկ. 36): Նույն կերպ պետություն ստեղծեք Down State. Ակտիվացնել վիճակը Նորմալգունապնակում Գլորումներև ջնջել ներկապնակում անիմացիաբոլոր շրջանակները, բացառությամբ այն շրջանակի, որը պետք է համապատասխանի վիճակին Նորմալ. Արդյունքում, գունապնակում յուրաքանչյուր rollover վիճակի համար անիմացիակլինի միայն մեկ շրջանակ (նկ. 37, 38 և 39):
Բրինձ. 38. Պատկերի դիտում, Շարժապատկերման պատուհանը և Շերտերն ու Շրջումներ պալիտրաները Over State-ի համար
Ստուգեք արդյունքը՝ սեղմելով կոճակը Նախադիտում լռելյայն դիտարկիչում(Browser Preview) գործիքագոտում և անցնելով դիտարկիչի պատուհանը (Նկար 40): Դրանից հետո ֆայլը պահեք հրամանի միջոցով Ֆայլ=>Պահպանել օպտիմիզացված(File=>Save with optimization) և նշելով տարբերակը HTML և պատկերներ (*.html). Արդյունքում այս օրինակում ստացվել է Primer4.html ֆայլը և պատկերների թղթապանակի գրաֆիկական պատկերների շարքը։
Բրինձ. 40. Բրաուզերի պատուհան Rollover տարրով
SVG rollovers
Հանրաճանաչություն ձեռք բերելը SVG ձևաչափ(Scalable Vector Graphics scalable Վեկտորային գրաֆիկա), որը ստեղծվել է XML ստանդարտի հիման վրա, նաև թույլ է տալիս ստանալ ինտերակտիվ տարրերի բազմազանություն, մասնավորապես՝ գլորումներ, միայն գործնականում դա իրականացվում է բոլորովին այլ կերպ: Հարկ է նշել, որ ինտերակտիվ SVG rollover-ների ստեղծումը, ի տարբերություն դասականների, երբ համապատասխան HTML կոդը ստեղծվում է ամբողջությամբ ավտոմատ կերպով, պահանջում է JavaScript լեզվի իմացություն և օբյեկտի վրա հիմնված ծրագրավորման հիմնական սկզբունքների իմացություն:
Հատուկ գունապնակ նախատեսված է SVG օբյեկտների հետ աշխատելու համար: SVG ինտերակտիվություն, որը հեշտ է բացել հրամանով Window=>SVG ինտերակտիվություն(Window=>SVG ինտերակտիվություն) նկ. 41.
Դիտարկենք շրջադարձ ստեղծելու այս տարբերակը՝ օգտագործելով ինտերակտիվ կոճակի օրինակը, որի պիտակի գույնը սևից կփոխվի կապույտի, երբ մկնիկը սավառնում է վրան և կվերադառնա սևի, երբ մկնիկը դուրս է գալիս ակտիվ գոտուց:
Ստեղծեք ուղղանկյուն կոճակ կլորացված եզրերով և ընտրեք դրա համար հարմար գրադիենտ լցոն, օրինակ, ինչպես ցույց է տրված նկ. 42. Կարգավորեք կոճակի թափանցիկությունը գունապնակում Թափանցիկություն(Transparency) այս օրինակում պարամետրի արժեքը Անթափանցիկություն(Անթափանցիկություն) սահմանված է 50%: Պատճենեք կոճակը, լրացրեք այն մուգ կանաչով (նկ. 43), այնուհետև հրամանով այն վերածեք ցանցային օբյեկտի. Object=>Ստեղծել գրադիենտ ցանց(Object=>Create Gradient Mesh)՝ նշելով չորս տող և տասը սյունակ և ցուցակում. Արտաքին տեսք(Դիտել)՝ ընտրելով որևէ տարբերակ Դեպի Կենտրոն(Դեպի կենտրոն) և սահմանելով արժեքը ընդգծել(ընդգծեք) մինչև 100: Նվազեցրեք ցանցային օբյեկտի շերտի անթափանցիկությունը մինչև մոտ 40% (Նկար 44): Տեղադրեք ցանցային օբյեկտը գրադիենտ օբյեկտի վերևում, և կոճակը նման կլինի Նկ. 45.
Բրինձ. 44. Կոճակի պատճենը ցանցի օբյեկտի վերածելը
Լրացրեք կոճակը նախատեսված մակագրությամբ և կարգավորեք դրա դիրքը՝ օգտագործելով համապատասխան պալիտրա կոճակները Շարել(Հավասարեցում): Ստացված պատկերը կպարունակի մեկ շերտ, որտեղ երեք առարկաներ կտեղադրվեն միմյանց վրա (նկ. 46): Պլանավորված իրադարձությունները վերաբերելու են տեքստային օբյեկտին, ուստի հարմարության համար փոխեք նրա անունը Տեքստօբյեկտը կրկնակի սեղմելով և նոր անուն մուտքագրելով: Նմանապես, փոխեք շերտի անունը Շերտ 1-ից շերտ(նկ. 47):
Միջոցառումների մշակումը ներառում է JavaScript-ի ընթացակարգերի օգտագործումը, այնպես որ դուք պետք է ներառեք այս ընթացակարգերի նկարագրությամբ ֆայլ: Այն կոչվում է Events.js և տեղադրվելիս պահվում է սկավառակի վրա Sample Files\Sample Art\SVG\SVG պանակում: Adobe ծրագրակազմՆկարազարդող. Events.js ֆայլը ներառելու համար օգտագործեք հրամանը JavaScript ֆայլեր SVG ինտերակտիվություն(նկ. 48): Հաջորդը, դուք պետք է սեղմեք կոճակը Ավելացնել(ավելացնել) և գտնել ցանկալի ֆայլկոշտ սկավառակի վրա: Երբ նրա անունը հայտնվում է դաշտում URL(նկ. 49), սեղմեք կոճակի վրա Կատարած(Դուրս գալ).
Բրինձ. 48. JavaScript Files հրամանի ընտրություն
Դրանից հետո դուք պետք է սահմանեք օբյեկտի արձագանքը մկնիկի իրադարձություններին Տեքստ. Ընտրեք Տեքստային օբյեկտը դաշտում իրադարձություն(Իրադարձություն) գունապնակ SVG ինտերակտիվությունընտրել իրադարձություն նավարկելու վրա elemColor (evt, «Text», «#3333FF»)սա կնշանակի, որ երբ մկնիկը գտնվում է օբյեկտի վրա Տեքստնրա գույնը կփոխվի կապույտի (նկ. 50): Որպեսզի մկնիկի ակտիվ գոտուց դուրս գալուց հետո տեքստի գույնը փոխվի սևի, դուք պետք է ստեղծեք ևս մեկ իրադարձություն onmouseoutընտրեք այն դաշտում իրադարձություն(Իրադարձություն) գունապնակ SVG ինտերակտիվություն. Այնուհետև գործողության տողում մուտքագրեք տեքստը elemColor (evt, «Text», «#000000»)սա կվերադառնա սև (նկ. 51):
Բրինձ. 51. SVG Interactivity պալիտրա վերջնական տեսքը Text օբյեկտի համար
Պահպանեք ստեղծված rollover-ը որպես SVG ֆայլ՝ հրամանով Ֆայլ => Պահպանել որպես(Ֆայլ => Ֆայլի տեսակըձևաչափը SVG, և այնուհետև սահմանելով SVG ֆայլը պահպանելու տարբերակները, ինչպես ցույց է տրված նկ. 52. Պահելուց հետո SVG ընդլայնմամբ միայն մեկ ֆայլ կստացվի, և ոչ երկու, ինչպես դասական rollover-ի դեպքում, այս դեպքում ստացվել է Primer5.svg ֆայլը (Primer5 folder): Այնուամենայնիվ, որպեսզի rollover-ը իսկապես աշխատի, դուք պետք է լրացուցիչ պատճենեք Events.js ֆայլը JavaScript-ի ընթացակարգերի նկարագրությամբ SVG ֆայլով թղթապանակում: Դրանից հետո դուք կարող եք ստուգել շրջադարձի կատարումը, արդյունքը նման կլինի, ինչպես ցույց է տրված Նկ. 53.
SVG անիմացիա
SVG ձևաչափը կարող է օգտագործվել նաև անիմացիա փոխանցելու համար: Փորձենք ստեղծել պարզ անիմացիոն տարր (այս դեպքում դա կլինի տեղեկատվություն ընկերության մասին), որը կհայտնվի էկրանին, երբ մկնիկը սավառնում են համապատասխան գրաֆիկական օբյեկտի վրա և կվերանա, երբ մկնիկը հանվում է ինտերակտիվ տարրից։
Եկեք ստեղծենք մոտավորապես այնպիսի գրաֆիկական և տեքստային օբյեկտների շարք, ինչպես ցույց է տրված Նկ. 54. Ստեղծված բոլոր օբյեկտները վերանվանեք հարմար եղանակով՝ հաջորդաբար սեղմելով գունապնակում հաջորդ օբյեկտի անվան վրա։ Շերտերև մուտքագրելով ցանկալի անունը (նկ. 55): Նշենք, որ ընդգծված է Նկ. 56 հատ Text1, Text2, Text3Եվ Ճանապարհ 1միշտ տեսանելի կլինի, իսկ մնացած բոլորը միայն այն ժամանակ, երբ սավառնում եք օբյեկտի վրա Տեքստ 1.
Բրինձ. 54. Պատկերի բնօրինակ տեսք
Ներառեք Events.js ֆայլը JavaScript-ի ընթացակարգերի նկարագրությամբ՝ օգտագործելով հրամանը JavaScript ֆայլեր (JavaScript ֆայլեր) գունապնակից SVG ինտերակտիվությունսեղմելով կոճակը Ավելացնել(Ավելացնել)՝ կոշտ սկավառակի վրա ընտրելով ցանկալի ֆայլը և սեղմելով կոճակը Կատարած(Դուրս գալ).
Սահմանեք մկնիկի իրադարձության արձագանքը օբյեկտի համար Տեքստ 1. Ընտրեք օբյեկտ Տեքստ, դաշտում իրադարձություն(Իրադարձություն) գունապնակ SVG ինտերակտիվությունընտրել իրադարձություն նավարկելու վրաիսկ ներքևի տողում մուտքագրեք տեքստը elemShow (evt, «Text4»); elemShow (evt, «Path2»). Արդյունքում, երբ մկնիկը գտնվում է օբյեկտի վրա Տեքստ 1առարկաները տեսանելի կդառնան Տեքստ 4Եվ Ճանապարհ 2. Խնդրում ենք նկատի ունենալ, որ եթե իրադարձությունների ժամանակ պետք է կատարվեն մի քանի գործողություններ, դրանք պետք է նշվեն «;» նշանի միջոցով: Հետո նույնն արեք միջոցառման համար onmouseout, մուտքագրելով դրա համար տեքստը, որը կնշանակի թաքցնել օբյեկտները (նկ. 57):
Պահպանեք արդյունքը որպես SVG ֆայլ հրամանով Ֆայլ => Պահպանել որպես(File=>Save as), նշելով ֆայլի անունը՝ դաշտում ընտրելով Ֆայլի տեսակը SVG ձևաչափը, այնուհետև սահմանել SVG ֆայլը պահպանելու տարբերակները՝ համաձայն Նկ. 58. Պահելուց հետո կստացվի Primer6.svg ֆայլը (Primer6 թղթապանակ): Չմոռանաք պատճենել Events.js ֆայլը այս ֆայլով թղթապանակում: Եթե դրանից հետո դուք վազում եք coz տրված ֆայլը, դուք կտեսնեք արդյունքը, որը ներկայացված է Նկ. 59. Սա գրեթե այն է, ինչ ձեզ հարկավոր է: Միակ բանը, որ ներառված չէր մեր ծրագրերում, օբյեկտների սկզբնական տեսքն էր Տեքստ 4 և Ճանապարհ 2 բեռնելիս: Այս թերությունից ազատվելու համար ընտրեք այս երկու օբյեկտները միանգամից և ստեղծեք գործողություն նրանց համար elemHide (evt, «Text4»); elemHide (evt, «Path2»)միջոցառման վրա բեռնված(նկ. 60): Կրկին պահեք ֆայլը և համոզվեք, որ օբյեկտները հիմա են Տեքստ 4Եվ Ճանապարհ 2տեսանելի է միայն այն ժամանակ, երբ մկնիկը սավառնում է օբյեկտի վրա Տեքստ 1.
GIF անիմացիա
Ցանկացած վեբ էջ անհնար է պատկերացնել առանց վեբ անիմացիայի, ներառյալ անիմացիոն gif-երը: Դրանց ստեղծման եղանակներից մեկը Adobe ImageReady հավելվածի օգտագործումն է, որը, ի թիվս այլ բաների, թույլ է տալիս շերտերից անիմացիա ստեղծել։ Այս դեպքում բազմաշերտ պատկերն ինքնին կարող է պատրաստվել տարբեր հավելվածներ, այդ թվում՝ Adobe Illustrator-ում։
Շատ հեշտ է ստեղծել անիմացիա՝ հիմնված ներկապնակից տարրերի վրա Խորհրդանիշներ(Սիմվոլներ) բացված հրամանով Window=>Սիմվոլներ(Window=>Symbols) կամ խորհրդանիշների գրադարաններից մեկից, որը կարող է բացվել հրամանի միջոցով Պատուհան=>Սիմվոլների գրադարաններ(Window=>Symbol Libraries):
Օրինակ, փորձենք մեծացնել ցանկացած օբյեկտ-խորհրդանիշի չափը, օբյեկտի մեծացման գործընթացի առանցքային փուլերը պետք է դրվեն առանձին շերտերի վրա։ Նախ, պարզապես տեղադրեք սիմվոլի առարկաները մեկը մյուսի վերևում, այնուհետև մեծացրեք յուրաքանչյուր հաջորդ օբյեկտի չափը, օրինակ, ինչպես ցույց է տրված Նկ. 61. Արդյունքում գունապնակում Շերտերկստեղծվի մեկ շերտ՝ բազմաթիվ օբյեկտներով (նկ. 62): Եթե դուք ուղղակիորեն արտահանեք այս պատկերը PSD ձևաչափի, ապա դա չի աշխատի, քանի որ կա միայն մեկ շերտ, և բնականաբար, երբ բացեք PSD ֆայլը ImageReady-ում, կլինի նաև միայն մեկ շերտ: Հետեւաբար, նախ պետք է առարկաներ տեղադրել տարբեր շերտերի վրա: Սա կարելի է անել տարբեր ճանապարհներամենահեշտ ճանապարհը նախ ընտրել շերտն է Շերտ 1Շերտերի գունապնակում և օգտագործեք հրամանը Ազատել շերտին(Թողարկեք շերտերով): Արդյունքը կլինի օբյեկտներից յուրաքանչյուրը տեղափոխել իր սեփական շերտը, բայց դրանք բոլորը կբնադրվեն շերտում Շերտ 1. Հետևաբար, դուք ստիպված կլինեք ձեռքով քաշել բոլոր տեղադրված շերտերը Շերտերի պալիտրա վերևում, որպեսզի դրանք լինեն շերտից վեր: Շերտ 1, իսկ հետո դատարկ շերտը Շերտ 1հեշտ է հեռացնել (նկ. 63): Արտահանեք պատկերը PSD ձևաչափով, օգտագործելով հրամանը Ֆայլ => Արտահանում(File=>Export) կարգավորումներով, ինչպես նկ. 64.
Ստեղծված PSD ֆայլը բեռնեք ImageReady ծրագրում (նկ. 65 և 66): Բացեք պալիտրա ընտրացանկը անիմացիաՇերտերից շրջանակներ պատրաստեք(Ստեղծեք շրջանակներ շերտերից): Արդյունքում կստեղծվի հինգ շրջանակ, որոնցից յուրաքանչյուրը կհամապատասխանի իր շերտին և ներկապնակի պատուհանին անիմացիանման կլինի Նկ. 67.
Դրանից հետո այս դեպքում սահմանեք ստեղծված շրջանակներից յուրաքանչյուրի տեւողությունը, բոլոր կադրերի տեւողությունը սահմանվում է 0,2 վրկ։ Եվ հետո հրամանով պահպանեք օպտիմիզացված անիմացիան Ֆայլ=>Պահպանել օպտիմիզացված(Ֆայլ=>Պահպանել օպտիմալացման միջոցով): Ստացված արդյունքը կարող է նմանվել Նկ. 68.
Նույնիսկ ավելի հարմար է օգտագործել գործառույթները Live Blends Illustrator ծրագրակազմ: Illustrator-ի և ImageReady-ի այս համատեղ օգտագործումը զգալիորեն արագացնում է GIF անիմացիաների ստեղծման գործընթացը:
Օրինակ, նկարեք երկու կամայական բազմագույն առարկաներ, այնուհետև դրանք միաձուլեք համապատասխան պարամետրերով (նկ. 69): Անհնար է այս ֆայլն ուղղակիորեն օգտագործել անիմացիա ստեղծելու համար, քանի որ պատկերը գտնվում է մեկ շերտի վրա (նկ. 70): Հետևաբար, նախ պետք է խառնուրդի օբյեկտի յուրաքանչյուր տարր տեղադրել առանձին շերտի վրա: Դա անելու համար պատուհանում Շերտերընդգծել գիծը
Բրինձ. 70. Շերտերի պատուհանի սկզբնական վիճակը
Ստեղծված ֆայլը հրամանով արտահանեք PSD ձևաչափի Ֆայլ => Արտահանում(Ֆայլ=>Արտահանում): Բացեք ստեղծված PSD ֆայլը ImageReady-ում (նկ. 73): Խնդրում ենք նկատի ունենալ, որ Illustrator ծրագրում ստեղծված բոլոր շերտերը կհայտնվեն շերտերի պատուհանում (նկ. 74), իսկ պատուհանում. անիմացիակլինի միայն մեկ շրջանակ.
Ակտիվացրեք ներկապնակի ընտրացանկը անիմացիա, սեղմելով ներկապնակի վերին աջ անկյունում գտնվող սև սլաքի վրա և ընտրեք հրամանը Շերտերից շրջանակներ պատրաստեք(Ստեղծեք շրջանակներ շերտերից) վերջում, այս օրինակում կստեղծվի հինգ շրջանակ, իսկ ներկապնակի պատուհանը. անիմացիաձևը կընդունի Նկ. 75. Ընտրեք բոլոր շրջանակները՝ պահելով ստեղնը Հերթափոխ, և սահմանեք համապատասխան շրջանակի տևողությունը այս օրինակում, յուրաքանչյուր կադրի համար վերցված է նույն ժամանակը 0,2 վրկ: Այնուհետև պահպանեք ֆայլը օպտիմալացման հրամանով Ֆայլ=>Պահպանել օպտիմիզացված(File=>Save with optimization) պարամետրը ցանկում Ֆայլի տեսակըտարբերակ Միայն պատկերներ (*.gif). Շարժապատկերը կնմանվի Նկ. 76.
Շատ ավելի հետաքրքիր է ոչ թե շարժումը, այլ խառնուրդի առարկաների սահուն չափափոխումը: Օրինակ, կարող եք օգտագործել արդեն ստեղծված խառնուրդի անցումը: Այս դեպքում, խառնուրդի անցման յուրաքանչյուր տարրի համար առանձին շերտեր ստեղծելուց հետո, կոճակների միջոցով տեղադրեք բոլոր առարկաները միմյանց վրա: Հորիզոնական հարթեցման կենտրոն(Հավասարեցում հորիզոնական կենտրոնի նկատմամբ) և Ուղղահայաց հարթեցման կենտրոն(ուղղահայաց կենտրոնական հավասարեցում) գունապնակներ Շարել(նկ. 77):
Արտահանել ստեղծված ֆայլը PSD ձևաչափով ( Ֆայլ => Արտահանում File=>Export) և բացել ստեղծված PSD ֆայլը ImageReady ծրագրում (նկ. 78): Ստեղծեք անիմացիոն շրջանակներ՝ հիմնված շերտերի վրա ( Շերտերից շրջանակներ պատրաստեքՇերտերից ստեղծեք շրջանակներ) և ընտրեք դրանց համապատասխան տևողությունը (նկ. 79): Եվ հետո, անիմացիան ավելի արդյունավետ դարձնելու համար, պատճենեք առկա կադրերը, բայց հակառակ հերթականությամբ, որպեսզի պատկերը սկզբում մեծանա, հետո փոքրանա, և այսպես շարունակվի շրջանագծով (նկ. 80): Այնուհետև պահպանեք օպտիմալացման ֆայլը ( Ֆայլ=>Պահպանել օպտիմիզացվածՖայլ => Պահպանել օպտիմիզացիայի միջոցով): Ստացված անիմացիան ներկայացված է նկ. 81.
Բրինձ. 80. Անիմացիայի պատուհանի վիճակը կադրերը կրկնօրինակելուց հետո
Բրինձ. 81. Ավարտված անիմացիա
Դուք ունեք մեկ կամ երկու պատկերակ, որոնք կցանկանայիք կյանքի կոչել անիմացիայի միջոցով: որտեղի՞ց կսկսեիք: Ենթադրենք, դուք ունեք SVG ֆայլեր, Illustrator CC և After Effects CC, բայց լուծումը ձեզանից չի խուսափում:
Այս հոդվածում ես ձեզ ցույց կտամ, թե ինչպես կարելի է հեշտությամբ անիմատավորել SVG ֆայլը, ներառյալ պատրաստել SVG ֆայլը Illustrator-ում և ներմուծել այն After Effects CC: Ես նաև կբացատրեմ, թե ինչպես կարող եք այն վերածել Shape Layers-ի և ավելացնել շարժում: Եվ վերջապես, խոսենք արտահանման և մատուցման մասին։
Աշխատանքի վերջնական արդյունքը.
Հիմա եկեք իջնենք ամենահետաքրքիր մասին՝ սովորեք, թե ինչպես անիմացիոն պատկերները:
SVG ֆայլի պատրաստում Illustrator-ում
Եկեք սկսենք բացելով ձեր SVG ֆայլը Adobe Illustrator CC-ում: Ես կկենդանացնեմ փոքրիկ մեքենայի պատկերակը, որն անվճար հասանելի է Week Of Icons-ում:
Ֆայլը բացելուց հետո մենք պետք է ապախմբավորենք և բաժանենք բոլոր օբյեկտները շերտերի: Դուք կարող եք դա անել ձեռքով կամ օգտագործել Ազատում շերտերին (հաջորդականություն)գործընթացը արագացնելու համար։ Նախքան ֆայլը After Effects ներմուծելը, մենք պետք է այն պահենք որպես Illustrator ֆայլի ձևաչափ:
Մենք կարող ենք չխմբավորել օբյեկտները՝ օգտագործելով Release to Layers (Sequence)՝ թանկարժեք ժամանակը չկորցնելու համար: Ֆայլի ներմուծում և կազմակերպում After Effects CC-ում
Այժմ դուք պատրաստ եք ներմուծել After Effects CC: Եկեք օգտագործենք ստեղնաշարի դյուրանցումը Ctrl+I (Windows)կամ Հրաման + I (Mac)երկխոսության տուփը բեռնելու համար ներմուծման ֆայլ, կամ գնալ Ֆայլ > Ներմուծում > Ֆայլ…Նույն տեղում ընտրեք մեր պատրաստած Illustrator CC ֆայլը և սեղմեք ներմուծում.Փոքր երկխոսության տուփ պետք է հայտնվի ընտրված ֆայլի անունով: Ընտրել կազմըբացվող ցուցակից, որը կոչվում է Ներմուծման տեսակ.
Ավելին արագ ճանապարհֆայլի ներմուծում - կրկնակի սեղմեք նախագծի վահանակի սյունակի տեղը: Timeline Panel-ում մենք կտեսնենք նոր կազմը: Մենք կրկնակի սեղմում ենք դրա վրա: Այժմ մենք պետք է տեսնենք Illustrator CC շերտերը նարնջագույն պատկերակներով իրենց անուններից ձախ:
Նախքան գործի անցնելը, մենք պետք է փոխարկենք այս բոլոր շերտերը ձևավորել շերտերը. Մենք պետք է ընտրենք դրանք բոլորին Ctrl+A/Command+A, կամ ձեռքով օգտագործելով Shift + Ձախ մկնիկ. Դրանից հետո աջ սեղմեք շերտի վրա և ընտրեք Ստեղծել > Ստեղծել ձևեր վեկտորային շերտից.
Այժմ, երբ ընտրված են նոր շերտերը, դրանք քաշեք դեպի վահանակի վերին մաս՝ Illustrator CC շերտերից վերև, այնուհետև ջնջեք Illustrator CC շերտերը, որպեսզի դրանք չխանգարեն:
Illustrator CC շերտերի փոխակերպումը ձևի շերտերի After Effects CC-ում Թեև անհրաժեշտ չէ, բայց կարևոր է, որ յուրաքանչյուր շերտին համապատասխան անուն և/կամ գույն տանք: Սա մեզ թույլ կտա ավելի արդյունավետ աշխատել, քանի որ մենք կենտրոնանում ենք հիմնական կադրերի վրա: Ստորև բերված օրինակում պիտակների գույները քիչ թե շատ համընկնում են իրենց համապատասխան շերտերի լցոնումների հետ:
Շերտերի պիտակավորումը համապատասխան անուններով, գույներով, պիտակներով և դիրքերով շատ գործնական է: Օգտագործեք ստեղնաշարի դյուրանցումը կարգավորումները կարգավորելու համար Ctrl+K/Command+Kկամ Կազմը > Կազմման կարգավորումներ…Կոմպոզիցիայի կարգավորումներից մենք պետք է ընտրենք լայնությունը, բարձրությունը, շրջանակի արագությունը և տևողությունը լայնության, բարձրության, կադրի արագության և տևողության համար: Այս նախագծի համար ես ընտրեցի 60 կադր/վրկ՝ անիմացիան հարթ պահելու համար:
Վրա այս պահինԹվում է, թե ամեն ինչ պատրաստ է, բայց ևս մեկ բան կա, որ պետք է անել. Մենք պետք է խմբավորենք որոշակի շերտեր, որպեսզի դրանց շարժումները համաժամանակացվեն հիմնական շերտի հետ, որը մենք կարող ենք կառավարել: Այս մեթոդը կոչվում է դաստիարակություն.
Օգտագործեք Pick Whip՝ մի քանի շերտերի մայր շերտ նշանակելու համար: Մեր օրինակում ես հատկացրել եմ պակաս նշանակալից շերտեր (մանկական շերտեր), ինչպիսիք են դիմապակին, մարմնի մասերը, փայտը և պարանները մարմնի առաջնային շերտին (ծնող շերտ): Սա թույլ տվեց ինձ կառավարել ամբողջ մեքենայի դիրքը և պտույտը (բացառությամբ անիվների)՝ օգտագործելով մայր շերտը:
Անիմացիայի ստեղծում
Ես ուզում էի, որ մեքենան բախվի քարին և մի քիչ օդում կախված լինի: Ես էլ էի ուզում, որ ծառը վեր ու վար շարժվի ու բացի բունը։ Ես սկսեցի կառուցել քարը, մեքենան և անիվները: Այնուհետև ժամանակն էր հաղթահարել ամենամեծ խոչընդոտը՝ գործողությունը ծառի վրա դնելը: Երբ դա արվեց, ես սկսեցի աշխատել այնպիսի փոքր մանրամասների վրա, ինչպիսիք են դարակը և պարանները:
Էսքիզ, որը նկարագրում է անիմացիան Առաջին քայլը ռոքի տարր կամ շերտ պատրաստելն էր, բայց Illustrator CC-ին վերադառնալու փոխարեն ևս մեկ շերտ ավելացնելու համար ես պարզապես օգտագործեցի Pen Tool-ը After Effects CC-ում: Սա թույլ տվեց ինձ արագ ձևավորել փոքրիկ քար:
Օ՜, հզոր գրիչ գործիք: Բեռնախցիկը համեմատաբար պարզ խնդիր էր։ Ես տեղադրեցի այն մեքենայի հետևի մասում և խարիսխի կետ դրեցի ներքևի ձախ գագաթին: Օգտագործելով Pick Whip-ը, ես այն վերագրեցի մարմնի մայր շերտին: Նախավերջին քայլը պտտման էֆեկտ տալն էր, որն իր հերթին ավելի իրատեսական դարձրեց մեքենայի ցատկման պահը Bodymovin-ը՝ Lottie շարժական գրադարանի հետ համատեղ։
P.S.դուք կարող եք գտնել իմ Illustrator CC և After Effects CC ֆայլերը:
Սրբապատկերների հավաքածուն հասանելի է անվճար ներբեռնման համար՝ այստեղ:
Թափանցիկ GIF-ը Adobe Illustrator-ում կատարվում է հետևյալ կերպ. Գնացեք մենյու Ֆայլ > Պահպանել վեբ և սարքերի համար (Alt+Ctrl+Shift+S): Բացվող պատուհանում Օպտիմիզացված ֆայլի ձևաչափ դաշտում նախ պետք է գնաք ներդիր նկարի չափսը(նկարի չափսը). Փաստն այն է, որ ամբողջ էջը լռելյայնորեն մտնում է օպտիմալացման պատուհան, և դա սովորաբար անհրաժեշտ չէ: Հետևաբար, Պատկերի չափ ներդիրում հանեք վանդակը Հպեք Artboard-ին(Կտրել համապատասխան էջը) և սեղմել Դիմել կոճակը:
Այնուհետև ձևաչափի ընտրության ցանկում ընտրեք GIF և նշեք «Թափանցիկություն» վանդակը:
Դրանից հետո մենք կորոշենք, թե որ գույները կլինեն թափանցիկ։ Նկարում առկա բոլոր գույները պարունակվում են ներդիրում գունավոր սեղան(Գունավոր աղյուսակ) և ցուցադրվում են որպես գունավոր քառակուսիներ: Ընտրեք գործիք պատուհանի ձախ կողմում գտնվող գործիքագոտուց աչքի կաթիլիչ(pipette):
Գույները կարող են սահմանվել երկու եղանակով. Ամենահեշտ ձևն այն է, որ գույնը նշեք անմիջապես նկարի վրա կաթիլային սարքով, որից հետո գույնը կնշվի գունային աղյուսակի վրա մուգ հարվածով: Դե, եթե հստակ գիտեք, թե որ գույնը պետք է լինի թափանցիկ, կարող եք այն ընտրել անմիջապես գունային աղյուսակում՝ սեղմելով համապատասխան գունավոր վանդակը։ Իսկ առաջին և երկրորդ դեպքերում, եթե անհրաժեշտ է ընտրել մի քանի գույն, ապա պետք է աշխատել Shift (կամ Ctrl) ստեղնը սեղմած։ Գույն ընտրելուց հետո պետք է ծրագրին հրահանգ տալ այն թափանցիկ դարձնել։ Դա անելու համար սեղմեք պատկերակի վրա Քարտեզում ընտրված գույները Թափանցիկ(Ավելացրեք ընտրված գույները թափանցիկությանը): Նկարում այս կոճակը շրջանագծված է, իսկ կարմիր գույնը դրված է թափանցիկ: Պատկերի վրա կհայտնվի թափանցիկ տարածք, իսկ գունային աղյուսակի քառակուսին կփոխի իր տեսքը՝ դրա մի մասը կդառնա սպիտակ եռանկյունի: Ընտրված գույնը չեղարկելու համար անհրաժեշտ է ընտրել այն Գույնի աղյուսակում, այնուհետև կրկին սեղմել Քարտեզների ընտրված գույները Թափանցիկ պատկերակը:
Մի քանի խոսք թափանցիկության սահմանման մեթոդի մասին. Բացվող ընտրացանկը պատասխանատու է դրա համար: Նշեք Transparency Dither ալգորիթմը, ռուսերեն - Թափանցիկության մոդելավորման ալգորիթմ (նկ. ստորև): Կան չորս ընտրություն՝ No Transparency Dither – առանց ալգորիթմ, Diffusion Transparency Dither – ցրված ալգորիթմ, Pattern Transparency Dither – օրինաչափության վրա հիմնված ալգորիթմ և Noise Transparency Dither – աղմուկի վրա հիմնված ալգորիթմ: Դիֆուզ ալգորիթմի ռեժիմում սահիչը ակտիվանում է Գումարը(Գումար), որը թույլ է տալիս փոխել դիֆուզիոն արժեքը: Ի՞նչ կիրառել գործնականում: Կախված նպատակից և պատկերից: Ես չեմ օգտագործում այս տարբերակը և միշտ թողնում եմ լռելյայն՝ No Transparency Dither:
Սեղմեք Save - թափանցիկ GIF-ը պատրաստ է: Աշխատանքը կատարվել է Adobe Illustrator տարբերակով CS4 (v.14), սակայն բոլոր գործողությունները և ստեղնաշարի դյուրանցումները տեղին են ավելի վաղ CS3 տարբերակի համար (v. 13):
Բարեւ բոլորին! Այսօր ես կփորձեմ կատարել ծրագրի առանձնահատկությունների նկարագրությունը Adobe Illustrator, համեմատելով այն flush-ի հնարավորությունների հետ։ Սա կլինի ոչ թե ոսկրային ծրագրի գլոբալ վերլուծություն, այլ ավելի շուտ նկարագրություն որոշ հետաքրքիր չիպերի, որոնք ես հայտնաբերեցի այս ծրագրում: Ես ուսումնասիրելիս տեղեկատվություն եմ հավաքել մաս առ մաս, որպեսզի այդ ամենը տեղադրեմ մեկ գրառման մեջ: Անմիջապես պետք է խոստովանեմ, որ ես գերփորձառու իլյուստրատոր չեմ, միայն վերջին վեց ամիսն է, ինչ այն օգտագործում եմ նկարչության մեջ (մինչ այդ ամեն ինչ նկարում էի ֆլեշով): Շատերը դժգոհում են, որ նկարազարդողը բարդ է, միշտ չէ, որ ինտուիտիվ է: Որոշ չափով համաձայն եմ, որ ֆլեշից հետո այս ծրագիրը դժվար է։ Բայց այստեղ գլխավորը ոչ թե թողնելն է, այլ ուսումը շարունակելը։ Եվ մի երկու շաբաթ անց միտք է առաջանում՝ ինչպե՞ս էի կարողանում նախկինում առանց դրա։
Այսպիսով, այն, ինչ ինձ դուր եկավ իլյուստրատորի մեջ, և այն, ինչ ես գտա ինձ համար, որը ֆլեշում չէ:
1. Սկսեմ ամենապարզից, բայց միևնույն ժամանակ անհրաժեշտից։ Փորձեք առարկաները դասավորել շրջանագծի մեջ՝ բռնկվելով: Նախկինում եղել է Deco գործիք, բայց այն հանվեց, ըստ երեւույթին ավելորդ համարվեց։ Մենք որոշեցինք, որ ավելի հաճելի կլինի դա անել ձեռքով։ Illustrator-ն ունի այս հատկությունը. Էֆեկտ - Խեղաթյուրում և փոխակերպում - Փոխակերպում.
Ամեն ինչ արագ և պարզ է, մենք ինքներս ենք պարամետրերում սահմանում արժեքները (օբյեկտների միջև հեռավորությունը, պատճենների քանակը):
2. Զիգզագ
Նույնիսկ ավելի պարզ, բայց, այնուամենայնիվ, օգտակար բան. Մանրուք կթվա, բայց ֆլեշում պետք է ձեռքով նկարել, իլյուստրատորում սա վայրկյանների հարց է։
3. Օբյեկտների դեֆորմացիա (Warp)
Ֆլեշում նման բան չկա։ Ստորև բերված օրինակում ես ցույց տվեցի պարզ ձևերը դեֆորմացնելու ընդամենը 2 եղանակ (Effect - Warp - Arc / Fish): Իրականում դրանք 15-ն են։ Վերջին տարբերակըծրագրերը։
4. Անկյունների ավտոմատ կլորացում (կլոր անկյուններ)
Դա կարելի է անել ձեռքով. գրաֆիկական օբյեկտի վրա, երբ ընտրվում է անկյունում (բոլոր անկյուններում), հայտնվում է սպիտակ կետ և կլորացված գծի նշան: Քաշեք մկնիկը, հարմարեցրեք ձեր ճաշակին:
Բայց սա վերաբերում է միայն ձևերին, մատիտի գծով մի փոքր այլ կերպ. կիրառեք կլորացման էֆեկտը ( Էֆեկտ - Stylize - Կլոր անկյուններ) Ելքում մենք ստանում ենք նույն արդյունքը:
5. Կոշտացնել
Էֆեկտը կիրառվում է պարզ ձևերի վրա ( Ազդեցություն-Խեղաթյուրում և փոխակերպում-կոպտում) Արդյունքում մենք ստանում ենք մի բան, որը նման է ցածր պոլիմերային 3D մոդելներին: Կարծում եմ, որ դա թույն է :) Եվ ամենակարեւորը `շատ պարզ:
6 Pucker&Bloat(Քաշեք և փչեք)
Օրինակ ստորև նկարում.
7. Ձևի ընդլայնում (Offset Path)
Ֆլեշում կա Expand Fill (fill extension) ֆունկցիան, այն ընդհանրապես չի աշխատում մատիտ գծերով, ի տարբերություն illustrator-ի։
8. Վրձիններ (Art Brush, Pattern Brush, Scatter Brush)
Օրինակների համար տես ստորև նկարը.
9. Հյուսվածքային խոզանակ (Texture Brushes)
Illustrator-ում կան նաև շատ հյուսվածքային վրձիններ, որոնց մասին ես գրել եմ և ինչպես են դրանք հայտնվել նոր տարբերակֆլեշ - . Նկատվել է, որ Adobe Animate-ում վրձինների օգտագործումը սարսափելի դանդաղ է ընթանում։ վերջ :(
10. Ես վստահ չեմ, որ սա հնարք է, բայց ես ուզում եմ կենտրոնանալ զվարճալի անունով վրձնի վրա բլիթԽոզանակ. Գտնվում է գործիքագոտու վրա, շատ գեղեցիկ վրձին է օգտագործման համար: Մի փունջ կարգավորումներ ունի, ինձ սովորականից շատ է դուր գալիս։ Դժվար է բառերով բացատրել դրա առավելությունները, ավելի լավ է մեկ անգամ փորձել:
10.Split to Grid
Մեկ այլ օգտակար հատկություն է Split to Grid (Object-Path-Split to Grid) ֆունկցիան, որը թույլ է տալիս կտրել ձևը հավասար հատվածների: Ի՞նչ է սա մեզ հիշեցնում: Ճիշտ է՝ պատուհաններ բարձրահարկ շենքում։ Ինչ վերաբերում է ինձ, մի թույն բան նկարելու համար, օրինակ, քաղաքային բնապատկերներ;)
Ուրիշ մեկը օգտակար գործիք, ներկայացված է illustrator-ում, հավանաբար առաջին թողարկումից ի վեր։ Դրանով դուք կարող եք ստեղծել, օրինակ, փայտի հյուսվածքներ.
12. Տեղափոխել (աջ - Փոխակերպել - Տեղափոխել)
Օֆսեթ օբյեկտը ըստ սահմանել հեռավորությունը. Ցանկության դեպքում կարող եք անմիջապես ստեղծել պատճեն, որը կտեղադրվի ընտրված օբյեկտից ցանկալի հեռավորության վրա հորիզոնական / կամ ուղղահայաց: Flash-ի ավելի վաղ տարբերակն ուներ պլագին, որն արեց այս գործառույթը. Ցավոք սրտի, չեմ հիշում նրա անունը։
Շատ հարմար է իլյուստրատորում ստեղծել անխափան նախշեր ( Օբյեկտ-Պատտերն-Մեյք) Հիշում եմ, թե ինչպես էի խելահեղորեն փայլում փայլում՝ ստեղծելով . CC 2015-ի illustrator տարբերակում ամեն ինչ ավտոմատացված է, մի շարք կարգավորումներ կօգնեն ձեզ ստեղծել օրինաչափություն տասնյակ տատանումների մեջ՝ ձեռքի տակ ունենալով ընդամենը մի քանի գրաֆիկական տարրեր: Ավելի շատ վաղ տարբերակներըծրագրերը պետք է կատարվեին ձեռքով, ինչպես մինչ այժմ ֆլեշում:
(Նշում. օրինաչափությունը կարելի է դարձնել վեկտորային խմբագրվող օբյեկտ՝ օգտագործելով վերլուծական ֆունկցիան ( Օբյեկտ-Ընդարձակել արտաքին տեսքը).
14. Օբյեկտի խճանկար (Խճանկար)
Ստեղծեք գունային գունապնակ՝ հիմնվելով գոյություն ունեցող պատկերի վրա: Ներմուծեք ձեր հավանած նկարը նկարազարդման մեջ (Բաց), այնուհետև Օբյեկտ - Ստեղծել օբյեկտի խճանկար. Պարամետրերում մենք նշում ենք բաժանման հաճախականությունը բարձրության և լայնության մեջ:
Եվ ելքում մենք ստանում ենք.
15. Խառնել (խառնել)
Օգտագործվում է գրադիենտներ ստեղծելու համար: Դուք կարող եք ստեղծել քայլ առ քայլ անցումներ, ինչպես, օրինակ, նկարում: Չեմ կարող ասել, որ հաճախ եմ օգտագործում, բայց ինչ-որ մեկին կարող է օգտակար լինել։ Ինձ թվում է, որ այն կարելի է օգտագործել ֆոնային պարզ նկարներ ստեղծելու համար։
Գործիքը կարող է օգտագործվել նաև օբյեկտների կլոնավորման համար: Մենք տեղադրում ենք երկու օբյեկտ միմյանցից հեռավորության վրա և կիրառում Blend Options, ընտրում ենք քայլերի քանակը (կլոնավորված օբյեկտների քանակը):
16. Build Shape Tool:Շատ հարմար բան պրիմիտիվների հետ աշխատելու համար։ Մի ակնթարթում, ինչպես ինձ թվաց, ավելի քիչ հարմար է։
Alt-ը պահելով և ընտրված հատվածների վրա սեղմելով՝ ջնջեք հատվածները: Եթե մենք պարզապես մկնիկը քաշենք մի քանի ընտրված տարածքների վրա՝ միացումներ:
Հավելում - գործիք, որն օգնում է ավտոմատ կերպով կտրել, միացնել և այլն: ընտրված ձևեր. Ինչ վերաբերում է ինձ, դա այնքան էլ հարմար չէ, ավելի հաճախ եմ օգտագործում Կառուցելձեւավորելգործիք.
(արտատախտակներ)
18. Custom Tool Panel
Ձեր սեփական գործիքագոտին ստեղծելու ունակություն՝ հրաժարվելով ավելորդներից և ընտրել միայն այն, ինչ դուք օգտագործում եք:
Ֆլեշում, արվեստի տախտակներ, մասնավորապես տեսարաններ ( Տեսարան 1,2,3..) գտնվում են առանձին, և դուք պետք է անցեք դրանց միջև (Shift + F2): Իլյուստրատորում դրանք բոլորը կարող են տեղադրվել ձեր աչքի առաջ: Հարմար է, երբ նույն գծագրի մի քանի տարբերակ եք պատրաստում, որպեսզի համեմատության համար բոլոր տարբերակները ձեր աչքի առաջ լինեն։
19.Իզոմետրիա հետ Գրաֆիկական ոճեր
Եվ վերջին բանը իզոմետրիայի ստեղծումն է առանց 1 սեղմումով (ավելի ճիշտ՝ 3 կտտոցով, քանի որ մենք ունենք 3 կողմ;) օգտագործելով գրաֆիկական ոճեր ( Գրաֆիկական ոճեր) Ինչպես է դա արվում, հաջորդ անգամ կգրեմ։
Իլյուստրատորի ընդհանրությունը ֆլեշի հետ օբյեկտը սիմվոլում (սիմվոլ) պահելու ունակությունն է, և այս սիմվոլը կարող է նաև առանց խնդիրների փոխանցվել ֆլեշի (ֆլեշում բացել .ai ֆայլը. Ներմուծում - Ներմուծում դեպի բեմ).
Իլյուստրատորի խորհրդանիշն ունի նույն հատկությունները, ինչ ֆլեշում:
Եվ վերջում ես կգրեմ այն, ինչ illustrator-ում, իմ կարծիքով, զիջում է ֆլեշին: Այո, այո, և կա: Եվ սա լրացման գործիքն է ( ներկի դույլ) Ինչքան էլ փորձում եմ ընտելանալ illa-ում, ֆլեշում ավելի հարմար է։
Եթե իմ գրառումները օգտակար են դարձել ձեզ համար, կամ եթե ցանկանում եք ինչ-որ բան ավելացնել ինքնուրույն, բարի գալուստ մեկնաբանություններում: Հաջողություն բոլորին;)
Հիմա եկեք մի փոքր բարդացնենք խնդիրը՝ եկեք անիմացիոն Flash բաններ պատրաստենք։ Իհարկե, այս դեպքում պետք չէ խոսել լիարժեք Flash անիմացիայի մասին. դրա համար կան մասնագիտացված փաթեթներ: Բայց դուք կարող եք նաև օգտագործել Illustrator-ը պարզ, սիրողական տեսանյութ ստեղծելու համար:
Adobe Illustrator-ում չկան հատուկ գործիքներ և միջերեսային գործիքներ, ինչպիսիք են ժամանակացույցը, որոնք բնորոշ են անիմացիայի զարգացման ծրագրերին: Բայց կա մեկ նրբություն՝ շերտերը կարող են օգտագործվել որպես շրջանակ։
Ստեղծեք պաստառ միայն տեքստով:
- Խմբավորել նշանները հրամանով Օբյեկտ › Խումբ(Օբյեկտ › Խումբ):
- Հաջորդ խնդիրը տառատեսակի նիշերից ուրվագծային օբյեկտներ պատրաստելն է, հակառակ դեպքում շերտերի ճիշտ ձևավորումը չի աշխատի։ Դա անելու համար ընտրեք խումբ և ընտրեք Տեսակ › Ստեղծել ուրվագծեր(Տառատեսակ › Հետք):
- Դրանից հետո բացեք ներկապնակի ընտրացանկը Շերտեր(շերտեր)՝ սեղմելով գունապնակում գտնվող սլաքի տեսքով կոճակը (նկ. 8.11):
Բրինձ. 8.11. Շերտերի պալիտրա մենյու
Մեզ հետաքրքրում է այս ընտրացանկի հրամանը Ազատում շերտին (հաջորդականություն)(Convert to Layers (Sequentially)), որը յուրաքանչյուր առանձին օբյեկտ թարգմանում է նոր շերտի: Խնդրում ենք նկատի ունենալ, որ հրամանը կիրառելիս պետք է ընտրել խումբը խումբ, ոչ մի շերտ Շերտ 1.
Ինչպիսին պետք է լինի ներկապնակը Շերտեր(Շերտեր) կատարումից հետո Ազատում շերտին (հաջորդականություն)(Փոխակերպեք շերտերի (հաջորդական)), ցույց է տրված նկ. 8.12.
Բրինձ. 8.12. Շերտերի պալիտրա թողարկումից հետո շերտ (հաջորդականություն)
Սա ավարտում է նախապատրաստումը, դուք կարող եք խնայել օգտագործելով Պահել համացանցի համար(Save for Web) SWF-ին: SWF Flash տեխնոլոգիաների վրա հիմնված հիմնական գրաֆիկական ձևաչափն է։ Ավելի ճիշտ կլինի ասել, որ սա Flash ֆորմատն է (նկ. 8.13):
Հավանաբար, այսօր բոլոր օգտատերերը քիչ թե շատ ծանոթ են Flash-ին։ Ներկայումս այն համացանցում ամենասովորական անիմացիոն ձևաչափն է և օգտագործվում է մուլտիմեդիա վեբ էջերի ճնշող մեծամասնությունը կառուցելու համար:
Իհարկե, Flash-ի հնարավորությունների նույնիսկ տասներորդը չի ներդրված Adobe Illustrator-ում, քանի որ ծրագիրը նախատեսված չէ դրա համար: Այնուամենայնիվ, դրա մեջ դուք կարող եք ստեղծել կամ ստատիկ նկար, կամ պարզ անիմացիա:
Բրինձ. 8.13. SWF ձևաչափի օպտիմալացման կարգավորումներ
Կան հետևյալ պարամետրերը.
- Միայն կարդալու համար(Միայն կարդալով): Եթե նշեք վանդակը, ֆայլը կգրվի այնպես, որ այլևս հնարավոր չէ բացել որևէ ծրագրում խմբագրելու համար։ Սա մի կողմից նվազեցնում է ֆայլերի չափը, իսկ մյուս կողմից՝ պաշտպանում ձեր հեղինակային իրավունքները։
- Պարամետրը պիտակավորված է 1. Պարամետր, որը նշում է պահպանման տեսակը՝ պատկեր կամ անիմացիա:
- Եթե ընտրում եք տարբերակը AI ֆայլ դեպի SWF ֆայլ(Illustrator ֆայլը SWF ֆայլ), պատկերը կպահվի որպես ստատիկ պատկեր, ճիշտ այնպես, ինչպես տեսնում եք էկրանին Illustrator-ում աշխատելիս:
- Շերտեր դեպի SWF շրջանակներ(Layers to SWF Frames) թույլ է տալիս անիմատացնել գոյություն ունեցող շերտերը, որոնք կարտացոլվեն որպես շրջանակներ: Մենք պետք է ընտրենք այս տարբերակը:
- Curve Quality(Կորերի որակ): Բնօրինակ պատկերի կորերի ֆայլը կրկնող կորերի ճշգրտությունը: Այս պարամետրի նվազեցումը զգալիորեն նվազեցնում է որակը, հատկապես փոքր մանրամասների ոլորտում, բայց նվազեցնում է ֆայլի չափը: Մեր դեպքում օպտիմալ արժեքը «7» է:
- շրջանակի արագություն(Շրջանակի հետաձգում): Կադրերի արագությունը և, որպես հետևանք, անիմացիայի արագություն: Որպեսզի էֆեկտը ճիշտ լինի, սահմանեք ոչ ավելի, քան 4 կադր վայրկյանում:
- հանգույց(Կրկնել): Մի քանի անգամ նվագարկեք անիմացիա: Հարմար է անիմացիաների համար, որտեղ կրկնվող հանգույցը կարևոր է: Վահանակը պատկանում է այս տեսակին։
