Share
Al momento le immagini sfocate sullo sfondo rappresentano una tendenza calda nel webdesign e possono aggiungere profondità e interesse a qualsiasi progetto di sito web. In questo tutorial, ti guiderò attraverso tutti i passaggi per creare una sorprendente unità di eroi visivi (leggi: il tuo messaggio chiave di marketing) perfetta per una presentazione o una regione banner del tuo prossimo sito web.
In questo tutorial ci concentreremo sull'utilizzo di tecniche di photoshop non distruttive, modificabili e scalabili ovunque possiamo includere filtri intelligenti, maschere e forme vettoriali. Anche se può essere un po 'più di lavoro, prendersi il tempo necessario per garantire che il prodotto finale possa essere completamente modificato per rispondere ai cambiamenti futuri vale la pena.
Pronto a saltare dentro? Accendi Photoshop e iniziamo.
Useremo un numero di risorse che non sono incluse nei file sorgente.
Nota: Photoshop CS6 è stato utilizzato per creare questo tutorial, tuttavia non è necessario per ottenere il risultato finale, è possibile utilizzare le versioni precedenti senza alcun problema.
Sono anche su un sistema operativo Windows, quindi rimarrò con Ctrl e Alt per descrivere i tasti di scelta rapida. Su un Mac, Ctrl → Comando e Alt → Opzione.
Iniziamo impostando un nuovo documento e impostando la nostra luce globale per tutti gli effetti di livello.
Imposta la luce globale su un angolo di 90 ° e un'altitudine di 45 ° (Livello → Stile livello → Luce globale).
Nota: Nella progettazione dell'interfaccia utente, scoprirai che la luce globale è spesso impostata a 90 °, quindi cambiare le impostazioni globali prima di iniziare con un nuovo progetto dell'interfaccia utente è una buona abitudine!
Crea un nuovo documento con dimensioni di 960 x x 568 px (un rapporto di 16: 9) e Contenuti di sfondo trasparenti.
Successivamente, importeremo la nostra immagine di sfondo e la ridimensioneremo per adattarla al nuovo documento.
Apri l'immagine del municipio di Toronto in un nuovo documento e modifica le dimensioni dell'immagine a 960 x 720 pixel (Immagine → Dimensione dell'immagine).
Seleziona l'intera immagine (Ctrl + A), e copiarlo negli appunti (Ctrl + C). Torna al nostro nuovo documento e incolla l'immagine in un nuovo livello (Ctrl + V).
Utilizzando lo strumento sposta (V), trascina l'immagine verso l'alto per allineare il bordo inferiore dell'immagine alla parte inferiore del documento.
Dai un nome a questo livello "municipio"
Duplica il livello 'municipio' facendo clic con il pulsante destro sul livello nel pannello dei livelli e selezionando 'Duplicate Layer'. Rinomina questo nuovo livello "sfocatura del municipio"
Successivamente, aggiungeremo un filtro intelligente al livello. Per fare ciò, dobbiamo convertire il livello "sfocatura del municipio" in un oggetto intelligente.
Fai clic con il pulsante destro del mouse sul livello "sfocatura del municipio" e seleziona 'Converti in oggetto avanzato' dal menu.
Aggiungiamo un Gaussian Blur alla nostra immagine di sfondo per dargli quel look "attraverso la vetrina della caffetteria": (Filtro → Sfocatura → Sfocatura gaussiana). Dagli un raggio di 14,0 pixel.
Nota: Questa è la prima delle nostre tecniche non distruttive che useremo oggi. Noterai dall'immagine sopra che il Gaussian Blur è stato aggiunto come 'Smart Filter' e non è applicato all'immagine stessa. Ciò significa che possiamo modificare le impostazioni, aggiungere ulteriori filtri intelligenti o rimuovere completamente l'effetto, il tutto senza danneggiare l'immagine originale.
Un'altra cosa da notare è che se si attiva la visibilità del livello "municipio", noterai una certa trasparenza attraverso il bordo dell'immagine a causa dell'effetto sfocato sul livello "sfocatura del municipio". Lasciando visibile lo strato del "municipio", i bordi sono ben levigati.
Così com'è, l'immagine è un po 'buia. Illuminiamo le cose e diamo un tocco luminescente aggiungendo un nuovo livello di regolazione Curve (Livello → Nuovo livello di regolazione → Curve) e trascinando il centro verso l'alto e leggermente verso sinistra, come mostrato sopra.
Ottimo lavoro - questo è lo sfondo tutto finito. Prendiamo un momento per spostare questi livelli in un nuovo gruppo (Ctrl + G) chiamato "Sfondo" per mantenere il documento di Photoshop bello e ordinato.
Crea un nuovo livello chiamato "pannello di vetro inferiore" e utilizza lo strumento selezione (M) per creare una selezione rettangolare di 960 px di larghezza e 120 px di altezza. Riempi la selezione con il bianco (#ffffff) (Ctrl + Bkspace).
Fai doppio clic sul livello per aprire gli effetti di livello e applica le seguenti impostazioni:
In Opzioni di fusione, imposta Opacità su 27% e Opacità riempimento su 0%
Imposta un tratto interno di 1 pixel, #cecece a colori.
Imposta un'ombra interna bianca (#ffffff) con una modalità di fusione impostata su Scherma lineare (aggiungi) e un'opacità del 15%. Imposta la distanza a 1 pixel e la dimensione a 6 pixel.
Imposta una sovrapposizione lineare del gradiente di 90 ° che va da # 787878 allo 0% a #bebeb al 100%. Cambia la modalità di fusione in Luminosità e imposta l'opacità al 55%.
Il pannello di vetro sembra buono, ma dobbiamo prendere una porzione dalla parte superiore per lasciare spazio al nostro pulsante di invito all'azione. Per fare questo, useremo una maschera vettoriale - un'altra tecnica photoshop non distruttiva e modificabile.
Apri la finestra Percorsi (Finestra → Percorsi) e fare clic su 'Crea nuovo percorso' icona nella parte inferiore del pannello.
Rinominare il nuovo percorso 'pannello maschera'.
Utilizzando lo strumento forma (U) impostato su Path, crea un rettangolo di 960 x 120 px nella parte inferiore del documento, coprendo il livello "pannello di vetro inferiore".
Ora, imposta lo strumento forma su "Sottrai forma frontale" e disegna un rettangolo arrotondato di 420 px x 100 px con un raggio di 50 px.
Una volta che hai i due percorsi, selezionali entrambi con lo strumento di selezione diretta (UN) e tenendo premuto Shift mentre fai clic su ciascun percorso. Usa lo strumento di allineamento per allineare i centri orizzontali e spingere il rettangolo arrotondato in posizione in modo che i suoi punti centrali verticali incontrino il bordo superiore del rettangolo, come mostrato sopra.
Assicurati che sia il livello "pannello di vetro inferiore" sia selezionato nel pannello dei livelli e che il percorso "maschera pannello" sia selezionato nel pannello Tracciati.
Nella parte inferiore del riquadro dei percorsi, fai clic su 'Crea nuova maschera' icona una volta per creare una maschera di livello e quindi fare nuovamente clic su di essa per creare una maschera vettoriale che rimuova il nostro pannello di vetro inferiore. Il pannello dei livelli dovrebbe essere simile all'immagine sopra.
Nota: Poiché ci siamo presi del tempo per utilizzare i percorsi vettoriali per creare la nostra maschera invece di usare un'immagine raster, ci siamo dati la possibilità di modificare, modificare, aggiungere, eliminare e ridimensionare la nostra maschera in qualsiasi momento senza perdere qualità in qualsiasi fase.
Se tutto è andato per piano, il tuo work-in-progress dovrebbe apparire come l'immagine sopra.
Successivamente, creeremo uno sfondo per il nostro pulsante.
Crea un nuovo livello (Ctrl + Shift + N) e chiamalo "sfondo pulsante". Utilizzando lo strumento forma impostato su "Forma", crea un rettangolo arrotondato di 410 px x 90 px con un raggio d'angolo di 45 px. Imposta il riempimento su #ffffff.
Centra la forma al centro dello "scoop", lasciando 6px tra il fondo della forma e il bordo superiore del "pannello di vetro inferiore".
Apri il pannello degli effetti di livello per il livello "sfondo pulsante" e imposta i seguenti stili di livello:
In Opzioni di fusione, imposta Opacità al 20%, la modalità di fusione su Normale e Opacità di riempimento al 30%.
Imposta l'ombreggiatura interna su una modalità di fusione di Brucia lineare (# 000000) con un'opacità del 9%. Imposta la Distanza su 1px e la dimensione su 0px.
Imposta un'ombreggiatura con una modalità di fusione di Scherma lineare (Aggiungi), (#ffffff) e Opacità al 34%. Imposta la distanza a 1 pixel e la dimensione a 0 px.
Successivamente, inizieremo a lavorare sul pulsante stesso.
Crea un nuovo livello chiamato "pulsante principale". Disegna un rettangolo arrotondato usando lo strumento forma impostato su "Forma" 390 px di larghezza per 70 px di altezza e un raggio di 35 pixel. Imposta il riempimento su # 007dba.
Allinea i centri verticale e orizzontale dei livelli "principale pulsante" e "sfondo pulsante".
Apri il pannello degli effetti di livello e applica le seguenti impostazioni:
Imposta un tratto interno di 1 pixel con una modalità di fusione e un gradiente lineare di 90 ° che va da # 000000 allo 0% a #ffffff al 100%
Imposta un'ombra interna (#ffffff) con una modalità di fusione di Scherma lineare (Aggiungi) e un'opacità del 7%. Imposta la distanza a 2px e la dimensione a 1px.
Aggiungi un #ffffff colore Overal impostato su un metodo di miscelazione lineare (Aggiungi) e componi l'opacità fino al 13%.
Imposta la sovrapposizione sfumatura con una modalità di fusione lineare, un'opacità del 24% e una sfumatura lineare di 90 ° con # 000000 allo 0% e #ffffff al 100%.
Imposta l'Ombra esterna con una modalità di fusione multipla, un'opacità del 30%, # 000000 e imposta la distanza a 2px e la dimensione a 4px.
Nota: Potresti aver notato che non abbiamo impostato la sovrapposizione del gradiente da blu scuro a blu chiaro (il che avrebbe comportato un effetto simile). Il motivo per cui utilizzi una forma e il gradiente lineare da nero a bianco è che ora possiamo cambiare il colore del pulsante molto facilmente cambiando il suo riempimento. Provalo subito e prova a cambiare il riempimento con un altro colore.
Per aggiungere una certa consistenza al pulsante, aggiungeremo una sovrapposizione di rumore.
Crea un nuovo livello e chiamalo "rumore".
Seleziona l'intero documento (Ctrl + A) e riempire lo sfondo con #ffffff (Ctrl + Bkspace).
Assicurarsi che il primo piano sia impostato su nero e il primo piano sia impostato su bianco (D), aggiungi il 200% di rumore uniforme, assicurandosi che la casella di controllo "Monocromatico" sia spuntata (Filtro → Rumore → Aggiungi disturbo ...).
Seleziona il livello "Rumore" e impostalo come maschera di ritaglio (Livello → Crea maschera di ritaglio), che limita il rumore solo alla forma del pulsante.
Imposta il metodo di fusione della maschera di ritaglio su Moltiplica e l'opacità al 5%.
Il prossimo passo è aggiungere un piccolo highlight alla parte superiore del pulsante (sono le piccole cose che contano).
Duplica il livello 'button main' e trascinalo sopra la maschera di clipping noise. Imposta il riempimento su 0%.
Fai clic con il tasto destro del mouse sul nuovo livello "evidenziazione" e deseleziona gli stili di livello selezionando 'Cancella stile layer'.
Apri il pannello degli effetti di livello e applica le seguenti impostazioni:
Nella schermata Opzioni di fusione, seleziona la casella di controllo "Effetti maschera nascondi".
Imposta un 2px all'interno del tratto impostato a 0% di opacità.
Nota: Questo efficacemente "inserisce" il seguente stile di livello lontano dal bordo del pulsante.
Imposta un'ombra interna con una modalità di fusione lineare (Aggiungi), impostata su 18% di opacità e usando #ffffff.
Imposta la distanza a 4px e la dimensione a 4px.
Seleziona il livello "evidenziazione" e aggiungi una nuova maschera (Livello → Maschera livello → Mostra tutto).
Usando lo strumento sfumatura, traccia un gradiente lineare sul pulsante, come mostrato sopra. Imposta il gradiente usando tre stop # 000000, con il 50% di stop impostato a 0% di opacità.
Se hai seguito da vicino, il tuo pulsante dovrebbe ora assomigliare a questo:
Senza una fonte di luce, il nostro highlight sembra un po 'fuori luogo. Aggiungeremo un bell'effetto bagliore per sollevare il pulsante e lo sfondo.
Crea un nuovo livello e chiamalo "glow".
Utilizzando lo strumento sfumatura (G) impostato su radiale e bianco su trasparente, disegna una grande sfumatura bianca sul pulsante come mostrato nell'immagine sopra.
Fai una selezione di selezione premendo Ctrl + facendo clic sulla miniatura "sfondo del pulsante" nel pannello dei livelli.
Crea una maschera di livello (Livello → Maschera di livello; → Nascondi tutto).
Infine, modifica la modalità di fusione del livello "glow" su Scherma lineare e 50% di opacità.
Ora che la forma del pulsante è stata creata, aggiungiamo del testo di invito all'azione.
Usando le maniglie della forma del pulsante come punti di riferimento, trascina tre guide come mostrato per aiutarti a posizionare il testo e le forme dell'icona del pulsante.
Utilizzando lo strumento testo (T), inserisci il tuo testo nel carattere di Gothic League con una crenatura di 60, la dimensione del carattere di 14pt e un colore di # dce2e5
Imposta il testo sulla guida sinistra e allinea il testo al centro verticale della forma del pulsante.
Apri la finestra degli effetti di livello e applica i seguenti effetti:
Imposta un'ombra interna bianca (#ffffff) con un metodo di fusione di 'schiarita' e un'opacità del 100%. Imposta la distanza a 1 pixel e la dimensione a 0 px.
Imposta l'ombra esterna su un metodo di fusione di "Colore brucia", un colore di # 00022a e un'opacità del 24%.
Imposta la distanza a 2px e la dimensione a 1px.
Per completare il pulsante, è necessario aggiungere l'icona e una linea divisoria. Iniziamo con l'icona.
Seleziona lo strumento forma personalizzata (U), fai clic sul pulsante Impostazioni e seleziona "Carica forme".
Passare al file 'retro_hand.csh' fornito nelle risorse e caricarlo nell'elenco delle forme correnti.
Crea un nuovo livello e chiamalo 'icona a mano'.
Con la forma della mano selezionata e assicurando che l'impostazione "Proporzioni definite" sia applicata, disegna una forma di altezza 19px e larghezza di 34px.
Riempi la forma con il colore # dce2e5.
Apri il pannello degli effetti di livello e applica i seguenti effetti:
Imposta un'ombra interna con una modalità di fusione di Più chiaro (#ffffff) con un'opacità del 100%. Imposta la distanza a 1 pixel e la dimensione a 0 px.
Imposta l'Ombra esterna con una modalità di fusione dei colori utilizzando un colore di # 00022a e un'opacità del 24%. Imposta la distanza a 2 pixel e la dimensione a 1 pixel.
Il prossimo passo è aggiungere una linea che separa l'icona dal testo.
Disegna una linea nera 1px x 70px usando lo strumento forma (U) e posizionalo al centro dello spazio tra il testo e l'icona della mano (usa il pannello delle informazioni per aiutarti).
Applica i seguenti stili di livello:
Imposta l'opacità di riempimento della forma a 0% e spunta il segno 'La maschera di livello nasconde gli effetti' casella di controllo.
Imposta la Sovrapposizione colore su un colore di # 044b71, una modalità di fusione sovrapposta e un'opacità del 73%.
Imposta la sovrapposizione sfumatura su un gradiente lineare a 90 ° con # 000000 allo 0% e #ffffff al 100%. Imposta il metodo di fusione su Brucia lineare e riduci l'opacità al 9%,
Imposta il bagliore esterno su #ffffff, il metodo di fusione su schermo, l'opacità sul 26% e la dimensione su 1 pixel.
Successivamente, abbiamo bisogno di una maschera di livello per sfumare i bordi duri della linea.
Aggiungi una maschera di livello al livello 'separatore di linee' facendo clic sull'icona 'Maschera di livello' nella parte inferiore del pannello dei livelli.
Usando un pennello nero morbido (dimensioni ~ 55px e 0% di durezza), dipingi entrambe le estremità della linea. Stai cercando di creare un effetto sfumato sottile. Le aree in rosso nell'immagine sopra possono essere utilizzate come riferimento.
Grande! Abbiamo finito il nostro pulsante. Diamo un'occhiata a ciò che abbiamo creato finora:
Prima di passare alle fasi finali del progetto, prendiamoci un momento per assicurarci che tutti i nostri livelli siano ben definiti e raggruppati.
Il tuo pannello di livelli dovrebbe essere simile a questo:
Consiglio rapido: Vuoi un modo semplice per comprimere tutti gli effetti di livello per ogni livello? Raggruppa i livelli e sul livello più in alto, Alt + Fai clic sulla freccia accanto all'icona fx. Anche tutti gli effetti di livello sottostanti crolleranno - un ottimo modo per mantenere il pannello dei livelli gestibile!
Passiamo alla componente tipografica del progetto.
Utilizzando lo strumento testo (T), inserisci il testo come due livelli separati con le impostazioni mostrate sopra.
Disegna due guide, una a 130 px dalla parte superiore del documento e la seconda a 258 px. Posizionare il bordo superiore dei livelli di testo sulle guide.
Seleziona entrambi i livelli nel pannello Livelli (Ctrl + clic), fai una selezione di tutto il documento (Ctrl + A) e allineare i centri orizzontali (Livello → Allinea i livelli alla selezione → Centri orizzontali).
Ora apri il pannello fx per il livello "Servizi professionali" e aggiungi i seguenti effetti:
Imposta l'ombra interna con una modalità di fusione multipla, un colore di # 585858 e un'opacità del 54%.
Imposta l'angolo a 135 ° (assicurandosi che la luce globale non sia selezionata), e imposta la distanza a 1px, Choke a 100% e la dimensione a 0px.
Imposta un bagliore interno con una modalità di fusione, una opacità del 59% e un colore di #ffffff. Imposta il Choke al 100% e la dimensione a 1px.
Imposta la sovrapposizione sfumatura con una modalità di fusione lineare, un'opacità del 18% e un angolo di 90 °. Il gradiente stesso è nero → nero trasparente.
Imposta un'ombra esterna con una modalità di fusione lineare, un colore di # 000000 e un'opacità del 24%. Imposta la Distanza su 2px, lo Spread sull'8% e la Dimensione su 3px.
Nel pannello dei livelli, passa con il mouse sopra l'icona fx del livello "servizi professionali", tieni premuto Alt + clic e trascina l'icona sul livello 'prezzi eccezionali' per copiare lo stile del livello.
Ora siamo a casa! Completiamo l'elemento tipografico del progetto.
Crea un nuovo livello e aggiungi la parola "At" con lo strumento testo. Nel pannello Carattere, imposta il carattere su AI dello script saggezza, la dimensione del carattere su 12pt e il colore sul bianco.
Seleziona tutti e tre i livelli di testo nel pannello del livello (Ctrl + clic), passare allo strumento Sposta (V), e utilizzare le opzioni di allineamento nella barra delle proprietà per centrare i livelli (Allinea gli strati orizzontali) e quindi aggiungere una quantità pari di spazio tra le tre righe di testo (Distribuisci centri verticali).
Apri il pannello degli effetti di livello e applica i seguenti effetti:
Cambia l'opacità di riempimento nel pannello Opzioni di fusione al 42%.
Aggiungi un'ombra interna bianca (#ffffff) con una modalità di fusione impostata su Schermo e un'opacità del 22%. Imposta la Distanza su 1 pixel e la Dimensione su 0 px.
Aggiungi un Sovrapposizione sfumatura lineare a 90 ° (#ffffff → #dedede) con un metodo di fusione impostato su Scherma lineare (Aggiungi). Riduci l'opacità al 16%.
Aggiungi un'ombreggiatura nera per impostare la Brucia lineare e un'opacità dell'8%. Imposta la Distanza su 1 pixel e la Dimensione su 0 px.
Ora aggiungiamo alcune forme decorative alla sezione di testo del progetto per legare insieme tutti gli elementi.
Trascina quattro nuove guide dal righello (se non riesci a vedere il righello, seleziona Visualizza → Righelli) e allinearli ai bordi del testo, come mostrato sopra.
Questi ci aiuteranno ad allineare le nostre barre nei seguenti passaggi.
Crea un nuovo livello chiamato "barre a sinistra".
Allineato al centro alla barra trasversale di "A" nel livello di testo "At", disegna un rettangolo arrotondato di 275 px di larghezza per 4 px di altezza con un raggio di 4 pixel. Imposta il riempimento su bianco (#ffffff).
Garantire che l'impostazione dei componenti della forma sia impostata su 'Combina forme', disegna altre due forme identiche e posizionane una sopra e una sotto il primo rettangolo arrotondato come mostrato sopra.
Spingi le forme in posizione usando il tasto freccia per inserire uno spazio di 2 pixel tra ciascuna delle forme. Usa lo strumento zoom (Z) e la griglia dei pixel (Visualizza → Mostra → Pixel Grid) per aiutarti qui.
Assicurati che il gruppo di forme sia posizionato a 10px a sinistra della guida sul bordo sinistro del livello "A", come mostrato sopra.
Zoom avanti vicino al bordo sinistro del nostro gruppo di forme (Z). Utilizzando lo strumento Selezione diretta (UN), seleziona le tre maniglie di estremità del rettangolo centrale e, tenendo premuto Maiusc, premi due volte il tasto freccia sinistra per ridurre la larghezza della forma di 20px (MAIUSC + Freccia la chiave sposta qualsiasi elemento con incrementi di 10px).
Ripeti questo processo per il rettangolo in basso, questa volta riducendo la larghezza della forma di 30px.
Mancia: Il modo più semplice per selezionare le maniglie consiste nel trascinare un riquadro attorno alla fine della forma con lo strumento di selezione diretta, come mostrato nell'immagine sopra.
Apri il pannello degli effetti di livello per la forma delle "barre di sinistra" e applica le seguenti impostazioni:
Nel pannello Opzioni di fusione, imposta Opacità di riempimento su 20%.
Imposta un'ombra interna con un colore bianco (#ffffff), una modalità di fusione dello schermo e un'opacità del 22%. Imposta la Distanza su 1 pixel e la Dimensione su 0 px.
Aggiungi un gradiente lineare a 0 ° impostato su Scherma lineare (Aggiungi) e un'opacità del 16%. Imposta il gradiente con i valori #ffffff allo 0% e #dedede al 100%.
Aggiungi un'ombra esterna con una distanza di 1 pixel, un colore di # 000000 e una modalità di fusione lineare. Imposta l'opacità al 9%.
Duplica il livello 'barre di sinistra' (Tasto destro → Duplica livello ...) e nominare il nuovo livello "barre a destra".
Capovolgere il livello orizzontalmente (Modifica → Trasforma → Rifletti orizzontalmente) e posizionare il livello sul lato destro del livello "At" come mostrato sopra.
Congratulazioni per aver completato tutto questo tutorial! Spegni le tue guide (Ctrl + H), ridimensiona lo zoom al 100% (Ctrl + 1) e ammira il tuo lavoro:
Prendiamo un momento per rivedere alcune delle tecniche chiave che abbiamo trattato in questo tutorial:
Grazie per essere rimasto con me fino alla fine e spero che tu abbia raccolto alcuni trucchi di photoshop e suggerimenti per il flusso di lavoro che ti aiuteranno con il tuo prossimo progetto. Se qualcuno dei passaggi ti ha lasciato grattarti la testa, ti preghiamo di lasciare un commento qui sotto - Sarò sicuro di rispondere a qualsiasi domanda tu possa avere.
Accentsconagua