Bokanmeldelse: Fra Photoshop til HTML
Hvis du er ny for å lage webdesign med Photoshop, lærer du å transformere disse .PSD-filene til semantiske, standardkompatible CSS og HTML-filer, kan være litt skremmende.
Tross alt er det nok av gode tjenester der ute som kan skjære opp og kode filene dine for deg. Men det er de tilfellene når du foretrekker å skille disse designene selv.
Det er hvor Fra Photoshop til HTML: Slik skarer du designene som et proff av Jeffrey Way, redaktør av Nettuts +, kommer inn.
I denne 145-siders bok er hele prosessen med å konvertere en .PSD-fil til en fungerende nettsideutforming dekket i detalj med kodeeksempler.
Et modellsted brukes til å gå lesere gjennom hele prosessen, trinnvis, med et enkelt eksempel. Alt fra grunnleggende koding til å lage design på tvers av nettleser-kompatibel, er dekket.
På daglig basis - hvis du lytter tett - kan skrik bli hørt rundt om i verden fra kodere som forsøker å tvinge et design i posisjon. Det handler ikke bare om å lære språket; memorisering er en enkel oppgave. Skrikinducerende poeng oppstår når du ser på nettstedet ditt i ti forskjellige nettlesere, som alle gjengir nettstedet ditt på forskjellige nivåer av konsistens.
Boken forutsetter at du har en grunnleggende kunnskap om CSS og HTML, samt en design som allerede er opprettet i Photoshop. Designet som brukes i boken er enkelt, men konseptene som brukes til å lage designet, kan enkelt brukes til mer komplekse design.
Boken starter med en seksjon om hvordan man ser på et design før du dykker inn i prosessen med å lage HTML-koden.
Selv om det kan virke naturlig å umiddelbart begynne å jobbe med bildene på nettstedet vårt, kan dette faktisk ikke være lenger fra sannheten. I stedet må vi først bygge vår base, eller markeringen, og bare når den er ferdig, kan vi gå videre til bildene.
Å plukke ut de tre grunnleggende seksjonene de fleste nettsteder inneholder: en topptekst, hovedinnholdsområdet og en bunntekst, dekkes, og deretter hopper boken helt inn i prosessen med å sette opp din grunnleggende HTML-fil. Igjen, alle som har grunnleggende kunnskaper om HTML, har ingen problemer med denne delen.
Når din grunnleggende HTML-kode er fullført, dekker fra Photoshop til HTML hvordan du sparer opp dine .PSD-filer.
Ta deg tid til å se over designet i Photoshop. Prøv å finne ut hvert bilde som trengs. Husk, kanskje funksjoner kan gjenopprettes med CSS; så vær kreativ.
Mens begge metodene for å kutte opp filene dine er nevnt, bruker boken en kombinasjon av beskjæring, og kutt og limer for å ta tak i bildene du trenger, i stedet for å bruke skiveverktøyet.
Begge metodene er helt gyldige. Jeg anbefaler at du prøver begge, og velger hvilken som helst som viser seg å være raskeste ... for deg.
Tastaturgenveier for å øke hastigheten på denne prosessen er dekket i dybden. Lagre disse bildene på nettet, inkludert alle innstillingene du skal bruke, og hvilken bildefiltype som skal brukes for hvilke typer bilder, diskuteres også i stor grad, som CSS sprites. Sist men ikke minst i denne delen er noen notater om justeringer som da må gjøres til HTML-filen basert på bakgrunnsbilder som brukes.
Når HTML og bilder er klare, er det på tide å dykke inn i CSS for nettstedet ditt. Browser resets er stresset og dekket i dybden, samt hvordan å gjenoppbygge en standardisert, standard CSS-fil.
Hver nettleser bruker litt "standard CSS" for å automatisk utforme oppslaget ditt. Ved første øyekast kan du tenke at dette er svært nyttig ... Hvis hver nettleser implementerte dem identisk, ville dette ikke være et problem. Dessverre er dette ikke tilfelle.
Det finnes en rekke CSS-prinsipper, inkludert relativ vs absolutt posisjonering og CSS-former, dekket på en praktisk og brukbar måte. For de som ikke er eksperter på CSS, vil disse seksjonene være spesielt informativ, mens de som kanskje vil hoppe over disse delene. En annen stor del av CSS-koden som er dekket, er hvordan du lager klistrefeste, noe som kan være frustrerende for nye CSS-designere.
Kodingen av flere sider utover vår hjemmeside er dekket, inkludert hvordan du gjør små justeringer av oppsettet og innholdet, og hva du må legge til i CSS-filene dine. Når du er ferdig med denne delen, har du alle sidemalerne som er nødvendige for en fullt funksjonell porteføljeside.
Det endelige vanlige kapittelet i boken dekker hvordan du gjør designen kompatibel med nettleseren, spesielt når det gjelder eldre nettlesere som Internet Explorer 6 og 7. En av de største problemene som er dekket i lengden, er mangelen på transparenshåndtering i bilder i IE6 , med en rekke løsninger for å overvinne den.
Hvis du ser på nettstedet ditt i Internet Explorer 7 og under for første gang, får du deg til å ringe. Du kan bli heldig, men mesteparten av tiden finner du mange problemer som må løses.
Et bonuskapittel på slutten viser deg hvordan du oppretter jQuery overgangseffekter, som er innarbeidet i webdesign. For alle som er ny på JavaScript og jQuery, er det et interessant prosjekt som lærer noen grunnleggende teknikker.
Samlet sett, hvis du har outsourcert konverteringen av .PSD-filer til HTML, eller hvis du har lyst til å prøve å designe nettsteder i Photoshop, er denne boken definitivt verdt å lese.
Med komplette, trinnvise instruksjoner som enkelt kan brukes på mange prosjekter og tonnevis av eksempelkoder, Fra Photoshop til HTML er sikker på å komme i gang med å konvertere dine egne design. Med litt øvelse kunne begrepet dekket brukes på praktisk talt ethvert design!
Boken kommer også med kildefilene for siden opprettet, som du kan bruke i dine egne prosjekter, men du vil.
Skrevet utelukkende for WDD av Cameron Chapman .
Hva synes du om denne boken? Gi oss beskjed i kommentarfeltet ...