Dec
16
2010

Lichtkrant

Een animatie die er gelikt uitziet en niet moeilijk is om te maken, wat wil je nog meer? Toch komt er weer aardig wat aan bod in deze les. Je maakt zelf een patroon wat het begin is van de letters die je ook zelf maakt. Hierna nog een beetje goochelen met selecties en laagstijlen en dan de boel afmaken in het animatie gedeelte van Photoshop. In CS5 hebben ze dat beweging genoemd. En bewegen doet het zoals je kunt zien. Hieronder zie je mijn lichtkrant:

OK, aan de slag!

Open een nieuw document van 17 x 14 pixels met een transparante achtergrond. Maak met je ovale selectiekader een rondje en vul dat met een fris rood kleurtje, ik heb #fb0606 genomen. Ga dan naar menu BEWERKEN-PATROON DEFINIËREN en sla je patroon op.

Op een nieuw document in Photoshop van 800 x 300 px met een zwarte achtergrond. Maak boven de zwarte achtergrond een nieuwe laag aan en ga naar menu BEWERKEN-VULLEN-PATROON. Klik op het kleine pijltje achter patroon en kies daar voor je rode bolletje, als het goed is, is het de laatste die erbij staat.

Neem je veelhoeklasso van je gereedschapsbalk en maak de eerste letter door een selectie van de balletjes te maken die je daarvoor nodig hebt. Klik in de opties balk op toevoegen aan selectie, er komt nu een +je bij je veelhoeklasso te staan. Selecteer de balletjes voor de volgende letter. Ga zo door totdat je het hele woord hebt gemaakt dat je wilt maken. Je kunt natuurlijk nog meer woorden of figuurtjes  maken als je dat wilt maar ik hou het bij één woord in deze tutorial.

Toets nu CTRL+J zodat de selectie in een nieuwe laag boven die van de balletjes wordt gekopieerd. Zet de balletjes laag uit dan zie je de rode balletjes letters. Als er ongewenste stukjes rood bij de letters zitten dan haal je deze weg met een klein hard gummetje.

Zet de rode balletjes laag weer aan en zet de dekking op 30%. Schuif de letters mooi in het midden van je document zodat je zoiets krijgt als hieronder te zien is.

Ga naar menu AFBEELDING-CANVASGROOTTE en vergroot het canvas naar 1000 bij 500 px. Selecteer de pixels van de zwarte ondergrondlaag en keer de selectie om. Maak een nieuwe laag aan boven alle andere lagen en vul de laag met een kleur naar keuze, ik heb zwart genomen. Het maakt voor het eindresultaat niet uit want je gaat dadelijk de laag bedekken met laagstijlen.

Download bij Webtreats deze Metal patterns. Als je niet weet hoe je patroon in Photoshop installeert kun je dat hier lezen. Klik terwijl je in de toplaag staat op het laagstijl toevoegen icoontje en voeg de volgende laagstijlen toe:

Bij mij ziet het er nu zo uit:

Ga naar het animatie gedeelte van Photoshop, in CS5 heet dat beweging.  Als je een groene balk ziet ipv frames klik dan op het kleine icoontje rechtsonder zodat de animatie in frames wordt omgezet.

Zet de tijd onder het frame op 0,1 sec. Neem je verplaatsen gereedschap en houdt de SHIFT toets ingedrukt. Ga op de tekstlaag staan en sleep de tekst naar links totdat hij helemaal uit het zicht is. Dupliceer het frame en sleep dan de tekst weer met de SHIFT toets ingedrukt helemaal naar rechts totdat deze buiten zicht is.

Klik op het tussenvoegen icoontje (dat zit naast het dupliceren icoontje. Voeg 25 frames tussen.

Als je de animatie afspeelt zie je dit:

Dat is natuurlijk een beetje te snel 🙂 Daarom bouw je wat vertraging in.  Ga in het frame staan waar je tekst bijna in het midden staat en dupliceer dat frame. Ga in de kopie staan en schuif nu de tekst precies naar het midden van je document.

Zet de vertraging van het frame op 1 seconde, dupliceer het frame en zet dit frame de tekst laag uit. Dupliceer het frame nog een keer en zet de tekst weer aan. Herhaal deze stappen totdat je drie frames hebt waar de tekst laag uit staat. Dupliceer dan nog een keer het frame zet de tekst weer aan en zet de  tijd van het frame op 1 seconde.

Zet hierna de animatie op altijd zodat de lichtkrant blijft doorlopen.

Speel je animatie af en geniet 🙂 Sla je animatie op in het menu BESTAND-OPSLAAN VOOR WEB EN APPARATEN als gif bestand.

Veel plezier van je eigen lichtkrant!

Aanverwante berichten

Jumbojet

14 Reacties +REACTIE GEVEN

  • heb je weer ff nodig hoor,
    ik heb hem gerendeerd maar heb nu 359 jpeg plaatjes hoe zet je di nu op
    youtube dan, pffff zou wel wat instellingen wezen daar denk ik, maar zag er nergen film bij stann, dus zo kom ik er niet uit.
    sorry hoor ben een echte zeurpiet, hierna die ik die kraskaart, lijk mij ook heel leuk om te doen.
    grt janus….

    • hoi Janus,
      Je kunt het beste omzetten in Quicktime movie formaat dat kun je wel afspelen op Youtube en je kunt Quicktime gratis downloaden, dan kun je je filmpje ook afspelen op je eigen pc dat is erg leuk. En het is hartstikke handig om te combineren met Photoshop. En je bent geen zeurpiet hoor 🙂 Ik vind het leuk dat ik je kan helpen om wat verder te komen met de animaties.
      grtz,
      JJ

      • tnx jj het is gelukt 🙂
        alleen was het filmpje meer dan 350mb heb hem omgezet naar avi en nu maar 1,68mb
        is veel beter dan wat het was 🙂 tnx man en tot mijn volgende vraag dan maar weer 😉
        grtz janus….

  • hoi jumbo
    ik kom er niet uit, als ik een nieuwe laag maakt dan komt hij ook gelijk terecht in de eerste animatie, ook als ik die text laag uit zet en dan een nieuwe aanmaak, ik zie wat ik ook doet elke keer de eerste en de tweede laag doorelkaar heen. ik heb een achtergrond laag, daarna de bolletjes laag
    dan de text laag en als laatste de effecten laag……
    voeg ik een nieuwe laag toe mat de naam textlaag 2
    dan doe ik alles van het begin afaan, heb dan de eerste textlaag uitstaan terwijl ik dat allemaal doet, heb de nieuwe af en save hem, speel hem af en ziet dan eerst de eerste animatie, maar de tweede zie ik erachter die dan niets doet, als de eerste afgelopen is start de tweede wel, en ziet dan niet de eerste door de tweede heen, weet het echt niet meer nu, zou wel een domme fout maken denk ik, maar ben ook maar beginner hiermee.
    groetjes janus….

    • Hoi Janus,

      Wat je kunt doen is alle frames wegdoen en de animatie opnieuw maken. Dat is denk ik in jou geval het handigste om te doen. Maak je geen zorgen het komt best wel in orde met je animatie. Als je eenmaal de klappen van de zweep kent dan draai je hier je hand niet meer voor om.
      Nu begin je dus met alle frames te verwijderen, je houdt er eentje over en daar begin je de animatie weer opnieuw mee te maken. Stap voor stap zet je de lagen aan die je wilt zien dupliceert het frame schuif de tekst in het tweede frame op zijn plaats en voeg frames tussen. Dan maak je weer een nieuw frame en daar zet je de eerste tekst uit, tweede aan, dupliceert weer schuift de tekst en voeg frames tussen. Zo werk je door totdat je alle tekst van je animatie hebt gehad. De aanhouder wint Janus! Zet hem op!
      Groetjes,
      JJ

      • het is gelukt jj 🙂 thanks man….
        ik had de fout gemaakt om iedere laag apart te animeren en daarna een nieuwe laag te maken met een nieuwe text, maar je moet gewoon eerst alle texten maken en daarna pas 1 voor 1 animeren, en ja hoor zo moest het het, thanks man you are the one for me 🙂
        groetjes janus….
        en even bedenken en kijken welke ik nu ga maken, alleen jammer dat hij niet op het web kan, kan hem ook niet in photobucket zetten, daar doet hij het ook niet, maar even bedankt jj…..

        • te gek Janus! Je kunt er een filmpje van maken door het te bewaren via menu BESTAND-EXPORTEREN-VIDEO RENDEREN en dan op youtube zetten:) joh, de techniek staat werkelijk voor niets:D
          grtz,
          JJ

  • hoi jj het is mij in mijn ééntje gelukt om hem te maken thanks man.
    maar nu wilde ik er nog een txt achteraan maken en misschien wel 2 texten, heb van alles zelf geprobeerd maar kom er nu echt niet meer uit…
    heb jij een goede tip voor mij? bvb dank.
    groetjes janus….

    • Hoi Janus,
      Fijn dat het je gelukt is. Je kunt de lichtkrant uitbreiden met meer tekst dan moet je eerst natuurlijk weten wat je wilt doen en die woorden maken. Dan de woorden in en uit beeld laten komen en dan de frames weer tussenvoegen zodat de tekst niet te snel loopt. Als het ene deel tekst geweest is dan kun je het andere laten komen en verdwijnen. Voor iedere serie moet je de stappen herhalen. Zie dit voorbeeld http://www.youtube.com/watch?v=Y2_mHKeh8jM deze heb ik gemaakt voor de feestdagen 🙂 Over geluid toevoegen aan een animatie heb ik trouwens ook een les op de site staan.
      Ik hoop dat je er zo uitkomt en anders weet je me wel te vinden,
      grtz,
      JJ

      • hoi jumbo
        moet ik dus van voorafaan beginnen weer dan, en dat boven alle andere lagen zetten?
        of kan ik gewoon de eerste lagen gebruiken maar dan zonder die met de text erin?
        ben een beginnende photoshopper dus weet er nog niet veel van, maar vind het harstikke leuk om jou tt te maken, en ik leer er veel van wat je er allemaal mee kan doen, schitterend gewoon. goed werk ga zo door, je maak mij en vele anderen denk ik er heel blij mee, alleen niet iedereen is zo dom als ik denk ik, doordat je alleen van mij veel vragen krijg, hoop dat ik niet te lastig word voor je…..
        groetjes janus…..

        • Hoi Janus,
          Je kunt lagen toevoegen met de woorden die je wilt laten lopen in de lichtkrant. Je voegt frames toe en zet daarin de lagen van de voorafgaande woorden uit en de lagen van je nieuwe woorden aan. Voeg weer frames tussen en herhaal deze stappen totdat je alle woorden die je wilt gebruiken gehad hebt.
          Vraag gerust hoor 🙂 Het is leuk om te horen dat je enthousiast over de lessen bent.
          groetjes,
          JJ

  • Ha die jet

    Aller eerst nog de beste wensen voor 2011 en dat het je maar goed mag gaan. Ik heb even via deze oefening een leuk lichtkrantje gemaakt voor mijn eigen website, ik was al een tijdje opzoek naar een lichtkrantje dus ik was erg blij met deze oefening. Nou de groeten vannuit noordwijk aan zee en nog een fijne dag.

    groet john

    • Hoi John, dankjewel voor je lieve wensen. Voor jou ook alle goeds. Fijn dat de lichtkrant van pas komt.!
      Groetjes,
      JJ

Reageer op janus1963

Archief

Categorie