Scenario: qualcuno ti consegna un documento di Illustrator con il loro ultimo layout web e il tuo compito è convertirlo in HTML e CSS funzionanti. Diamo un'occhiata a come puoi farlo.

Nota: Lo scopo di questo tutorial non è ricreare perfettamente il design per l'utilizzo web. Invece, lo useremo per esplorare i flussi di lavoro e le funzionalità di Illustrator che ci aiutano a farlo.

Il file di Illustrator

Iniziamo dando un'occhiata al documento in questione:

Guarda come è stato realizzato il nostro layout di esempio in questo tutorial

È un layout per una pagina 404; una pagina che dice agli utenti che qualsiasi cosa stiano cercando non può essere trovata e che dovrebbero forse provare qualcos'altro. Possiamo vedere un'intestazione, alcuni paragrafi di istruzioni, un modulo di ricerca e un pulsante, più alcuni pulsanti con i suggerimenti in fondo.

L'intera cosa sembra fluttuare al centro della pagina, sia orizzontalmente che verticalmente. Ha uno sfondo giallo, alcuni accenti caldi e ombre in giro qua e là. Da dove iniziamo?

Facile lo fa!

Non reinventeremo la ruota per questo, rendiamolo il più semplice possibile su noi stessi. Illustrator non produrrà un pacchetto accurato di HTML, CSS e JavaScript per questo, né sprecheremo il nostro tempo per creare tutto da zero, quindi andiamo a prendere una copia di Bootstrap per dare un avvio a questo progetto.

Attualmente v3.1.1, come puoi vedere ...

Ho scaricato Bootstrap, estrapolato alcuni file CSS e font di cui non abbiamo bisogno, quindi ho aggiunto un file index.html basato sul modello Cover di Mark Otto. Quattro minuti di clic del mouse e ho io stesso una pagina di base che assomiglia approssimativamente a ciò che stiamo cercando.

Potrebbe non sembrare molto, ma abbiamo appena risparmiato un sacco di tempo ...

I file sorgente per continuare da questo punto sono disponibili nel repository GitHub, nella cartella 1-starting-point.

Aggiungere markup

Il prossimo passo logico sarebbe aggiungere un markup strutturale al nostro index.html (di nuovo, Illustrator non lo farà per noi). Abbiamo già un contenitore allineato centralmente, a div con le classi coperchio interno:

 
404
 
Questa è la base da cui lavoreremo. Tutto il fluff è stato spogliato.
 

Aggiungiamo alcuni pezzi extra all'interno di questo:

 
Errore
 
404
 
Siamo spiacenti, la pagina che stavi cercando non esiste
 
Prova a cercare la pagina qui:
  
 
 Ricerca  
 Ricerca 
 
O
  a casa contattaci 

Abbiamo aggiunto i tag di intestazione

e

, alcuni paragrafi e alcuni tipici markup del modulo Bootstrap (puoi prendere altri esempi dai documenti Bootstrap). Il modulo ha una classe di form-linea, una classe Bootstrap nativa che colloca i nostri elementi del form lungo una riga.

Finalmente, alla fine, vedrai tre ancore, tutte con le classi btn e btn-primaria. Questi serviranno da pulsanti. Ecco cosa abbiamo in questa fase:

A questo punto non abbiamo fatto nulla in termini di stile, non una singola riga di CSS, ma grazie a Bootstrap abbiamo effettivamente costruito la nostra pagina, pronta per la lucidatura.

Facciamo funzionare i tooltip

Qualcos'altro con cui Bootstrap ci aiuterà; i suggerimenti. Puoi leggere di più sulle varie opzioni a nostra disposizione nei documenti Bootstrap, ma per ora aggiungiamo gli ingredienti necessari al nostro HTML.

Ad ogni pulsante aggiungiamo una classe extra mancia usato per identificare tutto ciò che ha bisogno di un suggerimento. Abbiamo anche bisogno di un titolo attributo che detta ciò che effettivamente mostrerà all'interno del suggerimento:

indietro

Il bootstrap.min.js il file che stiamo già inserendo ha tutto il codice JavaScript necessario per i tooltip. In effetti, ha un sacco di altri giocattoli JavaScript, molti dei quali non ne abbiamo nemmeno bisogno, quindi in un ambiente di produzione potrebbe essere saggio includere solo le cose che stiamo usando. I toolstart Bootstrap sono opt-in, quindi non funzionano automaticamente, abbiamo bisogno di inizializzarli. Facciamolo all'interno dei tag di script nella parte inferiore della nostra pagina, al di sotto di dove abbiamo chiamato l'altro JavaScript:

Fatto. Ora abbiamo questo:

Enorme differenza!

Ora proviamo alcuni stili

Ho aggiunto un terzo file CSS al progetto chiamato theme.css e l'ho indicato dal documento . Ma cosa aggiungiamo al foglio di stile?

Inizieremo con il contenitore principale. Seleziona l'oggetto contenitore in Illustrator e noterai, nel file Livelli pannello, che è stato nominato principale.

Questo è rilevante. In una situazione di squadra è consigliabile avere una comprensione comune su come gli oggetti come questo dovrebbero essere nominati. Vedrai perché quando apriremo il pannello CSS. 

Proprietà CSS

Vai a Finestra> Proprietà CSS per rivelare un pannello con lo stesso nome. Con il nostro oggetto principale selezionato, questo conterrà tutti gli stili rilevanti che possiamo incollare direttamente nel nostro foglio di stile. Vedrai che questi stili sono stati applicati al selettore .principale, così come il nostro oggetto è stato nominato.

Vai avanti e copia ciò che vedi, quindi incollalo direttamente nel theme.css file. Per fare in modo che queste regole si applichino al nostro elemento contenitore, dovremo cambiare il selettore in quello che stiamo effettivamente utilizzando (mantenendo il .principale il selettore è un po 'rischioso poiché potremmo trovarlo usato altrove nel nostro sito generale). Modificare .principale a .inner.cover e dovresti vedere il tuo elemento contenitore trasformarsi in un bel giallo dorato, con angoli arrotondati e persino un'ombra di riquadro, tutti applicati con CSS cross-browser decente.

Dimensioni CSS

Noterai che le nostre regole CSS qui non includono alcuna larghezza o altezza. Questa è una buona cosa; Bootstrap si sta prendendo cura di tutto questo, quindi stiamo solo cercando stili estetici. Cambiando il Opzioni di esportazione delle proprietà CSS potremmo avere le nostre dimensioni incluse qui, ma le lasceremo fuori.

Tuttavia, il nostro contenitore è un po 'largo, a causa degli stili già applicati, quindi sovrascriviamo quelle dimensioni con la seguente query multimediale:

@media (larghezza minima: 992 px) .masthead, .mastfoot, .cover-container width: 400px; 

Questo sovrascrive le regole trovate in cover.css, dandoci una larghezza di 400 px su schermi di almeno 992 px di larghezza. 400px non è esattamente fedele al design, ma personalmente trovo le dimensioni reali e le dimensioni dei caratteri un po 'piccole, quindi sto facendo il veto!

Mentre siamo qui, voglio solo modificare gli stili in modo da applicare gli angoli arrotondati all'interno di questa query multimediale. Rimuovili dalle regole che hai incollato da Illustrator e applicali in questo modo:

@media (larghezza minima: 992 px) .masthead, .mastfoot, .cover-container width: 400px;  .inner.cover border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Ora dovremmo avere qualcosa di simile su schermi di grandi dimensioni:

... e questo su schermi piccoli:

Misure specifiche

Non siamo esattamente fedeli alle dimensioni precise utilizzate nel documento di Illustrator, ma non è un problema; il web è fluido. Tuttavia, il nostro contenitore potrebbe utilizzare alcune imbottiture sul fondo, quindi scopriamo esattamente quanto il nostro design di Illustrator dice che dovremmo usare.

Seleziona il Misura lo strumento in Illustrator (lo troverai con il Strumento contagocce) e trascinare il cursore per misurare una data area del disegno. Possiamo vedere che il padding che cerchiamo è 25px, quindi applichiamo questo manualmente ai nostri stili.

.inner.cover padding-bottom: 25px;

Meglio

Gli altri stili

Abbiamo un certo numero di stili e oggetti da trattare qui e, se ogni cosa fosse chiamata esattamente come dovrebbe essere, potremmo (in linea di principio) produrre un'enorme pila di CSS da Illustrator per gestire tutto questo. Tuttavia, ci sono alcune discrepanze con la denominazione dell'oggetto qui (evitando che ciò richiederebbe una stretta comunicazione tra designer e sviluppatore) e potremmo finire con qualche codice estraneo che non abbiamo bisogno.

Invece, lavora pazientemente da un elemento all'altro, selezionando ciascun oggetto e emettendo il relativo CSS. Inizia con la tipografia e vediamo solo quanto bene fa Illustrator.

Caratteri

Una delle prime cose che noterai è che il CSS per qualsiasi tipo di oggetto include: font-family: Open Sans;

Open Sans non è un font di sistema standard e non verrà visualizzato in nessun browser in cui l'utente non lo ha installato. Dovrai quindi andare su Google Fonts e prendere il link CSS per trascinarlo nella pagina attraverso la magia dei webfonts.

pulsanti

Tutto è andato abbastanza bene finora, ma poi abbiamo premuto i pulsanti. Il pulsante di ricerca in realtà non è male, ma i tre pulsanti sottostanti non hanno ricevuto nomi di oggetti, quindi vediamo quanto segue nella nostra finestra delle proprietà CSS:

Nessun codice CSS è stato generato. Per creare CSS per oggetti senza nome, dare un nome all'oggetto nel pannello dei livelli o abilitare l'opzione 'Genera CSS per oggetti senza nome' nella finestra di dialogo Opzioni di esportazione CSS.

Vai avanti e apri le opzioni come discusso prima, quindi assicurati di aver controllato Genera CSS per oggetti senza nome. L'alternativa sarebbe dare un nome ai nostri pulsanti, ma entrambe le opzioni vanno bene qui.

Ora, con tutti i nostri pulsanti selezionati, possiamo colpire Genera CSS e abbiamo gli stili in uscita per noi. Sfortunatamente, Illustrator produrrà gli stili completi per ogni singolo oggetto, anche se tutti condividono le stesse regole. Questo sembra essere il caso anche se usiamo il comune Stili grafici, Stili di carattere, Stili di paragrafo, o anche dare a tutti gli oggetti lo stesso nome! Ci sono margini di miglioramento, ma possiamo almeno prendere gli stili comuni e applicarli manualmente a più oggetti.

Ho copiato gli stili per il pulsante di ricerca, quindi l'ho applicato a .btn, .btn: hover per assicurarsi che tutti gli stili Bootstrap siano stati opportunamente sovrascritti. Ho anche aggiunto un confine: nessuno; per sbarazzarsi del bordo blu di Bootstrap. Vediamo cosa ci ottiene!

Non male, ma non perfetto

Questo non è male, ma è un modo giusto e perfetto. Le ombre di testo non sono state rispettate (mancano di trasparenza), i gradienti sui pulsanti non sono corretti e mancano completamente le loro ombre.

Perché?

In breve, l'esportazione di Illustrator di Illustrator non è ancora pronta per questo tipo di struttura complessa (per essere onesti, è molto complesso). Diamo un'occhiata al pulsante di ricerca che intendiamo ricreare:

È amorevole. Ma guarda quanti riempimenti, sfumature e ombre sono andati a costruire:

Ahia. Non sorprende affatto che Illustrator abbia detto No. Anche il raggio di confine è stato escluso dall'equazione perché le cose sono diventate troppo complesse.

Non stai scherzando ...

Invece, applicherò solo alcuni semplici stili e scavalcherò il complesso CSS (questo tutorial riguarda ciò che Illustrator può fare per noi dopo tutto ...) La modifica .btn gli stili assomigliano a questo:

.btn, .btn: hover font-family: Apri Sans; font-weight: bold; font-size: 14px; colore: # AC4400; text-shadow: 0px 1px 0px rgba (255, 255, 255, 0,3); sfondo: # FDDA2F; border-color: # FDDA2F; border-radius: 4px; 

In termini di efficienza CSS, tutto lascia molto a desiderare, ma stiamo lavorando con ciò che Illustrator ci offre a scopo dimostrativo. Sarebbe saggio tornare indietro e pulire il CSS, magari usando anche uno strumento come CSSLint.

Icone

Ciò che abbiamo generato finora non è male, quindi lo lasceremo da solo per ora. Rivolgiamo la nostra attenzione alle icone dei pulsanti. Ci sono alcuni approcci che potremmo usare qui:

Esportare bitmap

Selezionando ciascun grafico, puoi generare CSS in modo molto simile a quello che abbiamo prima. Illustrator sceglierà di esportare percorsi complessi come file PNG, quindi utilizzerà quelle immagini come sfondi per i tuoi elementi.

Ti verrà assegnato un gruppo di risorse da utilizzare:

Ma, ancora una volta, non è perfetto, e ometterà certi aspetti del design, emettendo stili discutibili in altri casi, quindi questo approccio richiederà un certo raffinamento da parte vostra. Questo approccio, inoltre, non tiene conto dei display Retina, potenziandoci potenzialmente grafici inferiori agli standard su alcune schermate. Ad ogni modo, il CSS generato per questi elementi grafici ha il seguente aspetto:

.immagine background-image: url (image.png); background-repeat: no-repeat; 

SVG

La mia preferenza, come web designer, sarebbe quella di andare per SVG in questo caso, qualcosa su cui Illustrator sta diventando molto bravo.

Per prima cosa, seleziona un'icona, quindi copiala negli appunti nel solito modo (comando + C). I dati SVG per quell'oggetto sono ora disponibili per l'inserimento in un editor di testo (sorprendente). Apri un nuovo file nel tuo progetto web, chiamalo "icon-contact.svg" e incolla il contenuto degli appunti in esso.

Ora puoi aggiungere questo SVG come immagine direttamente nel markup del tuo index.html:

Ciao…

Esistono molti modi per implementare SVG in una pagina Web; tramite CSS, convertendo prima l'XML in base64, incollandolo nel tuo markup in linea, la scelta è tua (dai un'occhiata ai file SVG: Da Illustrator al Web per maggiori informazioni). Il nostro approccio funziona comunque bene, almeno nei browser moderni, quindi continueremo a farlo.

Ripeti il ​​processo per le altre icone e ...

Sono stati fatti!

Con un po 'più di tweaking (ho aggiunto un po' di padding all'elemento form) dovresti avere qualcosa che assomiglia a questo:

Non male! Non riflette al 100% la grafica di Illustrator, ma considerando che ci siamo basati principalmente sull'output degli stili di Illustrator, penso che possiamo essere piuttosto soddisfatti. Eventuali ulteriori miglioramenti dovranno essere fatti a mano, Illustrator ha fatto tutto il possibile per noi a questo punto.

Hai qualche consiglio che potrebbe aiutare Illustrator a migliorare direttamente questo layout web? Fateci sapere nei commenti!