Share
Nei giorni passati cercavo ispirazione in famosi dipinti antichi e mi sono interessato a "Starry Night" di Van Gogh e ho pensato: posso applicare questo al web design? E la risposta è si! Poi, dopo diverse ore di lavoro, ecco il mio tutorial per te, un web design artistico raffigurante un concetto di "Magic Night".
Cominciamo il design! Prima di tutto, questo non è un tutorial di base, quindi salterò alcune spiegazioni di base. In ogni caso, chiunque possieda un livello intermedio avanzato delle abilità di Photoshop sarà in grado di farlo. Secondo, è davvero difficile ottenere esattamente lo stesso risultato che ho ottenuto, e devi usare la tua immaginazione e il buon gusto per ottenere qualcosa di simile o migliore del mio progetto. E terzo, questo è stato progettato considerando l'applicazione in un modello Wordpress, ma è possibile convertirlo rapidamente in un altro tema del motore, o anche in un sito Web personalizzato.
Andando avanti allora! Crea un nuovo documento 960 pixel per 1000 pixel e RGB. Disegna alcune guide per segnare i limiti e vai a Immagine> Dimensioni tela per ridimensionare il documento, aumentando la larghezza della tela (1460 x 1000 px). In questo modo avrai il tuo design incentrato su un grande documento e vedrai come appare nelle risoluzioni widescreen. Inoltre, disegna una guida per segnare l'altezza dell'intestazione.
Disegna una guida orizzontale al centro del documento e utilizzala per riempire il livello "Sfondo" con un gradiente radiale blu scuro (# 0D2B53 - # 010D1F). Aggiungo anche alcune guide come limiti del padding della pagina principale a sinistra ea destra.
È molto probabile che cambiamo l'altezza del documento in un secondo momento, quindi aggiungi un nuovo livello di riempimento (# 010D1F) sotto il livello "Sfondo".
Poiché uno dei lettori di Psdtuts + ha suggerito di utilizzare immagini reali anziché il classico filtro Cloud, lo proveremo questa volta. Incolla questa immagine di alcune nuvole temporalesche in un nuovo livello denominato "Nuvole" e modifica la modalità di fusione in Sovrapposizione. Quindi vai su Livello> Maschera di livello> Nascondi tutto e disegna un gradiente radiale da bianco a nero (#FFFFFF - # 000000), che va dal centro in alto a quasi il centro in basso. Quindi regola leggermente i livelli "Nuvole" per rendere le nuvole più scure.
Ora incolla questo bel panorama di una sponda spagnola in un nuovo livello chiamato "skyline". Quindi crea un nuovo Livello di regolazione> Mixer canali ... e seleziona Bianco e nero con Filtro blu (RGB). Quindi per applicare quell'effetto solo al livello "orizzonte" nella palette livelli, tieni premuto il tasto Opzione e fai clic tra il livello Mixer canale e il livello "orizzonte". Infine, modifica il metodo di fusione del livello "orizzonte" su Sovrapponi.
Applica una maschera di livello> Mostra tutto al livello "orizzonte". Quindi usando un pennello grande e nero (# 000000) nascondi i bordi dell'immagine, quindi seleziona un pennello Grunge (sto usando questo set Pennello Grunge di Kelzky13, in particolare i pennelli 250 e 181) e rendi i bordi un po 'più irregolare.
Quindi digita il titolo "Magic" usando il font Scriptina. Quindi applica gli stili di livello mostrati di seguito: bagliore esterno (n. 9EB6D0) e sovrapposizione gradiente (n. 70ABF6, #FFFFFF, # B4CBE7, a #FFFFFF). Inoltre, ora è il momento giusto per organizzare il nostro design di sviluppo in cartelle. Metti tutti i livelli in una nuova cartella denominata "Sfondo" e il testo all'interno di un'altra cartella denominata "Logo".
Ora aggiungeremo alcune stelle al nostro design, è possibile utilizzare qualsiasi set di pennelli a stella, ma sto usando questo set: i pennelli per campi a stelle di BL1nX. Quindi, usando il pennello 550 del set, dipingi le stelle in bianco (#FFFFFF) in un nuovo livello all'interno di una cartella denominata "Stelle". Si noti che sto mettendo la stella più luminosa sopra il punto del io. Quindi applica una sovrapposizione gradiente utilizzando tre colori (# 3A8FEF, #FFFFFF e # 66C9FC) al livello "Stars1".
Successivamente, usando il pennello 615 del set di campi di stelle, aggiungi più stelle al cielo in un nuovo livello denominato "Stelle2", quindi con una gomma morbida, elimina le stelle sopra gli edifici. Successivamente, aggiungi un bagliore esterno (# 8AB2FF) a "Stars2".
Aggiungi più stelle al livello "Stelle 2" su tutto il disegno, quindi usa lo strumento Gomma, elimina alcune aree delle stelle. Infine, applica un effetto Sovrapposizione sfumatura al livello "Stelle2", utilizzando quattro colori: # 6AB1D1, #FFFFFF, # 94CFED e #FFFFFF.
Ora scarica questi pennelli Star di jen-ni e mantieni i pennelli a portata di mano perché li utilizzeremo più volte in questo tutorial. Seleziona un pennello da 65 px (sto usando il numero 148) e disegna una stella bianca (#FFFFFF) in un nuovo livello appena sopra il punto del io. Quindi applica un bagliore esterno (# 00BCF9) alla stella per renderla più luminosa.
Duplica il testo "Magico", seleziona il testo e digita la parola "Notte" nella sua posizione. Quindi, imposta Bagliore esterno su bianco (#FFFFFF) e Sovrapponi sfumatura su tre colori (# F9DA5B, # FEAE00 e # FFD403), vedi l'immagine sotto per controllare i valori del filtro.
Aggiungiamo alcune nuvole alla nostra notte! Scarica i pennelli di Redheadstock's Clouds II. Quindi, seleziona il numero di pennello 2464 e imposta la sua dimensione su 960px (corrispondente alla larghezza principale del layout di progettazione). Imposta il colore di primo piano su # 234B7F e incolla una singola nuvola in un nuovo livello denominato "cloud1". Per mantenere organizzati i livelli, inserisco le nuvole in una cartella separata all'interno della cartella "Sfondo". Ora allungare un po 'l'altezza di "cloud1".
In seguito, schiva e brucia il cloud un po '. Notare che sto schiarendo le aree accanto alla stella del logo e oscurando il fondo della nuvola. Inoltre, modifica l'opacità "cloud1" al 50%.
Aggiungi un'altra nuvola in un nuovo livello denominato "cloud2". Puoi utilizzare qualsiasi nuvola che ti piace, ma usa questo colore come primo piano: # 5F83A5. Schiva il fondo della nuvola un pochino per migliorare la sensazione di illuminazione.
Ripeti il passaggio precedente ma questa volta usa un altro pennello con questo colore: # 36638C e posizionalo sopra "cloud1". Ridimensiona, quindi schiva e / o brucia la nuvola se necessario.
Seleziona una grande gomma morbida ed elimina la parte inferiore del livello "cloud1" per creare un effetto di dissolvenza.
Questo è in realtà un passaggio fondamentale, aggiungeremo lo sfondo del contenitore principale, non devi mai dimenticare che stai progettando per il web. Utilizzando lo strumento Rettangolo, traccia un rettangolo vettoriale (# 0A1D37) in un nuovo livello tutto sotto la cartella "Nuvole". Si noti che il mio rettangolo si trova all'interno delle guide del padding. Quindi seleziona il livello del rettangolo e vai a Livello> Maschera di livello> Mostra tutto ... e disegna una sfumatura da bianco a nero, che aggiunge un bell'effetto nella parte superiore del rettangolo. Infine, metti una Guida sotto la dissolvenza di Rectangle, che ci aiuterà quando trasformeremo questo disegno in HTML + CSS. Notare che dalla guida alla parte inferiore del colore di sfondo dovrebbe essere chiaro.
Ora aggiungi un altro rettangolo, ma questa volta come sfondo della barra laterale, di nuovo aiuto con una guida, e usa il colore # 091525. Quindi, applica al nuovo rettangolo una maschera di livello un po 'come nel passaggio precedente.
A questo punto, abbiamo fatto lo sfondo base dell'intestazione. Ora è il momento di aggiungere alcuni dettagli. Inserirò un'icona RSS unica nell'intestazione. Copia questa immagine della luna piena e incollala in un nuovo livello chiamato "moon-rss". Quindi regola i valori Tonalità / Saturazione per rendere la luna un po 'più gialla e aggiungi i filtri Bagliore interno e Esterno (vedi i valori mostrati di seguito).
Aggiungi una piccola forma di nuvola con il colore # 7997B3 in un nuovo livello sopra la luna nella tavolozza dei livelli. Quindi, utilizzando una grande gomma morbida, elimina alcune aree del nuovo cloud.
Aggiungi la classica forma RSS (# DCA30B) in un nuovo livello davanti al livello "luna" ma dietro il livello "nuvola". Quindi, applica ad esso i filtri mostrati di seguito (una sovrapposizione sfumatura, un bagliore esterno e un'ombra discendente). Infine, aggiungi una stella da qualche parte sulla forma RSS (vedi punto 10).
Incolla questa immagine in un nuovo livello, la useremo come sfondo della barra di navigazione delle nostre pagine principali. Poiché l'immagine originale è un po 'allungata, dobbiamo renderla più ampia, ho giocato con entrambe le selezioni e con lo strumento Sposta (trasformazione libera) per aumentare la larghezza dello scorrimento. Quindi altera lo scroll un po 'usando il warp Flag.
Schivare alcune aree del rotolo per aumentare le ombre e migliorare l'illusione di curvatura.
Per migliorare la trama dello scorrimento, applica anche un filtro Sovrapposizione sfumatura (# 045F96 e # FBF4BD) e uno Sovrapposizione modello.
Ora aggiungi un'ombra esterna alla pergamena. Puoi usare il filtro Ombra esterna o fare quello che ho fatto, duplicare il livello di scorrimento e su Tonalità / Saturazione regolare l'Illuminazione a -100, Sfocare leggermente la copia nera e distorcerla con lo strumento Trasformazione libera per renderla irregolare.
Successivamente, aggiungi una nuvola sopra la pergamena, Schiva, brucia e Elimina proprio come al punto 15. Quindi aggiungi il testo del link di Pages usando il carattere Georgia - Corsivo. Usa il colore # 0B1827 per i link standard e il colore # 211808 per il link al passaggio del mouse. Inoltre, aggiungi alcuni dettagli aggiuntivi come le stelle sullo sfondo e una linea come effetto hover. Puoi vedere la struttura dei livelli nella parte inferiore dell'immagine sottostante.
Come dettaglio finale sulla barra di navigazione delle pagine, crea un nuovo livello sopra la pergamena e usando un pennello di particelle, disegna una linea come se fosse un acquerello (vedi l'immagine sotto). Fatelo qualche altra volta ma usando colori diversi. Inoltre, nella barra di navigazione "Stelle" Opacità inferiore al 40%.
Aggiungi il testo relativo al RSS. Sto usando 10 px Aria, con giallo (# F2C90D) e bianco (#FFFFFF). Non dimenticare di impostare il Metodo anti-alias su Nessuno perché la maggior parte dei browser esegue il rendering del testo senza anti-aliasing (IE7 e Safari sono le eccezioni).
Come ulteriore dettaglio aggiungi questa immagine di un bel palloncino. Estrarre il palloncino dal suo sfondo e posizionarlo da qualche parte sotto il logo, aggiungere una sovrapposizione colore (# 1F416E - Metodo di fusione: Sovrapposizione) al livello "Palloncino" per abbinare i colori della scena. Inoltre, puoi bruciare il lato sinistro del palloncino solo un po '.
Successivamente, usando il pennello 615 dei pennelli dei campi stellari (vedere il punto 8), aggiungere più stelle sopra il palloncino e lo scroll. Sto anche aggiungendo una corda al pallone dipingendo una linea curva bianca con un pennello solido di 3 px. Inoltre, usa la gomma qui e là per ridurre la quantità di stelle.
È ora di aggiungere un post. Innanzitutto, aggiungi il titolo e la riga dei metadati in un nuovo livello denominato "Post". Guarda l'immagine qui sotto per visualizzare i valori dei personaggi. Inoltre, aggiungo una piccola stella vicino ai metadati come dettaglio visivo.
Aggiungiamo ulteriori informazioni nella cartella "Post", dato che l'elenco sulla homepage avrà un'anteprima di diversi post. Aggiungeremo un'immagine di anteprima a sinistra (200 px per 200 px con un effetto Stroke 1px) e un breve testo a destra. Inoltre, aggiungeremo un'anteprima di quanti commenti il post ha in alto a destra. Per il campo dei commenti, crea una nuova cartella denominata "Commenti" e aggiungi uno sfondo minuscolo con una piccola nuvola e alcune piccole stelle. Fondamentalmente, basta ripetere uno dei passaggi precedenti mentre stavamo progettando l'intestazione, ma in misura minima. Quindi aggiungi il numero di commenti e la parola Commenti sotto.
Quindi, aggiungere un tag linea sotto il post e aggiungi una piccola stella a destra di quella linea. Aggiungi un piccolo campo stellare come sfondo per il post, solo se lo desideri. Infine, disegna un divisore (# 1D324F) per il post utilizzando lo strumento Linea.
Quindi duplica la cartella "Post" e modifica le copie per creare due o tre post diversi. È molto probabile che l'altezza del documento debba essere aumentata a questo punto, basta farlo usando lo strumento Ritaglia o Immagine> Dimensioni tela, come nel passaggio 1. Quando hai ridimensionato il documento principale, aumenta l'altezza di entrambi i sfondo e sfondo barra laterale pure.
Lavoriamo ora sulla barra laterale. Stiamo per aggiungere il modulo di ricerca. Crea una nuova cartella denominata "Barra laterale" e al suo interno crea un'altra cartella e chiamala "Cerca". Disegna una nuvola in quella cartella e schivarla e tagliarla in modo che assomigli all'immagine seguente. Quindi, utilizzando lo strumento Rettangolo arrotondato, traccia un rettangolo sopra il cloud. Applicare un effetto Corsa interna 1px (# 697372) al rettangolo e modificarne il valore di riempimento al 50%.
Aggiungi alcune stelle bianche sopra il livello cloud usando qualsiasi livello di campo stella, ricorda cancella tutte le stelle extra. Quindi duplica, riduci e Modifica> Capovolgi orizzontalmente il livello "balloon" del passaggio 29. Inseriscilo nella cartella "Cerca". Inoltre, aggiungi il testo del titolo usando Georgia Italic e un bel colore giallo (# D5A934). Quindi aggiungi le istruzioni di ricerca e il pulsante "Partire!Puoi vedere i valori del personaggio nella parte inferiore dell'immagine seguente: come dettaglio finale disegna una singola stella luminosa dietro il testo.
Aggiungi il testo del contenuto della barra laterale, i titoli, i link e inserisci ciascuna sezione in una cartella separata. Inoltre, aggiungi uno sfondo di campo stellato su ogni cartella e una stella lucente dietro ogni titolo. Inoltre, aggiungi una stella lucente come esempio dell'effetto hover su qualsiasi link. Non dimenticare le guide di riempimento e margine.
Stiamo arrivando alla fine. Aggiungiamo un piè di pagina per la barra laterale. Per prima cosa, sfumare un po 'il fondo del dipinto di sfondo della barra laterale con un pennello morbido sulla sua maschera di livello. Quindi disegna qualche nuvola, poi schiva e brucia. Assicurati che le nuvole non invadano lo sfondo del contenuto principale o superino la larghezza della barra laterale. Quindi aggiungi un campo stellare bianco dietro le nuvole e duplica nuovamente il palloncino. Sto salvando tutto questo in una cartella chiamata "Sidebar Footer".
Infine, creeremo il piè di pagina. Innanzitutto sulla maschera di livello dello sfondo del contenuto principale utilizzando un grande pennello morbido, nascondi il fondo per dissolverlo. Quindi selezionare alcuni pennelli cloud e dipingerli tutti nella parte inferiore del disegno. Sto combinando nuvole blu scuro (# 0B1C38) e nuvole blu # 223E63), come mostrato nelle immagini qui sotto. Ricorda, quelle nuvole diventeranno un'immagine di sfondo, quindi cerca di non attraversare una Guida tra contenuto e piè di pagina. Inoltre, ricorda di inserire tutti i livelli correlati del piè di pagina in una nuova cartella denominata "Piè di pagina".
Brucia le nuvole più leggere Quindi, dipingi un campo stellare bianco usando il pennello 615 delle stelle impostate. In seguito, dipingi un campo stellare più luminoso con un pennello diverso, in questo caso il numero 656 del set. Alla fine, cancella il campo stellare con una gomma morbida grande.
Spero che tu abbia trovato questo tutorial utile. I membri PLUS possono scaricare il file PSD e modificare ciò che si desidera, aggiungere o rimuovere dettagli e creare il proprio design stellato.
.
Abbonati a Psdtuts + Feed RSS per i migliori tutorial e articoli di Photoshop sul Web.
Accentsconagua