Webdesign & Fireworks
Door Jules Janssen • Thursday 11 March 2010
Tegenwoordig lijkt het erop of iedere halve gare met een illegaal Photoshop kopietje zichzelf ‘designer’ mag noemen. En dan ook direct het hele scala omvattend: logo’s, huisstijlen, posters, websites, interfaces, producten, visitekaartjes, verpakkingen, auto’s, inrichtingen. Als het maar in de verste verte iets met tekenen te maken heeft kan deze designer er mee aan de slag. Tijdens mijn werk, maar ook met het zien van andermans werk, loop ik telkens weer tegen slechte producten van deze zogenaamde designers aan. Gelukkig heb ik er zelf alleen ‘last’ van als het om webdesign gaat. Twee dingen die me op zijn gevallen:
Allereerst: Photoshop is niet bedoeld voor webdesign! Deze zal er waarschijnlijk niet meer uit te krijgen in de designer-wereld, maar uiteindelijk is Photoshop natuurlijk gewoon een tool om foto’s te bewerken, niet om user interfaces / webdesigns mee in elkaar te zetten. Al dat sub-pixel gedoe is hartstikke leuk voor je print uitdraai, maar simpelweg onmogelijk op het web. Het werken met Photoshop maakt een designer overigens absoluut niet meer of minder goed, maar ze gebruiken wel de verkeerde tool voor hun werk. Wat dan wel? Fireworks! Inmiddels is Fireworks ook een onderdeel van het Adobe CS pakket (ooit begonnen als Macromedia product) en dit is onbetwist de beste tool for the job. Tip: slice je ontwerp één keer in Fireworks en je wil nooit meer terug naar Photoshop.
Ten tweede: bestandsformaten! Er zijn grofweg 3 bestandsformaten voor afbeeldingen die geschikt zijn voor het web, waarom weet dan nog de helft van deze so-called designers niet hoe deze verschillen? Hier een kleine samenvatting:
- JPEG: ‘lossy’, ofwel met kwaliteitsverlies (afhankelijk van compressie). Miljoenen kleuren. Meest geschikt voor foto’s. Let wel: exporteer met RGB kleurpallet zonder kleurprofiel (dit vanwege afwijkende kleuren in niet-Webkit browsers). CMYK werkt sowieso niet in IE, dus dat ook maar gewoon niet doen. (met Fireworks gaat dit gedoe met kleurpalletten & -profielen automatisch goed)
- GIF: ‘lossless’, maar maximaal 256 kleuren. Ondersteuning voor transparantie, maar enkel ‘aan’ of ‘uit’ (geen alpha-kanaal). Klein en compact formaat dat vooral geschikt is voor afbeeldingen met grote vlakken en weinig kleuren.
- PNG: ‘lossless’, miljoenen kleuren + een apart alpha kanaal (transparantie). Ideaal voor alles eigenlijk, ware het niet dat PNG nogal grote bestanden oplevert als je er foto’s mee gaat opslaan. Het alpha-kanaal is ideaal, maar hou er rekening mee dat IE6 dit standaard niet ondersteunt (met lelijke blauwe vlakken als gevolg).
Meer info vindt u hier (helaas icm Photoshop).