Disegna un tema Tumblr ispirato alla foresta in Photoshop
Tumblr è una piattaforma di micro-blogging che consente agli utenti di pubblicare facilmente snippet di informazioni sul Web, come una foto o un set fotografico, un video, un preventivo o solo un paragrafo.
È spesso usato come diario online per la sua facilità d'uso rispetto ad altre piattaforme di blogging come WordPress.
Un sacco di temi Tumblr sono disponibili, sia gratuiti che premium, ma ti sei mai chiesto come potresti progettare il tuo?
In questo tutorial imparerai come creare un tema Tumblr ispirato alla foresta, utilizzando trame di legno, modelli sottili e tecniche moderne, una bella miscela di elementi naturali e moderni.
Quello che progetteremo
Il tema che progetteremo in Photoshop consiste di quattro aree: barra laterale in legno, area del contenuto principale, barra laterale destra e intestazione.
Passo 1
Il primo passo, come dovrebbe essere con tutte le cose che progettate, è la fase di sketch. Usando la mia tavoletta grafica Wacom Bamboo e una tela bianca in Photoshop, ho abbozzato il seguente disegno, con alcuni elementi più grandi, solo per portare le mie idee su carta (digitale).
Passo 2
Con l'idea sbrogliata, crea un nuovo documento in Photoshop. (Ricorda, questo non è scolpito nella pietra, è solo qualcosa a cui puoi riferirti se rimani bloccato nel progetto. Personalmente, tendo a sperimentare e cambiare molto di ciò che avevo inizialmente pianificato.) Ho usato il seguente impostazioni in Photoshop:
Passaggio 3
Il prossimo passo è mettere alcune guide sulla tela. Questo ti aiuterà a mantenere pulita la struttura del tema mentre la progetta. Voglio che la barra laterale sinistra sia di 200 pixel, che l'area del contenuto principale sia 600 pixel e che la barra laterale destra sia 160 pixel, dandoci una larghezza di 960 pixel.
Se hai utilizzato le stesse impostazioni, puoi posizionare le guide a 200, 800 e 960 pixel in orizzontale. Questo disegno sarà allineato a sinistra, in modo che la barra laterale di legno si trovi sempre contro il lato sinistro della finestra dell'utente.
Ho anche posizionato guide a 200 pixel sotto la parte superiore della tela e 200 pixel sopra la parte inferiore della tela. Ecco come appare attualmente il mio documento:
Passaggio 4
Aggiungiamo ora alcuni pattern al nostro background. Vai a File → Nuovo e crea un nuovo documento di 8 × 8 pixel. Disegna alcune linee verticali con una larghezza di 2 pixel. La tua tela ora dovrebbe essere 2 pixel neri, 2 pixel bianchi, 2 pixel neri, 2 pixel bianchi. Vai a Modifica → Definisci modello. Salva il tuo pattern come "Vertical Lines 2px."
Nel documento originale, vai a Livello → Nuovo livello di riempimento → Motivo. Seleziona il modello appena creato e fai clic su OK. Elimina l'opacità del livello fino a quando non assomiglia a questo:
Unisci lo schema con il livello di sfondo, rasterizzandolo automaticamente nel processo. Vai a Filtro → Rumore → Aggiungi disturbo. Cambia il valore al 5% e fai clic su OK. Ciò aggiungerà qualche texture sottile allo sfondo:
Crea un nuovo livello e riempilo di bianco. Posizionalo sotto il livello di sfondo originale. Riduci l'opacità del tuo pattern con texture a circa il 40%, quindi uniscilo con il livello di sfondo passando a Livello → Unisci livelli.
Passaggio 5
Seleziona lo strumento Rettangolo e disegna una forma larga 200 pixel.
Tagliamo il fondo della nostra forma usando lo strumento Lazo poligonale, facendolo apparire come un nastro. Crea una selezione sulla forma, rasterizza il livello forma e quindi premi il tasto Canc per rimuovere l'area selezionata.
Posiziona la forma nell'area della barra laterale sinistra che abbiamo contrassegnato usando le nostre guide.
Crea una selezione della porzione superiore della forma e vai a Modifica → Trasformazione libera. Stendi la forma in modo che si sovrapponga alla linea superiore della tela.
Passaggio 6
Seleziona lo strumento Forma ellisse e, mentre tieni premuto il tasto Maiusc per tenerlo premuto, disegna un cerchio, riempito di bianco. Posizionalo nella parte superiore della barra laterale e rinomina il livello in "Ritratto".
Fai clic con il pulsante destro del mouse sul nuovo livello forma e seleziona l'opzione "Rasterizza livello" per trasformarla da pixel in oggetto intelligente. Tieni premuto il tasto Comando e fai clic sull'immagine di anteprima del livello nel pannello Livelli. Questo farà una selezione della tua cerchia.
Individua una tua foto (o qualunque sia il tuo sito web) e copialo. Torna in Photoshop e, con la selezione del cerchio ancora attiva, vai a Modifica → Incolla dentro. Questo incollerà l'oggetto nella selezione del cerchio.
Fatto ciò, hai automaticamente creato una maschera di livello sull'immagine (cioè su un nuovo livello, non sul livello circolare esistente). Vai a Modifica → Trasformazione libera per ridimensionare e / o ruotare l'immagine. Rimarrà un cerchio; assicurati di non renderlo troppo piccolo. Una volta fatto, elimina il livello denominato "Portrait" e rinomina il tuo nuovo livello.
Passaggio 7
Seleziona lo strumento testo e crea una casella di testo nell'area dell'intestazione. Ho dato al mio tema un nome completamente casuale: "Kabooom". Ho usato un font chiamato Reklame Script. Puoi scaricare una demo del font o acquistarla per $ 30 da MyFonts .
Fai clic con il tasto destro sul tuo livello di testo e seleziona "Opzioni di fusione". Applica una sovrapposizione di colore al testo. Ho usato un grigio chiaro che è un po 'più scuro dello sfondo, con il codice esadecimale # D6D6D6.
Applica un'ombreggiatura interna al tipo, usando un'opacità del 10%, una distanza di 2 pixel e una dimensione di 1 pixel. Lascia tutto il resto a 0. Questo farà apparire il tipo come inciso sullo sfondo.
Per completare l'effetto inciso, aggiungeremo un'ombreggiatura al tipo, utilizzando il colore bianco con una normale modalità di fusione. Dare all'ombra una distanza di 2 pixel e una dimensione di 1 pixel. Queste impostazioni fanno apparire l'ombra come un'evidenziazione nella parte inferiore del testo, aggiungendo più profondità al testo e rinforzando l'ombra interna.
Passaggio 8
Riseleziona lo strumento testo e crea una casella di testo che riempie la larghezza della barra laterale destra, che abbiamo contrassegnato con le guide. Metti una serie di categorie sotto l'intestazione della categoria, come mostrato di seguito:
Seleziona l'intestazione della categoria e cambia il carattere tipografico in uno di tua scelta. Ho usato Minion Pro. Sperimenta con i sotto-caratteri (grassetto, corsivo, ecc.) E le dimensioni dei punti.
Cambia il carattere per le categorie ("Notizie", "Giorni fuori", "Fotografia", ecc.) Ho usato Myriad Pro. Abbassa la dimensione del punto del tipo e regola l'interlinea (ovvero lo spazio tra le righe di testo), in modo che la linea superiore si trovi più in basso rispetto a dove si trova per impostazione predefinita.
Copia la prima intestazione e i link e incollali di seguito nella stessa casella di testo. Cambia l'intestazione e le categorie. Ho usato i titoli "I miei progetti" e "I miei amici". Indirizza qualsiasi cosa sia rilevante per il tuo sito web, ovviamente.
Passaggio 9
Ora renderemo il testo nella barra laterale destra un po 'più accattivante. Seleziona il testo per le sottocategorie (cioè non le intestazioni) e cambia il colore dal nero al grigio scuro. Ho usato # 333333. Clicca OK.
Fai clic con il pulsante destro del mouse sul livello di testo e seleziona "Opzioni di fusione". Applica un'ombreggiatura bianca con una modalità di fusione normale. Cambia l'angolo a 120 ° e la distanza e la dimensione a 1 pixel. Lasciare tutto il resto impostato su 0 pixel. Questo aggiungerà un'evidenziazione alla fine del testo, proprio come abbiamo fatto con l'intestazione.
Passaggio 10
Seleziona lo strumento Linea e, mentre tieni premuto il tasto Maiusc per tenerlo dritto, traccia una linea sotto l'intestazione "Categorie".
Fai clic con il pulsante destro del mouse sul livello di linea e seleziona "Opzioni di fusione". Applica un'ombreggiatura bianca con una modalità di fusione normale. Imposta l'angolo a 90 ° e la distanza a 1 pixel. Imposta tutto il resto su 0 pixel.
Duplica il livello linea e posizionalo sotto ciascuna delle intestazioni.
Passaggio 11
Se hai lo stesso numero di titoli di me, dovresti avere tre livelli di linea. Selezionali tutti e duplicali. Con i tre livelli di linea ancora selezionati, spostali verso il basso di 10 pixel tenendo premuto il tasto Maiusc e premendo il tasto Giù una volta. Riduci l'opacità dei tuoi nuovi livelli di linea al 25% per finire con qualcosa del genere:
Passaggio 12
Afferra lo strumento Forma rettangolare e disegna un rettangolo simile a quello che segue. Rendi il rettangolo esattamente largo 570 pixel. Ciò consentirà uno spazio di 10 pixel tra la barra laterale sinistra e il bordo del nuovo rettangolo e uno spazio di 20 pixel tra la barra laterale destra e il bordo del nuovo rettangolo, come mostrato nello screenshot annotato di seguito:
Passaggio 13
Riseleziona lo strumento Forma rettangolare e crea un rettangolo grigio molto più piccolo, come quello qui sotto. Posizionalo nell'angolo in alto a destra del rettangolo grande, spostandolo dal rettangolo grande di 10 pixel. Posiziona la forma a 30 pixel di distanza dalla parte superiore del rettangolo.
Passaggio 14
Duplica il livello di testo nella barra laterale destra e, utilizzando il tasto Maiusc e la combinazione di tasti del cursore, sposta il livello di testo duplicato sull'area del contenuto principale. Fai lo stesso con i due livelli di linea per la tua intestazione "Categorie".
Seleziona lo strumento testo e fai clic sul tuo livello di testo duplicato. Rimuovi tutto il testo nella casella e cambia l'intestazione in qualcosa di più adatto. Ho appena usato un testo fittizio qui: "Questo qui è chiamato titolo."
Passaggio 15
Vai su File → Inserisci e trova una fotografia da inserire nel documento come segnaposto. Usare le immagini reali qui è sempre il migliore perché rendono il mock-up più realistico e attraente. Ho usato un foto di mia sorella .
Vai a Modifica → Trasformazione libera per ridurre le dimensioni della foto e posizionarla nel punto giusto. Riducilo in totale di 20 pixel in larghezza e altezza in modo che si adatti perfettamente al rettangolo nero, in questo modo:
Passaggio 16
Apri le opzioni di fusione per il grande rettangolo nero. Applicare una sovrapposizione di colore bianco e un'ombra esterna con un'opacità del 10% e una dimensione di 3 pixel.
Passaggio 17
Seleziona lo strumento Forma rettangolare ancora una volta e disegna una forma lunga sotto la forma dello sfondo bianco. Assicurati che abbia la stessa larghezza. Riempi con un grigio chiaro.
Apri le opzioni di fusione per il nuovo rettangolo grigio e applica un'ombreggiatura. Imposta il colore su bianco, con un normale metodo di fusione, l'opacità al 100% e la distanza a 1 pixel. Lasciare tutto il resto impostato su 0 pixel.
Inoltre, applica un'ombra interna, utilizzando il colore nero, con un'opacità del 10%. Cambia le dimensioni a 13 pixel e lascia tutto il resto impostato su 0 pixel. Questi stili a due strati faranno apparire la nuova forma come incisa sullo sfondo, come la nostra tipografia di intestazione:
Passaggio 18
Passando alla barra laterale, scarica alcune trame di legno ripetute. Sto usando un impostato da GraphicRiver che include tre diverse trame di legno: chiaro, medio e scuro.
Una volta installati i pattern in Photoshop (aprendo ogni immagine e definendola come pattern), seleziona la barra laterale nel documento di Photoshop. Vai a Livello → Nuovo livello di riempimento → Motivo. Seleziona una delle tue trame di legno (ho selezionato la versione media) e fai clic su OK. Selezionando prima la barra laterale, il modello dovrebbe riempire solo quell'area.
Fai clic con il pulsante destro del mouse sul livello del motivo e seleziona "Opzioni di fusione". Applica una sovrapposizione gradiente, passando dal nero al trasparente al nero:
Cambia l'opacità della sovrapposizione del gradiente al 10% e assegnagli un angolo di 0 °. Questo aggiungerà un'ombra sottile alla barra laterale, facendola sembrare un po 'più realistica e meno piatta.
Inoltre, applica un'ombreggiatura alla barra laterale. Abbassa l'opacità al 30% e modifica l'angolo a 180 °. Modifica la distanza a 1 pixel e la dimensione a 5 pixel, lasciando tutto il resto impostato su 0 pixel. Questo aggiungerà un'ombra piccola e sottile alla barra laterale.
Passaggio 19
Apri le "Opzioni di fusione" per il ritratto del cerchio che abbiamo creato vicino all'inizio di questo tutorial. Applica un'ombreggiatura bianca utilizzando le seguenti impostazioni:
Inoltre, applica un'ombra interna usando le impostazioni di seguito. Questo farà apparire il ritratto del cerchio come se fosse collocato nell'albero, piuttosto che sedervi sopra.
Passaggio 20
Duplica il livello del titolo nei contenuti principali. Riposizionalo nella barra laterale e cambia il testo in "Informazioni su di me". Inoltre, riposiziona e ridimensiona le due linee sotto l'intestazione.
Apri le "Opzioni di fusione" per il tuo nuovo livello di testo e modifica le seguenti impostazioni:
Aggiungi del testo alla sezione "Informazioni su di me", utilizzando lo stesso carattere e le stesse dimensioni che abbiamo usato nel testo della barra laterale destra. Apri le "Opzioni di fusione" per questo nuovo testo e fai clic sulla scheda "Luminosità esterna" per applicare un bagliore esterno; cambia l'opacità al 30%, il colore al bianco e la dimensione a 18 pixel.
Questo renderà il nostro testo più leggibile sullo sfondo di legno.
Gioca con le dimensioni del carattere per rendere il testo più facile da scansionare.
Passaggio 21
Dopo alcuni esperimenti, ho deciso che l'intera barra laterale sembrava molto meglio nel più scuro delle tre trame sopra menzionate. Ho modificato il modello della barra laterale e i colori del testo. Usa le tecniche che hai già imparato per fare questo.
Ecco come appare il mio progetto finora:
Passaggio 22
Per quanto tu abbia pianificato, sei tenuto ad apportare modifiche durante il processo di progettazione. Osservando il progetto nel suo insieme (piuttosto che frammentario), ho concluso che 10 pixel tra le barre laterali e l'area del contenuto principale non erano abbastanza vicini.
Usando la combinazione di tasti Maiusc e Cursore, spinge il tuo contenuto, rendendo i due spazi vuoti 40 pixel anziché 10. Ciò renderà il design più fruibile e attraente.
Passaggio 23
Ho anche deciso di cambiare lo stile dell'intestazione del tema.
Cambia il colore (usando una sovrapposizione di colore nella finestra "Opzioni di fusione") a uno selezionato dal ritratto del cerchio. Ho scelto un blu-verde scuro.
Ho anche rimosso l'ombra interna e modificato le impostazioni dell'ombra, facendolo apparire come se l'intestazione fosse posizionata sopra lo sfondo anziché essere inserita al suo interno.
Passaggio 24
Passando al banner di contenuto principale (ad esempio il rettangolo creato in precedenza nell'angolo in alto a destra dell'area dell'immagine del nostro contenuto principale), selezionare il rettangolo facendo clic sull'anteprima miniatura del livello tenendo premuto il tasto Comando.
Vai a Livello → Nuovo livello di riempimento → Motivo, e seleziona la stessa trama che hai usato per la barra laterale.
Fai clic con il pulsante destro del mouse sul livello di riempimento del modello e seleziona l'opzione "Rasterizza livello". Usando gli strumenti Scherma e Brucia, aggiungi le alte luci a sinistra e la parte superiore della forma e le ombre a destra e in fondo alla forma.
Ciò aggiungerà profondità e darà una leggera sensazione tridimensionale alla forma. Lo strumento Brucia scurirà l'immagine, mentre lo strumento Scherma lo alleggerirà.
Seleziona lo strumento Lazo poligonale. Seleziona una forma simile a quella sottostante e riempila con un marrone scuro, selezionato dalla tua texture.
Usando lo strumento Selezione rettangolare, seleziona le aree nella nuova forma che non ti servono e premi il tasto Canc per rimuoverle. Dovresti finire con qualcosa di simile a questo:
Passaggio 25
Prendi il nostro set di icone esclusive chiamato "Riflessione". Utilizzeremo molte di queste icone nel nostro design.
Inserisci le icone che ti servono nel documento andando su File → Inserisci. Ho scelto le icone fotocamera, cuore, ricarica, modifica e orologio, che serviranno come le mie foto, come, reblog, note e icone temporali nel tema.
Passaggio 26
Seleziona l'icona della fotocamera e ridimensionala. Posizionalo sulla barra del tipo di post che abbiamo appena creato. Applica un'ombreggiatura interna e un'ombra, usando impostazioni simili a quelle che abbiamo usato in questo tutorial.
Aggiungi un po 'di tipografia alla barra del tipo di post. Ho usato lo stesso Reklame Script che abbiamo usato nell'intestazione e le stesse opzioni di fusione che abbiamo usato per le intestazioni della barra laterale sinistra.
Passo 27
Seleziona gli altri quattro livelli di icone. Fai clic con il pulsante destro del mouse e seleziona "Rasterizza livelli" per trasformarli da oggetti intelligenti a oggetti pixel.
Utilizzare lo strumento Selezione rettangolare per selezionare tutte le riflessioni dell'icona.
Premi il tasto Canc su ciascuno dei livelli dell'icona per rimuovere il suo riflesso.
Passaggio 28
Riseleziona tutti e quattro i livelli delle icone. Vai a Modifica → Trasformazione libera e, tenendo premuto il tasto Maiusc per mantenere le icone in proporzione, riduci le loro dimensioni e posizionale sulla barra sotto l'area del contenuto principale che abbiamo creato in precedenza.
Distanzia le icone in modo uniforme usando i tasti cursore.
Passaggio 29
Fai clic con il pulsante destro del mouse sull'icona a forma di cuore e seleziona "Opzioni di fusione" dal menu. Cambia il colore in grigio chiaro con una sovrapposizione di colore e applica un'ombra interna usando le seguenti impostazioni:
Ora applica un'ombreggiatura utilizzando queste impostazioni:
Dopo aver applicato le impostazioni al livello icona cuore, fai clic con il pulsante destro del mouse e seleziona "Copia stili livello". Seleziona nuovamente tutte e quattro le icone, fai clic con il pulsante destro del mouse e seleziona "Incolla stili livello". Ora tutte le icone in questa barra dovrebbero stesso effetto.
Passaggio 30
Seleziona lo strumento testo e crea una piccola casella di testo accanto all'icona del cuore. Digita "Mi piace questo post". Applica un'ombreggiatura interna e un'ombra esterna utilizzando impostazioni simili a quelle che abbiamo utilizzato in questo tutorial.
Ripeti il passaggio precedente per le icone rimanenti, utilizzando le seguenti frasi: "Reblog questo post", "1052 note" e "Pubblicato il 19/03/2011". Assicurati di copiare e incollare lo stesso stile di livello su ogni livello di testo.
Potresti anche voler riposizionare alcune delle icone con il nuovo testo, assicurandoti che il divario tra il testo e le icone sia coerente; a causa delle diverse lunghezze del testo, questo potrebbe essere cambiato.
Passaggio 31
Duplica tutti i livelli nell'area del contenuto principale e posizionali sotto l'originale. Cambia il rettangolo del titolo, dell'immagine e del tipo di post. Come già detto, più realistico è il mock-up, meglio è.
Passo 32
Duplica l'intestazione e il testo nella barra laterale e inserisci alcune icone. Ho usato le eccellenti icone dei social media conosciute come Buddycons , un altro set esclusivo di Webdesigner Depot.
Il prodotto finale
Dopo un po 'di ritocchi (ho rimosso il taglio a forma di nastro frastagliato nella parte inferiore della barra laterale), ho finito! Ecco il nostro progetto finale, pronto per essere codificato o inviato a uno sviluppatore per farlo.
Questo tutorial è stato creato in esclusiva per il Webdesigner Depot di Callum Chapman , un designer di interfacce utente freelance che commercia sotto il nome Circlebox creativo . Callum sta anche lavorando su un galleria di ispirazione progetto chiamato Vinspires.
Ti piacerebbe vedere un altro tutorial su come suddividere e codificare questo design in un tema Tumblr completamente funzionante?