Boekrecensie: van Photoshop tot HTML
Als u nog niet zo lang geleden bent begonnen met het maken van websitedesigns met Photoshop, kan het een beetje intimiderend worden om die .PSD-bestanden te transformeren naar semantische CSS-bestanden en HTML-bestanden die aan de standaarden voldoen.
Er zijn tenslotte tal van geweldige diensten beschikbaar die uw bestanden kunnen opsplitsen en coderen. Maar er zijn die gevallen waarin u deze ontwerpen liever zelf wilt snijden.
Dat is waar Van Photoshop tot HTML: hoe je je ontwerpen als een professional kunt segmenteren door Jeffrey Way, redacteur van Nettuts +, komt binnen.
In dit 145-pagina's tellende boek is het volledige proces van het converteren van een .PSD-bestand naar een werkend websiteontwerp in detail behandeld met codevoorbeelden.
Een modelsite wordt gebruikt om lezers stapsgewijs door het hele proces te leiden, met een enkel voorbeeld. Alles, van de basiscodering tot het compatibel maken van uw ontwerpen, is gedekt.
Op dagelijkse basis - als je goed luistert - zijn overal ter wereld screams te horen van codeurs die tevergeefs proberen een ontwerp in positie te dwingen. Het is niet alleen een kwestie van de taal leren; memoriseren is een gemakkelijke taak. De scream-inducerende punten treden op wanneer u uw site in tien verschillende browsers bekijkt, die uw site op verschillende niveaus van consistentie weergeven.
Het boek gaat ervan uit dat je een basiskennis hebt van CSS en HTML, evenals een ontwerp dat al in Photoshop is gemaakt. Het ontwerp dat in het boek wordt gebruikt, is eenvoudig, maar de concepten die worden gebruikt om het ontwerp te maken, kunnen eenvoudig worden toegepast op complexere ontwerpen.
Het boek begint met een gedeelte over hoe je naar een ontwerp moet kijken voordat je in het proces van het maken van de HTML-code duikt.
Hoewel het natuurlijk lijkt om meteen aan de beelden van onze website te gaan werken, zou dit eigenlijk niet verder van de waarheid kunnen zijn. In plaats daarvan moeten we eerst onze basis, of de mark-up, bouwen en pas als deze is voltooid, kunnen we doorgaan naar de beelden.
Kies uit de drie basisgedeelten die de meeste websites bevatten: een koptekst, het hoofdgedeelte van de inhoud en een voettekst, worden behandeld en vervolgens springt het boek meteen in het proces van het instellen van uw eenvoudige HTML-bestand. Nogmaals, iedereen met een basiskennis van HTML zal geen problemen hebben met dit onderdeel.
Zodra uw eenvoudige HTML-code is voltooid, behandelt From Photoshop to HTML hoe u uw .PSD-bestanden kunt opdelen.
Neem even de tijd om over het ontwerp in Photoshop te kijken. Probeer elke afbeelding die nodig is te lokaliseren. Vergeet niet dat functies kunnen worden nagebootst met CSS; dus wees creatief.
Hoewel beide methoden voor het opsplitsen van uw bestanden worden genoemd, gebruikt het boek een combinatie van bijsnijden en knippen en plakken om de afbeeldingen te pakken die u nodig hebt, in plaats van de slice-tool te gebruiken.
Beide methoden zijn perfect geldig. Ik raad u aan om beide te proberen en te kiezen welke ooit het snelst is ... voor u.
Toetsenbordsneltoetsen om dit proces te versnellen, worden uitvoerig besproken. Het opslaan van deze afbeeldingen voor het web, inclusief alle instellingen die u zou moeten gebruiken en welk beeldbestandstype moet worden gebruikt voor welke soorten afbeeldingen, wordt ook uitvoerig besproken, evenals CSS-sprites. Last but not least, zijn in dit gedeelte enkele opmerkingen over aanpassingen die dan moeten worden aangebracht in het HTML-bestand op basis van de achtergrondafbeeldingen die worden gebruikt.
Zodra uw HTML en afbeeldingen klaar zijn, is het tijd om een duik te nemen in de CSS voor uw site. Browserresets worden benadrukt en uitgebreid behandeld, evenals hoe een gestandaardiseerd, standaard CSS-bestand opnieuw opgebouwd kan worden.
Elke browser gebruikt een beetje "standaard-CSS" om uw markeringen automatisch op te maken. Op het eerste gezicht zou je kunnen denken dat dit uiterst nuttig is ... Als elke browser ze identiek zou implementeren, zou dit geen probleem zijn. Helaas is dit niet het geval.
Er zijn een aantal CSS-principes, inclusief relatieve vs. absolute positionering en CSS-vormen, die op een praktische en bruikbare manier worden behandeld. Voor degenen die geen experts zijn op het gebied van CSS, zullen deze delen bijzonder informatief zijn, terwijl degenen die dit willen deze delen misschien willen overslaan. Een ander leuk stukje CSS-code is hoe je kleverige voetteksten kunt maken, iets dat frustrerend kan zijn voor nieuwe CSS-ontwerpers.
De codering van extra pagina's buiten onze startpagina wordt behandeld, inclusief hoe u kleine aanpassingen in de lay-out en inhoud aanbrengt, en wat u moet toevoegen aan uw CSS-bestanden. Tegen de tijd dat u klaar bent met deze sectie, heeft u alle paginasjablonen nodig voor een volledig functionele portfoliowebsite.
Het laatste gewone hoofdstuk in het boek behandelt hoe je je ontwerp compatibel kunt maken met andere browsers, met name als het gaat om oudere browsers zoals Internet Explorer 6 en 7. Een van de grootste problemen die uitvoerig aan bod komt, is het gebrek aan transparantie in afbeeldingen in IE6 , met een verscheidenheid aan oplossingen om het te overwinnen.
Als u uw website voor het eerst in Internet Explorer 7 en lager bekijkt, loopt u ineen. Misschien heb je geluk, maar meestal zul je veel problemen tegenkomen die moeten worden opgelost.
Een bonushoofdstuk aan het einde laat zien hoe je overgangseffecten van jQuery maakt, die zijn opgenomen in het ontwerp van de site. Voor iedereen die nieuw is in JavaScript en jQuery, is het een interessant project dat enkele basistechnieken leert.
Over het algemeen is dit boek zeker de moeite van het lezen waard als u de conversie van uw .PSD-bestanden naar HTML hebt uitbesteed of als u wilt proberen om websites te ontwerpen in Photoshop.
Met complete, stapsgewijze instructies die eenvoudig kunnen worden toegepast op vele projecten en tonnen voorbeeldcode, Van Photoshop tot HTML Zorg ervoor dat je aan de slag gaat met het converteren van je eigen ontwerpen. Met een beetje oefening kunnen de behandelde concepten op vrijwel elk ontwerp worden gebruikt!
Het boek wordt ook geleverd met de bronbestanden voor de gemaakte site, die u kunt gebruiken in uw eigen projecten, hoe u maar wilt.
Voorbeeld hoofdstuk downloaden
Exclusief geschreven voor WDD door Cameron Chapman .
Wat vind je van dit boek? Laat het ons weten in het opmerkingenveld ...