DIGITALE VORMGEVING 2

INHOUD

INHOUD ................................................................................................................................................... 2

STUDIEWIJZER DIGITALE VORMGEVING COHORT 2017 LEERJAAR 2 PERIODE 1 ..................................... 3

INLEIDING ................................................................................................................................................ 4

Opdracht 1 STIJLBORD ............................................................................................................................. 5

Opdracht 2 VERVORMEN en UITSNIJDEN oefening voor ICONEN .......................................................... 7

Opdracht 3 BUTTONS & ICONEN ........................................................................................................... 11

Opdracht 4 PRODUCTSELECTIE .............................................................................................................. 14

TIPS PRODUCTFOTOGRAFIE ................................................................................................................... 13

Opdracht 5 PRODUCTANIMATIE ............................................................................................................ 16

Opdracht 6 FLAT LAY .............................................................................................................................. 18

DIGITALE VORMGEVING 3

STUDIEWIJZER DIGITALE VORMGEVING COHORT 2017 LEERJAAR 2 PERIODE 1

Context Opdrachten op het gebied van Digitale Vormgeving ter ondersteuning van het project “Online media en marketing”. Toepassingen Stijlbord, Iconen/buttons voor website en social media, Productselectie, , Productanimatie, Flatlay Leerdoelen De leerling oriënteert zich op de afstemming van een website en webshop op de Doelgroep, Kernwaarden en Huisstijl door middel van het aanpassen van Typografie, Kleuren, Stijlelementen, Foto(‘s) van het product, algemene en social media buttons. De leerling is in staat afbeeldingen te maken en te bewerken voor het gebruik in een webshop, website en voor Instagram. De leerling maakt hierbij gebruik van onderstaande gereedschappen, technieken en vormgevingselementen: Gereedschappen Photoshop-gereedschappen Technieken Selecteren, animeren, werken met vormen, lettertypes, filters, iconen maken. Vormgevingselementen Communicatieve waarde, lay-out, compositie, uitlijning , eenheid in stijl, kwaliteit van afbeeldingen, uitwerking, originaliteit. Relatie met het examen B1-K2-W6 Ontwikkelt en beheert voorlichtings-, promotie- en pr-materiaal B1-K2-W7 Verzorgt de informatie op internet en intranet en onderhoudt de website P1-K2 Assisteert bij het verzorgen van de corporate informatie Leeractiviteiten Het maken van de volgende producten: Stijlbord, Iconen / Buttons, Productselectie, Productanimatie en flatlay Tijd - 2 uur per week lesactiviteiten; - 1 periode van 9 weken Leermiddelen Reader Digitale Vormgeving Leerjaar2 Periode 1 Voortgang en beoordeling Het beoordelen van een gevraagd product gebeurt aan de hand van criteria zoals vermeld in de reader en toegelicht / aangevuld door de docent. Daarnaast is ook de procesbeoordeling van belang. Wat wordt hierbij beoordeeld: Aanwezigheid / actieve werkhouding: -Mogelijkheid tot samenwerking -Aanvullingen op en uitleg van de leerstof -Groeps- en individuele begeleiding bij het toepassen van de leerstof -Voorbeelden zien / leren van je klasgenoten. Leerbaarheid en leerproces: -Kun je samenwerken -Kun je reflecteren -Sta je open voor feedback -Neem je feedback mee in je leerproces. Producten moet gefaseerd (niet allemaal aan het einde van de periode) worden ingeleverd. Per periode mogen maximaal 3 producten herkanst worden.

DIGITALE VORMGEVING 4

INLEIDING

De opdrachten in deze reader hebben als doel:

- Ondersteuning van het project Online Marketing - Aanleren en toepassen van technieken Photoshop - Leren en toepassen uitgangspunten vormgeving - Ontwikkelen eigen stijl in vormgeven

De onderdelen die aan bod komen zijn:

- Webdesign door middel van de opdracht Stijlbord - Ontwerpen van buttons en iconen voor sites en social media door middel van de opdrachten

o Vervormen van vormen, afbeeldingen en tekst o Buttons & Iconen.

- Presenteren van producten in een webshop door middel van de opdrachten o Productselectie o Productanimatie

- Instagram fotobewerking door middel van de opdracht Flatlay

DIGITALE VORMGEVING 5

Opdracht 1 STIJLBORD

Maak van 2 zeer verschillende sites een screenshot van de homepage. Maak van iedere pagina een stijlbord.

Inhoud Onderdelen die in het stijlbord aan bod moeten komen:

- Doelgroep (tekst en beeld) - Minimaal 3 kernwaarden - Logo - Typografie - Minimaal 3 Kleuren - 2 Stijlelementen - Foto(‘s) van het product - 1 algemene en 2 social media buttons in de huisstijlkleuren

Houd de stijl en sfeer van je screenshot aan maar gebruik andere afbeeldingen. Formaat Hoogte: minimaal 1200 pixels – Breedte minimaal 485 pixels – Resolutie: 72 dpi. Breder of hoger mag, kleiner niet. Verhoudingen mogen ook afwijken. Opslaan Sla de bestanden op als: eigennaam-screenshot1.psd en eigennaam-screenshot1.jpg. eigennaam-stijlbord1.psd en eigennaam-stijlbord1.jpg. eigennaam-screenshot2.psd en eigennaam-screenshot2.jpg. eigennaam-stijlbord2.psd en eigennaam-stijlbord2.jpg.

DIGITALE VORMGEVING 6

DIGITALE VORMGEVING 7

Opdracht 2 VERVORMEN en UITSNIJDEN oefening voor ICONEN

2a Vervorm een Vorm door middel van de techniek Direct selecteren.

Maak een nieuw bestand: 800 pixels – 800 pixels – 72dpi. Teken een vorm met het gereedschap Vorm / Shape. Kopieer de vorm en plaats beide vormen naast of onder elkaar. Klik op 1 van beide vormlagen. Kies het gereedschap Direct selecteren (witte pijltje). Klik op de rand van de vorm, Er worden nu ankerpunten en handels zichtbaar. Door deze te bewegen verandert de vorm.

Sla het bestand op als eigennaam-vorm-vervormen.psd en eigennaam-vorm-vervormen.jpg

2b Vervorm een Afbeelding door middel van de technieken Pad maken en Direct selecteren.

Maak een nieuw bestand: 800 pixels – 800 pixels – 72dpi. Plaats een grafische afbeelding (geen foto). Kopieer de afbeeldingslaag met CTR+J. Plaats de afbeeldingen naast of onder elkaar. Selecteer 1 afbeeldingslaag door met de Ctrl-toets ingehouden te klikken op het laagicoon. Open het Venster / Window – Paden / Paths. Kies voor Tijdelijk pad maken De afbeelding heeft nu ankerpunten en handels.

DIGITALE VORMGEVING 8

Verander de vorm met het gereedschap Direct selecteren. De rand verandert nu wel maar de vulling nog niet. Kies in het lagenpalet voor een Nieuwe laag. Kies in het menu Paden / Paths voor Pad vullen. Vink de onderliggende laag uit.

Sla het bestand op als eigennaam-qfbeelding-vervormen.psd en eigennaam-afbeelding-vervormen.jpg

DIGITALE VORMGEVING 9

2c Vervorm een Tekst en door middel van de technieken Tekst omzetten in een pad en Direct selecteren.

Maak een nieuw bestand: 800 pixels – 800 pixels –72dpi. Typ een tekst. Kopieer de tekstlaag en plaats beide teksten onder elkaar. Check in het Venster Teken / Window Character of vetgedrukt uit staat. Klik met de rechtermuis op de tekstlaag- Kies voor Omzetten in vorm / Convert to shape. Vervorm de tekst met het gereedschap Direct selecteren. Sla het bestand op als eigennaam-tekst-vervormen.psd en eigennaam-tekst-vervormen.jpg

2c Maak een uitsnede uit een vorm met de technieken Vorm omzetten naar Pixels en Laag selecteren.

Maak een nieuw bestand: 800 pixels –800 pixels – 72 dpi. Plaats de veranderde Vorm uit de opdracht Vorm Vervormen in het nieuwe bestand. Klik met de rechtermuis in de laag en kies voor Vorm omzetten naar pixels / Rasterize shape Kopieer de vorm en plaats deze naast of onder de andere. Plaats de veranderde Afbeelding uit de opdracht Afbeelding Vervormen boven de vorm.

DIGITALE VORMGEVING 10

Selecteer de Afbeelding door met CTRL ingedrukt op het Laagicoon te klikken. De Afbeelding moet verwijderd worden uit de vorm: Klik op de laag met de vorm. Klik op Delete of Backspace. Er lijkt niets veranderd! De verandering zie je pas als je de laag met de vorm onzichtbaar maakt (oogje uitvinken). Plaats nu een foto achter de vorm zodat goed zichtbaar is dat je een uitsnede hebt gemaakt. Sla het bestand op als eigennaam-uitsnede-vorm.psd en eigennaam-uitsnede-vorm.jpg

2d Maak een uitsnede uit een vorm met de technieken Tekst omzetten naar Pixels en Laag selecteren.

Herhaal bovenstaande opdracht met een tekst in plaats ven een vorm. Sla het bestand op als eigennaam-uitsnede-tekst.psd en eigennaam-uitsnede-tekst.jpg.

DIGITALE VORMGEVING 11

Opdracht 3 BUTTONS & ICONEN

Maak een eigen iconenserie bestaande uit: 1 logo - 1 favicon - 2 navigatiebuttons en 2 social media buttons. Bestaande vormen en iconen mogen gebruikt worden maar moeten zowel in vorm als kleur aangepast worden.

Steeds vaker wordt binnen (web)design gebruik gemaakt van iconen. Informatie wordt op deze manier gevisualiseerd. Hierdoor is het mogelijk op een snelle, duidelijke en vaak ook mooie manier te communiceren.

Voordelen van goede iconen

Het zijn goede ‘targets’: je kunt ze makkelijk aanraken op een touchscreen, maar ook met een muis. Ze besparen veel ruimte op je display. Ze zijn in één oogopslag herkenbaar. Ze zijn universeel, dus je hoeft ze niet te vertalen voor internationale gebruikers. Ze zijn meestal aantrekkelijk om naar te kijken en voegen echt iets toe aan het ontwerp van een pagina of interface. Ze vergroten de herkenbaarheid van een productgroep of merk als dezelfde iconen en stijl worden gebruikt op verschillende plekken. Favicon Een favicon is een icoon voor de url van je website. Bijvoorbeeld

Volledige logo Beeldmerk als favicon

DIGITALE VORMGEVING 12

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/

Navigatiebutton

Dit is een knop zoals home, contact, shop, producten, programma of agenda.

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, arcering, gradiënt, kleurgebruik, lijndikte, tekenstijl, etc. Kleurgebruik De iconen worden opgezet in één kleurvariant (meestal zwart) en kunnen in elke kleur van het huisstijlkleurenpalet gebruikt worden. Er kan ook gebruik gemaakt worden van tinten, arcering en gradiënt. Let wel op voldoende contrastwaarde tussen de kleur van het icoon en de achtergrond kleur. Waar moet je op letten: Als je een icoon van kleur wilt veranderen moet je dat niet met een emmertje of penseel doen. Hoe dan wel: Zorg ervoor dat het icoontje geen achtergrond heeft. Kies vervolgens onderaan in het menu Lagen voor Laagstijl – Kleurbedekking. Oorspronkelijkheid / originaliteit Probeer een specifiek eigen element te verwerken in je ontwerp wat je uiteraard ook weer consequent toepast. Duidelijkheid Liefst vanuit 1 element en zonder tekstuele toevoeging moet duidelijk zijn wat met het icoon bedoeld wordt. Voldoende contrast en een minimum aan details moeten ervoor zorgen dat het icoon in klein formaat nog duidelijk is. Kwaliteit Een icoon van 2,5cm – 2,5cm met een resolutie van 300 dpi moet 100% haarscherp (niet vaag of pixelig) zijn. Uiteraard heeft vector de voorkeur. Rond of rechthoekig Gebruik voor iedere icon dezelfde hoek … allemaal rond of allemaal recht. Als je voor rond kiest moet de ronding (radius) hetzelfde zijn. Tekenstijl (afgestemd op de stijl van je logo). Heb je eenmaal je stijl bepaald, pas deze dan toe op de verschillende buttons.

Sla het bestand op als: eigennaam-iconen.psd en eigennaam-iconen.jpg.

DIGITALE VORMGEVING 13

TIPS PRODUCTFOTOGRAFIE

- Plaats foto’s die groot genoeg zijn om de details te laten zien. - Zorg voor optimale belichting zodat de foto duidelijk is en een juiste kleurweergave heeft.

Daglicht heeft de voorkeur. Het licht mag ook niet te fel zijn waardoor te scherpe schaduwen ontstaan. Reflecteer eventueel het licht met aluminium folie tegenover de lichtbron.

- Laat het product zien vanuit meerdere hoeken. - Focus

Een smartphone heeft een ingebouwde autofocus. Door te klikken op het scherm op je aandachtspunt bepaal je zelf je focuspunt.

- Gebruik als achtergrond een groot vel (wit) papier waarbij de achtergrond en de ondergrond doorlopen (geen vouw of losse vellen).

- Gebruik een statief of zet je camera op een stapel boeken of iets dergelijks om je telefoon te stabiliseren.

- Plaats de camera niet te dicht bij het product zodat het beeld niet vertekend wordt. - Bewerk je foto in Photoshop:

o Verbeter de kwaliteit o Verwijder eventueel de achtergrond,

- Zorg voor eenheid in: o Formaat o Achtergrond o Schaduw o Uitlijning o Witruimte

Dont’s

- Een achtergrond met verloop.

- Slordige achtergrond

- Onderbelicht

- Kleine foto’s (waarbij details niet zichtbaar zijn).

- Foto’s waarvoor je geen toestemming tot publicatie hebt.

Uitlijning

DIGITALE VORMGEVING 14

Opdracht 4 PRODUCTSELECTIE

Maak een productselectie van 4 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. - In tegenstelling tot de tips op de vorige pagina moet het product opgaan in 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

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.

Foto Verbeteren Verbeter de kwaliteit van de foto met Niveaus / Levels. 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.

DIGITALE VORMGEVING 15

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 / Direct Select (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 / Feather. 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 / Refine edge 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.

Slagschaduw Geef je product een slagschaduw: Klik op de laag van het product – kies onder aan het lagenpallet voor Laagstijl – Slagschaduw / Drop shadow Herhaal deze selectieopdracht voor de 4 foto’s van je product. Opslaan Sla de bestanden op als: eigennaam-productselectie1.psd en eigennaam-productselectie1.jpg. eigennaam-productselectie2.psd en eigennaam-productselectie2.jpg. eigennaam-productselectie3.psd en eigennaam-productselectie3.jpg. eigennaam-productselectie4.psd en eigennaam-productselectie4.jpg.

DIGITALE VORMGEVING 16

Opdracht 5 PRODUCTANIMATIE

Maak een animatie met 3 frames met verschillende losgesneden beelden van je product. Dit kunnen variaties zijn in positie, details of kleurvariaties.

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 abeeldingen die je wilt laten zien 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 / Window – Tijdlijn / Timeline.

DIGITALE VORMGEVING 17

Klik daarna nog een keer op de tekst Frameanimatie maken. Je tijdlijn ziet er nu als volgt uit:

- 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 Product aan.

- Klik in het 2e frame. Vink het oogje voor de Laag met het 2e Product aan.

- Klik in het 3e frame. Vink het oogje voor de Laag met het 3e Product aan.

Animeren

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 1 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. Laat de animatie op Altijd staan.

Opslaan

Sla het bestand op als Photoshop-document zodat je het eventueel nog kunt veranderen:

eigennaam-productanimatie.psd

Sla het bestand op als Animated gif:

Kies voor Bestand – Exporteren – Opslaan voor web: eigennaam-productanimatie.gif

DIGITALE VORMGEVING 18

Opdracht 6 FLAT LAY

Maak 3 verschillende flatlays voor Instagram op basis van zelfgemaakte composities en foto’s. Maak gebruik van Aanpassingen en Filters.

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.

Criteria Communicatieve waarde, lay-out, compositie, uitlijning , eenheid in stijl, kwaliteit van afbeeldingen, uitwerking, originaliteit. Opslaan Sla de bestanden op als: eigennaam-flatlay1.psd en eigennaam-flatlay1.jpg. eigennaam-flatlay2.psd en eigennaam-flatlay2.jpg. eigennaam-flatlay3.psd en eigennaam-flatlay3.jpg.