1 Raoul Postel Raoul Postel2 Raoul Postel vader van Sara en Tomas relatie met Irma woont in Maarssen-dorp 36 jaar docent print-web media concept ontwe...
vader van Sara en Tomas relatie met Irma woont in Maarssen-dorp 36 jaar docent print-web media concept ontwerper grafisch vormgever webdesigner e-portfolio ontwikkelaar ondernemer
Raoul Postel
passie voor het vak vormgeven passie voor kennisoverdracht ik ben een doozetter en harstikke eigenwijs ik word blij van: enthousiaste mensen out of de box denken inspiratie leerlingen die eindelijk iets begrijpen typografie kunst vormgeving design
Grafisch Lyceum Utrecht
communicatie via: 1. webmail evt. doorlinken naar eigen adres 2. trajectplanner beoordelingen en presentie 3. intranet nieuws en roosters 4. elo.glu.nl vakinformatie en lesinhoud wat te doen bij lesuitval? lessen worden zoveel mogelijk vervangen --> liefst een vakdocent, anders een docent
geen docent binnen 10 minuten? vraag een teamleider in A2.15
Grafisch Lyceum Utrecht belboom bij lesuitval? onmogelijk lessen worden zoveel mogelijk vervangen (moet ook voor de onderwijsinspectie, leerplicht en DUO)
ik werk liever thuis, dat is rustiger... onmogelijk je bent op school conform je rooster daar werk je dan ook, net als straks bij een bedrijf (moet ook voor de onderwijsinspectie, leerplicht en DUO)
jullie zijn samen verantwoordelijk voor de dynamiek in de groep
Grafisch Lyceum Utrecht
regels in de klas niet eten niet drinken (tijdens pauze op de gang of kantine) telefoon staat uit (belangrijk telefoontje vooraf melden bij docent) lokaal alleen verlaten met toestemming tassen op de grond, jas op je stoel social media /muziek alleen met toestemming
inleveren en huiswerk inlevermap op de lesserver deadline is deadline niet inleveren = 1 (tenzij uitzondering besproken met docent/slb) krijg/eis feedback van de docent
jouw leven, jouw studie: zet m op!
grafisch vormgeven
de grafisch vormgever
grafisch vormgeven
de vormgever bedenkt concepten schetst voorstellen communiceert geeft vorm aan gedrukte / internet media weet veel van druktechniek weet veel van internet techniek en media weet veel van marketing communicatie heeft passie voor trends, kunst en beeld is verkoper van grafisch werk kan in opdracht werken (in dienst of als ondernemer)
grafisch vormgeven
en maakt bijvoorbeeld deze producten logo en huisstijl affiche flyer / vouwfolder brochure boek magazine verpakking belettering website infographic icoon
grafisch vormgeven
vormgever
zender
medium
ontvanger
opdrachtgever
vormgeving product
consument
grafisch vormgeven
voorbeeld van een middelgrote huisstijl 1
2
3
4
5
6
grafisch vormgeven
het idee het concept
grafisch vormgeven | concept
wat is een concept
1. een creatief en schaalbaar idee om een doelstelling te bereiken 2. unieke gebruikerservaring 3. heilige graal
grafisch vormgeven | concept
gebruik bij het maken van een concept 1. een heilige graal / idee of techniek 2. verplaatsen in:
een concept ontwikkelen Technieken om tot een concept te komen: 1. Mindmap / wireframes 2. Moodboard 3. Brainstorm 4. Schetsen 5. Vragen stellen Bij voorkeur in samenwerking met anderen
grafisch vormgeven | concept
een concept ontwikkelen in 8 stappen
grafisch vormgeven | concept
een concept ontwikkelen in 8 stappen 1. onderzoek het onderwerp in volle breedte 2. kies een interessant thema uit je onderzoek 3. werk dit thema uit, put uit je eigen ervaringen 4. formuleer jouw kern-idee: “Ik wil zeggen dat...” 5. check of je kern-idee nog klopt bij het onderwerp 6. presenteer dit idee m.b.v. schetsen / moodboard 7. kies het medium dat past bij je kern-idee 7. kies bijpassende foto’s / beeld / tekst 8. plaats deze op het gekozen medium
grafisch vormgeven
de kennis de techniek
grafisch vormgeven
Electronisch VG - duotone en workshop - full-color magazine - infographic - festival prog. boekje
grafisch vormgeven
beheersing van software
ILLUSTRATOR voor vector illustraties
INDESIGN PHOTOSHOP voor foto bewerking
voor pagina opmaak
grafisch vormgeven
het geheim: ontwerp en gebruik een STRAMIEN !
grafisch vormgeven | stramien
schets als basis voor de layout
grafisch vormgeven | stramien
beheersing van stramien in InDesign
HULPLIJNEN, KOLOMMEN EN MARGES
grafisch vormgeven | stramien
beheersing van stramien in InDesign
A-B-C MASTER PAGINA’S
grafisch vormgeven | stramien
beheersing van stramien in InDesign
COMBINATIES: A-B-C MASTER PAGINA’S
grafisch vormgeven
gedetailleerd uitwerken van typografie = KWALITEIT
foto in Photoshop minimaal = 300 dpi foto in InDesign maximaal 20% vergroten / verkleinen
vector-tekeningen uit Illustrator minimaal 1200 dpi
grafisch vormgeven | druktechniek
KLEUR KENNIS cmyk | rgb | pms | grijs | kleurprofiel Een beeldscherm wordt opgebouwd uit 3 tinten (licht) Red Green Blue
Fullcolor drukwerk wordt opgebouwd uit 4 drukgangen (inkt) Cyaan Magenta Yellow black / Keycolor Een kleurprofiel toevoegen, levert de meeste controle op…
grafisch vormgeven | druktechniek
beheersing van drukwerk
KLEURENBEHEER beperken van kleurverlies tijdens omzetten RGB naar CMYK PHOTOSHOP —> kleur instellingen 1. instellen kleurprofiel RGB en CMYK werkruimte RGB ADOBE 1998 ISO COATED V2 300% 2. profiel bewaren
BRIDGE —> profiel instellen voor ALLE Adobe programma’s
grafisch vormgeven | druktechniek
beheersing van drukwerk
CHECK ZELF DE TECHNIEK kleurscheiding | effectieve resolutie | kleurprofiel | bestandsformaten | PDF | INDESIGN —> zelf een preflight-check maken of: 1. Output Separation Preview voor kleurscheiding 2. Bestandsformaat: foto = PSD | vector illustratie = AI 3. Effectieve resolutie: 250 - 350 dpi BRIDGE —> controleer beeld op: 1. actuele resolutie (300 dpi) 2. kleurmodus (cmyk) 3. kleurprofiel (bijv. ISO coated v2 300%) ACROBAT PRO Controleer het kleurenprofiel van de PDF
grafisch vormgeven | druktechniek
beheersing van drukwerk
PDF EXPORTEREN acrobat professional
check kleurscheiding (rgb-cmyk) check resolutie (300 dpi) check kleurprofiel (ISO coated v2 300%) check minimale lijndikte en meer....
grafisch vormgeven | druktechniek
beheersing van drukwerk
PDF EXPORTEREN acrobat professional PDF voor de OPDRACHTGEVER 1. zonder paskruizen en ander markeringen 2. dubbele pagina’s als spread
PDF voor de DRUKKER 1. met paskuizen en registratietekens 2. als losse pagina's
Les 1 - database gegevens inladen - content vervangen dmv XML - TOC maken InDesign - TOC naar bookmarks PDF - bookmarks aanmaken in PDF
InDesign interactie
Les 2 - interactive PDF maken - hyperlinks (url | email | anchor | destination) - pagina overgangen - video / audio (H.264 --> mp4 | mp3)
InDesign & HTML
InDesign formulieren
Les 3 interactieve PDF maken formulier: veld & knop • tekst / check / radio / submit / sign / etc. • clear form / print form • labels voor PDF • knop en rollover
formulier: data beheren
(Acrobat Pro)
• verzenden met Acrobat distribute • gegevens ontvangen en beheren met Acrobat Track
InDesign & HTML
InDesign shockwave Flash
Les 3 aavullende info knoppen • button-actie (swf): werkt niet voor Acrobat op iPad • hyperlinks-actie werkt altijd voor Acrobat op iPad
aavullende info animatie / video • flash-animatie: werkt niet voor Acrobat op iPad wel voor alle andere iPDF stel altijd een eigen poster in
• InDesign-animatie: werkt alleen als swf-export blijft stilstaat in iPDF
• voor animatie minimaal Acrobat 9
InDesign animatie
Les 4 animatie (altijd SWF export) - motion tweening - motion presets - timing button/object states LET OP: SWF-objecten staan altijd in de bovenste laag (kan niet gewijzigd worden)
InDesign & HTML
Les 5 HTML export - HTML5 - losse tekst, geen kolommen - illustratiekader wordt afbeelding - video/audio (h2.64) blijft behouden - responsive (%) layout
InDesign & HTML
Les 5 HTML met deze code begrijpt de browser een website content grafische vormgeving en zo
inhoud van je website
InDesign & HTML
InDesign & HTML
Les 5 HTML export 1. ontgrendel master-items 2. bepaal de volgorde van de elementen met het Articles-panel 3. bepaal de omzetting van alinea-stijlen naar HTML-stijlen (edit all export tags): kop1 —> h1 subkop —> h2 broodtekst —> p
InDesign & HTML
Les 5 HTML export (advies) 1. bepaal volgorde in articles-panel 2. maak groepen van afbeeldingen en zet Standard Rasterization aan + .png NIET BIJ INTERACTIEVE OBJECTEN! 3. float tekst links en afbeeldingen rechts 4. kadrering van afbeeldingen behouden (opties) 5. koppel eigen stylesheet (sturen van layout) 6. Stylesheet: breedte en hoogte zoveel mogelijk in % definiëren (responsive)
InDesign & HTML
InDesign & EPUB
Les 5 EPUB export 1 (voor variabele layout en interactie) 1. gebruik articles-panel voor de volgorde van afbeeldingen en tekstkaders 2. lijn afbeeldingen uit door te groeperen en Standard Rasterization LET OP: layout is variabel en onvoorspelbaar!
InDesign & EPUB
InDesign & EPUB
Les 5 EPUB export 2
(met behoud van vormgeving)
1. groepeer layout in grote delen 2. gebruik 1 tekstkader waaraan alle objecten zijn verankerd: tekst-ankers 3. selecteer ALLE objecten op de pagina en kies Object Export Options 4. vink de Standard Rasterization AAN LET OP: interactieve elementen en video worden gerasterd en werkt niet!
InDesign & EPUB
InDesign HTML & EPUB
Les 5 HTML en EPUB export 1. alleen tekst en foto’s —> layout variabel / blijft selecteerbaar —> interactieve elementen/video blijven behouden —> noodzakelijke objecten en volgorde in Articles
2. layout als afbeelding —> layout blijft behouden / omgezet naar afbeelding —> interactieve elementen/video werken niet meer —> alle objecten als ankers aan 1 tekstkader —> tekstkader is referentiepunt voor alle objecten
3. een combinatie van beide
InDesign HTML & EPUB
Les 5 HTML en EPUB export vormgeving met zelf bijsturen met CSS —> stylesheet koppelen in de export-opties —> kan gelijk zijn aan de stylesheet voor html
InDesign & EPUB
InDesign & FOLIO DPS
Les 6 Folio - magazine voor tablet - bekijken in gratis Adobe Content Viewer - zip bestand met html/css content - opbouwen in de Folio Builder (les 7-8) - losse Indesign documenten (folio artikelen) samenvoegen tot een folio - staande en liggende layout ontwerpen - interactiviteit toevoegen met Folio Overlays
InDesign & FOLIO DPS
Les 6 Folio Overlays interactieve lagen over de layout - Hyperlink linken naar: navto://articlename#pagenumber - Slideshow autoplay of swipe - Image Sequence stop-motion animatie/ image sequence - Audio & Video zelf controller maken: audioAssets001.png - Panorama icm met bijv. Pano2VR en Quicktime conversie - Web Content inladen van website - Pan & Zoom grote afbeelding in klein illustratiekader - Scrollable Frame scrollen van objecten (tekst - beeld)
InDesign & FOLIO DPS
InDesign & FOLIO DPS
Les 7 nieuw folio - PDF folio-export nu mogelijk - formaten van oriëntaties moeten gelijk zijn —> behalve met Smooth Scrolling (lange pagina) [breedte wel gelijk houden]
- voeg altijd scrubberthumbnails toe —> 71 px x 71 px bij —> bij voorkeur aanpassen in PS
InDesign & FOLIO DPS
Les 7 folio articles - meerdere InDesign documenten [articles] - horizontaal + verticaal [alternate layout pages] - meerdere tekstkolommen niet nodig - animatie omzetten naar HTML5 [bijv. swiffy] - linken met buttons: go to url navto://articlename#pagenumber sinds kort ook: next-last previous-first button link LET OP: links tussen horizontale en verticale layout werken niet
TIP: maak eerst een oriëntatie helemaal gereed en maak vervolgens de andere oriëntatie. Stijlen en links worden dan gekopieerd
InDesign & FOLIO DPS
InDesign & FOLIO DPS
Les 8 Folio’s delen via email kleine hoeveelheid mailadressen bekijken via tablet ACV met Adobe ID gratis via app builder: alleen voor mac single user adobe cloud abonnement betaald via app builder: voor mac en android professional adobe cloud abonnement via website voor social media
InDesign & FOLIO DPS
Les 8 advies commerciële app 1. laat een app-bouwer een functionele schil programmeren incl. push en navigatie 2. bij voorkeur in webtechniek, zodat er eenvoudig een website van te maken is. 3. laat deze goedkeuren in de App-stores 4. bouw als vormgever de folio’s met InDesign 5. upload de folio’s in de eigen app Bijv:
NB. opdrachtgevers stellen steeds meer eisen, werk voor een degelijke app dan ook samen met een app-programmeur
InDesign & FOLIO DPS
Les 8 Eindopdracht inleveren folio delen via email: [email protected] op lesserver: DPS folio export interactieve PDF
webdesign & multimedia
Multimedia - webdesign - interactieve animatie - interactieve PDF - viral video - tablet publish - multimedia studio
webdesign & multimedia
webdesign van ontwerp naar browser
webdesign & multimedia
1. 2. 3. 4. 5. 6.
functioneel ontwerp interactief ontwerp (wire) vormgeving & identiteit html en css online zetten ondersteuning/advies
webdesign & multimedia
een websiteplan opzetten HOME over mij
werk grafisch illustratie
foto’s
nieuws
contact route
Het websiteplan omvat het functioneel en interactief ontwerp, het stappen- plan voor bouwer en opdrachtgever Een helder websiteplan omvat: • het doel van de site • doelgroep(en) • de uitstraling (look and feel) • het concept • de opbouw en navigatie
webdesign & multimedia
overgangsfase: statisch design —> responsive design BEELDSCHERM / TV van 1024 x 768 tot 1920 x 1080
TABLET ipad 1024 x 768 galaxy tab 1280 x 720
SMART PHONE 480 x 800
webdesign & multimedia
ontwerp variabele breedte: desktop / tv / breedbeeld
webdesign & multimedia
ontwerp variabele breedte: tablet
webdesign & multimedia
ontwerp variabele breedte: smartphone
webdesign & multimedia
basiskennis van hosting en uploaden (FTP) websites worden gehost op een webserver FTP gegevens instellen - uploaden FTP via Dreamweaver of Filezilla Werken via Wysiwyg-editor Werken met code: html / css
webdesign & multimedia
beheersing van webdesign en internettechniek: HTML & CSS
webdesign & multimedia
omzetten van Photoshop ontwerp naar website in browser
webdesign & vormgeving
Photoshop als basis voor webdesign: ontwerp in pixelprogramma voor pixelmedium (scherm) Werkbestand bewaren als PSD Onderdelen bewaren met save for web jpg (foto’s tekeningen) png (vrijstaande foto’s of tekeningen gif (vector illustrusties / animatie)
webdesign & vormgeving
afbeeldingen voor web zijn altijd: 72 dpi rgb bestand voor foto’s: png (= jpg met transparantie) bestand voor vector illustraties: gif (transparantie / animatie)
webdesign & vormgeving
Achtergrond afbeeldingen: maak in het ontwerp duidelijk wat er met de achtergrond van de website moet gebeuren: 1. wordt een schermvullende afbeelding die mee schaalt met de browser (min 2000px breed) 2. wordt een repeterende afbeelding (patroon) 3. wordt een verloop of effen kleur
webdesign & vormgeving
achtergrond repeteren
achtergrond beeldvullend
webdesign & vormgeving
Menu: zorg dat het menu altijd volledig in beeld staat. Ook als er gescrolled moet worden! 1. laat in het ontwerp ook altijd een rollover knop zien 2. laat zien hoe een uitklapmenu er uit ziet, indien dat er in zit. 3. houdt rekening met vingerdikte (touch screen)
webdesign & vormgeving
webdesign & vormgeving
Gedetailleerd uitwerken: werk het ontwerp zo gedetailleerd mogelijk uit. De opdrachtgever weet dan precies wat hij kan verwachten. 1. onderstreep tekstlinkjes 2. maak teksthierarchie (kop, subkop, broodtekst, nieuwsbericht, links) 3. rollover en aktieve knoppen 4. randen, verloop, rondhoeken, etc.
voor animatie, audio en video: mp3 (audio H.264) mpeg4 ( video H.264) swf (flash animatie)
webdesign & multimedia
linken naar en adviseren over social media
social network links / likes / homepages
embedden van video en widgets (delen / insluiten)
webdesign & multimedia
basiskennis van zoekmachine optimalisatie (SEO)
hoe werkt zoeken hoe werkt gevonden worden website titel keywords description tekst homepage H1 met de belangrijkste woorden duidelijke pagina-namen google analytics
webdesign & multimedia
basiskennis van Content Managment Systemen (CMS)
typo3 - schaalbaar wordpress - blog joompla - eenvoudige site drupal - community modx - eenvoudige site silverstripe - user managment GX-manager - e-commerce en meer...
webdesign & multimedia
beheersing van webdesign en internettechniek
HTML met deze code begrijpt de browser een website content grafische vormgeving en zo
inhoud van je website
webdesign & multimedia
beheersing van webdesign en internettechniek
2 pagina’s linken met deze code link je 2 pagina’s met elkaar dit is al een website
beheersing van webdesign en internettechniek Cascading StyleSheets scheiding van inhoud en presentatie CSS is vergelijkbaar met InDesign werken in kaders waarin je beeld en tekst plaatst zo’n kader heet: ID of CLASS of TAG Tag’s zijn de HTML-codes (p, h1, etc.)
webdesign & multimedia
CSS (Cascading Style Sheets) met deze code begrijpt de HTML de vormgeving
Hoe een kader of typografie heet en er uit ziet beschrijf je in een apart CSS-document Waar een kader of typografie moet staan beschrijf je in het HTML-document
HTML
tekst in het content-kader
CSS HMTL
tekst in het blokje
webdesign & multimedia
HTML5 & CSS3 html5: wijzigingen
CSS3: toevoegingen
webdesign & multimedia
UPGRADE in webdesign en internettechniek
HTML 5 Wat zijn de wijzigingen? • nieuwe head en tag’s • modernizr javascript • reactive formulieren • audio/video, api, media-queries
CSS3 Wat zijn de toevoegingen? • nieuwe classes en selectors • normalize boilerplate • webfonts @font-face • animatie-overgangen
webdesign & multimedia
UPGRADE in webdesign en internettechniek
Opdrachten HTML 5 • omzetten xhtml naar html5 • formulier maken in html5 • nieuwe functies embedden
Opdrachten CSS3 • formulier stijlen met css3 • pseudo classes en selectors toepassen • webfonts @font-face toevoegen • animatie-overgangen-css3design
