Share
I buoni design non dovrebbero mai andare sprecati. Questo progetto è stato originariamente realizzato per un cliente che non ha mai pagato, e dal momento che c'era un feedback positivo così travolgente, ho deciso di creare un tutorial per questo. Texture ricche e cremose conferiscono a questo design un tema unico. Spero che tu ami il caffè!
Non solo diamo via i file di Photoshop per questo design, ma daremo anche via i file HTML in modo da poter verificare come è stato codificato dopo la fase di progettazione! Dovresti lavorare con questo tutorial fin dall'inizio, ma sentiti libero di prendere anche i file sorgente.
Come per qualsiasi progetto, per iniziare è necessaria una buona griglia. Inizio sempre con un documento largo 960 px (che sarà la larghezza della nostra pagina). Assicurati di dare al documento un'altezza sufficiente per consentire tutti gli elementi che creeremo: ho scelto 1100px.
Trascina le linee guida ai lati del documento. Questi fungeranno da grondaie per la nostra area di progettazione, che sarà larga 960 px. Trascina anche le linee guida a 10px e 960px sull'orizzontale. Questi fungeranno da ident per mantenere tutto al quadrato mentre ci muoviamo verso il basso nella pagina.
Una volta impostate le linee guida, vai su Immagine -> Dimensioni tela e modifica il valore della larghezza della tela su 1000 px. Questo ci darà un po 'di spazio in più per lavorare con gli esterni e mostreremo come il sito si espanderà nel browser.
L'angolo in alto a sinistra del tuo documento dovrebbe assomigliare a questo:
Dobbiamo creare alcune linee guida in più, dato che abbiamo alcune colonne in verticale lungo la pagina. Crea altre 6 linee guida verticali a 330px, 350px, 650px, 670px, 730px e 750px. Questi dovrebbero aiutarci ad andare avanti e mantenere tutto allineato.
Successivamente, riempiremo lo sfondo. Ovviamente stiamo andando per il marrone a causa della sua ricchezza (ed è il colore del caffè). Inizia creando un nuovo livello e riempiendo l'intero documento con qualsiasi colore solido (lo modificheremo con gli stili di livello). Puoi farlo rapidamente premendo Shift + F5 su "Fill".
Rinominare questo livello in "bg" e fare clic con il pulsante destro nella palette Livelli e selezionare "Opzioni di fusione". Seleziona "Sovrapposizione sfumatura" e crea una sfumatura da # 67331c a # 2e1308; vorremmo il marrone più scuro nella parte superiore della pagina e il marrone più chiaro nella parte inferiore.
Ora dobbiamo aggiungere un po 'di texture in modo che il gradiente non appaia così piatto. Crea un nuovo livello, sopra il tuo livello "bg", e dai il nome a questo livello "Pattern".
Il risultato dovrebbe essere qualcosa del genere:
Ora che abbiamo creato il nostro background, andremo avanti e inizieremo a creare alcuni degli elementi nella pagina - iniziando con quella barra di navigazione gialla di fantasia.
Crea un nuovo gruppo di livelli e rinomina questo gruppo "Navigazione". All'interno del gruppo "Navigazione", crea una selezione alta 100 px e l'intera larghezza del documento. Crea un nuovo livello e premi Maiusc + F5 per riempire il livello. Come colore di riempimento, usa # edd38d (giallo). Rinominare questo livello "bg" all'interno del gruppo "Navigazione".
Ora hai la barra di navigazione. Sembra un po 'piatto, quindi andremo avanti e aggiungeremo alcuni stili di livello per farlo risaltare un po' di più. Fare clic con il tasto destro del mouse sul livello "bg" e selezionare Opzioni di fusione.
La barra "Navigazione" dovrebbe apparire così:
Ancora una volta, abbiamo bisogno di un po 'di consistenza - altrimenti finirà per sembrare piatto. Ho usato questa texture simile alla sabbia che avevo in giro. La parte importante qui è il colore. Puoi utilizzare qualsiasi texture che desideri, ma il colore dovrebbe essere simile al colore di riempimento che abbiamo usato in precedenza. Aggiungi questa texture in un nuovo livello sopra il livello "bg" creato in precedenza e imposta l'opacità al 30%. Rinominare la trama di questo livello e accertarsi che abbia esattamente le stesse dimensioni del livello "bg".
Vogliamo dare un po 'più di profondità alla barra gialla, quindi creeremo un'ombra più scura sul bordo inferiore. Per fare ciò, fai una selezione in fondo alla barra gialla e crea un nuovo livello.
Riempi questo nuovo livello con una sfumatura (Shift + F5) da Trasparente a # 2f1408 (con Opacità del 30%)
Questo dovrebbe farlo per la barra gialla. Dovrebbe assomigliare a qualcosa di simile a questo:
Crea un nuovo gruppo chiamato "Nav" e crea tutti i seguenti testo e livelli al suo interno.
Navigazione abbastanza semplice qui, grande e facile da leggere. Il carattere è Georgia, 30px. Assicurati che il tuo testo abbia una buona spaziatura tra ogni parola (per consentire possibili stati attivi). Rendi il colore del testo # 92583f, con l'oggetto attivo (Home in questo caso), # 64311b.
Per creare la sottolineatura "attiva" per la navigazione, ho usato lo strumento pennello per mettere a fuoco una sottolineatura piuttosto titolata. Questo lega il logo con il resto del sito. Non ti preoccupare se non lo fai bene al primo tentativo - probabilmente l'ho disegnato 50 volte prima di trovare la linea che mi piaceva.
Ora abbiamo bisogno del pulsante "Registrati". Duplica il testo di navigazione (seleziona il livello testo e Comando + J) e cambia le parole da leggere "Registrati".
Quindi, seleziona lo strumento Rettangolo arrotondato e disegna un rettangolo con Radius 20px; Questo ci darà la forma attorno al testo di iscrizione.
Imposta il riempimento di questo livello su 0% e applica i seguenti stili di livello:
Per creare il logo, ho trovato un tovagliolo di scorta gratuito e ho rifilato i bordi un po '. Puoi trovare il tuo a: iStockPhoto o altri siti gratuiti.
Ho aggiunto un'ombra esterna per far sembrare che il tovagliolo fosse sopra ogni altra cosa:
Ho usato una texture di una macchia di caffè (per dare un po 'più di autenticità al nostro sito di caffè e tovagliolo). Potrebbe essere necessario armeggiare con l'opacità fino a quando non sembra giusto. Puoi anche provare a impostare il metodo di fusione della macchia su Moltiplicare per farlo risaltare un po 'di più.
Per quanto riguarda il resto del logo, ho scelto un font calligrafico e ho disegnato velocemente una tazza di caffè. Niente di troppo complicato qui.
Ora creeremo quella casella di ricerca traslucida. Crea un nuovo gruppo di livelli, sotto i livelli "Barra gialla" (perché vogliamo che la barra di ricerca appaia come una linguetta sporgente sotto l'intestazione). La tua pila di livelli dovrebbe essere qualcosa in questo modo:
Inizieremo creando il rettangolo arrotondato che contiene la barra di ricerca. Afferra lo strumento Rettangolo arrotondato e crea un rettangolo largo 300 px e alto circa 70 px. Assicurati che il rettangolo si inserisca nel nostro "grondaia della colonna destra" con le guide che abbiamo creato nel primo passaggio di questo tutorial.
Il risultato dovrebbe essere simile a questo:
Ora creeremo la casella di input con lo strumento Rettangolo arrotondato. Crea un rettangolo con Raggio 5 px, Larghezza: 280 px, Altezza: 30 px. Centra questo nuovo rettangolo all'interno del rettangolo "contenitore" creato in precedenza. Rinomina questo livello "input"
Afferra lo strumento di testo e aggiungi del testo con # af8753 come colore. Scegli la tua icona di borsa preferita (ti consiglio di usare IconFinder per le icone).
Ora che abbiamo creato l'intera intestazione, ora possiamo entrare nel contenuto reale. Creeremo per primi questi 3 bucket principali di contenuti. Ancora una volta, afferra lo strumento rettangolo arrotondato con un raggio di 20px e crea 3 rettangoli arrotondati nelle 3 colonne che avevamo creato in precedenza.
Per ottenere che queste finestre assomiglino a quello che ho appena mostrato nello screenshot, applica i seguenti stili di livello:
Ho trovato delle ottime icone di caffè sul web che si adattano perfettamente al design, che ho usato su queste 3 sezioni. Ancora una volta, stiamo solo facendo uso delle nostre risorse - e non ha senso ricreare la ruota qui.
Ho quindi aggiunto un'intestazione, utilizzando lo stesso carattere Georgia, e un po 'di testo puntato, e questa sezione è terminata.
Dal momento che il design utilizza la trasparenza in tutto il design, ho sentito che gli stili del tavolo non dovevano essere diversi. Il tavolo è pulito e semplice, che aiuta a fondersi perfettamente nel design.
Afferra lo strumento selezione e crea una selezione quadrata in cui desideri posizionare il tuo tavolo. Il mio tavolo è largo 700 px (seguendo le linee guida impostate in precedenza) e 220 px di altezza.
Crea un nuovo livello e riempi questo livello (Shift + F5) con un marrone più scuro (ho scelto # 3c2014). Rinominare questo livello in "tabella bg" e impostare l'opacità al 70%. Ora usando lo strumento di selezione a linea singola, creeremo la separazione tra colonne e righe. Una volta selezionato dove vuoi che siano le tue divisioni, premi Elimina e rimuovi i pixel pieni dal livello "tabella bg".
Ora dovresti avere una bella griglia di tabella come questa:
Uso Georgia per riempire le celle con il testo e lascio a te la scelta di colori / dimensioni. Assicurati di aggiungere l'intestazione principale e le intestazioni della tabella.
Ora creeremo le icone delle valutazioni. Per le valutazioni del "prezzo", ho scelto un carattere con un simbolo del dollaro spesso e applicato alcuni stili di livello. Quando trovi il tuo carattere, digita 4 segni di dollaro. Duplica questo livello, quindi spostalo a destra e digita 1 segno di dollaro (a cui verranno applicati stili di livello separati). Per i segni di dollaro giallo "attivi", applicheremo i seguenti stili di livello:
E per i segni di dollaro inattivi, vogliamo che li guardino all'interno (come se non fossero pieni). Applicheremo diversi stili di livello qui:
Per la valutazione a stelle, ho utilizzato lo strumento Forma personalizzata di Photoshop e ho scelto la stella. La stessa tecnica usata per i simboli del dollaro (semplicemente copia / incolla gli stili di livello dall'alto) su queste stelle.
Il tuo risultato dovrebbe essere lungo queste linee:
Raggruppa questa singola riga creata e duplica il gruppo due volte, spostando la riga verso il basso per adattarla alla griglia creata in precedenza. Il risultato finale dovrebbe assomigliare a questo:
La nostra ultima sezione principale è la lista degli utenti più attivi. Continuiamo a utilizzare Georgia, ma aggiungiamo un tocco di classe agli utenti che non hanno avatar. Vedrai che il modello è in realtà dall'icona nella casella "Sfoglia" nella parte superiore - il vapore proveniente dalla tazza. Un altro fine dettaglio per legare insieme il designer. Ecco come lo crei.
Nel nostro gutter a destra, aggiungi l'intestazione (riutilizzare ciò che hai creato per "Recensioni recenti") e riempire un'area rettangolare con il 40% di Opacità (il colore non ha importanza qui). Assegna un nome a questo "contenitore" di livello, quindi aggiungiamo alcuni stili di livello (Sovrapposizione colore e tratto) ad esso:
Il risultato dovrebbe essere una scatola opaca con un bordo esterno bello più scuro rispetto allo sfondo interno:
Per l'avatar, usa lo strumento del marchio per creare una selezione 50px per 50px. Crea un nuovo livello e riempi la selezione con qualsiasi colore (Maiusc + F5).
Ora aggiungeremo alcuni stili di livello per rendere questo avatar un po 'migliore per quegli utenti che non hanno un set di avatar.
Aggiungi del testo per il nome e il paese dell'utente, e il vapore rotea dalla tazza di caffè, e duplica la riga alcune volte per riempire lo spazio.
Infine, il piè di pagina. Per dare una piccola separazione, c'è una sfumatura da marrone scuro a trasparente dall'alto verso il basso per fornire una linea visiva per rompere le due sezioni. Per creare questa separazione, utilizzare lo strumento selezione per effettuare una selezione e riempire la selezione con un gradiente (da marrone a trasparente). Regola l'opacità del gradiente fino a quando non riesci a vedere i motivi dello sfondo brillare attraverso.
Ancora una volta, utilizzeremo la Georgia qui per creare alcuni link supplementari sul sito. Ho usato 18px per i collegamenti e 14px per la nota sul copyright di seguito. Assicurati che il lato sinistro sia allineato con le linee guida che abbiamo creato in precedenza.
Il tocco finale è riutilizzare l'icona della tazza di caffè dalla casella "Sfoglia" in alto a destra nell'angolo in basso a destra; ancora una volta allineare il lato destro con le linee guida.
Non è così difficile vero? È piuttosto semplice quando puoi spezzarlo, riutilizzando alcuni degli stessi stili e tecniche che hai ripetuto più e più volte. Sono inclusi anche i file affettati, così puoi vedere come è stato codificato. Molto è cambiato da quando ho progettato e codificato questo, e molte delle immagini potrebbero probabilmente essere ricreate con CSS3 e gradienti, ma quasi 3 anni fa, questo è il modo in cui l'ho fatto. Potresti aver visto questo design su www.coffeenatic.com; ora che il sito è sparito, ho pensato che sarebbe stata una buona idea condividerlo con tutti, poiché ho ricevuto un feedback così positivo a riguardo. Spero ti sia piaciuto!
Accentsconagua