Animatie Tekst en Geluid Vloeiende beweging Product Aanbieding
Inhoud 1 Tekst en geluid pagina 03 2 Vloeiende beweging pagina 07 3 Product animatie pagina 09 4 Animated banner aanbieding pagina 10 5 Studiewijzer pagina 11 2
1 Tekst en geluid Tekstlagen - Maak een Nieuw bestand: 800 px breed 200 px hoog 72 dpi kleur RGB. - Geef de achtergrond een kleur of verloop - Typ je eigen voor- en achternaam. - Kopieer de laag met je naam zo vaak als het aantal letters in je naam. - Haal per Tekstlaag steeds 1 letter weg: C Co Cor Corr Corrie Corrie v Corrie va Corrie van Corrie van d Corrie van de Corrie van der Corrie van der K Corrie van der Kr Corrie van der Kro Corrie van der Kroe Corrie van der Kroef Menu Animatie Tijdlijn - Om een Animatie te kunnen maken, moet je in Venster / Window het menu Tijdlijn openen. - Klik nu op Videotijdlijn maken. - Linksonder kun je de Tijdlijn-animatie met onderstaand icoontje omzetten in een Frame-animatie en weer terug. - Kies voor Frame-animatie. 3
- Klik op het Icoon Frame. Er verschijnt nu een frame op de tijdlijn. - Klik in dit 1 e frame. Vink in het lagenpalet alle tekstlagen behalve de achtergrond uit (op het oogje voor de laag klikken). - Kopieer het 1 e frame door op het Kopieericoontje te klikken. - Klik in het 2 e frame. Maak alleen de tekstlaag met de 1 e letter zichtbaar. - Kopieer het 2 e frame. - Klik in het 3 e frame. Maak de tekstlaag met de 1 e en de 2 e letter zichtbaar. - Ga zo door tot je volledige naam in het laatste frame verschijnt. Afspeelduur - De afspeelduur kun je instellen door het aantal seconden per frame te veranderen. Je kunt ook ineens meerdere frames een andere afspeelduur geven: Selecteer de frames en verander bij 1 van de frames het aantal seconden. - Geef de tekstanimatie een speeltijd van 0,2 sec. per frame - Speelduur van de animatie is in te stellen door bij Herhalingsopties te kiezen voor 1 maal, 3 maal, altijd of overige. - Geef je tekstanimatie een herhaling van 5 maal. 4
Opslaan als animated gif - Sla de animatie op als PSD zodat je nog wijzigingen kunt aanbrengen. - Geef de animatie de naam tekstanimatie_eigennaam - Sla de animatie op als Animated gif: Bestand/File Exporteren Safe for web Kies Gif Bij een oudere versie van Photoshop kun je rechtstreeks kiezen voor Bestand opslaan als Opslaan voor web. Exporteren als video Om je animatie te kunnen bewerken in Moviemaker moet je hem als video renderen. - Ga in menu Bestand naar Exporteren - Video renderen. - Kies voor nieuwe submap aanmaken. - Geef de submap de naam Tekstanimatie. - Kies voor renderen. Geluid downloaden Om muziek in de animatie te plaatsen moet je eerst muziek downloaden. Dit kan o.a. met behulp van YouTube-mp3.org. Je hebt geen account nodig, alleen maar een YouTube URL. - Plak de url van de muziekvideo in het venster. - Klik op converteren. 5
MovieMaker - Open Windows Live MovieMaker. - Klik op het tabblad Start - Video of foto toevoegen. - Ga naar map Tekstanimatie selecteer het bestand / alle bestanden. - Klik op Muziek toevoegen - Open het MP3-bestand, het staat nu onder de beelden. - Klik bij Opties op geluid Uitfaden. De animatie moet tenminste 7 en maximaal 15 seconde duren. - Verander de Weergaveduur bij Bewerken naar..zodat de animatie minimaal 7 seconde duurt. Sla tenslotte de film op als film. - Ga naar Bestand - Project opslaan. - Ga nog een keer naar Bestand Film opslaan - HD 6
2 Vloeiende beweging Afbeeldingslagen - Maak een nieuw bestand - 800 px breed 400 px hoog Kleur RGB 72 px/inch. - Ga op zoek naar een Afbeelding van een Landschap met een boom of een ander object waarin een auto kan rijden of een boot kan varen. - Plaats je afbeelding in het nieuwe bestand. - Selecteer de boom of het door jou gekozen object. Hiervoor kun je de Magnetische Lasso gebruiken of het Pennetje. - Kopieer en Plak de selectie op een Nieuwe laag (Ctrl + J). - Ga op zoek naar een Afbeelding van een Auto of een Boot. - Selecteer de auto of de Boot en verwijder de achtergrond. - Plaats de Laag met de auto of boot tussen de andere 2 lagen in. Animatie Frames - speeltijd - speelduur 7
- Kies voor Venster / Window Tijdlijn - Videotijdlijn maken - Frame-animatie - Klik in het 1 e frame. Maak in het Lagenvenster de lagen met het landschap, de boom of het object en de auto of de boot zichtbaar. - Plaats de auto/boot voor het grootste gedeelte naast de afbeelding waardoor het lijkt dat de auto/boot de afbeelding binnen komt rijden/varen. - Kopieer dit frame door op het Kopieericoontje te klikken. - Klik in het 2 e frame. Verander niets aan de zichtbaarheid van de lagen. - Verschuif de auto of boot helemaal naar de andere kant zodat hij bijna uit het landschap verdwenen is. - Zorg er voor dat de auto/boot achter de boom/object gaat. - Zet de speelduur op Geen vertraging / No delay. - Kies bij herhaling voor 1 maal Extra Frames Om de veranderingen tussen de frames vloeiend te laten verlopen moet je Extra Frames tussenvoegen. - Klik op Tussenvoegen frames - Kies voor Positie - Kies voor 25 extra frames Opslaan - Klik op Play om je animatie te bekijken en eventueel aan te passen. - Sla de animatie op als PSD zodat je nog wijzigingen kunt aanbrengen. - Geef de animatie de naam animatie_vloeiend_eigennaam - Sla je animatie op als Gif in het menu Bestand Exporterten en / of Opslaan voor web en apparaten. 8
3 Product animatie Afbeeldingslagen - Maak een nieuw bestand - 600 px breed 315 px hoog Kleur RGB 72 px/inch. - Zoek een Afbeelding van een product voor een webshop - Plaats de afbeelding in het nieuwe bestand. - Selecteer het product en verwijder de achtergrond. - Maak een tekstlaag met Productinformatie zoals naam, omschrijving en prijs. - Kopieer de productlaag 2 keer. Geef de nieuwe lagen een andere kleur of patroon. Je mag ook kiezen voor extra lagen met daarin het product van een andere zijde gefotografeerd, of een detail van het product uitvergroot. Animatie Frames - speeltijd - speelduur - Kies voor Venster / Window Tijdlijn - Videotijdlijn maken - Frame-animatie - Klik in het 1 e frame. Maak in het Lagenvenster één laag met het product en de tekstlaag zichtbaar. - Klik in het 2 e frame. Maak in het lagenvenster het 2 e product en de tekstlaag zichtbaar. - Klik in het 3 e frame. Maak in het lagenvenster het 3 e product en de tekstlaag zichtbaar. - Bepaal zelf de speelduur - Kies bij herhaling voor Altijd / Forever Opslaan - Klik op Play om je animatie te bekijken en eventueel aan te passen. - Sla de animatie op als PSD zodat je nog wijzigingen kunt aanbrengen. - Geef de animatie de naam product_animatie_eigennaam - Sla je animatie op als Gif in het menu Bestand Exporterten en / of Opslaan voor web en apparaten. 9
4 Animated banner Maak met behulp van de in de vorige opdrachten geleerde technieken een animatie van een aanbieding. Wat moet er in staan: - Foto van een product - Naam van het product - Aanbieding in 2 verschillende zinnen - Logo van merk of winkel - Vorm met prijs - Knop met call to action Wat moet er bewegen / knipperen: - Vorm met prijs - Knop met call to action - Zinnen met aanbieding komen na elkaar binnen Succes 10
Studiewijzer Vak: Digitale Vormgeving - Cohort: 2016 - Leerjaar: 2 - Periode: 3 Context De leerling is in staat om: Iconen en grafieken te maken; Informatie om te zetten in een infographic; Een creatief cv te maken. Een animated gif te maken; Een animatie te exporteren als videobestand; Geluid aan een animatie toe te voegen; Een animatiebanner te maken. Middelen Infographic,, Creatieve CV, Animated Productbanner Leerdoelen Ontwerp en realisatie van een Infographic, Creatieve CV en een Animated Banner. Gereedschappen Gereedschappen uit de programma s Photoshop en Moviemaker (of vergelijkbaar video-editingprogramma). Technieken Ontwerpen, maken en toepassen van iconen, grafieken en vormen. Ontwerpen en maken van een animatie. Exporteren van een animatie naar een videobestand. Toevoegen van geluid aan een animatie. Vormgevingselementen Iconen, Call-to-Action button, Grafieken, Kleur, Lijn, Vormen, Foto s, Lay-out, eenheid in stijl, uitlijning, kwaliteit van afbeeldingen, originaliteit, afwisseling. Communicatie waarde (AIDA-formule). Relatie met het examen: De kandidaat beschrijft of herkent een of meer van de kenmerken van marketingcommunicatiemiddel zoals advertentie, commercial, non-spot advertising, advertorial, banner, poster, billboard, display advertising, point-of sale materiaal, game, merk-ambassadeur, viral, folder, brochure, direct mailing, QRcode weblog, vlog, second screen of app. Leeractiviteiten: Het maken van de volgende producten: Infographic, Animated Banner, Creative CV. Instructielessen, gezamenlijk oefenen van technieken, onder begeleiding werken aan portfolio opdrachten. Tijd 2 uur per week lesactiviteiten gedurende 1 periode van 8 weken. Leermiddelen: Reader Digitale Vormgeving leerjaar 2 periode 3 Materiaal en Reader is te vinden op onderstaande websites: http://www.digitalevormgeving.wordspress.com en http://www.mcstudentenwerk.wordpress.com. Voortgang en Beoordeling Aantal te behalen studiepunten: 1. Beoordeling van het portfolio met een minimum van 5.5. Aan het einde van de periode (laatste week van de periode) presenteert de leerling alle werkstukken aan de docent. Met de docent wordt afgesproken of dit op stick of digitaal gebeurt. Herkansing periode 4 Werkstukken inleveren in de toetsweek. 11