Ég held að hentugri titill gæti verið 'er Photoshop enn viðeigandi tól til að hanna leturfræði á vefnum?' En það skortir dramatískan áfrýjun af ofangreindum.

Eins og margir af ykkur, hef ég alltaf notað Photoshop til að búa til mock-up samsetningar af hönnun mínum. Svo lengi sem ég man eftir því hefur verið iðnaður staðall og hugbúnað sem valin er fyrir flest hönnuðir sem ég hef unnið með. Ég hef eytt viku til að hanna hina fullkomnu uppsetningum pixla, sameina þætti í hierarchískum möppum og merkja öll lögin mín til að gera umskipti frá fallegri mock upp til að kóða eins slétt og mögulegt er.

Ég myndi vera full af eldmóð, orku og spennu sem útskýrir hönnun mína til þróunaraðila, kveikja lagið á og burt til að reyna að sýna sýn mína í gegnum Photoshop en myndi alltaf verða svolítið vonsvikin þar sem glansandi, fágað hönnun mín var umbreytt í það sem ég myndi sjá í vafranum. Jú, það myndi líta út eins og hönnunin mín ... Og ég er góður af viðurkenndum leturgerðum en það skorti það skerpu sem ég minntist af verkunum mínum. Það var ekki það sem verktaki hafði ekki dulritað það vel, meira að leturgerðin sem ég hafði búið til í Photoshop hafði ekki þýtt í kóða.

Það sem þú sérð er ekki alltaf það sem þú færð

Þegar þú velur leturgerðir Það eru fáir hlutir mikilvægari en hvort letur er auðveldlega læsilegt eða ekki. Í Photoshop er þetta ekki svo mikið af því að allt lítur vel út. Það skiptir ekki máli hvaða letur þú notar, með hvaða stærð eða þyngd (innan ástæðu) sem það mun gera fullkomlega á skjánum.

Því miður nær þetta ekki til vafrans. Oft þegar ég horfði á hönnunina mína í vafranum var samhengið milli þátta og gerðar rangt. Leturstærð og línahæð sem ég hafði rekist á stíll í Photoshop samsetningu mínum, myndi ekki líta út eins og þeir myndu vilja í vafranum. Ef ég hefði tilgreint 20 punkta framlegð fyrir ofan titilinn í hönnun minni, þá gæti þessi fjarlægð breyst þar sem línahæð haussins myndi hafa áhrif á stærðarhlutann, eitthvað sem myndi ekki gerast í Photoshop. Ég þyrfti þá að hefja langa og leiðinlega ferlið af hræðilegu "hönnun klipunum".

Allir hata hönnun klip

Treystu mér, það er ekki bara verktaki sem hylur hugmyndin um hönnuður sem situr við hliðina á þeim og biður þá um að "auka líkamann eftirlíking línu hæð með tveimur punkta" þá hafa verktaki gera CSS breyting og fremja .... Koma inn. 'Reyndar, 1 pixla minni' ... Sláðu inn. "Kannski var betra hvernig það var". Þessi tegund af klip á CSS í smáatriðum til að sjá niðurstöðurnar í rauntíma í gegnum vafrann er tímafrekt og ekki stuðla að sköpun. Í teymið fljótt fá nóg með að eyða daginum ítrekað breyta því sem þeir sjá sem minnstu smáatriði sem skiptir engu máli og hönnuðir geta ekki gert tilraunir með því að breyta letur og stíll fljótlega og auðveldlega fyrir þá sem vilja gera betur í vafranum.

Og hvað nú?

Fyrir hönnuði sem hafa skilning á CSS, getur þú notað verkfæri eins og Firebug til að búa til eigin hönnunarfærslur í vafranum og taka eftir öllum CSS breytingum í einu skjali sem þú getur síðan sent fram á verktaki til að framkvæma. Þetta er í raun það sama og að sitja með verktaki og gera CSS breytingar en mun minna leiðinlegt fyrir verktaki og mun einnig leyfa hönnuður að gera tilraunir frekar með stærðum og stílum áður en ákvörðun er tekin. Þó að þetta sé gott tól til að skoða og breyta hlutum HTML og CSS, muntu tapa öllum breytingum sem þú gerir um leið og vafrinn er endurnýjaður. Það getur verið mjög pirrandi ef þú hefur breytt mörgum þáttum og benti ekki á alla breytingar.

Þú getur notað Firediff innstungu til að vista skrá yfir allar breytingar sem þú gerir í Firebug, sem er frábært þar sem það vistar að þú verður að taka eftir öllum breytingum niður í sérstöku töflureikni til seinna. Stærsta tölublaðið með þessari aðferð er þegar þú byrjar að kynna vefur letur í jöfnunni þar sem allir valin letur verða að vera settar upp í gerð tækisins eða þær birtast ekki í vafranum. Þetta gerir hlutina miklu erfiðara og minna frjáls til að gera tilraunir auðveldlega með mismunandi leturgerð, þar sem þú getur ekki aðeins fljótt prófað leturgerðir.

Hönnun í vafranum

Þjónusta eins og Typecast gera það auðveldara fyrir hönnuðir að vinna með leturgerð og ég geri allt sem ég skrifar fyrir vefinn með því að nota það. Það gerir þér kleift að búa til stafrænar mock ups (eins og þú myndir í Photoshop) með því að nota sjónræna tengið til að tengja leturgerðir, stíl, lóð, liti, línuhæð, framlegð, padding og fleira í leturgerðinni þinni. Það besta með því að nota Typecast er að það virkar allt í vafranum svo þú tekur ákvarðanir um gerð nákvæmlega eins og það verður veitt fyrir notandann. Virkar ákveðinn letur ekki of heitt á 19 punktum? Stökkva það allt að 20 með smelli á hnapp, aftur niður til 19 áður en að lokum setjast á 18 pixlar í stærð, allt gert í sekúndum fremur en klukkustundum sem sitja með framkvæmdaraðila.

Þú getur notað hvaða leturgerð sem er í 23.000 letur, þ.mt Google leturgerðir, Typekit og fleira í samsetningum þínum, sem gerir tilraunir fljótlegir og auðveldar (þeir hafa nýlega verið keyptir af eintökum sem eiga Fonts.com og Myfonts svo búast við mörgum fleiri leturgerðir á leiðinni fljótlega). Lykilorð, að mínu mati, kynnir hugmyndina um playfulness aftur í leturfræði þar sem það hvetur þig til að reyna leturvari, sem þú mátt aldrei hafa uppgötvað ef þær voru ekki svo aðgengilegar og auðvelt að skipta eins og þær eru.

Annar mjög gagnlegur eiginleiki typecast er hæfni til að skoða og breyta CSS af gerðinni þinni. Þú getur bætt við bakgrunnslitum og myndum, sveiflum eða jafnvel umbreytingum með því einfaldlega að breyta CSS spjaldið. Þegar þú ert ánægður með stofnunina getur þú auðveldlega flutt út og vistað CSS kóða sem hægt er að hlaða inn á síðuna þína eða senda til verktaki og vegna þess að allt hefur verið hannað í vafranum mun það birtast nákvæmlega eins og þú ætlar það.

Þú missti mig á CSS

Photoshop er ekki iðnaður staðall fyrir neitt, og það verður einhver af ykkur þarna úti í að hugsa um að sleppa því að hanna í vafranum, eftir allt erum við að auglýsa ekki kóða. Jæja, settu niður pappírspokann þar sem enn er hægt að búa til fallega leturgerð með því að nota leturgerðir í Photoshop. Extensis hafa búið til viðbót sem hægt er að setja upp í Photoshop útgáfur CS5 og hærri sem mun gefa þér aðgang að öllum WebINK og Google Web Fonts að nota ókeypis, beint í Photoshop.

Þetta þýðir að þú getur notað eitthvað af vefhönnuðum WebINK eða Google í hönnunarsamsetningum þínum eins og þú myndir einhverja leturgerðir sem eru settar upp á tölvunni þinni og þeir munu sýna u.þ.b. það sama og það ætti að líta út í vafranum. Plugin mun aðeins veita þér aðgang að WebINK og Google vefritum, en á plúshliðinni mun það sjálfkrafa uppfæra ný leturgerðir eins og þær eru bættar við WebINK og leturgerð Google.

Photoshop kveikt upp

Annar verðmætar viðbót sem hjálpar til við að auðvelda umskipti milli Photoshop samsetningar og vafra samhæft CSS er ókeypis, skýjatengdur viðbót frá css3ps.com . Ein helsta ástæðan fyrir því að margir hönnuðir vinna með Photoshop er stjórnin sem þú hefur yfir lög og lögun þætti. Að geta auðveldlega og fljótt gert tilraunir með skugga, ljóma, lit, áferð, ávalar horn og fleira er næstum seinni eðli flestra og eitthvað sem jafnvel upplifað hönnuðir á baráttu við að endurtaka nákvæmlega í vafranum. Fyrir þá er þetta innstungu fullkomið þar sem það gerir þér kleift að búa til verkin þín eins og þú þekkir best en þá skulum við auðveldlega breyta stílum þínum í vafrahæf CSS3. Þessi aðferð er tilvalin til að hanna hnappa, flakk eða eitthvað annað sem þú gætir hafa stíll lögun fyrir.

Kannski er það ennþá hlutverki Photoshop sem tæki til að hanna vefútlit en að því að hanna leturfræði fyrir vefinn, hafa forrit eins og Firebug og Typecast tekist á við það. Tíminn sem þarf til að uppfæra truflanir er einfaldlega ekki hægt að bera saman við hraða og vellíðan sem þú getur gert breytingar í vafranum. Fyrir þá sem geta ekki einu sinni skemmt hugmyndina um hönnun í vafranum, ætti viðbótin að minnsta kosti að gefa Photoshop uppörvunina sem þarf til að halda áfram og hjálpa til við að auðvelda umskipti.

Notarðu Photoshop til að hanna vefsíður? Er Photoshop leiðin til Flash? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, notar dauður mynd um Shutterstock.