počítače

Animace Photoshopu pro Sprite Sheet

Srpen 2021

Animace Photoshopu pro Sprite Sheet


Při práci s listami sprite je prvním krokem vytvoření animace, která bude obsahovat skřítky pro náš list sprite. Existují různé animační programy, jako je FlashR a PhotoshopR. V tomto tutoriálu vytvoříme jednoduchou animaci ve Photoshopu a exportujeme ji jako PNG sekvenci pro import do TexturePacker.

Začněte nový obrázek s šířkou 256 x 256 výšek x 72 res. Proč používáme 256? Ve většině mobilních aplikací se doporučuje velikost plátna o síle dvou. Pokud je to možné, je dobré zůstat v tomto rozmezí. K naší animaci skákací koule budeme mít deset snímků.

  1. Na první vrstvu nakreslete malou červenou kouli ve středu spodního okraje.

  2. Otevřete panel Animace. Budeme používat režim Frame. Náš první rám je již tam.

  3. Klikněte na malý trojúhelník vedle 0 s a nastavte fps na .2.

  4. Ve spodní části panelu klikněte na ikonu Duplikovat vybrané rámečky a přidejte do panelu Animace další snímek.

    Existuje několik způsobů, jak pomocí panelu Vrstvy vytvořit animaci. Je pro mě jednodušší vytvořit novou vrstvu v panelu Vrstvy pro každý snímek v panelu Animace.

  5. Nyní, když máme v panelu Animace dva snímky, potřebujeme druhý snímek v panelu Vrstvy. Pravým tlačítkem myši klikněte na vrstvu 1 a v nabídce vyberte možnost Duplikovat vrstvu. Přejmenujte tuto druhou vrstvu na „Vrstva 2“.

    Nyní máme dva snímky v panelu Animace a dva vrstvy v panelu Vrstvy. Musíme je však koordinovat společně.

  6. Na panelu Animace vyberte první snímek. Na panelu Vrstvy vypněte viditelnost vrstvy 2, takže vrstva 1 je jedinou viditelnou vrstvou.

  7. Vyberte druhý snímek panelu Animace. Na panelu Vrstvy vypněte viditelnost vrstvy 1 a zapněte viditelnost vrstvy 2.

    Ne, když kliknete na tlačítko Přehrát v panelu Animace, uvidíte, že se míč v okně obrazu pohybuje nahoru a dolů.

  8. Vyberte druhý snímek v panelu Animace a přidejte nový snímek.

  9. Na panelu Vrstvy duplikujte vrstvu 2 a přejmenujte ji na vrstvu 3.

  10. S rámečkem 3, který je stále vybrán v panelu Animace, vypněte viditelnost vrstvy 2. Přesuňte červenou kouli mírně nahoru ve vrstvě 3.

  11. U snímků 1 a 2 v panelu Animace vypněte viditelnost vrstvy 3.

    Tyto kroky opakujte pro další tři snímky. Pak byste měli mít 6 snímků s pouze jednou vrstvou viditelnou v každé.

    Rám 1 - viditelná vrstva 1
    Rám 2 - viditelná vrstva 2
    Rám 3 - viditelná vrstva 3
    Rám 4 - viditelná vrstva 4
    Rám 5 - viditelná vrstva 5
    Rám 6 - vrstva 6 viditelná

Další →

Copyright 2018 Adobe Systems Incorporated. Všechna práva vyhrazena. Snímky obrazovky produktů Adobe přetištěné se souhlasem společnosti 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 a Flash Paper je / jsou [a] registrovanou ochrannou známkou (značkami) nebo ochrannou známkou (značkami) společnosti Adobe Systems Incorporated ve Spojených státech a / nebo jiných zemích.

Animate Pixel Art Sprites | Photoshop Tutorial (Srpen 2021)



Tagy Článek: Animace Photoshopu pro Sprite Sheet, Digital Art and Design, jak vyrobit skřítky pro sprite sheet