Disegna un layout blog pulito ed elegante in Photoshop CS6

In questo tutorial ti mostrerò il processo di fare un blog di design semplice e pulito usando l'ultimo Photoshop. Useremo il nuovo Stili di carattere e Stili di paragrafo per aiutarci a semplificare il processo.

Per seguire questo tutorial, avrai bisogno delle seguenti risorse:

Font Sansation di Bernd Montag.
26 Pattern pixel ripetibile da PSDfreemium.
Icone social media gratuite di Daniele Selvitella.

dimostrazione

Preparare la tela

Passo 1

In questo progetto, useremo 960 g come framework. Scarica il modello dalla sua pagina principale e all'interno del file zip, cerca il file di Photoshop. Apri il file '12 Column Grid 'in Photoshop.

Fai clic sull'icona a forma di occhio per il livello 12 Grid Col per nasconderlo; non ne avremo bisogno per ora.

Passo 2

La dimensione attuale della tela è troppo piccola. Clic Immagine> Dimensioni della tela (o Ctrl + Alt + C). Aggiungi una dimensione più grande e assicurati di impostare il punto di ancoraggio al centro.

Passaggio 3

Premi Ctrl + R per rivelare il righello. Clic Visualizza> Nuovo Guida per creare una nuova guida che ci aiuterà a progettare in modo accurato. Selezionare Verticale e alla posizione: 185 px per fare una guida verticale di 185 px dall'angolo in alto a sinistra della tela.

Passaggio 4

Disegna un'altra guida verticale in posizione 150 px, 1095 px e 1130 px.

Di seguito è la nostra guida finale all'interno della tela.

Preparazione del tema del colore

Passaggio 5

Per questo motivo, useremo una bella combinazione di colori Colorlouver. Fare clic sul collegamento Anteprima per aprire la combinazione di colori come file jpeg.

Salva la combinazione di colori e posizionala all'interno del file di Photoshop. Posizionando l'immagine direttamente all'interno della tela possiamo campionare il suo colore più velocemente e più facilmente.

Preparare lo sfondo

Passaggio 6

Selezionare sfondo strato e fai clic sull'icona di blocco nella parte superiore del pannello Livelli per sbloccarlo. Fare doppio clic sulla miniatura per cambiarne il colore.

Fai clic sul secondo colore, # 948.371, per selezionarlo.

Passaggio 7

Disegna una forma rettangolare sulla parte superiore della tela. Questo sarà il secondo background.

Passaggio 8

Mantieni la forma selezionata. Nel Barra delle opzioni, Aperto Riempire Colore casella e quindi fare clic su icona della ruota dei colori. Quando la finestra di dialogo Selettore colore è aperta, fai clic sul primo colore per selezionarlo. Per il suo Ictus selezione del colore Nessuna.

Passaggio 9

Crea un nuovo livello e quindi seleziona la tela superiore usando lo strumento selezione rettangolare. Attiva il strumento sfumatura e riempilo con radiale pendenza dal bianco al nero. Assicurati che il gradiente sia centrato sulla parte superiore della tela.

Cambialo Miscela modalità a Schermo e ridurne il Opacità a 37%.

Passaggio 10

Crea un nuovo livello e chiamalo 'ombra'.

Disegna una selezione rettangolare nella parte inferiore dello sfondo secondario come mostrato. Clic Modifica: Riempi. Impostato Uso a Nero. Clic ok per riempire la selezione con il nero.

Passaggio 11

Ammorbidilo usando Gaussian Blur. Clic Filtro> Sfocatura> Sfocatura gaussiana.

Passaggio 12

Tenere premuto Alt e quindi posizionare il cursore in mezzo ombra e sfondo superiore strato. Senza rilasciare il tasto Alt, fare clic su convertire il livello in Maschera di ritaglio. Convertendolo in Clipping Mask, l'ombra ora passa all'interno dello sfondo superiore.

Passaggio 13

Abbassa l'ombra Opacità a 50% per renderlo sottile Sotto, puoi vedere il risultato ingrandito al 100%.

Passaggio 14

È sempre una buona idea mettere questi livelli in un gruppo. Per fare questo, seleziona tutti i livelli e quindi fare clic su Ctrl + G.

Intestazione

Passaggio 15

Disegna un rettangolo sulla tela superiore come mostrato.

Passaggio 16

Nel Barra delle opzioni, impostato Ictus colore a # af9f8e.

Passaggio 17

Per il suo Riempire colore, selezionare gradiente lineare a partire dal # d0c4b9 a # a89c91.

Di seguito è riportato il risultato in visualizzazione al 100%.

Nome del sito

Passaggio 18

Aggiungi il nome del sito sul lato sinistro del disegno. Osservare il posizionamento come mostrato di seguito. Fai doppio clic sul testo e aggiungi Ombra esterna. Per il suo carattere, usa Sansatione.

Uso degli stili di carattere

Passaggio 23

Salviamo l'impostazione del carattere come stile di carattere. Questa funzione è una versione semplificata di Stili di caratteri in InDesign. Per salvarlo, attiva il testo e poi fai clic sull'icona 'Nuovo stile carattere'.

Fare doppio clic sul nuovo Stile carattere e utilizzare la seguente impostazione.

Passaggio 24

Seleziona l'altro menu e quindi fai clic sullo stile di carattere per applicarlo. Se trovi un segno più accanto allo Stile personaggio, significa che il personaggio ha un'impostazione diversa. Per sovrascrivere le impostazioni, fai clic sull'icona della freccia circolare.

Passaggio 25

Ripeti il passaggio precedente per creare un nuovo stile di carattere per il menu attivo.

Passaggio 26

Quindi, qual è il punto di usare gli stili di carattere? Gli stili di carattere ci aiutano a centralizzare le impostazioni del personaggio. Possiamo semplicemente modificare lo stile del carattere per modificare ogni testo usando quello stile. Guarda un esempio qui sotto. Se modifichiamo il tipo di carattere in Stile carattere Menu principale: normale a Corbel, tutto il menu normale viene automaticamente modificato in Corbel.

Passo 27

Crea un nuovo livello e posizionalo sotto la barra dei menu. Ctrl-clic sulla barra dei menu per effettuare una nuova selezione in base alla sua forma. Riempi con nero.

Passaggio 28

Rimuovi la selezione usando Ctrl + D. Ammorbidilo aggiungendo Sfocatura gaussiana, Filtro> Sfocatura> Sfocatura gaussiana.

Slider

Passaggio 29

Disegna una forma rettangolare con la larghezza di 10 colonne (vedi sotto).

Per il suo Colore di riempimento selezionare # dfd1c2. Per il suo Ictus selezionare # c8baac con taglia 10 pt. Fai clic sulla piccola freccia a discesa accanto all'anteprima della riga e assicurati Allinea all'interno è selezionato.

Passaggio 30

Incolla un'immagine sopra il fotogramma. Converti in Maschera di ritaglio premendo Ctrl + Alt + G. L'immagine entrerà automaticamente nella cornice del cursore. Se necessario, è possibile spostare e ridimensionare l'immagine senza influire sulla sua cornice.

Passaggio 31

Disegna un'altra forma rettangolare dietro il cursore con lo stesso colore. Assicurati di agganciarlo alla guida più esterna. Inserisci Stile livello> Sovrapposizione modello utilizzando il pattern di pixel da PSDfreemium. Tonificalo Opacità per renderlo sottile.

Passo 32

Disegna una forma rettangolare sopra la forma con Riempi: # b3aca5 e nessun colpo. Premi Ctrl + T e poi ruotalo di 45 °. Converti la forma del livello in Maschera di ritaglio.

Passaggio 33

Duplica la forma e ridimensionala. Cambialo Riempire ad un colore più scuro. Converti la forma del livello in Maschera di ritaglio.

Passaggio 34

Ripeti lo stesso passo per disegnare un'altra freccia sull'altro lato.

Passaggio 35

Premi Ctrl e fai clic sulla diapositiva per effettuare una nuova selezione. Crea un nuovo livello e convertilo in a Maschera di ritaglio. Riempi la selezione con nero.

Passaggio 36

Deseleziona (Ctrl + D) quindi ammorbidire usando Sfocatura gaussiana.

Puoi ridurre l'opacità dell'ombra se necessario.

Passaggio 37

Disegna un rettangolo arrotondato sull'angolo del cursore con Riempi # c8baac.

Passaggio 38

Disegna un cerchio all'interno della forma. Imposta la sua Ictus a nero con dimensioni 1 punto e rimuovere il riempimento.

Passaggio 39

Seleziona il cerchio percorso utilizzando Selezione del percorso strumento. Maiusc + Alt: trascina il percorso per duplicarlo.

Ripeti questo per disegnare più cerchi.

Passaggio 40

Seleziona uno dei percorsi del cerchio. Premi Ctrl + Maiusc + J per tagliarlo su un nuovo livello.

Passaggio 41

Nel Barra delle opzioni, rimuovilo Ictus e cambiala Riempire a a radiale gradiente da # e38989 a # bb5c5c. Inserisci Stile livello> Bagliore esterno e Ombra esterna.

Passaggio 42

Disegna una selezione ellittica sotto il cursore. Crea un nuovo livello e riempilo con nero.

Passaggio 43

Deseleziona (Ctrl + D). Ammorbidilo usando Sfocatura gaussiana.

Sfondo inferiore

Passaggio 44

Disegna un'altra forma rettangolare per lo sfondo inferiore. Usa lo stesso Riempire e Ictus colore come forma del cursore.

Come sempre, sii molto cauto con il suo posizionamento. Vogliamo che copra ogni guida sulla tela.

Inserisci Stile livello> Sovrapposizione modello.

Di seguito è riportato il risultato con un ingrandimento del 100%.

Passaggio 45

Seleziona la sua area superiore usando lo strumento Selezione rettangolare.

Passaggio 46

Crea un nuovo livello, posizionalo dietro la forma. Riempi la selezione con nero. Premi Ctrl + T, fai clic destro e seleziona Prospettiva.

Trascina gli angoli superiori verso l'esterno.

Fare nuovamente clic con il tasto destro e scegliere Scala. Trascina verso il basso la maniglia superiore.

Fare clic con il tasto destro e scegliere Ordito. Trascina verso l'interno i segmenti sinistro e destro.

Ammorbidilo usando Sfocatura gaussiana.

Tonificare il Opacità a 20%.

Passaggio 47

Disegna un rettangolo bianco all'interno dello sfondo. Questo sarà lo sfondo per il contenuto principale del sito.

Aggiungi uno spazio di 10 px a sinistra, a destra e sul lato superiore dello sfondo. La spaziatura dovrebbe essere semplice perché abbiamo fatto la guida nei primi passi. Inserisci Stile livello> Bagliore esterno.

Passaggio 48

Aggiungi una nuova guida, 25 px dal lato superiore della forma.

Titolo della sezione

Passaggio 49

Aggiungi un nuovo stile di carattere per il titolo della sezione della pagina e la sua descrizione.

Aggiungi il titolo della sezione e la sua descrizione usando lo strumento testo. Applica gli stili che abbiamo creato in precedenza. Assicurati di aggiungere 25 px di spazio dal lato superiore del suo sfondo con l'aiuto della guida fatta in precedenza.

Passaggio 50

Disegna una linea di 5 px sotto la descrizione del sito con Riempimento: n. 938270 e Colpo: nessuno.

Post sul blog

Passaggio 51

Crea un altro stile di carattere per il titolo del post.

Passaggio 52

Aggiungi un titolo del post e applica il precedente stile di carattere.

Passaggio 53

Disegna una forma rettangolare sotto il titolo con 4 colonne di larghezza. Impostato bianca per il suo Riempire e #BEBEBE per il suo Ictus. Inserisci Stile livello> Tratto.

Passaggio 54

Incolla un'immagine sopra la forma. Converti in maschera di ritaglio (Ctrl + Alt + G).

Passaggio 55

Disegna un rettangolo arrotondato con Riempimento: # 8e8380 e Colpo: nessuno. Converti in Maschera di ritaglio.

Passaggio 56

Crea nuovi stili di carattere per i metadati del blog.

Passaggio 57

Aggiungi il testo dei metadati sopra la forma e applica lo stile di carattere che abbiamo creato in precedenza.

Passaggio 58

Attivare genere strumento e fare clic-trascinare per creare una casella di testo. Imposta la sua larghezza su 4 colonne. Clic Digitare> Incolla Lorem Ipsum per riempirlo con Lorem Ipsum generato automaticamente da Photoshop.

Passaggio 59

Crea un nuovo stile di paragrafo per il contenuto del personaggio. Fai clic sulla nuova icona nel pannello Stili di paragrafo.

Fare doppio clic sullo stile di paragrafo e utilizzare questa impostazione seguente.

Passaggio 60

Applica questo stile al contenuto del post. Puoi anche sperimentare con le sue impostazioni di Rientro e Spaziatura.

Per il web design, disattivare Hyphenation.

Passo 61

Disegna un rettangolo arrotondato con Riempimento: # 8e8380 e Colpo: nessuno. Inserisci Stile livello> Sovrapposizione modello. Per coerenza, usa lo stesso schema del cursore.

Passaggio 62

Aggiungi un'etichetta di pulsante. Ti suggerisco di salvarlo come stile personaggio. In questo modo, possiamo usarlo facilmente per altri pulsanti.

Passaggio 63

Il pulsante precedente è per condizioni normali. Duplichiamo e cambiamo il suo colore in # f76b6a. Inoltre, imposta il suo tipo di etichetta in grassetto.

Passaggio 64

Inserisci il post all'interno di un gruppo e premi Ctrl + J per duplicarlo. Alt-trascina per duplicare il gruppo.

Ripeti lo stesso passo per creare più post. Ricorda di cambiare l'immagine e il titolo di ogni post.

Passaggio 65

Duplicare Leggi di più pulsante e cambia l'etichetta in numero. Lo useremo per la navigazione della pagina. Ricordarsi di impostare uno dei pulsanti per il passaggio del mouse.

Passo 66: piè di pagina

Iniziamo a lavorare sul footer. Aggiungi un titolo del widget e la sua descrizione.

Passaggio 67

Aggiungi il link e disegna una linea di 1 px al di sotto. Impostato Riempimento: nessuno e Corsa: # 8e8380.

Passaggio 68

Clic Più opzioni pulsante e selezionare linea tratteggiata.

Passo 69

Aggiungi altri collegamenti nel widget.

Passaggio 70

Duplica il widget.

Passo 71

Dobbiamo anche aggiungere la condizione di passaggio del mouse. Imposta uno dei link in grassetto.

Sotto quel link attivo, aggiungi una linea di 5 px. Imposta il suo colore su # f76b6a. Per coerenza, l'aspetto di questo collegamento è simile al menu attivo sulla barra dei menu.

Passaggio 72

Aggiungi un altro rettangolo nella parte inferiore. Imposta la sua Riempire a # 3d3123.

Informazioni sul piè di pagina

Passaggio 73

Aggiungi informazioni footer utilizzando genere strumento. Dagli un'oscurità Ombra esterna per aggiungere contrasto al suo background.

Rete sociale

Passaggio 74

Aggiungi alcune icone dei social media da Daniele Selvitella. Inserisci Stile livello> Bagliore esterno.

Passaggio 75

Tone giù icona normale a 50%. Per la condizione di volo a vento, continuiamo a tenerla Opacità a 100%.

Passaggio 76

Afferra l'icona di un cursore a mano libera e posiziona il cursore più piccolo al di sopra del collegamento attivo o al passaggio del mouse.

Risultato finale

Questo è il nostro risultato finale. Si può vedere che l'ultima versione di Photoshop ha alcune caratteristiche interessanti per la progettazione di un layout web. Stili di carattere e Stili di paragrafo è un miglioramento significativo per ogni web designer.

dimostrazione
Scarica fonte