INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en...

22

Transcript of INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en...

Page 1: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.
Page 2: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 2

INHOUD PLANNING ........................................................................................................................................................................ 3

STUDIEWIJZER DIGITALE VORMGEVING COHORT 2019 LEERJAAR ONLINE DESIGN ................................................... 4

PATHFINDER ROBOTS ...................................................................................................................................................... 5

LOGOKOPIE ...................................................................................................................................................................... 9

STIJLBIBLIOTHEEK .......................................................................................................................................................... 11

STIJLELEMENTEN ........................................................................................................................................................... 12

BUTTONS & ICONEN ...................................................................................................................................................... 14

FACEBOOKHEADER ........................................................................................................................................................ 16

TEKSTANIMATIE ............................................................................................................................................................. 17

STORY INSTAGRAM ........................................................................................................................................................ 20

Page 3: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 3

PLANNING Groep A

klassikaal zelfstandig 1 Indelen groepen. Werkwijze Digitale Vormgeving leerjaar

2 Basics - Portfolio

4 Logokopie

3 Pathfinderrobots

5 Stijlbibliotheek

6 Logokopie

8 Stijlelementen

7 Stijlelementen

9 Icons & Buttons

10 Icons & Buttons

12 Tekstanimatie

11 Facebookheader

13 Storytelling Instagram

14 Storytelling Instagram

16 Alles afmaken

15 Promotie Instagram

Groep B

zelfstandig klassikaal 1 Indelen groepen. Basics - Portfolio

2 Werkwijze Digitale Vormgeving leerjaar Basics - Portfolio

4 Pathfinderrobots

3 Logokopie

5 Logokopie

6 Stijlbibliotheek

8 Stijlelementen

7 Stijlelementen

9 Icons & Buttons

10 Icons & Buttons

12 Facebookheader

11 Tekstanimatie

13 Storytelling Instagram

14 Storytelling Instagram

16 Promotie Instagram

15 Alles afmaken

Page 4: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 4

STUDIEWIJZER DIGITALE VORMGEVING COHORT 2019 LEERJAAR ONLINE DESIGN Context Lessen Online media Digitale vormgeving. Project Communicatie Items Documentinstellingen - Automatische bladzijdenummering – Alineastijlen - Pathfinder - stijlelementen – stijlbibliotheek - icons – buttons – facebookheader – tekstanimatie – storytelling Instagram Leerdoelen De leerling is in staat om een A5 portfolio te maken met daarin afbeeldingen, teksten, bladzijdenummering, alineastijlen, De leerling is in staat een vormen te bewerken voor toepassing in een huisstijl, een stijlbibliotheek te maken met daarin buttons, iconen, tekst, kleur en stijlelementen. De leerling maakt een header, een tekstanimatie en een story voor het gebruik in een website en social media. De leerling maakt hierbij gebruik van onderstaande gereedschappen, technieken en vormgevingselementen: Gereedschappen Gereedschappen InDesign, Illustrator en Photoshop Technieken Documentinstellingen - Automatische bladzijdenummering – Alineastijlen - Pathfinder – stijlbibliotheek tekenen, selecteren, uitsnijden, bibliotheek gebruiken, vormgereedschappen, lettertypes, animatie Vormgevingselementen Tekstopmaak, Lay-out, compositie, eenheid in stijl, kwaliteit van afbeeldingen, originaliteit, communicatie waarde. Relatie met het examen B1-K2-W6 De leerling ontwikkelt en beheert voorlichtings-, promotie- en pr-materiaal. P1-K2-W2 De leerling geeft voorlichting over de organisatie aan derden. Leeractiviteiten Zelfstandig werken aan opdrachten. Instructielessen, gezamenlijk oefenen van technieken, onder begeleiding werken aan portfolio opdrachten. Tijd - 2 uur per week lesactiviteiten - 1 periode van 9 weken Leermiddelen Reader digitale vormgeving Corporate Identity & Online Design Materiaal en Reader zijn te vinden op de website http://www.mcstudentenwerk.wordpress.com/leerjaar2 Resultaten De docent geeft aan wat de deadline is voor het inleveren / publiceren van een opdracht of product. Bij 6 opdrachten of meer mag een leerling 3 deadlines missen, bij minder dan 6 opdrachten 2 deadlines. Bij meer deadlines mag de opdracht pas weer als herkansing ingeleverd worden. Per periode mogen maximaal 2 of 3 producten herkanst worden. Bij 6 opdrachten of meer mag een leerling 3 producten herkansen, bij minder dan 6 opdrachten 2 producten. Productbeoordeling De producten/opdrachten worden beoordeeld op de onderdelen programmavaardigheden, vormgeving en visuele communicatie. Procesbeoordeling Daarnaast is ook de procesbeoordeling van belang. Hier wordt beoordeeld aanwezigheid en actieve werkhouding. Dit is van belang voor Aanwezigheid / actieve werkhouding mogelijkheid tot samenwerking, en aanvullingen op en uitleg van de leerstof. Leerbaarheid en leerproces Kunnen reflecteren, openstaan voor feedback en feedback verwerken in het leerproces.

Page 5: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 5

PATHFINDER ROBOTS Maak met de basisvormen 2 verschillende robots. Maak hierbij gebruik van vormmodi, pathfinders en uitlijnen.

Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots. Je bent zelf vrij in hoe je robots eruit zien, met welke vormen je gaat werken, hoe groot de robot moet worden en eventuele andere attributen die de robot nodig heeft.

Nieuw bestand In Illustrator maak je een nieuw bestand: Nieuw – Drukwerk - Formaat: Breedte 29,7 cm - Hoogte 21 cm (A4 liggend) Basisvormen maken In het gereedschappenpalet selecteer je de verschillende Basisvormen waar je mee aan de slag wilt. Deze basisvormen zijn de bouwstenen voor je robot. Als je een basisvorm maakt, kun je deze ook nog op verschillende wijzen aanpassen. Wil je rondere hoeken aan bijvoorbeeld een rechthoek, dan selecteer je de rechthoek en zie je kleine rondjes in je rechthoek ontstaan. Als je die selecteert en met je muis naar binnen sleept, verandert de vorm. Alle hoeken worden rond.

Page 6: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 6

Als je niet alle hoeken rond wilt hebben, maar een enkele. Selecteer in je gereedschappenpalet de Witte pijl. Selecteer vervolgens de Ankerpunten van de vorm die je wilt vervormen. Sleep met je muis naar binnen en de hoeken veranderen van vorm.

Sommige vormen hebben meerdere opties. De Veelhoek en de Ster kun je aanpassen. Kies de veelhoekvorm, klik op je werkblad. Kies het aantal hoeken dat je wilt.

Kleur De kleur van de vorm kun je aanpassen door de vorm te selecteren (zwarte pijl) en in de menubalk te kiezen voor de kleur van de opvulling en de lijn. Je kunt hier ook kiezen voor geen vulling of geen lijn. Ook kun je de dikte van de lijn instellen.

Page 7: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 7

Vormmodi Vormmodi is een onderdeel van Pathfinder. Hiermee kun je vormen samenvoegen en uitsnijden. Illustrator maakt van 2 vormen 1 nieuwe vorm. Je maakt 2 vormen. Je selecteert beide vormen waar je iets mee wilt. Je klikt op een icoon in Vormmodi.

Pathfinder Met Pathfinder kun je ook vormen uitsnijden. Afhankelijk van de vormen worden 2 of meer nieuwe vormen gemaakt. Je maakt 2 vormen. Je selecteert beide vormen waar je iets mee wilt. Je klikt op een icoon in Pathfinder. In het Lagenpallet kun je nu zien wat Pathfinder heeft gedaan en kiezen welke lagen je wilt behouden.

Page 8: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 8

Uitlijnen Met uitlijnen kan je ervoor zorgen dat verschillende onderdelen in één keer mooi uitgelijnd worden of dezelfde ruimte tussen de verschillende vormen krijgen. Je kunt ervoor kiezen om verticaal of horizontaal uit te lijnen. Selecteer alle onderdelen die je graag wil uitlijnen. Open bij venster Uitlijnen. Je ziet verschillende opties zoals rechts-, gecentreerd of links uit lijnen.

. Opdracht 0pslaan in Illustrator Om te laten zien dat je met Pathfiner en Vormmodi hebt gewerkt moeten er gaten in je robot zitten. Gaten zijn alleen zichtbaar als je de achtergrond in je lagenpallet uitzet of verwijderd. Bovendien moet je document opgeslagen worden als PNG. PNG opslaan: Bestand -Exporteren – Exporteren als PNG. Sla op als: robots-eigennaam.ai en robots-eigennaam.png Opdracht plaatsen in Portfolio in InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar robots.eigennaam.png– geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren

Page 9: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 9

LOGOKOPIE Kies een product met bijbehorend logo dat je aanspreekt. Plaats het logo in Illustrator en maak een zo exact mogelijke kopie met behulp van Vormen – Lijnen - Lettertypes en Kleuren. Maak een nieuw bestand in Illustrator: Drukwerk – A4. Plaats hierin het logo links bovenin: Bestand – Plaatsen - Blader naar logo – Plaatsen Maak hieronder het logo na met behulp van vormen, lettertype, kleuren hulplijnen. .

Vormen Als je in het gereedschapspalet op de Rechthoekvorm vasthoudt verschijnt er een lijst van vormen. Vulling en rand veranderen In de Optiebalk kun je bepalen of je een vulling en een rand wilt en welke kleur ze krijgen. Voor de rand of lijn kun je ook de dikte aangeven, Selectiegereedschap Zwarte pijltje dat wordt gebruikt voor het selecteren en verplaatsen van een vorm. Kan ook gebruikt worden om een vorm groter of kleiner te maken of te draaien. Direct Selectiegereedschap Het witte pijltje selecteert een enkel ankerpunt in plaats van de hele vorm. Het wordt gebruikt om een ankerpunt van een vorm te bewerken. Houd de Shifttoets ingedrukt om meerdere ankerpunten te selecteren en te bewerken. Veelhoek maken Kies in de gereedschapsbalk voor Veelhoek. Klik 1 keer op je werkblad. Er verschijnt een venster waarin je kunt aangeven hoeveel hoeken de veelhoek moet hebben. Teken vervolgens je 3 (4-5-6-7-8-etc) hoek.

Page 10: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 10

Lettertype Ga op zoek naar het juiste lettertype. Een hulpmiddel bij het vinden van de naam van het gebruikte lettertype: https://www.myfonts.com/WhatTheFont/ Mogelijke sites voor het downloaden van lettertypes: http://losttype.com/browse http://www.dafont.com De letters kun je aanpassen in grootte, opmaak, regelafstand: Venster - Tekst – Teken

Kleur Selecteer de letter of de vorm die je een kleur wilt geven. Klik met het pipet uit de gereedschapsbalk op de kleurvlakken uit het originele logo. Hulplijnen en raster Hulplijnen kun je aan de linker- en bovenzijde van je document met ingehouden cursor uit de linialen slepen. Heb je geen linialen, kies dan voor Ctrl+R. Maak een aparte laag aan waarin je de hulplijnen sleept, zodat je ze allemaal tegelijk ook weer op onzichtbaar kunt zetten. Een raster is een ruitjespapier dat op je werkblad verschijnt. Dit als hulpmiddel voor het tekenen van de juiste lijnen. Het raster kun je openen bij het venster Weergave – Raster tonen Opdracht opslaan in Illustrator Sla op als: logokopie-eigennaam.ai en logokopie-eigennaam.pdf Opdracht plaatsen in Portfolio in InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar logokopie.eigennaam.pdf – geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren

Page 11: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 11

STIJLBIBLIOTHEEK Maak een stijlbibliotheek in Illustrator met daarin het logo, de kleuren en de lettertypes uit het logo. In Adobe Photoshop, Illustrator en InDesign heb je de mogelijkheid om per project een bibliotheek aan te maken. In deze bibliotheek kun je huisstijlelementen toevoegen. Als je iets in de huisstijl wilt maken hoef je alleen de juiste bibliotheek te openen om alle huisstijlelementen te kunnen gebruiken. Nieuwe bibliotheek Open het bestand Logokopie in Illustrator. Klik in de Optiebalk (boven) op Venster. Kies voor Bibliotheken. Klik rechtsboven in het bibliotheekvenster op het uitrolmenu en kies voor Nieuwe Bibliotheek. Geef de bibliotheek de naam Huisstijl. Kleur toevoegen Zorg ervoor dat 1 van je logokleuren als Voorgrondkleur (voorste kleurenvakje) in de Gereedschapsbalk (links) ingesteld staat. Klik links onder in je nieuwe bibliotheek op het Plusteken. Klik op Vulkleur. Herhaal dit voor alle kleuren (minimaal 2) van je logo. Lettertype toevoegen Typ de naam van de lettertypes in je document – sleep de teksten in de bibliotheek. Logo toevoegen Selecteer het volledige logo. Sleep het in je stijlbibliotheek.

Screenshot Stijlbibliotheek Maak een screenshot waarop je Huisstijl-bibliotheek duidelijk zichtbaar is. Maak een nieuw document aan in Illustrator: Bestand – Nieuw – Web – Web -Groot Plak het bestand: Ctrl+V. Klik op de afbeelding – Kies in de Optiebalk – Afbeelding uitsnijden. Klik op Toepassen. Pas nu je pagina aan aan je illustratie: Klik op Tekengebied in de Gereedschapsbalk. Kies in de Optiebalk voor: Tekengebied aanpassen aan illustratiegrenzen.

Opdracht opslaan in Illustrator Sla het bestand op als stijlbibliotheek-eigennaam.aI en stijlbibliotheek-eigennaam.pdf Opdracht plaatsen in Portfolio in InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar stijlbibliotheek.eigennaam.pdf – geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren

Page 12: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 12

STIJLELEMENTEN Maak 2 stijlelementen passend bij het gekozen logo en plaats deze in je stijlbibliotheek. Stijlelementen zijn grafische elementen / vormen uit of passend bij het logo die op een andere manier toegepast kunnen worden. Voorbeelden

De gekleurde blokjes uit het logo zijn vertaald naar stijlelementen die toegepast worden als tekstvlakken.

De vormen in het logo worden gebruikt als Prezi-frames.

- Maak een nieuw bestand: Illustrator – Drukwerk – A4. - Open het bestand logokopie -Selecteer het volledige logo – kies voor Bewerken – Kopiëren.

Ga naar het nieuwe bestand – kies voor Bewerken – Plakken - Kopieer de laag met het logo zodat je uiteindelijk het logo en de stijlelementen ziet. - Experimenteer met het beeldmerk en de tekst.

Houd in gedachten dat je een stijlelement kunt gebruiken als vlak of als kader voor informatie, als opsommingsteken maar ook als toevoeging aan een tekst of afbeelding. Het moet bijdragen aan de herkenning van je merk. Gebruik daarom vormen en kleuren uit, of passend bij, je logo.

- Maak 2 verschillende stijlelementen. Beschrijf waarvoor je ze wilt gebruiken en pas dat ook toe.

- Plaats beide stijlelementen in je bibliotheek,

Page 13: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 13

Opslaan opslaan in Illustrator stijlelementen-eigennaam.ai en stijlelementen-eigennaam.pdf Opdracht plaatsen in Portfolio in InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar stijlelementen.eigennaam.pdf – geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren

Page 14: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 14

BUTTONS & ICONEN Maak een eigen iconenserie bestaande uit: 1 favicon - 2 navigatiebuttons en 3 social media buttons. Bestand Maak een nieuw bestand in Illustrator: Bestand - Nieuw - A4 Werkwijze Bestaande vormen en iconen mogen gebruikt worden maar moeten zowel in vorm als kleur aangepast en afgestemd worden op het gekozen logo. Maak gebruik van het gereedschap Pathfinder zoals beschreven in de opdracht Pathfinder robots. Maak gebruik van de Stijlbibliotheek Huisstijl zoals gemaakt in de opdracht Stijlbibliotheek. Plaats het logo vanuit de stijlbibliotheek huisstijl op je werkblad. Favicon Een favicon is een icoon voor de url van je website.

Social mediabuttons Doorklik- en follow-me-buttons voor Instagram, Facebook, Snapchat, LinkedIn, etc. Een site waar veel social media icoontjes te vinden zijn: https://iconmonstr.com/ De knoppen van deze site mogen wel gebruikt worden als ze aangepast worden.

Navigatiebutton Dit is een knop zoals home, contact, shop, producten, programma of agenda. De knop moet bruikbaar zijn in een uitrolmenu en daarom langwerpig en plat zijn.

Page 15: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 15

Criteria Eenheid De iconen moeten gezamenlijk 1 serie vormen, in één stijl worden ontworpen. Dit betekent dat je consequente keuzes moet maken voor rond of rechthoekig, , kleurgebruik, lijndikte, tekenstijl, etc. Afstemming Tekenstijl, kleur en vorm moeten afgestemd worden op het logo Oorspronkelijkheid / originaliteit Probeer een specifiek eigen element te verwerken in je ontwerp wat je uiteraard ook weer consequent toepast.

Stijlbibliotheek Plaats de iconen en buttons in de bibliotheek Huisstijl

Opdracht opslaan in Illustrator Sla het bestand op als: icons-eigennaam.ai en icons-eigennaam.pdf. Opdracht plaatsen in Portfolio in InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar icons.eigennaam.pdf – geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren

Page 16: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 16

FACEBOOKHEADER Maak een facebookheader met nieuwsitem waarin je de stijlelementen uit de bibliotheek Huisstijl toepast. Maak een screenshot van de Facebookpagina van je product. Plak of open de screenshot in Photoshop. Plakken: Nieuw bestand – Klembord – Maken. Bibliotheek openen Kies voor Venster – Bibliotheek. Klik op het uitrolmenu – kies voor de bibliotheek Huisstijl Facebookheader met nieuwsitem Bedenk een nieuwsitem voor je product. Typ de tekst van het item in het juiste lettertype. Plaats een foto die het item versterkt over de originele header:

- Plaats de foto boven de header. - Verander de grootte met Ctrl+T om de foto zo passend mogelijk te maken. - Als de foto nog te breed of te hoog is kun je de overlappende delen verwijderen door ze te

selecteren met het Selectiegereedschap en vervolgens te klikken op Delete.

Gebruik de stijlelementen, kleuren en het lettertype uit de bibliotheek om het nieuwsitem vorm te geven.

Opdracht opslaan in Photshop Sla het bestand op als: header-eigennaam.psd en header-eigennaam.pdf. Opdracht plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar facebookheader.eigennaam.pdf – geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren

Page 17: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 17

TEKSTANIMATIE Maak een tekstanimatie met een call to action, waarin je het gekozen product promoot. Maak hierbij gebruik van de bibliotheek Huisstijl. Content Om een animatie te kunnen maken moet je natuurlijk eerst weten wat je gaat benoemen: Dat kan zijn de eigenschappen en voordelen van je product, de doelgroep waartoe een mogelijke koper zich aangesproken voelt, een positief gevoel dat aan het product gekoppeld wordt, een aantrekkelijke prijs of actie, een maatschappelijk doel waaraan het product gekoppeld is. Je hoeft ze natuurlijk niet allemaal te benoemen. Kies er 1 uit en pas dit toe op jouw product. Bijvoorbeeld: Kenmerken en gekoppeld aan een positief gevoel OnePlus 7 pro Meest geavanceerde scherm ooit. Ervaar ongeëvenaarde smoothness en helderheid met een verversingsfrequentie van 90 Hz en QHD+ resolutie. Curved edge-to-edge design Koop nu Actie Je eigen smartphone Opwaarderen naar de allernieuwste OnePlus 7 pro Ruil nu in Deze aanbieding is uitsluitend beschikbaar van 26 juni tot 15 augustus. Om later een animatie te kunnen maken is het belangrijk dat je voor iedere regel een nieuwe laag maakt. Opmaak De tekst is nu nog onopvallend. Met gebruik van kleur, lettertypes, variërende lettergrootte en stijlelementen kun je de aandacht op je boodschap vestigen. Maak daarbij gebruik van de stijlbibliotheek Huisstijl die je in Illustrator hebt gemaakt: Venster: Bibliotheken.

Page 18: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 18

Animeren Nu je de tekst op aparte lagen hebt staan en hebt opgemaakt kun je de tekst laten opkomen. Afbeeldingen en teksten laten bewegen noemen we animeren. Hiervoor heb je een tijdlijn nodig: Venster – Tijdlijn

Klik 2 keer op Frameanimatie maken.

In de tijdlijn staat nu 1 frame waarin de hele advertentie te zien is. Dat is niet de bedoeling. De inhoud moet geleidelijk zichtbaar worden. Vink daarom alle lagen in je Lagenpallet uit op 1 na. Maak vervolgens een Nieuw frame in de tijdlijn. In het nieuwe frame zie je de laag die je zichtbaar hebt gemaakt. Vink nu nog 1 of 2 extra lagen aan. Maak weer een nieuw frame waarin je nog meer informatie laat zien. Tot uiteindelijk de volledige advertentie te zien is.

Nieuw frame

Page 19: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 19

Onder de verschillende frames kun je aangeven hoelang het frame te zien moet zijn. Kies in eerste instantie voor 1 sec. Als je dat te snel of te langzaam vindt kun je het weer wijzigen. Klik op de knop Play om je animatie te bewonderen. Als je tevreden bent klik dan op de knop Altijd zodat de animatie zich blijft herhalen. Opdracht opslaan in Photoshop Sla je animatie op als tekstanimatie-eigennaam.psd (bestand – opslaan als) en als tekstanimatie-eigennaam.gif: Bestand – exporteren – opslaan voor web (verouderd) – gif Klik op opslaan. Pas daarna kun je de naam en de locatie van je bestand aangeven. Opdracht plaatsen in Portfolio in InDEsign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar tekastanimatie.eigennaam.pdf – geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren

Page 20: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 20

STORY INSTAGRAM Maak een animatie met 5 of 6 foto’s / afbeeldingen voor Instagram waarin je een verhaal vertelt over je product. Een instagramstory maak je natuurlijk op je telefoon met gebruik van alle tools die daarvoor beschikbaar zijn. Dat gaan we nu niet doen. In deze opdracht gaat het om het verhaal dat je gaat vertellen en hoe je dat door middel van afbeeldingen kunt doen. De animatie maken we in Photoshop zodat je deze overal online kunt gebruiken. Het script Er zijn duizenden verhalen te vertellen. Je hoeft niet altijd iets te promoten. Het is ook prima als je de ander vermaakt, ontroert, laat schrikken, etc. We gaan in het voorbeeld wel uit van een promotie: Aan wie ga je iets vertellen, wat ga je vertellen, heeft iemand daar behoefte aan, etc. Niet gemakkelijk, Daarom 5 stappen om wat houvast te geven. Stap 1 Tot wie richt je je, wat houdt hen bezig?

Koper smartphone op zoek naar de beste telefoon voor de beste prijs Stap 2 Speel in op hun probleem Ik wil een high-end smartphone maar wil niet de hoofdprijs betalen Stap 3 Presenteer een oplossing Je mag je oude telefoon inruilen Stap 4 Licht je oplossing toe Wij bepalen de waarde van je telefoon en deze wordt in mindering gebracht op de nieuwprijs Stap 5 Call to action Ruil nu in De beelden Open Photoshop. Kies voor Bestand – Nieuw – H 1920 pixels B 1080 pixels Resolutie 72 pixels/inch Bedenk bij iedere stap wat er echt uitspringt. Bijvoorbeeld Stap 1 Keuzestress Stap 2 Money Stap 3 Oude telefoon inruilen Stap 4 Deal Stap 5 Nieuwe telefoon Ga nu op zoek naar de beelden. Zelf fotograferen is het allerbeste en wordt in de beoordeling extra gewaardeerd!!! Als je gebruik maakt van andere beelden houd je dan aan de regels van copyright. Teksten en opmaak Als je de beelden hebt gevonden en geplaatst in Photoshop ga je door teksten, kleuren, vormen en icoontjes het beeld versterken. Maak gebruik van shapes en brushes die je kunt downloaden op sites als http://www.brusheezy.com http://myphotoshopbrushes.com Op mcstudentenwerk.wordpress.com bij extra info kun je rechtstreeks doorklikken naar deze sites.

Page 21: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 21

Een brush is een penseel. Als je deze hebt gedownload en geïnstalleerd (dubbelklikken) vind je de brush terug in de Gereedschapsbalk – Penselen bij het uitrolmenuutje. Een shape is een vorm. Deze zie je terug bij Vormen – Aangepaste vormen.

Animatie Kies voor Venster – Tijdlijn - Klik 2 keer op Frameanimatie maken. In de tijdlijn staat nu 1 frame - Vink alle lagen in je Lagenpallet uit op 1 foto en opmaak na. Maak vervolgens een Nieuw frame in de tijdlijn. Maak nu het 2e beeld zichtbaar. Herhaal dit tot alle 5 je visuals te zien zijn in de afzonderlijke frames. Kies onder de verschillende frames hoelang het frame te zien moet zijn. Klik op de knop Play om je animatie te bewonderen. Als je tevreden bent klik dan op de knop Altijd zodat de animatie zich blijft herhalen. Opdracht opslaan in Photoshop Sla je animatie op als instastory-eigennaam.psd (bestand – opslaan als) en exporteer het bestand als instastory-eigennaam.gif: Bestand – exporteren – opslaan voor web (verouderd) – gif Opdracht plaatsen in Portfolio in InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar instastory.eigennaam.pdf – geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren

Page 22: INHOUD - WordPress.com · Vormmodi en Pathfinders maak je zichtbaar door het maken van gaten en uitsnedes in de standaard vormen. Deze moeten dus ook terug te zien zijn in jouw robots.

DIGITALE VORMGEVING 22

PROMOTIE INSTAGRAM Maak een story met minimaal 4 frames met verschillende vrijgezette beelden van een product. Dit kunnen variaties zijn in positie, detail of kleurvariatie. Bestandsgrootte en -formaat Omdat een animatie alleen geschikt is voor beeldschermgebruik mag hij niet te groot zijn. Kies voor: Hoogte 1920 pixels – Breedte 1080pixels – Resolutie 72 pixels per Inch. Je kunt het formaat dan later nog bijsnijden naar wens. Voor beeldschermkleuren gebruik je RGB. Lagen Een story kan opgebouwd worden in frames. In ieder frame kun je een ander beeld laten zien. Hiervoor maak je eerst een Photoshop-document met de abeeldingen die je wilt laten zien op aparte lagen. Maak ook een aparte laag voor de achtergrond en eventuele banner.

Voorbeeld van verschillende lagen Tijdlijn Vink alle lagen uit met uitzondering van de Achtergrond. Kies in de Menubalk voor Venster – Tijdlijn . Klik daarna nog een keer op de tekst Frameanimatie maken. Maak een nieuw Frame aan door te klikken op het Icoon Dupliceer geselecteerde frames. Maak 2 nieuwe frames. In het eerste frame zie je alleen de achtergrond en het logo. Klik in het 1e frame. Vink het oogje voor de Laag met het 1e Deel aan. Klik in het 2e frame. Vink het oogje voor de Laag met het 2e Deel aan. Etc. Animeren Nu alle frames gevuld zijn kun je de animatie afmaken.: Zet alle frames op 0,5 seconde. Links onderin de tijdlijn staat het woord Altijd. Dit kun je wijzigen in het aantal keren dat de animatie afgespeeld moet worden. Laat de animatie op Altijd staan. Opslaan Sla het bestand op als promotie-instagram-eigennaam.psd Kies voor Bestand – Exporteren – Opslaan voor web: promotie-instagram-eigennaam.gif Opdracht plaatsen in Portfolio in InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar promotie-instagram.eigennaam.pdf – geef de opdracht een Titel en een Beschrijving. Portfolio opslaan en publiceren

- Ga in de Menubalk naar Bestand– Opslaan - Ga in de menubalk naar Bestand – Publish Online - Vink aan Bestaand document bijwerken - Klik op Publiceren