Share
Non solo le pennellate ad acquerello sono diventate una tendenza popolare nel web design moderno, ma anche i livelli avanzati di trasparenza (o ciò che chiamo, traslucenza). Il nuovo design di Envato ha ricevuto molti complimenti per l'utilizzo di questo effetto, e questo tutorial ti mostrerà come creare un effetto simile, combinandolo con altri trend del web popolari.
Dai un'occhiata all'immagine che creeremo.
Prepariamo il nostro documento. Tendo a creare i miei siti con una larghezza fissa di 960 px e un'altezza variabile. Per questo tutorial, ho scelto un'altezza di 800 px per assicurarci di disporre di spazio sufficiente per tutte le sezioni di contenuti che vorremmo includere. Creare il documento originale con le dimensioni esatte desiderate per il sito rende più facile la creazione delle guide.
Successivamente, imposteremo le nostre guide. Trascina le linee guida dai righelli del documento ai quattro lati del documento.
Ora dobbiamo allocare un po 'di spazio per lo sfondo che creeremo. Vai a Immagine> Dimensioni tela e espandi il documento a 1100 pixel per 1000 pixel. Questo dovrebbe darci un sacco di spazio per riempire il nostro background unico.
Riempi il livello inferiore con il bianco (Shift + F5). Rinominare questo livello come "sfondo". Il tuo documento dovrebbe ora assomigliare all'immagine qui sotto.
Fai clic con il pulsante destro del mouse sul livello "sfondo" e scegli Opzioni di fusione. Aggiungeremo una sovrapposizione gradiente al nostro livello "sfondo". Ho scelto una sfumatura a tre colori con alcuni blu e tann, tuttavia puoi essenzialmente scegliere i colori desiderati. La bellezza dell'uso delle Opzioni di fusione per lo sfondo è che in qualsiasi momento puoi facilmente cambiare i colori e regolare il gradiente a piacere.
Il tuo documento dovrebbe ora assomigliare a questo:
Si consiglia di saltare questo passaggio, tuttavia ritengo che il gradiente nitido sia un po 'troppo lucido per questo disegno. Aggiungiamo un po 'di rumore per attenuarlo un po'.
Crea un nuovo livello. Rinominare questo livello "rumore". Quindi, riempire il livello con il bianco (Modifica> Riempi). Una volta che il livello è stato riempito di bianco, è necessario aggiungere un po 'di rumore applicando Filtro> Disturbo> Aggiungi disturbo. Imposta il valore su 400%, con distribuzione uniforme e non monocromatico. Tutti i colori del rumore ci daranno molta più profondità nel nostro background.
Imposta il livello "disturbo" su Moltiplica e imposta Opacità su 5%. Questo dovrebbe darci abbastanza granulosità per attenuare il gradiente.
Innanzitutto, devi scaricare alcuni pennelli Pennello se non li hai già. Ecco alcuni che ho usato in passato: "Brush Stroke".
Crea un nuovo livello, sopra i livelli di "sfondo" e "disturbo". Rinominare questo livello in "pennello1" (creeremo più livelli come questo). Imposta questo livello su Moltiplicare. Scegli un colore di primo piano caldo (per compensare i toni freddi) nel nostro sfondo sfumato blu. Ho scelto un marrone caldo: # 996726. Seleziona il pennello che desideri disegnare e posizionalo nella parte in alto a sinistra del documento, assicurandoti che il tratto del pennello non rientri nei limiti delle tue linee guida (vogliamo che lo sfondo si espanda all'esterno).
Regola l'opacità del livello al 50% (in modo che la granulosità sia visibile). Ripeti i due passaggi precedenti per più pennelli secondo i tuoi gusti. Il tuo sfondo dovrebbe ora assomigliare all'immagine mostrata sotto.
Congratulazioni, il tuo sfondo personalizzato e unico è completo. Dal momento che hai posizionato i pennelli casualmente, ti distinguerà dai disegni che hanno acquistato uno sfondo simile.
Per prima cosa, dobbiamo prendere lo strumento Rettangolo arrotondato e impostare il raggio su 20px. Soprattutto i livelli di sfondo (pennelli + rumore + sfumatura), trascina e disegna un rettangolo arrotondato all'interno delle linee guida originali che abbiamo impostato. Il tuo rettangolo dovrebbe essere 960px per 800px. Rinominare questo livello "contenitore" e fare clic con il pulsante destro del mouse sul livello e selezionare Rasterizza livello (effettueremo alcune modifiche a questo livello in un secondo momento, quindi dovremmo toglierlo di mezzo ora).
Per rendere opaco il livello del "contenitore", dovremo fare alcune cose:
Una volta che hai impostato tutti gli stili di livello, il tuo livello "contenitore" dovrebbe assomigliare a questo:
Per assicurarci di mantenere un riempimento coerente sul livello "contenitore" (supponendo che non vogliamo contare i nostri pixel ogni volta che posizioniamo un elemento), aggiungiamo guide a 40px all'interno della nostra guida originale.
Come hai visto nell'anteprima finale, vogliamo rendere la navigazione simile affondata o ritagliare del livello "contenitore". Per fare ciò, rimuoveremo solo parte del livello "contenitore" e lasciamo che lo Stile Layer faccia la loro magia.
Per creare la selezione per il ritaglio, creeremo una nuova forma rettangolare nello spazio che vogliamo che il ritaglio di navigazione sia. Usa un raggio di 10px qui (che è metà del raggio del livello "contenitore"), per garantire che l'angolo abbia spaziatura costante dove è arrotondato.
Se necessario, sposta la forma in alto a destra delle linee di guida del rivestimento interno. Una volta posizionato il livello, fare clic tenendo premuto il tasto Comando sul livello nella tavolozza dei livelli, in modo che sia selezionato. Scegli il livello "contenitore" e premi Elimina. Ora puoi nascondere il rettangolo arrotondato di 10 pixel per la navigazione e il tuo livello "contenitore" mostrerà ora un ritaglio come mostrato di seguito.
Nota quanto sono morbidi gli angoli arrotondati. Se avessimo appena selezionato un'area quadrata e arrotondato la selezione, gli angoli di ritaglio sarebbero sembrati molto mossi. Inoltre, non è bello come gli Style Layer vengano applicati automaticamente al layer, e tutte le smussature e le ombre che abbiamo aggiunto sembrano grandiose.
Ora abbiamo bisogno di un testo. Ho scelto Rockwell come font (è fornito in dotazione con MS Office, ma può anche essere acquistato). Disponi uniformemente i tuoi elementi di navigazione all'interno del ritaglio come mostrato.
Vogliamo dare al testo un inciso nella pietra effetto, e per fare questo, aggiungiamo un'ombra esterna al testo (potremmo anche aggiungere un'ombra interna, tuttavia rende il testo più sottile di quanto non sia in realtà). Ecco le impostazioni dell'ombra esterna che uso generalmente.
Per ottenere l'effetto desiderato, creeremo un nuovo livello appena sotto il testo aggiunto per la navigazione. Rinominare questo livello "nav attivo". Riempi questa selezione con qualsiasi colore (non importa).
Successivamente, dovremo aggiungere alcuni stili di livello al livello "nav attiva". Li ho forniti di seguito (avrete bisogno di un'ombra esterna, di un gradiente di sovrapposizione, di un tratto e di un bagliore interno).
Duplica il tuo livello "nav attiva" (Comando + J) e appiattisci tutti gli stili di livello. Rinominare questo livello "Nav attivo appiattito". Applicheremo alcune colture a questo livello e non vogliamo più gli stili di livello.
Usa il tuo strumento di selezione per eliminare il tratto e il bagliore interno dalla parte superiore e inferiore del livello "nav attivo appiattito".
Ora dobbiamo aggiungere le ombre per rendere il livello "nav attivo" come se fosse tessuto attraverso il livello "contenitore". Creeremo queste ombre utilizzando lo strumento Ellisse.
Crea un'ellisse nera larga 20 px rispetto alla larghezza del livello "Nav attivo appiattito" e alta circa 5 px. Centra l'ellisse sul bordo superiore del livello "Nav attivo appiattito". Fai clic con il pulsante destro del mouse sul livello e seleziona Rasterizza livello. Rinomina questo livello in "top shadow attivo".
Dobbiamo sfumare un po 'l'ellisse, andare su Filtro> Sfocatura> Sfocatura gaussiana e applicare con un raggio di 2 pixel. Ora che l'ellisse sembra più un'ombra, andremo avanti e cancelleremo il 50% superiore dell'ombra.
Regola l'opacità del livello "ombra attiva superiore" al 75%. L'ombra superiore è completata. Per creare l'ombreggiatura inferiore, duplica il livello (Comando + J), applica Modifica> Trasforma> Rifletti verticalmente e sposta l'ombra nella parte inferiore del "livello attivo appiattito del Nav".
Prima di arrivare al logo, concludiamo un po 'il nostro header. Per prima cosa aggiungeremo un paio di altre guide. Disegna una guida orizzontale 40 px al di sotto della parte inferiore del ritaglio di navigazione, come mostrato.
Creeremo la nostra linea di separazione, che darà l'impressione che il livello "contenitore" abbia un'incisione o sia piegato in questo punto. Per creare questo effetto, disegna una linea orizzontale di altezza 1px su un nuovo livello con la larghezza del livello "contenitore". Riempi la linea orizzontale con un verde scuro (ho scelto il mio dallo sfondo). Rinominare questo livello "linea di separazione".
Per ottenere la sensazione di incisione, duplica il livello della "linea di separazione" e riempi questo livello con il bianco. Sposta questo livello di 1 pixel verso il basso in modo che la parte superiore tocchi il livello originale di "linea di separazione".
Ora dobbiamo aggiungere il nostro logo. Non sono molto un progettista di logo, quindi ho scelto un font interessante (Gill Sans) e ho scritto un testo grande nell'angolo in alto a sinistra. Proprio come abbiamo fatto il ritaglio per la navigazione, fai una selezione del testo del logo e poi cancellalo dal livello "contenitore". Ancora una volta gli stili di livello si adatteranno alla nuova forma e si aggiorneranno ad essa.
L'asterisco è stato fatto usando la stessa identica tecnica dell'elemento di navigazione attivo, per far sembrare che si stia sporgendo dal livello "contenitore".
Ancora una volta, useremo la stessa tecnica di ritaglio che abbiamo usato per la sezione di navigazione.
Crea un rettangolo arrotondato con un raggio di 10px. Assicurati di consentire una spaziatura di 40 pixel su tutti i lati (abbiamo creato le guide in precedenza per aiutare con questo).
Comando: fai clic sul rettangolo arrotondato per selezionarlo, quindi seleziona il livello "contenitore" e premi Elimina. Puoi rimuovere il rettangolo arrotondato perché non lo useremo più.
Abbiamo quindi bisogno di creare le frecce su ciascun lato, in modo da poter avere più elementi del portfolio sulla prima pagina e alternarli in una sorta di presentazione. Per fare ciò, crea un cerchio del diametro di 40px con lo strumento Forma. Sposta il cerchio in posizione sul lato sinistro, centrandolo sul bordo del ritaglio.
Duplica il cerchio per l'altro lato e, ancora una volta, centralo sull'altro bordo del ritaglio (orizzontalmente e verticalmente).
Poiché non stiamo lavorando con le maschere vettoriali qui (e il nostro riempimento è impostato su 0% sul livello "contenitore"), dobbiamo modificarlo momentaneamente per assicurarci di poter aggiungere al livello "contenitore".
Quindi, impostiamo il riempimento del livello "contenitore" al 100%. Ora Unisci giù (Comando + E) entrambi i cerchi che abbiamo creato per le frecce nel livello "contenitore". Una volta fuso, puoi impostare il riempimento del livello "contenitore" su 0%. Ecco l'effetto desiderato:
Nota come i due cerchi sono ora diventati parte del livello "contenitore".
Successivamente dovremo aggiungere alcune frecce. Potresti facilmente crearli usando parentesi, tuttavia ho scelto di crearne uno mio.
Crea un rettangolo arrotondato con un Raggio di bordo di 3 px, Larghezza di 20 px, Altezza di 6 px; e posizionalo sopra dove vuoi la freccia. Trasforma e ruota (Comando + T) il rettangolo arrotondato di 45 gradi in senso antiorario in modo che sia inclinato. Questo è come faremo il punto alla freccia.
Duplica il rettangolo arrotondato (Comando + J) e Modifica> Trasforma> Rifletti verticale. Sposta lo strato in posizione, in modo che gli angoli a sinistra siano allineati producendo una parentesi. Nella palette dei livelli, seleziona entrambi i rettangoli arrotondati e unisci i livelli insieme (Comando + E). Rinominare il livello "freccia sinistra". Ecco come dovrebbe apparire la tua freccia:
Abbiamo bisogno di aggiungere alcuni stili di livello alla freccia per adattarla al resto del progetto come segue:
Duplica il livello "freccia sinistra" (Comando + J) e Modifica> Trasforma> Rifletti orizzontale. Rinominare questo livello "freccia destra" e spostarlo sul lato destro del ritaglio.
Un'ultima cosa che dobbiamo aggiungere per la nostra area di elementi del portfolio in evidenza è un'ombra per dargli un po 'di profondità. Aggiungi una sfumatura da trasparente a nera nella parte inferiore del ritaglio, come mostrato.
Per tagliare qualsiasi gradiente in eccesso al di fuori del ritaglio, basta Comando + Fare clic sul livello "contenitore" e premere Elimina. Inseriremo i nostri screenshot sotto questo livello per dare l'illusione della profondità.
Fai uno screenshot del tuo sito preferito (ho usato uno dei miei portfolio, ryanscherf.net). Rinomina questo livello "screenshot".
Aggiungi un tratto e un'ombra interiore al livello "screenshot" usa i tuoi stili di livello:
Duplica il livello "screenshot" e appiattisci tutti gli stili di livello (unisci il livello "copia screenshot" con un nuovo livello vuoto). Ruota il livello "copia screenshot" di 45 gradi in senso antiorario, proprio come hai fatto per le frecce nel passaggio 9.
Posiziona lo screenshot in basso a sinistra del ritaglio del portfolio, assicurandoti che la parte superiore dello screenshot sporga dal ritaglio (ne daremo una certa profondità) e facendolo sembrare nascosto dietro il livello "contenitore". Ritaglia qualsiasi eccesso di "copia dello screenshot" dal basso come mostrato.
Ora che abbiamo installato il nostro screenshot, aggiungiamo una breve descrizione a destra. Niente di troppo elegante qui, ma ancora cercando di rimanere con il nostro tema di profondità e strati.
Crea un testo con un colore quasi bianco (o blu molto chiaro / verde). Usa la stessa ombra esterna acquaforte tecnica dalla navigazione (Angolo a -60 gradi, Distanza di 1px e Dimensione di 1px).
Crea un quadrato opaco dietro il testo. Ho usato un livello tutto nero, con un'opacità del 30%. L'effetto dovrebbe essere simile a questo:
Abbiamo bisogno di alcuni punti di navigazione come le viste iPhone. Creeremo un punto attivo, che utilizzerà esattamente gli stessi stili di livello del livello "nav attivo" (si spera che non lo abbia eliminato) e un punto inattivo che utilizza gli stili di livello dal livello "freccia sinistra".
Nota: Riutilizzare gli stili di livello è importante non solo perché consente di risparmiare tempo dal dover ricreare stili simili, ma anche dal fatto che manterrà il tuo design coerente in tutto.
Crea un cerchio usando lo Strumento forma, con un diametro di 20 px (mi piacciono i miei punti di navigazione grandi, perché a volte sono troppo difficili da fare clic e navigare). Fai clic con il pulsante destro del mouse sul livello "nav attiva" e seleziona Copia stile livello. Seleziona il cerchio dalla palette dei livelli, fai clic con il pulsante destro del mouse e seleziona Incolla stile livello.
Ripeti questi passaggi per tutti i punti inattivi che desideri, assicurandoti di utilizzare lo stile di livello dal livello "freccia sinistra".
Dobbiamo far sapere ai nostri visitatori esattamente cosa stiamo mostrando qui. Creeremo un nastro usando la stessa identica tecnica utilizzata per il livello "nav attivo", che è stato descritto sopra nel passaggio 7.
L'unica differenza qui è che ho aggiunto un po 'più alta opacità per l'ombra esterna per garantire che sembra che si stia riposando molto al di sopra di tutto il resto.
Per completare questa sezione, vogliamo duplicare (Command + J) il nostro layer "separating line" che abbiamo creato nel passaggio 8 e spostarlo di 40px sotto il ritaglio degli elementi del portfolio. Questo è tutto!
Per prima cosa creeremo più guide per assicurarci di avere tre colonne uguali. Non aver paura, ma dovremo fare un po 'di matematica qui:
960px wide site - 80px di padding interno = 880px di spazio disponibile per le nostre colonne. Vogliamo anche aggiungere 40px padding tra le colonne, quindi in sostanza abbiamo 800px disponibili per le nostre 3 colonne.
800px diviso per 3 uguale a 266px per colonna (ho scelto le mie colonne come 267px, 266px, 267px da sinistra a destra per mantenere il saldo). Quindi, traccia le guide a questi intervalli, assicurandoti di tenere conto del riempimento di 40 pixel su ciascun lato della colonna centrale.
Crea un nuovo gruppo nella tavolozza del tuo livello chiamata "Ultime dal blog". Qui è dove manterremo tutti gli strati relativi a questa sezione.
Crea un testo per l'intestazione. Ancora una volta, ho usato il font Rockwell con gli stessi stili di livello per acquaforte come ho usato per la navigazione. Nel caso lo abbiate dimenticato, è descritto nel passaggio 6.
Seleziona una forma personalizzata per ancorare ciascun lato del testo. Ho scelto una forma personalizzata di Photoshop standard, ma ci sono letteralmente migliaia di forme personalizzate che puoi aggiungere alla tua libreria.
Abbiamo bisogno di aggiungere alcuni stili di livello alle forme per farle sembrare un po 'più 3D:
Il prodotto finale dovrebbe assomigliare all'immagine seguente.
Abbiamo bisogno di un testo qui sotto per i nostri post sul blog. Assicurati che il colore del tuo testo sia una tonalità chiara del blu / verde dello sfondo. Possiamo usare tante sfumature diverse di questo blu / verde come vogliamo, e sicuramente farà risaltare il nostro testo.
Per far sembrare il testo inciso ancora una volta, proveremo un po 'di spin sulla tecnica precedente. Prima di aggiungere un'ombreggiatura nera nella parte in alto a sinistra del testo, tuttavia, poiché utilizziamo un testo leggermente più leggero, aggiungeremo la nostra ombra esterna in basso a destra, usando il bianco. Puoi vedere l'effetto qui sotto:
Ho usato la forma tonda personalizzata per i proiettili e ho riutilizzato lo stile di livello dalle forme personalizzate che abbiamo aggiunto nell'intestazione di questa sezione.
Questa sezione dovrebbe essere abbastanza facile. Duplica il gruppo "Ultimi dal Blog" e rinomina il duplicato in "Aggiornamenti Twitter".
Regola il testo per essere più indicativo di un aggiornamento di Twitter (link, citazioni, timestamp, ecc.). Sposta questo gruppo sulla colonna centrale e il gioco è fatto!
Duplica il gruppo "Aggiornamenti Twitter" e rinominalo in "Newsletter". Sposta questo gruppo nella colonna più a destra.
Regola il contenuto in modo che sia più simile a un paragrafo descrittivo e rimuovi tutti i proiettili (i paragrafi introduttivi generalmente non hanno bisogno di punti elenco).
Per creare il modulo e-mail, creeremo un rettangolo arrotondato con un raggio di 10px e un'altezza di 40px. La larghezza dovrebbe essere 266px (o qualunque cosa tu abbia scelto come larghezza della colonna di destra). Rinominare questo livello in "modulo di input" e impostare gli stili di livello come segue:
Infine, abbiamo bisogno di un pulsante per inviare il modulo. Useremo i nostri stili di livello dal livello "nav attiva" per il pulsante, poiché vorremmo mantenere quell'aspetto coerente a tutti i nostri elementi.
Crea un altro rettangolo arrotondato, Altezza di 40 px, Larghezza di 140 px e Raggio di bordo di 20 px. Rinominare questo livello in "pulsante".
Copia lo stile di livello dal livello "nav attivo" e incollalo sul livello "pulsante".
Duplica il testo dalla navigazione (Comando + J) e modificalo per dire "Abbonati". Sposta il testo da centrare all'interno del pulsante. Il risultato dovrebbe assomigliare all'immagine qui sotto.
I clienti lo richiederanno sempre e dovresti sempre aggiungerlo. Al di fuori e al di sotto del livello "contenitore", aggiungi alcune informazioni sul copyright. Usando il acquaforte ancora una volta la tecnica per dargli un po 'di profondità.
Spero che questo aiuti tutti a esplorare alcuni nuovi confini con i loro disegni. Come hai visto, molte delle tecniche discusse qui sono semplici, ma eleganti; e dovrebbe essere facile da implementare nei propri progetti.
Accentsconagua