HUISSTIJL ONTWERP EN REALISATIE VAN VOORLICHTINGS, PROMOTIE- EN/OF PR-MATERIAAL OPLEIDING: EVENEMENTENORGANISATIE DIGITALE VORMGEVING PERIODE 1, 2013-2014 FONS GOOSEN
MARKETING & COMMUNICATIE - DIGITALE VORMGEVING
Voorwoord Oefening collegekaart We beginnen met een kennismaking van het programma Photoshop en enkele regels over het vormgeven. De opdracht is het maken van een collegekaart in de huisstijl van het Koning Willem 1 College. In deze reader wordt stap voor stap uitgelegd hoe je met de gereedschappen van Photoshop een prachtige collegekaart kunt maken. Huisstijl Evenementenbureau. Nadat je kennis hebt gemaakt met de beginselen van Photoshop en het vormgeven gaan we een Huisstijl ontwerpen voor het evenementenbedrijf dat je gaat oprichten. Achtereenvolgens gaan we ontwerpen maken voor het logo, visitekaartje, flyer, naamkaartje, icoon en app voor de smartphone en tenslotte nog een gadget of ontwerp voor een bedrijfswagen. Deze ontwerpen kun je gebruiken bij de presentatie van je evenementenbedrijf op de ouderavond en aandeelhoudersvergadering. Veel plezier en succes met alle opdrachten. Fons Goosen
Digitale Vormgeving Doel 1. Je ontwikkelt voor een organisatie of voor derden voorlichtings-, promotie- en/of pr-materiaal, eventueel gebruikmakend van bestaand materiaal . Je inventariseert en analyseert de wensen van de opdrachtgever ten aanzien van dit materiaal en stemt het product hierop af. Je verbeeldt zorgvuldig en zorgt ervoor dat je product goed aansluit op de beeldtaal van de doelgroep. Je werkt conform de door de organisatie voorgeschreven huisstijl. Hiervoor heb je vakkennis en vaardigheden nodig op het gebied van grafische en digitale vormgevingstechnieken (met name Photoshop) 2. Je ontwikkelt pagina’s voor internet en/of intranet, richt deze in en past ze zo nodig aan (functioneel beheer). Verder inventariseer je regelmatig de behoeften van de informatiegebruikers. Je zoekt naar aanleiding daarvan relevante informatie en bewerkt deze zo nodig, voordat je ze plaatst (contentbeheer). Ook ontwikkel je content en bewaak je de actualiteit van de informatie op inter- en intranet conform de afgesproken huisstijl. Hiervoor heb je vakkennis en vaardigheden nodig in het beheren en opmaak van websites. We gebruiken hiervoor het CMS-systeem WordPress.
2
Inhoudsopgave Voorwoord Inhoudsopgave Richtlijnen lessen Digitale Vormgeving Photoshop: werkruimte, gereedschappen en vensters
blz 2 blz 3 blz 4 blz 5
1. Collegekaart Nieuw document Fotokwaliteit optimaliseren, Niveaus Foto plaatsen in nieuw document Vrije Transformatie, Foto verkleinen/vergroten Rechthoek en Tekst toevoegen Logo KW1C Bestand opslaan Afvinklijst
blz 6 – 12 blz 6 blz 7 blz 8 blz 9 blz 10 blz 11 blz 12 blz 12
2. Huisstijl kernwaarden 3. Logo Lettertypen en Dafont.com Kleur en betekenis Vormen en aangepaste vormen
blz 13 blz 13-16 blz 14 blz 15 blz 16
4. Visitekaartje Marges en hulplijnen Info, Uitlijnen, Achterkant
blz 17 - 18 blz 17 blz 18
5. Flyer Functie, Formaat, Informatie
blz 19 blz 19
6. Naamkaartje Huisstijl, Informatie
blz 20 blz 20
7. Gadget Afbeelding buigen, Perspectief
blz 21 blz 21
8. Bedrijfswagen Voorbeelden bedrijfswagen
blz 22 blz 22
9. Icoon en App-pagina Icoon App-pagina
blz 23-24 blz 23 blz 24
10. Theorie Digitale Vormgeving Resolutie, Kleurmodus, Lettertype Lettergrootte, Lay-out, Extensie, Copyright Papierformaten, gereedschapsbalk Photoshop
blz 25-27 blz 25 blz 26 blz 27
Beoordeling Periode 1 Planning Periode 1
blz 28 blz 28
3
Richtlijnen Lessen Digitale Vormgeving Om de Lessen Digitale Vormgeving tot een succes te maken. Photoshop Voor de lessen van het eerste leerjaar heb je het programma Photoshop CS Extended nodig. Het maakt niet uit welke versie. Photoshop CS2 is ook goed. Vanaf CS4 is de structuur beter. Maar de laatste versie CS6 is natuurlijk nog beter. In de Readers is gebruik gemaakt van de Nederlandstalige versie van Photoshop, vaak staat er tussenhaakje ook de Engelse term. Doordat er bij alle opdrachten printscreens staan, is met een Engelstalige versie vrij eenvoudig de termen te vinden. Natuurlijk kun je de docent ook om de vertaling te vragen. Het is ook mogelijk met Photoshop Elements de meeste opdrachten te maken. Echter je moet dan zelf de vertaling naar jouw programma maken. Laptop, Uitleg, Opdrachten Iedere les begint met een uitleg. Tijdens deze uitleg heb je je laptop dicht en blijf je van je laptop af. Alle opdrachten staan in een Reader per periode, op papier. Dat betekent niet dat alles op papier staat. Zonder de uitleg kun je je opdrachten niet goed maken. De opdrachten krijg je één keer op papier uitgereikt. Om de opdrachten goed te maken is het belangrijk dat je iedere les de reader bij je hebt en gebruikt. De opdrachten zijn ook te vinden op internet: http://www.digitalevormgeving.wordpress.com. Externe muis Bij het werken met Photoshop is het beter om met een externe muis te werken. Zorg dat je een externe muis hebt en dat je deze externe muis altijd bij je hebt. PSD Ieder werkstuk dat je maakt, sla je op als PhotoShopDocument, PSD-bestand. Je begint altijd met een werkstuk door het op te slaan. Maak een gewoonte dat je je werkstuk om de 5 - 10 minuten opslaat. Usb, externe schijf Bewaar je bestanden naast de harde schijf van je eigen laptop ook op een externe harde schijf en/of een USB-stick (met voldoende capaciteit). Printen en PDF Iedere periode print je het beste werkstuk in kleur uit en lever je bij je docent in. Het is de enige manier om een ontwerp goed te kunnen beoordelen. Voordat je het werkstuk print, moet je je ontwerp opslaan als Portable Document Format PDF. Met het PDF-bestand ga je naar de balie en laat je het uitprinten (PSD-bestanden kunnen daar niet worden geprint). Fototoestel / mobiel Voor een aantal opdrachten heb je een fototoestel of mobiel met camera nodig. Zorg dat je het snoertje bij je hebt om de foto’s op je laptop te plaatsen. Geen eten en drinken, muziek Eten en drinken (met uitzondering van flesjes water) is niet toegestaan in het lokaal. Muziek mag alleen met oortjes en dan op een laag geluidsniveau.
4
Photoshop Wanneer we Photoshop openen, zien we drie onderdelen: boven de Werkruimte, links de Gereedschappen en rechts de Paletten. De werkruimte (boven) De werkruimte bestaat uit twee delen: Menubalk (boven) en Optiebalk (onder), (vanaf CS5).
Klik je op een van de menu’s in de Menubalk dan opent zich een uitklapmenu met opdrachten. Naast deze opdrachten staat vaak een sneltoets vermeld. De Optiebalk toont de verschillende mogelijkheden van het gereedschap dat je gekozen hebt. Heb je gekozen voor tekstgereedschap dan laat de optiebalk de verschillende tekstopties zien.
Gereedschapsbalk en Uitklapmenu Gereedschap Klikken we op een knop met een naar benedenwijzend driehoekje, dan opent zich een uitklapmenu met meerdere beschikbare gereedschappen.
Deelvensters (rechts) Wanneer we Photoshop openen zie je rechts Deelvensters, ook wel eens "panelen" of "paletten" genoemd. Kies je voor Venster, Werkruimte, Ontwerp dan zie je rechts drie deelvensters: Lagen, Stalen en Teken. Andere deelvensters die handig zijn om te gebruiken, zijn: Historie en Navigatie
5
1. Collegekaart Vensters Voor we met deze eerste opdracht beginnen zorgen we ervoor dat de juiste Vensters (Windows) open staan: Selecteer in de Menubalk (bovenste horizontale balk) in het menu Venster (window), Werkruimte Voeg het deelvenster Historie toe en verwijder Stalen.
Foto Voor deze opdracht heb je natuurlijk een foto van jezelf nodig. Als je deze niet hebt maak je hem alsnog, met je laptop, smart Phone of fototoestel. Nieuw Document Selecteer in de optiebalk in het menu Bestand (File) de optie Nieuw (Ctrl+N) voor een nieuw document. Naam: Collegekaart Breedte: 8,5 cm Hoogte: 5,5 cm Resolutie: 300 pixels/inch Kleur: CMYK Color Achtergrond: Wit
6
Eigen Foto Selecteer in de optiebalk in het menu Bestand (file) de optie Open. Blader naar de Foto van jezelf. Er zijn nu 2 vensters geopend: Het venster met het formaat van je Collegekaart en een venster met een Foto van jezelf. Foto verkleinen De foto die op jouw collegekaart moet komen, heeft een hoogte van 3 cm, dus je moet de foto verkleinen. Ga in de menubalk naar Afbeelding, Afbeeldingsgrootte. Verklein de Hoogte van de afbeelding naar 3 cm, resolutie 300 pixels/inch. De Breedte past zich aan doordat er een vinkje staat voor Verhoudingen behouden.
Fotokwaliteit optimaliseren Selecteer in de optiebalk het menu Bestand (File) in de optie Aanpassingen (Adjustments) voor Niveaus (Levels). Schuif met de pijltjes aan de buitenzijde naar de binnenzijde zodat er alleen een grafiek en geen horizontale lijn overblijft. Met het witte driehoekje maak je de foto lichter. Met het zwarte driehoekje maak je de foto donker.
Toepassen Helderheid en Contrast Kijk of je de foto nog kunt verbeteren door in de optiebalk te klikken op Afbeelding – Aanpassingen – Helderheid en Contrast.
7
Afbeeldingen rangschikken In de toepassingsbalk kun je de Documenten rangschikken. Klik op de knop Documenten rangschikken. Je ziet hier alle mogelijke indelingen om meerdere geopende documenten weer te geven. Klik op de gewenste indeling. Alle geopende foto’s worden getoond, elk in een eigen venster met een titelbalk en inclusief schuifbalken die pas zichtbaar worden zodra je op een foto klikt. Klik op de knop Alles samenvoegen om de documentvensters van de geopende afbeeldingen weer als tabbladen weer te geven met slechts één zichtbare foto.
Foto plaatsen in nieuw document Klik bij Documenten rangschikken op 2-maal tonen. Sleep vanuit het Lagen-palet rechts de Foto van jezelf in het bestand van de collegekaart. Maak zelf een keuze waar je de foto plaats op de collegekaart.
8
Naam Laag Klik in het venster met je foto. In het menu Lagen (layers) zie je de laag met je foto. Dubbelklik op deze laag en geef hem de naam foto.
Foto Verkleinen/vergroten, Vrije Transformatie De foto kun je vergroten of verkleinen. Kies hiervoor in de menubalk Bewerken (Edit), Vrije Transformatie of de sneltoetscombinatie Ctrl+T. Onthoud deze toetsencombinatie. Je ziet acht blokjes rond je foto, vier op de hoeken en vier in het midden. Bij het vergroten en verkleinen van afbeeldingen mag je alleen de hoekblokjes gebruiken. Houd de Shift-toets ingedrukt om de verhoudingen te behouden. Heb je de juiste grootte bereikt dan laat je eerst de Muis los en daarna pas de Shift-toets. Klik dan Enter om de juiste verhouding vast te leggen.
Achtergrond Geef de achtergrond een kleur geven. Ga naar Voorgrondkleur instellen onderaan in de gereedschapsbalk. Klik op Voorgrondkleur en kies een kleur in de Kleurkiezer (Voorgrondkleur). Kies in het midden van de gereedschappenbalk onder Verloop het Emmertje. Vul de Achtergrondlaag met de gekozen Keur met het Emmertje
9
Rechthoek toevoegen Ga in de gereedschapsbalk naar Rechthoek (sneltoets U). Zet de Voorgrondkleur in de gereedschapsbalk op de juiste kleur. Klik op Voorgrondkleur instellen en selecteer de juiste kleur in de Kleurenkiezer. Teken een Rechthoek op de collegepas. Vergroot of verklein de rechthoek met Ctrl+T. Teken ook de Vierkantjes in verschillende kleuren op de collegepas. Een vierkant maak je door Shift in te drukken als een rechthoek maakt.
Tekst Toevoegen Selecteer in de gereedschapsbalk het gereedschap Horizontale Tekst. Kies in Palet Teken (rechts) een Lettertype en bepaal de Grootte. Klik met het gereedschap Horizontale Tekst op je collegekaart. Hierdoor ontstaat een knipperend verticale streep. Voer nu de tekst in. Type je naam, klas en leerling-nummer. Kies een Kleur door in het palet Teken Tekstkleur te kiezen. Sluit het typen af door op de Bevestigingsknop (V-teken), alle huidige wijzigingen vastleggen, rechts op de optiebalk te klikken.
10
Logo KW1C Het logo van het Koning Willem 1 College krijg je via de mail toegestuurd. Het logo heeft een Transparante achtergrond zodat er geen wit vlakje achter logo zichtbaar is. De blokjes achter het logo geven aan dat er geen achtergrondkleur aanwezig is. Open het logo in Photoshop. Sleep op dezelfde manier als je foto het logo naar de collegekaart. Vergroot of verklein het logo met Ctrl+T.
De verhoudingen van een logo mag nooit gewijzigd worden. Tweemaal Fout Hieronder zie je twee fouten. Het verkeerde logo, oud logo en een vlakje onder het Logo. Iedere bedrijf heeft voorschriften over het gebruik van de huisstijl, kleuren, letters etc. In de Brandbox en huisstijlhandboek van het KW1C vind je alle informatie over het gebruik van de huisstijl van het KW1C.
Hulplijnen en Uitlijnen Ga in de optiebalk naar Weergave en zet een vinkje bij Linialen. In Photoshop zie je boven en rechts een liniaal. Plaats nu een hulplijn in je ontwerp door op de Liniaal te klikken en met een ingedrukte muisknop de hulplijn op je collegekaart te slepen. Ga met Hulplijnen foto en teksten Uitlijnen.
Bestand opslaan Sla je ontwerp van de collegekaart als PSD (PhotoShop Document) op. Selecteer in de optiebalk in het menu Bestand, Bestand opslaan als. Kies voor de optie nieuwe map. Geef deze map de naam Digitale vormgeving.
11
Kies weer voor nieuwe map. Geef deze map de naam Periode 1. Selecteer bij indeling het documenttype PSD. Geef het bestand de naam collegekaart met eigen naam.
Extra: Gebruik een achtergrond met structuur of gebruik een foto. Gebruik een balk om je naam op de plaatsen. Maak een selectie van jezelf en verwijder de achtergrond. Gebruik een Laagstijl.
Afvinklijst Collegekaart Vul het onderstaande schema in voor je de opdracht laat beoordelen Onderwerp
Criteria
Photoshop
Werkbladindeling: Historie, Lagen , Teken, Optiebalk, Gereedschappen. Nieuw bestand: Bestandsnaam, 8,5/5,0 cm, Resolutie 300 dpi, Modus CMYK Lagen: verschillende lagen Rechthoek en teksten Opslaan: PSD / naam Foto: eigen foto, foto optimaal, foto kw1c Uitlijnen: Teksten, logo en foto Schalen: Verhoudingen behouden, Juist formaat foto, logo
Vormgeving
Afvinken
Totaal resultaat
12
2.Huisstijl Voor je bedrijf kies je drie of vier steekwoorden voor de nieuwe huisstijl. Deze drie of vier steekwoorden ga je vertalen naar een kleur. Teken een vorm gevuld met kleur. In de vorm plaats je het woord met de CMYK-code. Hieronder de merkwaarden vertaald naar kleuren: Koning Willem 1 College: wilskracht, rust, extravert, activiteit
3. Logo voor Enterprise. Ontwerp een passend logo voor jouw Enterprise. Ontwerp in drie fasen het logo: start met lettertypes, daarna kleur en tenslotte vormen. Maak een keuze voor het beste logo. Maak met je groep een keuze.
Vijf kenmerken bij het ontwerpen van een goed logo: Authentiek Jij als ondernemer bent uniek. De betrokkenheid en passie die jij hebt voor je product of dienst is echt, die is authentiek en daarom vaak dé reden dat men jou vertrouwd en zaken met je wil doen. Doelgericht Een goed logo is daarnaast ook afgestemd op de wensen van jouw doelgroep, wat is de boodschap die jij richting je doelgroep wilt uitdragen? Tijdloos De verleiding is groot om je bij het ontwerpen van een logo te laten leiden door de laatste nieuwe trends. Toch is dat absoluut niet aan te raden want een logo moet jaren mee kunnen, hoe langer hoe beter. Herkenbaar Een goed logo valt op bij de doelgroep, wordt gemakkelijk door anderen onthouden en zorgt voor herkenning in de markt. Vaak zie je dat een memorabel logo zich kenmerkt door een combinatie van eenvoud en originaliteit. Veelzijdig Tot slot is het heel belangrijk dat je het logo op diverse manieren kan gebruiken zonder dat het zijn kracht verliest. Kan je het bijvoorbeeld gebruiken in zwart-wit en in fullcolour? Of klein gebruiken op een visitekaartje en heel groot op bijvoorbeeld een spandoek? En is het zowel online als offline goed bruikbaar?
13
Ga naar Bestand, Nieuw. Nieuw.; voorinstelling: A5 (Breedte 21 cm, Hoogte 14,8); resolutie: 300 pixels/inch; kleurmodus: CMYK, modus; 8-bits; achtergrondinhoud: wit. Venster, Teken Open het tekstpalet. Ga in de optiebalk naar Venster (Window), daarna Teken (Character).
3a. Verschillende Lettertypen Klik met het tekstgereedschap op je werkblad (geen tekstvak maken). Type de naam van je mini/enterprise Kopieer de naam van je bureau door in het Lagenpalet op de tekstlaag te klikken. Rechtermuisknop, Laag dupliceren. Kies in het palet Teken een ander lettertype. Sla het bestand op als logo-lettertype.psd.
Lettertypes importeren Open http://www.dafont.com. Zoek een lettertype dat bij jouw bureau zou kunnen passen. Klik op Download. Klik daarna op Opslaan. Sla de map op op het bureaublad Selecteer het zip-bestand. Klik met rechtermuis en kies voor alles uitpakken.
Kopieer het bestand naar Configuratiescherm, Lettertype of Fonts. De map Fonts vind je meestal in: Lokale schijf C – Windows-Configuratiescherm. Het geïnstalleerde lettertype kun je nu in Photoshop maar ook in andere programma's op je laptop gebruiken. Maak hier gebruik van het nieuwe lettertype. Subtitel Plaats bij je naam van het bureau (vaak eronder) een woord dat iets vertelt over het bureau zoals marketing , creative, communicatie, zoekmachinemarketing, etc.
14
Geef dit woord een ander lettertype. Bestand opslaan als PSD PhotoShopDocument. Sla het bestand op als logo-lettertype. 3b. Kleur Maak een keuze voor de kleur van jouw huisstijl (zie hieronder info over kleur). Selecteer de naam van je bureau, door met het tekstgereedschap over heen te gaan. Ga in het palet Teken naar Kleur, onder in het palet. Klik erop en selecteer een tekstkleur. Kies één kleur en pas die toe in verschillende tinten passend bij het image van je bureau. Sla je bestand op als logo-kleur.psd.
Blauw : Blauw is de kleur van de lucht en de zee. Een kleur die rust brengt en een frisse uitstraling geeft. Groen : Groen is de kleur die in de natuur het meest voorkomt. Een levendige kleur die ontspannend werkt en frisheid en energie geeft Oranje : Oranje is warm en stimulerend. Zwart : Zwart absorbeert licht en kan daardoor somber werken. Geraffineerd toegepast geeft ze een chique karakter Bruin : Bruin is een aardse kleur die zeer veel prachtige nuances kent. Bruin is warm en een geeft een stijlvolle uitstraling. Geel : Geel is de kleur van de zon, verwarmend, stimulerend en sprankelend. Met geel creëer je vrolijkheid en een positieve sfeer. Rood : Rood is een krachtige vrolijke kleur die energie geeft. Wit : Wit is de kleur van onschuld, luxe en eenvoud. Wit is tijdloos en brengt licht, koelte en ruimte in een vertrek. Paars : Paars is de kleur van emotie. In een vertrek toegepast werkt het kalmerend en stimulerend Grijs : Grijs roept op zich geen emoties op maar kan goed met andere kleuren gecombineerd worden.
15
3c. Vormen Verwerk een vorm in je ontwerp. Ga in de gereedschapsbalk naar de rechthoek. Klik op de pictogram en houd de muisknop langer dan een seconde ingedrukt. Een vervolgmenu verschijnt met: Rechthoek, Afgeronde rechthoek, Ovaal, Veelhoek, Lijn. Verwerk een vorm: rechthoek, ovaal, lijn in jouw logo. Sla jouw bestand op als logo-vorm.psd.
3d. Aangepaste Vormen Bij aangepaste vorm kun je allerlei figuren kiezen. Wil je alle figuren, selecteer aangepaste vormen in de gereedschapsbalk. Ga dan naar de optiebalk, klik op het driehoekje rechts van het woord vorm. Klik daarna op het driehoekje weer rechts. Je krijgt dan een uitklapmenu en selecteer Alle.
16
4. Ontwerp een Visitekaartje Maak een visitekaartje voor het evenementenbureau zowel voor- als achterkant. Gebruik het logo dat je zelf ontworpen hebt en zorg voor een goede uitlijning van de verschillende onderdelen. Gegevens Op een visitekaartje staan de volgende gegevens: Logo; Naam en functie; Adresgegevens bedrijf en privé; T -Telefoonnummer, F - Faxnummer, E - E-mailadres, I – Internet, M – mobiel. Formaat Formaat van het visitekaartje Breedte 170 mm, Hoogte 55 mm. Tekst in verschillende Lagen Type de tekst in afzonderlijke lagen zodat je met je tekst kunt schuiven: Je naam met functie. Het adres Telefoon- en mobilenummer Email en website
Marges en Hulplijnen Geef de randen een marge van 0,5 cm met behulp van hulplijnen. Ga naar Weergave, Nieuwe Hulplijn. Vul de volgende maten in: Verticaal 0,5 cm, 8 cm, 8,5 cm, 9 cm, 16,5 cm; Horizontaal 0,5 en 5 cm.
17
Informatie en Uitlijnen Klik met het tekstgereedschap op je werkblad (geen tekstvak maken). Type de naam, adresgegevens, etc., van het bedrijf en de naam en functie van de persoon. Accentueer je naam door je naam vet te maken of een streepje eronder te plaatsen. Plaatst de teksten tegen de gemaakte hulplijnen. Lijn de teksten links en rechts uit.
Kleur achterkant. Maak met het Rechthoekig selectiekader een selectie van de achterkant. Kies in de Gereedschapsbalk bij Voorgrondkleur de kleur die je op de voorkant hebt toegepast. Maak een Nieuwe Laag. Vul met het gereedschap Emmertje of Alt-Backspace de selectie, achterkant. Tekst achterkant Zet op de achterkant van het visitekaartje een slogan, logo of bedenk een tekst. Opslaan als. Sla je opdracht op als PSD, PhotoShopBestand
18
5. Ontwerp een Flyer Ontwerp een flyer voor de presentatie van je evenementenbureau op de ouderavond. Formaat Ontwerp een flyer Formaat: Hoogte: 148 mm, Breedte: 105 mm, Briefkaart-formaat, A6-formaat. Je mag ook voor een ander formaat of vorm kiezen passend bij de huisstijl. Informatie Maak gebruik van een korte tekst. Vermeld datum en tijdstip. Vermeld de kwaliteiten van het Bureau. Vermeld de website van het evenementenbedrijf. Gebruik kleur of foto op de achtergrond van de tekst. Verwerk het logo op de flyer.
Gebruik eventueel een QR-code op je flyer QR code De letters QR zijn een afkorting van Quick Response ("snelle reactie"). Met een QR-application op je smartphone kun je de code scannen. Afhankelijk van de code krijg je bijvoorbeeld een filmpje, een tekst of een website te zien. De code kun je gebruiken op visitekaartjes, flyers, posters, in tijdschriften, etc. Scan de code om zelf een nieuwe code te kunnen maken.
19
6. Naamkaartje Ontwerp het naamkaartje passend bij de Huisstijl van jouw Evenementenbureau. Ontwerp het naamkaartje passend bij de Huisstijl van jouw Evenementenbureau voor de ouder- en aandeelhoudersvergaderingen. Informatie: Zet je eigen naam, functie en het logo van het evenementenbureau er duidelijk op. Formaat: Formaat 5,5 x 9 cm. Resolutie: 300 dpi. Kleurmodus: CMYK. Hulplijnen Maak gebruik van hulplijnen : verticaal: 0,5, 4,5 en 8,5 cm; horizontaal: 0,5 en 4,5 cm. Kies uit je projectgroep het beste ontwerp en maak deze voor alle leden. Vraag aan je mentor of op de administratie een houder met speld voor het naamkaartje.
20
7. Gadget Ontwerp een gadget passend bij jouw evenementenbureau. Passend gadget Kijk op sites van bedrijven met gadgets, promotiemiddelen, relatiegeschenken. Bijvoorbeeld: www.deble.com/support/promotiemiddelen.html . Plaats je logo op het gekozen gadget. Laat het logo met de vorm meelopen. Hieronder staat een beschrijving om het logo rond te buigen en om het logo in perspectief te plaatsen. Afbeelding buigen. Je kiest in de optiebalk voor Bewerken (Edit), daarna Transformatie (Transform) en tenslotte Verdraaien (Wrap). Photoshop legt een raster over het logo. Plaats het logo op de afbeelding waarop je het logo wilt plaatsen Verplaats de twee bolletjes in het midden totdat het logo de buiging volgt. Als je klaar bent, druk je op Enter.
Logo in Perspectief plaatsen Gebruik Ctrl+T om de opdracht Vrije Transformatie te activeren. Roteer het logo. Sleep vervolgens de hoekgreep linksonder met ingedrukte Shift +Alt + Ctrl-toetsen naar buiten zodat de B parallel staat met de bovenkant. Geef het logo nog een slagschaduw. Druk tenslotte op Return om de transformatie vast te leggen.
21
8. Bedrijfswagen Ontwerp een bedrijfswagen in de huisstijl van jouw evenementenbedrijf met een aflopend logo en tekst. Plakken In Verwerk het logo van je visitekaartje ook op een bedrijfswagen. Zoek een Bedrijfswagen die past bij het café/restaurant. Om het logo aflopend te plaatsen rond het wiel moeten we eerst het logo selecteren. Maak een selectie van het logo en kopieer deze selectie. Ga nu naar de bedrijfswagen. Met de gereedschap Toverstaf maak je nu een selectie van de zijkant van de bedrijfswagen. Geef deze zijkant de juiste Kleur, passend bij de Huisstijl. Ga daarna naar Bewerken, Speciaal plakken, Plakken In.
Aflopend logo en Tekst Door de selectie kun je het logo aflopend, groter dan de bedrijfswagen en achter de wielbak plaatsen. Plaats het logo op de juiste plaats. Tenslotte voeg je tekst toe.
Verwerk het logo, kleur en tekst passend bij de huisstijl ook op andere zijkant, voor- en achterkant.
22
9. Icoon Maak een icoon voor een smartphone met afgeronde hoeken en een tekst op het springboard. Icoon maken voor Smartphone In de meeste gevallen is het app-icoon de eerste kennismaking met de app; het is min of meer het visitekaartje in de app store. Het icoon kan het verschil maken tussen wel aanklikken voor meer informatie of niet. Met andere woorden, daar mag wel wat aandacht aan worden besteed. Vierkant afgerond Iconen zijn vaak gemaakt met afgeronde hoeken (iPhone). Formaat is 200 x 200 pixels, resolutie 72 pixels/inch, RGB. We kiezen in de gereedschapsbalk onder rechthoek Afgeronde rechthoek. Ga naar de optiebalk en kies daar een Straal van 35 px. Kies een kleur in de gereedschapsbalk bij Voorgrondkleur instellen. Teken met het gereedschap Afgeronde rechthoek vanuit de linkerhoek. Hou de Shift-toets ingedrukt waardoor een Vierkant ontstaat met afgeronde hoeken.
Canvasgrootte,Tekst, Laagstijl Vergroot het bestand bij Canvasgrootte met 100 px. Plaats een tekst onder het icoon op het Springboard. Geef de tekst Slagschaduw. Geef het icoontje nog een Laagstijl, Slagschaduw en Schuine Kant en Reliëf.
Enkele tips: Steek energie in een mooi icoon. Geen tekst in icoon Zorg dat je icoon opvalt Gebruik dezelfde kleurstelling als in de app Gebruik niet teveel details Naam van de app op springboard
23
Pagina-App Ontwerp een pagina voor de app in de huisstijl van jouw bedrijf. Verwerk een foto, tekst en het logo op de pagina. Smartphone Open een foto van een Smartphone zonder display. Plaats hulplijnen aan de rand van de display. Open een foto van het café/restaurant waarvoor je de app gaat maken. Selecteer de foto, daarna kopiëren. Ga terug naar de Smartphone en maak een selectie van de lege display. Met Speciaal Plakken, Plakken In plak je de foto met laagmasker in het display-venster.
Logo en Tekst Plaats huisstijlelementen zoals het logo, rand en andere zaken op de foto. Tenslotte maak je nog blokjes om tekst op te plaatsen. Gebruik eventueel een Laagstijl voor de afwerking.
Afvinklijst Pagina App en Icoon Onderwerp Criteria
Afvinken
Pagina App Techniek
72 pixels/inch Hulplijnen Foto, logo, tekst
Pagina App Vormgeving
Kleur, lettertype huisstijl toegepast Zelf ontworpen logo verwerkt op de pagina Afgeronde rechthoeken met tekst Duidelijke communicatie
24
10.Theorie Digitale vormgeving Resolutie voor Beeldscherm en Printwerk Een foto voor beeldschermgebruik heeft een resolutie van 72 d.p.i., een foto voor printgebruik heeft een resolutie 300 d.p.i. De afkorting d.p.i. staat voor: Dots Per Inche. Dit betekent Pixels (puntjes) per Inche (1 inch =2,54 cm). Een afbeelding op een beeldscherm wordt opgebouwd uit lichpuntjes. De afbeelding heeft de beste kwaliteit als iedere inch 72 pixels heeft. Een afbeelding voor printwerk wordt opgebouwd uit inktpuntjes. Deze afbeelding heeft de beste kwaliteit als iedere inch 300 pixels heeft. Een printafbeelding is dus meer dan 4 keer 'zwaarder / groter' dan een beeldschermafbeelding. Gebruik van RGB / CMYK / PMS -kleuren CMYK Als je een ontwerp maakt voor een drukker moet je kieze voor CMYK of PMS. CMYK staat voor Cyaan, Magenta, Yellow en Key (blacK)). De opbouw van deze 4 kleuren wordt weergegeven in percentages inkt die over elkaar heen gedrukt worden (bijvoorbeeld 0% cyaan, 100% magenta, 100% yellow en 0% black wordt een hele felle rode kleur). RGB Rood, Groen, Blauw, niet te verwarren met de primaire kleuren Rood, GEEL en Blauw is de kleurindeling die over het algemeen voor beeldschermen gebruikt wordt. Afhankelijk van de verschillen in kalibratie van monitoren en (kleuren)printers (welke vaak ‘om kunnen gaan’ met RGB bestanden) komt je bestand er op andere machines anders uit te zien. PMS Lettertypes Voor beeldschermgebruik Voor beeldschermgebruik kun je het beste schreefloze (sans serif) lettertypes gebruiken, zoals Arial en Verdana. Ook decoratieve lettertypes zoals Vivaldi en Curlz zijn niet goed voor beeldschermgebruik. Krulletjes, slingertjes, plaatjes en andere onregelmatigheden zien er misschien grappig uit op papier; bij de beeldschermlezer veroorzaken ze vooral irritatie en hoofdpijn. Alhoewel de verschillen tussen browsers steeds kleiner worden, worden lettertypes nog steeds niet in alle browsers hetzelfde weergegeven. Als je op safe wilt spelen, gebruik dan Arial, Verdana of een ander font dat door iedere browser wordt ondersteund Voor papier Op papier worden lettertypen gebruikt zoals: letters met schreven, letters zonder schreven, schrijfletters en fantasievormen, niet westerse lettertypen en lettertypen met plaatjes of speciale symbolen. Een schreef (serif) is een dunne dwarsstreepje aan het uiteinde van een letter. Veelgebruikte lettertypes met schreef zijn Times New Roman, Palitano en Georgia. Schreven benadrukken de horizontale richting en bevorderen de leesbaarheid en worden vooral gebruikt bij lange teksten zoals in een krant. Schreefloos (sans serif) is de aanduiding voor een lettertype zonder schreven, dus zonder de dunne dwarsstreepjes aan het uiteinde van de letter. Een bekend schreefloos lettertype is Arial, Helvetica, Calibri…. Schreefloze letters zijn vooral geschikt voor korte tekstfragmenten: koppen, titels, citaten, enz.
25
Lettergrootte Voor beeldschermgebruik De optimale grootte van online tekst hangt af van zaken zoals kijkafstand, beelschermresolutie en contrast tussen tekst en achtergrond Een regel is dat de tekst groot genoeg moet zijn om alle letters goed van elkaar te onderscheiden, maar klein genoeg om ook de tekst als geheel nog te kunnen waarnemen. Meestal is een grootte van 10 of 12 punten voldoende om aan deze regel te voldoen. Voor papier Omdat je voor papier een veel zwaardere resolutie nodig hebt dan voor beeldschermgebruik, zul je je document uitzoomen om te kunnen ontwerpen. Een uitgezoomde letter van 11 punt lijkt dan onleesbaar. Belangrijk is de leesbaarheid te controleren op 100% schermweergave. Een lettergrootte van 11 punt is standaard voor A4-gebruik. Alineateksten voor een folder of flyer zijn meestal kleiner (10 of 9 punt). Layout Layout betekent opmaak van een document. Belangrijk bij het maken van een layout zijn uitlijnen en gebruik van marges. Uitlijnen betekent dat je afbeeldingen en teksten links rechts of in het midden laat beginnen. Bij links en rechts uitlijnen creëer je eenheid en rust door teksten en afbeeldingen op eenzelfde breedte of hoogte te laten beginnen. Met behulp van hulplijnen kun je uitlijnen. Marges witruimte rondom de zetspiegel zijn van belang zodat de layout een ruimtelijk karakter krijgt (niet te vol lijkt). Afloop. Als er in de opmaak foto's, tekst of illustraties tot aan de rand of over de papierrand komen, dan moet je rondom het document van 3 mm Afloop (bleed) voorzien. Dus boven 3 mm extra ruimte, onder 3 mm enz.. Deze afloop is noodzakelijk om het drukwerk mooi te kunnen snijden zonder dat er een wit lijntje aan de randen zichtbaar is. JPEG / GIF / PSD Als je een ontwerp hebt gemaakt in Photoshop sla je dit op als Photoshopbestand (PSD). Het heeft als voordeel dat je de lagen nog kunt veranderen. Een nadeel is echter dat het bestand te zwaar is om te gebruiken voor email of andere internettoepassingen. Dan sla je een document dat op als JPEG of GIF. JPEG gebruik je voor een afbeelding met heel veel kleurnuances zoals een foto. Gif gebruik je voor een afbeelding met weinig kleurnuances en strakke lijnen zoals een tekst of een grafische afbeelding. Copyright Als je eigen foto’s gebruikt is het van belang dat de persoon op de foto toestemming geeft. Als je foto’s van anderen gebruikt is het van belang dat de fotograaf hier toestemming voor geeft. Waar vind je foto’s op internet met toestemming van de fotograaf? Bij www.flickr.com/creativecommons/ Dit betekent: Je mag de foto’s gebruiken als je de naam van de fotograaf vernoemt.
26
Bij www.google.nl Afbeeldingen. Kies voor: geavanceerd / safe search / gebruik gematigd filter / gelabeld voor commercieel hergebruik inclusief aanpassing.
Papierformaten: Overzicht DIN A-formaten A0: breedte 84 x hoogte 118,8 cm A1: breedte 59,4 x hoogte 84 cm A2: breedte 42 x hoogte 59,4 cm A3: breedte 29,7 x hoogte 42 cm A4: breedte 21 x hoogte 29,7 cm A5: breedte 14,85 x hoogte 21 cm A6: breedte 10,5 x hoogte 14,85 cm
27
Beoordeling: De werkstukken worden in de laatste les beoordeeld. Voor iedere opdracht kun je tien punten halen. Het totaal aantal wordt gemiddeld en is het eindcijfer voor periode 1.
Planning: Wk 35 (26 aug.) Wk 36 (02 sept.) Wk 37 (09 sept.) Wk 38 (16 sept.) Wk 39 (23 sept.) Wk 40 (30 sept.) WK 41 (07 okt.) Wk 42 (14 okt.) Wk 43 (21 okt.) Wk 44 (28 okt.)
Collegekaart Collegekaart, Huisstijl, logo Lettertypen Logo Kleur, Vormen, Keuze logo Visitekaartje Flyer Icoon en App Naamkaartje, Gadget, Bedrijfswagen Herfstvakantie Beoordeling Toetsweek
28
