Share
Sei in vena di qualcosa di diverso? Ti guiderò nel processo di creazione del design di Stuff - blog e portfolio orientati all'orientamento orizzontale. Assicurati di visitare la versione online di Stuff per vedere il risultato finale!
Fallo 1300 x 800 px. Tutto quello spazio non è realmente necessario, ma è bello percepire il carattere panoramico del design mentre lavoriamo.
Creare un nuovo livello di riempimento usando il colore solido # bfc6cd
Converti un nuovo livello in un "oggetto intelligente" (fai clic con il tasto destro> Converti in Smart Filter) e applica il filtro> Aggiungi disturbo (puoi regolarlo in un secondo momento, se necessario, grazie alla funzionalità dei filtri intelligenti). Blocca il livello. Per mantenere il progetto pulito e organizzato, puoi eliminare la maschera del livello e renderlo il livello di sfondo predefinito (opzionale).
Crea una nuova forma a freccia usando il preset "strumento forma". Quindi usa lo strumento Selezione diretta per regolare la forma per renderla bella (sposta i punti come meglio credi).
Seleziona lo strumento Trasformazione libera, sposta la freccia 310px dall'alto, quindi afferra e sposta il righello orizzontale per creare una nuova guida. Attaccalo al centro della freccia. Da questo momento rappresenterà il principale asse orizzontale del sito.
Aggiungi 4 stili alla freccia (facendo doppio clic sul livello): ombra esterna, ombra interna, bagliore esterno e sovrapposizione sfumatura (da #cbcbcb a #ffffff).
Aggiungi un nuovo livello di testo sopra il livello della freccia.
Aggiungi stili al testo: ombra interna, sovrapposizione gradiente e tratto. Per un effetto di profondità migliore, rendere il tratto visibile solo nella metà inferiore del testo usando un tratto "sfumato" con le impostazioni alfa della metà superiore impostata su "0" opacità.
Le ombre esterne e interne conferiscono alla freccia un aspetto più 3D, ma per renderlo ancora migliore, creiamo un semplice effetto di luce lucida. Crea un nuovo rettangolo e usa lo strumento Converti punto modificarne la forma per creare una leggera curvatura. Maschereremo questo sopra il livello Arrow per creare un effetto lucido.
Imposta questo riempimento di livello su 0% e aggiungi uno stile di sovrapposizione gradiente con un bianco di sfumatura sottile.
Per evitare lo strato di luce, vai oltre la freccia: ctrl + clic sul livello della freccia per fare in modo che una selezione aggiunga una maschera di livello al livello di luce
Per focalizzare l'attenzione degli spettatori sul logo, fai una luce per far stare la freccia fuori dallo sfondo. Puoi usare un metodo primitivo che è:
Crea un rettangolo di larghezza 240 px bianco (l'altezza dovrebbe essere un po 'più alta del documento).
Sopra la foto, creare una nuova casella di testo e riempirla con il titolo del blog. Usa un font condensato come League Gothic (gratuito nella League of Moveable Type). Sotto la foto, crea un'altra nuova casella di testo per il contenuto generale.
Crea una selezione per il contenuto e crea un nuovo livello maschera per il grande rettangolo. Cambia la densità della maschera all'80%
Aggiungi stili di luminanza esterna (nera) e interna (bianca) al livello di striscia per un aspetto più 3D.
Aggiungi il testo di meta-informazioni sopra il post. Ho usato il corsivo Georgia 12px, altezza linea 17px. Ricordarsi di utilizzare le guide per mantenere i testi in un'unica riga
Crea un testo "leggi di più" sotto il post
Uno strato sotto di esso, crea un nuovo rettangolo per essere un pulsante di lettura più.
Aggiungi gli stili di sfumatura e di tracciatura ad esso. Suggerimento: inserire la bobina all'interno per avere angoli perfettamente nitidi del pulsante
Aggiungi anche un gradiente sottile allo strato di testo.
Per creare il badge utilizzare un altro rettangolo, aggiungere del testo (ho usato Arial) e ruotare entrambi i livelli di 45 gradi.
Aggiungi maschera al livello del rettangolo per nascondere angoli non necessari
... e aggiungi 2 piccoli rettangoli come un'illusione del badge che passa sotto l'immagine.
Aggiungi un'ombra sottile al badge. Suggerimento: per la modalità di fusione delle ombre usa Normale anziché il Multiplo predefinito, quindi avrà effetto anche se utilizzi il badge come file PNG trasparente
Crea un nuovo livello di testo. Invece del colore nero (che può sembrare innaturale su sfondi chiari), utilizzare il grigio scuro per ottenere un aspetto più naturale.
Suggerimento: per creare linee orizzontali invece di usare lo strumento linea non creare il testo anti-aliasing con glifo sottolineatura "_" Sarà sempre pixel-sharp e gli spazi tra le linee saranno facili da controllare grazie al parametro line-height. Usa la stessa altezza della riga del testo del menu e crea tante linee quante sono le voci di menu, meno uno. Rendi le linee più lunghe poi necessarie.
Imposta questo livello di riempimento a circa il 15% e aggiungi un'ombra bianca.
Aggiungi una maschera al livello delle linee e dipingi con un pennello liscio su di esso per ottenere bordi sfumati.
Crea un rettangolo con angoli arrotondati (3px) per un input di ricerca.
Aggiungi l'ombra interna alla scatola e fai riempire il livello al 70%
Sopra di esso si aggiunge il testo di ricerca e si crea una forma personalizzata come una freccia di invio. Aggiungi l'ombra interna alla scatola e fai riempire il livello al 70%
Poiché le immagini vettoriali sono consigliate per questo scopo, suggerisco di trovare i logo necessari nel servizio www.brandsoftheworld.com. Nella maggior parte dei casi è il modo più veloce. Apri il logo in Illustrator, copia i contorni e incolla Photoshop come forme. Puoi anche utilizzare le icone del compagno di Orman Clark.
Imposta il riempimento del livello su 0% e aggiungi stili (ombreggiatura, ombreggiatura interna e sovrapposizione colore) per ottenere l'aspetto 3D. Per ottenere il logo nello stato attivo (illuminato), cambiare il colore e l'intensità dello stile Sovrapposizione colore.
Copia questo stile e copia in altri loghi (fai clic con il pulsante destro del mouse sul livello / Copia stile livello)
Per aggiungere una casella di commento, crea un altro rettangolo con angoli arrotondati di circa 520 px di larghezza e aggiungi lo stile Ombra esterna.
Seleziona la parte più grande e aggiungi maschera a questo livello.
Duplica il livello e inverti la sua maschera. Rendi il riempimento del nuovo livello del 25%.
Nelle impostazioni di fusione selezionare l'opzione "Layer Mask Hide Effects" per evitare incoerenze nella linea d'ombra di entrambi i livelli.
Crea una linea verticale nera sul bordo tra queste caselle, fallo riempire anche del 25% e aggiungi 1px ombra bianca diretta a destra.
Aggiungi alcuni esempi di avatar e testi usando i colori usati in precedenza.
Crea una forma circolare e incolla gli stili di livello dalla freccia del logo. Taglia la forma della freccia dal cerchio usando la forma personalizzata e la modalità di taglio.
Sotto questo livello pulsante crea un altro cerchio - stesse dimensioni o più piccoli, e incolla lo stile sfumato dal logo. Suggerimento: se alcuni livelli hanno molti stili e ne vuoi copiare solo uno, puoi trascinare lo stile mentre Alt è premuto e rilasciarlo su un altro livello.
Aggiungi luce (allo stesso modo di sopra alla freccia del logo).
Se vuoi fare qualche piccolo miglioramento, che nessuno noterà, crea luci separate per il pulsante e il foro a forma di freccia, e sposta il secondo leggermente verso il basso. E se hai già due luci separate, puoi facilmente (senza mascheramento aggiuntivo) rendere il pulsante più forte per essere meglio visibile sul pulsante molto luminoso.
Seleziona tutti i livelli dei pulsanti e crea un oggetto Smart.
Duplica livello, sposta e capovolgi orizzontalmente. Ora se si modifica una freccia (doppio clic su smart layer) entrambe cambiano.
Tutti gli altri elementi possono essere fatti copiando, incollando e ridimensionando gli elementi esistenti che abbiamo progettato.
Suggerimento: i font Gothic Gothic e altri fantastici font freeware con licenze web designer-friendly sono disponibili su www.fontsquirrel.com
OK, quindi PSD è più o meno pronto e vorrebbe andare oltre. Poiché Stuff necessita di un approccio diverso al contenuto, a causa del suo carattere orizzontale, è davvero complicato codificarlo correttamente. Non conosco molti siti Web orizzontali che sono riusciti a evitare errori comuni (ad esempio, non funziona il mouse scroll). Si prega di lasciare un commento se si desidera conoscere i modi migliori per codificare questo design e vedremo se non possiamo portare il tutorial al sito!
Ad ogni modo, se vuoi risparmiare un po 'di tempo e avere tutto sul piatto d'argento, puoi scaricare il template HTML o la versione WordPress di Stuff per pochi dollari. Grazie!
Accentsconagua