Jeg antar at en mer passende tittel kan være 'er Photoshop fortsatt et passende verktøy for å designe typografi på nettet?' Men det mangler den dramatiske appellen til ovenstående.
Som mange av dere har jeg alltid brukt Photoshop til å lage mock-up komposisjoner av mine design. For så lenge jeg kan huske, har det vært bransjestandard og programvare som er valgt for de fleste designere jeg har jobbet med. Jeg har tilbrakt uker med å designe piksler, perfekt layout, gruppering av elementer i hierarkiske mapper og merking av alle lagene mine for å gjøre overgangen fra vakker mock up til kode så jevn som mulig.
Jeg vil være full av entusiasme, energi og spenning som forklarer designene mine til en utvikler. Byttlag setter på og av for å prøve og illustrere visjonen min gjennom Photoshop, men vil alltid være litt skuffet da min skinnende, polerte design ble forvandlet til det jeg ville se i nettleseren. Visst, det ville se ut som designet mitt ... Og jeg anerkjente typene, men det manglet den skarpheten jeg husket fra mine komposisjoner. Det var ikke at utviklerne ikke hadde kodet det bra, mer at typografien jeg hadde laget i Photoshop, ikke hadde oversatt til kode.
Når du velger fonter det er få ting viktigere enn om en skrift er lett leselig eller ikke. I Photoshop er det ikke så mye av et problem fordi alt ser bra ut. Det spiller ingen rolle hvilken font du bruker, i hvilken størrelse eller vekt (innenfor grunn) som det vil gjengis perfekt på skjermen.
Dessverre strekker dette ikke ut til nettleseren. Ofte når jeg ser på designet mitt i nettleseren, var forholdet mellom element og type feil. Skriftstørrelsene og linjehøydeene som jeg hadde tilskrevet stiler i min Photoshop-sammensetning, ville ikke se ut som de ville i nettleseren. Hvis jeg hadde utpekt en 20 pikselmargin over tittelen i designene mine, kan den avstanden ha endret seg ettersom linjens høyde på toppteksten ville påvirke størrelsen på marginen, noe som ikke ville skje i Photoshop. Jeg må da starte den lange og kjedelige prosessen med de fryktede "design tweaks".
Stol på meg, det er ikke bare utvikleren som knuser ved ideen om en designer som sitter ved siden av dem og ber dem om å øke kroppens kopilinjehøyde med to piksler, og da ha utvikleren CSS-endringen og forplikte seg. Tast inn. 'Egentlig, 1 piksel mindre' ... Skriv inn. Kanskje det var bedre hvordan det var. Denne typen justering av CSS-biten for å se resultatene i sanntid via nettleseren, er tidkrevende og ikke bidrar til kreativitet. Utviklerne blir raskt lei av å tilbringe dagen og gjentatte ganger endrer det de ser som de minste detaljene som ikke vil gjøre noe, og designere kan ikke eksperimentere ved å raskt og enkelt endre skrifter og stiler for de som skal gjengi seg bedre i nettleseren.
For designere som har forståelse for CSS, kan du bruke verktøy som Firebug å effektivt lage dine egne design tweaks i nettleseren, og notere ned alle CSS endringene i ett dokument som du deretter kan sende videre til en utvikler å implementere. Dette er faktisk det samme som å sitte med en utvikler og gjøre CSS endringer, men langt mindre kjedelig for utvikleren, og vil også tillate designeren å eksperimentere ytterligere med størrelser og stiler før du tar en beslutning. Selv om dette er et godt verktøy for inspeksjon og endring av deler av HTML og CSS, mister du eventuelle endringer du gjør når nettleseren er oppdatert. Det kan være veldig irriterende hvis du har endret mange elementer og ikke merket ned alle dine justeringer.
Du kan bruke Firediff plug-in for å lagre en oversikt over alle endringene du gjør i Firebug, noe som er bra da det sparer deg for å legge merke til hver endring i et eget regneark for senere. Det største problemet med denne metoden er når du begynner å introdusere webfonter i ligningen, da noen valgte skrifttyper må være installert i typen ditt, eller de vil ikke vises i nettleseren. Dette gjør ting langt vanskeligere og mindre gratis å eksperimentere enkelt med forskjellige skrifter som du ikke bare kan prøve prøvefonter.
Tjenester som typecast gjør det mye enklere for designere å jobbe med webfonter, og jeg gjør ganske mye all min typografi for nettet med det. Det lar deg lage typografiske mock ups (akkurat som du ville i Photoshop) ved hjelp av det visuelle grensesnittet for å tilordne fonter, stiler, vekter, farger, linjehøyde, margin, polstring og mer til din typografi. Det beste ved å bruke Typecast er at det hele fungerer innenfor nettleseren, slik at du tar avgjørelser på typen akkurat som det blir gjengitt for brukeren. Ser en bestemt skrift ikke for varmt på 19 piksler? Bump det opp til 20 med et klikk på en knapp, tilbake ned til 19 før du endelig bosetter deg med 18 piksler i størrelse, alt gjort i sekunder i stedet for timer som sitter med en utvikler.
Du kan bruke alle webfonter fra deres samlinger på 23 000 fonter, inkludert Google-fonter, Typekit og mer i komposisjonene dine, noe som gjør eksperimentering raskt og enkelt (de har nylig blitt kjøpt av Monotype som eier Fonts.com og Myfonts, så forvent mange flere fonter på vei snart). Typecast etter min mening introduserer en forestilling om lekhet tilbake til typografi som det oppfordrer deg til å prøve skriftvariasjoner, som du kanskje aldri har oppdaget om de ikke var så lett tilgjengelige og lett utskiftbare som de er.
En annen veldig nyttig funksjon av typecast er muligheten til å vise og redigere CSS av typen din. Du kan legge til bakgrunnsfarger og bilder, svinge stater, eller til og med overganger ved ganske enkelt å redigere CSS-panelet. Når du er fornøyd med etableringen, kan du enkelt eksportere og lagre CSS-koden, som deretter kan lastes opp til nettstedet ditt eller sendes til en utvikler, og fordi alt er utformet i nettleseren, vises det akkurat som du har tenkt det.
Photoshop er ikke industristandarden for ingenting, og det vil være noen av dere der ute hyperventilering ved tanken på å slippe den til å designe i nettleseren, når alt kommer til alt er vi kreative og ikke kodere. Vel, legg ned papirposen som det fortsatt er en måte du kan lage vakker typografi ved hjelp av webfonter i Photoshop. Extensis har opprettet en plugin-modul som kan installeres i Photoshop-versjoner CS5 og høyere som gir deg tilgang til alle WebINK- og Google-webfonter for å bruke gratis, direkte i Photoshop.
Dette betyr at du kan bruke noen av WebINK- eller Googles nettfonter i designkomposisjonene dine, som du ville ha skrifttyper som er installert på systemet ditt, og de vil vise omtrent det samme som det skal se i nettleseren. Plugin-modulen gir deg bare tilgang til WebINK- og Google-webfonter for øyeblikket, men på plussiden oppdaterer den automatisk nye skrifter som de legges til i WebINK og Googles bibliotek av skrifter.
En annen verdifull plug-in som hjelper til med å lette overgangen mellom Photoshop-komposisjoner og nettleser-kompatibel CSS, er den gratis, skybaserte plugin-modulen fra css3ps.com . En av hovedgrunnene til at mange designere jobber med Photoshop, er kontrollen du har over lag og formelementer. Å kunne enkelt og raskt eksperimentere med skygge, glød, farge, tekstur, avrundede hjørner og mer er nesten andre natur for de fleste, og noe som til og med opplevde designere sliter med å replikere nøyaktig i nettleseren. For dem er denne plugin-modulen perfekt fordi den lar deg lage komposisjonene dine på den måten du vet best, men la oss så enkelt konvertere formens stiler til nettleser-kompatibel CSS3. Denne metoden er ideell for å designe knapper, navigering eller noe annet som du kanskje har stylet en form for.
Kanskje det fortsatt er en rolle for Photoshop som et verktøy for utforming av weboppsett, men så langt som å designe typografi for nettet, har applikasjoner som Firebug og Typecast overhalet det. Tiden det tar å oppdatere statiske komposisjoner, kan ikke sammenlignes med hastigheten og lettheten som du kan gjøre endringer i nettleseren. For de av dere som bare ikke en gang kan underholde ideen om å designe i nettleseren, bør pluginene ovenfor i det minste gi Photoshop det løftet det trenger for å holde seg relevant og bidra til å lette overgangen.
Bruker du Photoshop til å designe nettsider? Er Photoshop veien for Flash? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, bruk dødt bilde via Shutterstock.