Bokrecension: Från Photoshop till HTML
Om du är ny för att skapa webbdesign med Photoshop, lär du dig att konvertera dessa .PSD-filer till semantiska, standardkompatibla CSS och HTML-filer kan vara lite skrämmande.
Det finns trots allt massor av bra tjänster där ute som kan skära upp och koda dina filer för dig. Men det finns fall där du kanske föredrar att skära ut dessa mönster själv.
Det är där Från Photoshop till HTML: Så här slicerar du dina designer som ett proffs av Jeffrey Way, redaktör för Nettuts +, kommer in.
I denna 145-sidiga bok beskrivs hela processen för att konvertera en .PSD-fil till en fungerande webbdesign med detaljerade exempel.
En modellplats används för att gå igenom läsarna genom hela processen, steg för steg, med ett enda exempel. Allt från grundläggande kodning till att göra dina mönster kompatibla med webbläsare är täckt.
På daglig basis - om du lyssnar noga - kan skriker hörs runt om i världen från kodare som försöker tvinga en design till position. Det handlar inte bara om att lära sig språket; memorering är en lätt uppgift. Skrikinducerande punkter uppstår när du tittar på din webbplats i tio olika webbläsare, som alla gör din webbplats till olika nivåer av konsistens.
Boken förutsätter att du har en grundläggande kunskap om CSS och HTML, samt en design som redan skapats i Photoshop. Den design som används i boken är enkel, men de begrepp som används för att skapa designen kan enkelt appliceras på mer komplexa mönster.
Boken börjar med en del om hur man tittar på en design innan du dyker in i processen med att skapa HTML-koden.
Medan det kan tyckas naturligt att omedelbart börja arbeta med bilderna på vår hemsida, kunde det faktiskt inte vara längre från sanningen. Istället måste vi först bygga vår bas, eller markeringen, och bara när den är klar kan vi gå vidare till bilderna.
Att välja ut de tre grundläggande sektionerna som de flesta webbplatser innehåller: en rubrik, huvudinnehållsområdet och en sidfot, täcks, och då hoppar boken direkt i processen med att ställa in din grundläggande HTML-fil. Återigen har alla med grundläggande kunskaper om HTML inga problem med den här delen.
När din grundläggande HTML-kod är klar, täcker du från Photoshop till HTML hur du segmenterar dina .PSD-filer.
Ta en stund att titta på designen i Photoshop. Försök att hitta varje bild som behövs. Kom ihåg att funktioner kan återskapas med CSS; så var kreativ.
Medan båda metoderna för att skära upp dina filer nämns, använder boken en kombination av beskärning och skär och klistrar för att ta tag i de bilder du behöver, istället för att använda skivverktyget.
Båda metoderna är helt giltiga. Jag rekommenderar att du försöker båda, och välj vilken som någonsin visar sig vara snabbast ... för dig.
Tangentbordsgenvägar för att påskynda denna process är täckta djupgående. Att spara dessa bilder på webben, inklusive alla inställningar du ska använda och vilken bildfilstyp som ska användas för vilka typer av bilder, diskuteras också i stor utsträckning, liksom CSS sprites. Sist men inte minst i det här avsnittet är några noteringar om justeringar som sedan måste göras till HTML-filen baserat på bakgrundsbilderna som används.
När din HTML och bilder är klara är det dags att dyka in i CSS för din webbplats. Browser återställningar är stressade och täckta djupt, liksom hur man bygger om en standardiserad, standard CSS-fil.
Varje webbläsare använder lite "standard CSS" för att automatiskt ställa in din markering. Vid första anblicken kan du tro att det här är mycket användbart ... Om varje webbläsare implementerade dem identiskt skulle det inte vara ett problem. Tyvärr är det inte så.
Det finns ett antal CSS-principer, inklusive relativ kontra absolut positionering och CSS-former, täckt på ett praktiskt och användbart sätt. För dem som inte är experter på CSS, kommer dessa avsnitt att vara särskilt informativa, medan de som kanske vill hoppa över dessa delar. En annan stor bit av CSS-kod som omfattas är hur man skapar klibbiga sidfot, något som kan vara frustrerande för nya CSS-designers.
Kodningen av ytterligare sidor bortom vår hemsida omfattas, inklusive hur man gör små anpassningar av layout och innehåll och vad du behöver lägga till i dina CSS-filer. När du är klar med det här avsnittet har du alla sidmallar som behövs för en fullständigt fungerande portföljwebbplats.
Det slutliga regelbundna kapitlet i boken täcker hur du gör din design kompatibel med webbläsaren, särskilt när det gäller äldre webbläsare som Internet Explorer 6 och 7. En av de största problemen som är täckta över längden är bristen på transparenshantering i bilder i IE6 , med en mängd olika lösningar för att övervinna det.
Att se din webbplats i Internet Explorer 7 och under för första gången kommer att göra dig kakad. Du kan få tur, men för det mesta hittar du många problem som måste åtgärdas.
Ett bonuskapitel i slutet visar hur du skapar jQuery-övergångseffekter som ingår i webbplatsdesignen. För alla som är ny på JavaScript och jQuery är det ett intressant projekt som lär ut några grundläggande tekniker.
Sammantaget, om du har outsourcat konverteringen av dina .PSD-filer till HTML, eller om du vill prova att designa webbplatser i Photoshop, är den här boken definitivt värt att läsa.
Med kompletta, steg-för-steg-instruktioner som enkelt kan tillämpas på många projekt och massor av exempelkod, Från Photoshop till HTML är säker på att du kommer igång med att konvertera dina egna mönster. Med lite övning kunde de begrepp som omfattas omfattas av praktiskt taget vilken design som helst!
Boken kommer också med källfilerna för den skapade sidan, som du kan använda i dina egna projekt men du vill.
Skriven uteslutande för WDD av Cameron Chapman .
Vad tycker du om den här boken? Vänligen meddela oss i kommentarfältet ...