Әлеуметтік желідегі жазбаны тез арада анимациялауды үйренейік
Әлеуметтік желідегі жазбаларыңыз ерекше болғанын қаласаңыз, анимацияны қосуды үйренуіңіз керек. Бірнеше минут ішінде сіз осындай суретке түсіп, оны интернет алтынына айналдыра аласыз. Бұл платформаларда қатысуды сақтау бизнесті де, брендті де құру үшін маңызды екенін бәріміз түсінеміз, бірақ уақыт міндеттемесі көптеген жаңа суретшілерді өшіруі мүмкін. Біз сізге жақсырақ жолды көрсету үшін осындамыз.
Графикалық дизайнерлерден әлеуметтік желі үшін көбірек мазмұн жасауды сұрап жатыр және көз тартатын дизайннан не жақсы екенін білесіз бе? Қозғалатын көздің жауын алатын дизайн. Егер сіз Photoshop-та біраз уақыт жұмыс істесеңіз, анимация қосуға ойлағаннан да жақынсыз. Бүгін біз After Effects бағдарламасын іске қосамыз, осылайша интерфейс қаншалықты таныс екенін көре аласыз. Біз кейбір дизайндарды аламыз және After Effects қолданбасында кейбір нәзік қозғалыстарды қосамыз.
{{lead-magnet}}
Суретіңізді Photoshop бағдарламасында дайындау
Біз Photoshop CC 2022 және After Effects CC 2022 бағдарламаларымен жұмыс істейміз, бірақ бұл әдістер ескі нұсқаларда да жұмыс істеуі керек. Біз бұл үшін өте қарапайым етіп сақтаймыз. Енді сіз Photoshop бағдарламасында анимация жасай аласыз, бірақ бұл өте қиын болуы мүмкін. Оның орнына, файлдарды After Effects қолданбасында жақсырақ жұмыс істеу үшін дайындау оңайырақ.
Анимациялау үшін дұрыс кескінді қалай таңдауға болады
Бастау үшін дұрыс кескіндерді таңдау керек. ҚараңызAfter Effects интерфейсін меңгеру.
Біз скейтбордшының суретін таңдадық және фондық суретті жандандырғымыз келеді. Бұл штаттан тыс дизайнер және аниматор ретінде алатын көптеген жұмыстарға өте ұқсас. Сіздің клиент қандай да бір элементті алдыңғы қатардан алып, жаңа жерде немесе қандай да бір түрде анимацияланғанын қалайды.
Ендеше, жоғарыдағы суретке қарап, оларды қалай жылжытуымыз керек? Ал, біз ескі трюкті қолданамыз. Нысанның қозғалуының орнына фон солдан оңға қарай айналып, қозғалыс әсерін береді.
Жарықтандыруға да назар аудару керек. Қозғалмайтын кескін үшін ерекше жарық көзі жақсы көрінгенімен, оны басқа фонға немесе жарықтандыру сәйкес келмейтін фонға жылжыта бастағанда ол өшіп қалады. Көрермен ненің дұрыс емес екенін білмеуі мүмкін, бірақ олар әсерден алшақтайды. Мас сиқыршы сияқты, ол шынымен де иллюзияны өлтіреді.
Қабаттарды бөліңіз (және оларды атаңыз)
Жоғарыдағы бейнеде көріп отырғаныңыздай, біз нысанды, тақта, көлеңке және фон. Бұл бізге жасауға мүмкіндік бередіегер біз жолда мәселені байқасақ, нәзік түзетулер. Егер біз пикселдерді жаңа ғана жойсақ, олар біржола жоғалады (CTRL/CMD+Z ауқымынан өткеннен кейін).
Өткен сайын әр қабаттың атауын ұмытпаңыз. 1 - 100-деңгейлер тізімінен бір суретті табуға тырысқаннан жаман ештеңе жоқ.
Фонға аздап жылтырату қажет, өйткені ол біздің көздеген перспективамызға сәйкес келмейді.
Фонды айналдыруды мақсат етіп отырмыз, бірақ екі жақтың сәйкес келмейтінін көруге болады. Сол жағы бағыттауыштармен көбірек тураланғандықтан, сол жағын көшіріп, оны аударып, оң жаққа түсірейік. Біз оны ретке келтіргеннен кейін қабаттарды біріктіру үшін CTRL/CMD+E пернелерін пайдаланыңыз.
Сурет өлшемін тексеріңіз
Кескінді After Effects қолданбасына әкелмес бұрын, сурет өлшемін тексеру керек. After Effects кейбір өте үлкен файлдарды өңдей алады... бірақ сіздің компьютеріңіз соншалықты қуатты болмауы мүмкін. Кескін өлшемін өзгертудің бірнеше жолы бар, бірақ біз кенепті өзгертуден бастаймыз. Бұл біздің кенепті ешбір пикселмен шатастырмай өзгертеді, содан кейін біз кескіндеріміздің өлшемін сәйкестендіру үшін өзгерте аламыз.
Біз кенепті ( Сурет > Кенеп өлшемі… ) 1920x1080 етіп реттедік. Енді біздің кескіндеріміз ЖАҒДАЙ үлкенірек болды, сондықтан оларды сәйкестендіруге тура келеді.
Кейбір кемшіліктер әлі де бар, бірақ біз оларды After Effects қолданбасында аздап қозғалыс бұлдырлығы арқылы түзете аламыз. Сіз кенептің шетінде бірнеше пиксельдер ілулі тұрғанын байқайсыз.Кейде сіз олардың қалуын қалауыңыз мүмкін, бірақ бізге олар AE-де қажет болмайды. Кескіндерді кенепке сәйкестендіру үшін жылдам кесу үшін Crop құралын ( C ) пайдаланыңыз. Енді кескінді After Effects-ке әкеліп, анимациялауды бастайтын кез келді.
Photoshop файлдарын After Effects-ке импорттау
Қабат атауларын тексеріп, жұмысыңызды сақтаңыз (ұсынамыз) файлыңызды оңай табу үшін "to_AE" сияқты бірдеңені қосыңыз. After Effects бағдарламасына өтуге көмек қажет болса, біз сізді қорғаймыз. Сол бейнені қарап шығуға немесе осы жылдам әдісті қолдануға болады.
Photoshop-тан After Effects-ке файлды импорттау жолы
- After Effects-ті ашу
- Файл > Импорттау >Файлдар бөліміне өтіңіз
- Файлды таңдаңыз
- Импорттау түймешігін басыңыз
Енді Photoshop және After Effects арасындағы салыстыруды қараңыз.
Көп ұқсайды ма? Adobe әртүрлі бағдарламалық жасақтаманың арасында таныс болуға тырысты, Creative Cloud қолданбалар арасында жылжытуды одан да жеңілдетеді. Қабаттарды уақыт шкаласында төменірек байқайсыз, бірақ олар сәл басқаша көрінеді. Сондықтан қабаттарыңызды атау өте маңызды қадам болды.
Осы жаңалықпен композиция (біз үшін қолайлы) FPS немесе секундына кадрлар санын орнатуға болады. Жалпы, анимация 24 кадр/сек жылдамдықта орындалады (24 кадр бейненің 1 секундына тең), бірақ көп немесе аз қажет болатын жағдайлар болуы мүмкін. Мұның бәрі жобаға және сізге байланыстыклиенттің қажеттіліктері.
Композицияңызды реттеңіз
Кофеңізді ішіп алдыңыз деп үміттенеміз, өйткені біз тез аттанғалы жатырмыз (ойынның аты - анимациялық әлеуметтік желідегі жазба. уақыт мүлде, солай емес пе?)
Енді бұл скейтбордшыны жандандырудың ең оңай жолы - фонды жылжыту, солай емес пе? Біз оны басқа жаққа жылжытқанда, конькиші алға ұмтылатын сияқты.
Бізге тек мультфильмдердегідей фонның көшірмесін жасау керек. Қабатты ұстаңыз, содан кейін Өңдеу > Көшірме ( CMD/CTRL + D ) және сіз мүлде жаңа қабат аласыз. Теориялық тұрғыдан біз ондаған көшірме жасап, олардың ұшып өтуін жандандыра аламыз, бірақ оңайырақ әдіс бар: Motion Tile.
After Effects қолданбасында анимациялау
Motion Tile
Экранның оң жағында Effects and Presets тармағына өтіп, Motion Tile тармағын іздеңіз. Оны қабатқа сүйреп апарыңыз (оны қате қабатқа түсіріп алмаңыз, бірақ бұл кейбір керемет әсерлерді тудыруы мүмкін).
Сол жақта сіз екі негізгі опциямен әсерлерді басқару элементтерін көресіз: Шығару ені және шығыс биіктігі. Шығару еніне «200» мәнін қойғанда...
Енді бізде сол және оң жақтағы фонымыз аздап көп. Біз кескінді аз мөлшерде тиімді түрде көшірдік. Енді қайталанатын аймақты басуға тырыссаңыз, мүмкін болмайды. Тек бастапқы қабатыңызды жылжытуға болады.
Әрине, қарапайым көшірме немесе тақтайшалар кішігірім жасайдыартефактілер. Егер біз жерге немесе фонға қарасақ, дұрыс көрінбейтін сызықтар бар. Соңында, оны Шығару нөмірімен асыра алмаңыз. Компьютеріңізді бұзасыз.
Оны жандандыру үшін алдымен композицияның ұзындығын реттеп алайық. Композиция > Композиция параметрлері.
Жоғарыда талқылағанымыздай, біз FPS-ті де өзгерте аламыз. Мұны 5 секундқа орнатыңыз және бұл кескінді жандандыру уақыты келді.
Негізгі кадрлармен анимациялау
Таза пластина қабатында төмен бұраңыз, сонда Трансформация опцияларын көресіз.
Ойнату басы хронологияңыздың басында толық тұрғанына көз жеткізіңіз, содан кейін Орын жанындағы Секундомер түймесін басыңыз. Бұл уақыт шкаласында сол сәтте қабаттың x және y осін белгілейді. Сіз жаңа ғана уақыт шкаласында бірінші Негізгі кадрды жасадыңыз. Бұл After Effects қолданбасындағы анимацияның негізгі құрылыс блоктары.
Ойнату басын хронологияның соңына жылжытыңыз және басқа негізгі кадрды жасайсыз. Енді «Трансформация» бөліміне оралыңыз және фон солдан оңға қарай жылжитындай (немесе осы Тони Хоктың 360-ны сүйексізге айналдыруын қаласаңыз, оңнан солға қарай) реттеңіз.
Ойнату түймесін басқан кезде, After Effects бөлінген уақыт ішінде бірінші және соңғы негізгі кадрларда болуы үшін қабаттың қалай қозғалу керектігін интерполяциялайды.
GIF
Егер біз скейтбордшының жылдамырақ қозғалғанын қаласақ, біз жай ғанабелгіленген уақытта пластинадан төмен қарай жылжу керек. Баяу қозғалу үшін жерді азырақ жабыңыз. Бірақ біз байқайтын бір нәрсе бар, ол соншалықты үнемді емес. Біздің қайталанатын тақтайшаның біріктірілген тігісі аздап жылтыр. Бақытымызға орай, біз оны қозғалыс бұлдырымен жабуға болады.
Қозғалыс бұлыңғырлығын қосу
Қозғалыс бұлыңғырлығы - объектив экспозициясы кезінде қозғалатын нысанның әсерінен кескіндердің жолақтары немесе жағылуы. Бейнедегі қозғалыс бұлыңғырлығы әдетте объектив бір нысанға фокустауынан, ал фокусталмаған элементтер фондық режимде қозғалғанда пайда болады. Біздің жағдайымыз үшін бұл біз қолданғымыз келетін әсер.
Motion Blur басқару элементін басыңыз (үш шеңбер бір-біріне жақын). Қабаттарыңыздың жанында өрістер пайда болатынын көресіз. Тек таза пластинаны таңдап, қозғалыс бұлдырының кемшіліктерді жасыратынын қараңыз. Дәл осылай, бізде тер төкпей тамаша анимация бар. Бірақ біз әрқашан нәрселерді одан да көп қозғай аламыз.
Шынайы көлеңкелерді қосу
Скейтборд астындағы көлеңкеде әлі де бастапқы жерден сызық бар екенін байқауыңыз мүмкін.
Біз жақсы әлеуметтік имидж жасауға тырыспаймыз. Біз бөлісуге тұрарлық нәрсе жасауға тырысамыз. Оны тез түзетейік. Енді оны көшірмес бұрын Photoshop бағдарламасында түзете алар едік, бірақ біз ұмытып кеттік (дәлірек айтсақ, біз сізге осы жерде көрсету үшін бұл қадамды өткізіп жібердік! Қараңыз, біз не істеп жатқанымызды барлық уақытта білдік).
Біріншіден, aжаңа қабат Қабат > Жаңа ( CMD/CTRL + Y ) және қара бояуды таңдаңыз. Бұл біздің композицияның өлшеміндей қара қатты затты жасайды. Қалам құралын (P) пайдаланып, біз қарапайым фигураны саламыз. Ол мінсіз болуы шарт емес, тек көлеңкенің негізгі идеясы.
Біз масканы жапқаннан кейін кескіннің үстінде жасалған пішінді көреміз. Бұл... жақсы. Бірақ біз оны іске асыра аламыз. Нүктелерді және Безье тұтқаларын пайдаланып, пішінді скейтбордтың астына сыйғанша реттеңіз. Егер сіз Photoshop бағдарламасында маскалар жасасаңыз, бұл сізге таныс болуы керек.
Кішкене жұмыстың арқасында бізде скейтбордтың астына сай келетін нәрсе бар.
Енді бастапқы көлеңке қабатын өшіріп, жаңа қабаттың атын Shadow (немесе Shadow 2 немесе Darkwing Duck немесе сізге сәйкес келетін кез келген нәрсе) өзгертіңіз. Photoshop-тағы сияқты, бізде араластыру режимдері бар. Егер сіз оларды көрмесеңіз, F4 түймесін басыңыз. Жаңа көлеңкеңізді Көбейту күйіне ауыстырыңыз.
Бұл сәл дөрекі көрінеді, сондықтан шеттерін қауырсынмен өңдейік. Маска мәзірін бұрап ашыңыз, сонда сіз қосымша опцияларды көресіз.
Қауырсынды және voila реттеңіз! Қайта ойнатқанда, бізде қазір жылтыр анимациялық кескін бар және бұл бізге уақытты қажет етпеді.
Рендеринг кезегінде көрсету
Әрине, бұл кескін After Effects қолданбасында мәңгі қалса, сізге ештеңе істемейді. Оны түзете алатынымызды көрейік.
Егер бұл терминмен таныс болмасаңыз, Рендеринг тек After Effects (немесе) көрсетеді.барлық қабаттарды бір фильмге (mp4, mpeg, Quicktime, т.б.) пісіру үшін композиция құру үшін қай қолданбаны пайдалансаңыз да). Quicktime сіздің қажеттіліктеріңіздің көпшілігі үшін жұмыс істейді, бірақ біз Apple ProRes 422 нұсқасын да ұсынамыз. Бұл жағдайда қысылмаған, ажыратымдылығы жоғары файл болатын Анимацияны қолданайық. Егер сізде дыбыс болса, оның терезенің төменгі жағында бұрылғанына көз жеткізіңіз.
Жарайды түймесін басыңыз, содан кейін бұл файлдың қайда кететінін таңдауыңыз керек. Output To түймесін басып, қажетті орынды табыңыз.
Ойлан, не? Сіз жаңа ғана анимация жасадыңыз. Сіз суретке түсіріп, оны ұқыпты қабаттарға кесіп, сол қабаттарды жандандырып, сол композицияны фильмге айналдырдыңыз. Дәл қазір сізбен танысқанымызға өте қуаныштымыз.
Әрине, шынымен ұнатқыңыз келсе, бейнеге қайта оралыңыз, сонда біз сізге тағы бірнеше нәрсені үйретеміз. трюктар.
GIF
After Effects саяхатыңызды бастаңыз
Photoshop дизайндарын анимациялау әлеуметтік бейнені алып, оны вирустық бейнеге айналдырады. соққы (мүмкін). Негіздерді түсінгеннен кейін сіз өзіңіздің жұмысыңызды таңғажайып жолдармен жүзеге асыра аласыз. Егер анимациялық саяхатыңызды бастайтын орынды іздесеңіз, After Effects Kickstart-қа өтіңіз!
After Effects Kickstart - қозғалыс дизайнерлеріне арналған After Effects кіріспе курсы. Бұл курста сіз ең жиі қолданылатын құралдарды және оларды пайдаланудың ең жақсы тәжірибелерін үйренесіз