-
DarkDevil88.
User deleted
Ecco il risultato finale: SPOILER (click to view)
Ora iniziamo:
1 - La prima cosa da fare è creare un nuovo documento di dimensione 1020×1200 pixel.
2 - Poi prendete lo strumento Secchiello e riempite lo sfondo con il colore #1F2329.
3 - Usando lo strumento di selezione rettangolare, fate una selezione come mostrato nell'immagine sottostante, cliccateci dentro con il tasto destro e scegliete "Nuovo Livello". Dopodichè riempite la selezione con un colore a piacimento.
4 - Inserite le seguenti opzioni di fusione nel vostro livello cliccando con il tasto destro del mouse sul livello creato poco fa e scegliendo opzioni di fusione dal menù a tendina.
5 - Per il logo aggiungiamo del semplice testo in alto a sinistra. Io ho utilizzato il font Myriad Pro (che si trova già di base in Windows) e il colore #FFFFFF. Dopo avere posizionato il vostro testo, aggiungete delle opzioni di fusione su di esso come mostrato qui di seguito:
6 - Il testo dovrebbe apparire pressochè così:
7 - Io per abbellirlo un po ci ho aggiunto una piccola icona presa dal pacchetto di icone scaricabile QUI. Per questa icona ho utilizzato le stesse opzioni di fusione utilizzate per il livello precedente (quello del testo). Eccone il risultato:
8 - La prossima cosa da fare è aggiungere dei "link" alla nostra intestazione. Usate lo "Strumento di Testo", impostate il font su "Georgia" e aggiungete alcuni link come mostrato qui di seguito:
9 - L'icona RSS usata si trova sempre nell'Icon Pack che vi ho fatto scaricare nel punto 7.
10 - Ora dobbiamo creare dei divisori tra i nostri link. Per fare ciò create un nuovo livello e con lo "Strumento di Selezione Rettangolare" fate una selezione di 1px e riempitela col colore #FFFFFF:
11 - Ora inseriamo su questo livello le seguenti opzioni di fusione:
12 - Andiam avanti e duplichiamo il livello appena creato (quello del divisore) il tot di volte che ci serve in modo da separare i vari link. Alla fine avrete qualcosa tipo:
13 - Usando sempre lo "strumento di selezione rettangolare" effettuate una selezione (e ricordate di fare sempre nuovo livello) simile alla seguente e riempitela con il colore #18191B.
14 - Usando lo "Strumento di Testo" andate ad inserire del testo come mostrato qui sotto per rappresentare le vostre categorie. Come font ho utilizzato Helvetica ma se non riuscite a trovarlo potete sempre cercare una variante molto simile chiamata Coolvetica. L'icona mostrata la trovate sempre all'interno dell'Icon Pack di prima.
15 - La prossima cosa da fare è quella di creare la nostra featured area. Usando questa volta lo "Strumento Rettangolo Arrotondato" , con un raggio di 10 px e il colore settato a #FFFFFF, fare un rettangolo simile a questo:
16 - Usando sempre lo "Strumento Rettangolo Arrotondato" con un raggio di 10px e di colore #000000 fate un rettangolo simile a quello illustrato qua sotto. Rasterizzate il livello (tasto destro del mouse sul livello ---> rasterizza livello) e quindi utilizzate lo "strumento di selezione rettangolare" per effettuare la selezione della parte destra del vostro rettangolo arrotondato, quindi andate su Modifica ----> Taglia (li trovate in alto nella barrà dei menù in Photoshop) per rimuovere gli angoli arrotondati. Come risultato dovreste ottenere questo:
17 - Ora inserite le seguenti opzioni di fusione:
18 - Ora inserite questa icona prendendola sempre dall'Icon Pack e posizionatela come in figura:
19 - Ora dobbiamo fare la stessa cosa dall'altro lato. Per fare ciò vi consiglio di duplicare il livello del rettangolo nero e della freccia e poi ruotarli (CTRL + T poi cliccate con il tasto destro del mouse e scegliete ruota e lo ruotate muovendo il mouse). Avrete qualcosa come:
20 - Ora dobbiamo aggiungere le nostre thumbnails (anteprime delle immagini). Usando lo "Strumento di Selezione Rettangolare" (o lo strumento rettangolo che io ho preferito) facciamo un rettangolo simile a quello in figura e rimpiamolo del colore che preferiamo.
21 - Ora inseriamo le seguenti opzioni di fusione:
22 - Ora inserite la vostra immagine thumbnail. Ora utilizzando nuovamente lo "Strumento di Selezione Rettangolare" facciamo una selezione sulla parte inferiore dell'immagine appena inserita e riempitela con il colore #1F2329 (su questa selezione poi andremo a scrivere la descrizione del''immagine)
23 - Ora abbassate l'opacità di questo livello al 73% circa e quindi inserite le seguenti opzioni di fusione:
24 - Ora non ci rimane che aggiungerci sopra del testo che descriva l'immagine e ripetere gli ultimi punti in modo da ottenere questo:
25 - Ora passiamo a creare l'area dei contenuti. Usate lo "Strumento Rettangolo Arrotondato" con un raggio di 10px e fate un rettangolo arrotondato così:
26 - Per le immagine che inseriremo qui utilizzeremo le stesse opzioni utilizzate per gli altri rettangoli con immagini di prima. L'unica cosa che cambierà è la posizione dei titoli. L'icona a forma di cuore utilizzata si trova sempre nell'Icon Pack; il colore del font utilizzato è 0C57C6. Per lo sfondo del titolo è #0C57C6 e (escluso per la prima thumbnail) settate l'opacità a 9%. Una volta fatto avrete ottenuto qualcosa simile a:
27 - L'ultima cosa da fare è aggiungere l'impaginazione e il footer. Per l'impaginazione usiamo semplicemente il colore #FFFFFF . Per fare il rettangolo della pagina attiva (il rettangolino rosa), usiamo il colore #FC4F83 (e ricordate di trascinare il livello del rettangolino prima di quello del testo. Per il testo sulla destra ("1 of 132") usiamo il colore #6A7278. Fatto ciò facciamo la parte finale della pagina utilizzando lo stesso rettangolo e le stesse opzioni utilizzate per fare le categorie utilizzati nei punti 13-14. Et voilà:
fonte: scritta interamente da me, immagini prese da un amico (Matthew Heidenreich).
Photo gallery Website Layout con Photoshoptutorial Photoshop |