Tworzenie motywów Tumblr przy użyciu PSD w Photoshopie

Tumblr łączy silny nacisk na kreatywność wizualną z długością postów mieszczącą się pomiędzy zwięzłością Twittera a swobodą tradycyjnego bloga. Korzystając z własnego motywu Tumblr, który odzwierciedla Twoją tożsamość online i offline, możesz wkomponować tumblelog w szerszą strategię mediów społecznościowych. Projektanci stron często rozpoczynają pracę nad niestandardowymi motywami w Adobe Photoshop, używając formatu pliku PSD jako wirtualnego warsztatu.

Ustalanie wymiarów

Reguły i prowadnice w Photoshopie upraszczają tworzenie szkieletu motywu Tumblr, w tym siatki określającej wymiary obszarów treści. Warto utworzyć grupy warstw dla poszczególnych części projektu – głównej zawartości, paska bocznego itp. – i umieścić w nich wszystkie prowadnice. Dzięki temu możesz włączać i wyłączać je selektywnie, zamiast ukrywać wszystkie jednocześnie. Nazwij grupy i warstwy tak, aby od razu było wiadomo, do czego służą; oszczędzi to czas przy późniejszej edycji. Aby szybko odczytać wymiary elementu, naciśnij F8, otwórz panel Informacje i Ctrl‑klik na miniaturę warstwy, co zaznaczy jej piksele.

Dobór kolorów

Bez względu na to, czy korzystasz z klasycznego selektora kolorów, biblioteki odcieni dopasowanej do logotypu, czy narzędzia Pipeta do pobierania barw z innego pliku, Photoshop oferuje wiele metod wyboru kolorów motywu. Wypełniając warstwę jednolitym kolorem, który ma imitować tło Tumblr, możesz skopiować wartość szesnastkową (hex) z okna selektora i wkleić ją do nazwy warstwy – szybka referencja przy dalszej pracy. Ten sześciocyfrowy kod jest identyczny w kodzie Tumblr oraz w innych projektach internetowych.

Tworzenie grafiki

Nagłówek identyfikujący tumblelog może być bitmapą lub grafiką wektorową. W PSD możesz połączyć tekst z elementami rastrowymi lub wektorowymi. Jeśli w nagłówku znajdują się elementy, które mają być później edytowalne, pozostaw je jako żywy tekst; rasteryzuj je dopiero w kopiach przeznaczonych dla osób bez licencji na używaną czcionkę. Przy rysowaniu narzędziami wektorowymi (Pióro, kształty) korzystaj z prowadnic, które odpowiadają rozdzielczości szablonu – zapewni to maksymalną ostrość po wyeksportowaniu obrazu.

Kolejne kroki

Jeśli znasz HTML i CSS oraz rozumiesz zmienne specyficzne dla Tumblr, możesz przekształcić wymiary, kolory i grafiki z PSD w w pełni działający motyw. Gdy kodowanie nie jest Twoją mocną stroną, przekaż plik PSD programiście, który stworzy odpowiedni kod. Motyw Tumblr składa się nie tylko z warstwy wizualnej – musi zawierać zmienne (dynamiczne wartości) i bloki kodu, które łączą te zmienne z HTML. Bloki definiują układ postów, permalinki, linki nawigacyjne oraz elementy obsługujące polubienia i obserwujących.

Informacje o wersji

Artykuł odnosi się do Adobe Photoshop CC oraz Photoshop CS6. W innych wersjach lub produktach niektóre funkcje mogą się nieco różnić.