Illustrator හි සරල සජීවිකරණයක් සාදා ගන්නේ කෙසේද. Adobe Illustrator CS පිළිබඳ නිදර්ශන නිබන්ධනය. ප්ලගිනය බාගත කර සම්බන්ධ කරන්න

ඔබ සජීවිකරණය සමඟ ජීවයට ගෙන ඒමට කැමති අයිකන එකක් හෝ දෙකක් තිබේ. ඔබ ආරම්භ කරන්නේ කොතැනින්ද? ඔබට ඇති බව කියමු SVG ගොනු, Illustrator CC සහ After Effects CC වැඩසටහන්, නමුත් විසඳුම ඔබව මග හරියි.

මෙම ලිපියෙන්, Illustrator හි SVG ගොනුව සකස් කිරීම සහ එය After Effects CC වෙත ආයාත කිරීම ඇතුළුව, ඔබට පහසුවෙන් SVG ගොනුවක් සජීවිකරණය කළ හැකි ආකාරය නිරූපණය කිරීමට මම බලාපොරොත්තු වෙමි. ඔබට එය Shape Layers බවට පරිවර්තනය කර චලනය එකතු කරන්නේ කෙසේද යන්නත් මම පැහැදිලි කරන්නම්. අවසාන වශයෙන්, අපි අපනයනය සහ විදැහුම්කරණය ගැන කතා කරමු.

කාර්යයේ අවසාන ප්රතිඵලය.

දැන් අපි විනෝදජනක කොටස වෙත යමු - පින්තූර ජීවයට ගෙන එන්නේ කෙසේදැයි ඉගෙන ගැනීම.

Illustrator හි SVG ගොනුවක් සකස් කිරීම

Adobe Illustrator CC හි ඔබගේ SVG ගොනුව විවෘත කිරීමෙන් ආරම්භ කරමු. මම Week Of Icons හි නොමිලේ ලබා ගත හැකි කුඩා කාර් නිරූපකයක් සජීවිකරණය කරන්නම්.

ගොනුව විවෘත කිරීමෙන් පසු, අපි සියලු වස්තු සමූහගත කර ස්ථරවලට බෙදිය යුතුය. ඔබට මෙය අතින් හෝ භාවිතා කළ හැකිය ස්ථර වෙත මුදා හැරීම (අනුපිළිවෙල)ක්රියාවලිය වේගවත් කිරීමට. අපි ගොනුව After Effects වෙත ආයාත කිරීමට පෙර, අපි එය Illustrator ගොනු ආකෘතියක් ලෙස සුරැකිය යුතුය.

වටිනා කාලය අපතේ නොයැවීම සඳහා අපට ස්තරවලට මුදා හැරීම (අනුපිළිවෙල) භාවිතයෙන් වස්තූන් සමූහගත කළ හැක. After Effects CC තුළ ගොනුවක් ආයාත කර සංවිධානය කරන්න

දැන් ඔබ After Effects CC වෙත ආයාත කිරීමට සූදානම්ය. ආයාත ගොනු සංවාද කොටුව පූරණය කිරීමට යතුරුපුවරු කෙටිමඟ Ctrl+I (Windows) හෝ Command+I (Mac) භාවිතා කරමු, නැතහොත් File > Import > File වෙත යන්න... එතනින් අපි සකස් කළ Illustrator CC ගොනුව තෝරා Import ක්ලික් කරන්න. . තෝරාගත් ගොනුවේ නම සහිත කුඩා සංවාද කොටුවක් දිස්විය යුතුය. Import Kind ලෙස හඳුන්වන පතන ලැයිස්තුවෙන් සංයුතිය තෝරන්න.

තව ඉක්මන් මාර්ගයගොනුවක් ආයාත කිරීම - ව්‍යාපෘති පුවරුවේ තීරු ස්ථානය මත දෙවරක් ක්ලික් කරන්න.

Timeline Panel එකේ අපි නව සංයුතියක් දකිනු ඇත. එය මත ඩබල් ක්ලික් කරන්න. අපි දැන් ඔවුන්ගේ නම්වල වම් පසින් තැඹිලි අයිකන සහිත Illustrator CC ස්ථර දැකිය යුතුය.

අපි පටන් ගන්න කලින් මේ ලේයර් ඔක්කොම Shape Layers වලට හරවන්න ඕනේ. අපි Ctrl+A/Command+A භාවිතයෙන් හෝ Shift + Left Mouse භාවිතයෙන් ඒවා සියල්ල තෝරාගත යුතුයි. ඊට පසු, ලේයරය මත දකුණු-ක්ලික් කර දෛශික ස්ථරයෙන් සාදන්න > හැඩතල සාදන්න තෝරන්න.

දැන් නව ස්ථර තෝරාගෙන ඇති බැවින්, Illustrator CC ස්ථරවලට ඉහලින් පැනලයේ ඉහළට ඒවා ඇදගෙන ගොස්, ඉන්පසු Illustrator CC ස්ථර ඉවත් කරන්න.

Illustrator CC ස්ථර පසු ප්‍රයෝග CC හි හැඩැති ස්ථර බවට පරිවර්තනය කරන්න

මෙය අවශ්‍ය නොවන නමුත්, අපි සෑම ස්ථරයකටම සුදුසු නමක් සහ/හෝ වර්ණ කේතයක් ලබා දීම වැදගත් වේ. අපි ප්‍රධාන පුද්ගලයින් කෙරෙහි අවධානය යොමු කරන බැවින් මෙය වඩාත් කාර්යක්ෂමව වැඩ කිරීමට අපට ඉඩ සලසයි. පහත උදාහරණයේ දී, ලේබලවල වර්ණ ඒවායේ අනුරූප ස්තරවල පිරවුමට වඩා අඩුවෙන් ගැලපේ.

සුදුසු නම්, වර්ණ, පෙළ සහ ස්ථානගත කිරීම් සහිත හැඩ ස්ථර ලේබල් කිරීම ඉතා ප්‍රායෝගිකයි.

පරාමිති වින්‍යාස කිරීම සඳහා, යතුරුපුවරු කෙටිමං භාවිතා කරන්න Ctrl+K/Command+K හෝ Composition > Composition Settings... Composition Settings වෙතින්, අපි පළල, උස, රාමු අනුපාතය සහ කාලසීමාව තෝරාගත යුතුය. මෙම ව්‍යාපෘතිය සඳහා මම සජීවිකරණය සුමටව තබා ගැනීමට තත්පරයකට රාමු 60ක් තෝරා ගත්තෙමි.

මත මේ මොහොතේසියල්ල යාමට සූදානම් බව පෙනේ, නමුත් කළ යුතු තවත් එක් දෙයක් තිබේ. අපට පාලනය කළ හැකි ප්‍රධාන ස්තරය සමඟ ඒවායේ චලනයන් සමමුහුර්ත වන පරිදි අපි ඇතැම් ස්ථර එකට සමූහගත කළ යුතුය. මෙම ක්රමය Parenting ලෙස හැඳින්වේ.

බහු ස්ථර වලට මව් ස්ථරයක් පැවරීමට Pick Whip භාවිතා කරන්න.

අපගේ උදාහරණයේ දී, මම වැනි අඩු සැලකිය යුතු ස්ථර (ළමා ස්ථර) පවරා ඇත වින්ඩ්ෂීල්ඩ්, ශරීර කොටස්, ලී සහ ලණු ප්‍රාථමික ශරීර ස්ථරයට (මව්පිය ස්ථරය). මෙමගින් මාපිය ස්තරය භාවිතයෙන් සම්පූර්ණ මෝටර් රථයේ (රෝද හැර) පිහිටීම සහ භ්‍රමණය පාලනය කිරීමට මට හැකි විය.

සජීවිකරණ නිර්මාණය කිරීම

මට ඕන උනේ කාර් එක ගලක වැදිලා ටික වෙලාවක් ගුවනේ එල්ලෙන්න. මටත් ඕන උනේ ගහ උඩට පහලට ගිහින් කඳ අරින්න. මම ගලක්, මෝටර් රථයක් සහ රෝද නිර්මාණය කිරීමෙන් ආරම්භ කළෙමි. එවිට විශාලතම බාධකය ජය ගැනීමට කාලයයි - ක්‍රියාව ගස මත තැබීම. එය අවසන් වූ පසු මම රාක්කය සහ ලණු වැනි කුඩා කොටස් වෙත ගියෙමි.

සජීවිකරණය විස්තර කරන කටු සටහන

පළමු පියවර වූයේ පාෂාණ මූලද්‍රව්‍යයක් හෝ ස්ථරයක් සෑදීමයි, නමුත් වෙනත් ස්ථරයක් එක් කිරීමට Illustrator CC වෙත ආපසු යාම වෙනුවට, මම After Effects CC හි Pen Tool එක භාවිතා කළෙමි. මෙය ඉක්මනින් කුඩා ගලක් නිර්මාණය කිරීමට මට ඉඩ සලසයි.

ඔහ්, බලවත් පෑන මෙවලම!

කඳ සාපේක්ෂව සරල කාර්යයක් විය. මම එය මෝටර් රථයේ පිටුපසට සවි කර පහළ වම් කෙළවරේ නැංගුරම් ලක්ෂ්‍යයක් සෑදුවෙමි. Pick Whip භාවිතයෙන් මම එය මව් ශරීර ස්ථරයට පැවරුවෙමි. අවසාන පියවර වූයේ භ්‍රමණයේ ප්‍රයෝගය ලබා දීමයි, එමඟින් මෝටර් රථය පිම්බෙන මොහොත වඩාත් යථාර්ථවාදී විය.Bodymovin Lottie ජංගම පුස්තකාලය සමඟ ඒකාබද්ධව.

පී.එස්. ඔබට මගේ Illustrator CC සහ After Effects CC ගොනු සොයා ගත හැක.

අයිකන කට්ටලය නොමිලේ බාගත හැකිය.

මෑතකදී, වෙබ් අඩවි සහ යෙදුම්වල SVG (පරිමාණය කළ හැකි දෛශික ග්‍රැෆික්ස්) ග්‍රැෆික්ස් වල විවිධ ආකාරයේ සජීවිකරණ ඉතා ජනප්‍රිය වී ඇත. මෙයට හේතුව සෑම දෙයක්මයි නවතම බ්‍රව්සර්දැනටමත් මෙම ආකෘතියට සහය දක්වයි. SVG සඳහා බ්‍රවුසර සහාය පිළිබඳ තොරතුරු මෙන්න.

සැහැල්ලු Jquery ප්ලගිනය Lazy Line Painter භාවිතා කරමින් SVG දෛශික සජීවිකරණයක සරලම උදාහරණය මෙම ලිපියෙන් සාකච්ඡා කෙරේ.

මූලාශ්රය

මෙම කාර්යය සම්පූර්ණ කිරීමට සහ සම්පූර්ණයෙන් අවබෝධ කර ගැනීමට, HTML, CSS, Jquery පිළිබඳ මූලික දැනුම යෝග්‍ය වේ, නමුත් ඔබට SVG සජීවීකරණය කිරීමට අවශ්‍ය නම් අවශ්‍ය නොවේ) අපි ආරම්භ කරමු!

තවද අප අනුගමනය කළ යුතු පියවර මේවාය:

නිවැරදි ගොනු ව්යුහය සාදන්න

ප්ලගිනය බාගත කර සම්බන්ධ කරන්න

Adobe Illustrator හි සිසිල් දළ සටහන් පින්තූරයක් අඳින්න

අපගේ රූපය Lazy Line Converter බවට පරිවර්තනය කරන්න

ලැබෙන කේතය main.js වෙත අලවන්න

රස කිරීමට CSS ටිකක් එකතු කරන්න

1. නිවැරදි ගොනු ව්‍යුහය සාදන්න
Initializr සේවාව අපට මේ සඳහා උපකාරී වනු ඇත, එහිදී අපට පහත පින්තූරයේ මෙන් පරාමිති තෝරා ගත යුතුය.

• Classic H5BP (HTML5 බොයිලේරු තහඩුව)
• සැකිල්ලක් නැත
• හුදෙක් HTML5 Shiv
• කුඩා කර ඇත
• IE පන්ති
• Chrome රාමුව
• ඉන්පසු එය බාගත කරන්න ක්ලික් කරන්න!

2. ප්ලගිනය බාගත කර සම්බන්ධ කරන්න

initializr අලුත්ම Jquery library එකත් එක්ක එන නිසා Lazy Line Painter project repository එකෙන් බාගන්න ඕන archive එකෙන් අපිට අවශ්‍ය වෙන්නේ අපේ project එකට files 2ක් විතරයි. පළමුවැන්න නම් 'jquery.lazylinepainter-1.1.min.js' (ප්ලගින අනුවාදය වෙනස් විය හැක) එය ප්‍රතිඵලයක් ලෙස ලැබෙන ෆෝල්ඩරයේ මූලයේ පිහිටා ඇත. දෙවෙනි එක තමයි example/js/vendor/raphael-min.js.

අපි මෙම ගොනු 2 js ෆෝල්ඩරය තුළ තබමු. අපි ඒවා පහත ආකාරයට main.js වලට පෙර අපගේ index.html වෙත සම්බන්ධ කරමු:

3. Adobe Illustrator හි සිසිල් දළ සටහන් පින්තූරයක් අඳින්න

Illustrator හි අපගේ දළ සටහන් චිත්‍රය අඳින්න (මෙය කිරීමට පහසුම ක්‍රමය Pen Tool වේ)

අපගේ චිත්‍රයේ සමෝච්ඡයන් වැසී නොයෑම අවශ්‍ය වේ, මන්ද අපගේ බලපෑම සඳහා අපට ආරම්භයක් සහ අවසානයක් අවශ්‍ය වේ

පිරවුම් නොතිබිය යුතුය

උපරිම ගොනු විශාලත්වය - 1000×1000 px, 40kb

Object>Artboards>Fit To Artboards Bounds යන වස්තුවේ මායිම්වලට බෝගයක් සාදා ගනිමු.

SVG ආකෘතියෙන් සුරකින්න (සම්මත ඉතිරිකිරීමේ සැකසුම් හොඳයි)

උදාහරණයක් ලෙස, ඔබට ඇමුණුමේ ඇති අයිකන භාවිතා කළ හැකිය.

4. අපගේ රූපය Lazy Line Converter බවට පරිවර්තනය කරන්න
පහත පින්තූරයේ ඇති කවුළුව වෙත ඔබගේ නිරූපකය ඇදගෙන යන්න.
ඝනකම, දළ සටහනේ වර්ණය සහ සජීවිකරණ වේගය කේතය තුළම වෙනස් කළ හැකිය, එය පරිවර්තනයෙන් පසුව දිස්වනු ඇත!

5. ලැබෙන කේතය main.js වෙත අලවන්න
දැන් අපි ලැබෙන කේතය හිස් main.js ගොනුවකට අලවන්න
විකල්ප:
strokeWidth - දළ සටහන් ඝණකම
strokeColor - දළ සටහන් වර්ණය
කාල පරාමිතියෙහි අගයන් වෙනස් කිරීමෙන් ඔබට එක් එක් දෛශිකයේ ඇඳීමේ වේගය වෙනස් කළ හැකිය (පෙරනිමිය 600)

6. රස කිරීමට CSS ටිකක් එකතු කරන්න
index.html වෙතින් ඡේදයක් ඉවත් කිරීම

හෙලෝ වර්ල්ඩ්! මෙය HTML5 බොයිලේරු වේ.

ඒ වෙනුවට අපි අපගේ සජීවිකරණය සිදු වන බ්ලොක් එකක් ඇතුළු කරමු

ඉන්පසුව අපි main.css ගොනුවට CSS කිහිපයක් එකතු කර එය ලස්සනට පෙනෙන්නෙමු:

ශරීරය (පසුබිම:#F3B71C; ) #අයිකන (ස්ථානය: ස්ථාවර; ඉහළ:50%; වමේ:50%; ආන්තිකය: -300px 0 0 -400px; )

සියලුම ගොනු සුරකින්න.
දැන් නවීන බ්‍රවුසරයක index.html විවෘත කර එහි බලපෑම භුක්ති විඳින්න.

පී.එස්. ආරම්භ කරන විට දේශීය යන්ත්රයතත්පර කිහිපයක් සඳහා සජීවිකරණය ආරම්භයේ ප්රමාදයක් තිබිය හැක.

ආයුබෝවන් සියල්ලටම! අද මම හැකියාවන් විස්තර කිරීමට උත්සාහ කරමි Adobe වැඩසටහන් Illustrator, එය Flash හි හැකියාවන් සමඟ සංසන්දනය කරයි. මෙය වැඩසටහනේ ගෝලීය විශ්ලේෂණයක් නොව, මෙම වැඩසටහනේ මා සොයාගත් රසවත් විශේෂාංග කිහිපයක් පිළිබඳ විස්තරයකි. ඔක්කොම එක පෝස්ට් එකකින් දාන්න හිතාගෙන පාඩම් කරන ගමන් කෑලි කෑලි එකතු කරගත්තා. මම Illustrator හි සුපිරි පළපුරුදු පරිශීලකයෙකු නොවන බව මම වහාම පිළිගනිමි, මම එය පසුගිය මාස හය තුළ චිත්‍ර ඇඳීම සඳහා පමණක් භාවිතා කළෙමි (ඊට පෙර මම ෆ්ලෑෂ් හි සියල්ල ඇන්දෙමි). බොහෝ අය මැසිවිලි නඟන්නේ නිදර්ශනකරු සංකීර්ණ බවත් සෑම විටම බුද්ධිමය නොවන බවත්ය. යම් දුරකට, ෆ්ලෂ් කිරීමෙන් පසු මෙම වැඩසටහන සංකීර්ණ බව මම එකඟ වෙමි. නමුත් මෙහි ප්රධානතම දෙය වන්නේ අත්හැරීම නොව, දිගටම අධ්යයනය කිරීමයි. සති දෙකකට පසු, සිතුවිල්ල පැන නගී, මම මීට පෙර එය නොමැතිව කළමනාකරණය කළේ කෙසේද!

ඉතින්, නිදර්ශන ශිල්පියා ගැන මා කැමති වූයේ කුමක්ද සහ ෆ්ලෑෂ් නොමැති බව මා සොයාගත්තේ කුමක්ද?
1. මම සරලම දේ සමඟ ආරම්භ කරමි, නමුත් ඒ සමඟම අවශ්ය වේ. ෆ්ලෑෂ් හි වස්තු රවුමක සැකසීමට උත්සාහ කරන්න. මීට පෙර Deco Tool එකක් තිබුනා, නමුත් එය ඉවත් කර ඇත, පෙනෙන විදිහට අනවශ්ය ලෙස සලකනු ලැබේ. එය අතින් සිදු කිරීම වඩාත් විනෝදජනක බව අපි තීරණය කළෙමු. Illustrator හට මෙම කාර්යය ඇත: Effect - Distort&Transform - Transform.

සෑම දෙයක්ම ඉක්මන් හා සරල ය; අපි සැකසුම් තුළ අගයන් (වස්තු අතර දුර, පිටපත් ගණන) සකසන්නෙමු.

2. Zig-zag

ඊටත් වඩා සරල, නමුත් කෙසේ වෙතත් ප්රයෝජනවත් දෙයක්. එය කුඩා දෙයක් ලෙස පෙනේ, නමුත් ෆ්ලෑෂ් හි ඔබ අතින් ඇඳීමට සිදුවේ, Illustrator හි එය තත්පර ගණනකි.

3. වස්තූන් විකෘති කිරීම (Warp)

Flash එකේ මේ වගේ දෙයක් නෑ. පහත උදාහරණයේ දී, මම සරල හැඩතල විකෘති කිරීමට ක්‍රම 2 ක් පමණක් පෙන්වමි (Effect - Warp - Arc/Fish). ඇත්ත වශයෙන්ම, ඔවුන්ගෙන් 15 ක් ඇත නවතම අනුවාදයවැඩසටහන්.

4. කොන් වල ස්වයංක්‍රීය වටකුරු (වටකුරු කොන්)

ඔබට එය අතින් කළ හැකිය: ග්‍රැෆික් වස්තුවක් මත, තෝරාගත් විට, සුදු තිතක් සහ වටකුරු රේඛා ලකුණක් කෙළවරේ (සියලු කොන් වල) දිස්වේ. අපි මූසිකය සමඟ ඇදගෙන එය ඔබේ රසයට සකස් කරමු.

නමුත් මෙය අදාළ වන්නේ හැඩතලවලට පමණි, පැන්සල් රේඛාවකින් අපි එය ටිකක් වෙනස් ලෙස කරන්නෙමු - අපි වටකුරු බලපෑමක් යොදන්නෙමු (බලපෑම - ශෛලීගත කිරීම - වටකුරු කොන්). පිටවීමේදී අපි එකම ප්රතිඵලය ලබා ගනිමු.

5. රෘගන්

බලපෑම සරල හැඩතල සඳහා යොදනු ලැබේ (Effect - Distort&Transform - Roughen). ප්‍රතිදානය අඩු බහු ත්‍රිමාණ මාදිලිවලට සමාන දෙයකි. මම හිතන්නේ එය සිසිල් ය :) සහ වඩාත්ම වැදගත් දෙය නම්, එය ඉතා සරල ය.

6. පුකර් සහ පිම්බීම (ඇදීම සහ ඉදිමීම)
පහත පින්තූරයේ උදාහරණය:

7. ආකෘති පුළුල් කිරීම (Offset Path)

ෆ්ලෑෂ් සතුව Expand Fill ශ්‍රිතයක් ඇත; එය Illustrator මෙන් නොව පැන්සල් රේඛා සමඟ කිසිසේත් ක්‍රියා නොකරයි.

8. බුරුසු (කලා බුරුසු, රටා බුරුසු, විසිරුම් බුරුසු)
උදාහරණ සමඟ පහත පින්තූරය බලන්න:

9. වයනය බුරුසුව

Illustrator ද බොහෝ වයනය බුරුසු දක්වයි, ඒවා මා ලියූ සහ ඒවා දිස් වූ ආකාරය නව අනුවාදයසැණෙළිය - . Adobe Animate හි බුරුසු භාවිතා කිරීම ඉතා මන්දගාමී බව නිරීක්ෂණය විය. ඒක තමයි:(

10. මෙය සැබෑ උපක්‍රමයක් දැයි මට විශ්වාස නැත, නමුත් මට Blob Brush යන විහිලු නාමය සහිත බුරුසුවක් කෙරෙහි අවධානය යොමු කිරීමට අවශ්‍යයි. මෙවලම් තීරුවේ පිහිටා ඇති මෙය භාවිතා කිරීමට ඉතා හොඳ බුරුසුවකි. එහි සැකසුම් රාශියක් ඇත, මම එයට සාමාන්‍ය එකට වඩා කැමතියි. වචන වලින් එහි ප්රතිලාභ පැහැදිලි කිරීමට අපහසුය, එය වරක් උත්සාහ කිරීමට වඩා හොඳය.

10.Grid වෙත බෙදීම

තවත් ප්‍රයෝජනවත් දෙයක් තමයි Split to Grid (Object-Path-Split to Grid) ශ්‍රිතය.එය ඔබට හැඩය සමාන කොටස් වලට කපා ගැනීමට ඉඩ සලසයි. මෙය අපට මතක් කර දෙන්නේ කුමක් ද? ඒක හරි - උස් ගොඩනැගිල්ලක ජනේල. මම හිතන්නේ එය ඇඳීම සඳහා සිසිල් දෙයක්, උදාහරණයක් ලෙස, නගර භූ දර්ශන;)

තවත් එකක් ප්රයෝජනවත් මෙවලමක්, එහි පළමු නිකුතුවේ සිට බොහෝ විට නිදර්ශකයේ විශේෂාංග කර ඇත. එහි ආධාරයෙන් ඔබට නිර්මාණය කළ හැකිය, උදාහරණයක් ලෙස, ලී වයනය:

12. චලනය (දකුණට - පරිවර්තනය - චලනය)

වස්තුවක් නිශ්චිත දුරකින් විස්ථාපනය කරයි. අවශ්ය නම්, තෝරාගත් වස්තුවෙන් තිරස් අතට / හෝ සිරස් අතට අපේක්ෂිත දුරින් තබා ඇති පිටපතක් ඔබට වහාම නිර්මාණය කළ හැකිය. ෆ්ලෑෂ් හි පෙර අනුවාදයක ප්ලගිනයක් තිබුණි මෙම කාර්යය. අවාසනාවට, මට එහි නම මතක නැත.

Illustrator බාධාවකින් තොරව රටා නිර්මාණය කිරීම සඳහා ඉතා පහසු වේ (Object-Pattern-Make). ගේ නිර්මාණයත් සමඟම මම කෙතරම් කෝපයෙන් පරිණතභාවය වර්ධනය කර ගත්තද යන්න මට මතකයි. Illustrator හි SS 2015 අනුවාදයේ, සියල්ල ස්වයංක්‍රීයයි; සැකසීම් සමූහයක් ඔබට ග්‍රැෆික් මූලද්‍රව්‍ය කිහිපයක් අතැතිව, වෙනස්කම් දුසිම් ගණනකින් රටාවක් නිර්මාණය කිරීමට උපකාරී වේ. වැඩි වශයෙන් පෙර අනුවාදමෙතෙක් Flash හි මෙන් සියලුම වැඩසටහන් අතින් සිදු කළ යුතු විය.

(සටහන - Object - Expand Appearance ශ්‍රිතය භාවිතයෙන් රටාව දෛශික සංස්කරණය කළ හැකි වස්තුවක් බවට පත් කළ හැක.

14. වස්තුව මොසෙයික්

පවතින පින්තූරයක් මත පදනම්ව වර්ණ මාලාවක් නිර්මාණය කිරීම. ඔබ කැමති පින්තූරය නිදර්ශනයට ආයාත කරන්න (විවෘත), පසුව වස්තුව - වස්තු මොසෙයික් සාදන්න. සැකසුම් තුළ අපි උස සහ පළල බෙදීමේ සංඛ්යාතය නියම කරමු.

ප්‍රතිදානයේදී අපට ලැබෙන්නේ:

15.Blend

අනුක්‍රමික නිර්මාණය කිරීමට භාවිතා කරයි. ඔබට පින්තූරයේ මෙන් පියවරෙන් පියවර සංක්‍රාන්ති නිර්මාණය කළ හැකිය. මම එය නිතර භාවිතා කරන බව මම නොකියමි, නමුත් එය කෙනෙකුට ප්රයෝජනවත් විය හැකිය. එය සරල පසුබිම් රූප නිර්මාණය කිරීමට භාවිතා කළ හැකි බව මට පෙනේ.

මෙම මෙවලම වස්තූන් ක්ලෝන කිරීමට ද භාවිතා කළ හැක. වස්තු දෙකක් එකිනෙකින් දුරින් තබා Blend Options යොදන්න, පියවර ගණන තෝරන්න (ක්ලෝන කරන ලද වස්තූන් ගණන).

16. Build Shape Tool. ප්රාථමිකයන් සමඟ වැඩ කිරීම සඳහා ඉතා පහසු දෙයක්. සැණෙකින්, එය මට පෙනුනේ, එය අඩු පහසුවකි.

කොටස් මකා දැමීමට Alt අල්ලාගෙන තෝරාගත් කොටස් මත ක්ලික් කරන්න. අපි සරලව තෝරාගත් ප්රදේශ කිහිපයක් මත මූසිකය ඇදගෙන ගියහොත් - සම්බන්ධතා.

ඇඩෝන යනු ස්වයංක්‍රීයව කැපීම, සම්බන්ධ කිරීම යනාදිය උපකාර වන මෙවලමකි. උද්දීපනය කළ ආකෘති. මා සම්බන්ධයෙන් ගත් කල, එය එතරම් පහසු නැත; මම බොහෝ විට Build Shape Tool භාවිතා කරමි.

(කලා පුවරු)

18. අභිරුචි මෙවලම් පැනලය

ඔබේම මෙවලම් තීරුවක් නිර්මාණය කිරීමේ හැකියාව, අනවශ්‍ය ඒවා ඉවත දැමීම සහ ඔබ භාවිතා කරන ඒවා පමණක් තෝරා ගැනීම.

Flash හි, artboards, එනම් දර්ශන (දර්ශන 1,2,3..) වෙන වෙනම පිහිටා ඇති අතර ඔබ ඒවා අතර මාරු විය යුතුය (Shift+F2). Illustrator හි, ඒවා සියල්ලම ඔබේ ඇස් ඉදිරිපිට තැබිය හැකිය. ඔබ එකම චිත්‍රයේ අනුවාද කිහිපයක් සාදන විට එය පහසු වේ, එවිට සියලු විකල්පයන් සැසඳීම සඳහා ඔබේ ඇස් ඉදිරිපිට ඇත.

19.Graphic Styles භාවිතා කරන සමමිතික

ඒවගේම අන්තිම දේ තමයි ඒක ක්ලික් 1කින් (හෝ වඩාත් නිවැරදිව, ක්ලික් කිරීම් 3කින්, අපිට පැති 3ක් තියෙන නිසා;) ග්‍රැෆික් ස්ටයිල් (ග්‍රැෆික් ස්ටයිල්ස්) භාවිතා නොකර සමමිතිය නිර්මාණය කරන එක. මෙය සිදු කරන ආකාරය මම ඊළඟ වතාවේ විස්තර කරමි.

නිදර්ශකයට ෆ්ලෑෂ් සමඟ පොදු වන්නේ වස්තුවක් සංකේතයකට සුරැකීමේ හැකියාව වන අතර, මෙම සංකේතය පහසුවෙන් ෆ්ලෑෂ් වෙත මාරු කළ හැකිය (ආයාත කිරීම - වේදිකාවට ආනයනය කිරීම භාවිතා කර flash.ai හි ගොනුව විවෘත කරන්න).
Illustrator හි ඇති සංකේතය Flash හි ඇති සමාන ගුණාංග ඇත.
අවසාන වශයෙන්, මම Illustrator හි ලියන්නෙමි, මගේ මතය අනුව, එය ෆ්ලෑෂ් වලට වඩා පහත් ය. ඔව් ඔව් එහෙම එකක් තියෙනවා. තවද මෙය පිරවුම් මෙවලම (Paint Bucket) වේ. Illa හි එය භාවිතා කිරීමට මම කොතරම් උත්සාහ කළත්, එය ෆ්ලෑෂ් හි වඩාත් පහසු වේ.
මගේ සටහන් ඔබට ප්‍රයෝජනවත් වී ඇත්නම් හෝ ඔබට ඔබේම දෙයක් එකතු කිරීමට අවශ්‍ය නම්, අදහස් දැක්වීමේදී සාදරයෙන් පිළිගනිමු! සැමට සුබ පැතුම්;)

Web Graphics Optimization

ග්රැෆික් තොරතුරුපෙළට වඩා බොහෝ සෙමින් සම්ප්‍රේෂණය වන අතර, පින්තූර පැටවීමේ කාලය ඒවායේ ප්‍රමාණයට සමානුපාතික වේ ග්රැෆික් ගොනු. එබැවින්, වෙබ් පිටු වේගයෙන් පූරණය කිරීම සඳහා කුඩා ප්‍රමාණයේ කාවැද්දීමට අවශ්‍ය වේ ග්රැෆික් රූප, ඔවුන්ගේ ප්‍රශස්තිකරණය තුළින් සාක්ෂාත් කරගනු ලැබේ. රූප ප්‍රශස්තකරණය එහි පරිවර්තනය ලෙස වටහාගෙන ඇති අතර, මෙම අවස්ථාවේ දී අවශ්‍ය රූපයේ ගුණාත්මකභාවය පවත්වා ගනිමින් අවම ගොනු ප්‍රමාණයක් සහතික කිරීම, එය මූලික වශයෙන් ග්‍රැෆික් රූපවල වර්ණ ගණන අඩු කිරීම, සම්පීඩිත සහ විශේෂ ගොනු ආකෘති භාවිතා කිරීම සහ තනි තනිව සඳහා සම්පීඩන පරාමිතීන් ප්‍රශස්ත කිරීම මගින් සාක්ෂාත් කරගනු ලැබේ. රූප කොටස්.

Illustrator සතුව විවිධ පෙරදසුන් ක්‍රම සමඟින් ප්‍රශස්තිකරණ ක්‍රියාවලිය ඉක්මන් සහ කාර්යක්ෂම කරන රූප ප්‍රශස්තකරණ මෙවලම් ඇත. පෙරදසුන මඟින් ප්‍රශස්තිකරණය කළ රූපය තත්‍ය කාලීනව පෙනෙන්නේ කෙසේද යන්න පිළිබඳ තරමක් නිවැරදි අදහසක් ලබා දෙයි, එය ප්‍රශස්තිකරණ ප්‍රතිඵලය ඇගයීමට සහ නිවැරදි සැකසුම් සාර්ථකව තෝරා ගැනීමට උපකාරී වේ. ඔබට Illustrator හි සෘජුවම සාදන ලද පින්තූර දෙකම ප්‍රශස්ත කළ හැකිය, සහ වෙනත්, උදාහරණයක් ලෙස, වෙබ් අඩවියක තැබිය යුතු ඡායාරූප.

ගොනු මෙනුවෙන් එකම නමේ විධානය මඟින් හඳුන්වනු ලබන, වෙබ් සඳහා සුරකින්න කවුළුව තුළ ප්‍රශස්තකරණ පරාමිතීන් සකසා ඇත. වැඩසටහන ඔබට පෙරදසුන් මාතයන් හතරෙන් එකක් භාවිතා කිරීමට ඉදිරිපත් කරයි, නමුත් දෙකක් ප්‍රශස්තකරණයේ ගුණාත්මකභාවය තක්සේරු කිරීම සඳහා වඩාත් සුදුසු වේ:

• 2-Up (විකල්ප දෙකක්) නිශ්චිත සැකසුම් වලට අනුකූලව මුල් සහ ප්‍රශස්ත කළ රූපය එකවර බැලීම (රූපය 1);
• 4-Up (විකල්ප හතරක්) මෙම ප්‍රකාරයේදී, දර්ශන තොටුපළ ජනේල හතරකට බෙදා ඇත (රූපය 2) මුල් රූපය සහ ප්‍රශස්ත එකෙහි අනුවාද තුනක් ප්‍රදර්ශනය කිරීම සඳහා: පළමු අනුවාදය සකසා ඇත්තේ ප්‍රශස්තිකරණ අගයන් මත පදනම්ව, සහ අනෙක් දෙක වත්මන් ප්‍රශස්තිකරණ සැකසුම් වල වෙනස්කම් වේ.

විවිධ ප්‍රශස්තකරණ සැකසුම් සහ ඒවායේ පසුකාලීන දෘශ්‍ය සංසන්දනය සමඟ රූප සුරැකීමේ අවශ්‍යතාවය ඉවත් කරන බැවින්, හොඳම ප්‍රශස්තිකරණ විකල්පය සොයා ගැනීම සඳහා කාලය සැලකිය යුතු ලෙස ඉතිරි කර ගැනීමට මාතයන් දෙකම ඔබට ඉඩ සලසයි. මීට අමතරව, විවිධ සම්බන්ධතා විකල්පයන් යටතේ ප්රශස්ත රූපයේ ගුණාත්මකභාවය පමණක් නොව, එහි විශාලත්වය සහ පැටවීමේ කාලයද ඇගයීමට හැකිය. සංසන්දනය කිරීම සඳහා, වඩාත්ම පහසු මාදිලිය 4-Up (විකල්ප හතරක්) වන අතර එමඟින් රූපයේ ගුණාත්මකභාවය සහ එහි ප්‍රමාණය මත සම්පීඩනය හෝ palette අඩු කිරීමේ බලපෑම දෘශ්‍යමය වශයෙන් ඇගයීමට සහ අවසානයේ හොඳම ප්‍රශස්තිකරණ පරාමිතීන් තීරණය කිරීමට ඔබට ඉඩ සලසයි.

Illustrator ඔබට GIF, JPG, PNG-8 සහ PNG-24 ආකෘතිවලින් පමණක් නොව SWF සහ SVG වලින්ද වෙබ් චිත්‍රක ප්‍රශස්ත කිරීමට ඉඩ සලසයි. කුඩා වර්ණ සංඛ්‍යාවක් ඇති සුචිගත රූප GIF ආකෘතියෙන් සුරකිනු ලැබේ. JPG ආකෘතිය පූර්ණ-වර්ණ සහ අළු පරිමාණ රූප, ඡායාරූප, සහ Gradient Fills වැනි වර්ණ-පොහොසත් ග්‍රැෆික්ස් සුරැකීමට භාවිතා කරයි. විනිවිද පෙනෙන ප්‍රදේශ සහිත පූර්ණ-වර්ණ රූප සඳහා, PNG ආකෘතිය භාවිතා කරනු ලැබේ, එමඟින් ඔබට සුචිගත සහ සම්පූර්ණ-වර්ණ රූප සුරැකීමට ඉඩ සලසයි, PNG-8 ආකෘතියේ දී ප්‍රශස්ත කළ රූපයේ හැකි උපරිම වර්ණ ගණන 256 වේ. PNG-24 ආකෘතියේ රූපයට මිලියන ගණනක් වර්ණ තිබිය හැකි අතර, එය පෙනෙන්නේ එබැවිනි JPEG ආකෘතිය. PNG-24 සහ JPEG අතර වෙනස වන්නේ PNG-24 ආකෘතියේ පින්තූර ප්‍රශස්ත කිරීම සඳහා භාවිතා කරන සම්පීඩන ක්‍රමය ගුණාත්මකභාවය නැතිවීමට හේතු නොවන නමුත් එහි ප්‍රතිඵලයක් ලෙස ගොනු ප්‍රමාණය වැඩි වීමයි. SVG සහ SWF ආකෘති ග්‍රැෆික්ස්, පෙළ සහ අන්තර්ක්‍රියාකාරී සංරචක ඒකාබද්ධ කරන අතර ප්‍රශස්ත කළ හැක.

අපි සලකා බලමු නිශ්චිත උදාහරණයක්රූප ප්රශස්තකරණය. අපි හිතමු වෙබ් අඩවි ලාංඡනයක් Illustrator (රූපය 3), මුලින් සුරකින ලද්දේ AI ආකෘතියෙන්. වෙබය සඳහා එය වහාම ප්‍රශස්ත කිරීමට උත්සාහ කිරීම යහපත් දෙයකට මඟ පාදන්නේ නැත, මන්ද මෙම අවස්ථාවේ දී රූපය ස්වයංක්‍රීයව කපා හරිනු ඇත, එමඟින් විරූපණයේ ප්‍රති result ලයක් ලෙස ලැබෙන සෙල්ලිපියේ සැබෑ පිහිටීම සැලකිල්ලට නොගනී (රූපය 4 සහ 5)

එබැවින්, ගොනුව => අපනයනය (ගොනුව => අපනයනය) විධානය සමඟ PSD ආකෘතියට ලාංඡනය අපනයනය කිරීමට උත්සාහ කරමු, සාදන ලද රූපයේ විශාලත්වය 143 KB වනු ඇත. ලැබෙන PSD ගොනුව විවෘත කර File=>Save for Web විධානය භාවිතා කරන්න. රූපයට සම්බන්ධ සීමිත වර්ණ ගණන සැලකිල්ලට ගනිමින්, මෙම නඩුවේ GIF ආකෘතිය ප්රශස්ත වේ, නිශ්චිත සැකසුම් තීරණය කළ යුතුය. සැකසුම් සමඟ අත්හදා බැලීමෙන්, ඔබට එය සහතික කළ හැකිය හොඳම ගුණාත්මකභාවයවැඩසටහනේ පෙරනිමි සම්පීඩන ඇල්ගොරිතම, Selective ලබා දෙයි. සුමට කිරීම සම්බන්ධයෙන් ගත් කල, ශ්‍රේණියේ පිරවුමක් තිබීම නිසා, ශබ්ද උත්පාදන ශබ්දය සහිත ඇල්ගොරිතමයක් තෝරා ගැනීම වඩා හොඳය (රූපය 6). ප්‍රතිඵලයක් ලෙස ලැබෙන ප්‍රශස්තිකරණ ගොනුවේ ප්‍රමාණය 6.729 KB (රූපය 7) වනු ඇත, පසුබිමේ විනිවිදභාවය ආරක්ෂා වනු ඇත, එය HTML ගොනුව සමඟ GIF ආකෘතියෙන් රූපය සුරැකීමෙන් සත්‍යාපනය කිරීමට පහසුය (රූපය 8). මෙහි ප්‍රතිඵලයක් ලෙස, මෙම උදාහරණයේදී, emblem.html සහ emblem.gif යන ගොනු Primer1 ෆෝල්ඩරය තුළ ලබා ගන්නා ලදී.

බොත්තම්

ඕනෑම වෙබ් පිටුවක සැලසුමේ අනිවාර්ය අංගයක් වන්නේ චිත්‍රක පාලන බොත්තම් ය. ඔවුන් නොමැතිව පිටුවක් සිතාගත නොහැකිය. බොත්තම් ඇඳීම අද විශේෂ ආරක බවට පත් වී ඇති අතර, Illustrator ඔබට වඩාත් සංකීර්ණ විකල්ප නිර්මාණය කිරීමට ඉඩ සලසයි. උදාහරණයක් ලෙස, දැල් වස්තු ලෙස නිර්මාණය කර ඇති බොත්තම් සහ/හෝ උඩින් ආවරණ සහිත වෙස් මුහුණු සාමාන්‍ය ඒවාට වඩා ඉතා ආකර්ෂණීය ලෙස පෙනේ.

Illustrator හි වටකුරු, උත්තල බොත්තමක් සෑදීමේ විකල්පය සලකා බලන්න. අත්තනෝමතික වර්ණයකින් පුරවා ඇති රවුමක ස්වරූපයෙන් දෛශික වස්තුවක් අඳින්න (රූපය 9) සහ එය දැලක් බවට පරිවර්තනය කරන්න Object => Create Gradient Mesh (Object => Create a gradient mesh), පේළි හතරක් සහ හතරක් සඳහන් කරන්න. තීරු, සහ පෙනුම ලැයිස්තුවේ, 60 ට සමාන කේන්ද්‍ර උද්දීපනය කිරීමට විකල්පය තේරීම (රූපය 10). සෘජු තේරීම් මෙවලම තෝරන්න සහ වස්තුවේ ඉහළ වම් කෙළවරේ ක්ලික් කරන්න, එහි පිහිටා ඇති නැංගුරම් ලක්ෂ්ය තෝරා ගැනීම (රූපය 11). Swatches palette (රූපය 12) තුළ තේරීමෙන් අනුරූප සෛලයේ වර්ණය සුදු පැහැයට වෙනස් කරන්න.

Ellipse ටූල් එක ගෙන, මවුස් මාර්කර් එක කලින් සාදන ලද රවුමේ මැද තබා, Alt සහ Shift යතුරු අල්ලාගෙන, පැරණි එකට වඩා නව රවුම දිගු කරන්න, එවිට එය පැරණි එකට වඩා පික්සල 1-2ක් විශාල වේ. පැති. කළු පැහැති මායිමක් (ස්ට්රෝක්) 1-2 පික්සල් පළලක් ලබා දී එය රතු සිට සුදු දක්වා දිශාවට රේඩියල් අනුක්රමණයකින් පුරවන්න (රූපය 13). සාදන ලද දෛශික වස්තුව පික්සල 1-2 ක් දකුණට සහ පහළට ඇදගෙන යන්න, ඉන්පසු තේරීම ඉවත් නොකර එය මත දකුණු-ක්ලික් කර පිටතට යන්න. සන්දර්භය මෙනුව Arrange=>Send To Back තෝරන්න. රූපයේ දැක්වෙන බොත්තම සඳහා ප්රතිඵලය හිස් වනු ඇත. 14.

රීතියක් ලෙස, ඕනෑම වෙබ් පිටුවක එකම වර්ගයේ බොත්තම් කිහිපයක් ඇත, වෙනස් වේ, උදාහරණයක් ලෙස, ඒවා මත ඇඳ ඇති ඊතල දිශාවට පමණක්, වෙබ් අඩවිය වටා චලනය වන දිශාව පෙන්නුම් කරයි. බොත්තම් දෙකක් තිබීමේ සරලම අවස්ථාව සලකා බලමු, ඉන් එකක්, පහළ ඊතලයක් සහිතව, ඊළඟ පිටුවට ගමන් කිරීම අදහස් කරනු ඇත, සහ ඉහළ ඊතලයක් සහිත බොත්තමක් පෙර එකට ගමන් කිරීම අදහස් කරයි. ඊතල අච්චුවක් ලෙස, අපි සාමාන්‍ය ත්‍රිකෝණයක් ගනිමු, බහුඅස්‍ර මෙවලමෙන් අඳින ලද, කළු පැහැති තීන්ත ආලේප කර, වැඩි බලපෑමක් සඳහා, දැල් වස්තුවක් ලෙස ද නිර්මාණය කර ඇත. ඊතලය බොත්තම වෙත ගෙන ගොස් Align palette හි අනුරූප බොත්තම් භාවිතයෙන් එකිනෙකට සාපේක්ෂව සියලුම වස්තූන්ගේ පිහිටීම සකස් කරන්න. ප්රතිඵලය වන බොත්තම් වලින් පළමුවැන්න රූපයේ දැක්වේ. 15. Duplicate Layer Layers යන විධානය තේරීමෙන් බොත්තම සමඟ ස්ථරයේ පිටපතක් සාදා ගනිමු, ප්රතිඵලයක් වශයෙන් අපට සමාන ස්ථර දෙකක් ලැබෙනු ඇත. ඉන්පසු ස්තරයේ පිටපතේ ඇති ඊතලය තෝරා එය සන්දර්භය මෙනුවෙන් Transform=>Rotate Transformation=>Rotate විධානය තේරීමෙන් එය 180° කරකවන්න. රූපයේ දැක්වෙන පරිදි අපට එකම බොත්තම ලැබෙනු ඇත. 16. එක් ව්‍යාපෘතියක් සඳහා එකම වර්ගයේ බොත්තම් විවිධ ස්ථරවල එක් ගොනුවක ගබඩා කිරීම වඩාත් පහසු බව කරුණාවෙන් සලකන්න, එය මෙම අවස්ථාවේ දී පෙන්නුම් කෙරේ.

දැන් ඔබට එක් එක් බොත්තමෙහි ප්‍රශස්ත අනුවාද සුරැකිය යුතුය. පළමුව, පහළ ස්ථරය නොපෙනෙන ලෙස සකසන්න, මෙම නඩුවේ ඉහළ ස්ථරයේ බොත්තම සංරක්ෂණය වනු ඇත. File=>Save for Web විධානය තෝරන්න, බොත්තම් ප්‍රශස්තිකරණ පරාමිති වින්‍යාස කරන්න, උදාහරණයක් ලෙස, රූපයේ දැක්වෙන පරිදි. 17, සුරකින්න බොත්තම ක්ලික් කර ගොනු නාමයක් ඇතුළත් කරන්න. අවසානයේ සුරකින ලද බොත්තම රූපයේ දැක්වේ. 18. දැන් පහළ ස්ථරයට දෘශ්‍යතාව නැවත ලබා දී, ඉහළ ස්ථරය නොපෙනෙන ලෙස සකසා, දෙවන බොත්තම ඒ ආකාරයෙන්ම සුරකින්න, එයට වෙනත් නමක් ලබා දෙන්න. ප්රතිඵලය රූපයේ දැක්වේ. 19.

දැන් ඉතිරිව ඇත්තේ බොත්තම් වෙබ් පිටුවේ තරමක් පිළිගත හැකි බව සහතික කර ඒවා අභිරුචි පිටුවක තැබීමයි (රූපය 20). මෙහි ප්රතිඵලයක් වශයෙන්, මෙම උදාහරණයේ දී, Primer2.html ගොනුව සහ රූප ෆෝල්ඩරයේ (Primer2 ෆෝල්ඩරය) ග්රැෆික් රූප දෙකක් ලබා ගන්නා ලදී.

අවශ්ය නම්, ප්රශස්තිකරණ ක්රියාවලියේදී බොත්තමක් පෙත්තක් බවට පත් කිරීම පහසුය. මෙම අවස්ථාවෙහිදී, File=>Save for Web (File=>Save for Web) විධානය තෝරා ප්‍රශස්තිකරණ පරාමිති සැකසීමෙන් පසු, ඔබ මෙවලම් පුවරුවෙන් Slice Select මෙවලම තෝරා රූපය මත දෙවරක් ක්ලික් කරන්න, එය අවසානයේ සිදුවනු ඇත. අනුක්‍රමික අංක 1 (රූපය 21) සමඟ ස්වයංක්‍රීයව පෙත්තක් බවට පත් වේ. නැවත වරක් දෙවරක් ක්ලික් කිරීමෙන් Slice Options කවුළුව විවෘත වනු ඇත, එහිදී ඔබට සබැඳියක් සඳහන් කිරීමට අවශ්‍ය වන අතර, පෙත්තෙහි නම විකල්ප වශයෙන් වෙනස් කිරීමට සිදුවේ (රූපය 22), ඉන්පසු ප්‍රශස්ත කළ රූපය සුරකින්න. මෙම නඩුවේ ප්රතිඵලය වනුයේ Files Primer3.html (රූපය 23) සහ Primer3.gif (Primer3 ෆෝල්ඩරය).

අන්තර් ක්රියාකාරී මූලද්රව්ය

පිටුවක් ජීවයට ගෙන ඒමට එක් ක්‍රමයක් නම් එහි වෙනස් කරන නිර්මාණ අංග හඳුන්වා දීමයි පෙනුම(හෝ තත්වය) මූසිකයේ හැසිරීම මත පදනම්ව හෝ, වෙනත් ඕනෑම අවස්ථාවකදී, අඩු වාර ගණනක්: පරිමාණය, අනුචලනය, පැටවීම, දෝෂ, ආදිය.

එවැනි මූලද්‍රව්‍ය අතර වඩාත් ප්‍රසිද්ධ වන්නේ මූසිකයේ බලපෑම යටතේ පෙනුම වෙනස් කරන රෝල්ඕවර් (ඉංග්‍රීසි රෝල් ඕවර් රෝල් ඕවර්, ටර්න් ඕවර් වලින්) මූලද්‍රව්‍ය වේ. සාමාන්‍ය පෙරළීම් සඳහා උදාහරණ සජීවිකරණ බොත්තම් වේ. වෙනත් වෙබ් අඩවි සංචාලන අංග නිර්මාණය කිරීමේදී රෝල්වර්ස් බොහෝ විට භාවිතා වේ. යථාර්ථයේ දී, ඕනෑම පෙරළීමක් එකක් නොවේ, නමුත් (හතර දක්වා) රූප කිහිපයක්, ඒ සෑම එකක්ම නිශ්චිත සිදුවීමකට අනුරූප වේ. ප්රධාන සිදුවීම් පහත පරිදි සැලකේ: සාමාන්ය සාමාන්ය තත්වය, මූලද්‍රව්‍යයක් මත මූසික කර්සරය සැරිසැරීම සහ කර්සරය එය මත තබා ඇති විට වම් මූසික බොත්තම පහළට එබීම. න්‍යායාත්මකව, ක්ලික් කිරීමෙන් පසු වම් මූසික බොත්තම ක්ලික් කිරීම, බොත්තම මුදා හැරීමෙන් පසු ඉහළට, සක්‍රීය කලාපයෙන් ඉවත් වන විට පිටතට යන සිදුවීම් සම්බන්ධ විය හැකිය. කෙසේ වෙතත්, ප්රායෝගිකව, ඒවා බොහෝ විට පළමු සිදුවීම් තුන හෝ දෙක සඳහා පමණක් මූලද්රව්යය වෙනස් කිරීමට සීමා වේ.

සම්භාව්ය පෙරළීම්

සම්භාව්‍ය අර්ථයෙන්, පෙරළීම යනු GIF ආකෘතියේ ග්‍රැෆික් රූප මාලාවක් සහ ඊට අනුරූප HTML කේතයකි, එයට ස්තූතිවන්ත වන අතර, මූසිකයේ හැසිරීම අනුව, බ්‍රව්සර් කවුළුව තුළ එක් රූපයක් තවත් ප්‍රතිස්ථාපනය කරයි.

Illustrator යනු සම්භාව්‍ය අර්ථයෙන් සෘජුවම පෙරළීම් නිර්මාණය කිරීම සඳහා අදහස් නොකෙරේ, නමුත් එය ඔවුන් සඳහා මූලික අංගයන් වර්ධනය කිරීමට උපකාරී වේ. මෙම නඩුවේ අදහස වන්නේ පළමු සිදුවීමට අනුරූප වන රූපය සමඟ ස්ථරයක් නිර්මාණය කිරීමයි. ඉන්පසු ස්තරයේ පිටපතක් සාදා දෙවන සිදුවීමට ගැලපෙන පරිදි රූපය පරිවර්තනය කරන්න, යනාදිය. ප්‍රතිඵලයක් ලෙස ලැබෙන බහු ස්ථර රූපය PSD ගොනුවකට සංරක්‍ෂණය කර ඇති අතර, එහි පදනම මත Image Ready වැඩසටහනේ පෙරළීමක් සාදනු ලැබේ. Illustrator වැඩසටහන භාවිතා කිරීමේ වාසිය, වෙනත් බොහෝ අවස්ථාවන්හිදී මෙන්, වෙනත් ඒවායේ නොමැති එහි රසවත් විශේෂාංග ගණනාවක් වේ. මෘදුකාංග, දෛශික ග්‍රැෆික්ස් පරිවර්තනය කිරීමේ පහසුව සමඟ ඒකාබද්ධව.

මූසිකයේ හැසිරීම අනුව වර්ණය වෙනස් කරන සෙල්ලිපියක ස්වරූපයෙන් පෙරළීමක් නිර්මාණය කිරීමට උත්සාහ කරමු. Illustrator විවෘත කර කළු පැහැයෙන් පුරවා ඇති වටකුරු සෘජුකෝණාස්‍රයක හැඩයක් සාදන්න (රූපය 24), එහි පිටපතක් සාදා තිරයේ නිදහස් කොටසක තබන්න. සෘජුකෝණාස්‍රයේ පළමු පිටපත මධ්‍යයේ උද්දීපනයක් සහිත දැල් වස්තුවක් බවට පරිවර්තනය කරන්න (විධානය Object=>Create Gradient Mesh Object=>Create Gradient Mesh), පේළි හතරක් සහ තීරු දහයක් සඳහන් කරමින් (රූපය 25). සෘජුකෝණාස්‍රයේ දෙවන පිටපත සක්‍රිය කර රූපයේ දැක්වෙන පරිදි ආසන්න වශයෙන් අනුක්‍රමණ පිරවුමකට සකසන්න. 26. දැලක උඩින් ශ්‍රේණියේ වස්තුව උඩින් ඇතිරිලි කරන්න, අනුක්‍රමණ වස්තුවේ පාරාන්ධතාව 80% දක්වා අඩු කරන්න, සහ ප්‍රමාණය පික්සල 1කින් පමණ අවසානයේ ගැටීමක බලපෑම අනුකරණය කරන්න. ඉන්පසු වස්තූන් මුදුනේ ශිලා ලේඛනය මුද්රණය කරන්න. එහි මුල් ස්වරූපයෙන්, එය සාමාන්‍ය තත්වයට අනුරූප වන සුදු පැහැයක් ගැනීමට ඉඩ දෙන්න (රූපය 27), පසුව පෙරළීමේ තත්වය වෙනස් වූ විට, සෙල්ලිපියේ වර්ණය වෙනස් වේ, උදාහරණයක් ලෙස, මූසික සලකුණ කොළ පැහැයට හැරේ. මූසික බොත්තම එබූ විට (පහළ තත්ත්‍වය) එය මත සැරිසරන අතර (අවස්ථාවට වඩා) නිල් පැහැයට හැරේ.

මෙම අදියරේදී ස්ථර palette වෙත අවධානය යොමු කරන්න, එහි ඇත්තේ එක් ස්ථරයක් පමණි. Layers palette මෙනුවෙන් Duplicate Layer විධානය භාවිතා කිරීමෙන් මෙම ස්ථරයේ පිටපත් දෙකක් සාදන්න; palette තුළ ස්ථර තුනක් ඇත (රූපය 28). ඉන්පසු ස්ථරයේ පළමු පිටපතෙහි ශිලා ලේඛනයේ වර්ණය කොළ පාටට වෙනස් කරන්න, දෙවන පිටපතෙහි නිල් (රූපය 29). එහි ප්රතිඵලයක් වශයෙන්, පෙරළීම සඳහා අවශ්ය හිස් ලබා ගනු ඇත.

සාදන ලද රූපය PSD ආකෘතියට අපනයනය කරන්න, ස්ථර සංරක්ෂණය කරන්න, File=>Export විධානය භාවිතා කර RGB වර්ණ ආකෘතිය තෝරන්න (රූපය 30). ImageReady වැඩසටහනේ සාදන ලද PSD ගොනුව විවෘත කරන්න (රූපය 31 සහ 32). Animation palette මෙනුවෙන් Make Frames From Layers විධානය තේරීමෙන් ස්ථර මත පදනම්ව රාමු සාදන්න. සජීවිකරණ කවුළුව රූපයේ මෙන් පෙනෙනු ඇත. 33. මෙම අවස්ථාවේදී, Rollovers palette තුළ මුලින් තනි Normal තත්වයක් නිර්මාණය වනු ඇත.

ඉන්පසුව, සජීවිකරණ කවුළුව තුළ, ප්රේරණය කරන ලද තත්වයට අනුරූප රාමුව තෝරන්න, සහ ස්ථර 1 පිටපත් ස්තරය ස්වයංක්රීයව Layers palette තුළ තෝරා ගනු ලැබේ (රූපය 34). Rollovers palette වෙත ගොස් Create Rollover state බොත්තම මත ක්ලික් කරන්න (පෙරළීමේ තත්වයක් සාදන්න) fig. 35, එය රෝල්වර්ස් palette (රූපය 36). ඒ ආකාරයෙන්ම Down State එකක් සාදන්න. Rollovers palette හි සාමාන්‍ය තත්වය සක්‍රිය කර සාමාන්‍ය තත්වයට අනුරූප විය යුතු එකක් හැර Animation palette හි ඇති සියලුම රාමු මකන්න. එහි ප්‍රතිඵලයක් වශයෙන්, එක් එක් පෙරළීමේ ප්‍රාන්තය සඳහා සජීවිකරණ පුවරුවේ එක් රාමුවක් පමණක් ඇත (රූපය 37, 38 සහ 39).

සහල්. 38. රූපය, සජීවිකරණ කවුළුව සහ අධි රාජ්‍ය සඳහා ස්ථර සහ රෝල්වර්ස් පැලට් බැලීම

මෙවලම් තීරුවේ පෙරදසුන් පෙරදසුන පෙරදසුන ක්ලික් කර බ්‍රවුසර කවුළුව වෙත යාමෙන් ප්‍රතිඵලය පරීක්ෂා කරන්න (රූපය 40). ඊට පසු, File=>Save Optimized විධානය භාවිතයෙන් ගොනුව සුරකින්න සහ HTML සහ Images (*.html) විකල්පය සඳහන් කරන්න. මෙහි ප්රතිඵලයක් වශයෙන්, මෙම උදාහරණයේ දී, Primer4.html ගොනුව සහ රූප ෆෝල්ඩරය තුළ ග්රැෆික් රූප මාලාවක් ලබා ගන්නා ලදී.

සහල්. 40. Rollover මූලද්‍රව්‍ය සහිත බ්‍රව්සර් කවුළුව

SVG පෙරළීම්

වැඩි වැඩියෙන් ජනප්‍රිය SVG (පරිමාණය කළ හැකි දෛශික ග්‍රැෆික්ස්) ආකෘතිය දෛශික ග්‍රැෆික්ස්), XML ප්‍රමිතිය මත පදනම්ව නිර්මාණය කර ඇති අතර, ඔබට විවිධ අන්තර්ක්‍රියාකාරී මූලද්‍රව්‍ය, විශේෂයෙන් පෙරළීම් ලබා ගැනීමට ඉඩ සලසයි, නමුත් ප්‍රායෝගිකව මෙය සම්පූර්ණයෙන්ම වෙනස් ලෙස ක්‍රියාත්මක වේ. සම්භාව්‍ය ඒවා මෙන් නොව, අන්තර්ක්‍රියාකාරී SVG rollovers නිර්මාණය කිරීම සඳහා, අනුරූප HTML කේතය සම්පූර්ණයෙන්ම ස්වයංක්‍රීයව ජනනය වන විට, JavaScript භාෂාව පිළිබඳ දැනුම සහ වස්තු-නැඹුරු වැඩසටහන්කරණයේ මූලික මූලධර්ම පිළිබඳ අවබෝධයක් අවශ්‍ය බව සඳහන් කිරීම වටී.

SVG වස්තූන් සමඟ වැඩ කිරීම සඳහා විශේෂ palette SVG අන්තර්ක්‍රියාකාරීත්වයක් ඇත, එය විධානය භාවිතයෙන් පහසුවෙන් විවෘත කළ හැකිය කවුළුව => SVG අන්තර්ක්‍රියාකාරීත්වය (කවුළුව => SVG අන්තර්ක්‍රියාකාරීත්වය) fig. 41.

අන්තර්ක්‍රියාකාරී බොත්තමක ​​උදාහරණය භාවිතයෙන් පෙරළීමක් නිර්මාණය කිරීම සඳහා මෙම විකල්පය සලකා බලමු, ඔබ මූසිකය ගෙන යන විට සෙල්ලිපියේ වර්ණය කළු සිට නිල් දක්වා වෙනස් වන අතර මූසිකය ක්‍රියාකාරී කලාපයෙන් පිටවන විට නැවත කළු බවට පරිවර්තනය වේ.

වටකුරු දාර සහිත සෘජුකෝණාස්රාකාර බොත්තමක් සාදා ඒ සඳහා සුදුසු අනුක්‍රමික පිරවුමක් තෝරන්න, උදාහරණයක් ලෙස රූපයේ දැක්වෙන පරිදි. 42. Transparence palette හි ඇති බොත්තමේ විනිවිදභාවය සකසන්න.මෙම උදාහරණයේදී පාරාන්ධතා අගය 50% ලෙස සකසා ඇත. බොත්තමේ පිටපතක් සාදන්න, එය තද කොළ වලින් පුරවන්න (රූපය 43), ඉන්පසු එය දැල් වස්තුවක් බවට පරිවර්තනය කරන්න Object => Create Gradient Mesh විධානය, පේළි හතරක් සහ තීරු දහයක් සඳහන් කරමින්, සහ පෙනුම ලැයිස්තුවේ (බලන්න) To Center විකල්පය තේරීමෙන් සහ Highlight අගය 100 ට සැකසීමෙන්. දැල් වස්තුව සහිත ස්ථරයේ පාරාන්ධතාවය 40% දක්වා අඩු කරන්න (රූපය 44). ග්‍රේඩියන්ට් එකකට උඩින් දැල් වස්තුවක් තබන්න, බොත්තම රූපයේ පෙන්වා ඇති ආකාරයට සමාන වනු ඇත. 45.

සහල්. 44. බොත්තමක ​​පිටපතක් දැල් වස්තුවක් බවට පත් කරන්න

අපේක්ෂිත ශිලා ලේඛනය සමඟ බොත්තම සම්පූර්ණ කර Align palette හි අනුරූප බොත්තම් භාවිතයෙන් එහි පිහිටීම සකස් කරන්න. ප්රතිඵලය රූපයේ එකිනෙකට ඉහලින් ඇති වස්තූන් තුනක් සහිත එක් ස්ථරයක් අඩංගු වනු ඇත (රූපය 46). උපලේඛනගත සිදුවීම් පෙළ වස්තුවකට සාපේක්ෂ වනු ඇත, එබැවින් පහසුව සඳහා, වස්තුව මත දෙවරක් ක්ලික් කර නව නමක් ඇතුළත් කිරීමෙන් එහි නම Text ලෙස වෙනස් කරන්න. ඒ හා සමානව, ස්ථරයේ නම ස්ථරය 1 සිට ස්ථරය දක්වා වෙනස් කරන්න (රූපය 47).

සිදුවීම් සැකසීමට JavaScript ක්‍රියා පටිපාටි භාවිතය ඇතුළත් වේ, එබැවින් ඔබ මෙම ක්‍රියා පටිපාටි විස්තර කරන ගොනුවක් ඇතුළත් කළ යුතුය. එය Events.js ලෙස හඳුන්වනු ලබන අතර ඔබ Adobe Illustrator ස්ථාපනය කරන විට Sample Files\Sample Art\SVG\SVG ෆෝල්ඩරය තුළ තැටියට සුරැකේ. Events.js ගොනුව සම්බන්ධ කිරීම සඳහා, JavaScript ගොනු SVG අන්තර්ක්‍රියාකාරී විධානය භාවිතා කරන්න (රූපය 48). ඊළඟට, ඔබ එකතු කරන්න බොත්තම ක්ලික් කර ඔබේ දෘඪ තැටියේ අවශ්ය ගොනුව සොයා ගත යුතුය. ඔහුගේ නම URL ක්ෂේත්රයේ දිස්වන විට (රූපය 49), Done බොත්තම ක්ලික් කරන්න.

සහල්. 48. JavaScript ගොනු විධානය තේරීම

ඊළඟට, ඔබට පෙළ වස්තුව සඳහා මූසික සිදුවීම් සඳහා ප්‍රතිචාරයක් අර්ථ දැක්විය යුතුය. පෙළ වස්තුව තෝරන්න, SVG අන්තර්ක්‍රියාකාරී තාලයේ සිදුවීම් ක්ෂේත්‍රය තුළ, mouseover elemColor (evt, "Text", "#3333FF") සිදුවීම තෝරන්න, මෙයින් අදහස් කරන්නේ මූසිකය පෙළ වස්තුවට ඉහළින් ඇති විට එහි වර්ණය වෙනස් වන බවයි. නිල් (රූපය 50). මූසිකය සක්‍රිය ප්‍රදේශයෙන් ඉවත් වූ පසු අකුරු වර්ණය කළු පැහැයට හැරවීම සඳහා, ඔබට තවත් onmouseout සිදුවීමක් නිර්මාණය කිරීමට අවශ්‍ය වනු ඇත, එය SVG අන්තර් ක්‍රියාකාරීත්වය palette හි සිදුවීම් ක්ෂේත්‍රයෙන් තෝරන්න. ඉන්පසුව ක්‍රියාකාරී රේඛාවේ elemColor (evt, "Text", "#000000") යන පෙළ ඇතුළත් කරන්න, මෙය වර්ණය කළු පැහැයට හැරේ (රූපය 51).

සහල්. 51. පෙළ වස්තුව සඳහා SVG අන්තර් ක්‍රියාකාරීත්වයේ තලයේ අවසාන පෙනුම

සාදන ලද පෙරළීම SVG ගොනුවක් ලෙස File=>Save as (File=>File type SVG ආකෘතියෙන්) සුරකින්න, පසුව SVG ගොනුව සුරැකීමේ විකල්ප රූප සටහන 52 හි පෙන්වා ඇති පරිදි සකසන්න. සුරැකීමෙන් පසුව ඔබට ලැබෙන්නේ එකක් පමණි. SVG දිගුව සහිත තනි ගොනුවක් මිස දෙකක් නොව, සම්භාව්‍ය පෙරළීමකදී මෙන්, මෙම අවස්ථාවේදී Primer5.svg (Primer5 ෆෝල්ඩරය) ගොනුව ලැබුණි.කෙසේ වෙතත්, පෙරළීම සැබවින්ම ක්‍රියාත්මක වීමට නම්, ඔබ අතිරේකව පිටපත් කළ යුතුය. JavaScript ක්‍රියා පටිපාටි විස්තරයෙන් Events.js ගොනුව. මෙයින් පසු, ඔබට පෙරළීමේ ක්‍රියාකාරිත්වය පරීක්ෂා කළ හැකිය - ප්‍රතිඵලය රූපය 53 හි පෙන්වා ඇති ආකාරයට පෙනෙනු ඇත.

SVG සජීවිකරණය

සජීවිකරණය ප්‍රකාශ කිරීමට SVG ආකෘතිය ද භාවිතා කළ හැක. සරල සජීවිකරණ මූලද්‍රව්‍යයක් නිර්මාණය කිරීමට උත්සාහ කරමු (මෙම අවස්ථාවේදී එය සමාගම පිළිබඳ තොරතුරු වනු ඇත), ඔබ මූසිකය අනුරූප ග්‍රැෆික් වස්තුව මත තබා ඇති විට තිරය මත දිස්වන අතර ඔබ අන්තර්ක්‍රියාකාරී මූලද්‍රව්‍යයෙන් මූසිකය ඉවත් කරන විට අතුරුදහන් වේ.

රූපයේ දැක්වෙන පරිදි පහත දැක්වෙන ග්‍රැෆික් සහ පෙළ වස්තු මාලාව ආසන්න වශයෙන් නිර්මාණය කරමු. 54. Layers palette හි ඇති ඊලඟ වස්තුවේ නම අනුක්‍රමිකව ක්ලික් කර ඇතුල් කිරීමෙන් නිර්මාණය කරන ලද සියලුම වස්තූන් පහසු ආකාරයකින් නැවත නම් කරමු. කැමති නම(රූපය 55). රූපයේ දක්වා ඇති ඒවා බව කරුණාවෙන් සලකන්න. 56 වස්තු Text1, Text2, Text3 සහ Path1 සෑම විටම දෘශ්‍යමාන වනු ඇත, අනෙක් සියල්ල ඔබ Text1 වස්තුව මත මූසිකය ගෙන ගිය විට පමණි.

සහල්. 54. රූපයේ මුල් දර්ශනය

SVG Interactivity palette වෙතින් JavaScript ගොනු විධානය භාවිතයෙන්, Add බොත්තම ක්ලික් කිරීමෙන්, ඔබගේ දෘඪ තැටියේ අවශ්‍ය ගොනුව වෙත යොමු කිරීමෙන් සහ Done බොත්තම ක්ලික් කිරීමෙන් JavaScript ක්‍රියා පටිපාටි විස්තර කරන Events.js ගොනුව ඇතුළත් කරන්න.

Text1 වස්තුව සඳහා මූසික සිදුවීම් සඳහා ප්‍රතිචාරයක් නිර්වචනය කරන්න. පෙළ වස්තුව තෝරන්න, SVG අන්තර්ක්‍රියාකාරී තලයෙහි සිදුවීම් ක්ෂේත්‍රය තුළ, onmouseover සිදුවීම තෝරන්න සහ පහත පේළියේ elemShow(evt, "Text4") පෙළ ඇතුළත් කරන්න; elemShow(evt, "Path2") . එහි ප්‍රතිඵලයක් ලෙස, මූසිකය Text1 වස්තුවට ඉහළින් ඇති විට, Text4 සහ Path2 වස්තු දෘශ්‍යමාන වනු ඇත. සිදුවීමක් සිදු වූ විට ක්‍රියා කිහිපයක් සිදු කළ යුතු නම්, ඒවා “;” ලකුණ භාවිතයෙන් සඳහන් කළ යුතු බව කරුණාවෙන් සලකන්න. ඉන්පසු onmouseout සිදුවීම සඳහා සමාන මෙහෙයුමක් සිදු කරන්න, ඒ සඳහා පෙළ ඇතුළත් කරන්න, එයින් අදහස් කරන්නේ වස්තූන් සැඟවීම (රූපය 57).

File=>Save as command භාවිතා කරමින් ප්‍රතිඵලය SVG ගොනුවක් ලෙස සුරකින්න, ගොනු නාමය සඳහන් කරමින්, ගොනු ආකාරයේ ක්ෂේත්‍රයේ SVG ආකෘතිය තෝරා, පසුව රූපයට අනුකූලව SVG ගොනුව සුරැකීමේ විකල්ප සැකසීම. 58. සුරැකීමෙන් පසුව, Primer6.svg ගොනුව ලැබෙනු ඇත (Primer6 ෆෝල්ඩරය). Events.js ගොනුව මෙම ගොනුව සහිත ෆෝල්ඩරයට පිටපත් කිරීමට අමතක නොකරන්න. මෙයින් පසු ඔබ coz ධාවනය කරන්නේ නම් මෙම ගොනුව, එවිට ඔබට රූපයේ දැක්වෙන ප්රතිඵලය පෙනෙනු ඇත. 59. ඔබට අවශ්‍ය දේ මෙයයි. අපගේ සැලසුම්වලට ඇතුළත් නොවූ එකම දෙය වූයේ පූරණය වන විට Text 4 සහ Path 2 වස්තු වල මුල් පෙනුමයි. මෙම අඩුපාඩුව ඉවත් කිරීම සඳහා, වස්තු දත්ත දෙකම එකවර තෝරා ඒවා සඳහා ක්‍රියාවක් සාදන්න elemHide(evt, "Text4"); elemHide(evt, "Path2") onload ඉසව්වේ (රූපය 60). ගොනුව නැවත සුරකින්න සහ Text4 සහ Path2 වස්තූන් දැන් පෙනෙන්නේ ඔබ Text1 වස්තුව මත සැරිසරන විට පමණක් බව සහතික කර ගන්න.

GIF සජීවිකරණය

සජීවිකරණ gif ඇතුළුව වෙබ් සජීවිකරණයකින් තොරව ඕනෑම වෙබ් පිටුවක් සිතාගත නොහැකිය. ඒවා නිර්මාණය කිරීම සඳහා ඇති එක් විකල්පයක් නම් Adobe ImageReady යෙදුම භාවිතා කිරීමයි, එය වෙනත් දේ අතර, ස්ථර වලින් සජීවිකරණ නිර්මාණය කිරීමට ඉඩ සලසයි. මෙම අවස්ථාවෙහිදී, Adobe Illustrator ඇතුළුව විවිධ යෙදුම්වල බහු ස්ථර රූපය සකස් කළ හැකිය.

Window=>Symbols විධානය සමඟින් විවෘත කරන ලද, Symbols palette වෙතින් හෝ Window=>Symbol Libraries විධානය භාවිතයෙන් විවෘත කළ හැකි එක් සංකේත පුස්තකාලයකින් මූලද්‍රව්‍ය මත පදනම්ව සජීවිකරණයක් නිර්මාණය කිරීම ඉතා පහසුය. ).

උදාහරණයක් ලෙස, අපි ඕනෑම සංකේත වස්තුවක ප්‍රමාණය වැඩි කිරීමට උත්සාහ කරමු; වස්තුව වැඩි කිරීමේ ක්‍රියාවලියේ ප්‍රධාන අදියර වෙනම ස්ථර මත සැකසිය යුතුය. පළමුව, සංකේත වස්තූන් එකකට ඉහළින් තබන්න, ඉන්පසු එක් එක් වස්තුවේ ප්‍රමාණය වැඩි කරන්න, උදාහරණයක් ලෙස රූපයේ දැක්වෙන පරිදි. 61. ප්රතිඵලයක් වශයෙන්, බොහෝ වස්තූන් සහිත එක් ස්ථරයක් ස්ථර palette තුළ නිර්මාණය වනු ඇත (රූපය 62). ඔබ මෙම රූපය PSD ආකෘතියට කෙලින්ම අපනයනය කරන්නේ නම්, එය කිසිවක් ලබා නොදේ, එහි ඇත්තේ එක් ස්ථරයක් පමණක් වන අතර, ස්වාභාවිකවම, ඔබ ImageReady වැඩසටහනේ PSD ගොනුව විවෘත කරන විට, එහි ඇත්තේ එක් ස්ථරයක් පමණි. එමනිසා, ඔබ මුලින්ම විවිධ ස්ථර මත වස්තූන් තැබිය යුතුය. මෙය කළ හැකිය විවිධ ක්රමලේසිම ක්‍රමය තමයි මුලින්ම Layer palette එකේ Layer 1 තෝරලා Release to Layer කියන විධානය භාවිතා කිරීම. එහි ප්‍රතිඵලය වනුයේ එක් එක් වස්තුව තමන්ගේම ස්තරය වෙත ගෙන යනු ඇත, නමුත් ඒවා සියල්ලම 1 වන ස්ථරයේ කැදලි වනු ඇත. එම නිසා, ඔබට පසුව ලේයර් 1 ස්ථරයට ඉහලින් ඇති පරිදි සියලුම කැදැලි ස්ථර ලේයර් පැලට් එකේ ඉහලට අතින් ඇදගෙන යාමට සිදුවනු ඇත, ඉන්පසු දැන් හිස් වූ 1 වන ස්ථරය මකා දමන්න (රූපය 63). රූපයේ දැක්වෙන පරිදි සැකසීම් සමඟ File=>Export විධානය භාවිතයෙන් පින්තූරය PSD ආකෘතියට අපනයනය කරන්න. 64.

ImageReady වැඩසටහනේ සාදන ලද PSD ගොනුව පූරණය කරන්න (රූපය 65 සහ 66). Animation Make Frames From Layers palette මෙනුව විවෘත කරන්න. එහි ප්‍රති result ලයක් ලෙස, රාමු පහක් සාදනු ලබන අතර, ඒ සෑම එකක්ම තමන්ගේම ස්තරයට අනුරූප වන අතර, සජීවිකරණ පුවරුවේ කවුළුව රූපයේ මෙන් පෙනෙනු ඇත. 67.

මෙයින් පසු, මෙම නඩුවේ සාදන ලද එක් එක් රාමු වල කාලසීමාව සකසන්න, සියලු රාමු සඳහා කාලසීමාව 0.2 s ලෙස සකසා ඇත. ඉන්පසු File=>Save Optimized (File=>Save with optimization) විධානය භාවිතා කරමින් ප්‍රශස්තිකරණය සමඟ සජීවිකරණය සුරකින්න. ප්රතිඵලය රූපයට සමාන විය හැක. 68.

Illustrator හි Live Blends කාර්යයන් භාවිතා කිරීම සඳහා ImageReady හි සජීවිකරණයට පහසුවෙන් පරිවර්තනය කළ හැකි හිස් තැන් ලබා ගැනීම වඩාත් පහසු වේ. Illustrator සහ ImageReady මෙම ඒකාබද්ධ භාවිතය GIF සජීවිකරණ නිර්මාණය කිරීමේ ක්‍රියාවලිය සැලකිය යුතු ලෙස වේගවත් කරයි.

නිදසුනක් ලෙස, අත්තනෝමතික බහු-වර්ණ වස්තු දෙකක් අඳින්න, ඉන්පසු සුදුසු පරාමිතීන් සමඟ මිශ්ර සබැඳියක් සමඟ ඒවා සම්බන්ධ කරන්න (රූපය 69). රූපය තනි තට්ටුවක් මත ඇති බැවින් සජීවිකරණය නිර්මාණය කිරීම සඳහා මෙම ගොනුව කෙලින්ම භාවිතා කළ නොහැක (රූපය 70). එමනිසා, ඔබ මුලින්ම මිශ්ර වස්තුවේ එක් එක් මූලද්රව්යය වෙනම ස්ථරයක් මත තැබිය යුතුය. මෙය සිදු කිරීම සඳහා, ස්ථර කවුළුව තුළ, රේඛාව තෝරන්න, එහි ඉහළ දකුණු කෙළවරේ කළු ඊතලය මත ක්ලික් කිරීමෙන් palette මෙනුව සක්රිය කරන්න, සහ ස්ථර අනුක්රමයට මුදා හැරීමේ විධානය තෝරන්න (රූපය 71). Shift යතුර ඔබාගෙන සිටින්න, සාදන ලද ස්ථර තෝරා ඒවා 1 වන ස්ථරයට ඉහළින් තබන්න, ඉන්පසු 1 වන ස්ථරය මකා දමන්න, එහි ප්‍රතිඵලයක් ලෙස එය කුණු කූඩයට ගෙන යාම, ස්ථර palette රූපයේ දැක්වෙන ආකාරයටම ගනු ඇත. 72.

සහල්. 70 ආරම්භක තත්වයස්ථර කවුළු

File=>Export විධානය භාවිතයෙන් සාදන ලද ගොනුව PSD ආකෘතියට අපනයනය කරන්න. ImageReady වැඩසටහනේ සාදන ලද PSD ගොනුව විවෘත කරන්න (රූපය 73). Illustrator හි සාදන ලද සියලුම ස්ථර ස්ථර කවුළුවෙහි දිස්වනු ඇති බව කරුණාවෙන් සලකන්න (රූපය 74), සහ සජීවිකරණ කවුළුවේ දැනට ඇත්තේ එක් රාමුවක් පමණි.

palette එකේ ඉහළ දකුණු කෙළවරේ ඇති කළු පැහැති ඊතලය මත ක්ලික් කිරීමෙන් Animation palette මෙනුව සක්‍රිය කර Make Frames From Layers විධානය තෝරන්න, එහි ප්‍රතිඵලයක් ලෙස, මෙම උදාහරණයේදී, රාමු පහක් සාදනු ලබන අතර, සජීවිකරණ palette කවුළුව විසින් ගනු ලැබේ. රූපයට අනුකූලව ආකෘතිය. 75. Shift යතුර ඔබාගෙන සිටින අතරතුර සියලුම රාමු තෝරන්න සහ මෙම උදාහරණයේ සුදුසු රාමු කාලසීමාව සකසන්න, එක් එක් රාමුව සඳහා තත්පර 0.2 ක එකම කාලය ගත වේ. ඉන්පසු File=>Save Optimized (File=>Save with optimization) විධානය භාවිතා කර ප්‍රශස්තිකරණය සමඟ ගොනුව සුරකින්න, ගොනු වර්ග ලැයිස්තුවේ Images Only (*.gif) විකල්පය සැකසීම. සජීවිකරණය රූපයට සමාන වනු ඇත. 76.

වඩාත් සිත්ගන්නා කරුණක් ලෙස පෙනෙන්නේ චලනය නොව, මිශ්‍ර වස්තූන්ගේ සුමට ප්‍රමාණය වෙනස් කිරීමයි. උදාහරණයක් ලෙස, ඔබට දැනටමත් නිර්මාණය කර ඇති මිශ්‍ර සංක්‍රාන්තිය භාවිතා කළ හැකිය. මෙම අවස්ථාවෙහිදී, එක් එක් මිශ්‍ර සංක්‍රාන්ති මූලද්‍රව්‍ය සඳහා වෙන වෙනම ස්ථර සෑදීමෙන් පසු, පෙළගස්වන පුවරුවේ තිරස් පෙළගස්වන මධ්‍යස්ථානය සහ සිරස් පෙළගැස්වීමේ මධ්‍යස්ථාන බොත්තම් භාවිතයෙන් සියලුම වස්තූන් එකිනෙක මත තබන්න (රූපය 77) .

සාදන ලද ගොනුව PSD ආකෘතියට අපනයනය කරන්න (File=>Export File=>Export) සහ සාදන ලද PSD ගොනුව ImageReady වැඩසටහනේ විවෘත කරන්න (රූපය 78). ස්ථර මත පදනම්ව සජීවිකරණ රාමු සාදන්න (ස්ථර වලින් රාමු සාදන්න) සහ ඒවා සඳහා සුදුසු කාල සීමාවක් තෝරන්න (රූපය 79). ඉන්පසුව, සජීවිකරණය වඩාත් ඵලදායී කිරීමට, පවතින රාමු පිටපත් කරන්න, නමුත් ප්රතිලෝම අනුපිළිවෙලින් රූපය පළමුව වැඩි වන අතර පසුව අඩු වන අතර, එසේ රවුමකින් (රූපය 80). ඉන්පසු ප්‍රශස්තිකරණ ගොනුව සුරකින්න (File=>Save Optimized File=>Save with optimization). එහි ප්රතිඵලයක් වශයෙන් සජීවිකරණය රූපයේ දැක්වේ. 81.

සහල්. 80. රාමු අනුපිටපත් කිරීමෙන් පසු සජීවිකරණ කවුළුවේ තත්වය

සහල්. 81. නිමි සජීවිකරණය

Adobe Illustrator සහ After Effects
ආයාත කිරීම සහ සරල සජීවිකරණය හලෝ. අද අපි බලන්නේ After Effects හි සරල සජීවිකරණයක්.

සම්පත්: Adobe Illustrator CC
Adobe After Effects CC

Illustrator චිත්‍ර ඇඳීමෙන් ඉගෙනීම ආරම්භ කරමු.

අපි අඳිමු
1) පසුබිම ලෙස කහ පැහැති සෘජුකෝණාස්රයක් අඳින්න

රූපය 1 - සෘජුකෝණාස්රය

2) කවයක් අඳින්න සහ එය අනුක්‍රමණයකින් පුරවන්න
අපි රවුමේ ටිකක් වැඩ කරමු:
- සමෝච්ඡයේ පහළ ලක්ෂ්යය මකා දමන්න, අපි චාපයක් ලබා ගනිමු;
- සරල රේඛාවක් අඳින්න, චාපයේ පතුල වසා, අපට අර්ධ වෘත්තාකාරයක් ලැබේ

රූපය 2 - 1) රවුම අඳින්න; 2) අනුක්‍රමණය; 3) ලක්ෂ්‍යය මකන්න

3) සෘජුකෝණාස්රයක් අඳින්න සහ එහි පිටපතක් සාදන්න
- එක් අළු සෘජුකෝණාස්රයක්;
- තවත් සෘජුකෝණාස්රයක් තද අළු
4) කිරණ සංඛ්‍යාව 3 ලෙස සකසා තරු ලකුණකින් ත්‍රිකෝණයක් අඳින්න

රූපය 3 - 1) සෘජු ආලෝකය; 2) සෘජු අඳුරු; 3) ත්රිකෝණය

5) පෑන සහ සරල හැඩතල භාවිතයෙන් බළලෙකු අඳින්න

රූපය 4 - 1) හිස; 2) බෙල්ල; 3) ශරීරය; 4) කකුල; 5) වලිගය

දැන් වඩාත්ම වැදගත් මොහොත
අපි පින්තූර ස්ථර වලට බෙදා දෙමු (සජීවීකරණය කරන දේ වෙනම ස්ථරයක ඇත) මේ වගේ:

රූප සටහන 5 - සියලුම පින්තූර (රතු සලකුණ වැදගත් ස්ථර)

එච්චරයි, දැන් අපි ඉතිරි කරමු.
සුරැකීමේ සැකසුම් දෙස බලමු

රූපය 6 - සුරකින්න

සහ දැන් ඊළඟ අදියර. Adobe Illustrator වසා පසු බලපෑම් විවෘත කරන්න.

After Effects වෙත ආයාත කරන්න
ගොනුව - ආනයනය - ගොනුව - අපගේ සුරකින ලද Illustrator ගොනුව තෝරන්න.
අපි Illustrator වෙතින් ස්ථර ආයාත කිරීමට තෝරා ගනිමු; අපි දර්ශන ඇතුළත් කළහොත්, අපට ඒකාබද්ධ ස්ථර සහිත පින්තූරයක් ලැබෙනු ඇත, නමුත් අපට එය අවශ්‍ය නොවේ.

රූපය 7 - සංයුතිය ලෙස ආනයනය කරන්න

ඒක තමයි, ආනයනය කළේ.
දැන් අපි බලමු මොනවද තියෙන්නේ කියලා. සංයුතිය මත දෙවරක් ක්ලික් කරන්න එවිට එය විවෘත වන අතර අපට ස්ථර පෙනෙනු ඇත (සියල්ල නිවැරදිව සිදු කර ඇත්නම්, ස්ථර කිහිපයක් ඇත). අපට මෙය ලැබේ, රූපය බලන්න

රූපය 8 - විවෘත සංයුතිය

දැන් අපි අද මෙතන ඉන්නේ Animation එක.

පසු ප්‍රයෝග තුළ සජීවිකරණය
Pan Behind Tool (කෙටිමං - Y) භාවිතයෙන් ඊතලයේ මුදුනේ භ්‍රමණ ලක්ෂ්‍යය සකසන්න. අපි කරුණක් ගෙන අවශ්‍ය තැනට ගෙන යන්නෙමු. එහි ප්‍රතිඵලයක් ලෙස එය මෙලෙස දිස්වේවි..

රූපය 9 - පෑන් මෙවලම සහ ස්ථර

එච්චරයි, දැන් අපි සජීවිකරණය සඳහා ස්ථර වෙත යමු.
අපට Arrow සහ Head_cat ස්තරයක් අවශ්‍ය වේ.
අපි ඊතලයෙන් පටන් ගනිමු.
අපි ලැයිස්තුව පුළුල් කරමු, එය සොයාගෙන ඔරලෝසුව මත ක්ලික් කරන්න. එබැවින් අපි පළමු ලක්ෂ්යය බිංදුව තත්පරයට සකස් කරමු. සජීවිකරණය සම්පූර්ණයෙන් තත්පර 2ක් පවතිනු ඇත.
එබැවින්, ඔබ විසින් සිදු කළ යුතු සැකසුම් මේවාය (අපි මුළු ලකුණු 3 ක් තබමු):

දෙවැනි	0	1	2
	+66	- 70	+66

එය පෙනෙන්නේ මෙයයි:

රූපය 10 - භ්රමණ ඊතලය

දැන් අපි බළලාගේ හිස සජීවීකරණය කරමු.
අපි head_cat පුළුල් කර ස්ථානය සොයා ගනිමු .
මෙහි තිත් 4ක් පවතිනු ඇත.
අනෙක් ඒවාට බලපාන්නේ නැතිව අවසාන ඛණ්ඩාංකය පමණක් වෙනස් කරනු ලැබේ.

දෙවැනි	0.1	0.17	1.12	2.0
තනතුර	689.3	729.3	729.3	689.3

අපි පින්තූරය දෙස බලමු.

රූපය 11 - ස්ථාන හිස

ඉතින්, සජීවිකරණ මූලධර්මය මේ වගේ විය. ඊතලය දෙපැත්තට පැද්දෙන අතර, එය පූස් පැටවා වෙත ළඟා වූ විගස, එය හිස ඇතුළට ඇද, ටික වේලාවක් මෙම ස්ථානයේ රැඳී සිට එය නැවත එහි ස්ථානයට ගෙන යයි.

අවසාන අදියර

නිෂ්පාදනය
ඔබ ඔබේ කාර්යයෙන් නිමි භාණ්ඩයක් නිර්මාණය කළ යුතුය.
මෙනුව වෙත යන්න - Render පෝලිමට එක් කරන්න
Render පැනලය විවෘත වන අතර ප්‍රතිදාන මොඩියුලයේ (ක්ලික් දෙකක්) ප්‍රතිදාන ආකෘතිය තෝරන්න. මම *.mov ගත්තා

රූපය 12 - Render

RENDER බොත්තම මත ක්ලික් කර ප්රතිඵලය ලබා ගන්න (මාර්ගය සඳහන් කිරීමට අමතක නොකරන්න).
එච්චරයි.