Share
Seguimi mentre passo attraverso il processo di costruzione di un layout di portfolio fotografico pulito e moderno. Tratteremo alcuni concetti base di Photoshop, incluso come lavorare con griglie, trasparenza, design di icone e altri argomenti interessanti.
Progetteremo il nostro modello come un architetto costruisce una casa; da zero. La base del nostro tema è la base, quindi prepariamo tutto ciò di cui abbiamo bisogno. Inizia creando un nuovo documento di dimensioni 1420x850px come nella schermata mostrata sotto.
Puoi riempire lo spazio vuoto con una foto di tua scelta o quella che troverai nel download sorgente (originariamente trovata su wallon.ru).
In modo che la nostra immagine di sfondo non distolga troppa attenzione dal resto dell'interfaccia, la oscureremo con un leggero effetto pattern. Crea un nuovo documento di dimensioni 3x3 px, seleziona lo strumento matita (o semplicemente premi B) e disegna due linee parallele:
Ora dobbiamo salvare questo modello nel nostro archivio andando in Modifica> Definisci modello ... Fatto ciò, tornare al documento principale e applicare il motivo sull'immagine. Lo troverai disponibile tra gli altri modelli in Livello> Stile livello> Sovrapposizione modello ...
Scegli il pattern che abbiamo creato in precedenza e imposta l'opacità al 20%. Abbiamo bisogno di mantenere il file .psd organizzato dall'inizio, quindi crea una nuova cartella nella sezione "Livelli" e inserisci la nostra immagine all'interno (se non vedi il pannello Livelli, vai su Finestra> Livelli)
Molti temi fotografici utilizzano loghi minimalisti per non contrastare con l'atmosfera di ogni foto. Ora progettiamo un logo semplice ma attraente. Ho deciso di chiamare il modello "Microfilm" così ho digitato "micro" usando Aller Bold e "film" usando Aller Regular, entrambi a 40px.
Posiziona il testo da qualche parte nel documento principale, ora applichiamo alcuni effetti al logo per renderlo più attraente. Seleziona il livello "micro" e vai a "Livello> Stile livello> Bagliore esterno".
Dopo aver applicato un bagliore esterno, passa alla sezione Sovrapposizione sfumatura e applica il seguente effetto.
Ora aggiorniamo anche il livello "film" con alcuni effetti. Useremo lo stesso effetto Bagliore esterno come mostrato sopra, tuttavia, la sovrapposizione del gradiente è diversa. Vai a Livello> Stile livello> Sovrapposizione sfumatura.
Una volta che abbiamo finito di creare il logo, possiamo finalmente metterlo al suo posto. Uno degli spot migliori per un logo è l'angolo in alto a sinistra dello schermo (gli utenti sono abituati a trovarlo lì, in particolare nei paesi di lettura da sinistra a destra, dall'alto verso il basso). Ho giocato con esso per un po 'fino a quando mi è piaciuto il posizionamento: creare due nuove guide utilizzando Visualizza> Nuova guida ...
Crea una nuova guida orizzontale usando le nuove impostazioni.
Usa le guide per orientare e posizionare il tuo logo.
Non dimenticare di creare una nuova cartella e posizionare il logo al suo interno per mantenere tutto pulito.
Il nostro menu è un insieme di quadrati etichettati con numeri che si aprono quando vengono posizionati al passaggio del mouse. Il menu verrà posizionato verticalmente al centro, quindi lasceremo 260 px in alto e 260 px in fondo alla nostra area, che ci offre un'area di lavoro di 330 px in altezza. Creiamo le guide richieste per mantenere più facilmente i nostri processi di progettazione Visualizza> Nuova guida ...
Mi piacerebbe darti un consiglio in più, nel caso non sapessi come nascondere temporaneamente le guide premi CTRL + H. Quindi creiamo la nostra prima scheda di menu, selezioniamo lo strumento Rettangolo (o premi U) e mentre tieni premuto il pulsante Maiusc crea un quadrato di 64 x 64 px. Per vedere le dimensioni attuali della tua forma, controlla il pannello delle informazioni (Finestra> Informazioni). Dopo aver creato il primo quadrato, posizionalo nell'angolo della guida che abbiamo creato in precedenza.
Seleziona la tua casella quadrata e riduci l'opacità al 78%.
Usando il carattere Calibri (o qualcosa di silmilar) digita "1" e imposta la dimensione a 29px. Cambia il colore in # d0d0d0 e mettilo nel mezzo della nostra scheda del menu quadrato. Mantieni organizzato il tuo modello creando una cartella specifica per il menu.
Tieni premuto ALT + MAIUSC e trascina verso il basso la casella del menu, lasciando una distanza di 1 pixel. Segui questo passaggio per creare cinque schede di menu e cambiare i loro nomi ai rispettivi numeri.
La parte finale di questo passaggio è la creazione di un effetto hover, selezionare la base del secondo (o qualsiasi altra scheda) e premere CTRL + T. Trascinare la casella orizzontalmente ed estendere la larghezza a 270px. Dopo aver ingrandito la forma, cambia il colore della scatola in # e42b17.
Creare una nuova guida per allineare correttamente il testo del menu, utilizzare le impostazioni indicate di seguito:
Seleziona il carattere Cicle (Gordita) e inserisci il testo del menu a discesa. Ho scritto "shortcode" a 27px e impostato il colore su # f4f4f4. Metti il tuo testo sulla stessa riga del numero e ricorda di usare le guide come linee di orientamento.
Non c'è nulla di complicato nella creazione dello sfondo di questo modello, tuttavia è molto importante rispettare rigorosamente le dimensioni perché rappresenterà la nostra area di contenuti. Non abbiamo bisogno dello sfondo fotografico per distrarre la nostra attenzione dall'area del contenuto, per questo lo progetteremo in modo che occupi solo metà della pagina.
Prendi lo strumento rettangolo e crea una forma 710x850 (metà del nostro documento principale), riempila di nero e imposta l'opacità al 78%.
Finalmente, siamo pronti per iniziare il nostro viaggio alla pagina dei contenuti, la cui struttura dipende dal modo in cui allineamo i nostri contenuti. Questo è il motivo per cui è così importante per noi creare le guide necessarie sin dall'inizio in modo da poter impostare perfettamente il nostro contenuto e alleggerire i nostri occhi con il fascino della simmetria. Creiamo le guide utilizzando Visualizza> Nuova guida ...
Seleziona lo strumento Elipse e crea un cerchio di dimensioni 50x50 px, posizionalo nell'angolo delle nostre guide ai contenuti e applichiamo alcuni effetti di stile. Inizialmente imposta l'opacità del livello all'85% e quindi vai a Livello> Stile livello> Bagliore esterno.
Quindi passa alla sezione sfumatura e applica il seguente effetto:
Seleziona lo Strumento forma personalizzata, scegli un'icona che ti piace, quindi mentre tieni premuto shift la applica al centro del cerchio.
Cerchiamo di stilizzare la nostra forma personalizzata con un gradiente semplice.
Imposta visivamente una nuova guida nella parte inferiore del cerchio che abbiamo creato in precedenza. Prendendo il centro del cerchio come un punto di orientamento, digitare un titolo casuale. Ora aggiorna le impostazioni del testo; imposta Aller font 14px e vai a Livello> Stile livello> Bagliore esterno.
Quindi passa alla sezione Sovrapposizione sfumatura e crea un nuovo effetto.
Abbiamo bisogno di tre colonne per i nostri header post e, come ho detto prima, è molto importante prestare attenzione alla spaziatura e rispettare la simmetria. Potremmo fare con la creazione di alcune nuove guide per posizionare i nostri header post una volta terminati, seguire la stessa procedura come prima Visualizza> Nuova guida ...
Usando il carattere Sansa Regular con le dimensioni di 14px, digita un testo casuale. Durante la progettazione di un modello, di solito visito un sito Web fittizio di testo. Digita il tuo contenuto nella colonna "guida" che abbiamo creato in precedenza.
Ora diamo uno stile al nostro testo applicando una sfumatura personalizzata, quindi vai a Livello> Stile livello> Sovrapposizione sfumatura.
Seleziona l'intera colonna e mentre tieni premuto ALT + MAIUSC trascinalo nell'area libera creata dalle guide, quindi ripeti lo stesso passaggio per creare la terza colonna.
Apporta alcune modifiche generali al testo e alle icone; non dimenticare di strutturare tutto in cartelle per mantenere pulito il documento.
La parte finale di questo passaggio è la creazione di un separatore che serve a dividere il nostro contenuto. Ci sono molti modi per crearlo, ma userò uno dei metodi più semplici. Seleziona lo strumento linea e disegna una forma da un lato del margine guida all'altro.
Applicare alcuni effetti di stile sulla linea per renderla più attraente; vai a Livello> Stile livello> Sfalsa ombra.
Andiamo direttamente al punto. Dobbiamo creare la sezione galleria e inizieremo con il titolo. Creare una nuova linea guida nello stesso modo in cui abbiamo fatto prima di Visualizza> Nuova guida ...
Digitare "Gallery Showcase" o qualsiasi altro titolo utilizzando il font Aller e impostare la dimensione su 19px. Quindi posiziona il nostro testo all'angolo della guida che abbiamo creato in precedenza.
Useremo gli stessi effetti di stile del titolo dei nostri migliori contenuti. Per fare ciò seleziona gli effetti di testo dalla casella "Livelli" e trascina su "Galleria Vetrina".
Prima di continuare a lavorare sulla sezione Galleria, creiamo un'altra guida che rappresenterà il bordo dell'area della galleria.
Lascia un piccolo spazio vuoto sotto il titolo e digita un testo casuale usando Sansa (14px) ma ricorda di non oltrepassare la linea di confine che abbiamo creato qualche tempo fa.
Allo stesso modo abbiamo trascinato gli effetti del titolo del contenuto più in alto nel titolo della galleria, trascinando l'effetto del testo del contenuto più alto in quello della galleria.
È tempo per la parte più importante della sezione galleria; creando le cornici. Ci sono molti modi efficaci per progettare questo, ma quelli sarebbero meglio spiegati in uno screencast in cui è possibile vedere ogni parte del processo. Questo è il motivo per cui disegnerò le immagini della nostra galleria in un modo più primitivo.
Seleziona lo strumento Rettangolo arrotondato, imposta il raggio su 10px e crea una dimensione di 327 x 145 pixel.
Vai a Livello> Stile livello> Traccia e applica un tratto 4px colorato # b63f25, quindi posiziona l'immagine tra le guide.
Seleziona di nuovo lo strumento Rettangolo e crea una nuova dimensione 91x60px (raggio 10px), dopodiché applica un tratto 2px.
Tieni premuto ALT + MAIUSC e trascina la forma che abbiamo creato pochi istanti fa, lasciando una distanza di 24 pixel prima di ciascuna. Crea altre due caselle in questo modo e non dimenticare di rispettare la linea di confine.
Prima di iniziare il nostro lavoro nella sezione notizie, creiamo un separatore verticale che dividerà queste due sezioni. Iniziamo creando una guida Visualizza> Nuova guida ...
Seleziona lo strumento Linea e crea una forma con l'altezza di 325 px, quindi posizionala nella posizione della guida creata in precedenza.
Ora stilizziamo il separatore; vai a Livello> Stile livello> Sfalsa ombra.
Infine, possiamo continuare con la creazione della sezione notizie. Crea una nuova linea guida e quindi seleziona il titolo "Galleria". Tenendo premuto ALT + MAIUSC, trascinalo nell'angolo creato dalle guide, dopo di che lo rinomina.
Seleziona lo strumento Rettangolo rotondo e con il raggio di 10 px, crea una forma 74x61 px. Applicare un tratto di due pixel e posizionare il rettangolo di alcuni pixel sotto il titolo principale.
Digitare un testo casuale composto da tre linee (non superare i limiti della linea di confine) utilizzando il carattere Sansatio di dimensioni 12 px e trascinare gli effetti dal testo della galleria.
Usando lo stesso stile di testo che ho scritto "Scritto da Random Person su Random Date", non ho usato effetti originali ma ho applicato alcune sovrapposizioni di colori semplici.
Seleziona il livello del separatore orizzontale e duplicalo, dopo di che ridimensionalo usando CTRL + T a 292 px e spostalo sotto il post delle notizie appena creato.
Seleziona il tuo post tutto insieme con un separatore e mentre tieni premuto ALT + MAIUSC trascinalo verso il basso per creare altri due post. Esegui le modifiche richieste al testo.
Prendi di nuovo il separatore orizzontale superiore e mentre tieni premuto ALT + MAIUSC trascinalo sotto la galleria e la sezione delle notizie.
Benvenuti al passaggio finale, un po 'di più e abbiamo finito con il nostro modello di Fotografia quindi andiamo dritti al punto! Digita il titolo della tua area preventiva usando lo stesso stile di testo della galleria e titoli delle ultime notizie.
Creiamo una nuova linea guida per le nostre virgolette.
Usando Arial, digita il simbolo delle virgolette ("e;), imposta la dimensione su 204px, quindi applica i seguenti effetti, posizionandola lungo la linea guida creata in precedenza.
Ho digitato una citazione usando il font Aller Italic, con una dimensione di 18px e applicato la stessa sfumatura del testo generale della sezione galleria. Trascina gli effetti nello stesso modo in cui lo abbiamo fatto alcune volte prima (non dimenticare di rispettare le linee del bordo).
La parte finale di questo passaggio è la creazione di un pulsante "READ MORE". Seleziona lo strumento Rettangolo arrotondato e crea una dimensione pari a 182x36 px con raggio di 10 px, quindi applica un effetto sfumatura come mostrato di seguito.
Duplicare il livello e quindi sottrarlo con un rettangolo e applicare lo stesso gradiente usato per le virgolette, quindi aggiungere alcuni piccoli dettagli come testo e freccia.
Sono stati fatti! Grazie per aver visionato questo tutorial, spero che tu abbia imparato qualcosa di nuovo e che potrai utilizzare alcune di queste tecniche nei tuoi progetti. Se hai bisogno di ulteriori consigli, sentiti libero di lasciare commenti o domande e sarò più che disposto ad aiutare.
Accentsconagua