Share
Cosa starai creandoIn questo tutorial vedremo come procedere passo passo nella creazione di un semplice tema di diario di Tumblr basato su foto in Photoshop. Inizierò completamente da zero e ti guiderò attraverso l'intero processo di impostazione del documento, utilizzando alcuni strumenti di base e completando il progetto in pochissimo tempo. Lo scopo di questo tutorial è mostrare come vengono prese alcune decisioni di progettazione e come prende vita il progetto finale.
Per poter seguire, avrai bisogno di alcune risorse (disponibili gratuitamente):
Inizia creando un nuovo documento Photoshop (File> Nuovo ... ) usando le impostazioni mostrate sotto. Sei libero di usare una tela di qualsiasi dimensione tu preferisca, il web non è una larghezza fissa, dopotutto.
Impostiamo alcune guide in modo che il nostro layout abbia spazio sufficiente e un aspetto equilibrato. Non utilizzo sempre una griglia predefinita, ma l'impostazione di alcune linee guida garantirà l'accuratezza e contribuirà a definire la larghezza del nostro sito web. Vai a Visualizza> Nuova guida ... e impostare alcune linee guida. Di solito scelgo 1000px come larghezza del sito web e aggiungo alcune linee guida dagli angoli in modo che abbia spazio per respirare.
Nota: Linee guida utilizzate per questo tutorial: verticale a 100px, 600px, 720px e 1100px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
L'intestazione o l'area "above the fold" (ovunque sia in questi giorni) svolge un ruolo molto importante nel coinvolgere gli utenti e assicurare che i visitatori rimangano sul sito web. Per il diario fotografico di questo viaggiatore, userò una bellissima foto di paesaggi da spiaggia per creare l'atmosfera avventurosa e invieremo inconsciamente un messaggio per i visitatori che dicono che questo è il sito web è viaggiare.
Per prima cosa, crea un gruppo chiamato "Intestazione" per l'intestazione facendo clic Livello> Nuovo> Gruppo ... o premendo la piccola icona nella parte inferiore del pannello dei livelli.
Per iniziare, mettiamo la navigazione nella parte superiore del nostro diario in modo che le persone possano navigare facilmente. Seleziona il Strumento di tipo orizzontale (T), scegliere PT Sans font 13px dimensione, impostare il colore su grigio scuro # 323232 e inserisci il nome del tuo diario fotografico. Questo è un posto adatto per il nostro logo, quindi buttatene uno se ne avete uno. Sto usando un nome fittizio per questo diario fotografico "Boarding Gate". Per renderlo più visivamente accattivante espandi il puntamento (la spaziatura tra le lettere) a 200.
Assicurati di lasciare un po 'di spazio per il titolo qui sopra, l'ho spostato verso il basso 25px.
Accentsconagua
# 666666. Posizionalo nell'angolo in alto a destra prima dell'ultima linea guida verticale.
All'interno del gruppo "Intestazione" disegna una forma rettangolare (usa qualsiasi altro colore del bianco per renderlo visibile) usando il Strumento rettangolo (U). Nel mio caso ho disegnato un rettangolo di dimensioni 1200x640px e l'ho posizionato nella parte superiore del documento lasciando 25px gap sotto la navigazione in alto.
Ora scarica questa foto sulla spiaggia (o qualsiasi altra cosa ti piace), trascinala nel documento di Photoshop e posizionala sopra il livello del rettangolo. Rinominare il livello dell'immagine in qualcosa che riconoscerai in seguito, nel mio caso ho usato IMG. Dopo di ciò, tieni premuto il tasto alt tasto e mouse sul livello foto fino a quando non vedi una piccola freccia rivolta verso il basso, quindi rilasciala. Hai appena creato un Maschera di ritaglio. Infine riduci lo strato IMG Opacità a 75% per rendere il testo che metteremo in cima sarà più leggibile.
Ora colpisci T CMD + e ridimensiona la foto in base alle tue esigenze.
Mancia: tenere premuto Cambio chiave per trasformare proporzionalmente.
Facciamo un messaggio introduttivo per dire agli utenti di cosa si tratta. Assicurati di utilizzare un testo di grandi dimensioni per attirare l'attenzione dei visitatori. Nel mio caso è lo stesso PT Sans font, 52px taglia. Ho usato un carattere secondario per un messaggio secondario PT Serif 28px taglia. Notare lo spazio tra le righe, lasciare sempre uno spazio sufficiente affinché la copia sia leggibile.
Infine abbiamo bisogno di un pulsante call to action (CTA) per dire alla gente cosa fare. Scegli il Strumento rettangolo (U) e disegna un bianco #FFFFFF forma rettangolare. Dopo quel posto inserisci del testo all'interno del rettangolo bianco dicendo qualcosa come "Sfoglia le foto". Assicurati di lasciare dello spazio sopra il pulsante in modo che appaia forte e indipendente.
Come forse già saprai, Tumblr ha diversi tipi di post disponibili. Di seguito è riportato uno screenshot dell'interfaccia della dashboard di Tumblr che mostra i possibili tipi di post che è possibile creare.
Nei prossimi passi ti illustrerò il processo di creazione di diversi tipi di post, in particolare:
Vi lascerò per completare il resto come un incarico.
Iniziamo prima con la voce di testo. Creeremo una unità per poi riprodurla per gli altri tipi di post. Tutti i post saranno basati sulla stessa struttura e condivideranno funzionalità simili (data del post, tag, opzioni di condivisione).
Crea un nuovo gruppo chiamato "Unità di testo". Dopo questo cambia il colore di sfondo in marrone chiaro # f8f7f6, scegli il Strumento rettangolo (U) e traccia una forma rettangolare tra la prima e l'ultima linea guida verticale. Nel mio esempio il rettangolo è 1000x284px.
Prendi il Strumento di tipo orizzontale (T) e usando PT Sans (Bold) 32px inserire un titolo Assicurati di dare un po 'di spazio al tuo titolo per renderlo equilibrato e pulito. Nel mio caso l'ho spinto a 50px dall'alto e a sinistra.
Usando lo stesso strumento di prelievo PT Serif carattere, riduci la dimensione del carattere a 15px e cambia il colore in grigio più chiaro # 444444. Successivamente inserisci i contenuti del tuo post. Assicurati di aumentare l'altezza della linea per renderla più leggibile e visivamente accattivante. In questo caso ho impostato l'altezza della linea a 26px.
Infine, dobbiamo mostrare la data di pubblicazione a fianco, con alcuni tag e opzioni di condivisione. Usando lo stesso tipo di strumento inserisci alcuni tag, ognuno preceduto da un hashtag #, e posizionarlo sotto il contenuto. Dopodiché cambia il colore in grigio più chiaro # 666666 quindi è visivamente più leggero e dà l'impressione di essere meno importante, permettendo più attenzione per il contenuto principale.
Ora vai su Iconfinder e scarica le icone share, retweet e heart.
Infine, crea un nuovo gruppo chiamato "Icone" e posiziona le icone all'interno del gruppo. Applicare un po 'di spazio ai lati e ridurre il gruppo Opacità a 30% quindi le icone corrispondono alla data e al colore dei tag.
Fatto ciò, duplicare il gruppo "Unità di testo" e rinominarlo in "Unità foto". Spostalo di 60px sotto il primo blocco, rimuovi il livello di contenuto e sposta il titolo del post in fondo per essere in linea con la data e i tag. Cambia il titolo del post, data e tag. Seleziona il livello di sfondo unitario, colpito T CMD + e ridimensionalo per avere uno spazio di 50px sopra e sotto.
Duplica il livello di sfondo dell'unità e ridimensionalo usando T CMD +. Nel mio caso l'ho ridimensionato a 1000x510px.
Spostalo sopra il titolo e vai su Skitterphoto per scegliere una fotografia che vorresti usare per il post fotografico, posizionandola sopra il rettangolo. Tieni premuto alt premere il tasto e il mouse sulla miniatura del livello finché non si vede una piccola freccia rivolta verso il basso. Quindi rilascia il mouse per creare un Maschera di ritaglio.
Questo è facile. Duplicare CMD + J il gruppo "Unità foto" e rinominarlo in "Unità video". Sposta 60px sotto il post fotografico e modifica l'immagine, il titolo, la data e i tag. Dopodiché dobbiamo indicare che si tratta di un post video posizionando un'icona di YouTube su di esso.
Scarica l'icona di YouTube da Iconfinder e posizionala al centro dell'immagine del video.
Ancora una volta duplicare (CMD + J) il gruppo "Unità di testo" e spostarlo sotto il post del video. Rimuovi il titolo e i livelli di contenuto lasciando la data, i tag e le icone di condivisione.
Dopo, prendi il Strumento di tipo orizzontale (T), scegliere PT Serif (Corsivo) font, imposta dimensioni a 35px e assicurarsi che il colore sia grigio scuro # 323232.
Infine, incolla il tuo preventivo preferito e regola lo sfondo intorno a esso, ricordando di lasciare spazi vuoti costanti di 50 pixel sui lati.
Ora duplica il gruppo "Photo Unit" e posizionalo sotto il post di quotazione in modo che il nostro mockup assomigli più a un blog di Tumblr reale.
Eccoti. Ti ho mostrato come creare testo, foto, video e tipi di post di quotazione e ora è il momento di creare il resto dei tipi di post per link, chat e audio. La coerenza è la chiave, prova a riutilizzare gli elementi che abbiamo già creato e utilizza gli stessi caratteri, colori, spaziatura in modo che il tuo design appaia equilibrato e sia percepito come un tutto.
Siamo molto vicini a finire questo semplice tema Tumblr. Aggiungiamo ora un pulsante "carica altro" (qualcosa di comune ai temi di Tumblr) e una dichiarazione sul copyright.
Riduci a icona tutti i gruppi e creane uno nuovo chiamato "Piè di pagina". Dopodiché apri il gruppo "Intestazione" e trova i livelli del pulsante "Cerca foto", la forma del rettangolo e il livello di testo. Tenere premuto il tasto CMD chiave e selezionare entrambi questi livelli, quindi premere CMD + J per duplicarli e trascinarli nel tuo gruppo "Footer".
Una volta fatto, fai doppio clic sul livello di forma rettangolare e cambia il suo colore in quello usato per lo sfondo "Foto" per mantenere la consistenza.
Infine, inserisci le informazioni sul copyright. Per coerenza usa lo stesso carattere usato per la copia della foto. In questo caso lo è PT Serif 15px colore grigio # 444444. Notare la spaziatura, in tutto il layout abbiamo un sacco di spazio bianco che dà questa sensazione di pulizia e organizzazione. Ho usato 60px per gli spazi tra le voci delle foto, il pulsante "carica più" e la linea del copyright.
L'allineamento è centrato per mantenere le cose coerenti con i pulsanti di messaggistica e call to action (CTA).
Questo è tutto! Abbiamo finito con il design del tema, ora rivediamo i livelli del documento, eliminiamo quelli non necessari e consegnali al tuo sviluppatore, o ancora meglio codificalo tu stesso. In un prossimo tutorial, codificheremo questo design in un tema Tumblr completamente funzionale, quindi rimanete sintonizzati!
