1

Marketing & Communicatie – Digitale Vormgeving

2

Marketing & Communicatie – Digitale Vormgeving

Inhoud

Voorwoord pag. 02 Theorie pag. 03 Opdracht 1 Kleurencirckel pag. 04 Opdracht 2 Kleurenpalet pag. 05 Opdracht 3 Logo pag. 07 Opdracht 4 Visitekaartje pag. 09 Opdracht 5 Patronen en Texturen pag. 11 Opdracht 6 Reclameprints pag. 14 Opdracht 7 App / Pagina’s pag. 17

Voorwoord Als ondersteuning voor het project Pimp Your Bar houden we ons in deze reader bezig met huisstijl en huisstijldagers. Een huisstijl is een reeks communicatie-uitingen die als doel hebben de identiteit van een organisatie naar de buitenwereld toe op uniforme wijze te verbeelden. Een huisstijl is het gezicht van een onderneming. Zonder duidelijk gezicht weet niemand met wie hij zaken doet. Op de momenten dat de eigenaar / werknemer er zelf niet is om over het bedrijf te vertellen moet de huisstijl het even over kunnen nemen. Waarom is een goede huisstijl belangrijk?

- Zorgt voor recall & recognition (herkenning en herinnering) van het merk / bedrijf - Beinvloedt de houding ten opzichte van het merk / bedrijf - Draagt bij aan imago en de reputatie van het merk / bedrijf - Beinvloedt gedrag ten opzichte van het merk / bedrijf

Een huisstijl moet

- Consistent (samenhangend, niet tegenstrijdig) zijn. - Onderscheidend en zichtbaar/opvallend zijn.

Bij huisstijldragers kun je denken aan: Advertentie Agenda Ansichtkaart Ballon Banier Banner Bar Bedrijfsfilm Bierviltje Beleidsnota Beurs Billboard Blog Boek Brief Brochure Buitenkant café Busreclame Cadeau Commercial (Radio, tv, internet) Direct mail Display DVD E-mail Gadget Gordijn Flyer Folder Jaarverslag Kalender Kerstkaart Kleding (petten, jacks, T-shirts) Koffiebeker Mededelingenbord Menukaart Poster Nieuwsbrief Persbericht Personeelsblad Presentatie Relatiemagazine Sticker Vlag Waterflesje Website

3

Marketing & Communicatie – Digitale Vormgeving

Theorie Betekenis van kleur Kleuren zorgen direct voor een associatie: vrolijk of triest, druk of rustig, warm of koud. Bij het bepalen van de kleuren van een huisstijl kiezen we ook vaak kleuren op gevoel. Als het goed is zijn de kleuren afgestemd op het publiek en het gevoel dat overgebracht moet worden. Maar hoe bepaal je de juiste kleur? Welke kleur past het beste bij jouw bedrijf? Welke kleurcombinaties passen goed bij elkaar en welke totaal niet? Hoewel vormgeving en kleurwetenschap vakken apart zijn, valt er in het algemeen best wat te vertellen over de betekenis van de diverse kleuren. Zie hiervoor : Kleur en emotie: http://www.kleurenpsychologie.be/ Primaire kleuren De primaire kleuren zijn de kleuren die noodzakelijk zijn om, als ze door menging met elkaar gecombineerd worden, het grootst mogelijke kleurengamma te verkrijgen. Welke kleuren primair zijn, hangt af van het gebruikte kleurmengsysteem: Kleurendruk In de kleurendruk gelden CMYK: Cyaan, Magenta, Yellow blacK Beeldscherm- Lichttechniek In de beeldschermtechniek zijn rood, groen en blauw (RGB) de primaire kleuren. Secundaire kleuren Dit zijn kleuren die door menging van twee van de drie primaire kleuren worden verkregen. In de kleurendruk worden de secundaire kleuren gevormd uit de menging van cyaan, magenta en yellow. Wit - Magenta - Geel = Rood Wit - Cyaan - Geel = Groen Wit - Cyaan - Magenta = Blauw In de lichttechniek worden de secundaire kleuren gevormd uit lichtmenging van de primaire kleuren rood, groen en blauw. Rood + Blauw = Magenta Rood + Groen = Geel Groen + Blauw = Cyaan Complentaire kleuren De kleurendriehoeken van de primaire en de secundaire kleuren vormen samen de kleurenster. In de kleurenster zie je dat elke primaire kleur tegenover een secundaire kleur ligt. Deze kleuren die tegenover elkaar liggen noemen we complementaire kleuren. Complementaire kleuren versterken elkaar als ze naast elkaar gebruikt worden. Extra informatie: http://tomwesteneng.nl/kleurcombinaties.html (kleurnuances en kleurcombinaties)

Uitgangspunt voor alle opdrachten in deze reader is de nieuwe huisstijl voor de

horecagelegenheid uit je project.

4

Marketing & Communicatie – Digitale Vormgeving

Opdracht 1 Kleurencirckel Maak een kleurencirkel van Magenta naar Yellow naar Cyaan en terug naar Magenta.

Nieuw bestand Maak een Nieuw bestand/File new: Formaat: 1000 mm breed – 1000 mm hoog – 300 px/inch Kleur: CMYK Hulplijnen Plaats hulplijnen; Weergave/View – Nieuwe hulplijn Hulplijnen Horizontaal: 6 – 25 – 50 -75 – 94 mm Hulplijnen Verticaal: 6 – 25 – 50 -75 – 94 mm Driehoek Teken een driehoek zoals te zien in het voorbeeld met het gereedschap Veelhoek lasso/ Polygonal Lasso. Als je met de lasso het beginpunt bereikt ontstaat er een selectie. Maak een Nieuwe laag/Layer new en vul de selectie met het gereedschap Emmertje/Bucket

Kleur Kies voor Magenta. In het kleurmenu zijn dat de volgende waardes: C 0 – M 100 – Y 0 – K 0 Nog 11 driehoeken Teken en kleur de overige driehoeken op dezelfde manier. Neem de kleuren over uit het voorbeeld.

Beoordelingscriteria Kleurencirckel

Onderwerp Criteria Afvinken

Documentinstellingen 1000mm – 1000mm – 300 px/inch - CMYK

Driehoeken Kwaliteit Formaat

KLeuren 12 kleuren volgens CMYK-codes

5

Marketing & Communicatie – Digitale Vormgeving

Opdracht 2 Kleurenpalet Polaroid Ontwerp een kleurenpalet Kleurenpalet

- Maak een nieuw document: A4 staand of liggend. - Neem een foto die aansluit bij de nieuwe huisstijl als basis. - Maak een kleurenschema van 5 kleuren die toonaangevend in je nieuwe huisstijl zijn. - Houd daarbij ook rekening met de betekenis van kleur.

- Presenteer je kleurenpalet in combinatie met een foto, vormen en tekst

- Beschrijf voor de gekozen kleuren de betekenis/kernwaarden en de codes in RGB (beeldscherm) en CMYK (print).

- Benoem het gekozen lettertype.

http://www.degraeve.com/color-palette/index.php (Kleurenwijzers voor kleurenseries, kleurthema’s en kleurstijlen).

6

Marketing & Communicatie – Digitale Vormgeving

Beoordelingscriteria Kleurenpalet

Onderwerp Criteria Afvinken

Document A4

Foto Kwaliteit Formaat

KLeurenpalet 5 kleuren Samenhang met foto

Presentatie Vormen Tekst

Beschrijving Kleuren RGB en CMYK Betekenis 5 kleuren Naam van het lettertype

7

Marketing & Communicatie – Digitale Vormgeving

Opdracht 3 Logo

3a Ontwerp een logo voor jullie horecagelegenheid. Houd je aan je kleurenpalet uit opdracht 2 en

aan onderstaande aandachtspunten. Het logo is het meest herkenbare element van de huisstijl. Het logo bestaat uit een Beeldmerk en een

Woordmerk. Een logo moet herkenbaar zijn, het product verwoorden en aan de uitstraling van het

bedrijf voldoen.

Belangrijke elementen:

doelgroep, uitstraling, kleur en typografie.

Richtlijnen:

Leesbaar: Houd er rekening mee dat een logo leesbaar moet zijn in verschillende maten,

kleuren en media. Het moet er bijvoorbeeld ook goed uitzien als het zwart-wit wordt afgedrukt.

Duidelijkheid: Zorg dat de boodschap overkomt en probeer niet te veel tegelijk te

vertellen. Als je elementen weg kunt laten, doe het dan ook.

Één Element: Zorg ervoor dat je ontwerp één element bevat om te onthouden. Niet meer

of minder. Alle sterke logo’s hebben één enkel element dat ze helpt op te vallen.

Smaak: Wanneer je een logo voor een klant maakt, moet je werken vanuit de gedachte van

de klant en niet vanuit je eigen smaak.

Niet te druk: Pas ervoor op dat je logo niet te druk overkomt door gebruik van teveel

kleuren of te agressieve lijnen.

Eenheid: De elementen die je gebruikt bij het maken van een logo voeg je samen tot het een

geheel is en geen losse elementen.

Bestandsformaat:

Maak een nieuw bestand (breedte: 10 cm – hoogte: 10cm – resolutie: 300 dpi)

8

Marketing & Communicatie – Digitale Vormgeving

3b Maak een handleiding voor je logo met daarin minimaal 6 do’s and 6 don’ts. Zie hiervoor het voorbeeld uit de KW1C huisstijl Manual.

Do’s Don’ts

Beoordelingscriteria Logo en Logogebruik

Onderwerp Criteria Afvinken

Document 10 cm - 10 cm Resolutie: 300 dpi

Inhoud Logo Afstemming Kernwaarden - Doelgroep - Imago

KLeur Logo Afgestemd op het kleurenpalet uit opdracht 2

Tekst Logo Pakkende naam - Passend lettertype

Vorm Logo Vorm versterkt tekst - Vorm is eenheid met de tekst

Logogebruik Aantal en kwaliteit van do’s en don’ts

9

Marketing & Communicatie – Digitale Vormgeving

Opdracht 4 Visitekaartje

Ontwerp de voor- en achterzijde van een Visitekaartje Natuurlijk heeft jullie Café / Restaurant ook een visitekaartje nodig. Visitekaartjes zijn er in verschillende soorten en maten. In de opdracht werken we met standaard maten. Je mag hier van afwijken. Inhoud Op een visitekaartje staan meestal de volgende gegevens: - Logo - Naam, adres en telefoonnummer

- e-mailadres, website en social-media gegevens - Eventueel naam en functie van een werknemer / directeur

Je kunt ook kiezen voor extra informatie zoals in het voorbeeld hiernaast. Bepaal welke informatie je op de voorzijde en welke informatie je op de achterzijde plaatst. Voorzijde

- Formaat: Breedte: 8,5 cm; Hoogte: 5,5 cm; Resolutie: 300 pixels/inch - Hulplijnen: Verticaal: 0,5 en 8 cm en 8,5 cm; Horizontaal: 0,5 en 5 cm.

Een hulplijn kun je maken door met je cursor in een liniaal te klikken en dan met ingehouden cursor te slepen. Heb je geen linialen ... Klik dan op Ctrl + R. Met de toetsencombinatie Ctrl + H kun je de hulplijnen tijdelijk verbergen en weer terughalen.

- Tekst: Gebruik de hulplijnen om de tekst uit te lijnen. Als je het tekstgereedschap gebruikt zie je in de Optiebalk (bovenbalk) mogelijkheden zoals Lettertype, Lettergrootte en Uitlijnen. Voor nog meer mogelijkheden open je de Vensters (Windows) Teken (Character) en Alinea (Paragraph).

- Lettertype: Stem je lettertype af op de gekozen stijl. Kijk voor extra lettertypes op: http://losttype.com/browse

http://www.fontspace.com http://www.dafont.com http://www.searchfreefonts.com/

- Logo: Open het bestand met het logo dat je wilt gebruiken. Selecteer alle lagen in dit document en sleep ze naar je nieuwe document. Het kan zijn dat je logo een andere maat wilt geven. Selecteer de lagen van het logo. Klik op CTRL+T

Achterzijde

- Ga hetzelfde te werk als bij de voorzijde. Probeer variaties te maken maar wel in dezelfde stijl te blijven.

10

Marketing & Communicatie – Digitale Vormgeving

Beoordelingscriteria Visitekaartje

Onderwerp Criteria Afvinken

Inhoud - Logo - Naam, adres en telefoonnummer - E-mailadres, website en social-media gegevens - Eventueel naam en functie van een werknemer / directeur - Extra informatie

Voorzijde - Formaat: Breedte: 8,5 cm; Hoogte: 5,5 cm; Resolutie: 300 dpi - Hulplijnen - Tekst: uitlijnen

Achterzijde - Formaat: Breedte: 8,5 cm; Hoogte: 5,5 cm; Resolutie: 300 dpi - Hulplijnen - Tekst uitlijnen

Vormgeving - Afstemming huisstijl - Variaties met logo en kleur - Originaliteit - Techniek en kwaliteit

11

Marketing & Communicatie – Digitale Vormgeving

Opdracht 5 Patronen en Texturen

Maak 6 Patroon- en Textuurvariaties voor de styling van je bedrijf

In het kader van je huisstijlmetamorfose wil je ook het meubilair onder handen nemen. Hiervoor moet je uiteraard eerst wat ontwerpen maken om aan de eigenaar / bedrijfsleider voor te leggen. Make-over-document

- Maak een nieuw bestand(A4). - Plaats hierop een foto van een neutrale (effen) bank of stoel. - Verwijder de achtergrond.

Patroon maken

Om de neutrale bank te voorzien van een andere stof gaan we eerst een patroon maken. - Bedenk welke stijl je meubilair gaat krijgen. (romantisch, strak, stoer, vrolijk, basic, retro,etc.).

Uiteraard sluit je aan bij de gemaakte stijlkeuzes in de vorige opdrachten. - Maak een nieuw document (200px – 200px). - Maak of zoek vormen of afbeeldingen die bij deze stijl passen. - Plaats de afbeelding die je hebt gemaakt of gevonden in je

nieuwe document. - Selecteer de afbeelding door te klikken op Selecteren – Alles. - Ga naar Bewerken/Edit – Patroon definiëren/Define pattern –

type een naam – ok

Patroon verwerken - Ga terug naar je Make-over-document. - Selecteer de bank of stoel. 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 vorm van je bank of stoel.

12

Marketing & Communicatie – Digitale Vormgeving

Het patroon moet nu nog onderdeel gaan worden van de stof. 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 stoel of bank en van het patroon.

- Om de uiteindelijke kleur aan te passen aan je kleurenpalet gebruik je CTRL+U.

Textuur Met een patroon kun je een afbeelding kleuren, strepen, bloemen en andere illustraties geven. Met een textuur of structuur geef je een afbeelding een specifiek materiaal. Je bank of stoel kun je veranderen in bont, leer, canvas, etc. Hiervoor hoef je niet eerst een patroon te maken. Je moet wel de afbeelding van een structuur exact dezelfde vorm als de bank geven:

- Plaats de afbeelding van een textuur in een nieuwe laag boven je bank of stoel in je Make-over-document.

- Maak de afbeelding groter dan de stoel of bank. (CTRL+T) - Selecteer de bank of stoel door met de CTRLtoets ingedrukt op het laagicoon te klikken. - Ga op de laag met de textuur staan en klik op CTRL+J. De selectie wordt nu gekopieerd en

geplakt op een nieuwe laag. - Verwijder de oorspronkelijke textuurlaag. Je

hebt nu een textuur in de vorm van je stoel of bank.

- Verbind de textuurafbeelding met de bank door de overvloeimodus te veranderen.

- Om de uiteindelijke kleur aan te passen aan je kleurenpalet gebruik je CTRL+U.

Experimenteer met minimaal 3 texturen/structuren en 3 zelfgemaakte patronen.

13

Marketing & Communicatie – Digitale Vormgeving

Beoordelingscriteria Patronen en Texturen

Onderwerp Criteria Afvinken

Make-over-document

- A4 - Effen bank of stoel - Achtergrond van stoel of bank goed verwijderd (strak en

vloeiend)

Patroon maken (3x)

- Document (200px – 200px of afgestemd op bank). - Afbeeldingskwaliteit - Afbeelding geschikt als patroon - Stijl (romantisch, strak, stoer, vrolijk, basic, retro,etc.) sluit aan

bij de gemaakte stijlkeuzes. - Afbeelding omzetten naar patroon

Patroon verwerken - 3 x Zelfgemaakt patroon toepassen op bank - 3 x Overvloeimodus toepassen - 3 x Kleur aanpassen aan kleurenpalet

Textuur verwerken - 3 x Textuur toepassen op bank - 3 x Overvloeimodus toepassen - 3 x Kleur aanpassen aan kleurenpalet

14

Marketing & Communicatie – Digitale Vormgeving

Opdracht 6 Reclameprints

6a Ontwerp een bierviltje voor jullie horecagelegenheid

Bestand

- Nieuw, formaat 12 x 12 cm, 300 pixels/inch, RGB.

- Hulplijnen: Verticaal: 1, 6, 11 cm; Horizontaal: 1, 6, 11 cm.

Vorm - Maak met ovaal selectiegereedschap vanuit

het midden met Shift-Alt ingedrukt een cirkel. - Vul de selectie. Hef de selectie niet op. - Ga in de optiebalk naar Selecteren, Bewerken,

Slinken, 50 pixels. - Nieuwe Laag, vul de selectie met dezelfde

kleur. - Selecteer Laagstijl, Lijn, Grootte 20 px,

Binnen, Kleur aanpassen.

Tekst rond buigen - Teken een Ronde Vorm (Shape). Zorg ervoor dat zowel de Vulling als de

Lijn leeg zijn. Je tekent dus alleen een Pad (een dunne lijn). Plaats de vorm in het midden van je bierviltje.

- Klik met je Tekstgereedschap in de ronde vorm (lijn). Typ je tekst. Deze zal nu de vorm volgen.

Vormgeving

- Plaats je logo en eventueel aanvullende afbeeldingen in je document. - Gebruik geen foto’s (zijn niet goed zichtbaar i.v.m. de viltige structuur van een bierviltje). - Stem kleuren, vormen en lettertypes af op je huisstijl.

15

Marketing & Communicatie – Digitale Vormgeving

6b Ontwerp een gadget voor jullie horecagelegenheid

Gadget keuze Kijk op sites van bedrijven met gadgets, promotiemiddelen, relatiegeschenken. Bijvoorbeeld:

http://www.fdspromotions.com/ https://www.gullegever.nl/

- Kies een item (pet , t-shirt, tas, etc.) waarop je een logo en een tekst gaat plaatsen.

- Let op: Het logo mag niet recht geplaatst worden. Je moet gebruik maken van vervormen en perspectief. Dus: Niet: Vooraanzicht rechthoekige aansteker. Wel: Pet, schuin gefotografeerd.

Logo plaatsen

- Plaats je logo op het gekozen gadget. - Draai het logo in de juist richting (CTRL+T) - Laat het logo met de vorm meelopen.

Hierna staat een beschrijving om het logo rond te buigen en om het logo in perspectief te plaatsen.

Afbeelding buigen

- Klik op de laag van het logo - Kies in de optiebalk voor Bewerken (Edit), daarna Transformatie (Transform) en tenslotte

Verdraaien (Wrap). - Photoshop legt een raster over het logo. Sleep met de cursor aan de Ankerpunten om de juiste

vorm te bewerkstelligen. Als je klaar bent, druk je op Enter. - Geef het logo nog een slagschaduw.

16

Marketing & Communicatie – Digitale Vormgeving

6c Ontwerp een bedrijfswagen voor jullie horecagelegenheid

- Verwerk het logo ook op een bedrijfswagen. - Zoek een passende bedrijfswagen. - Herhaal de handelingen zoals beschreven bij Gadget..

Beoordelingscriteria Reclameprints

Onderwerp Criteria Afvinken

Bierviltje - Formaat 12cm – 12cm - Gebogen tekst - Rand - Logo - Vormgeving originaliteit, kwaliteit en afstemming op huisstijl -

Gadgets - Gadget passend bij het café - Tekst en Logo in perspectief - Tekst en Logo afgestemd op materiaal - Vormgeving originaliteit, kwaliteit en afstemming op huisstijl

Bedrijfsauto - Tekst en Logo op meerdere onderdelen van de auto - Tekst en Logo in perspectief - Tekst en Logo afgestemd op materiaal - Vormgeving originaliteit, kwaliteit en afstemming op huisstijl

17

Marketing & Communicatie – Digitale Vormgeving

Opdracht 7 App/Pagina

7a Ontwerp een app voor jullie horecagelegenheid

Er zijn honderdduizenden apps. De toepassingen zijn eindeloos: Om een idee te krijgen van het gebruik in de horeca zie je hierna enkele voorbeelden.

Afgeronde hoeken Apps zijn vaak gemaakt met afgeronde hoeken.

- Formaat is 100 x 100 pixels, resolutie 72 pixels/inch, RGB. - Kies in de gereedschapsbalk onder rechthoek Afgeronde rechthoek.

Ga naar de optiebalk en kies daar een Straal /Radius van 5 px. Met de Voorgrondkleur afgestemd op je kleurpalet

- Teken met het gereedschap Afgeronde rechthoek. Houd de Shift-toets ingedrukt waardoor een Vierkant ontstaat met afgeronde hoeken.

- In de Optiebalk kun je met het Transformatie–gereedschap de vorm in het Midden plaatsen door de X in 50 px te veranderen

7b Ontwerp minimaal 3 pagina’s behorend bij de app

Smartphone

- Neem een foto van een Smartphone als basis. - Verwijder de achtergrond van de

Smartphone. - Formaat: minimaal 600px breed;

Resolutie: 72 dpi. Inhoud

- Bepaal de inhoud. Hierbij kun je denken aan: Menukaart, Routekaart, Openingstijden, Speciale evenementen.

Hierna zie je enkele voorbeelden ter inspiratie.

18

Marketing & Communicatie – Digitale Vormgeving

Beoordelingscriteria App en pagina’s

Onderwerp Criteria Afvinken

App - Formaat: 100px – 100px; Resolutie: 72 dpi - Afgeronde hoeken - 10px - Afbeelding passend bij de huisstijl - Kleuren afgestemd op het kleurenpalet

Pagina’s - Kwaliteit Foto Smartphone - Uitsnijden foto Smartphone - Formaat: 600px breed; Resolutie: 72 dpi.

Inhoud - Inhoud: Passend bij de huisstijl - 3 Belangrijkste items

Vormgeving - Kwaliteit foto’s - Afstemming huisstijl - Variaties met logo en kleur - Originaliteit