Share
Qual è la cosa numero uno che vuoi che faccia il tuo sito portfolio? Spicca! Oggi, Paul J Noble ci guiderà attraverso la creazione del suo sito portfolio dal design unico. Ci mostrerà suggerimenti e trucchi in Adobe Photoshop, nonché alcuni approcci intelligenti per distinguersi dagli altri siti di portfolio.
Pensa al tuo portfolio, il sito è il tuo portavoce online per i potenziali clienti. Se fatto correttamente, dovrebbe dire alle persone quello che fai, mostrare il tuo lavoro migliore e dare loro l'opportunità di entrare in contatto con te. È tutto piuttosto ovvio - quindi qual è la differenza tra un sito di portfolio ordinario e uno veramente notevole?
La chiave per un sito portfolio efficace non è solo avere grandi progetti - sta lasciando un'impressione duratura sui visitatori. Certo, questo potrebbe significare avere illustrazioni incredibili se sei un grafico - ma per i web designer e gli sviluppatori, questo spesso significa dover spingere i confini di UI / UX e codifica per mostrare i nostri punti di forza.
In questo tutorial, Paul J Noble ci mostrerà come ha utilizzato alcuni semplici, ma notevolmente innovativi approcci all'UI / UX sul proprio sito per creare un sito portfolio che estenda le aspettative dell'utente utilizzando l'interattività e gli effetti di luce tenui.
Tuffiamoci dentro!
Crea un nuovo documento in Photoshop che è 1400 x 900. Il sito finale HTML renderizzato sarà caratterizzato da elementi "liquidi" (cioè scalabili) quindi dovremo tenere presente che il progetto finale non sarà una dimensione fissa.
Creare uno sfondo solido è un modo semplice per iniziare. Per questo motivo useremo un colore di base
è abbastanza scuro da accentuare le immagini in primo piano mentre si compensa anche il nero puro che può apparire nelle immagini del folio. Useremo anche alcuni blu per creare un colore scuro "freddo" che si integrerà con gli elementi dell'interfaccia.
Seleziona Livello> Nuovo livello di riempimento> Colore solido e assegna il colore # 252a3b.
Poiché stiamo utilizzando un layout scalabile, dobbiamo definire la larghezza orizzontale minima. Per la maggior parte dei siti commerciali si tratta di circa 1000 pixel per ospitare utenti con display a risoluzione 1024x768. Tuttavia per questo sito punteremo a 1100 pixel come larghezza minima.
Innanzitutto, assicurati che le unità guida siano impostate su pixel. Questo può essere impostato andando su Preferenze> Unità e guide.
Quindi, vai a Visualizza> Nuova guida. Dato che metteremo i nostri contenuti al centro e puntiamo a una larghezza minima totale di 1100 pixel, dovremmo posizionare guide verticali a 150px e 1250px.
La sottile striscia diagonale aiuterà a sollevare il design creando una separazione tra gli elementi del portfolio in primo piano e lo sfondo con texture.
Per raggiungere questo obiettivo applicheremo un livello di riempimento del modello. Tuttavia, per prima cosa dobbiamo creare il modello.
Crea un nuovo documento 12x12 pixel con uno sfondo trasparente e aggiungi un nuovo livello di riempimento con un riempimento nero (# 000000).
Ora aggiungi un nuovo livello (Livello> Nuovo> Livello). Usando lo strumento matita con una dimensione del pennello di 1 px, disegna tre linee esattamente come appaiono nell'immagine qui sotto.
Disattiva il livello di riempimento e imposta l'opacità del livello delle linee al 6%. Per salvare questo come il nostro modello seleziona Modifica> Definisci modello.
Ritornando alla nostra tela originale, crea un nuovo livello con la trama selezionando Livello> Nuovo livello di riempimento> Motivo e seleziona il modello precedentemente definito.
Ora che abbiamo creato la nostra base, possiamo rilasciare alcuni strati piatti che comprendono gli elementi principali del sito
Innanzitutto, la nostra navigazione. Poiché questo sito sarà progettato per non avere scrolling verticale, possiamo posizionare la navigazione per allinearla alla parte inferiore dello schermo.
Crea un nuovo gruppo nella palette dei livelli ed etichetta questo gruppo "Navigazione".
Quindi crea un nuovo livello usando lo Strumento Rettangolo (U). Con la finestra Informazioni aperta, disegna questa forma in modo che sia 1400x61 (l'intera larghezza della finestra del documento e 61 pixel di altezza). Allinea questo livello nella parte inferiore della finestra del documento.
Ora applica un gradiente al livello facendo clic con il pulsante destro del mouse sul livello di forma nella palette Livelli e selezionando Opzioni di fusione, quindi selezionando Sovrapposizione sfumatura (in alternativa, seleziona Livello> Stile livello> Sovrapposizione sfumatura)..
Nell'Editor Graident, fare clic sul selettore del colore inferiore per aprire il Selettore colore. Per il colore di sinistra (parte inferiore della forma) usa # 2f313a. Per il colore giusto (top of shape) usa # 3c3f49.
Quindi, crea un nuovo livello e applica questo "highlight". Usando lo strumento Matita con un pennello 1px e il colore #ffffff, traccia una linea tenendo premuto lo spostamento lungo la parte superiore della forma rettangolare precedentemente creata. Quindi imposta l'opacità di questo livello al 6%.
Creare un nuovo livello di testo a 20 pixel dal lato sinistro del documento e allineare il testo da centrare verticalmente sul livello del rettangolo di navigazione.
In questo esempio il carattere DIN Light è stato applicato a 14px con un tracking di 200. Per creare uno spostamento tra due parti del tipo di logo vengono utilizzati due colori. Per la prima parte #dddddd e la seconda parte più scura # 737375.
Successivamente, aggiungi un'ombreggiatura sottile per creare l'aspetto del testo inserito nello sfondo. Seleziona Livello> Stile livello> Sfalsa ombra.
Deseleziona 'Usa luce globale', cambia la direzione a -45 gradi, imposta dimensioni a 0px, distanza 1px e opacità 30%.
Per i pulsanti di navigazione principali useremo una forma rettangolare arrotondata.
Crea un nuovo gruppo chiamato 'pulsanti'.
Crea una nuova forma di rettangolo arrotondato che è 279x31 e sfalsa 20 px dal lato destro della finestra del documento e centrato verticalmente nel rettangolo di navigazione.
Fare clic con il pulsante destro del mouse sul livello nella tavolozza dei livelli e selezionare Opzioni di fusione. Controlla Sovrapposizione sfumatura e utilizza i valori # 292c33 su # 43464f. Fare clic su OK e quindi selezionare Bevel & Emboss.
Per Bevel & Emboss impostare la dimensione su 0px con una direzione di 122 gradi. Quindi imposta l'opacità di luce e ombra su 10% per creare un effetto di luce coerente e sottile.
Aggiungi etichette di testo usando le stesse impostazioni dei caratteri applicate per il tipo di logo. Poiché le etichette dei pulsanti sono contenute in uno spazio verticale più piccolo dovremmo ridurre la dimensione a 12 px e stringere il tracciamento a 100. Utilizzare gli stessi colori del tipo di logo, tuttavia applicare il colore più chiaro per l'etichetta della pagina attiva.
Per separare i pulsanti mantenendo l'aspetto leggermente illuminato della navigazione dovremmo disegnare due linee, ciascuna larghezza 1px. Il primo dovrebbe essere nero (# 000000) e l'altro bianco (#FFFFFF). Imposta l'opacità per il livello bianco al 6% e il livello nero al 12%. Duplica questi livelli facendo clic tenendo premuto Maiusc e poi facendo clic con il pulsante destro del mouse sulla selezione. Posiziona i livelli duplicati con spaziatura costante all'interno della navigazione.
Questi pulsanti hanno una funzione diversa dal resto del nav, quindi applicheremo uno stile che suggerisce questo. Inseriamo questi pulsanti per completare la navigazione principale.
In primo luogo, crea un nuovo gruppo chiamato "social" e annida questo gruppo nel gruppo padre "di navigazione".
Ora, usando lo strumento Rettangolo arrotondato con un raggio di 4 px e tenendo premuto il tasto Maiusc, create una forma quadrata di 25x25 px. Centrare verticalmente questo nella navigazione e posizionare la forma a 22 px a sinistra dei pulsanti di navigazione principali.
Fare clic con il pulsante destro del mouse sulla forma appena creata e selezionare Opzioni di fusione.
Aggiungi un'ombra esterna. Per quest'ombra utilizzeremo il bianco (#FFFFFF) e imposteremo la modalità di fusione su Schiarisci. Imposta la distanza su 1px, spread a 0% e size a 0px. Questo creerà un effetto del bordo inferiore illuminato e quindi il pulsante inserito.
Successivamente, mentre sei ancora nella finestra Stile livello, controlla l'ombra interna. Usa il nero (# 000000) con l'opacità al 39%, la distanza 1 px e la dimensione 4 px.
Infine, seleziona Color Overlay e usa # 353741. Questo appiattirà l'aspetto della forma e aggiungerà contrasto con lo sfondo.
Per le icone dei social media prendiamo un'immagine esistente e tracciamo i bordi usando lo strumento penna per creare un tracciato (assicurati che Paths sia selezionato nel menu Strumenti dello strumento).
Dopo aver creato un percorso dell'icona, utilizzare lo Strumento selezione tracciato e fare clic con il pulsante destro del mouse sul percorso appena creato (assicurarsi che il percorso sia selezionato nella palette Percorsi). Seleziona Definisci forma personalizzata? Salva la forma.
Ora possiamo usare l'icona come un oggetto vettoriale scalabile. Utilizzando lo strumento Penna, cambia le opzioni in Strati di forma (elemento in alto a sinistra nella barra delle opzioni) e seleziona Strumento forma personalizzata, quindi seleziona l'icona appena creata. Tenendo premuto il tasto Maiusc, trascinare l'oggetto in modo che si adatti al riquadro dell'icona.
Imposta l'opacità dell'icona al 20%.
Ripeti questi passaggi per le eventuali icone dei social media rimanenti.
In questo esempio mostreremo le immagini del folio che sono 640x480 px.
Poiché vorremmo centrare verticalmente l'immagine in primo piano all'interno dello spazio sopra la navigazione, abbiamo bisogno di aggiungere altre guide. Seleziona Visualizza> Nuova guida e Aggiungi guide orizzontali a 180px e 660px. Questo posizionerà la nostra immagine visualizzata nel mezzo dello spazio verticale sopra la navigazione.
Avremo anche bisogno di un testo a sinistra dell'immagine in primo piano, quindi aggiungeremo guide verticali a 400px e 350px per fornire margine per il testo e consentire lo spazio per la navigazione accanto all'immagine. Infine aggiungi guide verticali a 1040px e 1070px per definire il bordo dell'immagine visualizzata e il margine tra l'immagine adiacente.
Crea un nuovo gruppo chiamato "Progetti". Quindi, usando lo strumento Rettangolo, disegna un rettangolo di 640x480 px che si allinea alla parte superiore sinistra della guida verticale a 400 px e quella superiore alla guida orizzontale a 180 px. Questo servirà da segnaposto per la nostra immagine principale.
Fai clic con il pulsante destro del mouse sul livello appena creato e seleziona Rasterizza livello.
Ora, tenendo premuto il tasto Alt, clicca e trascina il livello per creare un duplicato. Sposta questo livello a destra del livello con margine di 30 pixel per allinearlo con la guida a 1070 px e utilizzando la stessa linea di base.
Crea altri due duplicati e allineali al fondo di ciascuno con un margine di 30 pixel tra ciascuno.
Quindi, utilizzando lo strumento Secchiello, riempire ciascuna di queste forme con il colore # 252a3a.
Crea un nuovo gruppo chiamato "Vignetta" sotto il gruppo "Navigazione" e sopra il gruppo "Progetti".
Crea un nuovo livello e usa lo strumento Secchiello per riempire il livello usando il colore di primo piano # 0f1219.
Utilizzando lo strumento Ellisse, traccia un contorno che si interseca agli angoli delle guide dell'immagine principale.
Ora, per creare un effetto vignetta, dovremo ritagliare questa sezione mentre sfioriamo il bordo del taglio. Per ottenere ciò useremo Seleziona> Modifica> Piuma. Sfuma la selezione di 60px e quindi taglia la selezione del livello (Ctrl-x / Comando-x).
Dato che mostreremo il lavoro, dovremo inserire alcuni screenshot sui segnaposto. Torna al gruppo "Progetti" e incolla uno screenshot mentre è selezionato il segnaposto principale. Questo inserirà il livello sopra il segnaposto. Quindi, fare clic con il tasto destro sul livello e selezionare Crea maschera di ritaglio.
Incolla altri tre screenshot sugli altri segnaposto.
Riduci l'opacità per tutti gli screenshot, tranne per lo screenshot centrato al 20%.
Per annotare ogni progetto utilizzeremo tre livelli di testo. Crea un nuovo gruppo sopra il gruppo 'vignetta' per ospitare questi livelli.
Per il primo, il titolo, useremo un font leggero. In questo esempio ho usato la luce DIN ma un altro tipo di carattere simile potrebbe funzionare anche bene. Utilizzando lo strumento Testo, traccia una casella di testo all'interno delle guide a sinistra dell'immagine principale e 40 pixel sotto la guida superiore. Imposta il colore su #FFFFFF, tenendo traccia di -25 per una spaziatura più stretta delle lettere e usa una dimensione del font di 28px.
Aggiungeremo anche una riga per la categoria e la data del progetto. Imposta la dimensione a 14px, tenendo traccia di 100, forza i cappucci e applica il colore # 338966 per accentuare questa linea.
Quindi, per il corpo del testo, utilizzeremo un font di sistema come Lucida Grande o Lucida Sans Unicode a 12px con un colore di # 8C8F95 e l'altezza della riga di 18 px.
Per navigare nel nostro sito folio consentiremo il controllo del mouse o della tastiera. Una posizione intuitiva per i pulsanti direzionali di navigazione è in base alla loro funzione. Ad esempio, il pulsante freccia destra andrà a destra dell'immagine principale.
Per i pulsanti utilizzeremo forme traslucide che possono spostare l'opacità al passaggio del mouse o fare clic sugli eventi. Crea un nuovo gruppo chiamato "Pulsanti" sopra il gruppo "Vignette".
Quindi, crea un nuovo documento con le dimensioni 37x37px. Usando lo strumento penna, disegna una forma a forma di chevron come di seguito. Ripetendo la procedura al punto 8, utilizzando lo strumento Selezione tracciato, fare clic con il pulsante destro del mouse sulla forma e selezionare Definisci forma personalizzata. Salva la forma.
Tornando alla nostra tela principale, usa lo strumento Forma personalizzata per inserire la forma creata in precedenza.
Quindi, seleziona Modifica> Trasforma> Rifletti orizzontale. Questo punterà la freccia a destra. Clona questa forma e usa Modifica> Trasforma> Ruota di 90 gradi in senso orario per creare la forma di puntamento verso il basso.
Posiziona ciascuna di queste forme al centro del rispettivo lato direzionale. Consenti margine di 15 pixel in modo che i pulsanti possano sovrapporsi alle immagini adiacenti e ridurre l'opacità al 12%.
Per far sapere all'utente dove si trovano nel portfolio nel suo complesso, astraggeremo il disegno della griglia e useremo linee di diversa altezza per rappresentare colonne di immagini e un indicatore per stabilire la posizione attuale di visualizzazione.
Crea un nuovo gruppo chiamato 'Orientamento' e posiziona questo gruppo sopra il gruppo 'Vignette'.
Utilizzando lo strumento Matita, selezionare il set di pennelli quadrati dal menu a comparsa. Quindi, con il colore #FFFFFF e uno spessore di 5px, traccia una linea per allinearla con la guida al contorno sinistro e 60 px in alto.
Clona questo livello e posiziona questo 2px a destra. Ripeti l'operazione per un massimo di 12 righe.
Imposta l'opacità per tutti i livelli al 12%. E un modo semplice per farlo è impostare l'opacità del primo livello, quindi fare clic con il tasto destro del mouse sul livello e selezionare Copia stile livello. Quindi seleziona tutti i livelli rimanenti e seleziona Incolla stile livello.
Sfalsa questi livelli usando il comando Modifica> Trasformazione libera per accorciare / aumentare ogni linea.
Infine, crea un nuovo livello e usa di nuovo la matita per disegnare un indicatore sulla prima riga. Questo è il nostro indicatore di posizione.
Spesso il controllo da tastiera offrirà un'esperienza di navigazione intuitiva. Tuttavia, dobbiamo consentire all'utente di sapere che la tastiera può controllare la navigazione. Per fare ciò creeremo le icone delle frecce della tastiera.
Crea un nuovo gruppo chiamato 'Tastiera' e posizionalo sopra il gruppo 'Vignette'.
Usando lo strumento Forma rettangolare, disegna un quadrato (tieni premuto Shift) 20x20px con un colore # 262a34. Fare clic con il pulsante destro sul livello nella palette Livelli e selezionare Opzioni di fusione. Controlla il tratto e applica un tratto da 1px all'esterno con il colore # 32343f.
Quindi, usando lo strumento penna (assicurarsi che lo stile sia impostato su Predefinito nella barra delle opzioni) e con il colore #fff disegnare una freccia con un punto leggermente quadrato. Regolare se necessario con lo strumento Selezione diretta. Imposta l'opacità al 20%
Nella palette dei livelli, seleziona i due livelli appena creati. Fare clic con il tasto destro e selezionare Duplica livelli. Quindi, usando l'opzione Modifica> Trasforma il menu ruota i livelli duplicati con il loro orientamento corretto. Ripeti questo passaggio per creare tutte e quattro le icone.
Tutto apposto! Ora abbiamo finito con la parte di progettazione del progetto? il che significa che tutto ciò che dobbiamo fare è codificarlo usando alcuni HTML / CSS di base, tasti di scelta rapida di jQuery e alcuni trucchi jQuery aggiuntivi. Se qualcuno vuole vedere come Paolo ha codificato questo disegno, faccelo sapere nei commenti in modo che possiamo organizzarlo!
Accentsconagua