Basing hulp, bestaat dit?
Mij wepdeveloper tool moet nog wel blijven werken. Als ik het design als een shadowbox over mijn werk projecteer, werkt mij "display style information" niet meer goed.
Ik kan me niet voorstellen dat ik de eerste ben die dit bedacht heeft. Helaas kan ik echter geen tool vinden die dit voor mij oplost. De vraag is nu, heeft iemand zoiets moois ooit ergens gezien?
Maar nu nog een manier om het design eenvoudiger over je creatie heen te projecteren. Hoe verder je geraakt, hoe lastiger het wordt om te onderscheiden wat design is, en wat creatie. En om het helemaal af te maken, zou je het design verticaal moeten kunnen schuiven over je creatie. Erg handig als je eerst de header en footer zou willen doen.
Wat ik weet van stijlmensen die ik eerder heb ontmoet is dat een PSD eerst omgezet wordt naar een gerasterd formaat. Door de lagen in PS aan en uit te zetten worden de verschillende exportbestanden (jpg,gif,png etc.) aangemaakt voor de verschillende items van de layout. Waar die precies komen te staan staat van te voren niet vast, omdat resoluties van apparaten en browservensters onderling per definitie verschillen. Want als de resolutie van te voren vast zou staan hoef je de layout (meestal) niet in verschillende lagen te verdelen met HTML en CSS, dan kan je volstaan met een ongelaagde setting.
Als je toch nog wilt (of moet) meten dan zou het kunnen helpen om de verschillende items te inspecteren met de debugging tools van je browser, je kunt dan de plaats waar ze staan meteen aanpassen. Het scheelt de nodige pageloads en wachttijd. Gebruik een UHD-scherm of een dual-monitor indeling zodat je zowel PS als de browser tegelijk kunt zien. Scheelt weer wisselen tussen vensters.
Ik moet toegeven dat ik het PSD naar html omzetten zelf heb aangeleerd, dus wellicht is mijn werkwijze fout. Een PSD is 1:1, dus er hoeft niets geschaald te worden. De PSD moet 1:1, pixel op pixel omgezet worden naar html. Door lagen te selecteren kun je de afbeeldingen uit de PSD filteren en appart opslaan. Maar op een zeker moment moet er toch html/css geschreven worden om de afbeeldingen en teksten op zijn plaatst te krijgen. En dat is waar mijn oplossing om de hoek komt kijken.
Maar als het omzetten naar HTML/CSS erg veel tijd kost of vaker terugkomt, dan is dat proces een goede om te automatiseren. Wat dan mogelijk een optie zou kunnen zijn is om elke laag met transparantie te exporteren naar bijvoorbeeld het PNG-formaat. (lossless, ondersteunt alpha). Je kunt dan die bestanden met een stukje PHP automatisch bijsnijden, en de coordinaten van het bijsnijden gebruiken om meteen de bijbehorende HTML en CSS te genereren. Dan zou je het ook nog volledig kunnen automatiseren als je bv. die geëxporteerde lagen een volgnummer geeft in de bestandsnaam, zodat je eenvoudig de CSS z-index kan bepalen.
Voor automatisch bijsnijden hoef je niet eens ingewikkelde code te schrijven. Je kunt vanaf boven, links, rechts en onder alle beeldpuntjes op een lijn aflopen om te bepalen of er voldoende irrelevante informatie in zit zodat die kan worden gedumpt.
Om je vraag te beantwoorden; nee ik heb zo'n tool nog niet gezien, maar ik kan me niet voorstellen dat je die tool niet zelf in een uurtje kunt schrijven.
Enig manco aan deze opzet zou kunnen zijn dat je tekstlagen niet wilt rasteriseren vanwege meertaligheid. Maar voor die lagen zou je een uitzondering kunnen inbouwen. Hangt er vanaf hoeveel tekst er in je ontwerp zit.
Oh kijk, er zijn al meerdere tooltjes beschikbaar op het www, oa. http://www.psdtoweb.de
Maar let wel: "layer effects and adjustment layers need to be rasterized"