1

WORDPRESS EN SELECTIES

HET ONTWIKKELEN VAN PAGINA’S VOOR INTERNET EN/OF INTRANET ONTWERP EN REALISATIE VAN VOORLICHTINGS-, PROMOTIE- EN/OF PR-MATERIAAL

DIGITALE VORMGEVING PERIODE 5 – 2013/2014

FONS GOOSEN / CORRIE VAN DE KROEF

MARKETING & COMMUNICATIE - DIGITALE VORMGEVING

2

Voorwoord Deze periode gaan we een website maken in WordPress. De site is bedoeld als portfolio. Op deze site presenteer je de kennis en vaardigheden die van belang zijn voor je toekomstige beroep. Kennis en vaardigheden die je nu hebt en gedurende het jaar zult uitbreiden en ontwikkelen. In tegenstelling tot eerdere projecten bij vormgeving telt de inhoud mee in de beoordeling. Inhoud, techniek en vormgeving zijn in dit project onlosmakelijk met elkaar verbonden. Na het maken van de website gaan we selecties maken met de gereedschappen zoals de pen, snelle selectie en magnetische lasso. Het is belangrijk deze selectiegereedschappen goed te beheersen. Bij digitale vormgeving gaat het vooral om het goed vormgeven van een promotiemiddel en gebruik je je gereedschappen als hulpmiddel. Daarom zal bij het maken van het affiche en de banner ook aandacht gegeven worden aan compositie, uitlijnen, aandachtspunten en communicatiewaarde. Veel plezier en succes met de opdrachten. Fons Goosen en Corrie van der Kroef.

3

Inhoudsopgave Voorwoord blz 2 Inhoudsopgave blz 3 WordPress-site blz 6-19

Opdracht/WordPress blz 4 1. Account aanmaken blz 5

Dashbooard blz 6 2. Weergave | Thema kiezen blz 7 3. Verschil Berichten en Pagina’s blz 8

Pagina’s | Nieuwe Pagina blz 8 4. Weergave | Header blz 9 5. Weergave | Achtergrond blz 10 6. Weergave | Menu blz 11 7. Pagina’s | Subpagina blz 12 8. Berichten | Nieuw Bericht blz 13 9. Pagina’s | Tekst blz 14 10. Pagina’s | Galerij blz 15-16 11. Ontwerp Favicon blz 17-18

Planning, beoordeling, afvinklijst blz 19

Selecties blz 20-33 0 Selecties blz 20 1A. Pengereedschap blz 21-22 1B. Banner blz 23-24 2A Snelle Selectie, Magnetische Lasso blz 26-29 2B Filmposter blz 25-30 3 Famous Faces blz 30-32

Planning blz 33

4

Opdracht/WordPress

Opdracht Maak een website voor jezelf waarop je onderstaande pagina’s gaat plaatsen. Pagina’s: o Welkom, Home…Voorstellen aan toekomstige stagebieder/werkgever: Wie ben je; Wat doe

je; Wat zijn je interesses en ambities. Uiteraard toegespitst op je toekomstige beroep en niet privé.

o CV (Curriculum Vitae) of About Me o Projecten: Korte omschrijving projecten; (behaalde) Leerdoelen; Bevindingen/Conclusies;

Producten; Foto’s/Afbeeldingen o Digitale Vormgeving: Producten; Omschrijving van producten; Geleerde

vaardigheden/technieken. o Contact Subpagina’s: Bij Projecten en bij Digitale Vormgeving ga je twee subpagina’s maken. Naast de reader kun je ook gebruiken van de handleiding voor WordPress op internet: http://www.handleiding.wordpress.com Andere sites: http://lesin.wordpress.nl http://wptipstrucs.wordpress.com/. http://digitalevormgeving.wordpress.nl

5

WordPress.com | Account Opdracht 1, WordPress Maak een account aan in WordPress.com. Ga naar www.wordpress.com.

Account Maak een account aan. Vul in:

E-mailadres.

Gebruikersnaam: je gebruikersnaam moet minimaal vier karakters zijn en mogen alleen bestaan uit kleine letters en cijfers.

Wachtwoord: hiervoor mag je hoofdletters, kleine letters, cijfers en symbolen gebruiken.

Blog Adres: kies een adres voor je blog (WordPress controleert het adres). Gratis Blog, in de tweede rij alleen het vinkje bij Gratis Blog. Klik daarna op Creëer Blog. Email Nadat je een account hebt aangemaakt en op Creëer Blog hebt geklikt, ontvang je een email. Activeer nu je account.

Inloggen en beheren Het adres uit dit voorbeeld is nu: http://digitalevormgeving.wordpress.com Wil je inloggen als beheerder dan plaats je achter dit adres: wp-admin Dus: http://digitalevormgeving.wordpress.com/wp-admin. Je komt in het volgende inlogvenster:

6

Site bekijken | Dashboard Om te zien hoe je site er uitziet, klik je in de bovenbalk op de naam van je site. Als je weer terug wilt naar het Dashboard klik je weer op de naam van je site links in de hoek, onder deze naam verschijnt het woord Dashboard en klik op het woord Dashboard.

Dashboard bestaat uit drie onderdelen:

1. Dashboard algemeen.

2. Menu-items die met het plaatsen van content op de website te maken hebben.

3. Menu-items die met de werking en het uiterlijk van de website te maken hebben

7

Weergave | Thema’s Opdracht 2, Thema Probeer een aantal thema’s uit en maak een keuze voor een thema Bij WordPress kun je meer dan 1200 gratis thema’s vinden. Daarnaast zijn er ook bedrijven die betaalde thema’s aanbieden. Maak een keuze welk thema voor jou passend is. Kies bij Weergave in het linkermenu: Thema’s. Je kunt bladeren in thema’s: Willekurig, A-Z, populair, Newest, Premium, Vrienden van WP.com. Je kunt ook gericht zoeken via Functie filters op Kleur, Kolommen, Breedte en Eigenschappen.

Bekijk verschillende thema’s: Klik je op Voorbeeld. Sluit daarna het voorbeeld door het geopende venster te sluiten.

Activeren Als je voor een thema kiest klik je op Activeren bij het door jou gekozen thema. Het thema wordt geactiveerd. Dit kan even duren. Bekijk het thema door weer te klikken op de naam van je site in de linker bovenhoek. Vind je het ontwerp toch tegenvallen, kun je op dezelfde wijze voor een ander thema kiezen. Ga weer naar Dashboard Afhankelijk van het Thema dat je gekozen hebt kun je bij Weergave een eigen Header (Kop) plaatsen, een eigen Achtergrond bepalen, bij Custom Design, Lettertypes aanpassen, etc

8

Pagina’s | Nieuwe Pagina Opdracht 3, Pagina’s Maak vijf onderstaande pagina’s voor je site met een contactpagina die als laatste staat in de rij. o Welkom, Home…Voorstellen aan toekomstige stagebieder/werkgever: Wie ben je; Wat doe

je; Wat zijn je interesses en ambities. Uiteraard toegespitst op je toekomstige beroep en niet privé.

o CV (Curriculum Vitae) of About Me o Projecten: Korte omschrijving projecten; (behaalde) Leerdoelen; Bevindingen/Conclusies;

Producten; Foto’s/Afbeeldingen o Digitale Vormgeving: Producten; Omschrijving van producten; Geleerde

vaardigheden/technieken. o Contact Klik in het linkermenu op Pagina’s – Nieuwe pagina. Geef de pagina een naam. Pagina Bewerken Geef in het eerste veld de titel. In het grote vak kun je de inhoud typen. Om de pagina op te slaan zonder te publiceren, klik je op Opslaan als Concept (Save Draft). Wil je de pagina opslaan en direct publiceren, klik dan op Publiceren (Publish) of Bewerken. Wil je de pagina bekijken klik op Voorbeeld (Preview). Pagina- attributen instellen Hoofd: hier geef je aan of een pagina een hoofd- of sub-pagina is. Template: is afhankelijk van theme. Volgorde: Via deze optie kun je de volgorde van de pagina’s aangeven in de navigatiebalk of bij de subpagina’s onder elkaar. Publiceer de pagina’s.

9

Weergave | Header Opdracht 4A, Header-Ontwerp Ontwerp een header voor je website in Photoshop. Ieder thema heeft een eigen maat voor de header. Thema Twenty Ten heeft het formaat: 940 × 198 pixels, 72 pixels/inch, RGB. Thema K2-lite heeft het formaat: 780 × 200 pixels, 72 pixels/inch, RGB. Ga naar Dahboard, Weergave, Header en kijk hoe groot de header voor jouw website moet worden. Schrijf hier het formaat: ……………………………………………………..

Header. Maak in Photoshop de Header en verwerk in de header, je naam, je huisstijlkleuren, een passende achtergrond Opdracht 4B, Header Plaats de header die je hebt gemaakt in de WordPress-site Uploaden Om zelf een header te plaatsen ga je naar Weergave (Appearance). Kies voor het menu-item Header. Hier kun je een eigen gemaakte Header uploaden. Je kunt een Header in Photoshop maken. Zorg dat deze header het juiste formaat heeft. Ieder Theme heeft een andere maat. In het voorbeeld is dat 984 x 242 pixels, 72 pixels/inch. Sla je header op als Jpeg. Een andere manier is een foto uploaden en bijsnijden. Nadat het bestand is geüpload dan zie je het bovenin bij Voorbeeld staan. Bij Headertekst haal je eventueel het vinkje weg. Tenslotte weer Wijzigingen opslaan.

10

Weergave | Achtergrond Opdracht 5, Achtergrond Geef de site een passende kleur of afbeelding voor de achtergrond. Hier kun je een Kleur of een Afbeelding als Achtergrond plaatsen. Bij Achtergrondinstellingen kun je de Achtergrondkleur bepalen. Je kunt de code van de kleur intypen of een kleur kiezen. Je kunt ook zelf een achtergrond maken in Photoshop maken en uploaden.

Achtergrondafbeelding. Je kunt achter jouw website een Achtergrondafbeelding plaatsen. Bij Afbeelding uploaden ga je naar Bladeren naar jouw afbeelding. Daarna ga je naar Uploaden. Tenslotte Wijzigingen opslaan. Tenslotte kun je bij Weergave-instellingen bepalen: Positie: Links, Gecentreerd of Rechts; Herhalen: Geen herhaling, Uittrekken, Horizontaal naast elkaar; Let op om een afbeelding volledig achter je blog te plaatsen heeft het wel een bepaalde grootte nodig. Ik heb een groene kleur geplaatst met een grootte van 1800 x 1252 pixels.

11

Weergave | Menu Opdracht 6, Menu Maak een menu aan en plaats de pagina’s in de juiste volgorde in het menu. Om de pagina’s te plaatsen moet je naar Menu’s bij Weergave. Om te beginnen moet je een Menunaam invoeren bij Menunaam. Daarna klik op Menu aanmaken. Na het opslaan zie je links het veld Thema locaties. Kies uit de uitklaplijst de naam en klik op Opslaan. Plaats een vinkje bij Automatisch nieuwe top-level pagina´s toevoegen.

Pagina aan het menu toevoegen Ga naar Weergave en kies Menu’s. Selecteer, plaats een vink voor de nieuwe pagina in het blok Pagina’s. Klik op de knop Aan menu toevoegen (Add to Menu). Tenslotte sla alles op met de knop Menu opslaan. Kijk op de website of controleer of alles klopt.

12

Pagina’s | Subpagina’s Opdracht 7, Subpagina Maak een uitklapmenu door een subpagina aan een pagina toe te voegen. Maak twee subpagina’s voor zowel Projecten als voor Digitale Vormgeving. Pagina’s | Nieuwe pagina Ga naar Alle pagina’s – Klik op Nieuwe Pagina. Type de naam van de subpagina. Pagina-attributen Rechts zie je het menu: Pagina-attributen. Zoek bij Hoofd (Meta) de pagina waaraan je de subpagina wilt toevoegen. Geef bij Volgorde (Order) de volgorde van de subpagina’s aan nummer 0, nummer 1 etc. Klik boven Pagina-attributen op Publiceren.

Weergave | Menu Volgorde van de pagina’s Ga in het linkermenu naar Weergave – Menu’s Vink bij Pagina’s (links) de nieuwe pagina’s aan. Kies voor Aan menu toevoegen. Rechts van de pagina’s zie je nu alle pagina’s afzonderlijk staan. Deze pagina’s kun je in de juiste volgorde slepen. Scrol weer naar boven. Vink bij Themalocaties, bij Primaire navigatie het door jou gemaakte menu aan. Kies voor Menu opslaan.

13

Welkom bericht Maak je blog helemaal leeg. Opdracht 8, Berichten Schrijf een welkom bericht op je berichtenpagina in plaats van het bericht Hello world. Berichten, Links, Pagina Ga in het linkermenu naar Berichten, Alle berichten. Ga met je muis over het bericht Hallo allemaal en klik op Prullenbak. Ga in het linkermenu naar Links, Alle Links. Je kunt deze allemaal verwijderen door bij Naam een vinkje te plaatsen. Klik vervolgens op Acties, Verwijderen. Klik vervolgens op Uitvoeren. Ga in het linkermenu nu naar Pagina’s Ga met je muis over Voorbeeld pagina en klik op Prullenbak.

Je eerste Bericht Ga naar het Dashboard. Klik links in het menu op Berichten en dan op Nieuw bericht. Het is ook mogelijk om boven in de menubalk op Nieuw Bericht te klikken Begin met het vullen van de Titel en start dan met het Schrijven in het venster onder de titel. Sla tijdens het schrijven op als concept. Plaats het bericht in de gewenste Categorie, rechts op je scherm. Lees verder Lange blogberichten die op elkaar volgen, zorgen ervoor dat de webpagina onoverzichtelijk wordt. Dit probleem kunnen we oplossen, door de inhoud van het bericht te splitsen in een zichtbaar bovengedeelte en een onzichtbaar volgend gedeelte, dat pas zichtbaar wordt, nadat op de link Lees verder geklikt wordt.. Werkwijze Maak de inhoud van uw bericht op. Zet uw cursor in het tekstvak op de plaats waar u de inhoud wenst te onderbreken Klik vervolgens in de Wysiwyg editor op de pictogram Insert More Tag.

Er verschijnt dan een lijn met aan het eind More (zie hierboven). Klik in de rechterzijde op Publiceren om het bericht op te slaan Het resultaat ziet er zo uit, klik op de tekstlink Lees verder: Lees verder

14

Pagina’s | Tekst Opdracht 9, Lettertype Verander kleur en grootte van je letters bij pagina’s Lettergrootte en kleur van letters kun je aanpassen op de pagina.

Weergave | Custom Design In Custom Design kun je je Lettertype (Fonts) aanpassen. Ga naar weergave en klik op Custom Design. Ga vervolgens naar Fonts. Je kunt daar een keuze maken voor Fonts voor de titel, koppen en de body. Voor het aanpassen van je lettertype moet je wel betalen, vanaf 30 dollar per jaar. De grootte kun je wel zonder te betalen aanpassen.

15

Pagina | Galerij WordPress heeft een standaard Galerij-functie. Hiermee toon je één of meerdere afbeeldingen binnen een bericht of pagina. Opdracht 10, Galerij Voeg een Galerij toe aan één van je pagina’s. Pagina | Nieuwe Pagina | Media toevoegen Kies voor Nieuw bericht of Nieuwe Pagina Klik op Media toevoegen. Bestanden uploaden. Bestanden selecteren. Let op dat het bestand de juiste extensie heeft, PSD- niet, JPG wel. Rechts zie je nu het bestand dat je hebt geupload. Type bij Titel de naam ven de foto. Uit Uitlijning kun je nog aangeven; Geen, Links, Gecentreerd of Rechts. Bij Afmeting geef je grootte aan: thumbnials, gemiddeld, groot, volledige grootte. Klik tenslotte op In pagina invoegen

Media toevoegen | Galerij aanmaken Klik nog een keer op Media Toevoegen. Rechts onder het woord Media toevoegen zie je nu Galerij aanmaken. In het midden staan alle bestanden die je hebt ingevoerd. Rechts staan de bijlagedetails. Galerij-instellingen Selecteer nu een aantal foto’s die je hebt ingevoerd door erop te klikken; er verschijnt een vinkje rechtsboven op de foto. Klik nu rechtsonder op Een nieuwe galerij aanmaken. Rechts zie je Gallery-instellingen. Kies het gewenste aantal Galerijkolommen, tussen 1 en 9.

16

Kijk op jouw blog naar de afbeeldingen. Klik op een afbeelding en je krijgt een grotere variant te zien. Je kunt dan met een pijltjestoets naar de andere afbeeldingen bladeren

Galerij bewerken Klik op gallery link. In de linkerbovenhoek zie je hetzelfde teken met de tekst Galerij bewerken. Klik daarop en je je Galerij bewerken.

Slideshow Maak een galerij. Klik dan rechts op type en kies Slideshow en vervolgens Galerij bijwerken.

17

Instellingen | Algemeen | Blogicoon/Favicon Opdracht 11, Favicon Maak een duidelijke Favicon voor je site en plaats je ontworpen Favicon in de site..

Wat is een favicon eigenlijk? Een favicon is een klein icoontje dat je vooraan in de adresbalk van je browser ziet staan en ook vaak in je favorietenlijst en bladwijzers. Het is eigenlijk niets anders dan een mini-afbeelding die bij een website hoort. Het betekent dan ook dat je icoontje eenvoudig moet zijn: details gaan gauw verloren. Veel favicons gebruiken alleen een letter zoals Google. Ontwerp Het onderstaande formaat is goed te gebruiken. Het belangrijkste is dat je een vierkant gebruikt. Formaat: 250 x 250 pixels, resolutie: 72 pixels/inch, RGB. Voorbeelden van Favicons:

Vier Favicons van Google in de afgelopen jaren en enkele andere favicons van social media.

Nieuwe favicon Google. Favicon op site Een favicon van een site is het kleine icoontje dat in de adresbalk verschijnt naast de URL. Het favicon geeft een extra mogelijkheid aan de webmaster om de site een visuele herkenning te geven.

Klik in het linker menu onderaan op Instellingen – Algemeen. Algemene instellingen zoals Titel, Subtitel, Datum, Tijd en Blogicoon kun je hier instellen. Vergeet niet onderaan dit menu: Wijzigingen opslaan.

18

Uploaden Ga naar Instellingen Algemeen. Rechts kun je je Blog Foto / Icoon plaatsen. Blader naar je Foto of Icoon (jpeg of png) Kies het bestand en Upload plaatje. Wijzigingen opslaan.

19

Planning: Wk 35 (26 aug.) Account maken, Thema Kiezen, Dashboard, Pagina’s Wk 36 (02 sept.) Ontwerp Header, Achtergrond Wk 37 (09 sept.) Menu, Subpagina, Berichten, Tekst Wk 38 (16 sept.) Galerij, Favicon De beoordeling. Je WordPress-site wordt beoordeeld op de volgende onderdelen: Alle onderdelen,

Alle onderdelen zoals hierboven genoemd, moeten in je WordPress-site zijn verwerkt (per gemist onderdeel twee punten in mindering) (20 punten).

De inhoud De inhoud van je WordPress-site moet duidelijk, overzichtelijk, passend en zonder spellingfouten zijn gemaakt (10 punten). De website moet een duidelijke inhoud hebben die op de pagina’s tot uiting komt.

De vormgeving De vormgeving van thema, header, achtergrond, favicon/blogicoon, kleur tekst van je WordPress-site moet passen bij de site. De site moet overzichtelijk, passend en een eenheid in stijl hebben (10 punten).

Afvinklijst Wordpress site:

Onderwerp Afvinken

Vormgeving Site

Header Zelf ontworpen

Favicon Duidelijk

Achtergrond Passend

Elementen Site

Thema Thema met header

Pagina’s Minimaal vier

Subpagina In Menu verplaatst

Welkom bericht

Contactpagina Laatste knop in de navigatiebalk

Galerij Minimaal vier foto’s Kolom, Titel

Inhoud

Berichten en Pagina’s Duidelijke inhoud van de site

Extra

20

Selecties | Selecties Selectiekaders Selectiekadergereedschappen zijn ideaal om selecties van symmetrische vormen te maken. Lasso-gereedschappen Lasso-gereedschappen zijn ideaal voor het maken van selecties van ongelijkmatige gevormde objecten. Toverstaf en Snelle selecties Toverstaf is een speciaal selectiegereedschap dat automatisch een selectie maakt. Door de tolerantie te verhogen of te verlagen kun je een groter of kleiner kleurbereik selecteren. Met Anti-aliased maak je de randovergangen vloeiend. Aangrenzend (Contiguos) beperkt de selectie tot alleen aangrenzende kleuren. Met het gereedschap Snelle selectie maak je gemakkelijk selecties door het gedeelte dat je wilt selecteren te schilderen. De gevoeligheid van het gereedschap kun je instellen. Pengereedschap De Pen is het meest precieze selectiegereedschap van Photoshop. Het wordt ook gezien als het meest complexe, omdat het op een heel andere manier werkt dan de overige selectietools.

21

Selecties | Pen Gereedschap Opdracht, Pengereedschap Maak van de ballon een selectie met het selectiegereedschap Pen en zet de selectie op een aparte laag.

Ballon Klik op het gereedschap Pen (P) in de gereedschapsbalk En zorg dat je in de optiebalk de tweede selectie Paden aan hebt staan. Met Tab gaan we de paletten uitzetten. Met Z zoom je in op de foto. Met Spatiebalk ontstaat er een handje waarmee je de foto kunt verschuiven. De selectie die we gaan maken proberen we aan de binnenkant van de rand te maken zodat je niet de omgeving meeneemt.

Selectie Maken Klik op P om het Pen gereedschap aan te zetten. Klik op de Ballon, klik verder op en houdt de muis ingedrukt zodat je een bocht kunt maken. Laat de muis los als je tevreden bent. Van de as haal je het rechtse deel weg. Klik op het middelste punt van de as met de Alt-toets ingedrukt, het rechtse deel verdwijnt. Maak een volgend punt op dezelfde wijze. Punt zetten, muis ingedrukt, loslaten als de vorm goed is, met Alt ingedrukt op het middelste punt klikken etc etc etc. Selecteer nu met de Pen de hele ballon tot je weer bij het beginpunt bent.

22

Paden We drukken weer op Tab om alles aan te zetten. Selecteer bij Venster in de optiebalk Paden. We gaan nu het pad omzetten in een selectie. Eerst gaan we het pad opslaan. Klik rechtsboven op het driehoekje. Kies Pad opslaan Geef het Pad de naam Ballon. Kies vervolgens Selectie maken en kies een Doezelstraal van 2 pixels.

Achtergrond verwijderen Ga naar Selecteren in de optiebalk en kies Selectie omkeren. En klik op Delete of Backspace. Je houdt nu de selectie over. Verplaats de ballon naar de onderkant en met Alt ingedrukt kun je de ballon op een andere Laag plaatsen.

23

Selecties | Pen Gereedschap | Banner Opdracht, Banner Maak een banner voor een product met prijs. Het product moet met de pen zijn uitgesneden. De banner moet uitgelijnd zijn en in de sfeer van promo.nl zijn gemaakt. Banner De banner moet bestaan uit:

Product uitgesneden met de Pen;

Prijs in een Rondje met passende Kleur;

Tekst en Koptekst;

Kleuren van de Huisstijl van promo.nl;.

Gloed buiten bij product, tekst en prijsrondje. Product Open een foto van een strak vormgegeven product. Maak met het Pengereedschap een selectie van het product. Begin met vergroten, minimaal 100%. Ga naar Paden, geef het pad een naam en maak er een selectie van (zie vorige opdracht). Kopieer de selectie naar een aparte Laag met Ctrl+J.

Banner Het formaat wat je kunt gebruiken is 19 cm breed x 10 cm hoog, 72 pixels/inch, RGB. Deze keer 72 pixels/inch en RGB omdat de banner wordt gebruikt op een website en niet wordt gedrukt.

24

Uitlijnen en Marges Bepaal eerst de marges. Lijn tekst en afbeelding uit. Geef het geheel de sfeer van een banner van promo.nl Geef de onderdelen een Laagstijl. Bij de beoordeling moet je bij Paden je pad laten zien voor het verkrijgen van een voldoende beoordeling. Afvinklijst promo.nl: Vul het onderstaande schema in voor je de opdracht laat beoordelen

Onderwerp Criteria Afvinken

Bestandsgrootte 19 cm x 10 cm, resolutie in 72 pixels/inch, RGB

Kwaliteit foto Grootte Scherpte Opwaardering met aanpassingen / niveaus

Product-selectie Uitsnede met pengereedschap Selectie van Pad maken Selectie op een aparte laag plaatsen

Compositie, Uitlijning, Gebruik linialen, Teksten en Foto uitlijnen Hanteren van Marges

Laagstijl Gebruik gloed buiten rond voorwerp, tekst en prijsrondje

Kleurgebruik Eenheid in foto en tekst

Tekstgebruik Koptekst Tekst over product

Overige Huisstijl Promo.nl

25

Selecties | Snelle Selectie / Magnetische Lasso Opdracht, Filmposter Maak een Affiche voor een film…... Maak de verschillende personen vrijstaand met snelle selectie en magnetische lasso en plaats ze in een compositie met tekst. Poster Zoek foto’s van personen die bij elkaar horen. Het affiche moet bestaan uit de volgende onderdelen:

1. Tenminste drie personen die je met één van de selectietechnieken hebt vrijstaand gemaakt.

2. De naam van de film. 3. Informatie over de film, namen hoofdrolspelers etc. 4. De datum dat de film in première gaat

Verwerk de bovenstaande onderdelen in een kompositie op het affiche. Formaat; A4, 21 x 29,7 cm, CMYK, 300 pixels/inch. Selectietechnieken: Gebruik de selectietechnieken Magnetische lasso en Snelle selectie. Nadat de selectie is gemaakt maak je gebruik van Randen verfijnen zodat de selectie niet rafelig meer is.

Compositie In de bovenstaande voorbeelden is gebruik gemaakt van een driehoek compositie.

26

Snelle selectie In deze opdracht gaan we werken met het Snelle Selectie gereedschap. Dit gereedschap staat onder de Toverstaf op de gereedschapsbalk. Zorg dat de Grootte op 10 px staat en de Hardheid op 100%. Zet in de optiebalk een vinkje voor Monster nemen van alle lagen en zet een vinkje voor Automatisch verbeteren.

Selectie, Inzoomen Schilder met het Snelle selectie gereedschap over de persoon Je ziet dat de persoon wordt geselecteerd. Zoom in naar 200% en kijk of alles is geselecteerd. Plus-selectie (Shift), Is niet alles geselecteerd dan gebruik de snelle selectie met Shift om delen toe te voegen, zoals in het voorbeeld een deel van het haar. Min-selectie (Alt) Met de Alt-toets ingedrukt kun je delen weghalen, zoals in het voorbeeld een deel van de auto.

Wil je kleine delen selecteren zoals in het voorbeeld een haarlok. Verklein dan de grootte van je selectie naar bv. 5 px. Zoom goed in zodat je de selectie goed kunt bekijken. Speel met Shift en Alt-toets, met toevoegen en verminderen. Schilder met het snelle selectiegereedschap.

27

Rand Verfijnen Zoom weer uit met Ctrl+0. Klik weer op het gereedschap Snelle selectie Ga in de optiebalk naar Randen Verfijnen. Kijk bij de Weergavemodus naar de verschillende mogelijkheden. Ik heb gekozen voor Op wit. Weergavemodus, Randdetectie, Rand aanpassen Kies een optie bij Weergeven, bij op zwart kun je goed de rand zien Probeer dan de opties bij Randdetectie de Straal. Probeer daarna de opties bij Rand aanpassen: Vloeiend (Liquid), Doezelaar(Feather) en Contrast uit. Klik op OK.

Laag via kopiëren Kopieer de selectie naar een nieuwe Laag met Ctrl. + J. Je hebt nu een kopie van het geselecteerde object in een nieuwe laag. Maak de onderliggende laag Onzichtbaar door het Oogje uit te vinken.

28

Magnetische Lasso De Magnetische Lasso is bedoeld voor een snelle, door de computer gestuurde, selectie. Omdat de Magnetische lasso van kleurverschillen uitgaat bij het kiezen van een selectie, kun je deze lasso vooral gebruiken bij een object dat voldoende contrast heeft met de achtergrond. Afbeelding Kopieer of dupliceer de laag van de originele afbeelding. Lagen, Rechtermuis, Laag dupliceren. Delete, Zoom en Spatiebalk Zoom voordat je begint in op de persoon. Na het aanklikken van het beginpunt beweeg je de muis langs de zijkant van de persoon. Bij voldoende contrastverschil selecteert de magnetische lasso de persoon zonder te klikken. Met Delete kun je fout geplaatste ankerpunten verwijderen. Door op de Spatiebalk te klikken komt er een handje tevoorschijn, hiermee kun je de afbeelding verplaatsen.

Uitbreiden (Shift) en Verminderen (Alt) Als eenmaal de selectie is gemaakt kun je de selectie handmatig uitbreiden door een nieuwe selectie te maken met ingedrukte Shift-toets. Naast de Magnetische lasso zie je een plus. De selectie kun je handmatig verminderen door een nieuwe selectie te maken met ingedrukte Alt-toets. Naast de Magnetische lasso zie je een min.

Randen Verfijnen Ga in de optiebalk naar Randen verfijnen. Of in de optiebalk naar Selecteren - Randen (of hoeken )verfijnen ( Refine edges). Hier kun je de uitsnede vloeiender maken. Zie snelle selectie. Laag via kopiëren Kopieer de selectie naar een nieuwe Laag met Ctrl. + J. Je hebt nu een kopie van het geselecteerde object in een nieuwe laag. Maak de onderliggende laag Onzichtbaar door het Oogje uit te vinken. Verwerk de persoon in het affiche.

29

Compositie Maak een compositietekening van jouw filmposter met lijnen en ovalen (zie voorbeeld).

Als belangrijkste aandachttrekker in deze filmposter is het gezicht van James Bond.

De aandacht gaat daarna van het gezicht van James Bond naar de tekst 007, de rennende persoon en

de naam van de film Golden Eye.

Tenslotte zijn twee vrouwen naast het gezicht belangrijke aandachtstrekkers.

Wanneer je meer geïnteresseerd bent, ga je kijken naar de brand en alles wat tussen de gezichten en de

naam van de film staat.

In de compositie lopen twee diagonale lijnen van boven naar beneden die samen een driehoek vormen.

Het gedraaide lichaam en de hand bepalen de diagonale lijnen. Afvinklijst filmposter Vul het onderstaande schema in voor je de opdracht laat beoordelen

Onderwerp Criteria Afvinken

Bestandsgrootte 29,7 x 21 cm resolutie in 300 pixels/inch, CMYK

Kwaliteit foto’s Grootte Scherpte Opwaardering met aanpassingen / niveaus

Product-selectie Selectie van Snelle selectie en Magnetische lasso Selectie op aparte laag Rand verfijnen

Vormgeving Compositie Uitlijning

Overige Compositietekening

30

Famous Faces Bekijk de animatie bij http://www.takkoda.com Het is de bedoeling dat je zelf een soortgelijke make-over maakt. Je maakt een combinatie van een dier en een bekende persoon. Kies hiervoor een bekend persoon. Hoe uitgesprokener de persoon wat betreft kleding, haardracht en accessoires is des te makkelijker de make-over. Ga op zoek naar een portret van de gelukkige. Hij of zij moet recht van voren (frontaal) gefotografeerd zijn. Afbeeldingsformaat: Formaat A6, 10,5 x 14,85 cm, 300 pixels/inch, CMYK Kijk goed naar het portret:

- Wat zijn belangrijke gezichtskenmerken (grote ogen – spitse neus – wild haar - etc.)) - Typische blik (verbaasd – streng – verdrietig - etc.)) - Kenmerkend kledingstukken (bril – hoedje – stropdas- etc.)

Google Geavanceerd Bedenk welk dier het beste bij de bekende persoon past.. Ga op zoek naar een foto van dit dier. Ook van het dier heb je een portretfoto frontaal nodig. De foto moet minimaal even groot zijn. Zoek in Google Geavanceerd boven 800 x 600 px. Plaats beide foto’s op een aparte laag in 1 document. Dupliceer de laag met de foto van de bekende persoon.

Selecties Open de foto van de bekende persoon in Photoshop. Selecteer de kleding en de haren, hoed etc. Een selectie kun je eenvoudig maken met de snelle selectie of magnetische lasso. Kopieer de selectie naar een aparte laag met Ctrl+J. Je kunt de selectie ook naar een aparte laag verplaatsen met Shift+ Ctrl+J. af.

31

Het dier toevoegen Nadat je de onderdelen op een aparte laag hebt, ga het dier erachter plaatsen. Open de foto van je dier. Sleep de laag van het dier in het document van je vip. Stem de selecties op elkaar, verwijder delen die buiten de persoon vallen. Bepaal de hoogte van de ogen. Sleep een Hulplijn op de hoogte van de Ogen van de bekende persoon. De ogen van het dier moeten ook op die hoogte komen.

Laagmasker Ga naar in lagenpalet onderin naar Laagmasker toevoegen en voeg een laagmasker toe aan de laag van het dier. Schilder met een penseel met wit, grijs en zwart op het laagmasker om de bekende persoon en het dier beter in elkaar over te laten lopen. In het voorbeeld heb ik de baard er in geschilderd.

Ogen, Mond, Oren, Accessoires Ga op zoek naar extra elementen zoals kledingstukken. Selecteer de accessoires. Gebruik een passende achtergrond Sla je bestand op als PSD-bestand, daarna als PDF en print het in kleur uit. Veel succes.

32

Afvinklijst Famous Faces Vul het onderstaande schema in voor je de opdracht laat beoordelen

Onderwerp Criteria Afvinken

Bestandsgrootte 10,5 x 14,85 cm, 300 pixels/inch, CMYK

Kwaliteit foto Grootte Scherpte Opwaardering met aanpassingen / niveaus

Selectie en laagmasker Uitsnede met een selectiegereedschap Laagmasker

Vormgeving Gebruik linialen, Hulplijnen voor bepaling ogen

Overige Accessoires, kleding, Achtergrond Print in kleur via PDF

33

Planning: Wk 35 (26 aug.) Account maken, Thema Kiezen, Dashboard, Pagina’s Wk 36 (02 sept.) Ontwerp Header, Achtergrond Wk 37 (09 sept.) Menu, Subpagina, Tekst, Wk 38 (16 sept.) Galerij, Berichten, Favicon Wk 39 (23 sept.) Pen Gereedschap, Ballon, Banner Wk 40 (30 sept.) Snelle Selectie, Filmposter WK 41 (07 okt.) Famous Faces Wk 42 (14 okt.) Herfstvakantie Wk 43 (21 okt.) Beoordeling Wk 44 (28 okt.) Toetsweek