Photoshop анимация за спрайт лист


Когато работите с спрайт листове, първата ви стъпка е да създадете анимацията, която ще съдържа спрайтите за нашия спрайт лист. Има различни анимационни програми като FlashR и PhotoshopR, В този урок ще създадем проста анимация във Photoshop и ще я експортираме като PNG последователност за импортиране в TexturePacker.

Стартирайте ново изображение на 256 ширина x 256 височина x 72 res. Защо използваме 256? В повечето мобилни приложения се препоръчва размер на платно с мощност две. Така че е добра практика да останете в този диапазон, ако е възможно. Ще имаме десет кадъра към нашата анимация на подскачаща топка.

  1. На първия слой нарисувайте малка червена топка в центъра на долния ръб.

  2. Отворете панела Animation. Ще използваме режим Frame. Първият ни кадър вече е там.

  3. Кликнете върху малкия триъгълник до 0 сек и задайте кадъра за кадър на .2.

  4. В долната част на панела щракнете върху иконата за дублиране на избрани кадри, за да добавите друг кадър към анимационния панел.

    Има няколко начина да използвате панела за слоеве, за да създадете анимацията. По-лесно ми е да създам нов слой в панела за слоеве за всеки кадър в панела „Анимации“.

  5. Сега, когато имаме два кадъра в панела за анимация, се нуждаем от втори кадър в панела „Слоеве“. Щракнете с десния бутон върху Layer 1 и изберете дублиращ слой от менюто. Преименувайте този втори слой на "Layer 2".

    Вече имаме два кадъра в панела за анимация и два слоя в панела за слоеве. Но ние трябва да ги координираме заедно.

  6. Изберете първия кадър в панела „Анимации“. В панела за слоеве изключете видимостта на слой 2, така че слой 1 е единственият видим слой.

  7. Изберете втория кадър на анимационния панел. В панела за слоеве изключете видимостта на слой 1 и включете видимостта на слой 2.

    Не, когато щракнете върху бутона Игра в панела за анимация, ще видите, че топката се движи нагоре и надолу в прозореца на изображението.

  8. Изберете втория кадър в анимационния панел и добавете нов кадър.

  9. В панела за слоеве дублирайте слой 2 и го преименувайте на „слой 3“.

  10. Когато рамката 3 все още е избрана в анимационния панел, изключете видимостта на Layer 2. Преместете леко червената топка нагоре върху Layer 3.

  11. За рамки 1 и 2 в панела за анимация изключете видимостта за слой 3.

    Повторете тези стъпки за още три кадъра. Тогава трябва да имате 6 кадъра със само един слой, видим във всеки.

    Рамка 1 - Види се слой 1
    Рамка 2 - Види се слой 2
    Рамка 3 - Види се слой 3
    Рамка 4 - Види се слой 4
    Рамка 5 - слой 5 се вижда
    Рамка 6 - Види се слой 6

Следващ →

Copyright 2018 Adobe Systems Incorporated. Всички права запазени. Екран (и) на екрана с продукти на Adobe препечатани с разрешение от Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst и Flash Paper е или са [a] регистрирана търговска марка (и) или търговска марка (и) на Adobe Systems Incorporated в Съединените щати и / или други страни.

Создание покадровой анимации и спрайт-листа (Adobe Photoshop) (Юни 2021)



Тагове Статия: Photoshop анимация за спрайт лист, цифрово изкуство и дизайн, как да направите спрайтите за спрайт лист

Почви и рози

Почви и рози

Дом и Градина

Бирманският питон

Бирманският питон

Дом и Градина