Marketing & Communicatie Digitale Vormgeving

1

Marketing & Communicatie – Digitale Vormgeving

Inhoud Voorwoord Theorie Opdracht 1 Kleurencirckel Opdracht 2 Kleurenpalet Opdracht 3 Logo Opdracht 4 Visitekaartje Opdracht 5 Patronen en Texturen Opdracht 6 Reclameprints Opdracht 7 App / Pagina’s

pag. 02 pag. 03 pag. 04 pag. 05 pag. 07 pag. 09 pag. 11 pag. 14 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

2


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 : Kleuren-logo-wiel: http://www1.bikker.nl/Bikker/logowiel/04-02072009.swf 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 cyaan, magenta en geel (CMY - Y van yellow) als primaire kleuren. In het ideale geval levert het mengen van alle kleuren zwart op. In de praktijk blijkt dit niet het geval, daarom is dat er aan toegevoegd: Key (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.

3


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 breed – 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

4


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

een foto, vormen en tekst. Beschrijf voor de gekozen kleuren de betekenis/kernwaarden en de codes in RGB (beeldscherm) en CMYK (print). Presenteer je kleurenpalet in combinatie met

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

5


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

6


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)

7


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.

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

8


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

9


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

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

10


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.

11


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

12


Beoordelingscriteria Patronen en Texturen

Onderwerp

Criteria

Afvinken

Make-overdocument

-

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

13


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.

14


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

Het logo mag niet recht geplaatst worden. Je moet gebruik maken van vervormen en perspectief. Let op:

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.

15


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 Bierviltje

Gadgets

Bedrijfsauto

Criteria

Afvinken

-

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

-

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

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

16


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

-

7b

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

17


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

18


Marketing & Communicatie Digitale Vormgeving

Recommend Documents