INHOUD DIGITALE VORMGEVING 2

Transcriptie

1

2 INHOUD INHOUD...2 STUDIEWIJZER COHORT 2017 LEERJAAR 2 PERIODE INLEIDING...4 Opdracht 1 KWARTETSPEL WINKELCONCEPTEN...5 Opdracht 2 PATRONEN en PENSELEN...7 Opdracht 3 ANIMATIE WINKELCONCEPT Opdracht 4 ANIMATIE MET TUSSENFRAMES Opdracht 5 PERSONA

3 STUDIEWIJZER COHORT 2017 LEERJAAR 2 PERIODE 2 Context Opdrachten op het gebied van Digitale Vormgeving ter ondersteuning van het project A place to store. Toepassingen Kwartetspel winkelconcepten, Patronen en Penselen voor promotiemiddelen, Label, Bag en Inpakpapier, Frame-animatie winkelconcept, Animatie met bewegende klant, Persona van de doelgroep, Plattegrond van de winkelindeling, 2 Promotiemiddelen voor het winkelconcept. Leerdoelen De leerling maakt gebruik van aandachtspunten en voorbeelden van verschillende winkelconcepten. Past criteria voor bestandsformaat, layout, foto s, lettertypes, stijlelementen toe. De leerling maakt gebruik van aanpassingen, filters, kleurgebruiken vormen, patronen en penselen. Maakt gebruik van technieken om zelf patronen en penselen te maken. Past productselectie en overvloeimodus toe. Beheerst de technieken voor frame-animatie. Maakt gebruik van selectie- en retoucheertechnieken voor een persona van de doelgroep. Gereedschappen Photoshop-gereedschappen Technieken Fotobewerking, selecteren, retoucheren, animeren, patronen en penselen maken, gebruik maken van hulplijnen, rasters, werken met vormen, lettertypes en filters. 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: Kwartetspel, Patronen en Penselen, Bedrukte tas, label en inpakpapier, Frame-animatie, Animatie met vloeiende beweging, Persona. Tijd - 2 uur per week lesactiviteiten; - 1 periode van 9 weken Leermiddelen Reader Digitale Vormgeving Leerjaar2 Periode 2 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. 3

4 INLEIDING De opdrachten in deze reader zijn afgestemd op het project A place to store. De eerste opdracht heeft betrekking op de verschillende winkelconcepten die er zijn. Door middel van een kwartetspel verdiep je je in deze concepten en breng je de kenmerken en voorbeelden in beeld. Vervolgens leer je om zelf patronen en penselen te maken afgestemd op een winkelconcept. Deze penselen en patronen kun je gebruiken bij het ontwerpen van een label, een tas en een inpakpapier. Het interieur en de indeling van de winkel breng je in beeld door middel van 2 animaties. Het winkelend publiek komt aan bod bij het maken van een persona van de doelgroep. Bij het opzetten van een winkel bepaal je van te voren wat je uitgangspunten zijn met betrekking tot de vestigingsplaats en inrichting, het assortiment en prijsniveau, de presentatie en doelgroep van de winkels. Belangrijke elementen hierbij zijn Visie Missie Identiteit Aanbod Jouw beeld van klant, markt en omgeving Wat voeg je toe voor klant en markt AH: Het alledaagse betaalbaar, het bijzondere bereikbaar IKEA: een beter dagelijks leven voor zoveel mogelijk mensen Waarden en persoonlijkheid van je merk Bijvoorbeeld: Betrouwbaar, premium, klantvriendelijk, de goedkoopste, zakelijk, persoonlijk, authentiek, hightech, modieus, respectvol, jong, dynamisch, rustig, gedegen. Producten Branche voorbeeld Pop-up store 4

5 Opdracht 1 KWARTETSPEL WINKELCONCEPTEN Ontwerp een gedeelte van een kwartetspel (2 x 4 kaarten) van verschillende winkelconcepten volgens onderstaande richtlijnen. Verschillende winkelconcepten Conceptnaam kenmerken voorbeelden Persoonlijk Sociaal verantwoordelijk Discount Innovatief Authentiek Sophisticated Robuust Modisch Overvloed Experience Pop-up Huiskamer Persoonlijke selecties assortiment (smaak en karakter ondernemer) (Fictief)Persoon is het merk Gericht op de maatschappij Kritisch op sociaal vlak Betrokken bij goede doelen Superdiscount: alleen prijs Hippe discount: prijs + eigenheid Zeer goed verkopende produ cten Alleen eigen merk Specifiek, uniek, experimenteel Koploper nieuwe ontwikkelingen New classic: eigenzinnig, eigentijds Oprecht en geloofwaardig Storytelling: oprecht verhaal Gericht op het hoogste segment Theatraal: the store as a stage Winkel is een showroom Avontuurlijk, krachtig en stoer Mannelijk, rationeel en handig Up to date: gericht op een specifieke doelgroep Trendy & hip: gericht op trendsetters Letterlijk: Veel producten in de winkel Figuurlijk: Het product speelt de hoofdrol in de styling van de winkel Producten laten beleven Klant optimaal laten genieten. Veel klantonderzoek Winkel als servicecentrum. Inspelen op trends. Tijdelijke winkel (leegstaande panden, containers). Gericht op een specifieke doelgroep / moment. Vernieuwend / verrassend. Shoppers een aangenaam gevoel te geven. Eten, drinken, ontspannen en winkelen. YOUR A Puur A Paul Smith Stella McCartney Virgin Ben & Jerry s Colette Hans Anders Fair + Fair Charlie & Mary Bodyshop Wereldwinkels Benneton Camper School of life Action Target Aldi Primark Tiger H&M Hospital Aesop RA13 Nike Ikea - Nespresso Burberry Lacoste Goliath Trader Joe s Heppie Store Whole Foods Market Anthropologie Kiehls Tiffany s Gucci Hermès Prada Globetrotter Ausrüstung Hamleys Jumbo Foodmarkt Harvest & Company Desigual Mini Brand Store Moose in the City Ubxtreme Hornbach - Gamma Abercrombie & Fitch Hollister TopShop Zara Forever21 Monki Essentiel Fish & Chips Clinic Urban Outfitters Denham Floris van Bommel Uniglo Dean&DeLuca MediaMarkt HEMA Barnest&Nobles Jumbo - MUJI Coolblue Story Zara -Apple Zalando Nike (Air Max Day) Magnum H&Mbeach Robbies Villa Augustus Club Monaco 5

6 Richtlijnen Kies 2 winkelconcepten. Hiervoor kun je bovenstaand schema gebruiken. Je mag ook een ander voorstel doen. Maak voor ieder concept een kwartetserie van 4 kaarten. Maak een basiskaart (voor- en achterzijde) voor het volledige kwartet. - Formaat: Hoogte: 98mm Breedte: 76mm Resolutie 300 pixels per inch (dpi) - De achterzijde :bestaat uit een eigen (bewerking van) een patroon, foto of afbeelding en een tekst. - De voorzijde bestaat uit een zelfgemaakt kader / format waarin de verschillende winkelconcepten geplaatst kunnen worden. De tekst bestaat uit: o een titel (het gekozen winkelconcept) o 4 kenmerken / voorbeelden van het gekozen winkelconcept o 1 kenmerk / voorbeeld uitgelicht Gebruik de Voorzijde als basis voor de 2 kwartetseries. Per serie maak je 4 kaarten waarin je 4 kenmerken en/of voorbeelden van een winkelconcept visualiseert (in beeld brengt). Ook hier gaat het weer om eigen bewerkingen in de vorm van selecties, maskers, kleurbewerkingen, filters, aanpassingen of effecten. Het is de bedoeling dat het volledige kwartet een eenheid is maar dat de verschillende kwartetten toch een eigen vormgeving hebben. Opslaan. Plaats een serie van 4 kaarten op een A4. Sla deze op als: eigennaam-kwartet-serie1.psd eigennaam-kwartet-serie1.jpg Doe hetzelfde voor serie 2. 6

7 Opdracht 2 PATRONEN en PENSELEN Maak voor 1 winkelconcept een Penseel en een Patroon die te gebruiken zijn op verschillende promotiemiddelen met behulp van: - Techniek Patroon definiëren en toepassen patronen - Techniek Penseel definiëren en toepassen penselen 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, rationeel, 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 deze afbeelding(en) die je hebt gemaakt of gevonden en plaats deze met behulp van Ctrl C en Ctrl V in je nieuwe document. - Selecteer de afbeelding door te klikken op Selecteren Alles. - Ga naar Bewerken/Edit Patroon definiëren/ Define pattern typ een naam ok. 7

8 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. 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 neutrale papieren tas. - Verwijder de achtergrond van de tas. Patroondocument - Maak een nieuw document, formaat A5. - Open een afbeelding die je om wil zetten in een brush/penseel. Dit kan echt alles zijn, van een foto tot een illustratie. Sluit aan bij de gemaakte stijlkeuzes in de vorige opdrachten. Maak een samenstelling van figuren/afbeeldingen en logo s die qua stijl bij elkaar passen. Penseel definiëren - Selecteer met het rechthoekig selectiekader of de lasso één figuur of logo. - Kies voor Bewerken (Edit), Voorinstelling penseel definiëren (Preferences define brush). 8

9 Stempelen in de afbeelding Je kunt nu de zelf gemaakte penselen gebruiken. - Kies in de gereedschapsbalk Penseel/Brush. - 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!!! - Plaats deze nieuwe laag met stempels die samen een patroon vormen boven je papieren tas in je document. - Maak de afbeelding (met patronen) 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 stempel/patroon staan en klik op CTRL+J. De selectie wordt nu gekopieerd en geplakt op een nieuwe laag. - Verwijder de oorspronkelijke stempel /patroon laag. Je hebt nu een patroon in de vorm van je tas. - Verbind de textuurafbeelding met de tas door de overvloeimodus te veranderen. - Om de uiteindelijke kleur aan te passen aan je kleurenpalet gebruik je CTRL+U. 9

10 Label/Inpakpapier Gebruik de technieken uit de vorige opdracht voor het maken van een label en inpakpapier die passen in het winkelconcept. 10

11 Opdracht 3 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. Overzicht mogelijke winkel ingrediënten: - 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. 11

12 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. 12

13 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. 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 2 e 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 13

14 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 Sla het bestand op als Photoshop-document zodat je het eventueel nog kunt veranderen: eigennaam-animatie-winkel.psd Sla het bestand ook op als Animated gif: Kies voor Bestand Exporteren Opslaan voor web: eigennaam-animatie-winkel.gif 14

15 Opdracht 4 ANIMATIE MET TUSSENFRAMES Maak een animatie van een voertuig dat door een landschap rijdt in een vloeiende beweging. Maak een animatie van een klant die door een winkel loopt in een vloeiende beweging. Gebruik voor beide animaties de Techniek Animatie tussenframes. 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 1 e 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. 15

16 - Kopieer dit frame door op het Kopieericoontje te klikken. Klik in het 2 e 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 Animatie bewegende klant - Open de animatie Winkel 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-voertuig. - 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. - Sla de animatie 2 keer op: Als PSD zodat je nog wijzigingen kunt aanbrengen: eigennaam-animatie-klant.psd Als Gif in het menu Bestand - Opslaan voor web en apparaten: eigennaam-animatie-klant.gif 16

17 Opdracht 5 PERSONA Maken van een persona van de doelgroep waarin minimaal 6 kenmerken zijn verwerkt. Gebruiken van Selecteer- en Retoucheertechnieken, Teken- en Vormgereedschap. Bekijk de winkelconcepten uit de tabel van opdracht 1. Met behulp van deze concepten kun je doelgroepen onderscheiden. Werk de gegevens van de persona uit: Te denken valt aan: Foto - Naam - Leeftijd Geslacht - Karaktereigenschappen / Persoonlijke kenmerken Burgerlijke staat - Gezinssamenstelling - Woonsituatie - Beroep Opleiding Inkomen - Geïnteresseerd in Belangrijk in het leven - Online activiteiten Favoriete sites - Online koopgedrag Offline koopgedrag Social-media-gebruik - Sport Hobby - Motivatie om te kiezen voor een bepaald winkelconcept. Maak een aantal Pictogrammen voor deze Persona. Verwerk de zelf gemaakte iconen in een Infographic met cirkeldiagram en percentage.. 17