Een weblog van Michel Kuik over webdesign, usability en interactie ontwerp

Home Archief Abonneer op een RSS Feed en blijf op de hoogte

Photoshop voor webdesigners, een artikel in de Advanced Photoshop

10 juni 2009

Op 13 juni 9 juni verschijnt er een nieuwe editie van de Advanced Photoshop in de winkel, met daarin een artikel over Photoshop voor webdesigners. Ik werd een aantal weken geleden gevraagd om een aantal vragen te beantwoorden. Citaten hieruit zijn opgenomen in het artikel Photoshop + Webdesign. Zonder teveel zelfbevlekking te willen bedrijven; ik vind het een geslaagd artikel voor iedereen die met Photoshop werkt, maar dit nog niet met Webdesign weet te combineren. Metname ook door de expertise van Steven De Loenen en Peter McClean. Gek. Om daar zo zelf tussen te huppelen.

Het complete artikel:

Photoshop + Webdesign in Photoshop Advanced, 18

Photoshop is een toepassing die door veel verschillende mensen gebruikt wordt. Mensen gebruiken het programma voor standaard fotobewerkingen, maar het wordt ook gebruikt om de mooiste digitale kunstwerken te maken. Door de verbeterde gebruiksvriendelijkheid neemt het belang van Photoshop ook toe bij webdesign. Webdesigners noemen Photoshop een belangrijk programma en hebben daar allerlei redenen voor. Een daarvan is de mogelijkheid om nietdestructieve opdrachten uit te voeren, dankzij laagstijlen en slimme filters, die veel gemak bieden voor designer die flexibiliteit nodig hebben. Een andere reden zijn de hulplijnen, waarmee je de tussenruimten en posities van elementen in je ontwerpen perfect kunt verdelen. Daarnaast zijn er ook steeds meer Photoshoppers die zich met webdesign gaan bezighouden om zich creatief te (blijven) ontwikkelen. In deze feature zoeken wij uit hoe ook jij dat kunt bereiken.

Steven de Loenen en Michel Kuik

Steven De Loenen is een Belgische ontwerper die zich onder de naam Stoav vooral bezighoudt met multimediadesign voor onder andere dvd-siteprojecten voor 20th Century Fox films of series als Watchmen, Prisonbreak, 24 en X-men. Zijn werk omvat printwerk, logo’s, huisstijlen, webdesign en 2D en 3D-animatie. Zijn reden om met Photoshop te werken, ligt eigenlijk voor de hand: “Ik ben op school begonnen te werken met Photoshop en ik ben nooit een beter programma tegengekomen.”
“In de eerste fase, tijdens het ontwerpen van de interface, werk ik meestal tegelijk in Photoshop en illustrator (voor de vectorgebaseerde dingen). Het is makkelijk dat je de lagen vectorgebaseerde kunt houden als je het werk importeert in Photoshop. Ik heb de CS4 Production Premium en alle software die ik gebruik werkt perfect samen.” Wat De Loenen verder ontzettend handig vindt aan Photoshop zijn de laagmaskers. “Het gebeurt vaak dat een foto in een ontwerp achteraf vervangen of aangepast moet worden en door het gebruik van maskers behoud je steeds de volledige originele foto. Meestal werk ik toch vrij basisch in Photoshop. De veelzijdigheid van het programma maakt het voor iedereen mogelijk om op zijn eigen manier te werken.”

Michel Kuik is zelfstandig webdesigner en developer die onder andere opdrachten heeft gedaan voor TMF en de NCRV. “Ik houd me bezig met interactie-ontwerp (usability), visueel ontwerp en de front-endontwikkeling van websites”, legt hij uit. “Een website bestaat, net als een foto, uit pixels. Werken met vectoren is dus voor webdesign niet belangrijk. Het is om die reden dat alle webdesigners, net als beeldbewerkers, ook Photoshop gebruiken. Daarnaast heeft het programma ook een aantal tools voor webdesigners in huis, zoals het exporteren van afbeeldingen naar bruikbare internetafbeeldingen.Maar waarom ik nou Photoshop gebruik en niet een ander grafisch programma? Volgens mij heeft het te maken met het feit dat je bijna ieder beeld dat je in je hoofd hebt.

Webdesign workflow

Maar hoe begin je en welke workflow werkt eigenlijk het beste? “Als er een schematisch interactie-ontwerp gemaakt is, begin ik met Photoshoppen”, legt Kuik uit. “In feite bouw ik de hele website visueel in Photoshop, vaak met de browser erbij, zodat de klant een goed beeld krijgt van wat er daadwerkelijk zichtbaar wordt. Het is een plat ontwerp, een plaatje dat als basis voor de website dient. Daarna begin ik met het uitknippen van alle elementen, zoals bijvoorbeeld het navigatiemenu, de zoekknop, de randjes om de foto’s, et cetera. Vervolgens moeten deze elementen weer via code (HTML/ CSS) bij elkaar worden gebracht en daarvoor gebruik ik Dreamweaver.”

De Loenen, die veel met animatie werkt, begint eveneens in Photoshop. “Voor de meeste sites maak ik eerst alle secties in Photoshop om de look and feel te bepalen. Vaak komen er dan in elke sectie video overlays. Daarvoor importeer ik de gelaagde psd in After Effects en combineer dat statische gedeelte vaak met video. De achtergrondelementen sla ik vanuit Photoshop op als jpg en contentelementen worden opgeslagen als png met transparantie. De meeste van mijn Flashsites bestaan dus uit een grote psdcompositie, gecombineerd met videoelementen. Enkel de bewegende elementen in de achtergrond zijn video en dat houdt alles wat lichter.”

Trends in webdesign

Trends in webdesign evolueren en veranderen net als iedere andere creatieve discipline. In het verleden waren gebruikers getuige van de modetrend voor cleane en minimalistische designs, terwijl de groei in het gebruik van texturen en realistische scenario’s evenals dynamische Flash-navigatie nu weer ‘in the picture’ is gekomen. Art director Chevonne Woodard (www.chewoodesign.com) deelt haar eigen observaties over mode: “Magenta, geel, groen en oranje zijn de kleuren van nu, allemaal kleuren waarvan ze op school zeiden dat je die moest vermijden! Maar Apple heeft met de iPod-campagne juist hiervoor een gat in de markt gevonden.”

“Ik denk dat vooral video een grotere rol begint te spelen en nog belangrijker gaat worden”, meent De Loenen. “Het is mogelijk om videobestand van goeie kwaliteit te integreren in Flash terwijl de swf redelijk licht blijft. Verder denk ik dat animatie sneller een sfeer kan overbrengen dan statische sites.”

Ook Kuik signaleert een aantal grote ontwikkelingen: “Toen de gemiddelde internetter nog maar een klein beeldscherm en lage resolutie had, was het voor de webdesigner taak om heel veel informatie in een klein kader te stoppen. Men dacht dat internetters nooit zouden scrollen en de vouw – het stuk van de site dat je zonder te scrollen ziet – was heilig. Je kreeg toen websites met veel kaders en kleine lettertypen. Die trend heeft zette zich door en zelfs nu zie je dat webdesigners moeite hebben om daar vanaf te stappen. Het is ook een soort van kunst geworden om teveel informatie aan te bieden op een mooie manier. Tegenwoordig zie je dat er veel meer waarde wordt gehecht aan de gebruikerservaring van een website. Gebruikersvriendelijk ontwerp, dus usability, is opeens een vak apart en designers kiezen vaker voor meer rust in hun ontwerp. Die trend valt samen met de ontwikkeling van web 1.0 naar web 2.0: het sociale internet.”

“De scheidingslijn tussen geniaal en rampzalig is dun. Het gaat erom dat alles functioneel is en dat je je houdt aan de visuele regels en weet hoe de hersenen omgaan met visuele informatie”, waarschuwt Liliana Sanches (princess-ofshadows. deviantart.com), een Photoshopkunstenares uit Portugal met een hang naar donkerdere en surrealistische afbeeldingen.
“Het belangrijkste om in gedachten te houden is dat het maken van een webontwerp niet hetzelfde is als het maken van een illustratie. Ze zeggen wel dat regels gemaakt zijn om te breken, maar in design zijn er bepaalde regels waaraan je je echt moet houden. Anders verdwalen de gebruikers in eindeloze visuele informatie terwijl ze het menu proberen te vinden, of worden ze ontzettend in de war gebracht door alle rondzwevende visuele elementen.”
Ook Kuik kan zich daarin vinden: “Goed photoshoppen is niet hetzelfde als goed webdesignen, want dat is een combinatie van grafisch ontwerp en interactieontwerp. Ik zie Photoshop als een gereedschap om een doel te bereiken. Het formuleren van het doel is belangrijker dan de weg ernaartoe, dus als je in Paint een website kunt maken en daarmee hetzelfde doel bereikt als met Photoshop, prima! Het wordt pas echt leuk als je kennis van interactiemodellen, grafisch ontwerp en Photoshop weet te combineren!”

Multitasken

De mogelijkheid om te multitasken in de creatieve sector is een aantrekkelijk idee voor klanten, omdat je zo niet alleen goedkoper bent voor je klanten, maar door te leren hoe je een website codeert met opmaaktalen als HTML en CSS kunnen designers beter begrijpen wat wel en niet werkt in het eindproduct. En dat scheelt weer veel tijd en kopzorgen. Je hoeft je daar in principe niet teveel in te verdiepen, tenzij het je ambitie is om een volleerd webdeveloper te worden. De meeste grote bedrijven zoeken liever mensen bij elkaar die elk een expert zijn in hun eigen vakgebied.
De Loenen beaamt dat: “Persoonlijk laat ik het coderen en programmeren liever aan specialisten over. Als ontwerper zie ik graag waar ik mee bezig ben, dus uren met code bezig zijn is niet aan mij besteed.” “In de kern is het voor het proces belangrijk dat een webdesigner weet hoe de code werkt”, vindt Kuik. “Met die kennis kun je rekening houden tijdens het ontwerpen en makkelijker communiceren met de programmeur. Kleine vormgevingkeuzes kunnen van grote invloed zijn op de code en het is fijn als je daarmee rekening kunt houden.” Toch ziet Kuik ook een keerzijde: “Aan de andere kant is het een beperking dat je die regels kent en daarmee rekening gaat houden, want het remt het creatieve proces. Als je zelf iets moet coderen, ga je rekening houden met hoe dat makkelijk kan, in plaats van hoe dat misschien wel het best kan. Ik probeer per project in te schatten hoever ik mijn eigen creatieve geest mag laten gaan ten opzichte van de code.”

De juiste balans

Maar hoe vind je de juiste balans tussen grafisch aantrekkelijke ontwerpen en gebruiksvriendelijkheid?
“Dat is elk project anders”, vertelt De Loenen. “Voor een site als Vlassak Verhulst BV (een villabouw bedrijf) of Bataille-ibens (binnenhuisarchitectuur) is het belangrijk om de content te laten spreken en een rustige maar sfeervolle interface te creëren met een duidelijke navigatie. Bezoekers willen de content snel kunnen bekijken en de klant wil vooral zijn persoonlijkheid weerspiegeld zien in de vormgeving van de site. Voor dvd-sites of theatrical sites als Watchmen kan ik dan weer heel ver gaan, omdat het hier voornamelijk om een unieke ervaring gaat in de sfeer van de film. Die sfeer kun je verwerken in de interface, navigatie en transities naar de verschillende secties door het gebruik van bijvoorbeeld video. Zo krijg je een soort instant sfeerervaring zonder dat je per se de content hoeft te bekijken. Bezoekers willen hier vooral snel verrast worden. Elk project en elke klant is uniek en vraagt om een eigen sfeer en visuele taal. Ik vind het dan ook belangrijk om je eerst af te vragen wat je wilt maken, om vervolgens de juiste combinatie van software te gebruiken. Zo creëer je voor elk project een soort eigen wereld, waardoor het voor jezelf en de bezoeker interessant blijft.”

Kuik is het hier mee eens: “Het belang van gebruiksvriendelijkheid hangt volgens mij af van het type project. Voor alle websites geldt dat gebruikerservaring belangrijk is, het gaat dus een combinatie van schoonheid en gebruiksvriendelijkheid. Voor reclamegerichte websites is de schoonheid vaak belangrijker, dus in de eerste plaats moet er gedefinieerd worden wat het uiteindelijke doel van de website is. Als dat is gedaan kan er worden gezocht naar een combinatie tussen schoonheid en gebruiksvriendelijkheid.” Hij houdt zichzelf dan ook altijd de volgende gedachte voor: “Zelfs de meest gebruikersvriendelijke interfaces mogen mooi zijn. Dat bewijst Apple met zijn iPhone bijvoorbeeld. Het succes van de iPhone zit hem volgens mij in die combinatie. Aan de andere kant moeten ook de meest sprankelende ontwerpen goed te gebruiken zijn…”

De creative suite

Maar voor webdesigners is niet alleen Photoshop een handig programma. Sinds Adobe enkele jaren geleden Macromedia overnam, is de stal met creatieve toepassingen flink uitgebreid, wat je terugziet in de Creative Suite. “De Creative Suite maakt het vooral makkelijk om tegelijkertijd in meerdere programma’s te werken”, legt De Loenen uit. “Photoshop, Illustrator, After Effects en Flash heb ik meestal tegelijkertijd open staan en alles is op elkaar afgestemd. Een Photoshopontwerp importeer ik met behoud van alle lagen in After Effects en dat combineer ik met animatie. Als je bijvoorbeeld achteraf een correctie in het oorspronkelijke psd-ontwerp wilt maken, hoef je daarna enkel het After Effects-bestand te openen en opnieuw te renderen. Je kunt dus makkelijk over de hele lijn dingen aanpassen tijdens het hele proces. Media Encoder maakt het mogelijk om de video optimaal te comprimeren voor Flash.”

Ook Kuik maakt gebruik van meerdere programma’s uit de Suite. “Als webontwikkelaar spelen Adobe Flash en Dreamweaver een grote rol. Met Flash heb ik een haat-liefde verhouding. Je kunt er supermooie dingen mee maken, maar het blijft een apart programma dat in de browser wordt geladen. Dat irriteert me. Omdat Adobe zo consistent is in zijn manier van gebruik, is het niet moeilijk om met andere programma’s te leren werken. Dat wil niet zeggen dat ik een Illustrator of Indesign-expert ben, maar ik kan ermee overweg en dat is handig.”

Stijgende kosten

Ondanks de huidige economische onzekerheid, beweren webdesigners dat de markt nog steeds lucratief is voor zowel Photoshopveteranen als nieuwe gezichten. Zolang je talent hebt, origineel bent en initiatief toont, worden je diensten gevraagd. Maar gezien de kosten die steeds hoger worden voor alles van softwarelicenties, de beste computers en alles van randapparatuur tot elektriciteit, papier en inkt beginnen digitale kunstenaars de financiële pijn te voelen. “Je kunt prima geld verdienen in deze industrie, maar uiteindelijk moet je een flink deel van je verdiensten meteen weer investeren in je apparatuur, dus als kunst is iets wat je geweldig vindt, ga er dan vooral mee door. Als je ambitieuze dromen hebt om miljonair te worden, moet je misschien een andere baan kiezen. Hiermee wordt je namelijk waarschijnlijk nooit stinkend rijk. De term ‘starving artist’ is immers niet zomaar ontstaan”, zegt Peter McClean, die al vele jaren webdesignervaring heeft voor grote merken als Ford en Paramount Pictures. “De komende jaren voorzie ik dat het vak overspoeld wordt door aanbieders van ´spec work´ (werken die gemaakt worden voor klant in de hoop, maar dus zonder garantie, dat de kunstenaar daar ook voor betaald zal worden) en dat begint de industrie absoluut pijn te doen.” McClean vindt dan ook dat de prijzen berekend moeten worden volgens de huidige en eerlijke marktwaarden en dat ze mede bepaald zouden moeten worden door factoren als de complexiteit van het product, de tijd die eraan gespendeerd wordt en verwachte revisies, evenals het gewenste gebruik van het eindproduct en dat het ook van belang is of de klant een individu, een startend bedrijf of een gevestigde naam is.

“Begin nooit aan een project zonder een wettelijk bindend contract te laten ondertekenen waarin is vastgelegd dat je betaald krijgt voor je werk en begin ook nooit zonder een voorschot”, adviseert McClean. Volgens hem kun je het beste vijftig procent van het totaalbedrag voor je diensten vooruit laten betalen. “Ik publiceer het eindresultaat naar een submap op mijn eigen website, zodat klanten het kunnen bekijken en zien dat het werkt voor ze me de rest van het bedrag betalen. Ik sta erop dat klanten me eerst betalen voordat ik de bestanden naar ze opstuur. Ik heb gemerkt dat dat een hoop kopzorgen scheelt.”

Bronvermelding

Tot zover het artikel in Advanced Photoshop, uitgave 18. Zoals gezegd, vanaf 13 juni 9 juni in de winkel te koop en te bestellen op Advanced Photoshop website.

Interessant artikel? Abonneer op de RSS Feed en blijf op de hoogte!

Jouw reactie