Convertire i prototipi di Photoshop per vivere il codice web è una pratica estremamente comune tra i web designer. L'abbiamo fatto un milione di volte a mano, quindi è piuttosto eccitante iniziare a vedere le soluzioni che ci aiutano a automatizzare questo processo.
L'ultima versione di Creative Cloud Photoshop CS6 ha una funzione integrata per convertire gli stili di Photoshop in CSS e, se hai bisogno di un'altra soluzione, ci sono due estensioni solide che puoi controllare. Oggi confronteremo i risultati di tutti e tre i metodi: Photoshop, CSS3P e CSSHat per vedere quale è il migliore.
I nostri tre candidati
Questo articolo è tutto su come confrontare i risultati di tre diversi metodi per raggiungere lo stesso obiettivo. Abbiamo un design in Photoshop e vogliamo vederlo costruito in HTML e CSS.
I nostri tre metodi includono Photoshop stesso (versione 13.1) e due estensioni CSS3P e CSSHat. Recentemente ho creato uno screencast per Psdtuts + che introduce e fa un confronto tra Photoshop e CSS3P, che puoi trovare qui.
Non ho trattato le funzionalità del gruppo di livelli in quel tutorial, quindi ho pensato che valesse la pena di fare un altro tentativo e ho deciso di lanciare anche CSSHat in modo da coprire davvero bene le basi.
Il nostro test case
Avremo bisogno di qualcosa per testare i diversi metodi di conversione, quindi ho montato un pannello generico dell'interfaccia utente che potrebbe contenere tutto ciò che desideri:
Questo è fondamentalmente composto da tre diversi livelli: il livello di testo, la barra in alto e lo sfondo. Qui li ho separati un po 'così da farti un'idea di come sono stati costruiti.
Di seguito puoi dare un'occhiata alla nostra palette di livelli. Nota che questo oggetto è strutturato molto intenzionalmente. Tutti e tre i metodi che esamineremo oggi convertiranno i nomi dei livelli in nomi di classi in CSS, quindi assicurati di essere molto attento a come fai il nome dei vari pezzi. Si noti inoltre che le forme sono costituite da strati di forma vettoriale.
Alcuni dei metodi che proveremo supportano i gruppi di livelli, il che significa che vorremmo convertire la struttura qui in una struttura div nel nostro HTML.
HTML
Photoshop può prendersi cura del CSS per noi, ma siamo ancora da soli con l'HTML. Ecco un rapido tentativo di una struttura HTML che funzionerà con il codice che Photoshop sta per generare. Senza questo nel tuo codice HTML, il CSS non farà nulla!
Photoshop
Iniziamo con la funzionalità integrata di Photoshop. Il processo qui è estremamente semplice, tutto ciò che dobbiamo fare è selezionare il nostro gruppo di livelli nel pannello Livelli e andare a Livello> Copia CSS (puoi anche accedere a questo comando con un clic destro).
Photoshop fornisce praticamente zero feedback sul fatto che tutto sia successo a questo punto. Non ci sono opzioni da modificare, nessun pannello da ispezionare, solo il comando di menu che abbiamo cliccato sopra, che inserisce una grande fetta di codice nei nostri appunti. Ecco l'output, direttamente da Photoshop.
Il risultato
Se lo buttiamo in un editor di codice e guardiamo il risultato, i risultati sono un po 'scoraggianti. Photoshop non ha fatto un ottimo lavoro con la conversione. Per i principianti, la barra superiore non ha gli angoli arrotondati. Inoltre, l'ombra sembra essere completamente opaca (troppo scura) e la posizione del tipo è disattivata. Se ci dà una partenza forte e ci salva davvero molto tempo, ma probabilmente non è la soluzione magica che speravi da Photoshop.
Guardalo dal vivo: clicca qui
Per peggiorare le cose, se saltiamo indietro e guardiamo il codice, c'è molto da lamentarsi. Ci sono alcune cose davvero stupide in corso qui come la trasformazione non necessaria sul testo. Sembra che tu può lascia che Photoshop scriva CSS per te, ma non sono convinto che dovresti.
CSS3Ps
Il nostro prossimo candidato è CSS3Ps, un plugin per Photoshop completamente gratuito che ha preceduto la funzionalità di Photoshop integrata. Il sito web mostra alcuni esempi piuttosto complessi, quindi spero che questo risolva un po 'meglio il nostro progetto.
Con l'estensione CSS3Ps installata, vai a Finestra> Estensioni> CSS3Ps. Quindi seleziona il gruppo di livelli e fai clic sul logo che si apre all'interno del pannello CSS3Ps.
Una volta premuto quel pulsante, una pagina web si apre e ti offre un timer. Sei costretto ad aspettare venti secondi e guardare un annuncio, che fa schifo ma dato che l'estensione è gratuita, è comprensibile.
Da qui vieni indirizzato a una pagina contenente il codice, che ho copiato e incollato di seguito. Si noti che questa volta, ho dovuto aggiungere periodi prima dei nomi delle classi. CSS3P prende il nome del livello esattamente come appare in Photoshop, quindi aggiungi il?.? o ?#? simboli lì.
Il risultato
C'è molto da apprezzare sull'output di CSS3P. Per cominciare, tratta ciascun livello come oggetto e non tenta di posizionarli uno sull'altro. Io in realtà preferisco questo e sempre immediatamente tolgo il codice di posizionamento assoluto che usa il metodo integrato. Ciò mantiene il focus della conversione dove dovrebbe essere: in stile.
Guardalo dal vivo: clicca qui
A proposito di stile, anche i risultati in quell'area sono migliorati. Notare come questa barra in alto abbia effettivamente un raggio di confine questa volta e come l'ombra della scatola usi un valore alfa per ridurre l'opacità. Questa versione potrebbe essere un piccolo prefisso pesante su cose che non richiedono più prefissi, ma altrimenti il codice non è male male.
Inoltre, il fatto che è possibile ottenere l'output riformattato in Sass o SCSS è una caratteristica killer che rende questo metodo migliore rispetto alla funzione predefinita di Photoshop.
CSSHat
Il terzo e ultimo metodo che andremo a verificare è CSSHat. Come i CSS3P, è un'estensione Photoshop, ma questa ti farà girare a circa $ 30.
Per usare CSSHat, è sufficiente selezionare il livello che si desidera convertire e aprire il pannello CSSHat (trovarlo nel menu delle estensioni come in precedenza con CSS3P). Sfortunatamente, CSSHat attualmente non supporta i gruppi di livelli, quindi dovrai farlo su ogni singolo livello. Questo è un attacco serio contro CSSHat, ma compensa la versatilità.
Adoro che finalmente ho alcune opzioni da modificare. Gli altri due metodi erano facili, ma se non ti piace qualcosa, duro! Qui posso attivare quattro diverse opzioni: le spiegazioni dei commenti, i prefissi dei browser, le dimensioni dei livelli e se il codice debba o meno essere avvolto in una regola chiamata dopo il livello.
Si noti inoltre che è possibile ottenere l'output in una varietà impressionante di formati: CSS, SCSS, Sass, LESS, Stylus e Stylus CSS. Ecco l'output per la semplice versione CSS:
Il risultato
Come puoi vedere sopra, il pezzo di codice questa volta è abbastanza grande, principalmente per il fatto che il gradiente viene convertito in un URL di dati. Di seguito è riportato il risultato se incolliamo direttamente nel nostro editor di codice.
Guardalo dal vivo: clicca qui
Come puoi vedere, proprio come con i CSSP, gli elementi sono semplicemente stilizzati, non posizionati, dovremmo metterli in posizione noi stessi. Su questo fronte, gli stili sembrano perfetti con l'eccezione del testo, che è piccolo. Mi aspetto che questo abbia a che fare con il fatto che ho costruito la versione di Photoshop su uno schermo Retina, quindi non si può verificare questo bug (i CSS3P hanno effettivamente fatto la stessa cosa).
Chi vince?
? Raccomando sia CSSHat che CSS3P su ciò che ottieni all'interno di Photoshop 13.1.?Nessuno dei metodi per convertire gli stili di Photoshop in CSS delineati sopra è perfetto. La versione di Photoshop funziona, ma il codice è piuttosto brutto e i risultati non utilizzano le tecniche avanzate di CSS3 che dovrai abbinare a cose come l'opacità e le complesse impostazioni di raggio-raggio. I CSS3P sono gratuiti e performano meglio di Photoshop, ma il metodo per trasformarti in una pagina web nascosta dietro un ritardo di venti secondi è piuttosto fastidioso.
CSSHat è il migliore del gruppo per quanto riguarda la personalizzazione, ma non supporta i gruppi di livelli. Il metodo Photoshop predefinito è l'unico che posiziona i tuoi oggetti multipli in un modo che corrisponda alla tua tela, il che potrebbe essere una cosa buona o cattiva (vorrei che fosse una funzione opzionale). Alla fine, nulla ti darà l'accuratezza, la potenza e la versatilità della codifica a mano, ma questi strumenti ti consentiranno di iniziare bene e farti risparmiare tempo.
Personalmente, tendo a favorire CSSHat in questo gruppo. È un po 'caro, ma la funzionalità è stellare. È francamente molto più vicino a quello che volevo vedere da Adobe. Penso che abbiano davvero rinunciato a questa funzione e raccomando sia CSSHat che CSS3P su ciò che ottieni all'interno di Photoshop 13.1.
Cosa pensi?
Ora che hai visto la mia valutazione di questi tre strumenti, è giunto il momento che tu intervenga. Quale dei metodi sopra hai provato? Quale pensi sia la migliore? Fateci sapere nei commenti qui sotto!