P3 Peer Feedback

talking-pairs1In de praktijk controleren collega’s het werk van elkaar. Als een fout niet wordt opgemerkt en deze productie op de drukpers belandt dan is dit een enorme schadepost voor een ontwerpbureau of voor jou zelf. Om dit te voorkomen wordt er intern gecontroleerd.

Je leert feedback geven aan de hand van exacte criteria. Je leert ook feedback ontvangen, en daarmee welke aanpassingen je nog kunt doen aan jouw product. De eindbeoordeling wordt gedaan door je docent.

Opdracht
  • In de klas wordt door het lot bepaald wie elkaar gaat beoordelen.
  • Download het formulier en print het uit.
  • Alle oranje vakken vul je in.
  • Daarna geef je dit formulier aan de student die jou gaat beoordelen en hij of zij geeft zijn/haar formulier aan jou.
  • Vervolgens vul je alle groene vlakken op het formulier van de ander in.
  • Daarna geven jullie elkaar de formulieren weer terug.
  • Wanneer je het ingevulde formulier weer terug hebt maak je hiervan scans of foto’s.
  • Deze bundel je in een PDF en zet je online via een link in je container (studentnummer.hosts.ma-cloud.nl/container2)

Je blijft natuurlijk zelf verantwoordelijk voor je eigen werk en keuzes die je maakt. De kans dat jij met je werk een voldoende scoort is nu veel groter.

Benodigdheden

Inleveren

  • Inleverdatum: einde van de les
  • Bestandstype: Eén PDF met het feedback formulier
  • Locatie: Upload naar je container

Beoordelingscriteria

  • Als je feedback hebt gegeven is dit een pluspunt bij je beoordeling door de docent.
  • Als je je werk hebt verbeterd op basis van de ontvangen feedback is dit ook een pluspunt bij je beoordeling door de docent.

Behang

Duur: 6 uur

Je gaat voor Ferm Living een nieuwe behangserie ontwerpen. In Illustrator ga je drie behangstalen maken. Daarnaast maak je voor ieder behang een etiket voor op de verpakking (rol). Op dit etiket hoort ook het logo van Ferm Living, wat je zelf in vectoren zet. Je hebt hiervoor drie lessen de tijd.

OpdrachtBenodigdhedenCriteria
  1. Ontwerp in Illustrator drie verschillende behangpatronen. De ontwerpen moeten een doorlopend patroon hebben, hierover krijg je in de les uitleg.
  2. Maak in Illustrator een vector van het logo van Ferm Living (een hoge resolutie versie van dit logo vind je onder benodigdheden). Gebruik hiervoor niet de functie trace (overtrekken).
  3. Ontwerp in Indesign voor ieder behang een etiket voor op de verpakking. Het logo zet je hier op. Het formaat van het etiket is vrij, denk daar zelf goed over na. Net als: wat staat er eigenlijk nog meer op een sticker van een behangrol?

Let op: maak één Indesign document met 3 pagina’s voor de etiketten.

Download:

Gebruik de instructievideo’s op Linkedin Learning:

  • Cursus: Drawing Vector Graphics: Patterns door Von Glitchka)
    • Introduction, What are patterns?
    • Hoofdstuk 1, Drawing out and refining your design
    • Hoofdstuk 1, Building your vector pattern with a bounding box
    • Hoofdstuk 1, Organize, size, rotate, and adjust your pattern fills
    • Hoofdstuk 2, Pattern tool basics (belangrijk)
  • Complexiteit van de behangstalen (Moeilijkheidsgraad in tekenen, zoals kleurgebruik, transparantie, verlopen, effecten, lagen etc.)
  • Ferm Living logo is netjes met de hand nagemaakt in vectoren.
  • 3 etiketten in Indesign goed opgemaakt (let op afloop, kleurmodus, resolutie, beeldkwaliteit, geen ontbrekende links, etc.)
  • De etiketten zijn volledig (alles wat op een etiket hoort staat er op).
  • Drukwerk PDF is voorzien van afloop (indien van toepassing) en snijtekens.
  • Alles compleet in één ZIP bestand met de juiste naamgeving.

Silhouet

Duur: 1 uur

We gaan in Illustrator een kijkje nemen bij de verschillende Penselen (Brushes). Je gaat online op zoek naar meer mooie brushes om uiteindelijk een ‘kapsel’ mee te tekenen. Je tekent dit op een silhouet van jezelf en je mag zelf kiezen welke brushes je daarvoor wilt gebruiken.

OpdrachtStap 1Stap 2TheorieCriteria

Teken een silhouet van jezelf en geef deze een apart kapsel met verschillende brushes.

Het silhouet maak je door een foto van jezelf (van recht opzij!) na te tekenen.

  1. Maak een foto van jezelf in zijaanzicht. Let er op dat er voldoende contrast is met de achtergrond, zodat je je eigen contour makkelijk kunt volgen. De kwaliteit van de foto is niet zo belangrijk, het is een hulpmiddel om je eigen silhouet na te tekenen.
  2. Open deze foto in Illustrator en zet deze in een Template Layer. Dubbelklik de laag waarin je foto staat en selecteer Template Layer. Daarmee lock en dim je de laag, waardoor je makkelijker kunt overtrekken.
  3. Trek de contour van je hoofd (dus de schedel zonder haar) over met de pen tool en geef de vorm een zwarte vulkleur.

Verzamel nu een aantal leuke brushes.

  1. Open het Brushes paneel (F5).
  2. Klik op het menu van het Brushes paneel om de Brushes Library te openen. Hier zie je verschillende sets Brushes. Je kunt ook zelf brushes toevoegen.
  3. Zoek op internet naar leuke brushes om te gebruiken en voeg deze toe aan Illustrator (zie de links bij tabblad Theorie of via het menu Extra > Bronnen, én de video hieronder).
  4. Teken het kapsel. TIP: Werk in lagen. Vooral als er veel op dezelfde plek gebeurt, dat selecteert makkelijker.

Adobe Help: Penselen

Links naar verschillende brushes voor Illustrator:

  • Je silhouet bevat vloeiende lijnen, je laat zien dat je met zowel anchors als handles kunt werken.
  • Je gebruikt verschillende lagen, je laat zien dat je geordend werkt.
  • Je kunt nauwkeurig tekenen, je laat zien dat je een oog voor detail hebt.
  • Je gebruikt verschillende kleuren, je laat zien dat je kunt werken met brushes en kleur.
  • De complexiteit van je ontwerp, je laat zien dat je jezelf een uitdaging hebt gesteld.

Filmposter: Double Exposure

Voordat de computer populair werd, werden er met een camera al dubbelbeelden gemaakt, de zogenaamde double exposures. Door letterlijk 2 opnames op 1 negatief te schieten kreeg je een verassend ‘spookachtig’ beeld. Het was wel een beetje een verrassing wat het eindresultaat zou worden.

In Photoshop kun je het zelfde effect bereiken door lagen met elkaar te ‘vermenigvuldigen’ en maskers te gebruiken. Hierdoor heb je veel controle over het eindresultaat.

Opdracht

Je gaat een filmposter op A4 formaat opmaken met beeld en tekst. Je gaat zelf een double exposure beeld maken in Photoshop dat beeldvullend moet zijn. In totaal gebruik je minimaal 3 beelden voor je double exposure, maar meer mag natuurlijk ook.

  • Werk in lagen.
  • Werk met een scherp beeld, grootte minimaal 8 MP
  • Kopieer lagen en probeer verschillende dingen uit, denk daarbij aan de opties in je lagen palet.
  • Je kan ook de dekking van een laag aanpassen om het effect te verminderen.
  • Vrijstaand maken d.m.v. maskers, zodat je kan corrigeren.

TIP: Je kunt het aantal megapixels van een plaatje uitrekenen door de aantallen pixels (in duizendtallen) in de hoogte en breedte te vermenigvuldigen. Een plaatje van 1920 x 1200 px is dus 1,92 x 1,2 = 2.3 MP.

 

TIP: Kijk naar voorbeelden van filmposters online om te zien welke elementen hier veel gebruikt worden (denk aan titel, acteurs, cast, et cetera.)

TIP: Een veelgebruikte letter op filmposters is de Trajan, welke je via Adobe Typekit kunt downloaden.

 

Benodigdheden

Beoordelingscriteria

  • Scherpe, kwalitatief hoogwaardige beelden.
  • Beelden zijn minimaal 8 MP.
  • Effectieve pixels minimaal 140 ppi.
  • Minimaal 3 foto’s gecombineerd.
  • Double exposure effect goed zichtbaar.
  • Layout met titel, acteurs, etc.

Adobe XD Peer-2-peer


In groepen van 4 personen gaan jullie elkaar alle ins en outs van Adobe Experience Design leren. Elk groepslid neemt een onderwerp uit de XD help pagina’s voor zijn rekening.

Je doet onderzoek naar jouw onderwerp en maakt hier een les en/of instructievideo in het Nederlands over. Je mag zelf weten in wat voor vorm en met welke software je deze instructie maakt.

Het doel hiervan is om alle ins en outs van XD te ontdekken. Door elkaar een instructie te geven leer je om kennis over te dragen op een begrijpelijke manier. De kennis die je nu opdoet kun je straks toepassen in het komende project.

Les 1

Doe onderzoek naar en maak een les/instructievideo en over:

  • Student 1Designing artwork and screens
    • Working with artboards
    • Create repeating elements
    • Grids
  • Student 2 Uit ‘Manage objects
    • Combine and mask objects
    • Add blur effects
    • Linear gradients
    • Group, lock, and duplicate objects
  • Student 3 Uit ‘Manage objects
    • Move, align, and stack objects
    • Select, resize, and rotate objects
    • Set stroke, fill, and drop shadow for objects
    • Work with layers
    • Work with symbols
  • Student 4 Uit ‘Prototypes
    • Set the Home screen
    • Link interactive elements to target screens
    • Link to previous artboard
    • Unlink artboards
    • Preview and record interactions
let-opBelangrijk: De les die je voorbereid moet 20 minuten duren en bestaat uit een instructie en een oefening. Deze heb je voorbereid vóór aanvang van de tweede les.

Les 2

Je gaat de kennis nu overbrengen op je klasgenoten. Je laat je klasgenoten meedoen tijdens je presentatie om te oefenen met het onderwerp dat je hebt onderzocht. Je beantwoordt eventuele vragen die vanuit de groep komen. Je hebt 20 minuten per presentatie (uitleg en oefening) en daarna geef je de beurt door aan je volgende groepsgenoot.

Benodigdheden

Inleveren

  • Deadline: op de dag van jouw les
  • Bestanden: Je levert alle bestanden in die nodig zijn om een goed beeld te krijgen van je les. Let op: stop deze bestanden gezamenlijk in één zipfile met de juiste naam.
  • Locatie:
    • 2A, 2F en 2R: Dropbox Jof
    • 2E: Dropbox Tytis

Beoordelingscriteria

  • Er zijn voldoende bestanden ingeleverd om een goed beeld te krijgen.
  • Alle onderwerpen uit de opdracht komen aan bod in jouw les.

Brush Collage

Tijd: 2 uur

Je kunt in Photoshop brushes gebruiken van bijvoorbeeld kreukels, koffievlekken, bloemen of andere ’textures’. In deze oefening ga je online op zoek naar mooie brushes om te downloaden, en maak je ook je eigen brushes. Hiermee maak je een collage.

Lees verder “Brush Collage”

WordPress website

We gaan in de komende drie weken een WordPress website opzetten. Je mag helemaal zelf weten wat je wilt maken, en hoe je het er uit wilt laten zien. Het gaat er in deze opdracht vooral om dat je leert werken met WordPress.

Voor deze opdracht heb je 3 blokken van 2 uur. De video’s van Gerhard Derksen (een REA docent aan het Ma) kunnen je helpen. Hierin wordt stap voor stap uitgelegd hoe iets werkt. In de onderstaande workflow staat bij verschillende punten welke video er bij hoort. De bedoeling is dat je aan het einde van de komende drie weken een mooie website kan laten zien met een aantal elementen:

  • Verschillende pagina’s
    • Landingspagina (statisch)
    • Berichtenpagina
    • Categorie pagina
    • Statische pagina’s (zoals bv. about, contact)
  • Een aantal leuke plugins
  • Zelfgekozen thema
  • Aangepaste html

De workflow is als volgt:

  1. Download en installeer WordPress (video 2.1 t/m 2.6)
  2. WordPress instellen en klaarmaken voor gebruik
  3. Enkele (test)berichten en pagina’s maken (video 4.1)
  4. Opzetten menu en eventuele sidebar (video 4.2)
  5. Template kiezen en installeren (video 4.8)
  6. Child-thema installeren (video 5.1 t/m 5.5)
  7. HTML en CSS wijzigingen in child doorvoeren (video 4.9 en 4.10)

Benodigdheden

Inleveren

  • 2 maart: werkende WordPress installatie (in de les laten aftekenen)
  • 9 maart: alle pagina’s en berichten aanwezig (in de les laten aftekenen)
  • Inleverdatum website: 16 maart
  • Bestandstype: website online bereikbaar via container
  • Locatie: Online in je 2e-jaars container (#####.hosts.ma-cloud.nl/wp)

Beoordelingscriteria

  • Je site bestaat minimaal uit de volgende pagina’s:
    • Landingspagina (statisch) (1pt)
    • Berichtenpagina met minimaal 10 berichten in verschillende categorieën (1pt)
    • Categorie pagina (1pt)
    • Statische pagina’s (zoals bv. about, contact) (1pt)
    • Elke pagina en elk bericht is voorzien van een afbeelding (1pt)
      • Let op RGB, juiste naamgeving en formaat
  • Werkende links (1pt)
  • Minimaal 2 plugins (1pt)
  • Je hebt minimaal 2 widgets gebruikt (1pt)
  • Zelfgekozen thema (1pt)
  • Aangepaste html (1 bonus punt)

Resultaten en feedback op project De Startup

De projectcijfers voor REA zijn helaas niet voor alle klassen even rooskleurig… 🙁 In dit document vind je feedback op wat er bij een deel van de studenten nog niet goed gaat:

Feedback op project
https://docs.google.com/presentation/d/1MQaix6vaTijoIW6GILO_nPKVeFv90xf5FnJRUTQusB8/edit?usp=sharing

En voor iedereen die de kleurprofielen en joboptions nog niet goed heeft ingesteld, bekijk deze les nogmaals:

Les instellingen CC2015:
https://drive.google.com/open?id=0B4n93rAGfnpIN2R4YUtjSzhZbVU

Nuon Spread

Je gaat een spread nauwkeurig namaken, met aan de linkerkant een artikel en aan de rechterkant een advertentie voor Nuon. Tekst en beeld worden aangeleverd.

Een spread is de opmaak van een dubbele pagina (meestal staand) in een publicatie.

Opdracht

  • In de foto van het lampje zit een scheur in het plafond. Deze moet worden geretoucheerd in Photoshop.

Retoucheren is het bijwerken en bewerken van foto’s, films en schilderijen. Men bewerkt bepaalde aspecten in het beeld, waardoor iets mooier of helderder wordt. In de modefotografie betekent dit vaak dat oneffenheden bij personen worden weggewerkt.

  • Het Nuon Logo maak je na in Illustrator (zie instructie hieronder)
  • Zet in Indesign een spread op van 2 pagina’s en begin de paginanummering links met 68.
  • Kijk goed wat wel en niet vast staat op het basislijn raster.
  • Vergeet niet de kleurmodus en resolutie van je beelden te controleren.

Stramien Gegevens:

  • paginaformaat: 193 x 266 mm, pagina’s naast elkaar, p 68-69
  • marges: 8, 20, 12, 16 mm
  • 3 kolommen, kolomwit: 5 mm
  • basislijnraster: 11 pt
  • CMYK kleurstalen voor Nuon advertentie: paars: 81,98,0,20; geel: 6,0,85,0; blauw: 100,0,0,0.
  • Header artikel: Univers bold condensed, corps 57pt
  • tekst intro: Univers bold condensed, corps 57 pt
  • bodytekst artikel: Times new roman, regular, 9/11
  • bodytekst advertentie: Univers roman, 11/14
  • Nuon lettertype: CharterITC Bd BT (bijgevoegd, zelf installeren)

Instructie Nuon Logo:

  • lettertype installeren (Charter Bold)
  • kleurstalen aanmaken
  • voorbeeld plaatsen als sjabloon
  • N, U en ON als drie aparte tekstkaders opmaken
  • lettercontouren maken
  • paarse vlak tekenen
  • met Pathfinder ON uit paarse vlak halen
  • met Pathfinder U aan paarse vlak toevoegen
  • geel vlak onderop plaatsen
  • opslaan als Illustrator PDF

Benodigdheden

  • Alles wat je nodig hebt zit in deze zipfile.
  • [printfriendly]

Inleveren

  • Inleverdatum: 3 maart
  • Bestandstype: PS bestand lampje, ID pakket en PDF samen in één zipfile
  • Locatie: via Dropbox (lees meer over inleveren)

Beoordelingscriteria

Hieronder zie je waarop je document zal worden beoordeeld. Loop deze punten zorgvuldig langs voordat je inlevert.

  • 3 mm afloop
  • spread
  • paginaformaat
  • marges
  • kolommen
  • kolomwit
  • basislijnraster ingesteld en toegepast dmv alineastijl voor bodytekst
  • positie onderdelen correct
  • juiste lettertypes headers, bodytekst en paginanummering
  • CMYK kleurstalen Nuon advertentie
  • Automatische paginanummering op basispagina
  • foto’s in PSD: CMYK, 300-600 dpi
  • pakket en PDF in orde: spread, afloop en snijtekens
  • PS: retoucheren scheur in plafond
  • IL: correct nagemaakt logo
  • juiste naamgeving documenten (klas_achternaam_voornaam_opdracht)

Website: Taste 4 U CSS

Je hebt je verdiept in de structuur van HTML5 door middel van de opdracht Taste 4 U. Nu staat er een kale website die wel wat aankleding kan gebruiken. Dit is deel twee van deze opdracht en hierin gaan we de website vormgeven met CSS.

De CSS die je tot nu toe al hebt verwerkt in je website kun je laten staan en aanvullen met de onderstaande opdracht. Voor deze opdracht gebruik je het lesmateriaal (video’s) van Gerhard. Deze zijn te vinden door de link onder benodigdheden te volgen.

Opdracht

  • Teken op een papiertje hoe je wilt dat de website er uit komt te zien
  • Maak de Taste 4 U website op met externe CSS
  • Pas de diverse stijlregels toe op alle tags, id’s en classes.

Benodigdheden

Inleveren

Website

  • Inleverdatum: 22 december
  • Bestandstype: online website
  • Locatie: in je 2e jaar container onder de naam “Taste 4U”

Beoordelingscriteria

De bedoeling is dat je hier onderstaande punten volgt. Wanneer je dit niet doet, bijvoorbeeld omdat je al een andere vormgevingskeuze hebt gemaakt, geef dan even in je CSS aan (met een comment) waarom je deze keuze hebt gemaakt.

  • Er is een wrapper waarin alle elementen zitten (<header>,<nav>,<article>, <section>, etc.)
  • De wrapper is gecentreerd in de browser
  • De CSS is extern en goed gekoppeld aan alle pagina’s
  • Er is een achtergrondplaatje in de body van de CSS geplaatst
  • Alle HTML5-tags zijn gestyled en gepositioneerd (width, height, float, etc.)
  • Alle (opmaak)tags zijn gestyled (lettertype, corps, regelafstand, uitlijning, etc.)
  • De navigatie ziet er uit als knopjes met ronde hoeken en hebben geen onderlijn
  • De hover ziet er anders uit dan de gewone navigatie en heeft geen onderlijn
  • De active link ziet er anders uit dan de gewone navigatie en heeft geen onderlijn
  • De link naar Smulweb ziet er anders uit dan de navigatie links
  • Er is minimaal gebruik gemaakt van 1 Google-font
  • Er zijn minimaal 2 classes toegepast waarin een uitzondering op de standaardopmaak is gemaakt
  • foutloze HTML-validatie
  • foutloze CSS-validatie
  • de verbeterde versie staat op ma-cloud in jouw 2e jaar container.