In een eerdere blogpost over tips voor samenwerking grafisch ontwerpers en webdevelopers heb ik het al gehad over navigatie, banners en scrollen. Ik zal nu meer ingaan op wat technische verschillen. Vaak gebruiken grafisch ontwerpers en webdesigners dezelfde tools (Photoshop, Illustrator) maar met compleet andere instellingen. Door deze instellingen aan te passen is een ontwerp veel beter in een website om te zetten.
Centimeters vs. pixels
Grafisch ontwerpers werken meestal met InDesign en Illustrator, PDF’s, vectoren, centimeters en punten. Veel van deze begrippen zijn niet 1 op 1 in een website te vertalen. Websites werken met pixels dus alle instellingen moeten op pixels gebaseerd zijn.
CMYK vs. RGB
Beeldschermen werken met RGB-kleuren terwijl een drukkerij met CMYK kleuren werkt. Het ontwerp van een website moet in RGB gemaakt zijn met kleurprofiel sRGB zodat de kleuren uit het ontwerp ook daadwerkelijk overeenkomen met hetgeen op internet te zien is. Test een ontwerp ook op verschillende beeldschermen. Een perfect gekalibreerd beeldscherm is maar voor weinigen weggelegd.
Fonts en anti-alias
De wat grotere stukken (brood)tekst in een website (dus niet de menu-items of header/bovenbalk) worden als html-tekst in de website gezet. Om een pc-getrouwe weergave te krijgen, moet je de teksten op ‘anti-alias: none’ zetten. Een Mac-zal automatisch anti-alias toepassen op het moment dat hij de uiteindelijke website opent, maar een pc niet.
Voor deze stukken (brood)tekst geldt ook dat het maar in bepaalde lettertypes kan. De standaard lettertypes die je kan gebruiken zijn:
- Arial
- Courier New
- Comic Sans MS (we ontraden dit lettertype sterk)
- Georgia
- Tahoma
- Times New Roman
- Verdana
Voor headers, menu-items en koppen zijn wel andere lettertypes mogelijk, omdat deze eventueel op een andere manier als niet-html-tekst verwerkt kunnen worden door ons.
Als er in het ontwerp een lettertype gebruikt wordt dat niet in bovenstaand lijstje voorkomt, moet dit los bij het ontwerp aangeleverd worden. Liefst zouden we het font in OpenType (.ODF) verwerkt zien zodat het ontwerp zowel op de Mac als PC te gebruiken is. Eventueel kunnen wij helpen bij het converteren van het lettertype.
Aanleveren
We ontvangen meestal een jpg-bestand en een Photoshop (.psd)-bestand met het ontwerp. Soms nemen we daarna nog contact op om sommige delen los aan te leveren.
Het is absoluut niet nodig om elke pagina los als afbeelding aan te leveren. Wij zetten namelijk het ontwerp om in een template en vervolgens gaan we voor elke pagina het menu, de koppen, de tekst en de afbeeldingen die in de tekst staan toevoegen.
Afbeeldingen die in de tekst moeten komen te staan, moeten los aangeleverd worden. Niet in Microsoft Word plakken, dat is er erg lastig uit te halen!
Illustrator
Als je met Adobe Illustrator werkt en het ontwerp liever als .ai of .pdf aanlevert, moet je een aantal instellingen in Illustrator aanpassen. Omdat Illustrator een vectorprogramma is, werkt het standaard niet met pixels, maar dat is wel essentieel voor het ontwerpen van een website. Bij het aanmaken van een bestand moet je daarom de volgende instellingen aanhouden:
- units: Pixels
- raster effects: Screen (72 ppi)
- preview mode: Pixel
Ook is het handig om als formaat van het bestand het correcte aantal pixels aan te houden (bijv. 990 x 600). Om beter met pixels te kunnen werken in Illustrator raden we aan om in de Preferences in ‘Units & Display Performance’ de volgende instellingen aan te houden:
- general: Pixels
- stroke: Pixels
Overweeg ook om het grid aan te zetten als extra hulpmiddel (pas dan wel de ‘Guides & Grid’ Preferences aan zodat het grid echt pixels weergeeft).Zorg er dus altijd voor dat het ontwerp overeenkomt met echt resolutie en grootte van de uiteindelijke website!
Aangeleverde ontwerp
Het is goed om een aantal elementen die vaak in teksten zitten in het ontwerp terug te laten komen.
Daardoor weet de bouwer hoe die er uiteindelijk uit moeten gaan zien. Zorg dus dat je in je ontwerp in ieder geval een voorbeeld hebt met:
In de (brood)tekst:
- een kop, subkop, subsubkop en subsubsubkop (h1, h2, h3, h4)
- een tabel
- een lijst (opsomming: genummerd en ongenummerd)
- een link (een normale, eentje waar reeds op geklikt is en eentje waar je muis op staat)
- een afbeelding die in de tekst staat
In het menu (zien we ook graag de varianten):
- een gewoon menu-item
- een menu-item terwijl je er met je muis op staat. (hover, kleurveranderingen e.d.)
- een menu-item van de pagina die nu open staat. (active)
We willen ook graag weten wat er gebeurt als de broodtekst langer wordt dan in het ontwerp staat.
Komt er dan een scrollbar in het scherm of rekt de website verticaal uit?
browser screenshot
Om een idee te krijgen van hoe het uiteindelijk in de browser komt te staan, is het duidelijk om een screenshot van de webbrowser te nemen. Open dit screenshot in Photoshop en plak het ontwerp erin. Op internet zijn veel mooie voorbeelden hiervan te vinden, zie bijvoorbeeld www.webdesignerstoolkit.com
Conclusie
Bij Occhio werken we al sinds onze oorsprong met ontwerpers en ontwerpbureau’s samen die uit de ‘drukwereld’ komen. Door deze ervaring hebben we geleerd wat de verschillen en overeenkomsten zijn, waardoor we gemakkelijk een goede samenwerking kunnen aangaan. Ben jij ook een grafisch ontwerper die ‘bouwers’ zoekt voor een goede samenwerking, neem dan contact met mij op.