Luulen, että sopivampi otsikko voisi olla "onko Photoshop edelleen asianmukainen työkalu typografian suunnittelussa verkossa?" Mutta sillä ei ole edellä mainittua dramaattista vetoomusta.
Kuten monet teistäkin, olen aina käyttänyt Photoshopia luomaan mallejani mallistoja. Niin kauan kuin voin muistaa, se on ollut alan standardi ja ohjelmiston valinta useimmille suunnittelijoille, jotka olen työskennellyt. Olen viettänyt viikkoja suunnittelemassa pikselin täydellisiä asetteluja, ryhmittämällä elementit hierarkkisiin kansioihin ja merkitsemällä kaikki kerrokseni siirtymästä kauniista mock-koodista mahdollisimman pian.
Olisin täynnä innostusta, energiaa ja jännitystä, joka selittäisi kuviani kehittäjälle, vaihtaa kerroksen tiloja päälle ja pois yrittääkseen havainnollistaa visioani Photoshopissa, mutta olisin aina hieman pettynyt, koska kiiltävä ja kiillotettu muotoiluni muuttui mitä näen selaimessa. Toki, se näyttäisi suunnittelultani ... Ja minä tunnustin kirjasinlajit, mutta sillä ei ollut sellaista terävyyttä, jonka muistan sävellykseni. Ei ollut, että kehittäjät eivät olleet koodattaneet sitä kovin kauemmin, että Photoshopissa luodun typografian ei ollut käännetty koodiksi.
Valittaessa kirjasimet on muutama asia tärkeämpää kuin kirjasin on helposti luettavissa tai ei. Photoshopissa tämä ei ole niin paljon ongelma, koska kaikki näyttää hyvältä. Ei ole väliä minkä fontin käytät, minkä kokoinen tai paino (syystä), koska se tulee täysin näkyviin näytöllä.
Valitettavasti tämä ei ulotu selaimeen. Usein tarkastellessani suunnittelua selaimessa elementtien ja tyypin väliset suhteet olivat kaikki väärin. Kirjasinkoko ja linjan korkeudet, jotka olin määrittänyt tyylisuunnitteluni valokuvasovittelussa, eivät näytä samalta kuin ne selaimessa. Jos olisin määrittänyt 20 kuvapisteen marginaalin otsikoiden yläpuolella kuvioissani, tämä etäisyys saattaa olla muuttunut, koska otsakkeen viivan korkeus vaikuttaisi marginaalin koon, mikä ei tapahdu Photoshopissa. Sitten minun pitäisi aloittaa kauhea ja ikävä prosessi pelättyjä "muotoilujärjestelmiä".
Luota minuun, se ei ole vain kehittäjä, joka houkuttelee ajatusta suunnittelija istuu heidän vieressänsä ja pyytää heitä "kasvattamaan runkokopiolinjojen korkeutta kahdella pikseleellä", kun kehittäjä tekee CSS: n muutoksen ja sitoutuu .... Tulla sisään. "Oikeastaan 1 pikseli pienempi" ... Anna. "Ehkä se oli parempi miten se oli". Tällainen CSS: n pienentäminen bittikohtaisesti, jotta tuloksia voidaan tulkita reaaliaikaisesti selaimen kautta, on aikaa vievää ja ei kannusta luovuuteen. Kehittäjät nopeasti tyytyvät viettämään päivää toistuvasti muuttamalla mitä he näkevät pienimpinä yksityiskohtiin, jotka eivät muuta, ja suunnittelijat eivät pysty kokeilemaan nopeasti ja helposti muuttamalla fontteja ja tyylejä sellaisille, jotka parantavat selaimessa.
CSS: n tuntemista suunnittelijoista voit käyttää esimerkiksi työkaluja pyromaani tehokkaasti tekemään oman muotoilun selaimessa, huomioimalla kaikki CSS-muutokset yhdessä asiakirjassa, jonka voit sitten siirtää kehittäjälle. Tämä on käytännössä sama kuin istuessasi kehittäjän kanssa ja tekemällä CSS: n muutoksia, mutta kehittäjältä paljon vähemmän tylsiä, ja antaa suunnittelijalle mahdollisuuden kokeilla edelleen kokoja ja tyylejä ennen päätöksentekoa. Vaikka tämä on hyvä työkalu HTML- ja CSS-osien tarkastamiseen ja muuttamiseen, menetät tekemäsi muutokset heti, kun selaimesi päivitetään. Tämä voi olla erittäin ärsyttävää, jos olet muuttanut paljon elementtejä ja et ole kirjannut säädöt.
Voit käyttää Firediff-plug-in Tallenna kaikki muutokset, jotka olet tehnyt Firebugissa, mikä on hienoa, koska se säästää sinua huomioimalla kaikki muutokset erillisessä laskentataulukossa myöhemmin. Suurin ongelma tämän menetelmän kanssa on, kun aloitat Web-fonttien tuomisen yhtälöön, koska kaikki valitut fontit on asennettava tyyppisarjaasi tai ne eivät näy selaimessa. Tämä tekee asioista paljon vaikeampaa ja vähemmän vapaata kokeilla helposti eri fontteja, koska et voi vain nopeasti kokeilla fontteja.
Palvelut kuten Antaa jklle totuttu rooli tekevät suunnittelijoiden paljon helpommaksi työskennellä web-fonttien kanssa ja olen melko paljon tekemässä kaiken typografian webissä. Sen avulla voit luoda typografisia mallistoja (aivan kuten Photoshopissa) visuaalisen käyttöliittymän avulla fonttien, tyylejen, painojen, värejä, viivan korkeutta, marginaalia, pehmusteita ja paljon muuta typografian määrittämiseen. Paras tapa käyttää Typecastia on se, että kaikki toimivat selaimen sisällä, joten teet päätöksiä tyypistä täsmälleen sellaisenaan, kuin se annetaan käyttäjälle. Eikö tietty fontti näytä liian kuumalta 19 kuvapistettä? Pudota se jopa 20 klikkauksella painiketta, takaisin alas 19 ennen lopullista ratkaiseminen 18 pikseliä kokoa, kaikki tehdään sekunneissa eikä tuntien istuu kehittäjä.
Voit käyttää 23 000 fontin, mukaan lukien Google-kirjasimia, Typekit-tiedostoja ja muita tekstejä, jotka tekevät kokeilemisesta nopeaa ja helppoa (niitä on ostettu Monotype, joka omistaa Fonts.com ja Myfonts, joten odottavat paljon enemmän fontteja matkalla pian). Typecast mielestäni tuo esiin leikkisyyttönteen takaisin typografiaan, koska se kannustaa sinua kokeilemaan fontin muunnelmia, joita et ehkä ole löytäneet, jos ne eivät ole niin helposti käytettävissä ja helposti vaihdettavissa, koska ne ovat.
Toinen erittäin tärkeä ominaisuus typografiassa on kyky tarkastella ja muokata CSS-tyyppisi. Voit lisätä taustavärejä ja -kuvia, hover-tiloja tai jopa siirtymiä yksinkertaisesti muokkaamalla CSS-paneelia. Kun olet tyytyväinen luomiseen, voit helposti viedä ja tallentaa CSS-koodin, joka voidaan lähettää sivustolle tai lähettää kehittäjälle ja koska kaikki on suunniteltu selaimessa, se näyttää täsmälleen sellaisena kuin haluat.
Photoshop ei ole alan standardi eikä mitään, ja siellä on joitain teistä siellä hyperventilating ajatellun pudottamalla sen suunnitteluun selaimessa, kun kaikki olemme mainoksia ei koodereita. No, laske paperi pussi, koska on vielä tapa voit luoda kaunista typografiaa käyttämällä Web-fontteja Photoshopissa. Extensis on luonut plug-in, joka voidaan asentaa Photoshop-versioihin CS5 ja uudempi, joka antaa sinulle pääsyn kaikkiin WebINK- ja Google-verkko-fontit käyttöön ilmaiseksi, suoraan Photoshopissa.
Tämä tarkoittaa sitä, että voit käyttää mitä tahansa WebINK- tai Googlen web-kirjasimia suunnittelutoimituksissasi, kuten mitä tahansa kirjasimia, jotka on asennettu järjestelmään, ja ne näyttävät suunnilleen samoja kuin pitäisi näyttää selaimessa. Plug-in antaa sinulle pääsyn vain WebINK- ja Google-verkko-kirjasimille, mutta lisäosassa se päivittää automaattisesti uudet fontit, kun ne lisätään WebINK: n ja Googlen kirjasintyypin kirjastoihin.
Toinen arvokas plug-in, joka helpottaa siirtymistä Photoshopin sävellyksistä ja selaimella yhteensopivasta CSS: stä on ilmainen, pilvipohjainen plug-in css3ps.com . Yksi tärkeimmistä syistä, miksi monet suunnittelijat työskentelevät Photoshopin kanssa, on ohjaus, jolla on yli kerrokset ja muotoelementit. Auttaa helposti ja nopeasti kokeilla varjoa, hehkua, värejä, tekstuuria, pyöristettyjä kulmia ja muuta on melkein toinen luonteeltaan eniten ja jotain, jonka edes kokeneet suunnittelijat kamppailevat replikoimaan täsmälleen selaimessa. Niille tämä plug-in on täydellinen, koska sen avulla voit luoda sävellyksiä parhaiten tunnetulla tavalla, mutta voit muuttaa muotoilusi tyylit selainyhteensopivaksi CSS3: ksi. Tämä menetelmä sopii erinomaisesti painikkeiden, navigoinnin tai minkä tahansa muun muodon suunnitteluun.
Ehkä vielä Photoshopilla on rooli web-asettelujen suunnittelussa, mutta web-typografian suunnittelussa on tulossa sovelluksia, kuten Firebug ja Typecast. Staattisten sävellysten päivittämiseen kuluva aika ei voi vertailla sen nopeuden ja helppokäyttöisyyden kanssa, jolla voit tehdä muutoksia selaimessa. Niille teistä, jotka eivät edes ole edes ajatelleet suunnittelun selaimessa, yllä olevien laajennusten pitäisi ainakin antaa Photoshopille sen tarvitseman pysyvyyden ja helpottaa siirtymistä.
Käytätkö Photoshopia verkkosivujen suunnittelussa? Onko Photoshop menossa Flash-tietä? Kerro meille kommentit.
Esitetty kuva / pikkukuva, käyttää kuollut kuva kautta Shutterstock.