Immagino che un titolo più adatto potrebbe essere "Photoshop è ancora uno strumento appropriato per progettare la tipografia sul web?" Ma manca il fascino drammatico di quanto sopra.
Come molti di voi, ho sempre utilizzato Photoshop per creare composizioni di simulazione dei miei progetti. Per quanto posso ricordare è stato lo standard del settore e il software di scelta per la maggior parte dei designer con cui ho lavorato. Ho passato settimane a progettare layout pixel perfetti, raggruppando elementi in cartelle gerarchiche e etichettando tutti i miei livelli per rendere la transizione dal bellissimo mock up al codice più semplice possibile.
Sarei pieno di entusiasmo, energia ed eccitazione che spiegano i miei progetti a uno sviluppatore, accendendo e spegnendo gli strati per cercare di illustrare la mia visione attraverso Photoshop, ma rimarrei sempre un po 'deluso dal mio disegno lucido e lucido che è stato trasformato in quello che avrei visto nel browser. Certo, sembrerebbe il mio design ... E ho riconosciuto i caratteri tipografici, ma mancava quella nitidezza che ricordavo dalle mie composizioni. Non è che gli sviluppatori non l'avessero codificato bene, più che la tipografia che avevo creato in Photoshop non fosse stata tradotta in codice.
Quando si sceglie font ci sono poche cose più importanti del fatto che un font sia facilmente leggibile o meno. In Photoshop, non è tanto un problema perché tutto sembra perfetto. Non importa quale font utilizzi, a quale dimensione o peso (entro limiti ragionevoli) come renderà perfettamente sullo schermo.
Sfortunatamente, questo non si estende al browser. Spesso durante la visualizzazione del mio progetto nel browser, le relazioni tra elementi e tipo erano tutte sbagliate. Le dimensioni dei caratteri e le altezze delle righe che avevo attribuito agli stili nella composizione di Photoshop non sembravano le stesse di quelle del browser. Se avessi indicato un margine di 20 pixel sopra il titolo nei miei progetti, quella distanza potrebbe essere cambiata in quanto l'altezza della riga dell'intestazione avrebbe avuto un effetto sulla dimensione del margine, cosa che non sarebbe accaduta in Photoshop. Dovrei quindi iniziare il lungo e tedioso processo dei temuti 'ritocchi progettuali'.
Fidati di me non è solo lo sviluppatore che si sottrae all'idea di un designer seduto accanto a loro chiedendo loro di "aumentare l'altezza della linea di copia del corpo di due pixel", facendo in modo che lo sviluppatore faccia cambiare e commit il CSS .... Accedere. 'In realtà, 1 pixel più piccolo' ... Invio. 'Forse era meglio com'era'. Questo tipo di modifica del codice bit per bit per vedere i risultati in tempo reale tramite il browser richiede tempo e non favorisce la creatività. Gli sviluppatori si sbronzano rapidamente cambiando la giornata cambiando ripetutamente ciò che vedono come il più piccolo dei dettagli che non farà alcuna differenza, ei progettisti non sono in grado di sperimentare cambiando rapidamente e facilmente i caratteri e gli stili per quelli che renderanno meglio nel browser.
Per i progettisti che hanno una conoscenza dei CSS, puoi usare strumenti come Firebug per apportare efficacemente le proprie modifiche al design nel browser, annotando tutte le modifiche CSS in un documento che è possibile trasferire a uno sviluppatore per implementarle. Questo è effettivamente lo stesso che stare con uno sviluppatore e apportare modifiche ai CSS, ma molto meno noioso per lo sviluppatore e permetterà al progettista di sperimentare ulteriormente con le dimensioni e gli stili prima di prendere una decisione. Sebbene questo sia un buon strumento per l'ispezione e la modifica di parti di HTML e CSS, perderete tutte le modifiche apportate non appena il browser viene aggiornato, il che può essere molto fastidioso se avete cambiato molti elementi e non annotate tutte le vostre regolazioni.
Puoi usare il Firediff plug-in per salvare un record di tutte le modifiche apportate all'interno di Firebug, che è ottimo in quanto consente di salvare ogni modifica in un foglio di calcolo separato per un secondo momento. Il problema più grande con questo metodo è quando si inizia a introdurre i caratteri Web nell'equazione, poiché tutti i font scelti devono essere installati nel kit del tipo o non verranno visualizzati nel browser. Ciò rende le cose molto più difficili e meno libere di sperimentare facilmente con caratteri diversi, dato che non è possibile provare rapidamente i font.
Servizi come typecast rendere molto più facile per i progettisti di lavorare con i caratteri web e praticamente uso tutta la mia tipografia per il web. Ti permette di creare mock tipografici (proprio come faresti in Photoshop) usando la sua interfaccia visuale per assegnare font, stili, pesi, colori, altezza della linea, margine, padding e altro alla tua tipografia. La cosa migliore dell'utilizzo di Typecast è che funziona tutto all'interno del browser in modo da prendere decisioni sul tipo esattamente come verrà visualizzato per l'utente. Un certo carattere non sembra troppo caldo a 19 pixel? Bump fino a 20 con un clic di un pulsante, indietro fino a 19 prima di stabilirsi definitivamente a 18 pixel di dimensione, il tutto fatto in pochi secondi anziché ore sedute con uno sviluppatore.
Puoi utilizzare qualsiasi tipo di carattere web dalle loro raccolte di 23.000 caratteri, inclusi i tipi di carattere di Google, Typekit e altro nelle tue composizioni, il che rende gli esperimenti facili e veloci (sono stati recentemente acquistati da Monotype che possiede Fonts.com e Myfonts quindi aspettati molti altri tipi di carattere presto presto). Secondo me, Typecast introduce nella tipografia un concetto di giocosità che incoraggia a provare variazioni di caratteri, che potresti non aver mai scoperto se non fossero così prontamente disponibili e facilmente intercambiabili come sono.
Un'altra caratteristica molto utile di typecast è la possibilità di visualizzare e modificare il CSS del tuo tipo. Puoi aggiungere colori e immagini di sfondo, stati di passaggio del mouse o anche transizioni semplicemente modificando il pannello CSS. Una volta che sei soddisfatto della tua creazione, puoi facilmente esportare e salvare il codice CSS, che può quindi essere caricato sul tuo sito o inviato a uno sviluppatore e, poiché tutto è stato progettato nel browser, apparirà esattamente come tu intendi.
Photoshop non è lo standard del settore per niente, e ci saranno alcuni di voi là fuori, iperventilanti al pensiero di abbandonarlo alla progettazione nel browser, dopotutto siamo creativi non programmatori. Bene, metti giù il sacchetto di carta perché c'è ancora un modo per creare una bella tipografia usando i font web in Photoshop. Extensis hai creato un plug-in che può essere installato su Photoshop versioni CS5 e versioni successive che ti consentiranno di accedere a tutti i WebINK e ai Font Web di Google da utilizzare gratuitamente, direttamente all'interno di Photoshop.
Ciò significa che puoi utilizzare qualsiasi WebINK o i caratteri web di Google nelle tue composizioni di progettazione come faresti con qualsiasi carattere installato nel tuo sistema e visualizzeranno più o meno lo stesso di come dovrebbero apparire nel browser. Il plug-in ti consentirà solo di accedere a WebINK e ai caratteri Web di Google al momento, ma sul lato positivo aggiornerà automaticamente i nuovi caratteri man mano che vengono aggiunti a WebINK e alla libreria di caratteri di Google.
Un altro prezioso plug-in che aiuta a facilitare la transizione tra le composizioni di Photoshop e i CSS compatibili con browser è il plug-in gratuito basato su cloud css3ps.com . Uno dei motivi principali per cui molti designer lavorano con Photoshop è il controllo su layer e elementi di forma. Essere in grado di sperimentare facilmente e rapidamente l'ombra, il bagliore, il colore, la trama, gli angoli arrotondati e altro è quasi una seconda natura per la maggior parte e qualcosa che persino i progettisti esperti hanno difficoltà a replicare esattamente nel browser. Per quelli, questo plug-in è perfetto in quanto ti consente di creare le tue composizioni nel modo che conosci meglio, ma poi converti facilmente gli stili della tua forma in CSS3 compatibili con browser. Questo metodo è ideale per progettare pulsanti, navigazione o qualsiasi altra cosa per cui potresti aver disegnato una forma.
Forse c'è ancora un ruolo per Photoshop come strumento per la progettazione di layout Web, ma per quanto riguarda la progettazione della tipografia per il web, applicazioni come Firebug e Typecast l'hanno superata. Il tempo necessario per aggiornare le composizioni statiche non può essere confrontato con la velocità e la facilità con cui è possibile apportare modifiche nel browser. Per quelli di voi che proprio non riescono nemmeno a intrattenere l'idea di progettare nel browser, i plug-in di cui sopra dovrebbero almeno dare a Photoshop la spinta di cui ha bisogno per rimanere rilevante e facilitare la transizione.
Usi Photoshop per progettare siti web? Photoshop sta andando a modo di Flash? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, usi immagine morta via Shutterstock.