Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving

view comments

Upgraden naar ExpressionEngine 2.0

21 Jan 2010

Wie mijn blog al een tijdje volgt, weet dat ik websites maak met ExpressionEngine, een krachtig contentmanagementsysteem. ExpressionEngine maakt het mijn klanten makkelijk om hun website van inhoud te voorzien. Tegelijk legt het CMS me geen designbeperkingen op. (Meer informatie daarover in dit artikel.)

Onlangs heeft ExpressionEngine een grondige upgrade gekregen. Eerder deze week vond ik de tijd om de gloednieuwe versie 2.0 (weliswaar nog in bèta) op mijn eigen website uit te testen. En wellicht had je helemaal niets gemerkt maar dit is de eerste blogpost die is opgemaakt in ExpressionEngine 2.0. Hoera!

Upgraden

Het upgradeproces is goed gedocumenteerd. Zorg er wel voor dat je de juiste documentatie gebruikt op de ExpressionEngine website. Het volstaat niet om op het Documentation menu-item te klikken want dan lees je de upgradeinstructies voor versie 1. Het duurde een tijdje vooraleer ik dat inzag.

Upgraden op zich was best eenvoudig: enkele mapjes ftp’en naar de juiste locatie, rechten instellen en dan via de browser naar een upgradepagina surfen waar ExpressionEngine de rest automatisch doet.

ExpressionEngine 2 installatiescherm

Na enkele seconden kreeg ik de melding dat de installatie van versie 2.0 geslaagd was.

Even de site checken

Probleempje: de relationships tabel in de database had blijkbaar geen upgrade gekregen waardoor relaties tussen blogposts niet werden overgezet. Ik gebruik die relaties onderaan elke blogpost (ook hieronder te zien) om links te leggen naar inhoudelijk verwante artikelen. Toen ik na de upgrade de website controleerde zag ik meteen dat die links allemaal om zeep waren.

Relatiesbug

Het ExpressionEngine support team heeft ondertussen bevestigd dat dit een bug is. Je kan de status van de bug hier volgen. Laat ons hopen dat het probleempje snel wordt verholpen. Wil je toch al upgraden en maak je ook gebruik van relaties tussen artikels? Dan is er een tussentijdse oplossing: open elke blogpost in het administratiepaneel en klik op Submit. Vervelend maar effectief.

Plugins, extensies en modules

Als je van plan bent om zelf de upgrade te doen, zorg er dan voor dat je goed weet welke add-ons je in versie 1 had geïnstalleerd. Je kan ze allemaal zien via het administratiepaneel. Controleer of ze compatibel zijn met de nieuwe ExpressionEngine versie. Na de upgrade kan je ze dan met een gerust gemoed opnieuw installeren. Als je dat niet doet dan verlies je uiteraard hun functionaliteit. In sommige gevallen kan dat leiden tot lelijke foutmeldingen, zeker wanneer je add-onafhankelijke tags hebt gebruikt in je templates.

Low NoSpam add-on

Zelf had ik alleen een probleempje met de Low NoSpam add-on: een fantastische extensie die comment spam blokkeert met behulp van Akismet. Low NoSpam bleek nog niet compatibel met de nieuwe ExpressionEngine versie. Maar gelukkig was NoSpam developer Lodewijk Schutte heel erg behulpzaam en mailde hij me een bètaversie van NoSpam. Die lijkt — voorlopig althans — uitstekend dienst te doen.

Verder had ik geen problemen met de weinige add-ons die ik op thehotseat.be gebruik. Ze bleken allemaal al compatibel te zijn met de nieuwe ExpressionEngine versie. Als je zelf wil upgraden en je twijfelt over de bruikbaarheid van bepaalde add-ons, dan is er dit mooi overzicht van EE2.0 compatibele add-ons.

En voilà!

Met uitzondering van de relatiesbug is de upgrade heel vlot verlopen. ExpressionEngine 2.0 draait nu soepel achter de schermen van deze website. Aan de zichtbare buitenkant is alles bij het oude gebleven. Aan de achterkant blinkt nu dit gloednieuwe administratiepaneel:

Expression Engine 2.0 admin panel

Dit administratiegedeelte bevat trouwens nog heel wat vervelende kinderziektes, maar daar blog ik later ongetwijfeld nog eens over.

3 reacties


view comments

Hoe het ontwerp van Transistor tot stand kwam

12 Jan 2010

In een vorige blogpost kon je meer lezen over de release van Transistor, een iPhone app waarmee je de Belgische radiozenders kan streamen. In deze blogpost wil ik graag even stilstaan bij het designproces van het programma.

Het uitgangspunt van Transistor was dat we (David als developer en ik als ontwerper) een radio-applicatie wilden ontwikkelen waarmee gebruikers naar de meest populaire Belgische radiozenders kunnen luisteren. Er was uiteraard al de radio-app radio.be, maar wij wilden het ietsje grafischer aanpakken. Ik wilde vooral ook een heel erg duidelijke en gebruiksvriendelijke gebruikersomgeving ontwerpen. Daarom kozen we voor weinig features en instellingen, gewoon rechttoe rechtaan radio streamen. Less is more!

Het iPod navigatiewiel

Als belangrijkste navigatiemiddel wilden we werken met het bekende iPod navigatiewieltje. We gingen er van uit dat de meeste gebruikers van een iPhone of iPod Touch ook ooit al eens een klassieke iPod hadden gezien. Ze wisten dus meer dan waarschijnlijk wel hoe zo’n iPod navigatiewiel te gebruiken. Het kon hen een positief gevoel van herkenning geven.

Dieter Rams

In het begin wilden we vooral dat Transistor het sentiment van een oude transistorradio zou oproepen. Ik ben toen op zoek gegaan naar voorbeelden van goed ontworpen radio’s. Het is waarschijnlijk geen toeval dat ik snel bij Dieter Rams ben terecht gekomen. Rams is een Duits productdesigner die vooral bekend is door zijn werk voor elektronicaproducent Braun AG in de jaren 1950 tot 1990. Het is een publiek geheim dat het werk van Rams ook een directe inspiratiebron is voor de designers bij Apple. Hieronder vind je enkele van zijn mooie radio-ontwerpen:

dieter rams design voor Braun AG als inspiratiebron voor Transistor

dieter rams ontwerp voor Braun AG als inspiratiebron

dieter rams radio-ontwerp voor Braun AG als inspiratiebron voor Transistor


Van Rams naar Transistor

Vooral de kleuren en het ontwerp van dat laatste radiootje vond ik sterk en bruikbaar. Geïnspireerd volgden enkele vlugge schetsen op papier. Daarna startte ik Photoshop op en vrij snel ontsproot het eerste ontwerp voor Transistor:

Transistor ontwerp versie 1

De positie van het navigatiewiel en het venstertje spreken voor zich. Het kleur doet denken aan dat van een witte iPod. De kleuren en het uitzicht van de frequentieband zijn geïnspireerd op de radio’s van Dieter Rams.

Functioneel denken

Bij het ontwerpen van een gebruikersomgeving moet je natuurlijk ook altijd functioneel gaan denken. Het leek me logisch dat het draaien van het wiel ook de frequentieband zou doen bewegen, net zoals je vroeger aan een knop kon draaien om een radiofrequentie te zoeken. De donkere overlay duidt dan de geselecteerde radiozender aan.

Als er geen radiostream beschikbaar is, dan brandt het lampje linksonder rood. Als de radiostream aan het inladen is, dan flikkert het lampje en als de radio afspeelt dan brandt het lampje groen.

België is Vlaanderen en Wallonië

Ik moest ook nog een manier vinden om een onderscheid te maken tussen de Nederlandstalige en de Franstalige zenders. Zoals je kan zien loste ik dat op door twee knoppen onder het schermpje te plaatsen. Tik je op de FR knop dan verschijnen de Franstalige zenders, klik je op de NL knop dan zie je uiteraard de Nederlandstalige zenderlijst verschijnen.

Problemen bij het eerste ontwerp

Na bespreking en enkele revisies werd het duidelijk dat het eerste ontwerp enkele belangrijke problemen had:

  • Belangrijke radiozenders van het andere taalgebied zitten verstopt. Hoewel de taalknoppen vrij duidelijk lijken, kan het gebeuren dat een gebruiker niet meteen een anderstalige zender vindt.
  • Om de klassieke radiolook te behouden moest ik de radiologo’s aanpassen naar het Braunoranje. Dat maakt ze minder snel herkenbaar voor de gebruiker. Daarbij komt dat het eigenlijk not done is om de kleuren van een logo te veranderen.
  • Het groene lampje dat de status van de stream aangeeft, staat een beetje te ver van de zenders: het oog van de gebruiker moet een sprongetje maken van logo naar lampje en terug. Dat werkt verwarrend.

Ontwerp 2: even finetunen

In een volgende ontwerp werd vooral het probleem van de taalkeuze opgelost:

Transistor iPhone app ontwerp versie 2

In plaats van twee knoppen te voorzien kon ik gewoon de frequentieband gebruiken om het onderscheid te maken: aan de ene kant de Franstalige zenders en aan de andere kant de Nederlandstalige zenders!

Zoals je kan zien staat het statuslampje nu ook rechtsboven. Dat leek me logischer omdat je als iPhonegebruiker gewend bent om ook voor de netwerk- en batterijstatus bovenaan op je scherm te kijken.

Kleuren

In het tweede ontwerp zijn ook de kleuren aangepast: weg van de iPodkleuren en volledig richting de Braunkleuren. Mede door het weglaten van de taalknoppen ziet alles er al een pak rustiger en duidelijker uit.

Problemen bij het tweede ontwerp

Ook het tweede ontwerp had enkele duidelijke problemen:

  • Het probleem van de oranje logo’s blijft bestaan (zoals hierboven omschreven).
  • Het statuslampje staat logischer gepositioneerd maar staat nog altijd te ver van de zenders waardoor het oog van de gebruiker nog altijd sprongetjes moet maken om te zien of een zender goed ontvangen wordt.
  • Als de taalaanduiding helemaal aan het uiteinde van de frequentieband staat zoals in het ontwerp te zien is, hoe kan een gebruiker dan weten welke taal aan welke kant van de band staat? De gebruiker zal heus geen zin hebben om de volledige band te doorlopen om dan te ontdekken dat zijn favoriete zender eigenlijk aan de andere kant te vinden is.
  • Ondertussen hadden we na hele simpele tests ook nog een bijkomend probleem ontdekt: Het navigatiewiel was een beetje te klein voor mijn grote vingers!

Achteraf gezien bood dit tweede ontwerp dus niet meteen de juiste oplossingen voor de problemen van het eerste ontwerp. Al was het positieve wel dat de interface er eenvoudiger uit zag: minder knoppen.

Ontwerp 3: weg van de Braunkleuren

“Als we de logo’s in hun oorspronkelijke kleuren moeten houden, dan houdt het Braunoranje geen steek meer en dan laten we de Braunkleuren best helemaal vallen.”, dat was de redenering achter het derde ontwerp:

Transistor ontwerp versie 3: zwart

En dus opteerde ik, zoals je kan zien, voor logo’s in grijswaarden en kleuren. De applicatie zelf werd volledig omgebouwd naar de kleuren van een zwarte iPod.

Weg met het statuslampje!

Het probleem van het statuslampje kon ik ongelooflijk eenvoudig oplossen: ik haalde het gewoon weg! Visuele feedback over streamen en bufferen kon anders en beter aangepakt worden: het logo van het radiostation dat ingeladen werd, licht vanaf nu op in kleur. Een flikkering tussen zwart-wit en kleur betekent dat een connectie wordt gemaakt en een blijvend kleurlogo betekent dat de radiostream voor dat station wordt afgespeeld.

Het oog van de gebruiker kan dus blijven rusten op het radiologo. Dat maakt alles plots veel eenvoudiger en duidelijker. Bovendien blijkt het ook heel erg logisch. Dat ik daar niet eerder aan had gedacht!

Om het gevoel van een oude radio toch nog te behouden, probeerde ik even met een glasplaatje boven de actieve zender.

De taalaanduiding

Ook voor de taalaanduiding vond ik een eenvoudige oplossing: als je Transistor voor de eerste keer opstart, dan zie je het midden van de frequentieband. Daar verschijnt meteen een aanduiding: Nederlandstalige zenders aan de linkerkant en Franstalige zenders aan de rechterkant. Je kan de aanduiding zien op het ontwerp hieronder. Ook dat leek me duidelijk en logisch.

Transistor ontwerp met taalaanduiding in het midden

Probleem van het navigatiewiel

Door de problemen in de vorige ontwerpen met het te kleine navigatiewiel, speelde ik even met het idee om het navigatiewiel te laten varen. In plaats daarvan zou ik een Braunachtig luidsprekerpatroontje gebruiken.

Ontwerp zonder navigatiewiel maar met Braunachtig luidsprekerpatroon

Ik vind het op zich nog altijd een mooi ontwerp maar het impliceert dat de gebruiker moet scrollen door te schuiven in de frequentiezoeker zelf. Wie dat doet, bedekt met de vinger automatisch deels de zenderlijst wat het navigeren bemoeilijkt. En ik kan me inbeelden dat vele gebruikers iets functioneel verwachten van het luidsprekerpatroontje. Mooi maar niet bruikbaar. Skippen dus.

Ontwerp vier: groter is duidelijker

Voor het vierde ontwerp liet ik het minder geslaagde glas vallen en maakte ik het schermpje een stukje groter. Ik positioneerde het wat beter ten opzichte van de randen van de iPhone en maakte meteen ook de logo’s groter en duidelijker.

Transistor ontwerp versie 4: grote duidelijke logos

De taalinformatie liet ik ook zakken zodat die in het midden van het schermpje komt te staan. Duidelijker kan niet.

Transistor startscherm: taalkeuze in het midden

De infoknop is er ondertussen ook bijgekomen op een minder opvallende plaats: wie de knop nodig heeft zal hem ongetwijfeld wel vinden. (Wie op de infoknop klikt, krijgt minder belangrijke informatie te zien over Transistor, samen met een regio-instelling.)

Volumeregelaars

Misschien heb je gemerkt dat Transistor geen volumeregelaar heeft. Dat was een bewuste keuze: wie een iPhone heeft, weet hoe je het volume kan wijzigen door de knoppen aan de zijkant van het toestel te gebruiken. Het leek ons dan ook onnodig om een aparte volumeregelaar toe te voegen aan Transistor zelf. Je kan gerust die van de iPhone gebruiken.

Testen maar!

Transistor had een duidelijke vorm gekregen en werkte goed. Tijdens de weken die volgden op het laatste ontwerp heb ik vooral veel mensen rondom me aangeklampt, hen mijn iPhone in de handen geduwd en hen gevraagd om Transistor (in bèta) eens te testen. Ondertussen hield ik hen natuurlijk nauwlettend in de gaten. Noem het gerust een soort van usabilitytest met onwetende testpersonen.

De resultaten waren heel gunstig. Eén probleempje kwam wel telkens opnieuw naar voren: minstens één op de twee gebruikers had niet meteen het navigatiewiel ontdekt en probeerde met de vingers op de frequentieband te duwen om zo te scrollen doorheen de radiozenders.

Dat was een schok. Vanaf dag 1 hadden we het idee opgevat om het navigatiewiel te gebruiken. We waren er ook van overtuigd dat het een leuke en goede manier van navigeren zou zijn. En nu we dichtbij de release van Transistor stonden, bleken mijn testgebruikers het wiel niet eens op te merken!

Terug naar Photoshop

De oplossing lag in het probleem: de testgebruikers merkten het wiel niet meteen op, dus moest het wiel duidelijker zichtbaar worden. Door het contrast te verhogen tussen de achtergrond en het wiel was het effect op nieuwe testpersonen heel erg positief.

Transistor: meer contrast tussen wiel en achtergrond

Even terzijde: hoe feller de schermhelderheid van een iPhone is ingesteld, hoe lichter de kleuren en hoe duidelijker het contrast wordt. Voor onze testpersonen gebruikte ik altijd een iPhone waarvan de schermhelderheid op het minimum was ingesteld. Als de testpersonen op dat toestel het wiel opmerkten, dan zouden ze het zeker opmerken bij meer heldere iPhones.

Niets aan het toeval overlaten

Eén enkele testpersoon had toch nog niet meteen door dat het navigatiewiel gebruikt moest worden om door de zenders te navigeren. Toen hebben we beslist om voor alle duidelijkheid een kleine instructie te geven wanneer je Transistor voor de eerste maal opstart:

Eerste keer? Draai het wiel om naar je favoriete radiostations te tunen.

Ik geef toe dat ik er niet helemaal tevreden over ben: het bericht is een symbolische bekentenis: “Het is niet duidelijk dus geven we maar een instructie.” Het is ergens een toegeving van slecht ontwerp. Want als Transistor heel erg duidelijk was geweest, dan was de bovenstaande instructie overbodig geweest.

Leren uit de reacties

Maar goed, het bericht is er nu en Transistor is al een tijdje gratis beschikbaar in de iTunes App Store. Met succes trouwens! Ondertussen leer ik heel erg veel uit de reacties van de gebruikers. Ik kijk ook nauwlettend hoe ze met het ontwerp omgaan. Die feedback zal helpen om het ontwerp van een volgende versie nog beter te maken.

Voor mezelf was het ontwerpen van Transistor alvast een heel erg leuke ervaring. Programmeer je zelf een iPhone app en ben je nog op zoek naar een designer? Laat dan zeker wat van je horen!

9 reacties


view comments

Transistor: radio op de iPhone

21 Nov 2009

Tussen klantopdrachten en freelancewerk door werkten David en ik de afgelopen maanden aan Transistor, onze eerste iPhone applicatie. David als developer, en ik als ontwerper.

transistor iphone app screenshot

Transistor is een eenvoudige radio app geworden waarmee je naar de meestbeluisterde Belgische radiozenders kan tunen op je iPhone en iPod Touch. Het programma is vanaf nu gratis beschikbaar in de iTunes App Store. Transistor is verkrijgbaar in het Nederlands, Frans en Engels en je kan er de onderstaande radiozenders mee streamen.

Nederlandstalige radiozenders:

  • Radio 1
  • Radio 2
  • Studio Brussel
  • Klara
  • MNM
  • Nostalgie
  • Top Radio
  • Be One

Franstalige radiozenders

  • La Première
  • Viva Cité
  • Musiq3
  • Classic 21
  • Pure FM
  • Nostalgie
  • NRJ
  • Fun Radio

Heb je dus zo’n fancy gsm of iPod, laat dan zeker eens weten wat je er van vindt. Het ontwerpen van de user interface van zo’n iPhone programmaatje was trouwens een erg leuke ervaring. Maar daar vertel ik je later wel eens meer over. En nu downloaden maar!

6 reacties


view comments

Over HTML5

15 Nov 2009

HTML5 is al enkele jaren in ontwikkeling en het lijkt er op dat het ook nog een tijdje zal duren vooraleer HTML5 officieel ‘af’ zal zijn. Toch ondersteunen browsers al enkele van de nieuwe HTML5-tags en duiken er op blogs meer en meer artikels op over deze nieuwste HTML-telg.

So what’s up?

Maar hoever staan we nu? Is XHTML ten dode opgeschreven en moeten we vanaf nu opnieuw HTML gebruiken? Kunnen we überhaupt al HTML5 gebruiken en wat moeten we daarvoor doen? Wat is dat nieuwe canvas element waar iedereen zo lovend over spreekt?

Alles over HTML 5

In de Boagworld podcast episode 184 (eind september 2009) heeft de host een interview met Jeremy Keith, één van de zogenaamde HTML5 superfriends. Jeremy slaagt er in om als geen ander enkele ingewikkelde concepten achter HTML5 heel erg duidelijk uit te leggen. Hij haalt hardnekkige misverstanden de wereld uit en laat ons weten wat we best doen om ons als websitebouwers optimaal voor te bereiden op HTML5. In het interview verwijst Jeremy ook naar enkele interessante links over HTML5.

Je kan de episode beluisteren op de episodepagina van de Boagworld podcast website. Het interview begint rond de 23ste minuut. Je vindt er trouwens ook een volledig neergeschreven versie van het interview. Enjoy.

0 reacties


view comments

Scrollen in het oneindige

11 Nov 2009

Een paar jaar terug was ik onder de indruk van de manier waarop Google voor Google Reader de klassieke vorm van paginering had herdacht en zelfs onnodig gemaakt.

Hieronder zie je een voorbeeld van een klassieke paginering: op de pagina zie je enkel de eerste items. Wil je meer items zien, dan moet je doorklikken naar de volgende pagina.

screenshot klassieke paginering van readernaut.com

Google Reader gebruikt geen paginering maar maakt gebruik van de scrollbar: wil je meer items zien, dan scroll je gewoon naar onder. Als de scrollbar beneden is, worden nieuwe items aan de pagina toegevoegd.

screenshot google reader

Het is een geniaal eenvoudige oplossing die erg intuïtief werkt en die voor iedereen meteen ook duidelijk is.

Wat goed is, krijgt navolging

Googles vernuftige oplossing heeft sindsdien uiteraard navolging gekregen. Recent nog door Haystack bijvoorbeeld, de nieuwe jobsite van 37signals. Als je er naar beneden scrollt, dan worden nieuwe portfolio’s ingeladen op de pagina. Hoe meer je dus scrollt, hoe langer de pagina wordt. Probeer het maar eens.

screenshot haystack 37signals

Scrollen in het ijle

Maar op de Haystack website lijkt het scrollmechanisme me minder logisch. Als je op zoek bent naar een webdesignbureau uit België, dan ga je waarschijnlijk alle portfolio’s willen afschuimen uit België om zo een juiste keuze te kunnen maken. Je begint dus te scrollen en er komen telkens portfolio’s bij. Dat werkt handig.

Maar na een tijdje ga je je echt wel afvragen hoeveel portfolio’s er nog volgen. Op de Haystack pagina is nergens te zien hoeveel scrollwerk je nog zal hebben om alle portfolio’s uit België te kunnen zien. En dus ben je maar een beetje aan het scrollen in het oneindige.

Bij een klassieke (en goedgebouwde) paginering heb je altijd een idee van hoeveel items er nog volgen. Is er geen paginering dan kan je vaak uit de lengte van de scrollbar afleiden hoe lang de pagina is en dus hoeveel items er waarschijnlijk nog gaan volgen. Maar op de Haystack manier blijft het gissen.

Een oplossing

Een simpele aanduiding van hoeveel portfolio’s nog volgen, zou volgens mij helemaal niet misstaan om het systeem een pak gebruiksvriendelijker te maken. Da’s trouwens ook wat Google Reader doet.

1 reacties


view comments

Tekstomloop op het web in Photoshop

13 Oct 2009

Bij het ontwerp van nieuwspagina’s of blogpagina’s op websites zie je vaak een foto links of rechts bovenaan het artikel. De tekst loopt dan mooi rondom de foto. Hieronder een voorbeeldje van wat ik bedoel, zoals te zien op www.typography.com:

tekstomloop op typography.com

Het is een vormgeving die natuurlijk ook heel vaak in offline media te zien is zoals kranten en magazines. In opmaakprogramma’s als InDesign is het daarom makkelijk gemaakt om een tekstomloop rond een afbeelding te creëren. Er is zelfs een volledig paletje aan gewijd met bijkomende tekstomloopopties.

het palet tekstomloop in InDesign

Ook met HTML en CSS is zoiets heel eenvoudig te realiseren. In Photoshop daarentegen is het allemaal wat moeilijker. Logisch: Photoshop is er in de eerste plaats om foto’s te bewerken. En niet om teksten te zetten. Maar omdat zoveel ontwerpers opgegroeid zijn met Photoshop, is het toch voor velen onder ons het favoriete programma om websites in te ontwerpen.

Vandaar deze eenvoudige tip om het effect van een tekstomloop te bekomen in Photoshop:

  • Teken met de pen de vorm van een tekstkader rondom je foto. Door te shift-klikken kan je trouwens perfect horizontale of verticale lijnen tekenen.
  • Beweeg met het tekstgereedschap binnenin je padvorm. Als alles goed is zie je een bolle cursor.
  • Klik in de padvorm om het pad om te zetten naar een tekstkader.
  • Typ of plak je tekst in het tekstkader.

tekstomloop in Photoshop

Je tekst zal nu mooi rond de foto lopen. Als je het tekstkader wil aanpassen dan kan je daarvoor de padgereedschappen gebruiken. Met de witte pijl kan je bijvoorbeeld de ankerpuntjes nog individueel verplaatsen.

Het is een beetje behelpen, maar het werkt wel.

1 reacties


view comments

Een Photoshoptip voor webdesigners

23 Jun 2009

Sinds een paar weken werk ik met de nieuwste versie van Photoshop: CS4. Het programma heeft een aantal leuke nieuwigheden die vooral voor fotografen interessant kunnen zijn, zoals de mogelijkheid om lokale aanpassingen te doen op foto’s in Camera Raw.

Ook het nieuwe Content-aware scaling (of Zo schalen dat inhoud behouden blijft in het Nederlands) is erg handig wanneer je een foto buiten verhouding in een ontwerpje moet doen passen. Wie er nog niet van gehoord heeft moet zeker eens dit filmpje checken.

Vandaag ontdekte ik dat Content-aware scaling ook erg interessant kan zijn voor wie net als ik vaak websiteontwerpen maakt.

Ik werkte zopas aan een html-formulier en dan heb ik de gewoonte om standaard invulvelden via een screenshot in mijn ontwerp te plakken. En dan begint het natuurlijk: een textarea moet groter worden, een tekstveld moet smaller worden, een knop moet breder worden… vóór versie CS4 was dat vooral een vervelende kwestie van selecteren, verplaatsen, stukjes kopiëren en plakken. Want wie dat niet deed kwam uiteraard bedrogen uit:

een formulierveld schalen zonder content-aware scaling in Photoshop

Het invulveld hierboven is geschaald op de oude manier: via Bewerken > Transformatie > Schalen. Niet erg mooi en helemaal niet realistisch. Door Bewerken > Zo schalen dat inhoud behouden blijft (wat een naam voor een menu-item!) te gebruiken, kan je vrij makkelijk dit resultaat bekomen:

een formulierveld schalen met content-aware scaling in Photoshop

Dit ziet er wél scherp en realistisch uit! Ik ben verkocht. Nu is het nog aan pak makkelijker om formuliervelden tientallen keren te schalen terwijl het ontwerp vorm krijgt.

Tot slot nog een kleine tip: ik heb gemerkt dat het via Zo schalen dat inhoud behouden blijft beter is in stappen te schalen wanneer je een beduidend stuk groter of kleiner moet schalen. Probeer je het in 1 beweging dan durft Photoshop de randen wel eens een onrealistische wrong te geven.

9 reacties


Over logo TheHotSeat 

foto Thomas Byttebier pijltje TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.

RSS Feed TheHotSeatLaatste blog posts

Laatste reacties

Categorieën

AlleExpressionEngineiPhoneTransistorMarketingSEOOntwerpTypografieOntwikkelingjQueryPHPZend FrameworkOpiniesOverigePhotoshopWebomgeving