Ինչպես տեղադրել gif անիմացիան illustrator-ում: Illustrator-ում թափանցիկ ֆոնով GIF-ի պատրաստում։ Illustrator ֆայլերի ներմուծում Flash հավելվածում

Flash (SWF) ֆայլի ձևաչափը հիմնված է վեկտորային գրաֆիկայի վրա և նախատեսված է ցանցի համար մասշտաբային, կոմպակտ գրաֆիկայի համար: Քանի որ այս ֆայլի ձևաչափը հիմնված է վեկտորային գրաֆիկայի վրա, օբյեկտը պահպանում է պատկերի որակը ցանկացած լուծաչափով և իդեալական է անիմացիոն շրջանակներ ստեղծելու համար: Illustrator-ում դուք կարող եք ստեղծել առանձին անիմացիոն շրջանակներ շերտերի վրա և այնուհետև արտահանել պատկերի շերտերը որպես անհատական ​​շրջանակներ՝ կայքում օգտագործելու համար: Կարող եք նաև սահմանել խորհրդանիշներ Illustrator ֆայլում՝ անիմացիայի չափը նվազեցնելու համար: Երբ արտահանվում է, յուրաքանչյուր նշան սահմանվում է միայն մեկ անգամ SWF ֆայլում:

Արտահանման հրաման (SWF)

Ապահովում է առավելագույն վերահսկողություն անիմացիայի և բիթերի սեղմման վրա:

Ապահովում է ավելի շատ վերահսկողություն SWF-ի և bitmap ձևաչափերի խառնուրդի վրա՝ մասնատված դասավորության մեջ: Այս հրամանն առաջարկում է ավելի քիչ պատկերի ընտրանքներ, քան Export (SWF) հրամանը, բայց օգտագործում է ամենավերջին օգտագործված Export հրամանի տարբերակները (տես):

Նկատի ունեցեք հետևյալ ուղեցույցները՝ որպես SWF պահելու օբյեկտ պատրաստելիս:

Device Central-ի միջոցով դուք կարող եք տեսնել, թե ինչպես են պատկերված Illustrator-ի նկարները Flash Player-ում տարբեր ձեռքի սարքերում:

Illustrator-ի գրաֆիկայի տեղադրում

Illustrator-ում ստեղծված գրաֆիկական օբյեկտը կարելի է արագ, հեշտությամբ և հեշտությամբ պատճենել և տեղադրել Flash հավելվածում:

Երբ Illustrator-ի գրաֆիկը տեղադրում եք Flash հավելվածում, պահպանվում են հետևյալ հատկանիշները:

Եզրագծեր և ձևեր

• Կաթվածի հաստությունը

  Գրադիենտների սահմանումներ

  Տեքստ (ներառյալ OpenType տառատեսակները)

  Առնչվող պատկերներ

• Խառնուրդի ռեժիմներ

Բացի այդ, Illustrator-ը և Flash-ն աջակցում են հետևյալ հնարավորություններին գրաֆիկ տեղադրելու ժամանակ:

Illustrator-ի ստեղծագործության մեջ շերտեր ընտրելիս բարձր մակարդակԱմբողջությամբ և տեղադրելով դրանք Flash հավելվածում, շերտերը և դրանց հատկությունները (տեսանելիությունը և արգելափակումը) պահպանվում են:

Illustrator-ի գունային ձևաչափերը, բացի RGB-ից (CMYK, մոխրագույն և հատուկ ձևաչափեր) Flash-ի միջոցով փոխակերպվում են RGB-ի: RGB գույներտեղադրված է սովորական ձևով.

Երբ ներմուծում կամ տեղադրում եք Illustrator-ի գեղարվեստական ​​գործերը, կարող եք օգտագործել տարբեր ընտրանքներ՝ որոշակի էֆեկտներ (օրինակ՝ տեքստի միջոցով տրված ստվերը) որպես Flash զտիչներ պահելու համար:

Flash-ը պահպանում է Illustrator-ի դիմակները:

Արտահանել SWF ֆայլերը Illustrator-ից

Illustrator-ից արտահանվող SWF ֆայլերը նույն որակի և սեղմման են, ինչ Flash-ից արտահանված SWF ֆայլերը:

Արտահանելիս դուք կարող եք ընտրել մի շարք նախապես սահմանված ոճերից օպտիմալ արդյունքի համար և նշել, թե ինչպես են օգտագործվում մի քանի գեղարվեստական ​​տախտակներ, ինչպես են փոխակերպվում նիշերը, շերտերը, տեքստը և դիմակները: Օրինակ, կարող եք ընտրել Illustrator-ի խորհրդանիշները արտահանել որպես ֆիլմեր կամ գրաֆիկա, կամ ստեղծել SWF սիմվոլներ Illustrator-ի շերտերից:

Ներմուծում Illustrator ֆայլեր Flash հավելվածին

Illustrator-ում ամբողջական դասավորություն ստեղծելու և այն Flash-ում մեկ քայլով ներմուծելու համար կարող եք պահպանել ձեր ստեղծագործությունը Illustrator-ի բնիկ (AI) ձևաչափով և այն բարձր ճշգրտությամբ ներմուծել Flash՝ օգտագործելով File > Import To Workspace հրամանները: տարածքը» կամ « Ֆայլ» > «Ներմուծել գրադարան»:

Եթե ​​Illustrator ֆայլը պարունակում է մի քանի գեղանկարչական տախտակներ, ընտրեք նկարչական տախտակը, որը պետք է ներմուծվի Flash Import երկխոսության վանդակից և նշեք այդ գեղարվեստական ​​տախտակի յուրաքանչյուր շերտի կարգավորումները: Ընտրված գեղարվեստական ​​տախտակի բոլոր օբյեկտները ներմուծվում են Flash՝ որպես մեկ շերտ: Երբ դուք ներմուծում եք մեկ այլ գեղարվեստական ​​տախտակ նույն AI ֆայլից, այդ նկարչական տախտակի օբյեկտները ներմուծվում են Flash՝ որպես նոր շերտ:

Երբ ներմուծում եք Illustrator-ի գեղարվեստական ​​աշխատանքը որպես AI, EPS կամ PDF ֆայլեր, Flash-ը պահպանում է նույն հատկանիշները, ինչ երբ տեղադրում եք Illustrator-ի գեղարվեստական ​​աշխատանքը: Բացի այդ, եթե Illustrator ֆայլը, որը ներմուծում եք, պարունակում է շերտեր, կարող եք դրանք ներմուծել՝ օգտագործելով հետևյալ մեթոդներից մեկը:

Փոխակերպեք Illustrator-ի շերտերը Flash շերտերի:

Փոխակերպեք Illustrator-ի շերտերը Flash շրջանակների:

Փոխակերպեք Illustrator-ի բոլոր շերտերը մեկ Flash շերտի:

Այսօր մենք ունենք Adobe Illustrator-ի անսովոր ձեռնարկ: Որովհետև այս անգամ մենք ոչ թե ստատիկ նկար ենք պատրաստելու, այլ իրական անիմացիա։ Պատկերացրեք, ստացվում է, որ Adobe Illustrator-ի օգնությամբ կարելի է նաև մուլտֆիլմեր նկարել :)

Եվ դրա համար մեզ ոչինչ պետք չէ։ Շերտերի իրավասու կազմակերպում և վերջնական աշխատանքի արտահանում swf ձևաչափով, որտեղ յուրաքանչյուր շերտ վերածվում է անիմացիոն շրջանակի։ Այսօրվա ձեռնարկում մենք կնկարենք հետհաշվարկի անիմացիա ռետրո ֆիլմի ոճով: Արդյունքը պետք է լինի ֆլեշ ֆիլմ այս նույն հետհաշվարկով:

Առաջին բանը, որ պետք է անել, ապագա անիմացիայի համար անհրաժեշտ բոլոր տարրերը նկարելն է: Դա անելու համար ես առանձին փաստաթղթում պատրաստեցի ֆիլմի շրջանակի երկու դիրք՝ հղումի համար նախատեսված շրջանակ, որը կտրված է առանձին հատվածների, հյուսվածք և ուղղահայաց քերծվածք՝ հնության էֆեկտը ավելացնելու համար, ինչպես նաև բոլոր թվերն ու մակագրությունները:

Երբ մեր մուլտֆիլմի բոլոր մասերը պատրաստ լինեն, կարող եք սկսել ինքնին անիմացիան ստեղծել։ Հարմարության համար դա լավագույնս արվում է նոր փաստաթղթում: Այս դեպքում շերտերը կխաղան անիմացիոն շրջանակների դերը։ Իսկ հենց առաջին շերտում պարզապես անհրաժեշտ է պատճենել ֆիլմի կադրը։ Տեղադրեք այն աշխատանքային տարածքի մեջտեղում:

Այժմ ստեղծեք երկրորդ շերտը և դրա մեջ պատճենեք ֆիլմի շրջանակը, որի մեջ եզրերի անցքերը կատարվում են հերթափոխով: Այն նաև պետք է կենտրոնացված լինի:

Այս երկու շերտերից արդեն կարող եք ստանալ շարժվող ֆիլմի անիմացիան։ Բայց հետագայում մեզ շատ ավելի շատ շերտեր կպահանջվեն։ Այսպիսով, ընտրեք առաջին երկու շերտերը, անցեք վահանակի ընտրանքներ և պատրաստեք շերտերի պատճենը:

Նմանապես, մենք պետք է 12 շերտ կուտակենք ֆիլմի շրջանակներով, որոնք սահմանում են դրա շարժումը:

Այժմ մենք ունենք շերտերի մի ամբողջ փունջ, և դրանք բոլորը տեսանելի են: Այն առումով, որ վերին շերտերը փակում են ստորինները, ինչը շատ հարմար չէ աշխատանքի համար։ Հետևաբար, դուք կարող եք անջատել որոշ շերտեր՝ կտտացնելով շերտի անվան ձախ կողմում գտնվող աչքի պատկերակը: Բոլոր շերտերը միանգամից անջատելու կամ միացնելու համար սեղմած պահեք Alt ստեղնը՝ միաժամանակ սեղմելով աչքի պատկերակը: Շերտերը միացնելով և անջատելով՝ դուք կարող եք ճշգրիտ տեսնել, թե ինչ է գտնվում մեր ապագա անիմացիայի որոշակի շրջանակում: Եվ հիմա, որպեսզի մենք մի փոքր ցնցում ավելացնենք ֆիլմի շարժմանը, պետք է ստացված շրջանակները մի փոքր տեղափոխել տարբեր ուղղություններով։ Դա անելու համար միացրեք միայն այն շերտը, որով պատրաստվում եք աշխատել այս պահին, և այնուհետև շրջանակը տեղափոխեք մի քանի պիքսել երկու կողմ:

Երբ դուք անցնեք բոլոր շերտերը և ավելացնեք մի փոքր տեղաշարժ, կարող եք սկսել շարժվող շրջանի անիմացիա ստեղծել: Դա անելու համար պատճենեք հատվածներից բաղկացած շրջանակը մուլտֆիլմի մասերի փաստաթղթից և դրեք այն ֆիլմի շրջանակի վերևում գտնվող առաջին շերտի վրա:

Եթե ​​ընտրվածը հանեք շրջանակից, ապա այն կունենա մեկ ամբողջություն: Սա հենց այն է, ինչ մեզ պետք է:

Բայց քանի որ այն բաղկացած է առանձին հատվածներից, հնարավոր է, փոխելով դրանց գույնը, շատ արագ և հեշտությամբ ստեղծել անիմացիա։ Դա անելու համար պատճենեք այս շրջանակը երկրորդ շերտին և առաջին հատվածը դարձրեք ավելի թեթև: Հիշում եք, որ շարժման ընթացքում թաղանթը ցնցվում է, ուստի անհրաժեշտ չէ շրջանակը դնել հենց կադրի կենտրոնում։ Տեղադրեք այն աչքի վրա:

Նմանապես, դուք պետք է կրկնօրինակեք շրջանակը յուրաքանչյուր հաջորդ շերտի վրա, մինչդեռ ավելի բաց գույնով ներկեք մեկ հատված ավելի, քան նախորդ անգամ: Այս 12 շերտերը միասին կազմում են ֆիլմի շարժման անիմացիա՝ լցնող շրջանով։

Հաջորդը մենք պետք է հյուսվածքներ ավելացնենք մեր շերտերին: Միացրեք առաջին շերտը և պատճենեք հյուսվածքը աղբյուրի ֆայլից՝ այնտեղ պահեստամասերով:

Հետո հերթով միացրեք հաջորդ շերտերը և այնտեղ պատճենեք նույն հյուսվածքը։ Յուրաքանչյուր շրջանակի վրա այն տարբեր տեսք տալու համար պարզապես պտտեք այն 90 աստիճանով: Ինչպես կռահեցիք, մենք պետք է հյուսվածքներ ավելացնենք բոլոր 12 կադրերին:

Եթե ​​դուք արդեն բավականին հոգնել եք պատճենելուց, ապա ես կարող եմ ձեզ գոհացնել. շատ քիչ է մնացել: Ամենադժվարն ավարտված է: Մնում է ուղղահայաց քերծվածքներ ավելացնել, և գրեթե ամեն ինչ: Դա անելու համար կրկին պատճենեք բնօրինակ քերծվածքը և դրեք այն կամայական տեղում մի քանի շերտերով: Իմ դեպքում քերծվածքները հայտնվում են ընդամենը երկու շերտով։

Այժմ, երբ ֆիլմի անիմացիայի հիմնական ցիկլը պատրաստ է, մնում է թվերը ավելացնել։ Քանի որ մենք հաշվում ենք 3-ից մինչև 1, գումարած Go!!! բառը, մեզ էլ ավելի շատ շերտեր են պետք: Ոչ թե 12, այլ 48: Դա անելու համար պետք է պատրաստի շերտերի ևս երեք օրինակ ֆիլմի անիմացիայով:

Եվ հետո ամեն ինչ պարզ է. Միացրեք հենց առաջին շերտը և այնտեղ դրեք երեք թիվը։

Այնուհետև դուք պետք է պատճենեք այս նկարը հաջորդ շերտերում, մինչև շրջանակի անիմացիան ավարտվի: Երբ հասնեք շերտերի հաջորդ օրինակին, որտեղ շրջանակը կրկին ամբողջությամբ կլցվի, պետք է դնել երկու թիվը: Նույն կերպ պատճենեք թիվ մեկը ցանկալի շերտերի մեջ։ Եվ երբ հասնեք Go!!! պիտակի վերջնական շերտերին, պարզապես ջնջեք շրջանակը՝ նախքան պիտակը ցանկալի շերտի վրա պատճենելը:

Այս ամենը անիմացիայի հետ է կապված: Այստեղ գլխավորը չշփոթվելն է։ Շերտերին կարելի է հարմար անուններ տալ, բայց ես ինչ-որ չափով ծույլ էի :) Եվ այնուամենայնիվ, երբ ավարտեք, համոզվեք, որ բոլոր շերտերը նորից միացրեք՝ սեղմելով աչքի պատկերակը:

Արտահանման կարգավորումների պատուհանում համոզվեք, որ դրեք Export As: AI Layers SWF Frames: Հենց այս տարբերակն է Illustrator-ի շերտերը վերածում անիմացիոն շրջանակների։ Հաջորդը, սեղմեք Ընդլայնված կոճակը:

Կբացվի լրացուցիչ պարամետրեր. Այստեղ դուք պետք է սահմանեք շրջանակի արագությունը: Ես վայրկյանում 12 կադր ունեմ: Looping վանդակը պատասխանատու է անիմացիայի հեծանիվ վարելու համար: Նրա շնորհիվ տեսահոլովակը կխաղա շրջանաձեւ։ Իսկ Layer Order. Bottom Up տարբերակը պատկերազարդող շերտերը ներքևից վերև ներկայացնում է վահանակում: Հենց այսպես մենք կառուցեցինք մեր անիմացիան։

Արդյունքում մենք ստանում ենք ֆլեշ ֆիլմ մեր անիմացիայով։

Այժմ դուք դա տեսնում եք պարզ անիմացիա Adobe Illustrator-ում անելն այնքան էլ դժվար չէ, որքան թվում է առաջին հայացքից:

Բայց երկար տեսանյութեր կամ ինտերակտիվ հավելվածներ ստեղծելու համար դեռ ավելի լավ է օգտագործել Adobe Flashկամ այլ ֆլեշ խմբագիրներ: Օրինակ, ես այս կատվին հին ժամանակ եմ պատրաստել Macromedia Flashոր ես փորել եմ աշխատանքի ժամանակ։

Նաև վերջերս, HTML5-ը և CSS3-ն ավելի ու ավելի են օգտագործվում անիմացիա ստեղծելու համար: Տրված կոդըաջակցվում է ժամանակակից բրաուզերների կողմից և չի պահանջում ֆլեշ նվագարկիչ օգտագործել:

Հռոմեական aka dacascasհատուկ բլոգի համար Notes of a microstock illustrator

Բաժանորդագրվեք մեր տեղեկագրին, որպեսզի բաց չթողնեք որևէ նոր բան.

Վեբ գրաֆիկայի օպտիմիզացում

Գրաֆիկական տեղեկատվությունշատ ավելի դանդաղ է, քան տեքստը, և պատկերների բեռնման ժամանակը համաչափ է նրանց գրաֆիկական ֆայլերի չափին: Ահա թե ինչու արագ բեռնումՎեբ էջերը պահանջում են փոքր չափի գրաֆիկական պատկերներ, որոնք ներկառուցված են դրանցում, ինչը ձեռք է բերվում դրանց օպտիմալացման միջոցով: Պատկերի օպտիմիզացումը հասկացվում է որպես դրա փոխակերպում, որն ապահովում է ֆայլի նվազագույն չափը՝ պահպանելով տվյալ դեպքում պահանջվող պատկերի որակը, ինչը հիմնականում ձեռք է բերվում գրաֆիկական պատկերների գույների քանակի կրճատման, սեղմված և հատուկ ֆայլերի ձևաչափերի օգտագործմամբ և սեղմման պարամետրերը անհատների համար օպտիմալացնելու միջոցով: պատկերի բեկորներ.

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.

Նույնիսկ ավելի հարմար է օգտագործել գործառույթները Կենդանի խառնուրդներ Illustrator ծրագրակազմ: Illustrator-ի և ImageReady-ի այս համատեղ օգտագործումը զգալիորեն արագացնում է GIF անիմացիաների ստեղծման գործընթացը:

Օրինակ, նկարեք երկու կամայական բազմագույն առարկաներ, այնուհետև դրանք միաձուլեք համապատասխան պարամետրերով (նկ. 69): Անհնար է այս ֆայլն ուղղակիորեն օգտագործել անիմացիա ստեղծելու համար, քանի որ պատկերը գտնվում է մեկ շերտի վրա (նկ. 70): Հետևաբար, նախ պետք է խառնուրդի օբյեկտի յուրաքանչյուր տարր տեղադրել առանձին շերտի վրա: Դա անելու համար պատուհանում Շերտերընդգծել գիծը , ակտիվացրեք պալիտրա ընտրացանկը՝ սեղմելով դրա վերին աջ անկյունում գտնվող սև սլաքի վրա և ընտրեք հրամանը. Ազատել շերտերի հաջորդականությանը(Հաջորդաբար վերածեք շերտերի) (նկ. 71): Բանալին սեղմած պահելը Հերթափոխ, ընտրեք ստեղծված շերտերը և դրեք դրանք շերտի վերևում Շերտ 1, այնուհետև ջնջեք շերտը Շերտ 1, արդյունքում այն ​​տեղափոխելով աղբարկղ, շերտերի գունապնակը կստանա նույն ձևը, ինչ նկ. 72.

Բրինձ. 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. Ավարտված անիմացիա

Թափանցիկ 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).