27

INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat
Page 2: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 2

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

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

PRODUCTSELECTIE........................................................................................................................................................... 5

PRODUCTANIMATIE ......................................................................................................................................................... 8

BANNERS ........................................................................................................................................................................ 10

FLAT LAY ......................................................................................................................................................................... 12

KWARTETSPEL WINKELCONCEPTEN ............................................................................................................................. 14

PATRONEN ..................................................................................................................................................................... 17

PENSELEN ....................................................................................................................................................................... 19

ANIMATIE WINKELCONCEPT ......................................................................................................................................... 21

ANIMATIE MET TUSSENFRAMES ................................................................................................................................... 25

ANIMATIE BEWEGENDE KLANT .................................................................................................................................... 27

Page 3: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 3

PLANNING Groep A

klassikaal zelfstandig 1 Selecteren met behulp van pengereedschap

2 Productfoto’s maken

4 Productanimatie

3 Productselectie afronden

5 Banners

6 Flatlay

8 Kwartet

7 Kwartet

9 Patronen en Penselen uitleg

10 Patronen

12 Winkelanimatie

11 Penselen

13 Animatie met tussenframes

14 Winkelanimatie

16 Winkelanimatie met klant

15 Alles afmaken

Groep B

zelfstandig klassikaal 1 Productfoto’s maken

2 Selecteren met behulp van pengereedschap

4 Productselectie afronden en animeren

3 Animatie oefenen met vormen

5 Flatlay

6 Banners

8 Kwartet

7 Kwartet

9 Patronen

10 Patronen en Penselen uitleg

12 Penselen

11 Winkelanimatie uitleg

13 Winkelanimatie

14 Animatie met tussenframes

16 Alles afmaken

15 Winkelanimatie met klant

Page 4: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 4

STUDIEWIJZER DIGITALE VORMGEVING COHORT 2019 LEERJAAR ONLINE DESIGN Context Lessen Digitale vormgeving en Online media. Project Placet to store Items Selecteren en vrijzetten – Animeren – Fotograferen – Fotobewerking – Schalen en compositie - Concept visualiseren Leerdoelen De leerling is in staat om een product te fotograferen, vrij te zetten, het beeld te optimaliseren, van kleur te veranderen, te plaatsen in verschillende banners, in flatlay en in een animatie. De leerling is in staat een concept te visualiseren en te animeren. De leerling maakt hierbij gebruik van onderstaande gereedschappen, technieken en vormgevingselementen: Gereedschappen Gereedschappen InDesign, en Photoshop Technieken Pengereedschap – Rand verfijnen – Niveau en kleur aanpassen – Tijdlijn – Patronen en Penselen definiëren. 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 Productpresentatie 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 · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 5

PRODUCTSELECTIE Maak een productselectie van 2 zelfgemaakte productfoto’s. Verbeter de kwaliteit van de foto’s. Presenteer het uiteindelijke resultaat steeds in een dubbel (before and after) canvas. Foto maken Zet je camera op een hoge kwaliteit. Fotografeer een product met een drukke achtergrond. Je bent vrij in de keuze van je product maar je moet je wel houden aan de volgende criteria:

- De foto moet op 100% minimaal beeldschermvullend zijn. - Het product moet gefotografeerd worden op een drukke achtergrond.

De reden hiervoor is dat we je willen leren werken met het gereedschap Pen. Selectie met het toverstafje of snelle selectie mogen niet mogelijk zijn.

- Maak meerdere foto’s (vanuit verschillende invalshoeken, een totaalbeeld, details). - Stel je camera scherp door eerst op je camerascherm te klikken op het product.

Canvas verdubbelen voor een Before en After Open de foto die je wilt bewerken. Kopieer de fotolaag. Klik op Afbeelding, Canvasgrootte. Vink aan Relatief. Typ bij Breedte, de oorspronkelijke breedte van de foto (als je het werkblad breder wilt maken) of bij Hoogte de oorspronkelijke hoogte van de foto (als je het werkblad hoger wilt maken). Klik op het linker (breder) of onderste pijltje (hoger) zodat de extra breedte er rechts of beneden bij komt. Verplaats de kopie naar de rechter-laag OF onderste laag. Typ links Before en rechts of onder After.

Page 6: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 6

Foto Verbeteren Verbeter de kwaliteit van de foto met Niveaus. Klik op Ctrl + L Er verschijnt nu een venster met een curve. Schuif de buitenste driehoekjes naar het midden zodat de platte lijnen van de curve verdwijnen.

Maak een selectie van het product met behulp van het Pengereedschap Controleer in de Optiebalk of de instellingen juist zijn. Het pengereedschap moet staan op Pad in plaats van op Vorm of Pixels.

Klik ergens aan de rand van het product dat je wilt selecteren.

Klik één keer op de rand, er ontstaat een Ankerpunt. Klik daarna op een volgende plek. Laat de cursor niet los, maar trek hem opzij zodat je een bocht kunt maken. Laat de muis los als je tevreden bent. Maak een

volgend punt op dezelfde wijze. Teken met de pen om het product tot je weer bij het beginpunt bent. Maak nu gebruik van het gereedschap Directe Selectie (witte pijl). Klik met de witte pijl op het pad dat je met het pengereedschap getekend hebt. Zoom in en bekijk alle ankerpunten van dichtbij. Met de witte pijl kun je correcties uitvoeren door de Ankerpunten en de Handels te verschuiven. Als je tevreden bent klik je weer op het pennetje en daarna op Rechtermuis. Kies voor Selectie maken. Afhankelijk van je product kies je voor het aantal bij de Doezelrand. Voor een product van een hard / strak materiaal zoals ijzer, plastic of porselein kies je voor 0 pixels. Voor een product van een zacht materiaal zoals een wollen trui of een pluche beest kies je voor meer pixels. Klik op Ctrl + J om de selectie te kopiëren en te plakken in een nieuwe laag.

Rand verfijnen Om de randen vloeiender te laten verlopen kun je Rand verfijnen toepassen: Klik op het Laagicoon van de laag met de productfoto en houd daarbij de Ctrl-toets ingedrukt. Het product is nu geselecteerd. Kies je in de Optiebalk voor Selecteren - Selecteren en maskeren. Kies voor een weergavemodus waarbij de randen duidelijk in beeld komen. Maak de rand vloeiender door de het driehoekje naar rechts te schuiven. Klik op ok. Je bent nu terug in je standaard scherm. Het product is geselecteerd. Klik op Ctrl + J om de selectie te kopiëren en te plakken in een nieuwe laag. Vink het Oogje bij de oorspronkelijke laag uit. Je kunt het resultaat nu bekijken.

Page 7: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 7

Slagschaduw Geef je product een slagschaduw: Klik op de laag van het product – kies onder aan het lagenpallet voor Laagstijl – Slagschaduw. Herhaal deze selectieopdracht voor de 2e foto van je product. Opslaan Productselectie in Photoshop Sla de bestanden op als: productselectie- eigennaam1.psd en productselectie- eigennaam1.jpg. productselectie- eigennaam2.psd en productselectie- eigennaam2.jpg.

Opslaan Uitgesneden product in Photoshop Voor de opdracht animatie heb je het uitgesneden product zonder achtergrond nodig: Verwijder de originele foto en de teksten. Snijd het document op maat: Gebruik hiervoor het gereedschap Uitsnijden. Sla het uitgesneden product op als PNG: Bestand – Opslaan als – PNG Productselectie1-eigennaam. Doe dit ook voor Productselectie 2 Opdracht Productselectie plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar productselectie1-eigennaam.png– geef de opdracht een Titel en een Beschrijving. Doe dit ook voor Productselectie 2.

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 8: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 8

PRODUCTANIMATIE

Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond..

Bestandsgrootte en -formaat Omdat een animatie alleen geschikt is voor beeldschermgebruik mag hij niet te groot zijn. Kies voor: Hoogte 1500 pixels – Breedte 1500 pixels – Resolutie 72 pixels per Inch. Je kunt het formaat dan later nog bijsnijden naar wens. Voor beeldschermkleuren gebruik je RGB. Lagen Een animatie kan opgebouwd worden in frames. In ieder frame kun je een ander beeld laten zien. Hiervoor maak je eerst een Photoshop-document met de uitgesneden producten op een aparte laag. Maak ook een aparte laag voor de achtergrond en het logo.

Tijdlijn Vink alle lagen uit met uitzondering van de Achtergrond en het Logo. Kies in de Menubalk voor Venster - Tijdlijn. Klik daarna nog een keer op de tekst Frameanimatie maken. Je tijdlijn ziet er nu als volgt uit:

Page 9: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 9

Maak een nieuw Frame aan door te klikken op het Icoon Dupliceer geselecteerde frames. Maak 1 nieuwframe het oogje voor de Laag met het 1e Product aan. Klik in het 2e frame. Vink het oogje voor de Laag met het 2e Product aan. Animeren Nu alle frames gevuld zijn kun je de animatie afmaken.: Zet alle frames op 1 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 / Exporteren in Photoshop Sla het bestand op als Photoshop-document zodat je het eventueel nog kunt veranderen: productanimatie-eigennaam.psd Sla het bestand op als Animated gif: Kies voor Bestand – Exporteren – Opslaan voor web: productanimatie-eigennaam.gif

Opdracht plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar productanimatie-eigennaam.gif – 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 10: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 10

BANNERS Maak in InDesign3 banners in het formaat medium rectangle, mobile banner en Leader board.

Een banner is een reclame-uiting (met doorklik-mogelijkheid) op internet. Meestal een combinatie van afbeeldingen en teksten. De banner kun je gebruiken om te adverteren voor bijvoorbeeld een product of een evenement. Wat de inhoud is van je banner is afhankelijk van je doel. Een banner plaats je op een plaats waar de beoogde doelgroep actief is. Belangrijke bannerformaten De medium rectangle: 300x250 pixels. De mobile banner: 320x50 pixels Leader board: 729 x 90 pixels. InDesign Maak de verschillende banners in InDesign. Ga uit van de bovengenoemde formaten. Kies voor Nieuw bestand – Web Marges, Afloop en Witruimte: 0 Inhoud - Foto van het product - Logo van het product of de winkel - Prijs of actie-aanbod - Call to action

Page 11: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 11

Opslaan / exporteren in InDesign Sla het bestanden op als InDesign-bestand banner-mediumrectangle-eigennaam.indd, banner-leaderboard-eigennaam.indd, banner-mobile-eigennaam.indd Sla de bestanden ook op als JPG: Bestand – Exporteren - JPG banner-mediumrectangle-eigennaam.jpg, banner-leaderboard-eigennaam.jpg, banner-mobile-eigennaam.jpg

Opdracht plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar banner-mediumrectangle-eigennaam.jpg, banner-leaderboard-eigennaam.jpg, banner-mobile-eigennaam.jpg Geef de opdrachten 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 · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 12

FLAT LAY

Maak een flatlay voor Instagram op basis van de 4 zelfgemaakte foto’s en 4 bestaande digitale foto’s . Verwijder de achtergrond van alle foto’s. Maak gebruik van Aanpassingen en Filters. Maak een evenwichtige compositie en creëer eenheid. Een flatlay is een foto van een verzameling voorwerpen die recht van boven genomen is. Veel voorkomende onderwerpen voor een flat lay: Food, Fashion, Make-up, Stationery, Color. De compositie van de spullen is wisselend van nonchalant tot zorgvuldig georganiseerd, van rustig tot heel druk.

@flatlay.your.day

@flatlayfashion @gorodnitskaya @charuca @natalia_kruta

Tips (bydesignstorys.nl)

1. Zorg voor een effen ondergrond. Gebruik grote vellen papier in wit of diverse kleuren. Hout is ook altijd goed als ondergrond.

2. Gebruik daglicht (geen direct zonlicht!). Zorg dat je niet met je rug naar het licht staat. Gebruik eventueel een wit vlak om het licht te reflecteren.

3. Zorg voor voldoende witruimte tussen en om de objecten zodat het er niet te opgepropt uitziet.

4. De camera van een IPhone kun je op vierkant zetten. Superhandig omdat je hiermee meteen ziet of het geheel mooi uitkomt in een vierkant.

5. Ga op een stoel of tafel staan om de foto echt recht van boven te nemen. 6. Maak een paar foto’s en bekijk die dan. Op een foto zie je pas of alles goed ligt.

Fotoselectie Verwijder de achtergrond van de door jou gemaakte foto. Zoek 4 bijpassende voorwerpen (ook van boven gefotografeerd). Verwijder wanneer nodig de achtergrond, Zoek een bijpassende achtergrond.

Page 13: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 13

Fotobewerking Controleer bij iedere foto of de kwaliteit verbeterd kan worden: Klik in het menu Lagen op Nieuwe aanpassings-laag. Kies voor Niveau’s. In het venster zie je een Curve. Sleep de pijltjes links en rechts van de curve tot het begin en het einde van de curve. De foto verbetert nu van kwaliteit. Als de curve tot aan de uiteinden loopt kun je niets verschuiven / verbeteren.

Maak nog een nieuwe aanpassings-laag. Kies nu voor Kleurtoon-Verzadiging. Hiermee kun je kleuren intenser of juist minder kleurrijk maken (minder verzadiging geven). Probeer door middel van dit gereedschap meer eenheid in de verschillende foto’s te creëren.

Criteria Communicatieve waarde, lay-out, compositie, uitlijning , eenheid in stijl, kwaliteit van afbeeldingen, uitwerking, originaliteit. Opslaan in Photoshop Sla het bestand op als: flatlay-eigennaam.psd en flatlay-eigennaam.jpg Opdracht plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar flatlay-eigennaam.jpg – 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 · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 14

KWARTETSPEL WINKELCONCEPTEN Ontwerp een gedeelte van een kwartetspel (2 x 4 kaarten) van verschillende winkelconcepten volgens onderstaande richtlijnen. Richtlijnen Kies 2 winkelconcepten uit onderstaand schema. Maak voor ieder concept een kwartetserie van 4 kaarten. Verschillende winkelconcepten

Conceptnaam

kenmerken voorbeelden

Persoonlijk

Persoonlijke selecties assortiment (smaak en karakter ondernemer) (Fictief)Persoon is het merk

PietHein Eek - YOUR – Paul Smith – Stella McCartney – Nikki

Sociaal verantwoordelijk

Gericht op de maatschappij Kritisch op sociaal vlak Betrokken bij goede doelen

Charlie & Mary – Bodyshop – Wereldwinkel – Benneton – Camper – School of life

Discount

Superdiscount: alleen prijs - Hippe discount: prijs + eigenheid - Alleen eigen merk

Action – Target – Aldi – Primark – Tiger – H&M

Innovatief Specifiek, uniek, experimenteel Koploper nieuwe ontwikkelingen

Ace & Tate – Zoomers city-experience - Aesop – Nespresso – Threadless - Stone Island

Authentiek New classic: eigenzinnig, eigentijds Oprecht en geloofwaardig Storytelling: oprecht verhaal

Sandwich – Hype heroes - Burberry – Dille & Kamille - Anthropologie

Sophisticated Gericht op het hoogste segment Theatraal: the store as a stage Winkel is een showroom

Gucci – Hermès – Prada – Armani - Desigual – Brunello Cucinelli - Westside

Robuust Avontuurlijk , krachtig en stoer Mannelijk, rationeel en handig

Moose in the City – Ubxtreme – Hornbach - Gamma

Modisch Up to date: gericht op een specifieke doelgroep Trendy & hip: gericht op trendsetters

The Girl Can't Help It - Hollister – TopShop – Zara – Monki – Essentiel – Clinic – Urban Outfitters

Overvloed Letterlijk: Veel producten in de winkel Figuurlijk: Het product speelt de hoofdrol in de styling van de winkel

Uniglo – MediaMarkt – HEMA – Jumbo – loods 5

Experience Producten laten beleven. Klant optimaal laten genieten. Veel klantonderzoek - Winkel als servicecentrum.- Inspelen op trends.

Coolblue – Story – Zara -Apple -Samsung experience store

Pop-up Tijdelijke winkel (leegstaande panden , containers). Gericht op een specifieke doelgroep / moment. Vernieuwend / verrassend .

Zalando – Nike (Air Max Day) – Magnum – H&Mbeach - Beatles pop-up store

Huiskamer Shoppers een aangenaam gevoel te geven. Eten, drinken, ontspannen en winkelen.

Robbies – Villa Augustus – Club Monaco – bij Nett Livestiye

Page 15: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 15

Per serie maak je 4 kaarten waarin je 4 kenmerken en/of voorbeelden van een winkelconcept visualiseert (in beeld brengt). Het gaat om eigen bewerkingen in de vorm van selecties, maskers, kleurbewerkingen, filters, aanpassingen of effecten. Bestandsformaat Maak een nieuw document in Photoshop: Drukwerk – A4 Teken een kader met het Gereedschap Kader Hoogte 98mm – Breedte 76 mm. In het Venster – Eigenschappen kun je de exacte maten opgeven, Kopieer en plak het kader 3 keer. Plaats de kaders in het midden van de pagina.

Foto’s selecteren en plaatsen Verzamel 4 foto’s die passen bij het door jou gekozen concept. Zorg ervoor dat de kenmerken van het concept in de foto te zien zijn. Op de foto mag geen copyright zitten! Klik op 1 van de kaders. Kies voor Bestand – Plaatsen – Ingesloten plaatsen.

Foto’s bewerken Maak een nieuwe aanpassings-laag. Kies nu voor Kleurtoon-Verzadiging. Hiermee kun je kleuren intenser of juist minder kleurrijk maken (minder verzadiging geven). Probeer door middel van dit gereedschap meer eenheid in de verschillende foto’s te creëren.

Page 16: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 16

Inhoud - Op iedere kaart de naam van het concept (persoonlijk -sociaal – innovatief – etc.). - Per kaart het logo of de naam van de betreffende winkel in het groot. - Op iedere kaart de resterende 3 logo’s of namen van de overige winkels in het klein. - Kleuren, lettertypes en illustraties afgestemd op het gekozen concept.

Opslaan in Photoshop. kwartet-serie1-eigennaam.psd en kwartet-serie1-eigennaam.pdf Doe hetzelfde voor serie 2. Opdrachten plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar kwartet-serie1-eigennaam.jpg – geef de opdracht een Titel en een Beschrijving. Doe hetzelfde voor serie 2. 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 · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 17

PATRONEN Maak voor 1 winkelconcept een Patroon dat te gebruiken is op verschillende promotiemiddelen. Techniek Patroon definiëren In het kader van je winkelconcept wil je ook je een tas, een label en een inpakpapier maken. Hiervoor moet je uiteraard eerst wat ontwerpen maken om aan de eigenaar/ bedrijfsleider voor te leggen.

Make-over-document - Maak een nieuw bestand (A5). - Plaats hierop een foto van een neutrale papieren tas. - Verwijder de achtergrond van de tas.

Patroon maken Om de neutrale tas te voorzien van een ander papier ga je zelf een patroon maken.

- Bedenk de stijl (trendy & hip, mannelijk, vernieuwend, verrassend etc.). Uiteraard sluit je aan bij de gemaakte stijlkeuzes in de vorige opdrachten.

- Maak een nieuw document (500px – 500px). - Maak of zoek vormen of afbeeldingen die bij deze stijl passen. - Selecteer de afbeelding(en) die je hebt gemaakt of gevonden en plaats deze met behulp van

Ctrl J in je nieuwe document. - Selecteer de afbeelding door te klikken op Selecteren – Alles. - Ga naar Bewerken – Patroon definiëren – typ een naam – ok.

Page 18: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 18

Patroon verwerken - Ga terug naar je Make-over-document. - Selecteer de tas. Dit kun je doen door op het icoontje van de

laag te klikken met de CTRLtoets ingehouden. - Klik op het emmertje. - Kies in de optiebalk voor patroon. - Kies voor het juiste patroon.

- Maak een nieuwe laag !!! - Klik met het emmertje in de selectie.

Je ziet nu het patroon in de vorm van je tas.

Het patroon moet nu nog onderdeel gaan worden van de papieren tas. Dit doe je als volgt:

- Verander de Overvloeimodus (bovenin het lagenmenu) van normaal naar bijvoorbeeld Kleur doordrukken. Het is moeilijk exact aan te geven welke overvloeimodus het best werkt. Dat is afhankelijk van de afbeelding van de tas en van het patroon. - Om de uiteindelijke kleur aan te passen aan je kleurenpalet gebruik je CTRL+U.

Opslaan in Photoshop patroon--eigennaam.psd en patroon-eigennaam.jpeg Opdrachten plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar patronen-eigennaam.jpg – 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 19: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 19

PENSELEN Maak voor 1 winkelconcept een Penseel ldat te gebruiken is op verschillende promotiemiddelen.

Techniek Penseel definiëren Een brush/penseel in Photoshop is er in vele soorten en maten. Van figuren tot logo’s. Make-over-document

Maak een nieuw bestand (A5). Plaats hierop een foto van een inpakpapier, een papieren tas of een label. Verwijder de achtergrond. Maak een nieuw document, formaat A5. Open een afbeelding die je om wil zetten in een penseel. Dit kan echt alles zijn, van een foto tot een illustratie. Sluit aan bij de gemaakte stijlkeuzes in de vorige opdrachten.

Penseel definiëren Selecteer met het rechthoekig selectiekader of de lasso één figuur of logo.

Kies voor Bewerken, Voorinstelling penseel definiëren . Stempelen in de afbeelding Je kunt nu de zelf gemaakte penselen gebruiken. Kies in de gereedschapsbalk Penseel. Klik in de optiebalk op het venster onder het woord Bestand om de verschillende penselen te openen. De nieuwe penselen staan altijd als laatste in het venster penselen. Kies een penseel die je zelf gemaakt hebt. Stempel met verschillende figuren/afbeeldingen en logo’s nu in een Nieuwe Laag!!!

Page 20: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 20

Plaats deze nieuwe laag met stempels die samen een patroon vormen boven de tas, het inpakpapier of het label in je document. Maak de afbeelding (met penselen) groter dan de papieren tas. (CTRL+T) Selecteer de papieren tas door met de CTRL toets ingedrukt op het laagicoon te klikken. Ga op de laag met de penselen staan en klik op CTRL+J. De selectie wordt nu gekopieerd en geplakt op een nieuwe laag. Verwijder de oorspronkelijke penselenlaag. Je hebt nu een penselenlaag in de vorm van de onderliggende laag. Verbind de textuurafbeelding met de tas, het inpakpapier of het label door de overvloeimodus te veranderen. Om de uiteindelijke kleur aan te passen aan je kleurenpalet gebruik je Ctrl + U.

Opslaan in Photoshop. penseel -eigennaam.psd en penseel-eigennaam.jpeg Opdrachten plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar penselen-eigennaam.jpg – 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 21: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 21

ANIMATIE WINKELCONCEPT

Maak voor het gekozen winkelconcept een animatie met minimaal 6 frames. Per frame wordt een ingrediënt aan de lege winkel of pop-up store toegevoegd.

Nieuw bestand Maak een nieuw bestand: Breedte 1200 pixels – Hoogte 800 pixels – Resolutie 72 pixels/inch

Afbeeldingen Plaats een afbeelding van een lege winkel in je bestand.

Ga op zoek naar afbeeldingen van objecten of versieringen die in de lege winkel geplaatst kunnen worden. Uiteraard houd je je hierbij weer aan de regels van copyright. Eigen foto’s hebben de voorkeur.

Wat moet er zeker in de winkel staan::

- Wanddecoratie - Vloerdecoratie - Meubilair (kassa – pashokjes – Rekken, Stellage, podia etc. voor producten) - Belichting - Producten!!!!!!

Decoreren van wanden en vloeren Om de wanden en vloeren van een kleur, een patroon of een afbeelding te voorzien kun je als volgt te werk gaan:

1 Maak een nieuwe laag boven de afbeelding met de empty store. 2 Plaats daarin de afbeelding, de kleur of het patroon waarmee je de wanden wilt decoreren.

Page 22: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 22

3 Vink het oogje voor de nieuwe laag uit om een selectie te kunnen maken van de wanden 4 Vink de nieuwe laag weer aan en klik op Ctrl + J (kopiëren en plakken in een nieuwe laag).

5 Vink de laag met de volledige decoratie uit. Je ziet nu alleen het gekopieerde gedeelte.

6 Gebruik de Overvloeimodus om de lagen met elkaar te verbinden.

Perspectief Voor de vloer kun je hetzelfde te werk gaan. Zorg ervoor dat je ook perspectief aanbrengt. Dit kun je doen door: Ankerpunten in beeld te brengen: Ctrl + T Aan de Hoekankers te slepen met de Ctrl-toets ingehouden.

Page 23: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 23

De pilaren zijn behouden door: - Selectie van de pilaren. - Kopiëren en plakken van de pilaren in een nieuwe laag. Ook hier kun je weer gebruik maken van de Overvloeimodus om een realistischer effect te krijgen.

Plaats nu ook de overige objecten in je winkelpand. Neem hiervoor steeds een nieuwe laag!

Animatie Kies in de Menubalk voor Venster / Window – Tijdlijn / Timeline. Open het venster Tijdlijn. Kies voor Frameanimatie. Klik daarna nog een keer op de tekst Frameanimatie maken.

Zorg ervoor dat alleen de laag met de lege winkel zichtbaar is. Maak een nieuw Frame aan door te klikken op het Icoon Dupliceer geselecteerde frames. Klik in dit 2e frame. Vink het oogje voor de Laag met het vloerbedekking aan. Maak weer een nieuw frame aan en maak de volgende laag zichtbaar. Ga hiermee door tot alle objecten in de winkel zichtbaar zijn.

De elementen die de animatie in ieder geval moet bevatten: - Wanddecoratie - Vloerbekleding - Verlichting - Producten - 3 Meubelstukken of andere objecten (kassa, pashokje, kledingrek, plant, etc.) - Logo / naam van de winkel

Page 24: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 24

Tijd instellen Nu alle frames gevuld zijn kun je de animatie afmaken.: Onder ieder frame staat een getal, dit staat voor het Aantal seconden dat het frame te zien is. Zet alle frames op 2 seconde. Links onderin de tijdlijn staat het woord Altijd / For-ever. Dit kun je wijzigen in het aantal keren dat de animatie afgespeeld moet worden. Zet de animatie op 1 keer.

Opslaan / exporteren in Photoshop Sla het bestand op als Photoshop-document zodat je het eventueel nog kunt veranderen: winkelanimatie-eigennaam.psd Sla het bestand ook op als Animated gif: Kies voor Bestand – Exporteren – Opslaan voor web: winkelanimatie-eigennaam.gif

Opdrachten plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar winkelanimatie-eigennaam.gif – 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 25: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 25

ANIMATIE MET TUSSENFRAMES Maak een animatie van een voertuig dat door een landschap rijdt in een vloeiende beweging. Animatie Landschap - Maak een nieuw bestand: 800 px breed – 400 px hoog – Kleur RGB – 72 px/inch. - Zoek een Afbeelding van een Landschap met een boom of een ander object waarin een voertuig

kan bewegen. Plaats de afbeelding in het nieuwe bestand

- Selecteer de boom of het door jou gekozen object. Kopieer en Plak de selectie op een Nieuwe laag

(Ctrl + J). - Zoek een Afbeelding van een Voertuig.

Selecteer het voertuig en verwijder de achtergrond. Plaats de Laag boven de achtergrond.

- Open het Animatiemenu: Venster – Tijdlijn of Animatie. Zet de Tijdlijn in het Animatievenster op Frame-animatie.

- Klik in het 1e frame. Maak in het Lagenvenster de lagen met het landschap, de boom of het object en het voertuig zichtbaar. Plaats het voertuig bijna helemaal naast de afbeelding waardoor het lijkt dat het voertuig de afbeelding binnen komt rijden/varen.

Page 26: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 26

- Kopieer dit frame door op het Kopieericoontje te klikken. Klik in het 2e frame. Verander niets aan de zichtbaarheid van de lagen. Verschuif het voertuig helemaal naar de andere kant zodat hij bijna uit het landschap verdwijnt. Zorg er voor het voertuig achter de boom/object gaat.

- Zet de speeltijd op 0 seconde {geen vertraging}. Kies voor speelduur 1 maal

- Om de veranderingen tussen de frames vloeiend te laten verlopen moet je Extra Frames tussenvoegen: Dit doe je door te klikken op Tussenvoegen frames. Kies voor Positie. Kies voor 25 extra frames.

- Klik op Play om je animatie te bekijken en eventueel aan te passen. - Sla de animatie 2 keer op:

Als PSD zodat je nog wijzigingen kunt aanbrengen: eigennaam-animatie-voertuige.psd Als Gif in het menu Bestand - Opslaan voor web en apparaten: eigennaam-animatie-voertuig.gif

Opslaan / exporteren in Photoshop Sla het bestand op als Photoshop-document zodat je het eventueel nog kunt veranderen: tussenframes-eigennaam.psd Sla het bestand ook op als Animated gif: Kies voor Bestand – Exporteren – Opslaan voor web: tussenframes-eigennaam.gif

Opdrachten plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar winkelanimatie-eigennaam.gif – 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 27: INHOUD - WordPress.com · 2019-11-09 · Maak een animatie met 2 frames met 2 losgesneden beelden van je product, een bijbehorend logo en een achtergrond.. Bestandsgrootte en -formaat

DIGITALE VORMGEVING 27

ANIMATIE BEWEGENDE KLANT Maak een animatie met tussenframes waarin een klant door een winkel beweegt. - Open de Winkelanimatie uit de vorige opdracht. - Verwijder alle frames behalve de laatste. - Zoek of maak een persoon (klant) die past bij het winkelconcept.

Verwijder wanneer nodig de achtergrond van de persoon. - Laat de klant door de winkel bewegen. Gebruik hiervoor de techniek Animatie-tussenframes zoals

beschreven bij Animatie-tussenframes. - Er moet tenminste 1 voorwerp zijn dat voor de bewegende klant staan. - Klik op Play om je animatie te bekijken en eventueel aan te passen.

Opslaan / exporteren in Photoshop Sla het bestand op als Photoshop-document zodat je het eventueel nog kunt veranderen: klant-eigennaam.psd Sla het bestand ook op als Animated gif: Kies voor Bestand – Exporteren – Opslaan voor web: klant-eigennaam.gif

Opdrachten plaatsen in Portfolio In InDesign Open het bestand Portfolio – klik op een Lege pagina – kies voor Bestand – Plaatsen – blader naar klant-eigennaam.gif – 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