Share
In questo tutorial di Photoshop impareremo come creare un layout Web 2.0, mentre affronteremo il tutorial tratteremo di così tante tecniche di Photoshop. Sembra un po 'lungo? questo perché è molto dettagliato. Vi assicuro che troverete facile da seguire e da fare, provatelo!
Per mantenere tutto allineato useremo il Grid System 960s (Scaricalo da qui) una volta scaricato apri il file "960_grid_24_col.psd".
Inizieremo creando il livello da sfondo, facendo clic con il tasto destro sul livello "Sfondo", quindi scegliendo Livello da sfondo. e chiamalo "bg".
Dato che useremo così tanto le guide, dobbiamo vedere i nostri Righelli. Per farlo vai su Visualizza> Righelli.
Abbiamo bisogno di impostare i bordi inferiori per l'area dell'intestazione, quindi trascineremo una nuova guida orizzontale dopo 100 px. vai su Visualizza> Nuova guida, Posizione: 100.
Creiamo la nostra intestazione. inizieremo creando una selezione di 1020x100px. quindi fai clic su Maiusc + Backspace per riempirlo (con qualsiasi colore solo per ora).
Assegnalo a Sovrapposizione sfumatura in base all'immagine seguente:
Ora chiama questo livello: "header_bg".
Scrivi il titolo del tuo sito Web con queste impostazioni:
Ora aggiungi una Sovrapposizione sfumatura al tuo testo con le seguenti impostazioni:
Per allineare il titolo del sito Web con lo sfondo dell'intestazione; Seleziona il livello del titolo e il livello "header_bg", quindi fai clic su Allinea centri verticali.
Scrivi il tuo testo di navigazione con queste impostazioni:
Crea un rettangolo arrotondato che rappresenterà un collegamento al passaggio del mouse. dovrebbe avere una dimensione di 65x35px - raggio di 5px, (riempilo con qualsiasi colore per ora).
Dagli una sovrapposizione di tratto e sfumatura in base all'immagine seguente:
Prima di passare al passaggio successivo, assicurati di mantenere i tuoi livelli ben organizzati, ecco come appare il mio!
È tempo di creare l'area dei disegni in primo piano. inizieremo impostando i nostri bordi inferiori aggiungendo una nuova guida orizzontale dopo 430 px.
Crea una selezione di 1020x430px come sfondo per l'area dei disegni in primo piano. e riempilo con qualsiasi colore.
Dagli una sovrapposizione sfumatura con le seguenti impostazioni:
Ora creiamo l'effetto smalto! creare una selezione di 1020x120px, riempirla con qualsiasi colore.
E quindi aggiungere una sovrapposizione sfumatura. usa l'immagine qui sotto per riferimento.
Ora riduci l'opacità del livello al 40%
Aggiungiamo alcuni tocchi! con lo strumento selezione riga singola crea una selezione 1px e allinei come segue:
Imposta il colore di primo piano su # acd86e quindi fai clic su Maiusc + Backspace per riempirlo; assicurati di usare il colore di primo piano come opzione di riempimento.
Garantisco che avrai i dettagli perfetti del pixel
Abbiamo finito di creare gli elementi di sfondo. quindi assicurati di dare loro nomi ideali, organizzali e raggruppali insieme.
Cerchiamo di essere più precisi! trascina due nuove guide in base all'immagine seguente
Scrivi alcune parole di benvenuto con queste impostazioni:
Personalmente ho scritto: "Ecco il nostro nuovissimo lavoro Oops Welcome!" ;) ma dobbiamo sottolineare la parola "Benvenuto!" in qualche modo. quindi fondamentalmente gli daremo una sovrapposizione gradiente. follow-up con l'immagine
Ora trascina due nuove guide orizzontali in base all'immagine seguente
Prima di dire addio a questo passaggio, assicurati di organizzare i livelli di testo.
Inizia creando una selezione di 250x150px (riempila con qualsiasi colore), questo sarà il nostro titolare dell'immagine.
Chiama questo livello "pic_holder" e prova ad allinearlo come nell'immagine sopra.
E dagli un colpo
Aggiungiamo un'immagine di un design in primo piano, per farlo vai su File> Inserisci e seleziona un'immagine. chiama il suo livello "pic" e assicurati di metterlo sopra il livello "pic_holder".
Fai clic con il pulsante destro del mouse sul livello "pic" e seleziona Crea maschera di ritaglio.
Per creare la nostra ombra, inizieremo duplicando i due livelli "pic" e "pic_holder".
Mentre hai selezionato i due livelli duplicati, vai a Modifica> Trasformazione libera e regola l'altezza a: -100,0%
Mentre continuiamo a selezionare i due livelli duplicati, fai clic con il pulsante destro del mouse su di essi e seleziona Converti in oggetto avanzato; chiama questo livello "ombra". e assicurati di posizionarlo in basso.
Seleziona il livello "ombra" quindi fai clic su Aggiungi maschera di livello (nella parte inferiore del pannello dei livelli)
Scegli lo strumento Gradiente (G) e con un gradiente lineare nero e bianco trascinato dal basso verso l'alto.
Dovresti avere qualcosa di simile!
Abbiamo bisogno di aggiungere una descrizione alla nostra immagine. quindi creeremo una selezione di 240x25px e la riempiremo con questo valore di colore: # 1a1919, funzionerà come sfondo della descrizione.
Scrivi una descrizione con queste impostazioni dei caratteri:
Assicurati di tenere in ordine il tuo documento!
Crea un'altra copia dell'immagine di design in primo piano e allinala a destra.
Renderemo l'immagine centrale un po 'più grande, quindi fai una selezione di 340x200px, allineala come la seguente e riempila con qualsiasi colore.
Daremo anche un colpo. usa la seguente immagine come riferimento
Ed ecco quello che abbiamo!
Assicurati di organizzare i tuoi livelli e raggrupparli. Personalmente ho creato tre gruppi separati. ecco come sembrano
Creiamo il nostro pulsante scorrevole! inizieremo creando un'ellisse di 50x50 px utilizzando lo strumento selezione ellittica (M) e riempiendolo con qualsiasi colore.
Ora dargli alcuni stili di livello in base alla seguente immagine
Con lo Strumento forme personalizzate (U) crea una freccia e assegnale i seguenti stili di livello
Dovresti avere qualcosa di simile
Non dimenticare di allineare il pulsante in base all'immagine seguente
Crea un'altra copia della freccia e allineala a destra
Lavoriamo sull'area del contenuto. inizia creando una selezione di 1020x815px
Fai clic su Maiusc + Backspace per riempire la selezione con questo colore: # e8e8e8
Con lo strumento selezione riga singola (M) crea una selezione 1px, posizionala come nell'immagine seguente e riempila con il bianco (#ffffff).
Ora stai avendo dettagli perfetti sui pixel!
Abbiamo bisogno di impostare i bordi superiori alla nostra area di contenuto. quindi trascineremo una nuova guida orizzontale dopo 50 px.
Scarica questo set di icone: Set base - Pixel Mixer e il luogo di loro come il seguente.
Trascina una nuova guida orizzontale nella parte inferiore dell'icona, lascia 20 px e trascina una nuova.
Ora scrivi alcuni titoli con queste impostazioni:
Trascina ancora altre due guide in base all'immagine seguente
Scrivi del testo con queste impostazioni:
Trascina più tre guide in base all'immagine seguente
È tempo di creare il nostro pulsante "leggi di più". Con lo strumento Rettangolo arrotondato (U) crea un rettangolo con raggio di 100x30px e 5px. e riempilo con qualsiasi colore solo per ora.
Assegna a questo rettangolo alcuni stili di livello. usa l'immagine qui sotto per riferimento.
Con lo strumento Ellisse (U) crea un'ellisse di 15x15 px e riempilo con questo valore di colore: # 4d4d4d.
Per allinearlo correttamente, seleziona il suo livello e il livello del rettangolo, quindi fai clic su Allinea centri verticali mentre entrambi i livelli sono selezionati.
Digita "+", riempilo con il bianco (#ffffff) e posizionalo in questo modo
Scrivi la parola "leggi altro" con le seguenti impostazioni di carattere:
Dagli una goccia d'ombra. usa l'immagine qui sotto per riferimento
Per creare una linea di separazione verticale, Con lo Strumento linea (U) creare due linee verticali accanto a ciascuna. e riempili con questi valori: #ffffff - # b3b3b3.
Allinea la tua linea come nella seguente immagine
Non dimenticare di organizzare i tuoi livelli. dai un'occhiata al mio!
Crea tre copie di ciò che abbiamo creato nei due passaggi precedenti. e avere qualcosa di simile!
Creiamo il nostro separatore.
Trascina una nuova guida orizzontale dopo 50 px
Con lo strumento Selezione ellittica (M) creare una selezione come quella sottostante.
Imposta il colore di primo piano sul nero (# 000000), quindi fai clic su Maiusc + Backspace per riempire la selezione. chiama questo livello "separator_bg".
Per renderlo sfocato, vai su Filtro> Sfocatura> Sfocatura gaussiana - raggio: 3 px.
Mentre selezioni il livello "separator_bg" selezionato, crea una selezione come quella sottostante e poi premi cancella.
Fai clic sull'icona Aggiungi maschera di livello. e imposta l'editor del gradiente su nero, bianco, nero.
Con lo strumento Sfumatura (G) trascinare con un gradiente lineare in base all'immagine seguente.
Riduci l'opacità del livello al 50%
Con lo strumento Linea (U) create due linee orizzontali una sopra l'altra e posizionatele sopra il separatore.
Riempi con # b3b3b3 - #ffffff e aggiungi loro la stessa maschera di livello.
Inizieremo a lavorare sulla nostra area di contenuto inferiore, trascinando una nuova guida dopo 50 px.
Aggiungi un titolo con queste impostazioni di carattere:
Trascina due nuove guide orizzontali in base all'immagine seguente.
Scrivi del testo con queste impostazioni dei caratteri:
Trascina una nuova guida dopo 160 pixel come margine inferiore per l'area del contenuto.
Scrivi un altro titolo e testo usando le stesse impostazioni dei caratteri che abbiamo usato nel passaggio precedente.
Digita una virgoletta sulla tastiera, con queste impostazioni dei caratteri:
E riduci l'opacità del suo livello al 50%
Scrivi una parola di saggio o preventivo con queste impostazioni di carattere:
Per creare una linea di separazione verticale, crea due linee verticali una accanto all'altra e riempile con questi valori: #ffffff - # b3b3b3.
Assicurati di mantenere il tuo livello organizzato, Ecco come li ho organizzati.
Scrivi ancora un altro titolo come quelli a sinistra (prova a scrivere qualcosa che rappresenti la squadra, ad esempio ho scritto "La nostra squadra").
Usando lo Strumento Rettangolo (U) crea un rettangolo 90x90px e riempilo con qualsiasi colore. chiama questo livello "photo1_holder"
Questo funzionerà come titolare di una foto di un membro del team. Ora dagli un colpo. Usa l'immagine qui sotto per riferimento.
Inserisci una foto di un membro e chiama il suo livello "foto1". Assicurati che il livello "foto1" sia sopra il livello "photo1_holder". quindi fai clic con il pulsante destro del mouse sul livello "foto1" e scegli Crea maschera di ritaglio. Dovresti inventarti qualcosa di simile qui sotto!
Scrivi del testo sul membro, utilizzando le seguenti impostazioni di carattere:
Creeremo noi stessi le icone dei social media! cominciamo con Twitter, digita la lettera "t" con queste impostazioni di carattere:
Dagli un tratto secondo l'immagine seguente.
Creiamo quello di LinkedIn! Digita la parola "in" con queste impostazioni di carattere:
Facebook!? Digita la lettera "f" con queste impostazioni di carattere:
Crea un'altra copia della foto del membro. mentre selezioni il livello foto, vai a Livello> Nuovo livello di regolazione> Bianco e nero.
Assicurati di selezionare "Usa livello precedente per creare maschera di ritaglio"
Digitare lo stesso testo, le lettere dei social media che abbiamo scritto prima di usare le stesse impostazioni dei caratteri, ma dare loro tutto questo valore di colore: # 505150.
Quindi, ovviamente, il membro apparirà grigio quando non è aleggiato!
Fai due copie e allinei in questo modo
Per assicurarsi che siano ben allineati, crea quattro gruppi separati ognuno dei quali contiene il contenuto di un membro e fai clic su Distribuisci i bordi a sinistra nella barra di controllo mentre i quattro gruppi sono selezionati.
Ho organizzato i miei strati, tu?
Prima di iniziare a lavorare sull'area dei link dei social media, abbiamo bisogno di impostare alcuni bordi, ecco perché trascineremo due nuove guide in base alla seguente immagine!
Crea una selezione di circa 940x70px e allinala come nell'immagine qui sotto.
Riempi con qualsiasi colore, quindi aggiungilo a Sovrapposizione sfumatura. usa l'immagine qui sotto per riferimento.
Crea un rettangolo di 70x45 px. usa l'immagine qui sotto per allinearla e per dargli alcuni stili di livello. chiama questo livello "tw_bg"
Nascondi il livello "tw_bg" per lavorare liberamente.
Crea un altro rettangolo di 10 x 43 px e vai a Modifica> Trasforma percorso> Inclina. regola queste opzioni nella barra di controllo:
Chiama questo livello "effetto" e rendi nuovamente visibile il livello "tw_bg".
Copia lo stile del livello dal livello "tw_bg" e incollalo nel livello "effetto".
Scrivi la lettera "t" con queste impostazioni di carattere:
Dagli anche alcuni stili di livello in base all'immagine seguente.
Ripeti il passaggio 20 per creare un altro separatore o copiarlo. quindi posizionalo in questo modo:
Dobbiamo tagliare la parte destra del rettangolo, eh !? per farlo seleziona il livello "tw_bg" e clicca su Aggiungi maschera di livello.
Fai una selezione sulla parte destra (che dobbiamo tagliare) del rettangolo, imposta il colore di primo piano sul nero (# 000000) quindi fai clic su Maiusc + Backspace per riempirlo.
Scrivi del testo - che in realtà dovrebbe essere un Tweet - con queste impostazioni di carattere:
Per allineare bene il testo, mentre hai selezionato il livello testo e il livello della barra verde, fai clic su Allinea centri verticali.
Ripeti il passaggio 27 per creare qualcosa come nell'immagine qui sotto. Crea anche un rettangolo, riempilo con # 334814 e riduci il livello Opacità al 40%.
Assegna al rettangolo grande alcuni stili di livello in base all'immagine seguente
Ora riempi il rettangolo inclinato con un colore più scuro di questo valore: # 2a6788
Scrivi la lettera "t" con queste impostazioni di carattere:
E dagli un colpo. usa l'immagine qui sotto per riferimento
Assicurati di organizzare i tuoi livelli e raggrupparli insieme.
Crea un'altra copia dell'icona di Twitter, cambia la Sovrapposizione colore (per il grande rettangolo) in: # 0080ab e riempi il rettangolo inclinato con questo valore di colore: # 00526d.
Scrivi la parola "in" con queste impostazioni di carattere:
Crea una terza copia dell'icona di Twitter o di LinkedIn, cambia la Sovrapposizione colore (per il grande rettangolo) a: # 395796 e riempi il rettangolo inclinato con questo valore di colore: # 263e6f.
Scrivi la lettera "f" con queste impostazioni di carattere:
Crea un'ultima copia, cambia la Sovrapposizione colore (per il grande rettangolo) a: # e8e8e8 e riempi il rettangolo inclinato con questo valore di colore: #cdcdcd.
Scrivi la parola "fr" con queste impostazioni di carattere:
Metti ciascuna delle icone in un gruppo separato e mentre selezioni le quattro fai clic su Distribuisci i bordi sinistro .
Continua così! è rimasto solo il piè di pagina. Crea una selezione di 1020x460px e riempila con qualsiasi colore per ora.
Applicare una sovrapposizione sfumatura ad esso. usa l'immagine qui sotto per riferimento.
Dovresti avere una bella ombra!
con lo strumento selezione riga singola (M) crea una selezione 1px e riempila con il bianco (#ffffff).
Trascina due nuove guide orizzontali in base all'immagine seguente.
Scrivi un titolo con queste impostazioni di carattere:
Scrivi un sottotitolo con queste impostazioni di carattere:
Usando lo Strumento Linea (U) crea due linee orizzontali una sopra l'altra e riempile con questi valori cromatici: # 151515 - # 2f2f2f.
Allinearlo in questo modo.
Trascina due nuove guide orizzontali in base all'immagine seguente.
Con lo Strumento rettangolo arrotondato (U) crea due rettangoli di 210x25 px - 5 px di raggio, riempili con: # 141313 e dai loro un'ombra interna.
Scrivi del testo all'interno dei due rettangoli con queste impostazioni dei caratteri:
Accentsconagua