Share
Sono un grande fan dei design di siti foto-centrici? quindi oggi sono entusiasta di lanciare un nuovo tutorial sul "sito completo" orientato verso fotografi, illustratori e altri creativi visivi. Nel primo giorno, stenderò il modello in Photoshop usando alcuni trucchi e tecniche speciali. Nel Day 2 passeremo attraverso la preparazione "pre-volo" per la fase di codifica, che esamineremo in dettaglio nel Day 3. Al Day 4, ti mostreremo come creare tre siti completamente diversi utilizzando lo stesso HTML grezzo. Pronto per iniziare? Facciamolo!
Come con qualsiasi progetto di web design, è importante identificare gli obiettivi di qualsiasi progetto? quindi, prima di immergerci, diciamo alcune parole su quali sono i nostri obiettivi finali:
L'ultima cosa che menzionerò è forse la più importante: deve essere 100% personalizzabile usando la minor quantità di lavoro possibile! Cosa significa questo per noi? Mi piacerebbe che chiunque fosse in grado di re-brandare e riverniciare l'intero layout senza mai dover toccare il caos con la riscrittura dell'HTML di base. Ciò significa idealmente che scambiando alcune immagini (il logo e un'immagine di sfondo personalizzata) e alcuni CSS, è possibile creare un risultato completamente diverso? ecco perché nell'ultimo giorno di questa serie, dedicheremo l'intera sessione alla creazione di personalizzazioni!
Ok, con i nostri obiettivi ora chiaramente definiti, iniziamo!
Il video tutorial è inteso per essere un compagno per il tut scritto qui sotto. Pensala come un materiale "supplementare" - Non copro tutto ciò che è nella parte scritta, ma a volte è bello vedere qualcun altro lavorare in Photoshop per raccogliere altri trucchi, suggerimenti sull'efficienza e altre tecniche che altrimenti potresti non essere familiari con.
La guida passo-passo completa scritta è sotto. Iniziamo con un documento Photoshop vuoto, ma puoi anche scaricare la demo PSD per verificare il tuo lavoro contro il mio.
Inizia creando un nuovo documento con dimensioni di 1280 x 800px. Perché? Perché questo ci darà una bella tela con cui giocare. La larghezza del nostro progetto finale non sarà in realtà 1280px, ma vogliamo vedere alcuni colori di sfondo proprio come normalmente vedremmo in una grande finestra del browser.
Il primo dilemma pratico con qualsiasi progetto web è decidere la dimensione del documento con cui lavorerai. Nel nostro caso, mi piacerebbe che il design fosse in posizione frontale e centrale sullo schermo, riempia il maggior spazio possibile su un monitor più piccolo - e non sembrare troppo piccolo su un enorme monitor.
Considerazioni sulla larghezza: Sto optando di usare 994px come la larghezza totale. Questo numero è piuttosto arbitrario - potrebbe essere stato qualche px più largo o qualche px più piccolo, ma alla fine farà il lavoro. Perché? Perché si adatta alla "zona sicura" di 1003px per i browser più popolari attualmente in uso, con un po 'di padding su entrambi i lati per essere al sicuro.
Considerazioni sull'altezza: Ho intenzione di lavorare con l'altezza di 644px all'interno di Photoshop L'altezza è un altro numero arbitrario nel caso di questo disegno. Perché? Perché 1) sarà regolabile dal CSS, 2) lasceremo che questo "flex" si adatti al contenuto che gettiamo dentro e 3) Sono meno preoccupato dell'altezza della piega di quanto possa essere per un progetto su larga scala.
La cosa fondamentale da notare qui è che questo sarà tutto regolabile al 100% dal CSS una volta terminato. Quindi, se ti capita di preferire un layout più ampio con un'altezza più bassa, sarai in grado di ottenere questo entro pochi secondi dal decidere le tue preferenze. L'idea qui è di mantenere le cose fluide anche se stiamo usando un modello di dimensione fissa? quindi non essere troppo preso dai numeri precisi proprio ora.
Avvertimento: Questo approccio "mantieni fluido" è in realtà unico per questo modello particolare? In genere, inizierò qualsiasi progetto con un'analisi molto più raffinata per trovare la dimensione perfetta, che esamineremo in altre serie di tut.
Mentre ci sono molti pregi nell'usare un sistema di griglia pre-costruito (come 960gs o 978gs), ho una visione piuttosto chiara di ciò che voglio costruire, e non trovo un sistema a griglia che possa accogliere immediatamente il mio progetto, I Ho optato per il freestyle di questo layout.
Quali sono le ripercussioni del freestyle su un layout? Per uno, dovremo essere molto più attenti riguardo alle dimensioni di ogni modulo di contenuti che creiamo perché non avremo guide che ci diranno dove dovrebbero andare le cose. Per creare un modello dall'aspetto veramente uniforme, dovremo essere molto più diligenti nella creazione del nostro sistema di griglia nativo di questo modello.
Disegna il rettangolo arrotondato: Ora che abbiamo deciso 994 px per 644 px come dimensione del contenitore, vai avanti e disegna un rettangolo arrotondato di quelle dimensioni (utilizzando a Raggio 12px). Apri il pannello Informazioni (Finestra> Informazioni o F8) per visualizzare la dimensione del rettangolo mentre lo disegni.
Nota che il colore del rettangolo non ha importanza a questo punto. Mentre alla fine diventeremo bianchi, per ora vogliamo vederlo risaltare sullo sfondo.
Creare l'effetto ombra: Userò lo stesso metodo che abbiamo usato nel tutorial "Crea il tuo Juicy Tabbed Slider" perché è il modo più semplice per ottenere un'ombra che sarà facile da tagliare e trasformare in un PNG trasparente quando è il momento della codifica.
Per creare questa ombra, basta prendere lo strumento pennello e impostarlo su 60px in dimensioni e 0% di durezza.
Poi, crea un nuovo livello vuoto attingere, tenere premuto il tasto Cambio tasto per disegnare una linea retta, e semplicemente trascinare il cursore in giro metà del rettangolo del contenitore.
Finalmente, useremo il Trasformazione libera strumento (Cntrl + T) per angolarlo leggermente per creare un effetto di curvatura (l'ho usato circa 2.5 per l'angolo). Perché mai questo? Perché aiuterà a creare un po 'di dimensione extra se la sorgente luminosa sembra piegarsi un po'.
Ora duplichiamo quel livello spazzolato (Cntrl + J selezionato sul livello) e ruotarlo orizzontalmente (Modifica> Trasforma> Rifletti orizzontalmente). Fai scorrere il nuovo livello del pennello capovolto fino a quando non combacia con l'altro lato del rettangolo del contenitore. Il risultato dovrebbe essere un'ombra che è l'opposto del primo.
Spostare entrambi i livelli di ombra dietro la cornice? Livelli e ridimensionali (seleziona entrambi i livelli e premi Ctrl + T) in modo che si adattino appena all'interno della larghezza totale del rettangolo del riquadro.
Infine, unisci entrambi i livelli d'ombra insieme (Ctrl + E) e spinge il livello dell'ombra nel punto giusto (usa lo strumento di selezione di base [V] e utilizzare la tastiera per spingere). Puoi anche regolare l'opacità del livello ombra in base alle tue preferenze personali. Ho usato circa 60%, puoi fare più o meno in base a ciò che stai cercando.
Fase bonus: Per aggiungere ancora più profondità, usa il Trasformazione prospettica sull'ombra per far sembrare che torni nello spazio. Basta applicare un piccolo Sfocatura gaussiana sul livello dopo averlo trasformato per rimuovere eventuali artefatti da pixel.
Ecco un altro passaggio bonus se stai cercando ancora più dramma: prova a creare un livello ombra duplicato più piccolo del 70% (usa la trasformazione libera e la scala percentuale per regolarlo), più sfocato e con una diversa opacità (70 %) per creare un "nucleo ombra" all'interno di quello primario.
Vai avanti e dai il nome ai tuoi livelli ombra (una volta che hai finito di giocare con loro) e mettili in un nuovo cartella di livelli chiamato Ombre. L'organizzazione renderà la personalizzazione molto più semplice quando saremo pronti a ridurlo!
Creare lo sfondo:
Lo sfondo che andremo a creare è un "pattern di rumore" azzurro chiaro. Ne parlerò rapidamente, ma per saperne di più sulla creazione di questi modelli, consulta il nostro tutorial completo su di essi qui.
Inizia creando un nuovo livello vuoto e riempiendolo con bianca (MAIUSC + F5).
Ora aggiungiamo un po 'di rumore usando Filtro> Disturbo> Aggiungi disturbo. Puoi regolarlo in base alle tue preferenze, ma l'ho usato 14% per l'importo.
Imposta il nuovo "livello disturbo" su Multipla sotto il pannello della modalità fusione e traccia un rettangolo (colore di riempimento # e1ebef) dietro questo livello.
Infine, aggiungiamo un nuovo livello di regolazione (Livello> Nuovo livello di regolazione> Tonalità / saturazione) su questi altri due strati in modo che il nostro rumore non sia noioso vecchio grigio.
Sotto il pannello di regolazione del nostro livello di regolazione (Finestra> Regolazioni), Ho usato le impostazioni di (Tonalità: 200, Sab: 100 e Luminosità: +60) con la casella Colorize selezionata. Puoi giocare finché non ottieni il tuo effetto desiderato.
Vai avanti e posiziona questi tre nuovi livelli (il livello adj., Il livello del rumore e il livello del colore di sfondo) in un nuovo cartella di livelli chiamato "Colori di sfondo".
Infine, andiamo avanti e rendi bianco il colore della nostra scatola contenitore ora che abbiamo aggiunto del colore di sfondo. Ho anche aggiunto una luce Colpo di 1px intorno alla nostra scatola del contenitore (# d8d8d8 a colori) per aiutarlo a distinguersi dallo sfondo.
A questo punto, il tuo documento dovrebbe apparire in questo modo:
I tuoi livelli dovrebbero essere organizzati in questo modo:
Ora che abbiamo creato e disegnato il nostro contenitore di contenuti di base, è ora di iniziare a riempirlo di contenuti. Inizieremo con la barra laterale di navigazione perché questo definirà quanto spazio avremo per i contenuti in seguito.
Quanto dovrebbe essere largo? La larghezza della barra laterale dipende da te? Ho scelto di usare 235px come larghezza, perché può più o meno adattarsi alla roba che voglio lì (un sacco di spazio per i titoli delle pagine lunghe, il widget dei social media e una barra di ricerca). Puoi regolarlo in base alle tue esigenze? e come ho sempre detto, tutto sarà regolabile dal CSS in seguito.
Per iniziare, disegna semplicemente una linea 1px usando lo stesso colore che abbiamo usato per il bordo del nostro contenitore (# d8d8d8) lungo l'asse verticale del contenitore. Posizionalo a circa 285 px dalla sinistra del bordo.
Successivamente, può essere utile tracciare una linea guida a questo punto - a circa 20px dal bordo del bordo del contenitore. Useremo questo come una guida per dove posizionare tutti i nostri contenuti in modo che le cose sembrano uniformi e ben allineati.
Non entrerò troppo in profondità qui perché, beh, probabilmente userete il vostro logo;). In breve, ho iniziato con una semplice icona del frame (dal set di icone Noble) e ho aggiunto la mia foto alla cornice. Poi ho usato il font Museo a 26pt; Usando 2 diversi pesi e colori per creare una certa varietà visiva, ho impostato il titolo del nostro modello, "ShutterPress", piacevolmente accanto all'icona.
Di nuovo, probabilmente vorrai utilizzare il tuo logo (o quello di un cliente) in questa fase? quindi ho intenzione di saltare gli stili di livello e altre modifiche. Sentiti libero di verificarli all'interno della demo PSD!
Basta posizionare il logo all'interno dello spazio della barra laterale. Si noti che stiamo usando la stessa quantità di riempimento superiore e riempimento a destra che abbiamo usato per il padding sul lato sinistro.
Piccoli trucchi come mantenere lo spazio intorno a un oggetto importante quanto l'uniforme del logo è una di quelle cose che faranno la differenza tra un buon design e un grande design.
La navigazione a fisarmonica è il primo elemento funzionale che ci stiamo prendendo in giro. Come tale, vale la pena notare che stiamo per entrare in un'area grigia qui. Vogliamo deridere questo come se fosse usato? principalmente in modo che se mostriamo questo a qualcuno (come uno sviluppatore), capiranno cosa dovrebbe apparire in tutti gli stati interattivi possibili.
Come tale, vogliamo mostrare un collegamento attivo, così come almeno uno fisarmonica aperta e uno fisarmonica chiusa.
Userò un font semplice per questo - Lucida Sans a 12pt con il leader impostato su 36pt con il colore nero # 252525. Mi capita di preferire l'utilizzo del Acuto impostazione anti-alias per i caratteri Web nei mockup di Photoshop, ma puoi usare qualsiasi cosa desideri.
Sto anche usando una piccola variante per il collegamento attivo: Grassetto con il colore impostato su # 0285da, che capita di imitare il logo e la tonalità di sfondo.
Usa pochi spazi di tastiera per far rientrare i collegamenti che alla fine diventeranno i nostri collegamenti annidati a fisarmonica.
Nota che stiamo usando la stessa linea guida verticale per appendere il testo in modo che si allinei bene con il logo.
I 36 punti di vantaggio sono sufficienti per impostare una semplice linea orizzontale tra ogni collegamento, quindi andiamo avanti e facciamo ciò a questo punto. Usa il colore #eaeaea per queste linee orizzontali, che è leggermente più chiaro del nostro colore del bordo principale. Perché? Aiuterà a stabilire che queste regole sono leggermente meno fisse delle altre.
Ora aggiungiamo i pulsanti della fisarmonica. Inizia creando un rettangolo arrotondato con raggio 2px di dimensioni 11px per 11px. Aggiungi i seguenti stili di livello:
Un gradiente grigio chiaro (# E6E6E6 su bianco) dal basso verso l'alto, rispettivamente.
UN 1px tratto esterno di #bfbfbf.
Duplica quel livello pulsante e aggiungi un semplice testo "+" e "-" per finalizzare i pulsanti. Posizionali come mostrato:
Da qui in poi, useremo le stesse regole di stile di base per tutti i nuovi elementi. I bordi dovrebbero corrispondere agli stessi grigi che abbiamo usato prima. Il padding dovrebbe essere più o meno come abbiamo usato per gli elementi precedenti. Lo stile e i colori dei caratteri saranno ugualmente validi. In quanto tale, non ti annoierò con la riscrittura di questi appunti, tienilo a mente!
Per il widget dei social media, vai avanti e prendi il set di icone che hai scelto (o controlla la nostra grande raccolta di icone qui). Useremo 16px per 16px versioni di qualunque set di icone tu scelga. La demo usa questo set, ma puoi usare quello che vuoi.
Ho anche optato per desaturare le icone sociali (Immagine> Regolazioni> Desatura) in modo che non distraggano dall'area del contenuto principale. Aggiungi le icone o le tue scelte (distanziate di pochi px) e aggiungi il testo "Social:" in modo che abbiano un titolo.
Aggiungi i bordi della nostra linea orizzontale per la separazione e lascia un po 'di spazio sotto per la nostra barra di ricerca.
Il widget di ricerca è semplicissimo da creare. Basta disegnare a Rettangolo arrotondato di 25px di altezza (raggio 8px) con un Colpo di 1px di # e0e0e0 e rilasciare un'icona a forma di lente di ingrandimento. Ho usato quello del set di icone Fugue (è gratuito), ma puoi usare il tuo per aggiungere un po 'di stile o flare.
Whallah! La nostra barra laterale ora è completa. Puoi aggiungere i tuoi widget personalizzati o lasciarli così. È ora di popolare la nostra area di contenuti con alcuni, beh, i contenuti!
Ho intenzione di fare le cose un po 'indietro in questi prossimi due passi. Normalmente, avresti avviato un web design con il design della homepage? la pagina in cui la gente arriverà per la prima volta. Tuttavia, questo è un caso raro in cui la sottopagina (ad esempio: il modello di galleria) è probabilmente più importante della pagina di destinazione effettiva.
Quindi, sapendo che posso sempre creare un elegante design per la home page, inizierò la progettazione dei contenuti con il modello Galleria, perché ci pone più problemi. Primo fra questi problemi sono:
La cosa divertente è che una volta risolti questi problemi, possiamo effettivamente creare la homepage piuttosto rapidamente. Iniziando da qui, ci permetteremo di creare una galleria di miniature killer senza cercare di soddisfare eventuali vincoli che potremmo incidentalmente imporre iniziando dalla home page.
Ok, iniziamo!
Inizierò stabilendo una quantità di riempimento che mi piacerebbe rimanere sempre nell'area dei contenuti. Nel nostro caso, ho selezionato 32px come importo. È un po 'più piccolo dell'altezza della linea della navigazione, ma non è così piccolo che le cose si sentono strette o costrette.
Questo mi lascia con un'area attiva approssimativamente 696 px per 586 px (di nuovo l'altezza è flessibile, quindi non ne siamo molto preoccupati).
Con la nostra area di contenuti attivi definita, ora vogliamo selezionare la dimensione e il riempimento della miniatura ideale. Capirlo non è scienza missilistica? In sostanza, ho semplicemente giocato con diversi arrangiamenti di rettangoli disegnati rozzamente fino a trovare qualcosa che sembrava armonioso.
Ora, so che la parola armoniosa non è molto specifica? quindi cosa intendo? Sapendo che voglio adattare circa 15-20 immagini per pagina, ho provato le nostre varie combinazioni di dimensioni / spazio in miniatura fino a quando ne ho trovato uno che rifletteva un buon equilibrio tra spazio positivo e negativo e un raffinato senso della gerarchia. Cose come la sezione aurea giocano in questo, ma sarò onesto e ammetto solo che l'ho visto in questo caso particolare. Non c'è magia qui? solo un sacco di sperimentazioni.
Quindi, qual è la formula finale? UN 155 px di larghezza per 125 px di altezza immagine miniatura, impostata su 4 colonne (e nel nostro caso, 4 righe pure, che riempie la nostra altezza).
L'imbottitura: C'è circa 21px di separazione orizzontale tra ogni miniatura e circa 18px di separazione verticale. Perché la differenza?
Poiché abbiamo a che fare con un layout "orizzontale" (che significa che è più ampio di quanto non sia stretto), è giusto mantenere lo stesso rapporto di forma nell'intero design.
Notare come la dimensione dell'anteprima finale che ho scelto riflette anche questo rapporto orizzontale. Quindi, ha senso lasciare un margine di riempimento leggermente inferiore rispetto a quello che posizioneremo tra le colonne.
Ecco il risultato finale:
Nota che ho lasciato circa 50px di spazio nella parte inferiore per inserire una sorta di impaginazione (il modo in cui gli utenti navigheranno da una pagina di miniature alla successiva). Naturalmente, se non ci sono abbastanza miniature per attivare l'impaginazione, il layout verrà ritagliato più in fondo nella parte inferiore.
Anche lo stile visivo delle miniature è importante. Perché ci prendiamo tanta cura per creare molto poco polacco dettagli su tutto il nostro design, vedere semplici vecchie miniature di immagini con bordi netti che sembrano crude.
Aggiungeremo uno stile sottile per alleggerirlo e dare alla nostra galleria un senso di raffinatezza. Applica il seguente stile di livello a ciascuna delle tue immagini in miniatura:
A 2px Inner Stroke (nei termini CSS, questo diventerà imbottitura) #EAEAEA
A 1px Drop Shadow (nei termini CSS questo diventerà il confine) # F2F2F2
Zoomò al 100% qui per mostrarti lo stile finale:
Ora che abbiamo stabilito la nostra griglia, aggiungiamo alcune immagini reali per dare vita a questo layout:
Abbiamo quasi finito con questa pagina? ora tutto ciò di cui abbiamo bisogno è un modo per gli utenti di navigare da una pagina di miniature a quella successiva. Questo è chiamato paginazione. Ci sono molti modi per farlo (alcuni più complessi di altri). Nel nostro caso, vogliamo un semplice metodo di impaginazione? quindi sto optando per usare una semplice freccia sinistra | approccio con freccia a destra - es: (). Questo è uno dei metodi più intuitivi di impaginazione, quindi ha senso per la nostra situazione.
Andiamo avanti e creiamo due cerchi con diametro di 18px:
Si noti che ho semplicemente copiato / incollato il stile di livello dai pulsanti della fisarmonica che abbiamo usato prima. Perché? Perché la duplicazione degli stili visivi aiuta a garantire uniformità nel layout? e non c'è davvero alcun motivo per sprecare gli sforzi nel tentativo di progettare uno stile completamente nuovo. L'uso coerente dello stile di livello aiuterà effettivamente l'usabilità del nostro sito.
Una volta che hai disegnato le tue cerchie, aggiungi le frecce (questo è già mostrato sopra). Nel mio caso ho usato una forma personalizzata> in Photoshop, ma puoi anche usare facilmente un simbolo ">" di testo personalizzato. Dal momento che questo non è un tutor per principianti, suppongo che tu possa capire come ottenere questa forma in qualche modo;)
FIN! Questo completa effettivamente questa pagina di contenuti. Utilizzando gli stessi stili di base e le stesse regole di padding che abbiamo stabilito, possiamo facilmente trasformarlo in altri schemi di griglia (come una griglia 2x2 o una griglia 3x3).
Va bene - Nella fase finale della sessione di progettazione! Probabilmente riusciremo a capire come creare varie altre pagine di supporto, ma quello di cui abbiamo davvero bisogno ora è il design della homepage. Essendo che questo è un modello mirato fotografo, una fotografia dovrebbe ovviamente prendere il centro della scena. Abbiamo anche bisogno di un testo descrittivo (per un fotografo che spiega chi è, che tipo di servizi offrono, ecc.)
Considerazioni sulla larghezza: Nella maggior parte dei casi copiamo semplicemente lo spazio del contenuto attivo che abbiamo utilizzato nel modello di galleria. Cambierò un po 'le cose cambiando il padding da 32px a 20px. Perché? Questo ci darà solo un po 'di spazio in più per usare un'immagine "FULL size". È un cambiamento molto sottile nel layout generale, ma l'impatto dovrebbe essere enorme perché saremo in grado di adattare una grande immagine nello spazio.
Considerazioni sull'altezza: Come abbiamo sempre detto, l'altezza è davvero variabile e alla fine sarà lasciato ai singoli utenti / designer / clienti per determinare quanto contenuto vuoi su questa pagina? nel mio caso, cercherò di mantenere le dimensioni di questa pagina allo stesso modo della pagina della nostra galleria.
Il risultato di queste considerazioni è uno spazio attivo leggermente più grande di quello che abbiamo usato nel modello della galleria: 720 px per 604 px.
Questo ha senso per noi per alcuni motivi: 1) ci dà molto spazio per progettare e 2) si adatterà allo spazio "fold" dei browser più popolari. Finché non mettiamo alcuna informazione cruciale vicino al fondo di quest'area, dovremmo usare bene questo spazio in qualsiasi modo potremmo pensare.
Disegnare l'immagine: Inizia disegnando a 716 px di larghezza per 438 px di altezza rettangolo arrotondato (Raggio: 10px).
Applicare i seguenti stili di livello, iniziando con a 2px Stroke:
E aggiungi anche un'ombra interiore (che contribuirà a rendere la nostra immagine "pop" più nella pagina):
Lo stile visivo finale dovrebbe assomigliare a questo:
Creare le schede:
Le schede saranno il modo in cui gli utenti saranno in grado di scorrere le immagini sulla home page. Questo è essenzialmente solo un jQuery carousel di base quando ci pensi in termini di codifica? ma non c'è motivo di limitarci agli stili visivi che la maggior parte dei cursori pre-costruiti useranno di default.
Quindi, diventiamo un po 'più creativi con le schede sinistra / destra creando alcuni cerchi interni visivamente interessanti.
Inizia con a Cerchio del diametro di 92px forma. Uso Nero per il colore di riempimento e impostare il opacità al 57%.
Usa lo strumento Selezione rettangolo per creare una selezione che gira lungo il nostro "contenitore immagine" e usa quella selezione per creare una maschera di livello.
Ora aggiungi il "
Quindi dovresti avere questo:
Vai avanti e raggruppa questi livelli in un gruppo, quindi duplicalo, capovolgi il gruppo copiato orizzontalmente e fallo scorrere verso il lato destro:
Ora tutto ciò che devi fare è trascinare un'immagine sul livello del rettangolo arrotondato (rendere l'immagine a Maschera di ritaglio di quel livello) in modo che possiamo vedere come apparirà effettivamente:
Creare
Accentsconagua