Share
In questo tutorial, creeremo un layout del blog creativo utilizzando principalmente forme semplici, alcune tecniche di pennello, alcune immagini e una dose di ingenuità Photoshop. Creare layout di web design è più facile di quanto tu possa pensare. Puoi imparare a costruire progetti attraenti rapidamente. La creazione di questo design richiederà meno di due ore e imparerai alcuni consigli professionali lungo il percorso. Iniziamo!
Dai un'occhiata all'immagine che creeremo. L'immagine finale è sotto o puoi visualizzare un'immagine a dimensione intera qui.
Per completare questo tutorial è necessario scaricare il 960 Grid System. Ora iniziamo.
Apri il modello "960_grid_12_col.psd" in Photoshop. Assomiglierà all'immagine mostrata sotto. Il sistema Grid è utile perché consente di allineare rapidamente il layout.
Seleziona il livello di sfondo e premi Comando + J. Questa è la scorciatoia per duplicare un livello. L'utilizzo delle scorciatoie velocizzerà il processo di progettazione. Per questo nuovo livello aggiungeremo un bel colore sfumato. Ora vai su Livello> Stile livello> Sovrapposizione sfumatura e usa le seguenti impostazioni.
Ora nascondi la griglia per vedere meglio il design. Mantieni la griglia visibile perché puoi allineare meglio la forma. Seleziona lo strumento Rettangolo arrotondato e crea una forma in cima al layout.
Per questa barra di navigazione aggiungi i seguenti stili di livello.
Utilizzando lo stesso strumento (Strumento rettangolo arrotondato) crea un'altra forma e riempila con il colore: # 001424.
Aggiungi il seguente stile di livello per questa forma.
Crea un'altra forma con lo strumento rettangolo arrotondato usando il bianco per il colore.
Inoltre per questa forma aggiungi alcuni semplici stili di livello e modifica il valore di riempimento al 10%.
Di seguito è riportato il risultato finora.
Sopra quest'ultima forma posiziona un'immagine. Ho utilizzato alcune immagini di alcune esercitazioni che ho realizzato per Grafpedia, che rappresentano esempi di immagini validi per questo progetto. Dovresti usare le tue immagini, naturalmente.
Ora devi caricare la selezione per questa immagine. Per caricare la selezione, selezionare il livello nella tavolozza dei livelli e quindi selezionare Seleziona> Carica selezione. Vedrai una selezione intorno all'immagine come nell'immagine seguente.
Crea un nuovo livello su tutti i livelli usando questa scorciatoia: Comando + Maiusc + Alt + N. Seleziona lo strumento Pennello e scegli un pennello rotondo morbido. Sopra il nuovo livello traccia una linea orizzontale. Tieni premuto il tasto Maiusc quando esegui il disegno. In questo modo il disegno sarà perfetto orizzontalmente.
Premi Command + D per deselezionare. Ora usa lo strumento Rettangolo arrotondato per creare un'altra forma con il colore # 4b6e82.
Per entrambe le forme aggiungi i seguenti stili di livello.
Afferra lo strumento Ellisse e crea una forma proprio sotto la forma della barra laterale.
Vai a Filtro> Sfocatura> Controllo sfocatura e usa le seguenti impostazioni. Photoshop ti chiederà se vuoi rasterizzare la forma, andare avanti e premere OK.
Come puoi vedere dal passaggio precedente, abbiamo creato un'ombra lì. Ora accentuiamo questa ombra aggiungendo alcune luci. Seleziona lo strumento Linea e imposta il peso della linea su 1 pixel, quindi crea una linea verticale come mostrato.
Fai clic con il tasto destro sul livello e scegli Rasterizza livello.
Seleziona lo strumento Gomma e scegli un pennello rotondo liscio intorno a 100 px. Usalo per cancellare la parte superiore e la parte inferiore della linea.
Con la stessa tecnica crea un'altra linea in cima alla barra laterale.
Proprio sotto questa linea bianca crea un altro che è nero.
Nel mezzo del layout, crea un'altra forma con lo strumento Rettangolo arrotondato.
Crea alcune forme con lo strumento Rettangolo. Sopra queste forme aggiungeremo alcune immagini in seguito.
Aggiungi gli stessi stili di livello per tutte e tre queste forme.
Ora è il momento di aggiungere le immagini su queste forme bianche. Aggiungi anche del testo con lo Strumento di tipo orizzontale sul lato destro.
Crea una linea tratteggiata tra i post con lo Strumento testo orizzontale.
Crea altre tre forme e posizionale sotto il testo Post Metadati.
Sopra la barra laterale crea una casella di ricerca usando lo strumento Rettangolo arrotondato. Nello stesso tempo puoi vedere che ho inserito del testo anche sulla barra di navigazione.
Aggiungi i seguenti stili di livello per questa casella di ricerca.
Ora usa lo strumento Rettangolo arrotondato per creare un'altra forma. Posiziona questa forma sulla forma precedente. Inoltre, aggiungi un'icona sul lato destro.
Subito sopra la presentazione crea un'altra forma bianca.
Aggiungi i seguenti stili di livello per questa forma.
Tenere premuto il tasto Comando e con lo strumento Penna selezionato premere due volte sul bordo della forma. Il punto di ancoraggio diventerà attivo e saremo in grado di modificare l'aspetto della forma.
Con il tasto Comando premuto ancora seleziona il seguente punto di ancoraggio.
Tieni premuto il tasto Maiusc e premi una volta il tasto freccia giù dalla tastiera. Il punto di ancoraggio si sposterà verso il basso e avrai il seguente risultato.
Usa lo strumento Ellisse per creare un cerchio.
Fai clic con il tasto destro sul livello e scegli Rasterizza livello. Con lo strumento Selezione rettangolare fare una selezione come quella mostrata sotto.
Assicurati di avere selezionato il livello con questo piccolo cerchio, quindi premi il tasto Canc. Trascina questo livello sopra il livello di sfondo nella tavolozza dei livelli. Questo è il mio risultato finora.
Ora aggiungeremo due pulsanti per consentire agli utenti dei siti di modificare l'immagine della presentazione. Sarà necessario utilizzare lo strumento Rettangolo arrotondato per creare la forma e quindi è possibile utilizzare lo Strumento forme personalizzate per aggiungere le frecce.
Sopra la barra laterale crea alcune forme bianche come mostrato di seguito.
Per tutte queste forme bianche si prega di aggiungere gli stessi stili di livello.
Aggiungi alcuni banner nella barra laterale. Inoltre, aggiungi alcune icone di social bookmarking in cima al design del sito. Ci sono numerose icone gratuite disponibili sul web tra cui scegliere.
Ora aggiungi del testo con lo Strumento testo orizzontale nella parte inferiore della barra laterale. Inoltre, aggiungi segni meno tra il testo usando lo Strumento tipo orizzontale per creare regole orizzontali tratteggiate.
Aggiungiamo altri dettagli sulla barra di navigazione. Usa lo strumento Linea per creare due piccole linee. Ingrandisci questa immagine per vedere meglio quello che stai facendo.
Seleziona entrambi i livelli all'interno della tavolozza dei livelli. Per selezionare entrambi i livelli è necessario tenere premuto il tasto Comando quando si selezionano entrambi i livelli. Dopo aver selezionato le linee, premi Comando + E per unire i livelli in uno solo. Seleziona lo strumento Gomma e usalo per eliminare la parte superiore e la parte inferiore delle linee. Si noti che è necessario un pennello morbido, rotondo con una dimensione di 20 pixel.
Cambia la modalità di fusione per questo livello in Luce soffusa. Duplicalo alcune volte e posiziona la linea tra gli altri pulsanti di testo.
Ora crea il testo per il logo di questo layout di Wordpress a una dimensione che ti sembra gradevole.
Aggiungi i seguenti stili di livello per questo logo di testo.
Subito sopra il livello "sfondo" crea un nuovo livello (Comando + Maiusc + Alt + N). Con lo strumento pennello fai un segno di luce lì con un pennello morbido, rotondo come mostrato.
Cambia la modalità di fusione per questo livello in Luce soffusa.
Il design è completato! Spero ti sia divertito a creare! L'immagine finale è sotto o puoi visualizzare un'immagine a dimensione intera qui.
Accentsconagua