Share
Per la maggior parte il design del web non riguarda la tecnica di Photoshop, quindi è sempre complicato scrivere un tutorial di Photoshop sull'argomento. Ancora oggi ti mostrerò un disegno che ho recentemente messo insieme. Esamineremo alcuni passaggi di Photoshop e cercherò di approfondire alcuni dei ragionamenti che stanno alla base delle mie azioni.
È possibile trovare i file PSD di Photoshop in una directory denominata "PSD" contenuta nel file ZIP scaricato. Potresti desiderare di esaminarli brevemente prima di iniziare.
Innanzitutto un'occhiata ai disegni. Sto scrivendo un libro su temi WordPress chiamato How to be a Rockstar WordPress Designer. Il libro richiedeva un seguito sul tema di esempio, quindi ho progettato questo che sto chiamando "Creatif"- perché suona francese e piuttosto cool. Fondamentalmente è un insieme di progetti che creeremo in due temi WordPress - uno è un blog normale, e uno è un tema che ti consente di usare WordPress per creare un portfolio.
Quello che vedi sotto sono le quattro schermate di progettazione principali che ho usato per creare il tema. In generale, creo due schermate per la maggior parte dei siti Web: una home page e una pagina di contenuto. Se un sito è più complicato, creerei uno schermo per pagina critica. In una certa misura puoi progettare alcune pagine quando sei nella fase di costruzione HTML, ma è buona norma mappare tutte le pagine chiave, così puoi essere sicuro che tutto sembra e sembra giusto.
Le schermate sottostanti sono:
Una delle mie prime decisioni nel progettare un nuovo sito è scegliere una tavolozza di colori. Ci sono alcuni buoni siti là fuori che ti aiutano a scegliere un bel set, ma spesso mi viene in mente solo sperimentando. Una formula semplice che a volte uso è scegliere un set di tonalità neutre e un singolo colore di evidenziazione per sollevare la tavolozza. In questo caso ho scelto una palette di colori grigio-beigy con un blu molto brillante come il mio colore di evidenziazione.
Iniziamo il tutorial con un piccolo logo. Mentre il design del logo è generalmente un processo complesso, in questo caso voglio solo un piccolo grafico per ancorare la mia pagina. Così ho saltato tutto il processo regolare e ho appena realizzato un bel logo di testo / scatola. Se ti interessa il design del logo, un grande blog sull'argomento è Logo Design Love di David Airey, e una buona galleria di loghi può essere trovata a Faveup.
Comunque, ho scelto il carattere News Gothic Condensed Bold. Penso che questo sia un font Mac predefinito, ma non sono sicuro di installare un font di bazillion ovunque vada. Ho usato un semplice Stile di livello (per il quale è possibile visualizzare le impostazioni nel passaggio successivo) che rende il tipo un po 'web2 e alla moda. Usa un lieve sfumato, un'ombra sottile e un bordo di 1 pixel per sollevare il testo dalla pagina.
Ecco le impostazioni per lo stile di livello:
Successivamente ho aggiunto un rettangolo arrotondato dietro il testo. Puoi creare questo con il Strumento Rettangolo arrotondato (U). Come puoi vedere nell'immagine qui sotto ho aggiunto un leggero gradiente alla scatola. Puoi farlo da CTRL-click il livello della scatola per selezionare i suoi pixel, andando a Seleziona> Modifica> Contratto e contratto da 1px e poi in un nuovo livello disegnando a Gradiente radiale da una versione più leggera del colore scuro e sbiadita alla trasparenza.
Come accennato in precedenza, questo design ha un aspetto simile a quello di Web2: è semplice e pulito, presenta alcuni gradienti ed è abbastanza ordinato. Alcuni stilisti stanno decisamente alla larga dalle tendenze, personalmente non mi dispiace utilizzarli finché si adattano al mio scopo. In questo caso volevo un look pulito che non intralcasse il contenuto, ma forniva un bel wrapper. Comunque, è tutto un po 'soggettivo davvero.
Ora la tela che sto usando qui è di circa 1100 px di larghezza x 1400 px di altezza. In realtà tutto il contenuto è compreso tra 1000 pixel in modo che sia visibile su uno schermo 1024 x 768. Mi piace avere una tela più ampia in modo da poter pianificare ciò che accade quando lo spettatore ha una risoluzione maggiore.
In questo passaggio ho aggiunto le basi del mio header, in particolare una barra scura lungo la parte superiore, una tonalità più scura del colore di sfondo della barra dei menu, una linea da 1px per sigillare la barra dei menu e alcuni sotto-testo sotto il mio logo ( in News Gothic nuovamente condensato).
Ci sono due cose da notare:
Qui aggiungiamo il primo bit del nostro colore di evidenziazione. È una linea 1px davvero sottile nella parte superiore. Più tardi, aggiungendo più elementi, il colore dell'evidenziatura apparirà di nuovo in punti diversi, e riunirà questi elementi per unificarli in un unico aspetto dall'aspetto lucido. Perché non c'è molto per questo disegno tranne gli elementi ben posizionati e il colore, è molto importante ottenere il colore giusto.
Ora la pagina sembra un po 'piatta, quindi qui ho aggiunto un livello appena sopra il livello di sfondo. Poi ho disegnato un gradiente radiale passando dal mio beige scuro / grigio alla trasparenza e ho impostato quello strato su Color Dodge per schiarire lo sfondo. Poiché la barra dei menu viene infatti disegnata con trasparenza, l'effetto schiarente viene visualizzato anche attraverso la barra dei menu.
È importante ricordare che è necessario creare questo progetto in HTML più tardi. Per questo motivo noterai che quando arrivi ai bordi dell'area visibile a 1000 px torniamo a colori monotono. Ciò significa che in seguito potrò creare una singola immagine e usarla come immagine di sfondo CSS. Poi avrò un'altra immagine di sfondo con la grande area evidenziata e questa sarà un'immagine di sfondo nel corpo del contenuto principale.
È importante conoscere i cantieri in modo da poterli progettare in modo da evitare complicazioni in seguito lungo la pista. Penso che questo derivi principalmente dall'esperienza e dall'apprendimento di quali decisioni progettuali possono rendere la vita più problematica in seguito. Qui rende la vita molto più facile avere uno sfondo facilmente ripetibile al di fuori dell'area visibile a 1000 px.
Ora è il momento di iniziare ad aggiungere la mia prima area di blocco di contenuto bianca. Qui ho usato un contorno da 1px di una versione più scura del colore di sfondo, poi un bordo interno di 1px e infine una leggera sfumatura beige verso il basso. Questo stile corrisponde al mio logo precedente. Inoltre, avendo il contorno più scuro, seguito da un contorno interno più chiaro, otteniamo un aspetto molto nitido della pagina. La nitidezza viene dal contrasto, vale a dire da scuro a leggero.
Personalmente ritengo che la nitidezza o la chiarezza siano davvero fondamentali nel web design. Niente mi infastidisce più di una mancanza di attenzione ai dettagli nel rendere le cose chiare e nitide.
Ora aggiungo qualche contenuto finto qui. Poiché questo testo deve essere testo HTML, è importante scegliere con attenzione i caratteri. Non c'è niente di più deprimente della scelta di alcuni font carini e quindi ricordando in seguito che non sono font di default e quindi di conseguenza il tuo design sarà totalmente diverso da come lo hai immaginato. Ho usato Helvetica per il titolo in grassetto e Arial per il testo.
In Photoshop è una buona idea impostare il Anti aliasing a "Acuto" per simulare come apparirà il testo nel browser. Ai vecchi tempi che usavo "Nessuna", ma al giorno d'oggi la maggior parte dei PC e di tutti i Mac usano quella roba di ClearType per rendere i caratteri fluidi.
Ancora una volta si noti che i collegamenti sottotesto utilizzano il nostro blu di evidenziazione, prendendo in considerazione la linea di headling 1px che abbiamo aggiunto in precedenza.
Successivamente ho aggiunto un piccolo elemento di design sotto forma di una striscia di messaggio lungo l'angolo in alto a destra della mia scatola. In un design semplice come questo (dove sono per lo più semplici linee e riquadri), è bello avere uno o due elementi che saltano fuori davvero. In questo caso useremo il nostro colore di evidenziazione combinato con un angolo di 45 'per creare un elemento fantastico che sembra fantastico.
Quindi disegniamo un rettangolo e aggiungiamo del testo sopra l'alto. Quindi ho usato il Dodge Tool (O) per schiarire la parte centrale e aggiungere uno stile di livello per dare al testo un po 'di ombra. Quindi selezionando entrambi i livelli insieme, ho colpito CTRL-T trasformare e ruotare 45 '.
Dopo averlo posizionato sulla mia scatola, ho tagliato i bordi come mostrato. Ora noterai che avremmo potuto posizionarlo in modo che fosse allineato con la scatola, ma ho pensato che sarebbe stato carino far sembrare che questa striscia stesse avvolgendo la scatola, quindi è circa 4px fuori dalla scatola.
Successivamente ho selezionato manualmente i pixel nel disegno che vedi qui sotto, ho creato un livello sotto il livello della striscia dei messaggi e ho disegnato un colore blu più scuro. È più scuro, quindi sembra il retro della barra dei messaggi e noterai che l'ho fatto in modo che sia più scuro verso destra dove è in un'ombra finta.
Ho quindi duplicato il mio involucro e l'ho ruotato di 90 'e l'ho posizionato anche sul lato destro della scatola, come mostrato. E voilà, il nostro elemento di design!
Successivamente ho creato altri elementi. Non c'è molto di nuovo qui. Ho sostanzialmente riutilizzato gli stessi elementi di design - lo stesso stile di testo, la stessa striscia di messaggi, le stesse scatole - e li ho disegnati dove vorrei il mio contenuto.
Successivamente ho aggiunto un'area footer. Non è un footer molto eccitante, ma usa gli stessi colori della barra in alto per rifletterli ancora una volta e in questo caso sigillare il design.
Ora, poiché sto creando un tema WordPress, ho anche deciso di creare una versione del mio logo che potrebbe essere creata con testo normale. Puoi vederlo qui sotto e nel componente HTML di questo tutorial creeremo la casella "logo".
A questo punto ho pensato di mostrarti la mia palette di livelli. Non sono grande nel nominare i livelli (perché sono pigro) ma credo nel raggruppare i livelli in serie. Qui il design per il logo vs il logo del testo, il blog vs portfolio e la pagina interna sono tutti nello stesso file PSD, solo in diversi set di livelli. Quindi posso accenderli e spegnerli e prendere accordi diversi. Questo è utile perché se improvvisamente decido di spostare il logo 2px a sinistra, non devo aprire tre file e spostarlo di 2px in ognuno o rischiare di avere delle discrepanze. Inoltre è solo bello e ordinato e mi fa sentire caldo e sfocato dentro a guardare.
Ora dovrei sottolineare che in pratica non ho progettato questo disegno come ho esposto nel tutorial. In effetti il mio primo modello assomigliava più all'immagine mostrata sotto.
Mi è capitato poi di spegnere lo strato marrone scuro e ho pensato che fosse piuttosto freddo solo sul colore più chiaro. Questo è ciò che si chiama un incidente felice. Vorrei poter dire di essere stato abbastanza intelligente da essere responsabile di tutta la gentilezza del mio lavoro, ma francamente metà è pura fortuna.
In ogni caso, quando sono arrivato alla fine del mio progetto, ho ripensato a questo mockup iniziale e ho pensato che il design fosse piuttosto bello con uno sfondo scuro. Quindi, perché non creare una versione in cui è buio, quindi posso creare un'opzione per cambiare fogli di stile, sarebbe perfetto!
Così ho creato una nuova copia del mio file di disegno e ho cambiato lo sfondo in marrone scuro. Fortunatamente non c'è davvero molto che debba cambiare, ho oscurato il logo in nero così da farla risaltare, ho anche regolato un paio di altri colori per rendere il design tutto molto sensato. Non è bello come l'originale, ma una bella aggiunta alla famiglia.
Come ho detto all'inizio di questo tutorial, non si tratta tanto della tecnica di Photoshop. La realtà è che il web design usa spesso solo tecniche di base per riempire blocchi di colore. Questo design riguarda più la scelta di colori e sfumature, i caratteri e infine la decisione su come posizionarlo. Spero che tu abbia qualcosa fuori dal processo.
Naturalmente progettare un sito in Photoshop è solo una parte di un lavoro di web design. Il prossimo passo è portare il progetto in HTML.
Accentsconagua