Share
Questo tutorial ti guiderà attraverso il processo e le idee dietro la progettazione di un sito web professionale con un tocco funky in Photoshop. Il tutorial leggerà molto come un romanzo "scegli la tua avventura" nella speranza che incoraggi la creatività e l'unicità nel tuo design con un piccolo consiglio e istruzioni lungo il percorso. Tempo di avventura!
Una cosa che noterai mentre procedi attraverso questo tutorial è quanto facilmente questo sito possa essere trasformato in un blog sul design, sulla homepage di una società di software o su una comunità open source. Tutti i moduli sulle barre laterali destra e sinistra possono essere scambiati e spostati con facilità e il contenuto è progettato per essere flessibile.
Nel corso di questo tutorial vedrai una grande enfasi sui principi di progettazione e sui metodi utili di Photoshop per migliorare il tuo flusso di lavoro e la progettazione dei siti web. Anche se questo sito ha il suo stile, l'obiettivo principale di questo tutorial non è quello di replicare esattamente quello stile, piuttosto la speranza è di ottenere una migliore prospettiva di web design in Photoshop che possa migliorare il tuo approccio e velocizzare la tua produzione.
Dai un'occhiata all'immagine che creeremo.
Se non lo sei già, passa a 960.gs e familiarizza con il sistema di griglia 960 e perché sarà così utile per questo tutorial. Mentre sei lì, assicurati di scaricare il modello.
Una volta scaricato il file, decomprimilo e apri "960_grid_12_col.psd" che si trova in 960_download> Modelli> Photoshop. Quando apri il file, sarà evidente quanto velocemente questo ti consentirà di creare e mantenere la struttura nei tuoi progetti web. Prendete nota delle linee guida, vi permetteranno di creare oggetti che si allineano perfettamente alla griglia.
Se segui le guide fino al righello, puoi vedere chiaramente le esatte dimensioni in pixel della griglia, con colonne larghe 60px e 10px su entrambi i lati (creando 20px tra ciascuna colonna). Se non vedi il righello o desideri liberartene, puoi cambiarlo con Command + R.
Le guide sono quasi opprimenti; una volta che inizi a progettare, si intrometteranno. Puoi attivarli facendo clic su Visualizza> Extra o semplicemente usando la scorciatoia Comando + H.
Avrai bisogno di più spazio sulla tela per questo tutorial. Espandi l'area di disegno (Comando + Alt + C) a 1400 px per 1340 px. Puoi cancellare tutto tranne il livello di sfondo. Fare doppio clic sul livello di sfondo e premere OK per sbloccarlo. Rinominarlo "BG".
Salva (Comando + S) questo file come "my_web_tut01.psd" nella sua cartella denominata "my web tut" Dopo ogni passaggio di questo tutorial, premi Command + S e ogni paio di passaggi premi Command + Shift + S e salva un nuova copia "my_web_tut02.psd," "my_web_tut03.psd," ecc ... Il salvataggio sembra un gioco da ragazzi per molti designer, ma ho scoperto che non impedisce a molti professionisti di rallentare.
OK, hai preparato la tela, ora devi disegnare nello sfondo e nella parte superiore. Trascina sul righello superiore per creare una nuova guida; ridurlo a 120 px. Questo sarà il limite inferiore dello spazio dell'intestazione. Abbassa altre due guide a 130px e 140px. Ora c'è la stessa larghezza di spazio tra l'intestazione e il contenuto che abbiamo tra le colonne. Sta iniziando a sembrare una griglia adeguata!
Usa lo Strumento Rettangolo (U) per disegnare un rettangolo nero sull'area dell'intestazione. Questo presuppone che tu abbia il set nero predefinito come colore di primo piano, altrimenti puoi semplicemente premere D per resettarlo. Inizia il tuo rettangolo fuori dalla tela lungo la guida e finiscila anche dall'altra parte. Il vantaggio di estendere questo elemento è che non vedrai alcun effetto applicato al perimetro che potresti voler applicare al bordo inferiore del tuo rettangolo, come un tratto, un bagliore interno, ecc. Assegna un nome al rettangolo "Intestazione BG. "
È ora di iniziare a bloccare la tua rete. Questo design comprende tre colonne di contenuto: la barra laterale di sinistra si estende su tre colonne, il contenuto centrale / principale si estende su sette colonne e la barra laterale destra si estende su due colonne.
Sebbene funzioni in modo ottimale affinché l'intestazione inserisca delle linee guida, il resto del design sarà un processo più fluido, quindi non disegnerai guide orizzontali tra ciascuna sezione. Non disperare! Sarai comunque in grado di ottenere una perfetta spaziatura dei pixel premendo Maiusc + Tasti freccia mentre hai selezionato lo strumento Sposta (V). Ogni volta che lo fai, il livello selezionato si sposterà di 10px.
Creerai angoli arrotondati per questo motivo. Gli angoli arrotondati fanno in modo che i tuoi contenuti siano ben divisi in sezioni. Guarda all'immagine finale; noti come nel modulo "Feed Twitter" ci sono molte caselle all'interno di una scatola con angoli arrotondati? Considerare ora se gli angoli fossero tutti netti - il "Feed Twitter" non si sentirebbe come un singolo modulo.
È inoltre necessario tenere conto del fatto che colori, sfumature e caratteri stanno contribuendo a rendere questa entità definita, ma gli angoli arrotondati aiutano sicuramente. Inoltre, tieni presente che, proprio perché gli angoli arrotondati funzionano per questo design, ci sono migliaia di siti bellissimi che non utilizzano angoli arrotondati. Dai un'occhiata a Psdtuts +: ogni angolo è nitido; tuttavia, altre strategie come il contrasto e i tratti vengono utilizzate per mantenere il layout chiaro. Ulteriori letture possono essere trovate qui e qui
Basta parlare di design! Seleziona lo strumento Angoli arrotondati e imposta il raggio dell'angolo su 8px. Disegna una casella nella parte superiore delle colonne sinistra e destra; darti un po 'di spazio per aggiungere il contenuto più tardi.
Per prima cosa, crea un'area di testo nell'area di contenuto centrale / principale e inseriscile con una fodera accattivante come nell'immagine finale. Usa il font Rockwell o un altro slab-serif a 40pt con 48pt Leading (Line Height). Rockwell può essere scaricato qui.
Successivamente, aggiungi un testo fittizio qui sotto e imposta Verdana a 12pt con 20pt Leading. Aggiungi anche un paio di sottotitoli che sono Verdana Bold a 17pt con 30pt Leading.
Ora che hai le specifiche, parliamo di tipografia. Una regola generale che troverai ripetuta in tutta la comunità del web design è che un sito web dovrebbe utilizzare solo due tipi di carattere. In questo layout ho scelto di usare i font Rockwell e Verdana. Verdana è un font sicuro per il Web mentre Rockwell non lo è. Per questo motivo, tutte le istanze di Rockwell dovranno essere immagini quando questo disegno viene convertito in XHTML / CSS.
Questo significa due cose per te. Per prima cosa, per mantenere basso il tempo di caricamento, dovresti considerare un uso minimo di caratteri non sicuri dal web. L'immagine finale contiene meno di dieci istanze di Rockwell, la maggior parte di esse si sovrappone ad alcuni elementi grafici come un pulsante che sarà già un'immagine durante la codifica. In secondo luogo, puoi aggiungere effetti come ombre e sfumature al testo. Questi due motivi si combinano con l'inclusione di Rockwell, che è più adatto per gli elementi tradizionalmente più decorati di un design come intestazioni, titoli e pulsanti.
C'è un'ultima considerazione che può o non può essere applicata al tuo progetto e che sta prendendo in considerazione qualsiasi lavoro di SEO (Search Engine Optimization) futuro. Tutto il testo che è basato sull'immagine - qualsiasi istanza di Rockwell per questo web design - non viene scansionata e analizzata dai robot di Google. Ciò significa che dovrai progettare in modo che ci siano un sacco di caratteri sicuri per il web in cui le parole chiave possono essere raccolte da Google.
Il prossimo punto sulla tipografia e sul web design in generale è consistenza, coerenza, coerenza! Se usi Rockwell per un pulsante, usalo per tutti i pulsanti! Se fai qualche link rosa, fai tutti i link rosa! Essere coerenti permetterà al tuo design di apparire nitido e coeso.
Infine, una parola sull'usabilità e la tipografia. La tua copia ha bisogno di spazio per respirare, dargli un'altezza di linea decente e noterai un mondo di differenza. Il sito ilovetypography.com suggerisce che l'altezza della tua linea dovrebbe essere almeno il 140% della dimensione del tuo font. Inoltre, dovresti essere consapevole del fatto che un'area di testo più ampia di 600 px è una tensione per gli occhi, ma se hai intenzione di andare più ampia sarebbe una buona idea aumentare proporzionalmente l'altezza della linea. C'è sempre altro da imparare sulla tipografia - ecco un buon inizio.
Il bianco e nero è noioso, il tempo per un po 'di colore! I colori di questo design sono stati ispirati dal tema Hash One Wordpress
Potrei mostrarti come creare un campione personalizzato da caricare con i colori del tuo sito, ma non lo uso da solo. Invece, usando lo strumento rettangolo, puoi disegnare una griglia di grandi quadrati ai margini della tua tela e riempirli con i colori che utilizzerai. Trovo questo metodo più veloce e più accessibile.
I colori selezionati offrono un grande contrasto per dare profondità al sito. Sentiti libero di usare qualsiasi combinazione che desideri, ma, per favore, considera il contrasto, la leggibilità e le armonie quando scegli i tuoi colori. Se hai problemi con i colori, prova a utilizzare la Progettazione Schemi colori.
I colori di questo tutorial sono (da sinistra a destra, dall'alto in basso):
Aggiungi tutti questi rettangoli a una cartella e chiamalo "SWATCHES". L'utilizzo di tutte le maiuscole per i nomi delle cartelle rende visivamente più facile trovare i livelli delle cartelle quando i livelli iniziano a confondersi. Ora sarebbe anche un buon momento per avviare le cartelle "HEADER", "LEFT SIDEBAR", "MAIN CONTENT" e "RIGHT SIDEBAR". Un'altra buona pratica per entrare è colorare i tuoi strati per migliorare il tuo flusso di lavoro. Basta fare clic con il tasto destro sull'icona dell'occhio accanto a ciascun livello per selezionare un colore.
Le sfumature possono davvero migliorare il tuo design; tuttavia, se non stai attento, i gradienti possono davvero disabilitare il tuo design. Ecco il mio suggerimento: impazzire con i gradienti, basta renderli tutti molto sottili.
Fare doppio clic sul livello "Intestazione BG" e selezionare Sovrapposizione sfumatura. Clicca sul gradiente che si apre per aprire l'editor dei gradienti. Elimina tutti i campioni tranne i primi due, dal primo piano allo sfondo e dal primo piano al trasparente. Ora crea un gradiente dal grigio più scuro al grigio medio e premi nuovo per aggiungerlo ai Preset. Ripeti fino ad avere otto nuove sfumature: quattro scure a medi e quattro medi a scure. Fare clic su Salva per salvarli in una nuova cartella denominata "Risorse". Quindi posizionalo nella cartella principale per questo progetto. Ora ogni volta che torni a questo progetto o avrai tutte le sfumature proprio lì.
Per il livello "Intestazioni BG", utilizza la sfumatura da metà a leggera dai campioni grigio scuro.
Per il tuo gradiente sul livello "BG" dovrai creare un gradiente leggermente più complesso. Ci saranno effettivamente due gradienti nella sfumatura "BG". Quando arriva il momento del codice, saranno file di immagine separati, ma per noi abbiamo solo bisogno di creare un gradiente complesso.
Nota come c'è una piccola sezione del gradiente che sarà dello stesso colore? Questo sarà il colore di sfondo del tuo file HTML e permetterà alla pagina web di crescere, ma il gradiente in alto per rimanere in alto e il gradiente in basso per rimanere in fondo.
Photoshop è un programma fantastico, ma se scopro che stai creando loghi in Photoshop, ti riporterò ad Adobe. I loghi dovrebbero essere creati in un programma vettoriale - per questo tutorial useremo Illustrator.
Apri un nuovo file in Illustrator e crea il tuo logo (Nota: nei progetti reali non dovresti mai iniziare il tuo web design prima di avere un logo). Mentre il logo in questo esempio utilizza Rockwell, avere un terzo font per il tuo logo non è un problema. Salva il tuo logo nella cartella "Risorse" in cui hai inserito il file del gradiente.
Una volta ottenuto questo logo, dobbiamo riportarlo in Photoshop per alcuni stili. Basta avvicinare Illustrator e Photoshop l'un l'altro e trascinare i pezzi del tuo logo su Photoshop. Dal momento che ogni pezzo avrà uno stile unico, trascinandoli singolarmente anziché nel suo complesso sarà di aiuto quando inizierai lo styling.
Per allineare i pezzi separati portare in una versione dell'intero logo, abbassare la trasparenza e utilizzare come guida per la corrispondenza. Cancellalo quando hai finito. Premi MAIUSC + clic su tutti i livelli del logo e premi Comando + G per raggrupparli in una nuova cartella. Rinominare questa cartella "LOGO" e posizionarla nella cartella "HEADERS".
Ogni pezzo si trasformerà automaticamente in un oggetto intelligente. Ciò significa che funzioneranno ancora come un oggetto vettoriale come in Illustrator: puoi utilizzare lo strumento Trasforma (Comando + T) liberamente senza perdere qualità.
Dopo aver ridimensionato e inserito il tuo logo, dovrai modificarlo. Usa le sfumature che hai creato prima per dare profondità al logo - mescola i colori verso l'alto, ma mantieni il colore più scuro dei gradienti sul fondo per entrambe le parole.
Quindi aggiungi un'ombra esterna a uno dei pezzi. Imposta il metodo di fusione su Moltiplica al 100%. Assicurati di aver selezionato Usa luce globale e impostalo su 120 gradi, con distanza 1px, spread 0% e dimensione 1px. Abilitando la Luce Globale, imposterai tutti gli effetti con le ombre allo stesso modo - ricorda coerenza, consistenza, coerenza!
Ho letto in giro persone che mostrano come copiare e incollare lo stile di un livello, mentre quello è un buon metodo per i livelli molto distanti, ecco alcuni modi rapidi per spostare e duplicare gli effetti. Proprio come quando vuoi moltiplicare un livello sulla tela e nella palette dei livelli tenendo premuto Alt e trascinando una nuova copia di quel livello - puoi duplicare gli effetti con lo stesso metodo.
Alt-trascinare sul fx simbolo nel livello sorgente al nuovo livello e sostituirai il nuovo livello con tutti gli effetti del primo livello. Se vuoi solo duplicare l'Ombra esterna, invece del fx simbolo, quindi Alt, trascina l'effetto individuale su un nuovo livello e sostituirai solo quell'effetto, oppure aggiungilo se il nuovo livello non lo ha abilitato. Utilizzare questo metodo per garantire che tutti i livelli del logo abbiano la stessa ombra esterna.
Seleziona il livello "Intestazione BG". Apri gli effetti e aggiungi un bordo nero 1px con la posizione impostata su Interno. Successivamente, dagli un bagliore esterno con la modalità di fusione: Moltiplica, Opacità al 40%, Colore del nero e Dimensione di 9 px.
Torna in Illustrator e crea alcune forme interessanti e creative che verranno utilizzate come sfondo chiaro per l'area dell'intestazione. Colorare le forme in bianco, trascinarle su Photoshop, impostare la loro modalità di fusione su Schermo e la loro Opacità in quantità variabili dal 2 al 10%. Dai un altro sguardo all'immagine finale, noterai che ci sono molti cerchi e tratti di cerchi usati, tutti creati in Photoshop. Per le forme più complesse, Illustrator è più veloce, ma per le cerchie risparmierai del tempo semplicemente creando in Photoshop.
Ora creeremo un cerchio con solo il tratto bianco mostrato in Photoshop. Crea un cerchio nero con lo strumento Ellisse, quindi apri gli effetti per quel livello e assegnagli un tratto bianco. Chiudi gli effetti e imposta la modalità di fusione su schermo, vedrai tutto tranne il tratto bianco scomparirà. Il più grande vantaggio di questo è la possibilità di modificare la larghezza del tratto semplicemente aprendo gli effetti e modificandolo.
Trascorri un po 'di tempo con questo, sperimenta diverse opacità e composizioni - crea delle forme funky che possono aiutarti a personalizzare questo design. Non preoccuparti se alcune delle tue forme sono visibili sotto l'intestazione, noi ci occuperemo di questo nel prossimo passaggio.
Seleziona tutte le forme e inseriscile in una cartella sopra il livello "Intestazione BG". Comando-clic sulla maschera vettoriale (la casella grigia) di "Intestazione BG" per vedere l'intestazione intera selezionata sulla tela. Ora, seleziona la cartella appena creata e fai clic sul piccolo pulsante nella parte inferiore della finestra dei livelli chiamata "Aggiungi maschera di livello"
Il mascheramento è qualcosa che non vedo abbastanza nella mia pratica professionale, è molto utile e veloce, e la parte migliore è che si tratta di un metodo non distruttivo. Considera che potresti aver semplicemente appiattito le forme in un unico livello e aver eliminato l'area che spuntava. Ma poi hai voluto modificare una parte della composizione o il tratto in uno dei cerchi - il mascheramento fa tornare indietro e apportare modifiche più velocemente.
Sotto l'intestazione noterete alcuni elementi grafici che assomigliano a colline ondulate. Utilizzando i colori del campione e giocando con la trasparenza è possibile ottenere questo aspetto. Alla fine, questi dovranno essere modificati per affiancarli orizzontalmente.
Consideriamo per un secondo questi e il resto degli elementi non funzionali del design. Ci sono una quantità decente di, beh, solo una grafica alquanto casuale. Quale contributo aggiungono al design? In primo luogo, una grafica come questa è un ottimo modo per orientare la sensazione e l'umore di un sito web, un ottimo modo per aiutare la propagazione di un marchio.
Mentre non ho quasi l'esperienza per spiegare il marchio, cercherò di darti una breve panoramica in modo da poter mettere tutto in prospettiva. Un marchio è tutto ciò che riguarda un'azienda che sente un consumatore - le emozioni, i ricordi, i suoni, i colori, le esperienze, ecc. Marty Neumeier, nel suo libro The Brand Gap, spiega chiaramente che "Un marchio non è ciò che dici che è. cosa dicono che sia. " Quindi cosa c'entra tutto questo con la grafica? Bene, mentre non puoi costruire un marchio, puoi aiutarlo a crescere nella mente del cliente fornendo continuamente immagini che siano evocative dell'essenza della tua azienda.
OK, quindi dai un'occhiata all'immagine finale, cosa ti dice di questa azienda? Il mio obiettivo era quello di far sì che i colori e le forme traducessero un senso di divertimento e funkiness, ma la struttura e la rigorosa disposizione della griglia danno un senso di professionalità e serietà. È questo il marchio esatto che ogni azienda mira a costruire? Certamente no, ogni azienda dovrebbe essere unica e ogni sito web estrude un'aura differenziata.
Nascondi tutto tranne il livello "BG". Lo sfondo di questo disegno è incorniciato da un grande rettangolo arrotondato. Questo aggiunge un po 'più di struttura e profondità al tuo design. Dal momento che non fornirai al contenuto principale una propria scatola come le barre laterali, questo è un buon approccio per lavare la grafica di sfondo e migliorare la leggibilità. Il rettangolo bianco arrotondato ha un raggio di 8px, lo stesso delle scatole - un altro dettaglio di consistenza. Troverai più dettagli sugli effetti nell'immagine qui sotto.
Utilizzando lo stesso metodo utilizzato per l'intestazione, inserisci alcune forme da Illustrator e spostale per creare una piccola grafica. Mentre continui a progettare, probabilmente ti troverai a giocare con loro per trovare una composizione che funzioni bene. Mescola le tue sfumature di colori scuri e trasparenze.
Si può notare che l'icona del logo viene utilizzata molto, una sorta di promemoria subliminale. Ho avuto un professore di cinema al college che mi ha insegnato che un'immagine, un colore, ecc. Doveva essere ripetuta almeno tre volte in un film perché un utente potesse ricordarlo e ricavarne un significato. Cerco di usare questo principio con il mio design - il logo è stato ripetuto numerose volte (con gusto e ragionevoli) con la speranza che l'utente acquisisca familiarità con l'azienda e ricordi l'icona.
La navigazione di questo design è fortemente influenzata dal mio attuale sito preferito - aviary.com.
La piccola grafica di casa e la parola Casa sono un po 'più luminosi e dietro c'è uno sfondo grigio più chiaro - questo per migliorare l'usabilità. Pensa come l'utente! Fai sapere loro su quale pagina si trovano. I modi più comuni per farlo sono le schede, i colori, le sottolineature, i punti salienti e la grafica extra. Pensa a queste opzioni e sii creativo con il tuo approccio.
Per link e pulsanti, lo stato di passaggio del mouse è un enorme miglioramento per la tua usabilità. Torna indietro all'immagine finale e guarda alcuni dei link. Un design ben congegnato prenderà in considerazione ciò che questi appariranno e come funzioneranno. Se non si codificano i propri siti, utilizzare una piccola immagine di un cursore di collegamento per indicare ai programmatori cosa sta succedendo. Le funzioni nascoste come un menu a discesa (nella foto sotto) devono essere considerate e completamente progettate. Aspettare di trovare il tuo bel design è accompagnato da qualche orribile menu a discesa che ti farà impazzire. Se sei il designer, tocca a te considerare tutti questi.
L'immagine del cursore del link può essere trovata come PNG insieme ad altre risorse di progettazione gratuite qui.
Lo hai notato? NUOVO! distintivo? Ho appena rotto una delle mie prime regole! Bene, faremo una piccola eccezione per i font pixel! I font pixel non hanno anti-aliasing, quindi li rendono molto nitidi. Questa nitidezza può spesso essere sgradevole per un font di dimensioni regolari, ma i font pixel funzionano meravigliosamente a piccole dimensioni. Dai un'occhiata a quanto Verdana e Georgia siano illeggibili a 8pt rispetto ai caratteri pixel, una grande differenza, sì?
I caratteri Pixel sono popolari in Flash, si caricano più velocemente e mantengono quella nitidezza, ma funzionano anche bene nel web design! OK, ora che conosci le gioie dei font pixel, assicurati di usarli con parsimonia. Per applicazioni come questa piccola NUOVO! badge funziona benissimo, ma per la maggior parte non dovresti usarli per molte altre applicazioni - nessuno vuole leggere più di poche parole in un font pixel. Il font utilizzato in questo esempio si chiama Uni 5063 e può essere scaricato gratuitamente da Miniml.
Ora, esamina gli angoli arrotondati del menu a discesa. Lo sfondo bianco è in realtà costituito da tre rettangoli arrotondati. Il terzo è stato capovolto con lo strumento selezione diretta per creare un angolo interno arrotondato.
Trasforma le barre laterali bianche e crea guide che danno a ciascuna delle barre laterali una spaziatura di dieci pixel. Aggiungi tutto il testo fittizio che utilizzerai e duplica le barre laterali secondo necessità. Per estenderli o contrarli verticalmente, utilizzare lo strumento selezione diretta per selezionare i quattro punti di ancoraggio in basso e spingerli verso il basso o verso l'alto con la tastiera. Il prossimo passo è mettere a punto lo stile di tutto il testo.
Tutto il testo è stato organizzato in una gerarchia di importanza e attenzione, e questo è segnalato attraverso lo stile di quel testo. La dimensione del carattere più grande e il colore più scuro (leggi: il contrasto più alto) sono riservati per il titolo del contenuto principale. Il sottotitolo è più grande e più scuro del corpo principale e il corpo principale è più grande del contenuto della barra laterale e così via. Essere consapevoli del fatto che tutti i colori provengono dai campioni - consistenza, coerenza, coerenza!
Ora che hai organizzato tutte le caselle della barra laterale e il testo è colorato in modo appropriato, puoi iniziare a disegnare le scatole. Dare a ciascuno iscrizione un gradiente di sfondo molto leggero e utilizzare lo strumento Linea per disegnare una linea orizzontale nella parte superiore della sfumatura. Questi saranno visivamente separati ciascuno iscrizione. Dare alla scatola laterale un'ombra leggera.
Per lo sfondo dell'area del titolo delle sezioni della barra laterale, disegna un rettangolo sotto l'altro stile / forme e aggiungi un Sovrapposizione sfumatura di rosa e un tratto 1px riempito con un gradiente riflesso orizzontalmente da rosa a bianco. Quindi attribuisci al livello di sfondo del titolo una maschera di livello nella forma della casella della barra laterale.
Ripeti questi passaggi per tutte le caselle della barra laterale del tuo progetto. Se sei interessato a creare la casella di iscrizione alla newsletter, lascia spazio e la coperemo nei prossimi due passi.
Per creare quella piccola grafica nella parte inferiore di ogni riquadro della barra laterale sarà molto più veloce se lavorerai con Illustrator solo un po 'di più. Illustrator è spesso impostato per essere nella modalità colore CMYK; tuttavia, dal momento che si progetta per lo schermo, sarà necessario modificare la modalità colore in RGB. Passare a Illustrator e andare su File> Modalità colore documento> Colore RGB. Successivamente dovrai disegnare la grafica del tuo footer desiderato.
Ora torna a Photoshop, seleziona i tre campioni medi di grigio scuro, rosa e ciano, quindi trascinali su Illustrator. Utilizzare lo strumento Eyedropper (I) in Illustrator per colorare l'immagine come desiderato. Trascina l'immagine in Photoshop, ridimensiona e posiziona di conseguenza. Puoi aggiungere anche alcuni effetti, sono andato con una leggera ombra esterna e una sottile sfumatura di sovrapposizione (da nero a bianco, con una modalità di fusione di moltiplicazione e opacità del 10%)
Il vantaggio di questa procedura è avere un oggetto smart già colorato. Se dovessi trascinare questo in Photoshop e il tentativo di colorare i singoli pezzi sarebbe un processo più lungo che richiederebbe di rasterizzare l'oggetto smart e creare più di un livello.
Non diventerò troppo pazzo per le idee alla base della grafica e del marchio come prima, ma voglio toccare alcuni degli elementi grafici in primo piano nel sito. Nell'immagine finale ci sono molti elementi grafici simili a quelli del passaggio 18, ma sono un po 'più complessi. Una volta che hai disegnato le forme del tuo grafico, apri gli effetti e aggiungi un Sovrapposizione sfumatura.
Puoi vedere come i colori sono disposti nel gradiente per dare l'impressione di una netta divisione tra le tonalità più chiare e le tonalità più scure. Tieni presente che esistono diversi modi per eseguire questa operazione, incluso l'utilizzo di rettangoli bianchi e maschere di livello.
Questa grafica è ideale per racchiudere e personalizzare le icone. Come il punto interrogativo nella sezione principale del corpo Lo sapevate… qualsiasi icona o simbolo potrebbe essere inserito lì. Gli esempi qui sotto usano le icone del pacchetto gratuito Simplicio e molti altri pacchetti di icone gratuiti possono essere trovati su Icon Pot.
Sorprendentemente, per me, una delle parti più difficili del web design è la creazione di pulsanti personalizzati. Questi pulsanti seguono quello che è stato soprannominato "Web 2.0 Design" dalla comunità di web design.
Per prima cosa, esaminiamo alcuni dei pulsanti sull'immagine finale. Per coerenza il testo su ogni pulsante è Rockwell in grassetto tranne il pulsante di accesso a causa delle sue dimensioni ridotte - Rockwell non funziona bene a dimensioni così ridotte. Inoltre, tutti gli stili del testo e i pulsanti dello sfondo sono gli stessi.
Guardando più avanti il pulsante ingrandito puoi vedere alcuni degli effetti più da vicino. Molti degli effetti utilizzati sono molto comuni nella creazione di quello stile Web 2.0, in particolare un colpo di 1pz attorno al pulsante, ombre sul testo e sulla scatola, icone, qualcosa per dare l'impressione di 3D e gradienti. Puoi vedere che il pulsante Seguici usa tutti questi. Per creare l'effetto 3D è stata applicata un'ombreggiatura interna alla casella dello sfondo. Osserva da vicino e vedrai che il testo ha un'ombra molto nitida - questo crea la stessa impressione che avresti se duplicassi il testo. Colorare la copia in basso nera e spostarla verso il basso e verso destra un pixel.
Non pensare che ci sia un modo giusto o sbagliato per creare pulsanti. Dai un'occhiata a ciò che è presente sul Web, gioca con alcuni effetti e stabilisci qualcosa che ti sembra sia un pulsante sia una corrispondenza accattivante per il web design su cui stai lavorando.
Per quanto sia importante che il tuo web design segua la griglia, ogni tanto spaccare la griglia qua e là può aiutare a dare al tuo progetto un certo carattere. Il punto principale in cui la griglia è interrotta in questo web design è nell'area dell'intestazione vicino al logo. Questo mashup grafico facilita la tensione della struttura della griglia e conferisce al sito un aspetto più funky e differenziato. Va notato che il design e il contenuto interrompono visivamente la griglia in quest'area. La descrizione della società aderisce alla colonna, ma si rompe nella riga e la grafica è quasi casuale nel loro posizionamento. Il mashup grafico comprende forme, sfumature e om
Accentsconagua