Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

18augustus

Duotoon afbeeldingen maken in Photoshop

Onlangs ben ik gestart een serie – al wat oudere – videodemo's om te zetten naar webformaat en te publiceren op dit blog. In deze serie zijn inmiddels de volgende afleveringen verschenen.

De video van dit bericht gaat over het werken met Duotoon-afbeeldingen. Deze zijn vooral in de drukwereld bekend, maar ook voor webdesign kan het werken met Duotonen tot snel resultaat leiden. Ze komen vooral van pas als het nodig is om bijvoorbeeld snel een kleurfilter over een foto te leggen. Met een paar klikken kan de foto dan snel van de gewenste sfeer worden voorzien.

 

Duotoon afbeeldingen maken in Photoshop

 

Mocht het daarna (eveneens) nodig zijn om de foto af te drukken op een drukpers, dan is in elk geval het exacte kleurnummer bekend en zal de kleur van het drukwerk precies overeenkomen met de afbeelding op het scherm. Het is niet nodig om verschillende kleuren drukinkt te mengen om tot het gewenste resultaat te komen. Op een eenvoudige inktjetprinter zal dit verschil overigens niet te zien zijn, maar een drukker zal blij zijn met de exacte kleurinformatie uit het Pantone- of HKS-profiel.

 

Met Duotoon zijn snel mooie effecten te bereiken. Hiernaast bijvoorbeeld een foto van mijn zoontje (4 jaar) die is omgezet naar een Duotoon-afbeelding waarop de kleur Pantone Yellow C is toegepast.

 

Succes er mee, bedankt voor het lezen/kijken.

 

Peter Kassenaar
--18 augustus 2008

10augustus

Uitgebreide tekstmaskers in Photoshop

In mijn serie videoposts over digitale fotografie en het werken met grafische programma's (Photoshop, Photoshop Elements, overige) zijn ondertussen de volgende afleveringen verschenen:

De video van dit blogbericht is wat uitgebreider (10:40 min.) en laat zien hoe tekstmaskers kunnen worden gebruikt voor verschillende letters van een woord. Achter elke letter wordt een andere foto als masker gebruikt.

 

Uitgebreide tekstmaskers in Photoshop

Om het effect er wat meer uit te laten springen worden daarna(ast) enkele teksteffecten toegepast op de maskers, zoals Schuine rand (Bevel and emboss) en Slagschaduw (Drop shadow). U leert hoe deze eenmalig worden ingesteld en vervolgens makkelijk naar elke laag worden gekopieerd.

De oefenbestanden die in deze videodemo worden gebruikt zijn te downloaden als zip-bestand. Kijk hiervoor onderaan dit bericht.

Wilt u meer weten over Photoshop, kijk dan ook eens in de linkerbalk van dit blog met Google-advertenties. Google is meestal vrij goed met het inschatten welke advertenties op een bepaald blogbericht van toepassing zijn :-).

Door deze adverteerders te bezoeken draagt een u een steentje bij in de kosten van dit weblog. Maar natuurlijk mag u ook rechtstreeks een donatie overmaken om uw waardering te laten blijken!

Bedankt voor het lezen/kijken.

Peter Kassenaar
-- 08 augustus 2008.

tekstmaskers_aap.zip (1,43 mb)

04augustus

Werkruimte instellen in Photoshop

In mijn serie videoposts over digitale fotografie en het werken met grafische programma's (Photoshop, Photoshop Elements, overige) zijn ondertussen twee afleveringen verschenen:

In de video van dit blogbericht gaat het niet over een speciale handeling of techniek, maar meer om een randvoorwaarde bij het werken met Photoshop, namelijk "hoe houd je het werkgebied zo schoon mogelijk en het zicht op je foto zo goed mogelijk?". Ik laat zien hoe de sneltoets Tab in Photoshop zorgt voor een opgeruimd werkblad en hoe je eigen werkruimtes met favoriete paletten en –locaties kunt maken. Ook wordt in de video getoond hoe snel de standaardinstellingen van Photoshop hersteld worden.

Paletlocaties en werkruimte instellen in Photoshop

Werkruimte en paletlocaties instellen in Photoshop (04:02 min.)

De video is opgenomen met Photoshop CS, maar werkt ook in andere versies van Photoshop. Veel andere grafische programma's (Corel Draw, The GIMP, Paint Shop Pro) hebben vergelijkbare opties, al zullen ze soms anders heten. Wel wordt veelal ook de Photoshop-conventie van sneltoetsen gevolgd (omdat dit nu eenmaal de de facto standaard is). Probeer het gebruik van Tab dus gewoon eens uit.

Bedankt voor het lezen/kijken.

Peter Kassenaar
-- 01 augustus 2008.

11juli

Tekstmasker voor een foto

Vorige week ben ik gestart met een serie blogposts waarin ik stuk voor stuk een aantal video's presenteer die ik in de loop der tijd had gemaakt voor het vBook Digitale Fotografie. Door tijdgebrek is de complete uitgave hiervan er echter nooit van gekomen. Meer over de achtergronden hierbij leest u in het eerste bericht:

Nieuwe video's - Digitale fotografie (met als eerste videotraining een clip over het werken met teksteffecten in Photoshop).

In dit bericht een volgende video (en ik heb er nog meer dan twintig liggen, we kunnen dus nog even vooruit :-) over het maken van tekstmaskers. Hierbij schijnt een achterliggende foto door een tekst heen (05:15 min).

Tekstmaskers maken in Photoshop

Tot de behandelde ondewerpen in deze video behoren onder meer:

  • Tekst en foto's combineren
  • Tekst als masker instellen
  • Lagen combineren en sneltoetsen in Photoshop en Photoshop Elements

Opmerkingen, tips, verbeteringen? Zoals altijd wordt u van harte uitgenodigd een commentaar te schrijven bij deze video, zodat ook volgende lezers er wat aan hebben.

Bedankt voor het lezen/kijken,

Peter Kassenaar
-- 11 juli 2008

05juli

Nieuwe video’s – Digitale Fotografie

Als u dit blog wat vaker leest dan zult u zien dat ik regelmatig video's publiceer over allerlei zaken. Dat was oorspronkelijk een hobby van mij, maar ook in mijn werk is deze kennis al vaak van pas gekomen. Ik ben sinds 1999-2000 bezig met het opnemen en bewerken van (scherm)video's en heb hier –in alle bescheidenheid – inmiddels al veel ervaring mee opgedaan. Gebruik bijvoorbeeld de tag Video voor een compleet overzicht van berichten op dit blog die hier over gaan.

Voor klanten en opdrachtgevers maak ik bij de oplevering van een nieuwe site of applicatie bijvoorbeeld vaak een serie instructievideo's over [nieuwe] kenmerken van de applicatie en de wijze waarop hij het best gebruikt kan worden. Dat scheelt veel schrijfwerk en uitleg-sessies. Ook in usability-onderzoeken worden veel video-opnames gebruikt om sites en applicaties te verbeteren.

Videotraining en vBook

Daarnaast heeft ons bedrijfje voor de publieksmarkt (=de consument) in samenwerking met uitgeverij Van Duuren Media onder de noemer 'Videotraining' en 'vBooks' ook een aantal kant-en-klare videoproducties gemaakt. Dit zijn bijvoorbeeld

Videotraining Premiere Proen nog een aantal anderen. Een compleet overzicht hiervan is nog beschikbaar op de oude site. U kunt ze desgewenst nog steeds bestellen. Er is nog voorraad!

Nu is deze reeks inmiddels wel enigszins verouderd geraakt. De nieuwste versies van de software (Premiere Pro CS3 en Dreamweaver CS3) wordt hierin niet besproken en er zijn problemen bekend bij gebruik van de nieuwste versie van Flash Player. Hoewel de besproken technieken zeker ook in de nieuwe versies nog goed gebruikt kunnen worden, zien we dat deze serie langzamerhand aan het einde van zijn levenscyclus is gekomen.

Wat onze klanten hierbij altijd als een groot voordeel hebben ervaren is – indien mogelijk – het gebruik van Nederlandstalige software in de video's (waar ze zelf ook mee werken) en Nederlandstalig gesproken instructies. Natuurlijk zijn op het web ook tal van videoinstructies te vinden, maar deze zijn vaak in het Engels. En het is al lastig genoeg om een nieuwe techniek te leren, laat staan dat deze ook nog gepresenteerd wordt in een taal die niet je eerste taal is.

Nieuwe uitgaven en tijdgebrek

Het oorspronkelijke idee was om de hiervoor genoemde serie ook uit te breiden met uitgaven over bijvoorbeeld Flash, Photoshop en Digitale fotografie. Door tijdsgebrek is dat er helaas echter nooit concreet van gekomen. Oh, ideeën en kennis genoeg, maar de hectische computerboekenmarkt leent zich er helaas niet voor om je ongestoord een paar maanden op een zolderkamertje op te sluiten en rustig een nieuw product in elkaar te sleutelen. Het is altijd rennen en vliegen om boeken te schrijven voor de volgende nieuwe serie toepassingen (Office 2007, Windows Vista, CS3 en ga zo maar door).

Ik heb destijds echter al wel enige tientallen video's over verscheidene onderwerpen opgenomen en gemonteerd. Maar deze zijn helaas op de plank komen te liggen.

Tot vandaag.

Onlangs kwam ik ze weer tegen toen ik mijn vaste schijf-archief aan het opschonen was. En omdat ik nu een mooi publicatiemedium heb (dit blog) met redelijk veel schijfruimte kan ik makkelijker de betreffende video's distribueren. Ik heb besloten de video's de komende periode langzamerhand op dit blog te publiceren en eens te kijken hoe mensen hier op reageren.

Afweging

Ik moest hierbij de volgende afwegingen maken

  • De filmpjes zijn ondertussen al weer een paar jaar oud (hoewel de behandelde technieken veelal tijdloos zijn), waardoor ze waarschijnlijk lastig in de reguliere hype-markt ('altijd het nieuwste van het nieuwste') te verkopen zijn...
  • maar as ik ze gratis op het blog zet, verdien ik er niets aan. Er zit wel tientallen uren werk in...
  • ...maar het potentiële publiek dat ik bereik is wel veel groter (dan via een vaste verpakking in de (web)winkel)...
  • ...en misschien willen bezoekers zelf wel een vrijwillige donatie doen?

En dus heb ik maar besloten om inderdaad dit nieuwe experiment te starten.

Doneren

Eigenlijk verandert er niets. Alles op dit weblog blijft gratis beschikbaar. Behalve dat er nu een optie 'Doneren' in het menu aan de rechterkant van deze pagina is bijgekomen. Hiermee kunt u een vrijwillige bijdrage storten als blijk van waardering voor de uren die er in zijn gaan zitten en als dank voor de kennis die u via de filmpjes hebt opgedaan.

U kunt een bijdrage geven via de betaalsystemen iDeal en PayPal.

Nogmaals, het is niet verplicht, maar ik zou het zeker op prijs stellen. Al is het alleen al uit nieuwsgierigheid hoeveel Nederlanders dit daadwerkelijk doen. Over een paar maand zal ik via een blogbericht eens laten weten hoeveel de Donatie-knoppen tot dan toe hebben opgebracht.

Daarbij: als u een donatie hebt gedaan voelt dat erg goed! (voelt u zich na een paar dagen niet meer zo goed? Doe nog een donatie! :-)

Video – Digitale fotografie

Genoeg tekst voor dit moment, laat ik deze serie starten met een eenvoudige instructie die oorspronkelijk bedoeld was voor de serie 'Videotraining – digitale fotografie'.

Tijdens mijn trainingen destijds merkte ik bijvoorbeeld dat veel gebruikers niet weten hoe ze binnen Photoshop (of een willekeurig ander grafisch pakket) een woord kunnen maken waarbij de letters verschillende kleuren hebben – denk aan het Google logo.

Teksteffecten in Photoshop

En dus heb ik daar een video van gemaakt (08:41 min). Hierin komen verschillende aspecten aan de orde

  • Tekst typen en het lettertype aanpassen
  • Werken met teksteffecten in Photoshop: verschillende kleuren, slagschaduw en schuine rand (bevel).
  • Teksten op verschillende lagen plaatsen.

De video is opgenomen met Photoshop CS2, maar het werken met teksten is al sinds Photoshop 6 of 7 niet sterk meer gewijzigd, zodat de instructie vrijwel voor elke Photoshop-versie (of Photoshop Elements) geschikt zal zijn (natuurlijk zijn er wel allerlei extra effecten toegevoegd, zoals tekst langs een pad en werken met vectorteksten, maar voor de basishandelingen die hier worden besproken maakt dat niet veel uit).

Conclusie

In de komende weken/maanden zal ik regelmatig nieuwe video's plaatsen die oorspronkelijk bedoeld waren voor commerciële exploitatie. Als u hiervan op de hoogte gehouden wilt worden, neem dit blog dan op in uw RSS-favorieten (héééé, hoe moet dat? Daar kan ik ook wel een video van maken!), dan krijgt u vanzelf een berichtje wanneer een nieuw filmpje beschikbaar is.

Hebt u suggesties of tips voor nieuwe (instructie-)video's, of wilt u misschien een serie video's produceren voor het trainen van werknemers binnen uw bedrijf, neem dan nader contact op.

Ook andere opmerkingen zijn uiteraard welkom door een commentaar bij dit bericht achter te laten.

Bedankt voor het lezen/kijken,

Peter Kassenaar
-- 5 juli 2008

20maart

Fireworks of Photoshop?

Toevallig ontving ik de afgelopen week drie e-mailberichten van verschillende personen met min of meer dezelfde strekking. Ze stelden allemaal de vraag die ongeveer op het volgende neerkwam:

"Ik moet een keuze maken tussen Fireworks CS3 en Photoshop CS3.
Welke kunt u aanraden. Het gaat om webdesign."

En in twee van de drie gevallen werd daarbij aangegeven dat ook samengewerkt moest kunnen worden met Dreamweaver en Flash. Nu is dat laatste bij geen enkele van de Adobe-toepassingen nog een knelpunt. Alle voormalige Macromedia-producten beschikken inmiddels over uitstekende Photoshop-importfilters. In Flash en Fireworks blijven ook laageffecten, kleuren, transparanties, verlopen en filters intact.

Overwegingen

In alle gevallen heb ik ongeveer het volgende antwoord gegeven. Dit is lang niet een uitputtend overzicht van de kenmerken en/of verschillen tussen Fireworks en Photoshop, maar het geeft wel enkele aanknopingspunten waarmee je rekening kunt houden als je zelf ook deze keuze moet maken.

  • Wat moet je ontwerpen? - Maak je vooral (statische) afbeeldingen, foto's en artwork voor websites, dan kun je het beste Photoshop kiezen. Dit programma staat daarin op eenzame hoogte.
  • Webelementen? - Maak je vooral websiteontwerpen, grafische layouts, knoppen en menu's en dergelijke? Oftewel, bestaat jouw taak uit het ontwerpen van interactieve elementen voor websites, kies dan Fireworks. Hierin in Fireworks CS3 echt heel sterk, terwijl de basisbewerkingsmogelijkheden voor foto's bijna niet onderdoen voor Photoshop.
  • Waar heb je al ervaring mee? - Als je al gewend bent te werken met vectortekenpakketten zoals bijvoorbeeld CorelDraw of Illustrator, dan zal Fireworks je waarschijnlijk beter passen. Er zijn erg makkelijk en goede vectortekengereedschappen voor beschikbaar.
    Als je evenwel veel gewend bent te werken met fotobewerkingsprogrammatuur (pixelbewerking), dan ligt Photoshop meer voor de hand.
  • In welke taal wil je werken?  - Als je niet erg bekend bent met de Engelstalige termen voor beeldbewerking, dan ligt het gebruik van Photohop meer voor de hand. Dit programma is vertaald in het Nederlands en er zijn vele Nederlandstalige Photoshop-websites en magazines. Fireworks is uitsluitend in het Engels verkrijgbaar. En zal ook niet worden vertaald, volgens mijn contacten bij Adobe.

Er zijn nog tal van andere overwegingen, maar dit zijn de belangrijkste naar mijn idee. Op de productpagina's van de beide programma's bij Adobe kun je eenvoudig pdf-productsheets vinden waarin alles op een rijtje staat.

Fireworks tutorials

En alsof het toeval een handje wilde helpen bij het schrijven van dit blogbericht, zag ik vanochtend dat op de site van Smashing Magazine (tip!) een complete pagina was verschrenen met Fireworks Tutorials en downloads. Uiteraard allemaal Engelstalig.

Adobe Fireworks Tutorials and Downloads - Best of

Smashing Magazine

Als je meer Nederlandstalige informatie over Fireworks CS3 zoekt, dan kun je -beperkt- terecht op de site van Adobe, of lees Het Complete Boek Adobe Creative Suite 3 Web Edition. Hierin is een compleet deel gewijd aan het werken met Fireworks CS3.

 

Peter Kassenaar
-- 19 maart 2008