Ik ben aan het stoeien om een PSD om te zetten naar bootstrap. Gaat best moeizaam met mijn beperkte basing skills, maar het gaat. Constant meten in PS, aanpassen in html/css. Een megaklus. Nu heb ik een trucje ontdekt. Als body background gebruik ik het designs, zodat ik daar weer overheen de website kan opbouwen. Door backgrounds in mijn werk een opacity mee te geven, kan ik het design er nog doorheen zien. Werkt geweldig, maar soms ook verwarrend. Want nu helemaal makkelijk zou zijn, is als er een tool zou bestaan waarbij ik geen opacity meer hoef mee te geven. Ik zou het design eigenlijk over mijn werk heen moeten kunnen projecteren, waarbij ik de transparantie met een druk op de knop kan aanpassen.
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?
Werkt echt erg handig.
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.
?
Onbekende gebruiker
21-05-2015 20:40
gewijzigd op 21-05-2015 20:41
Meten in PS?
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.
Omzetten naar een gerasterd formaat? Waarom zou ik dat willen?
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.
?
Onbekende gebruiker
22-05-2015 09:19
gewijzigd op 22-05-2015 12:42
Je wilt het doorgaans rasteriseren omdat je dat met de geëxporteerde items toch moet doen wil het weergegeven kunnen worden in een standaard-browser, die snappen het PSD-formaat niet, of Gimp of wat dan ook. Uiteraard moet je nooit je master PSD rasteriseren, dan raak je data kwijt.
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"
