Как да направите теми на Tumblr с PSD дизайн

Tumblr комбинира акцент върху визуалното творчество с дължина на публикацията, която е между краткостта на Twitter и отворената дължина на традиционната публикация в блога. Когато използвате персонализирана тема на Tumblr, която разширява външния вид на вашата идентичност в мрежата и офлайн, тумблог се вписва в стратегия, която включва други онлайн и социални медии. Уеб дизайнерите често започват да разработват персонализирани теми в Adobe Photoshop, като използват наслоения PSD файлов формат на програмата като свое визуално работно пространство.

Установяване на измерения

Ръководствата за линийки на Adobe Photoshop и възможностите за наслояване опростяват задачата за създаване на основата на тема на Tumblr, пълна с решетка за оформление, която определя размерите на областите със съдържание. Ако настроите групи слоеве за всеки аспект на вашия дизайн, включително основната му област на съдържание и страничната лента, можете да поставите всички водачи за всеки елемент на един слой в рамките на всяка група. Тази подредба ви позволява да направите вашите водачи селективно видими, вместо просто да ги показвате и скривате с клавишна комбинация на Photoshop или елемент от менюто и поддържа свързани елементи на ръководството заедно. Назовете вашите групи и слоеве, за да идентифицирате функцията на всяка част от вашия дизайн. Моментите, които инвестирате в допълнителни задачи за именуване, се изплащат във времето, което не е нужно да отделяте за включване и изключване на слоеве, за да определите какво съдържат те. За да намерите бързо размерите на който и да е елемент на оформление, натиснете „F8“, за да отворите панела „Информация“ и след това „Ctrl-click“ върху миниатюрата на панела „Слоеве“, за да заредите селекция въз основа на пикселите на този слой.

Избор на цветове

Независимо дали използвате изпитания във времето инструмент за избор на цвят, за да изберете нюанси за вашата тема, да заредите опции от библиотека с цветове, за да съответствате на отпечатано парче или лого, или да разчитате на инструмента Eyedropper, за да извадите нюанси от друг файл или графика, Adobe Photoshop предлага набор от начини за избор на цветове на темата. Когато запълвате слой с плътен цвят, за да симулирате цвета на фона на тема на Tumblr или други елементи от вашия дизайн, можете да копирате цветната формула като текст от шестнадесетичния показател на Color Picker и да поставите идентификацията на цвета в името на слоя за бърза справка. Шестте буквено-цифрови знака в шестнадесетичен цвят се показват в кода на Tumblr, както и в уеб дизайн за блогове и други онлайн формати.

Създаване на графика

Заглавката, която идентифицира тумблелог, може да използва растерна графика като тематична графика. Можете да създадете този критичен елемент, като използвате комбинация от текст и базирани на пиксели или вектори елементи във вашия PSD файл. Ако графиката включва персонализируеми елементи, които сте въвели в Photoshop, оставете ги като живи в рамките на вашия PSD-базиран файл с теми и ги растеризирайте само в копия на файла, който предоставяте на други хора, които нямат лиценз за необходимите файлове с шрифтове. във вашата тема. Когато използвате векторни инструменти за рисуване в Photoshop, включително инструменти за писалка и фигури, рисувайте, като използвате правила за ръководство, които се подравняват с основната разделителна способност на вашия файл с шаблон. Тази техника помага да запазите вашето произведение на изкуството възможно най-остро, когато запазвате или експортирате негови растеризирани версии.

Следващи стъпки

Ако знаете как да кодирате HTML и CSS и разбирате специализираните променливи, които Tumblr използва в кодовата си структура, можете да преведете размерите, цветовите спецификации и графиките, които изграждате в PSD, в работеща персонализирана тема на Tumblr. Ако уеб кодирането попада извън вашия набор от умения, можете да предоставите своя PSD на програмист, който да създаде темата вместо вас. Заедно с визуалната обработка, тема на Tumblr трябва да включва променливи и блокове. Променливите приемат динамични стойности за създаване на стандартни визуални елементи на Tumblr. Блоковете образуват парчета код, които комбинират променливи с HTML. Блоковете създават публикации и постоянните връзки, които достигат до тях, връзки, които се движат между парчета хронологично организиран материал и елементи, които приютяват хората, които харесват или следват отделен барабан.

Информация за версията

Информацията в тази статия се отнася за Adobe Photoshop CC и Adobe Photoshop CS6. Може да се различава леко или значително при други версии или продукти.