დღეს ჩვენ გვაქვს უჩვეულო Adobe Illustrator გაკვეთილი. რადგან ამჯერად სტატიკურ სურათს კი არა, რეალურ ანიმაციას გავაკეთებთ. წარმოიდგინეთ, გამოდის, რომ Adobe Illustrator-ის დახმარებით შეგიძლიათ მულტფილმების დახატვაც :)

და ამისთვის არაფერი გვჭირდება. ფენების კომპეტენტური ორგანიზება და საბოლოო ნამუშევრის ექსპორტი swf ფორმატში, სადაც თითოეული ფენა გარდაიქმნება ანიმაციურ ჩარჩოში. დღევანდელ ტუტორიალში ჩვენ დავხატავთ ათვლის ანიმაციას რეტრო ფილმის სტილში. გამომავალი უნდა იყოს ფლეშ ფილმი იგივე უკუნით.

პირველი, რაც უნდა გააკეთოთ, არის ყველა საჭირო ელემენტის დახატვა მომავალი ანიმაციისთვის. ამისათვის მე გავაკეთე ორი ფირის ჩარჩოს პოზიცია ცალკე დოკუმენტში, წრე ცნობისთვის, რომელიც ცალკე სექტორებად არის მოჭრილი, ტექსტურა და ვერტიკალური ნაკაწრი სიძველის ეფექტის დასამატებლად, ისევე როგორც ყველა რიცხვი და წარწერა.

როდესაც ჩვენი მულტფილმის ყველა ნაწილი მზად იქნება, შეგიძლიათ დაიწყოთ თავად ანიმაციის შექმნა. მოხერხებულობისთვის, ეს საუკეთესოდ გაკეთებულია ახალ დოკუმენტში. ამ შემთხვევაში, ფენები ითამაშებენ ანიმაციური ჩარჩოების როლს. და პირველივე ფენაში, თქვენ უბრალოდ უნდა დააკოპიროთ ფილმის ჩარჩო. განათავსეთ იგი სამუშაო ადგილის შუაში.

ახლა შექმენით მეორე ფენა და დააკოპირეთ მასში ფილმის ჩარჩო, რომელშიც კიდეებზე ხვრელები კეთდება ცვლაში. ის ასევე უნდა იყოს ორიენტირებული.

ამ ორი ფენიდან უკვე შეგიძლიათ მიიღოთ მოძრავი ფილმის ანიმაცია. მაგრამ მოგვიანებით დაგვჭირდება კიდევ ბევრი ფენა. ასე რომ, აირჩიეთ პირველი ორი ფენა, გადადით პანელის ვარიანტებზე და გააკეთეთ ფენების ასლი.

ანალოგიურად, ჩვენ უნდა დავაგროვოთ 12 ფენა ფირის ჩარჩოებით, რომლებიც განსაზღვრავენ მის მოძრაობას.

ახლა ჩვენ გვაქვს ფენების მთელი თაიგული და ისინი ყველა ჩანს. იმ გაგებით, რომ ზედა ფენები ბლოკავს ქვედას, რაც არ არის ძალიან მოსახერხებელი სამუშაოსთვის. ამიტომ, შეგიძლიათ გამორთოთ ზოგიერთი ფენა ფენის სახელის მარცხნივ თვალის ხატულაზე დაწკაპუნებით. ყველა ფენის ერთდროულად გამორთვის ან ჩართვისთვის, დააჭირეთ Alt ღილაკს თვალის ხატულაზე დაწკაპუნებისას. შრეების ჩართვა-გამორთვით, თქვენ ხედავთ ზუსტად იმას, რაც მდებარეობს ჩვენი მომავალი ანიმაციის გარკვეულ ჩარჩოში. ახლა კი, იმისთვის, რომ ფილმის მოძრაობას ოდნავ შერყევა დავამატოთ, მიღებული ჩარჩოები ოდნავ უნდა გადავიტანოთ სხვადასხვა მიმართულებით. ამისათვის ჩართეთ მხოლოდ ის ფენა, რომლითაც აპირებთ მუშაობას ამ მომენტში და შემდეგ გადაიტანეთ ჩარჩო რამდენიმე პიქსელით ნებისმიერი მიმართულებით.

როდესაც გაივლით ყველა ფენას და დაამატებთ მცირე ცვლას, შეგიძლიათ დაიწყოთ მოძრავი წრის ანიმაციის შექმნა. ამისათვის დააკოპირეთ სექტორებისგან შემდგარი წრე მულტფილმის ნაწილების დოკუმენტიდან და მოათავსეთ იგი პირველ ფენაზე ფირის ჩარჩოს თავზე.

თუ არჩევანს წრიდან ამოიღებთ, მაშინ ის ერთ მთლიანობას ჰგავს. ეს არის ზუსტად ის, რაც ჩვენ გვჭირდება.

მაგრამ ვინაიდან იგი შედგება ცალკეული სექტორებისგან, მათი ფერის შეცვლით შესაძლებელია ანიმაციის შექმნა ძალიან სწრაფად და მარტივად. ამისათვის დააკოპირეთ ეს წრე მეორე ფენაზე და გაანათეთ პირველი სექტორი. გახსოვთ, რომ ფილმი მოძრაობის დროს ირხევა, ამიტომ არ არის აუცილებელი წრის ზუსტად დაყენება ჩარჩოს ცენტრში. დაიდეთ თვალზე.

ანალოგიურად, თქვენ უნდა დააკოპიროთ წრე ყოველ მომდევნო ფენაზე, ხოლო უფრო ღია ფერით შეღებოთ ერთი სექტორი წინა ჯერზე მეტი. ეს 12 ფენა ერთად ქმნის ფილმის მოძრაობის ანიმაციას შემავსებელი წრით.

შემდეგ ჩვენ უნდა დავამატოთ ტექსტურა ჩვენს ფენებს. ჩართეთ პირველი ფენა და დააკოპირეთ ტექსტურა საწყისი ფაილიდან სათადარიგო ნაწილებით.

შემდეგ რიგრიგობით ჩართეთ შემდეგი ფენები და დააკოპირეთ იქ იგივე ტექსტურა. იმისათვის, რომ ის განსხვავებულად გამოიყურებოდეს ყველა ჩარჩოზე, უბრალოდ დაატრიალეთ იგი 90 გრადუსით. როგორც თქვენ მიხვდით, 12-ვე კადრს უნდა დავამატოთ ტექსტურა.

თუ უკვე საკმაოდ დაიღალეთ კოპირებით, მაშინ შემიძლია გაგახაროთ - ძალიან ცოტა დარჩა. უმძიმესი ნაწილი დასრულდა. რჩება ვერტიკალური ნაკაწრების დამატება და თითქმის ყველაფერი. ამისათვის კვლავ დააკოპირეთ ორიგინალური ნაკაწრი და განათავსეთ იგი თვითნებურ ადგილას რამდენიმე ფენაში. ჩემს შემთხვევაში, ნაკაწრები ჩნდება მხოლოდ ორ ფენაში.

ახლა, როდესაც ფილმის ანიმაციის მთავარი ციკლი მზად არის, რჩება რიცხვების დამატება. ვინაიდან ჩვენ ვითვლით 3-დან 1-მდე, პლუს სიტყვა Go!!!, ჩვენ გვჭირდება კიდევ უფრო მეტი ფენა. არა 12, არამედ 48. ამისათვის თქვენ უნდა გააკეთოთ მზა ფენების კიდევ სამი ასლი ფილმის ანიმაციით.

და მაშინ ყველაფერი მარტივია. ჩართეთ პირველივე ფენა და ჩადეთ ნომერი სამი.

შემდეგ თქვენ უნდა დააკოპიროთ ეს ფიგურა შემდეგ ფენებზე, სანამ წრის ანიმაცია არ დასრულდება. როდესაც მიხვალთ ფენების შემდეგ ასლზე, ​​სადაც წრე კვლავ მთლიანად შეივსება, თქვენ უნდა დააყენოთ ნომერი ორი. ანალოგიურად დააკოპირეთ ნომერი პირველი სასურველ ფენებში. და როდესაც მიხვალთ Go!!! ეტიკეტის ბოლო ფენებამდე, უბრალოდ წაშალეთ წრე, სანამ დააკოპირებთ ლეიბლს სასურველ ფენაზე.

ეს ყველაფერი ანიმაციით. აქ მთავარია არ დაიბნეთ. თქვენ შეგიძლიათ ფენებს რამდენიმე მოსახერხებელი სახელი დაარქვათ, მაგრამ მე რატომღაც ძალიან ზარმაცი ვიყავი :) და მაინც, როცა დაასრულებთ, დარწმუნდით, რომ ჩართეთ ყველა ფენა თვალის ხატულაზე დაწკაპუნებით.

ექსპორტის პარამეტრების ფანჯარაში, დარწმუნდით, რომ დააყენეთ Export As: AI Layers SWF Frames-ზე. სწორედ ეს ვარიანტი აქცევს Illustrator-ის ფენებს ანიმაციურ ჩარჩოებად. შემდეგი, დააჭირეთ ღილაკს Advanced.

გაიხსნება დამატებითი პარამეტრები. აქ თქვენ უნდა დააყენოთ კადრების სიხშირე. წამში 12 კადრი მაქვს. Looping ჩამრთველი პასუხისმგებელია ანიმაციის ველოსიპედზე. მისი წყალობით, ვიდეო ითამაშებს წრეში. და ვარიანტი Layer Order: Bottom Up ასახავს ილუსტრატორის ფენებს პანელში ქვემოდან ზევით. ზუსტად ასე ავაშენეთ ჩვენი ანიმაცია.

შედეგად, ვიღებთ ფლეშ ფილმს ჩვენი ანიმაციით.

ახლა ხედავთ, რომ Adobe Illustrator-ში მარტივი ანიმაციის გაკეთება არც ისე რთულია, როგორც ერთი შეხედვით ჩანს.

მაგრამ გრძელი ვიდეოების ან ინტერაქტიული აპლიკაციების შესაქმნელად, მაინც უკეთესია გამოიყენოთ Adobe Flash ან სხვა ფლეშ რედაქტორები. მაგალითად, მე გავაკეთე ეს კატა ძველ Macromedia Flash-ში, რომელიც სამსახურში ამოთხარა.

ასევე ბოლო დროს, HTML5 და CSS3 სულ უფრო ხშირად გამოიყენება ანიმაციის შესაქმნელად. ეს კოდი მხარდაჭერილია თანამედროვე ბრაუზერების მიერ და არ საჭიროებს ფლეშ ფლეერის გამოყენებას.

რომაული აკა დაკასკებიგანსაკუთრებით ბლოგისთვის

გამოიწერეთ ჩვენი ბიულეტენი, რათა არ გამოტოვოთ არაფერი ახალი:

თქვენ გაქვთ ერთი ან ორი ხატი, რომელიც გსურთ გააცოცხლოთ ანიმაციით. საიდან დაიწყებდით? ვთქვათ, თქვენ გაქვთ SVG ფაილები, Illustrator CC და After Effects CC, მაგრამ გამოსავალი გაურბის.

ამ სტატიაში მე ვაპირებ გაჩვენოთ, თუ როგორ მარტივად მოაწყოთ SVG ფაილის ანიმაცია, მათ შორის SVG ფაილის მომზადება Illustrator-ში და მისი იმპორტი After Effects CC-ში. მე ასევე აგიხსნით, თუ როგორ შეგიძლიათ გადაიყვანოთ იგი Shape Layer-ად და დაამატოთ მოძრაობა. და ბოლოს, მოდით ვისაუბროთ ექსპორტზე და რენდერირებაზე.

სამუშაოს საბოლოო შედეგი.

ახლა მოდით გადავიდეთ ყველაზე საინტერესო ნაწილზე - ისწავლეთ სურათების ანიმაცია.

SVG ფაილის მომზადება Illustrator-ში

დავიწყოთ თქვენი SVG ფაილის გახსნით Adobe Illustrator CC-ში. მე ვიქნები ანიმაციური პატარა მანქანის ხატულა, რომელიც ხელმისაწვდომია უფასოდ Week Of Icons-ზე.

ფაილის გახსნის შემდეგ, ჩვენ უნდა გავაუქმოთ და გავყოთ ყველა ობიექტი შრეებად. ამის გაკეთება შეგიძლიათ ხელით ან გამოიყენოთ ფენებზე გაშვება (მიმდევრობა)პროცესის დასაჩქარებლად. სანამ ფაილს After Effects-ში შემოვიტანთ, ის უნდა შევინახოთ Illustrator ფაილის ფორმატში.

ჩვენ შეგვიძლია გავაერთიანოთ ობიექტები ფენებად Release to Layers (მიმდევრობით) გამოყენებით, რათა არ დავკარგოთ ძვირფასი დრო.

ფაილის იმპორტი და ორგანიზება After Effects CC-ში

ახლა თქვენ მზად ხართ იმპორტისთვის After Effects CC-ში. მოდით გამოვიყენოთ კლავიატურის მალსახმობი Ctrl+I (Windows)ან Command+I (Მაკი)დიალოგური ფანჯრის ჩატვირთვისთვის იმპორტის ფაილი, ან გადადით ფაილი > იმპორტი > ფაილი…იმავე ადგილას აირჩიეთ ჩვენ მიერ მომზადებული 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 fps, რომ ანიმაცია გლუვი შემენარჩუნებინა.

ამ ეტაპზე, როგორც ჩანს, ყველაფერი მზად არის წასასვლელად, მაგრამ კიდევ ერთი რამ არის გასაკეთებელი. ჩვენ უნდა დავაჯგუფოთ გარკვეული ფენები ისე, რომ მათი მოძრაობები იყოს სინქრონიზებული მთავარ ფენასთან, რომლის კონტროლიც შეგვიძლია. ამ მეთოდს ე.წ აღზრდა.

გამოიყენეთ Pick Whip, რათა მშობელი ფენა მიანიჭოთ მრავალ ფენას.

ჩვენს მაგალითში, მე მივაკუთვნე ნაკლებად მნიშვნელოვანი ფენები (ბავშვის ფენები), როგორიცაა საქარე მინა, სხეულის ნაწილები, ხე და თოკები სხეულის პირველადი ფენისთვის (მშობლის ფენა). ამან საშუალება მომცა გამეკონტროლებინა მთელი მანქანის პოზიცია და როტაცია (ბორბლების გამოკლებით) მშობელი ფენის გამოყენებით.

ანიმაციის შექმნა

მინდოდა მანქანა კლდეზე მოხვედრილიყო და ცოტა ხანი ჰაერში დაკიდებულიყო. ისიც მინდოდა, რომ ხე ზევით-ქვევით ამოძრავებულიყო და ტოტი გამეხსნა. დავიწყე ქვის, მანქანისა და ბორბლების აგებით. მაშინ დადგა დრო, გადავლახოთ ყველაზე დიდი დაბრკოლება - მოქმედების ხეზე გადატანა. როგორც კი ეს გაკეთდა, მე დავიწყე მუშაობა პატარა დეტალებზე, როგორიცაა თარო და თოკები.

ესკიზი, რომელიც აღწერს ანიმაციას

პირველი ნაბიჯი იყო როკის ელემენტის ან ფენის შექმნა, მაგრამ Illustrator CC-ზე დაბრუნების ნაცვლად სხვა ფენის დასამატებლად, მე უბრალოდ გამოვიყენე Pen Tool After Effects CC-ში. ამან მომცა საშუალება სწრაფად შემექმნა პატარა ქვა.

ოჰ, ძლიერი კალმის ხელსაწყო!

საბარგული შედარებით მარტივი ამოცანა იყო. მე დავაყენე იგი მანქანის უკანა მხარეს და დავაყენე დამაგრების წერტილი ქვედა მარცხენა წვეროზე. Pick Whip-ის გამოყენებით, მე მას მივაკუთვნე სხეულის მშობელი ფენა. ბოლო ნაბიჯი იყო როტაციის ეფექტის მიცემა, რამაც თავის მხრივ უფრო რეალისტური გახადა მანქანის აჩქარების მომენტი Bodymovin Lottie-ის მობილურ ბიბლიოთეკასთან ერთად.

P.S.თქვენ შეგიძლიათ იპოვოთ ჩემი Illustrator CC და After Effects CC ფაილები.

ხატულების ნაკრები ხელმისაწვდომია უფასო ჩამოტვირთვისთვის მისამართზე.

ბოლო დროს საიტებზე და აპლიკაციებზე SVG (Scalable Vector Graphics) გრაფიკის სხვადასხვა სახის ანიმაცია ძალიან პოპულარული გახდა. ეს იმის გამო ხდება, რომ ყველა უახლესი ბრაუზერი უკვე მხარს უჭერს ამ ფორმატს. აქ არის ინფორმაცია SVG-ის ბრაუზერის მხარდაჭერის შესახებ.

ეს სტატია აღწერს SVG ვექტორის ანიმაციის უმარტივეს მაგალითს მსუბუქი Jquery მოდულის Lazy Line Painter-ის გამოყენებით.

წყარო

ამ ამოცანის შესასრულებლად და სრულყოფილად გასაგებად, HTML, CSS, Jquery-ის საბაზისო ცოდნა სასურველია, მაგრამ არ არის საჭირო, თუ უბრალოდ გსურთ SVG-ის ანიმაცია) დავიწყოთ!

ასე რომ, ნაბიჯები, რომლებიც უნდა მივყვეთ:

1. შექმენით ფაილის სწორი სტრუქტურა
2. ჩამოტვირთეთ და დააკავშირეთ დანამატი
3. დახაზეთ მაგარი ხაზის ხელოვნება Adobe Illustrator-ში
4. გადააქციეთ ჩვენი სურათი Lazy Line Converter-ად
5. ჩასვით მიღებული კოდი main.js-ში
6. დაამატეთ CSS გემოვნებით

1. შექმენით ფაილის სწორი სტრუქტურა
ამაში დაგვეხმარება Initializr სერვისი, სადაც უნდა აირჩიოთ პარამეტრები, როგორც ქვემოთ მოცემულ სურათზე.

• კლასიკური H5BP (HTML5 ქვაბის ფირფიტა)
• შაბლონი არ არის
• უბრალოდ HTML5 Shiv
• შემცირდა
• .IE კლასები
• ქრომის ჩარჩო
• შემდეგ დააჭირეთ ჩამოტვირთვა!

2. ჩამოტვირთეთ და დააკავშირეთ დანამატი

მას შემდეგ, რაც startizr-ს გააჩნია Jquery-ის უახლესი ბიბლიოთეკა, არქივიდან, რომელიც უნდა გადმოვწეროთ Lazy Line Painter-ის პროექტის საცავიდან, მხოლოდ 2 ფაილი უნდა გადავიტანოთ ჩვენს პროექტში. პირველი არის "jquery.lazylinepainter-1.1.min.js" (მოდულის ვერსია შეიძლება განსხვავდებოდეს) ის მდებარეობს მიღებული საქაღალდის ძირში. მეორე არის example/js/vendor/raphael-min.js.

ეს 2 ფაილი მოთავსებულია js საქაღალდეში. და ჩვენ მათ შევიტანთ ჩვენს index.html-ში main.js-მდე ასე:

3. დახატეთ მაგარი კონტურის სურათი Adobe Illustrator-ში

1. დახაზეთ ჩვენი კონტურის სურათი Illustrator-ში (ამის გაკეთების ყველაზე მარტივი გზაა Pen Tool)
2. აუცილებელია, რომ ჩვენი ნახატის კონტურები არ დაიხუროს, რადგან ჩვენი ეფექტისთვის გვჭირდება დასაწყისი და დასასრული
3. არ უნდა ჰქონდეს შევსება
4. ფაილის მაქსიმალური ზომაა 1000×1000 პიქსელი, 40 კბ
5. მოდი გადავჭრათ ობიექტის საზღვრებზე Object>Artboards>Fit To Artboards Bounds
6. შენახვა როგორც SVG (სტანდარტული შენახვის პარამეტრები კარგია)

მაგალითად, შეგიძლიათ გამოიყენოთ დანართში არსებული ხატები.

4. გადაიყვანეთ ჩვენი სურათი Lazy Line Converter-ად
უბრალოდ გადაიტანეთ და ჩააგდეთ თქვენი ხატი ქვემოთ მოცემულ ველში.
კონტურის სისქე, ფერი და ანიმაციის სიჩქარე შეიძლება შეიცვალოს თავად კოდში, რომელიც გამოჩნდება კონვერტაციის შემდეგ!

5. ჩასვით მიღებული კოდი main.js-ში
ახლა უბრალოდ ჩასვით მიღებული კოდი ცარიელ main.js ფაილში
Პარამეტრები:
strokeWidth - მონახაზის სისქე
strokeColor - კონტურის ფერი
თქვენ ასევე შეგიძლიათ შეცვალოთ თითოეული ვექტორის ნახაზის სიჩქარე ხანგრძლივობის პარამეტრის მნიშვნელობის შეცვლით (ნაგულისხმევი 600)

6. დაამატეთ CSS გემოვნებით
ამოიღეთ აბზაცი index.html-დან

გამარჯობა მსოფლიო! ეს არის HTML5 Boilerplate.

და მის ნაცვლად ჩავსვით ბლოკი, რომელშიც ჩვენი ანიმაცია განხორციელდება

შემდეგ დაამატეთ CSS მთავარ.css ფაილს უკეთესი იერსახისთვის:

ტექსტი ( ფონი:#F3B71C; ) # ხატები ( პოზიცია: ფიქსირებული; ზედა: 50%; მარცხნივ: 50%; ზღვარი: -300 პიქსელი 0 0 -400 პიქს; )

შეინახეთ ყველა ფაილი.
ახლა უბრალოდ გახსენით index.html თანამედროვე ბრაუზერში და ისიამოვნეთ ეფექტით.

P.S. ლოკალურ მანქანაზე მუშაობისას, ანიმაციის დაწყება შეიძლება რამდენიმე წამით გადაიდო.

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.

იმპორტი After Effects-ში
ფაილი - იმპორტი - ფაილი - აირჩიეთ ჩვენი შენახული ფაილიილუსტრატორი.
ავირჩიოთ ილუსტრატორიდან ფენების იმპორტი, თუ კადრებს დავდებთ, შერწყმული შრეებით გამოსახულებას მივიღებთ, მაგრამ ეს არ გვჭირდება.

სურათი 7 - იმპორტი როგორც კომპოზიცია

ყველა იმპორტირებული.
ახლა ვნახოთ რა გვაქვს. ორჯერ დააწკაპუნეთ კომპოზიციაზე , რა გაიხსნებოდა და დავინახავდით ფენებს (თუ ყველაფერი სწორად გაკეთდა, რამდენიმე ფენა იქნება). ჩვენ მივიღებთ ამას, იხილეთ სურათი

სურათი 8 - ღია კომპოზიცია

ახლა კი რისთვის ვართ აქ - ანიმაცია.

ანიმაცია ში ეფექტების შემდეგ
დააყენეთ საყრდენი წერტილი მის ზედა ნაწილში მდებარე ისრთან ერთად Pan Behind Tool-ით (მასახმობი - Y). უბრალოდ აიღეთ წერტილი და გადაიტანეთ იქ, სადაც გსურთ. შედეგად, ასე გამოიყურება..

სურათი 9 - პან ინსტრუმენტი და ფენები

ესე იგი, ახლა გადავიდეთ ანიმაციის ფენებზე.
ჩვენ გვჭირდება ისრის ფენა და 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 პანელი და Output Module-ში (ორი დაწკაპუნებით) აირჩიეთ გამომავალი ფორმატი. ავიღე *.mov

სურათი 12 - რენდერი

დააჭირეთ ღილაკს RENDER და მიიღეთ შედეგი (არ დაგავიწყდეთ მიუთითოთ ბილიკი).
Სულ ეს არის.

გამჭვირვალე GIF Adobe Illustrator-ში კეთდება შემდეგნაირად. გადადით მენიუში File > Save for Web & Devices (Alt+Ctrl+Shift+S). ფანჯარაში, რომელიც იხსნება, ფაილის ოპტიმიზებული ფორმატის ველში, ჯერ უნდა გადახვიდეთ ჩანართზე სურათის ზომა(სურათის ზომა). ფაქტია, რომ მთელი გვერდი ნაგულისხმევად ხვდება ოპტიმიზაციის ფანჯარაში და ეს ჩვეულებრივ არ არის საჭირო. ამიტომ, სურათის ზომის ჩანართში, გააუქმეთ მონიშვნის ველი კლიპი არტბორდზე(მოაჭრათ გვერდის მიხედვით) და დააწკაპუნეთ ღილაკზე Apply.

შემდეგ, ფორმატის შერჩევის სიაში აირჩიეთ GIF და მონიშნეთ გამჭვირვალობის ველი.

ამის შემდეგ ჩვენ განვსაზღვრავთ რომელი ფერები იქნება გამჭვირვალე. სურათზე წარმოდგენილი ყველა ფერი მოთავსებულია ჩანართში ფერადი მაგიდა(ფერთა დიაგრამა) და ნაჩვენებია ფერადი კვადრატების სახით. აირჩიეთ ინსტრუმენტი ფანჯრის მარცხენა მხარეს არსებული ხელსაწყოთა ზოლიდან თვალის საწვეთური(პიპეტი).

ფერები შეიძლება განისაზღვროს ორი გზით. უმარტივესი გზაა თვალის საწვეთურით ფერის მითითება პირდაპირ სურათზე - ამის შემდეგ ფერი ხაზგასმული იქნება ფერთა მაგიდაზე მუქი შტრიხით. კარგად, თუ ზუსტად იცით რომელი ფერი უნდა იყოს გამჭვირვალე, შეგიძლიათ აირჩიოთ ის პირდაპირ ფერთა ცხრილზე შესაბამისი ფერის უჯრის დაჭერით. ხოლო პირველ და მეორე შემთხვევაში, თუ რამდენიმე ფერის არჩევა გჭირდებათ, უნდა იმუშაოთ Shift (ან Ctrl) ღილაკით დაჭერით. ფერის არჩევის შემდეგ, თქვენ უნდა დაავალოთ პროგრამას გამჭვირვალე გახადოს იგი. ამისათვის დააწკაპუნეთ ხატულაზე ასახავს არჩეულ ფერებს გამჭვირვალეზე(დაამატეთ არჩეული ფერები გამჭვირვალობას). ფიგურაში ეს ღილაკი შემოხაზულია და წითელი ფერი გამჭვირვალეა. სურათზე გამოჩნდება გამჭვირვალე უბანი, ხოლო ფერთა ცხრილის კვადრატი მის იერს შეიცვლის - მისი ნაწილი გახდება თეთრი სამკუთხედი. არჩეული ფერის გასაუქმებლად, თქვენ უნდა აირჩიოთ ის ფერების ცხრილში და შემდეგ კვლავ დააწკაპუნეთ რუკების არჩეულ ფერებზე გამჭვირვალე ხატულაზე.

რამდენიმე სიტყვა გამჭვირვალობის დაყენების მეთოდის შესახებ. ჩამოსაშლელი მენიუ პასუხისმგებელია მასზე. მიუთითეთ გამჭვირვალობის დაბინძურების ალგორითმი, რუსულ ენაზე - გამჭვირვალობის სიმულაციის ალგორითმი (ნახ. ქვემოთ). არსებობს ოთხი არჩევანი: No Transparency Dither - ალგორითმის გარეშე, Diffusion Transparency Dither - დიფუზური ალგორითმი, Pattern Transparency Dither - შაბლონზე დაფუძნებული ალგორითმი და Noise Transparency Dither - ხმაურზე დაფუძნებული ალგორითმი. დიფუზური ალგორითმის რეჟიმში სლაიდერი აქტიურდება თანხა(თანხა), რომელიც საშუალებას გაძლევთ შეცვალოთ დიფუზიის მნიშვნელობა. რა უნდა გამოვიყენოთ პრაქტიკაში? მიზნიდან და გამოსახულების მიხედვით. მე არ ვიყენებ ამ ვარიანტს და ყოველთვის ვტოვებ ნაგულისხმევს - No Transparency Dither.

დააჭირეთ შენახვას - გამჭვირვალე GIF მზად არის. სამუშაო შესრულდა Adobe Illustrator ვერსიაში CS4 (v.14), მაგრამ ყველა მოქმედება და კლავიატურის მალსახმობები შესაბამისია ადრინდელი ვერსიისთვის CS3 (v. 13).