Tumblr combina l'enfasi sulla creatività visiva con una lunghezza del post che si colloca tra la brevità di Twitter e la lunghezza aperta di un post di un blog tradizionale. Quando utilizzi un tema Tumblr personalizzato che estende l'aspetto della tua identità online e offline, un tumblelog si inserisce in una strategia che include altri media online e social. I web designer spesso iniziano a sviluppare temi personalizzati in Adobe Photoshop, utilizzando il formato di file PSD a strati del programma come spazio di lavoro visivo.
Stabilire le dimensioni
Le guide ai righelli e le capacità di stratificazione di Adobe Photoshop semplificano il compito di creare la base di un tema Tumblr, completo di una griglia di layout che definisce le dimensioni delle aree di contenuto. Se imposti gruppi di livelli per ogni aspetto del tuo design, inclusa l'area del contenuto principale e la barra laterale, puoi posizionare tutte le guide per ogni elemento su un singolo livello all'interno di ciascun gruppo. Questa disposizione ti consente di rendere le tue guide visibili in modo selettivo, piuttosto che semplicemente mostrarle e nasconderle tutte con una scorciatoia da tastiera di Photoshop o una voce di menu, e mantiene insieme gli elementi della guida correlati. Assegna un nome ai tuoi gruppi e livelli per identificare la funzione di ciascuna parte del tuo design. I momenti che investi in attività di denominazione incrementali ripagano nel tempo che non è necessario dedicare all'attivazione e alla disattivazione dei livelli per determinare cosa contengono. Per trovare rapidamente le dimensioni di qualsiasi elemento del layout, premi "F8" per aprire il pannello Informazioni e quindi "Ctrl-clic" sulla miniatura del pannello Livelli per caricare una selezione basata sui pixel su quel livello.
Selezione dei colori
Sia che utilizzi il collaudato Color Picker per selezionare le tonalità per il tuo tema, carichi le opzioni da una libreria di colori per abbinare un pezzo stampato o un logo, o ti affidi allo strumento Eyedropper per campionare sfumature da un altro file o grafica, Adobe Photoshop gamma di modi per selezionare i colori del tema. Quando riempi un livello con un colore solido per simulare il colore di sfondo di un tema di Tumblr o altri elementi del tuo design, puoi copiare la formula del colore come testo dalla lettura esadecimale di Color Picker e incollare l'identificazione del colore nel nome del livello per una rapida consultazione. I sei caratteri alfanumerici in un colore esadecimale vengono visualizzati nel codice Tumblr e nei progetti Web per blog e altri formati online.
Creazione di grafica
L'intestazione che identifica un tumblelog può utilizzare una grafica bitmap come grafica tematica. Puoi creare questo elemento critico utilizzando una combinazione di testo ed elementi basati su pixel o vettoriali all'interno del tuo file PSD. Se l'immagine include elementi personalizzabili che hai composto in Photoshop, lasciali come caratteri live all'interno del tuo file del tema basato su PSD e rasterizzali solo in copie del file che fornisci ad altre persone che non dispongono di una licenza per i file di font richiesti nel tuo tema Quando utilizzi strumenti vettoriali per disegnare in Photoshop, inclusi gli strumenti Penna e forma, disegna utilizzando le regole guida che si allineano con la risoluzione sottostante del file modello. Questa tecnica aiuta a mantenere la grafica il più nitida possibile quando ne salvi o esporti versioni rasterizzate.
Prossimi passi
Se sai come codificare HTML e CSS e comprendi le variabili specializzate utilizzate da Tumblr nella sua struttura del codice, puoi tradurre le dimensioni, le specifiche del colore e la grafica che crei in un PSD in un tema Tumblr personalizzato funzionante. Se la codifica Web non rientra nelle tue competenze, puoi fornire il tuo PSD a un programmatore per produrre il tema per te. Insieme a un trattamento visivo, un tema di Tumblr deve includere variabili e blocchi. Le variabili accettano valori dinamici per creare elementi visivi di Tumblr standard. I blocchi formano blocchi di codice che combinano variabili con HTML. I blocchi impostano i post e i permalink che li raggiungono, collegamenti che si muovono tra pezzi di materiale organizzato cronologicamente ed elementi che accolgono le persone a cui piace o seguono un singolo tumblelog.
Informazioni sulla versione
Le informazioni in questo articolo si applicano ad Adobe Photoshop CC e Adobe Photoshop CS6. Potrebbe differire leggermente o in modo significativo con altre versioni o prodotti.
