Al te vaak gebeurt het dat er frustraties ontstaan wanneer een slicer, een developer of een andere webdesigner een werkbestand ontvangt waar geen orde of logica in zit. Bij Inventis trachten we een standaard te ontwikkelen voor de webdesigners om zo op een vlotte manier samen te kunnen werken aan een design. Middels deze korte post wil ik (aspirant-)webdesigners proberen duidelijk te maken hoe je een propere .psd aanlevert aan je collega's zonder al te veel frustraties te veroorzaken.

Benoem je layers

Photoshop benoemt elke layer en groep automatisch met een nummer. Op zich is dat, als je maar een aantal layers of groepen nodig hebt, geen probleem maar het zorgt uiteindelijk toch voor verwarring wanneer het aantal groeit. Geef daarom elke layer en groep een passende naam zodat je collega's niet tussen de bomen op zoeken moeten naar het bos.

De structuur

Deel je .psd op in een mappenstructuur gelijkend op de indeling van de te designen pagina. Je maakt het jezelf en jouw collega's eens zo gemakkelijk om bepaalde elementen terug te vinden.

Werk met "smart objects"

Layers van wederkerende elementen in een design (bijvoorbeeld een opsomming van nieuwsartikels) worden vaak gecopy-paste waardoor je overtollige layers creëert in je .psd. Het is namelijk dikwijls niet omwille van de grootte van je werkbestand dat het bestand langzaam laadt/opent maar door het hoge aantal layers dat photoshop moet openen, althans dat is mijn indruk. Design daarom het eerste nieuwsitem (om bij het aangehaalde voorbeeld te blijven), selecteer al deze layers en kies via de rechtermuisknop de functie "convert to Smart Object". Dit Smart Object kan je dan copy-pasten om zo je opsomming te bekomen. Dubbelklik op het Smart Object icoontje om je oorsponkelijke layers opnieuw te openen en te bewerken. Sla je deze Smart Object nu opnieuw op dan zal je zien dat al de copy's van deze Smart Object gewijzigd worden. Smart Objects zijn dus voor de webdesigner een goede oplossing om heel wat tijd te winnen.

Library

Voor de gemiddelde en grotere projecten gebruiken wij nog 1 extra layer, namelijk de library. In deze library worden de knoppen, links, tekstelementen, standaard bannerformaten, ..., opgeslagen zodat we op een vlotte manier alles opnieuw kunnen ophalen tijdens het designproces van subpagina's. Ook de hover -en active states van knoppen, links, ..., worden hier duidelijk in verwerkt voor de slicers. Op deze manier beschikken zij dus over een uitgebreide styleguide.

Besluit

Het lijken de meest logische puntjes die hier opgesomd worden, maar veel te vaak worden ze toch door korte deadlines genegeerd. Door van bovenstaande items een simpele routine te maken in je design-proces maak je het jezelf gemakkelijk en zal het echt niet veel meer tijd kosten dan op de wanordelijke manier te werken. Je collega's zullen je in ieder geval dankbaar zijn. Uiteraard zullen er altijd projecten zijn waardoor je wat van je werkmethode moet afwijken maar ook dit kan dan in de toekomst opnieuw gebruikt worden als leidraad om het proces te vereenvoudigen.

Heb jij nog bepaalde tips om een .psd gebruiksvriendelijker te maken? Laat ze alvast hieronder achter.