Share
Er is een goede kans dat dit je helemaal niet zal interesseren (geanimeerde gif Ian? Heb je een lach?) Maar ik heb iemand beloofd dat ik dit zou schrijven. Ik heb onlangs geanimeerde voorbeeldafbeeldingen gemaakt voor nieuwsberichten op Activetuts + en nu ben ik hier. Het is alleen maar eerlijk dat ik Michael liet weten hoe het is gedaan.
Photoshop is niet bepaald toonaangevend op het gebied van animaties, maar voor eenvoudige taken als deze werkt het prima. We gaan een standaard 200x200px Tuts + voorbeeldafbeelding nemen en een scrollende nieuwstikker toevoegen aan de onderkant ervan.
Laten we een geschikte foto pakken. Hier is er een die ik vorig jaar tijdens de Envato meetup in Chicago heb genomen, bijgesneden tot 200x200px. Open het in Photoshop.
We hebben hiervoor slechts twee extra lagen nodig; een achtergrond voor de ticker (rechthoekig gekleurd # 104333) en wat tekst met onze gewenste zin een paar keer herhaald.
Het lettertype heet 04b_03 en is gratis verkrijgbaar bij dafont.com. Het is een 8-bits lettertype, wat betekent dat u het moet weergeven op de basisgrootte (of een veelvoud van) met anti-alias uitgeschakeld voor de beste pixelresultaten. In dit geval kijken we naar 8px.
Het heeft een zachte groene tint van # f0fcdf met een semi-transparante 1px-streek van # 051a14 (om het te helpen op te vallen tegen de achtergrond).
Open uw animatievenster (venster> animatie) en ga met de knop rechtsonder in het paneel naar de kaderweergave.
Je kunt zien dat het eerste frame voor je is opgespijkerd, zorg er gewoon voor dat de vertraging is ingesteld op 0 sec (direct onder de miniatuurafbeelding), want we willen dat het frame wordt afgespeeld zodra het wordt aangetroffen. Wat u in de eerste miniatuur kunt zien, is de animatie in de huidige staat, de lagen en objecten precies zoals u ze hebt neergelegd.
Druk op het pictogram "Dubbele geselecteerde frames" om een tweede frame te maken. Dit is onze laatste staat. Terwijl de tweede miniatuur wordt geselecteerd, worden alle wijzigingen die we in onze lagen aanbrengen alleen op dit frame toegepast.
Tween is afgeleid van het woord 'inbetweening' en verwijst naar geleidelijke stadia tussen twee toestanden, wat beweging suggereert.
Terwijl het tweede frame is geselecteerd, verplaatst u de tekst over het scherm in de richting waarin u wilt bladeren. U wilt misschien de shift ingedrukt houden om te voorkomen dat deze van zijn horizontale koers afwijkt. Verplaats hem helemaal naar voren zodat hij op precies dezelfde positie lijkt te zijn als waarop hij begon.
In dit geval zit de 'N' tegen de linkerkant, dus het is gemakkelijk te zien waar ik naar mik.
Na het verplaatsen van uw tekst, selecteert u beide frames en klikt u op de knop "Tweens animatieframes". Als u dit doet, wordt de volgende dialoog weergegeven:
Zoals je kunt zien, heb ik gekozen voor een extra 99 frames om tussen mijn twee staten te zitten. Ik wilde dat alle lagen in mijn document in deze frames worden weergegeven en ik probeer alleen maar de eigenschap 'positie' van mijn tekstlaag te animeren. Super. Druk op OK.
Je hebt nu een hoop frames in je animatievenster en elk ervan lijkt waarschijnlijk erg op het volgende! Stel uzelf echter gerust door op de knop Afspelen te drukken en uw tekst voor uw ogen levend te bekijken. Magie, dames en heren?
Gewoon om dingen op te ruimen, selecteer het 101ste frame en verwijder het. Zoals je je misschien herinnert, is het identiek aan het eerste frame, dus looping koppelt ze tegen elkaar aan en geeft ons een glitch in onze overigens vloeiende animatie.
Het resultaat is subtiel, maar in de afbeelding hierboven zie je ons eerste frame en ons laatste frame (nummer 100). Door te lussen worden ze naadloos gemengd.
Dat is het! Animatie voltooid. We moeten nu gewoon ons bestand opslaan, dus ga naar Bestand> Opslaan voor web en apparaten. Kies GIF als bestandstype en kies onderaan in het gedeelte Animatie voor 'Voor altijd lus'. Je kunt ook een voorbeeld van de animatie bekijken, voor de zekerheid.
Als u uw bestand wilt bewerken terwijl u de animatie behoudt (u wilt bijvoorbeeld de tekst wijzigen en de achtergrondafbeelding verwisselen), dan hoeft u alleen het eerste frame te bewerken. Houd het eerste frame geselecteerd, selecteer de laag die u wilt wijzigen en zorg ervoor dat de "Propagate Frame 1" optie is aangevinkt.
Alle attribuutwijzigingen die in die laag worden aangebracht, worden verspreid (gereproduceerd) over alle andere frames. Voeg een slagschaduw toe aan de tekstlaag in frame één en Hey Presto! daar is het precies tegenover de animatie. Als u niet "Propagate Frame 1" controleert, zal slechts één frame worden gewijzigd.
Ik vermoed dat je vanochtend niet wakker werd met de gedachte "Er is een echt tekort aan geanimeerde gif tuts die er zijn" en tenzij je een redacteur bent van een van de Tuts + -sites, is de kans groot dat je geen gebruik zult vinden voor deze. Toch, Michael, ik hoop dat je dit informatief hebt gevonden en ik verwacht van nu af aan topkwaliteit nieuwsberichten op Activetuts + :)
Accentsconagua