Jeg tror en mere passende titel kan være 'er Photoshop stadig et passende redskab til at designe typografi på nettet?' Men det mangler den dramatiske appel af ovenstående.
Ligesom mange af jer har jeg altid brugt Photoshop til at skabe mock-up kompositioner af mine designs. Så længe jeg kan huske, har det været industristandarden og den valgte software til de fleste designere, jeg har arbejdet med. Jeg har brugt uger til at designe pixel perfekte layouter, gruppere elementer i hierarkiske mapper og mærke alle mine lag for at gøre overgangen fra smukke mock up til kode så glat som muligt.
Jeg vil være fuld af begejstring, energi og spænding, der forklarer mine designs til en udvikler. Skifte lag staterne tænder og slukker for at prøve og illustrere min vision gennem Photoshop, men vil altid være lidt skuffet, da mit skinnende polerede design blev transformeret til det, jeg ville se i browseren. Sikker på, det ville ligne mit design ... Og jeg anerkendte typografierne, men det manglede den skarphed, som jeg huskede fra mine kompositioner. Det var ikke, at udviklerne ikke havde kodet det godt, mere at den typografi jeg havde oprettet i Photoshop ikke havde oversat til kode.
Når du vælger skrifttyper der er få ting vigtigere end om en skrifttype er let læselige eller ej. I Photoshop er det ikke så meget af et problem, fordi alt ser godt ud. Det er ligegyldigt, hvilken skrifttype du bruger, ved hvilken størrelse eller vægt (inden for grund), som den vil gøre perfekt på skærmen.
Desværre går dette ikke til browseren. Ofte når jeg ser mit design i browseren, var forholdet mellem elementer og type forkert. Skrifttypestørrelserne og linjehøjderne, som jeg havde tilskrevet stilarter i min Photoshop-sammensætning, ville ikke se ud som de ville i browseren. Hvis jeg havde angivet en 20 pixel margen over titlen i mine mønstre, kan denne afstand være ændret, da linjens højde på hoveden ville have en virkning på størrelsen af margenen, noget der ikke ville ske i Photoshop. Jeg ville så nødt til at starte den lange og kedelige proces af de frygtede 'design tweaks'.
Stol på mig, det er ikke bare udvikleren, der krummer ved ideen om en designer, der sidder ved siden af dem, og beder dem om at "øge kroppens kopieringslinjehøjde med to pixels", så har udvikleren gjort CSS'en forandring og forpligter .... Gå ind. 'Faktisk 1 pixel mindre' ... Indtast. 'Måske var det bedre, hvordan det var'. Denne form for tweaking af CSS bit for bit for at se resultaterne i realtid via browseren er tidskrævende og ikke befordrende for kreativitet. Udviklerne bliver hurtigt spændte med at bruge dagen gentagne gange at ændre det, de ser som den mindste af detaljer, der ikke er nogen forskel, og designere kan ikke eksperimentere ved hurtigt og nemt at ændre skrifttyper og stilarter til dem, der vil gøre det bedre i browseren.
For designere, der har forståelse for CSS, kan du bruge værktøjer som Firebug at effektivt lave dine egne design tweaks i browseren og notere alle CSS ændringer i et dokument, som du derefter kan viderebringe til en udvikler at implementere. Dette er faktisk det samme som at sidde med en udvikler og gøre CSS ændringer, men langt mindre kedelig for udvikleren og vil også give designeren mulighed for at eksperimentere yderligere med størrelser og stilarter, inden der træffes en beslutning. Selv om dette er et godt værktøj til at inspicere og ændre dele af HTML og CSS, vil du miste alle ændringer, du foretager, så snart browseren er opdateret, hvilket kan være meget irriterende, hvis du har ændret mange elementer og ikke noteret alle dine justeringer.
Du kan bruge Firediff plug-in at gemme en oversigt over alle de ændringer, du laver inden for Firebug, hvilket er fantastisk, da det sparer dig at skulle notere alle ændringer i et separat regneark til senere. Det største problem med denne metode er, når du begynder at introducere webfonte i ligningen, da alle valgte skrifttyper skal installeres til dit type kit, eller de vises ikke i browseren. Dette gør tingene meget vanskeligere og mindre gratis til at eksperimentere let med forskellige skrifttyper, da du ikke kun kan hurtigt prøve skrifttyper.
Tjenester som typecast gør det meget nemmere for designere at arbejde med web skrifttyper, og jeg gør stort set alle mine typografier til internettet ved hjælp af det. Det giver dig mulighed for at oprette typografiske mock ups (ligesom du ville i Photoshop) ved hjælp af sin visuelle grænseflade til at tildele skrifttyper, stilarter, vægte, farver, linjehøjde, margen, polstring og mere til din typografi. Det bedste ved at bruge Typecast er, at det hele fungerer inden for browseren, så du træffer beslutninger på typen nøjagtigt, som det bliver gjort for brugeren. Ser en bestemt skrifttype ikke for varm på 19 pixels? Bump det op til 20 med et klik på en knap, tilbage ned til 19 før endelig afregning med 18 pixel i størrelse, alt udført i sekunder i stedet for timer sidder med en udvikler.
Du kan bruge ethvert web skrifttyper fra deres samlinger på 23.000 skrifttyper, herunder Google skrifttyper, Typekit og mere i dine kompositioner, hvilket gør eksperimentering hurtigt og nemt (de er for nylig blevet købt af Monotype, der ejer Fonts.com og Myfonts, så forvent mange flere skrifttyper på vej snart). Typecast efter min mening introducerer en forestilling om legende igen i typografi, da det opfordrer dig til at prøve skrifttypevariationer, som du måske aldrig har opdaget, hvis de ikke var så tilgængelige og let udskiftelige som de er.
Et andet meget nyttigt træk ved typecast er evnen til at se og redigere CSS af din type. Du kan tilføje baggrundsfarver og billeder, svinge tilstande eller endda overgange ved blot at redigere CSS-panelet. Når du er tilfreds med din oprettelse, kan du nemt eksportere og gemme CSS-koden, som derefter kan uploades til dit websted eller sendes til en udvikler, og fordi alt er blevet designet i browseren, vises det præcis som du har til hensigt at.
Photoshop er ikke industristandarden for ingenting, og der vil være nogle af jer derude hyperventilerende ved tanken om at droppe den til design i browseren, når alt kommer til alt er vi reklamer, der ikke er kodere. Nå, læg papirposen op, da der stadig er en måde, du kan oprette smuk typografi ved hjælp af web skrifttyper i Photoshop. Extensis har oprettet en plug-in, som kan installeres i Photoshop-versioner CS5 og højere, der giver dig adgang til alle WebINK- og Google-webfonte til at bruge gratis direkte i Photoshop.
Dette betyder, at du kan bruge nogen af WebINK eller Googles web skrifttyper i dine design kompositioner, som du ville have skrifttyper, der er installeret på dit system, og de vil vise stort set det samme som det skal se i browseren. Plugin'et giver kun dig adgang til WebINK og Google web skrifttyper i øjeblikket, men på plus side opdaterer den automatisk nye skrifttyper, da de tilføjes til WebINK og Googles bibliotek med skrifttyper.
En anden værdifuld plugin, der hjælper med at lette overgangen mellem Photoshop-kompositioner og browser-kompatibel CSS, er den gratis cloud-baserede plugin-modul fra css3ps.com . En af hovedårsagerne til, at mange designere arbejder med Photoshop, er den kontrol, du har over lag og formelementer. At være i stand til nemt og hurtigt at eksperimentere med skygge, glød, farve, tekstur, afrundede hjørner og mere er næsten anden art for de fleste og noget, som endda oplevede designere kæmper for at replikere nøjagtigt i browseren. For dem er denne plugin perfekt, da den giver dig mulighed for at lave dine kompositioner på den måde, du ved bedst, men lad os så nemt konvertere din formes stilarter til browser-kompatibel CSS3. Denne metode er ideel til at designe knapper, navigation eller noget andet, som du måske har stylet en form til.
Måske er der stadig en rolle for Photoshop som et værktøj til at designe weblayouts, men hvad angår design af typografi til internettet har applikationer som Firebug og Typecast overtaget det. Den tid, det tager at opdatere statiske kompositioner, kan bare ikke sammenlignes med den hurtighed og lethed, som du kan foretage ændringer i browseren. For de af jer, der bare ikke engang kan underholde ideen om at designe i browseren, skal plug-outerne i det mindste give Photoshop det løft, det skal være relevant, og hjælpe med at lette overgangen.
Bruger du Photoshop til at designe websteder? Er Photoshop vejen for Flash? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, anvendelser død billede via Shutterstock.