Share
Cosa starai creandoDurante questo tutorial ti guiderò attraverso il processo di creazione di uno stile sofisticato di elementi web in Photoshop, ma senza utilizzare un singolo file di immagine nel tuo sito web finito. Quando avremo finito, avrai un layout di una singola pagina con tutti gli elementi dell'interfaccia utente che vedi nell'immagine di anteprima sopra, usando nient'altro che le icone CSS3, Base64 e font.
Creando un design "senza immagine" puoi mantenere il tempo di caricamento e il conteggio delle richieste HTTP al minimo assoluto, pur ottenendo il massimo livello possibile di flessibilità negli elementi dell'interfaccia utente. Gli elementi dell'interfaccia utente di codice puro possono essere modificati rapidamente e facilmente tramite CSS in modo che le immagini statiche non possano essere modificate manualmente e riesportate.
Per fare in modo che tutto ciò accada, utilizzeremo quattro risorse chiave:
* Se preferisci, puoi utilizzare un diverso preprocessore.
Mettendo insieme questi elementi è possibile generare un design di codice puro che è praticamente identico al PSD originale:
Il PSD
Il risultato del codice puro (visualizzato in Firefox)Questo tutorial sarà suddiviso in due parti:
Durante questa prima parte mostreremo i tipi di tecniche che puoi usare in Photoshop quando crei un design amichevole CSS3 e Base64. Anche se oggi possiamo ottenere molto con il codice puro, non possiamo ancora tradurre assolutamente tutto ciò che potresti trovare in Photoshop. Quindi è importante avere in mente i "dos" e "non fare" quando si parte.
Iniziamo con una breve panoramica di CSSHat e PNGHat, i plugin di Photoshop che utilizzeremo per generare il nostro codice CSS3 e Base64.
Con il plugin CSSHat installato puoi fare clic su qualsiasi livello nel documento di Photoshop e la finestra CSSHat ti mostrerà immediatamente un codice pronto per la produzione.
CSSHat interpreta principalmente dalle tue impostazioni di stile dei livelli, quindi dovresti mirare ad aggiungere i tuoi gradienti e i tuoi bordi tramite gli stili di livello piuttosto che i metodi alternativi di Photoshop.
Accentsconagua
px (opzionale)famiglia di font, dimensione del font, font-weight (grassetto / normale), stile del font PNGHat può fare molte cose. Scopri come esportare le risorse di Photoshop per il Web con PNGHat per un rundown completo sul plug-in.
Nel caso di questo tutorial lo useremo per generare il codice Base64 che formerà l'immagine di sfondo del design. Vedrai come funziona in pratica a breve.
Quando un'immagine viene convertita in Base64 si ottiene una stringa di testo che può quindi essere incorporata direttamente in CSS. Maggiore è il numero di dati nell'immagine, più lunga è la stringa, quindi per questa ragione Base64 è più adatto per le semplici immagini di affiancamento con pochi colori.
Per far rotolare la palla avrai bisogno di alcune cose.
Per cominciare, dovresti avere i plugin CSSHat e PNGHat installati.
Se non riesci ad acquistare una copia di CSSHat, puoi comunque seguire e utilizzare la funzionalità "Copia CSS" di Photoshop, che può essere selezionata dal menu di scelta rapida facendo clic con il pulsante destro del mouse su qualsiasi livello.
Tuttavia, in questo caso, dovrai rimuovere manualmente il codice predefinito indesiderato per cose come posizionamento assoluto, z-index, dimensioni e nomi di classi. Inoltre, non gestisce la generazione di più ombre e sfumature e CSSHat e non può produrre codice LESS, Sass / SCSS o Stylus..
Se non riesci ad acquistare PNGHat, puoi esportare manualmente la tua immagine di sfondo e poi inviarla tramite un convertitore online come: http://webcodertools.com/imagetobase64converter
Raccomando anche un terzo plugin di Source chiamato Subtle Patterns. Questo plugin aggiunto aggiunge una libreria di centinaia di pattern a Photoshop, ognuno dei quali può essere applicato immediatamente come sovrapposizione di pattern a qualsiasi livello.
In alternativa all'utilizzo del plug-in Subtle Patterns, puoi semplicemente sfogliare i pattern e scaricarli gratuitamente.
Nota: So cosa potresti chiederti - questo è un sacco di cose da parte di Source, è un post sponsorizzato? No. La verità è che ho acquistato l'intera gamma di prodotti di Source molto prima che iniziassi a scrivere per Tuts + e adoro ognuno di loro a causa del numero di ore che hanno aggiunto alla mia giornata. Raccomando questi plugin perché sono rimasto molto impressionato dalla mia esperienza dell'intera suite.
Inseriremo alcune icone nel tuo design tramite Font Awesome, quindi dovrai andare a scaricare il font e installarlo sul tuo sistema.
Il font di scelta per il nostro testo normale sarà Roboto, quindi dovrai installarlo anche tu. Puoi prenderlo da Google Webfonts.
Crea un nuovo documento Photoshop con una dimensione di 1600px X 2180px. Fai doppio clic sul livello "Sfondo" predefinito per sbloccarlo, quindi salva il PSD.
Nel Modelli sottili finestra, (o sito Web), cerca tessuto di raso. Quando lo trovi, con il tuo sfondo livello selezionato, fare clic sulla tessera del modello per applicarlo automaticamente come sovrapposizione di motivi.
Ora dovresti vedere alcune sottili linee verticali in scala di grigi sulla tela. Abbiamo selezionato questo modello come una buona soluzione per la conversione in Base64 in quanto utilizza pochissimi colori e ha una dimensione di solo 24px per 12px, il che significa che produrrà una stringa di codice relativamente piccola.
Per aiutare a inquadrare la pagina, crea un rettangolo nella parte superiore della tela, eseguendo l'intera larghezza e 8px in altezza. Dagli queste proprietà:
Colore di riempimento: #dddddd
Opacità: 50%
Stile di livello> Ombra interna:
Normale # c8c8c8 100% -90 2 4 Stile di livello> Ombra esterna:
Normale #ffffff 100% 90 2 1 Il tuo "top trim" dovrebbe assomigliare a questo:
Attraverso la creazione di questo menu, vedremo alcuni degli effetti che possono essere creati con sfumature, ombre e tratti. Stiamo andando per un menu rialzato dall'aspetto pulito che si trova in un involucro inserto.
Per cominciare creeremo il wrapper interno che manterrà il menu. Crea un rettangolo angolare allineato al centro sulla tua tela 1200px largo di 61px alta. Imposta le seguenti proprietà:
Colore di riempimento: # f9f9f9 - si noti che anche se ci sarà un gradiente su questo rettangolo, vogliamo comunque impostare un colore di riempimento come fallback.
Proprietà> Proprietà forma dinamica> Raggio dell'angolo: 12px
Stile di livello> Ombra interna:
Normale # 000000 15% 90 1 10 Stile livello> Sovrapposizione sfumatura:
#ffffff # f3f3f3 Lineare Stile di livello> Ombra esterna:
Normale #ffffff 100% 90 1 2 Il tuo wrapper del menu dovrebbe ora apparire come:
Crea un secondo rettangolo con angoli arrotondati sopra il wrapper del menu, a 1190px largo di 50px alto, con il suo angolo in alto a sinistra 5px più a destra e in basso rispetto all'angolo in alto a sinistra del wrapper del menu. Aggiungi queste proprietà:
Colore di riempimento: #ffffff
Proprietà> Proprietà forma dinamica> Raggio dell'angolo: 10px
Stile del livello> Corsa:
1 al di fuori # e4e4e4 Stile livello> Sovrapposizione sfumatura:
# e5e5e5 #ffffff Lineare Stile di livello> Ombra esterna:
Normale # c1c1c1 100% 90 3 4 Ora dovresti avere:
Crea un altro rettangolo, questa volta a 130px largo di 51px alto, direttamente sopra la barra del "menu sfondo". Dagli questo overlay gradiente:
Stile livello> Sovrapposizione sfumatura:
#efefef # e4e4e4 #fcfcfc Lineare Ora aggiungi un testo segnaposto: digita la parola "Pagina" e posizionala al centro delle voci del menu con le seguenti impostazioni:
Carattere> Carattere: Roboto, normale
Carattere> Dimensione carattere: 18px
Carattere> Colore: # 5c5c5c
Stile di livello> Ombra esterna:
Normale #ffffff 100% 90 1 0 La tua voce di menu dovrebbe assomigliare a questa:
Crea un duplicato del rettangolo e del testo della tua voce di menu, quindi spostalo verso destra in modo che si trovi proprio accanto all'originale. Modifica il testo per leggere "Corrente".
Imposta le proprietà dello stile del livello del rettangolo su:
Stile del livello> Corsa:
1 al di fuori # e62d4ee4e4e4 Stile di livello> Ombra interna:
Normale # faabb9 60% 90 3 5 Stile livello> Sovrapposizione sfumatura:
# ef3d5d # dc2345 # fc6c86 Lineare Stile di livello> Ombra esterna:
Normale # cc2241 100% 90 1 0 Quindi cambia il colore del tuo testo e fai cadere le impostazioni ombra su:
Carattere> Colore: #ffffff
Stile di livello> Ombra esterna:
Normale # b50020 100% 90 1 0 Una volta terminato con quanto sopra, crea altri duplicati della "voce di menu" originale e posizionali a destra della "voce di menu corrente". Facciamo questo per vedere come appaiono gli stili delle voci di menu quando sono allineati l'uno contro l'altro, per garantire un'adeguata separazione visiva da un elemento all'altro.
Sfortunatamente, Photoshop non ha modo di impostare qualcosa come "border-left", quindi non possiamo impostare i bordi sinistro o destro direttamente sui nostri rettangoli delle voci di menu. Tuttavia dobbiamo ancora simulare l'effetto in modo da poter creare una separazione tra ogni oggetto. Usa lo strumento linea di Photoshop per disegnarne alcuni 1px ampie linee verticali tra le voci del menu e impostare il colore di riempimento su #dddddd
Con tutti questi elementi sul posto dovresti avere:
Se si stava utilizzando questo layout per un cliente, questa è l'area in cui aggiungere il proprio hook di interesse principale o call to action. Ai fini di questo tutorial, aggiungi le seguenti quattro righe, tutte centrate sulla pagina:
Assegna alla prima e alla terza riga le seguenti impostazioni:
Carattere> Carattere: Roboto, sottile
Carattere> Dimensione carattere: 48px
Carattere> Colore: # 6b6b6b
Quindi dai alla seconda e alla quarta riga queste impostazioni:
Carattere> Carattere: Roboto, grassetto
Carattere> Dimensione carattere: 80px
Carattere> Colore: # ef3d5d
Il tuo testo dovrebbe ora assomigliare a questo:
Sotto il testo principale, crea un rettangolo angolare arrotondato 1200px largo di 665px alta. Dagli queste impostazioni:
Colore di riempimento: #ffffff
Proprietà> Proprietà forma dinamica> Raggio dell'angolo: 15px
Stile del livello> Corsa:
1 dentro # d8d8d8 Stile di livello> Ombra esterna:
Normale # c1c1c1 27% 90 3 4 Poi, 60px sotto la parte superiore dello sfondo del pannello, crea un altro rettangolo angolare arrotondato. Dovrebbe essere 1230px largo e 70px alta. Centralo sulla tela in modo che sporga 15px entrambi i lati dello sfondo del pannello. Dagli queste proprietà:
Colore di riempimento: # ef3d5d
Proprietà> Proprietà forma dinamica> Raggio dell'angolo: 10px
Stile di livello> Ombra interna:
Normale # de2a4a 60% 90 0 5 Stile livello> Sovrapposizione sfumatura:
# ef2c4f # dc2345 # fc6c86 Lineare Stile di livello> Ombra esterna:
Normale # cc2241 100% 90 3 0 Abbiamo già impostato un'ombreggiatura sul rettangolo appena creato, che gli conferirà un effetto 3D sottile. Ma vogliamo anche avere una seconda ombra che assomigli ad un'effettiva ombra proiettata da un downlight. Poiché abbiamo già "esaurito" la proprietà drop shadow del rettangolo esistente, dovremo creare un secondo rettangolo per applicare una seconda ombra a.
Duplica il rettangolo di sfondo del pannello e trascinalo sotto l'originale nel pannello dei livelli, quindi deseleziona lo stile di livello esistente. Chiamalo "panelheadershadow" in modo da poter distinguere facilmente i due livelli. Dagli queste impostazioni di ombreggiatura:
Stile di livello> Ombra esterna:
Normale # 000000 27% 90 5 3 Direttamente al centro dello sfondo dell'intestazione del pannello scrivi "IN QUESTO TUTORIAL:" e dai al testo queste impostazioni:
Carattere> Carattere: Roboto, normale
Carattere> Dimensione carattere: 24px
Carattere> Colore: #ffffff
Stile di livello> Ombra esterna:
Normale # b50020 100% 90 1 0 Infine, aggiungi queste righe di testo:
Imposta il primo lotto di testo su:
Carattere> Carattere: Roboto, sottile
Carattere> Dimensione carattere: 36px
Carattere> Colore: # 6b6b6b
E il secondo lotto di testo per:
Carattere> Carattere: Roboto, nero
Carattere> Dimensione carattere: 48px
Carattere> Colore: # 6b6b6b
Quindi evidenzia ciascuno dei simboli "+" e imposta il loro colore su: # ef3d5d
Ora dovresti avere un pannello informativo simile a questo:
È qui che inizieremo a utilizzare Font Awesome. Inseriremo l'icona "fa-down-arrow" e useremo quella invece di un'immagine.
Il modo più semplice per farlo è quello di ottenere la "lettera" appropriata nella cache andando al cheatheet Font Awesome. Individua l'icona "fa-down-arrow", quindi evidenzia la piccola anteprima dell'immagine e premi CTRL / CMD + C
Evidenzia e copia la piccola freccia verso il bassoTorna alla tua tela, posiziona un cursore con lo strumento testo e incolla il carattere che hai appena copiato. All'inizio vedrai solo un piccolo rettangolo con una croce, quindi modifica le impostazioni in questo modo:
Carattere> Carattere: FontAwesome
Carattere> Dimensione carattere: 200px
Carattere> Colore: # 6b6b6b
Assicurati che la freccia sia centrata sulla tela e imposta l'opacità del livello su 30%. Ora dovresti avere questa bella freccia:
Crea un nuovo rettangolo angolare arrotondato, 420 pixel largo di 105px alta. Il pulsante utilizzerà le stesse proprietà di stile di livello dello "Sfondo di intestazione del pannello" in modo da poter semplicemente copiare su quegli stili di livello. Fai clic con il pulsante destro del mouse sul livello dello sfondo dell'intestazione del pannello e seleziona "Copia stile livello", quindi fai clic con il pulsante destro del mouse sul nuovo livello pulsante e seleziona "Incolla stile livello"..
Come abbiamo fatto con lo sfondo dell'intestazione del pannello, vogliamo creare un secondo rettangolo per questo pulsante a cui può essere applicata una seconda ombreggiatura. Duplica il tuo livello pulsante e trascinalo sotto l'originale nella palette livelli, quindi rinominalo "ombreggiatura pulsante"". Copia lo stile del livello dal layer "panelheadershadow" creato in precedenza e incollalo sul tuo nuovo "ombreggiatura del pulsante"" strato.
Aggiungeremo un piccolo cerchio al pulsante che assomiglierà a una piccola depressione e quindi imposteremo una freccia bianca con il puntatore a destra sopra di esso.
Crea un cerchio (ellisse) sopra il pulsante a 47px di 47px. Posizionalo in modo che sia uguale alla distanza dai bordi superiore, sinistro e inferiore dello sfondo del pulsante, quindi assegnagli questo sovrapposizione gradiente:
Stile livello> Sovrapposizione sfumatura:
# f04f6c # e32d4f Lineare Per creare la freccia giusta punteremo di nuovo a FontAwesome. Tornate al foglio di calcolo e questa volta copiate il file Fa-caret-destra icona. Sulla tua tela, usa lo strumento testo per posizionare un cursore sul cerchio appena creato e incollalo nell'icona / carattere Font Awesome. Dagli queste proprietà:
Carattere> Carattere: FontAwesome
Carattere> Dimensione carattere: 36px
Carattere> Colore: #ffffff
Posiziona la freccia bianca appena creata al centro del cerchio che si trova sopra.
Sopra la parte superiore del pulsante, a destra del cerchio e della freccia, digita "Avvia il tutorial" e dai al testo queste impostazioni:
Carattere> Carattere: Roboto, normale
Carattere> Dimensione carattere: 36px
Carattere> Colore: #ffffff
Questo testo utilizza la stessa ombra esterna del "Testo dell'intestazione del pannello", quindi puoi copiare lo stile da quel testo e incollarlo su questo livello.
Ora dovresti avere un pulsante che assomiglia a questo:
Ora aggiungeremo l'elemento finale del disegno, alcuni ritagli nella parte inferiore per completare l'inquadratura dello spazio. Quando questo elemento è codificato, utilizzeremo le impostazioni di bordo superiore e inferiore separate, ma come Photoshop non può facilitarla, utilizzeremo nuovamente gli strumenti di forma per ottenere i colori giusti.
Sotto il pulsante di avvio, crea un rettangolo con un colore di riempimento di #dddddd questo è 5px alto e allunga tutta la larghezza della pagina. Duplica il nuovo rettangolo e spostalo verso il basso 10px quindi c'è un 5px spazio tra i due rettangoli.
Al centro della tela e sopra le due linee / rettangoli grigi, disegna un cerchio che è 40px di 40px e dargli queste proprietà:
Colore di riempimento: # f2f2f2
Stile del livello> Corsa:
5 dentro #dddddd Stile livello> Sovrapposizione sfumatura:
#dddddd # f2f2f2 Radiale Presta particolare attenzione alle impostazioni di sovrapposizione del gradiente poiché sono diverse da quelle che abbiamo usato in precedenza. Le interruzioni di colore sono posizionate al 40% e al 45% anziché a 0% e 100%, e stiamo usando un gradiente radiale anziché lineare. Insieme al bordo / tratto, questo dà l'effetto di un piccolo cerchio grigio circondato da uno più grande.
Il tuo rivestimento inferiore dovrebbe assomigliare a questo:
Ora dovresti avere un design PSD completo, pronto al 100% per la traduzione in puro codice CSS3 e Base64:
Nella parte seguente di questo tutorial:
Ci vediamo allora!
