Zaprojektuj motyw Tumblr inspirowany lasem w Photoshopie
Tumblr to mikroblogowa platforma, która pozwala użytkownikom łatwo publikować fragmenty informacji w Internecie, takie jak zdjęcie lub zestaw zdjęć, wideo, cytat lub tylko akapit.
Jest często używany jako pamiętnik online ze względu na łatwość użycia w porównaniu do innych platform blogowych, takich jak WordPress.
Wiele motywów Tumblra jest dostępnych zarówno w wersji darmowej, jak i premium, ale czy kiedykolwiek zastanawiałeś się, jak zaprojektować własną?
W tym samouczku dowiesz się, jak stworzyć inspirowany stylem leśnym motyw Tumblr, wykorzystując tekstury drewna, subtelne wzory i nowoczesne techniki - ładne połączenie naturalnych i nowoczesnych elementów.
Co zamierzamy zaprojektować
Motyw, który będziemy projektować w Photoshopie, składa się z czterech obszarów: drewniany pasek boczny, główny obszar zawartości, prawy pasek boczny i nagłówek.
Krok 1
Pierwszym krokiem, jak powinno być ze wszystkim, co zaprojektujesz, jest etap szkicowania. Używając tabletu graficznego Wacom Bamboo i pustego płótna w Photoshopie, nakreśliłem następujący projekt, z kilkoma większymi elementami, aby położyć moje pomysły na papierze (cyfrowym).
Krok 2
Po usunięciu pomysłu utwórz nowy dokument w programie Photoshop. (Pamiętaj, że to nie jest takie proste, to coś, do czego możesz się odnieść, jeśli utkniesz w projekcie, osobiście eksperymentuję i zmieniam to, co początkowo planowałem.) Użyłem następujących ustawienia w Photoshopie:
Krok 3
Następnym etapem jest umieszczenie niektórych przewodników na płótnie. Pomoże to zachować strukturę motywu podczas projektowania. Chcę, aby lewy pasek boczny miał 200 pikseli, główny obszar zawartości wynosił 600 pikseli, a prawy pasek boczny 160 pikseli, co daje szerokość 960 pikseli.
Jeśli korzystasz z tych samych ustawień, możesz umieścić linie pomocnicze w poziomie w odległości 200, 800 i 960 pikseli. Ten projekt zostanie wyrównany do lewej, tak aby drewniany pasek boczny zawsze był umieszczony po lewej stronie okna roboczego użytkownika.
Umieściłem również prowadnice 200 pikseli poniżej górnej części płótna i 200 pikseli powyżej dolnej części kanwy. Tak właśnie wygląda mój dokument:
Krok 4
Dodajmy teraz pewien wzór do naszego tła. Przejdź do Plik → Nowy i utwórz nowy dokument o wymiarach 8 × 8 pikseli. Narysuj pionowe linie o szerokości 2 pikseli. Twoje płótno powinno teraz mieć kolor 2 piksele czarny, kolor biały 2 piksele, kolor 2 piksele czarny, kolor biały 2 piksele. Przejdź do Edycja → Zdefiniuj wzór. Zapisz wzór jako "Linie pionowe 2 x".
W oryginalnym dokumencie przejdź do warstwy → Nowa warstwa wypełnienia → Wzór. Wybierz właśnie utworzony wzór i kliknij OK. Upuść przezroczystość warstwy, aby wyglądała mniej więcej tak:
Scal wzór z warstwą tła, automatycznie rasteryzując go w procesie. Przejdź do opcji Filtr → Hałas → Dodaj szum. Zmień wartość na 5% i kliknij OK. Spowoduje to dodanie do tła subtelnej tekstury:
Utwórz nową warstwę i wypełnij ją kolorem białym. Umieść go pod oryginalną warstwą tła. Zmniejsz krycie wzoru warstwy teksturowanej do około 40%, a następnie scal go z warstwą tła, przechodząc do Warstwa → Połącz warstwy.
Krok 5
Wybierz narzędzie Prostokąt i narysuj kształt o szerokości 200 pikseli.
Będziemy wycinać dno naszego kształtu za pomocą narzędzia Polygonal Lasso, dzięki czemu będzie wyglądać jak wstążka. Utwórz zaznaczenie nad swoim kształtem, zrasteryzuj warstwę kształtu, a następnie naciśnij klawisz Delete, aby usunąć wybrany obszar.
Umieść kształt w obszarze lewego paska bocznego, który zaznaczyliśmy za pomocą naszych prowadnic.
Utwórz zaznaczenie górnej części kształtu i przejdź do Edycja → Przekształć swobodnie. Rozciągnij kształt tak, aby zachodził na górną linię płótna.
Krok 6
Wybierz narzędzie Kształt elipsy i przytrzymując klawisz Shift, aby go zaokrąglić, narysuj okrąg wypełniony kolorem białym. Umieść go u góry paska bocznego i zmień nazwę warstwy na "Portret".
Kliknij prawym przyciskiem myszy nową warstwę kształtu i wybierz opcję "Rasterize layer", aby przekształcić ją z inteligentnego obiektu w piksele. Przytrzymaj klawisz Command i kliknij obraz podglądu warstwy w panelu Warstwy. Spowoduje to wybór twojego kręgu.
Znajdź zdjęcie siebie (lub cokolwiek na swojej stronie) i skopiuj go. Wróć z powrotem do Photoshopa, a przy zaznaczonym kółku wybierz Edycja → Wklej do. Spowoduje to wklejenie obiektu w zaznaczeniu okręgu.
Po wykonaniu tej czynności automatycznie utworzono maskę warstwy na obrazie (tj. Na nowej warstwie, a nie na istniejącej warstwie koła). Przejdź do Edycja → Darmowa transformacja, aby zmienić rozmiar i / lub obrócić obraz. Pozostanie kółkiem; tylko pamiętaj, aby nie było zbyt małe. Gdy to zrobisz, usuń warstwę o nazwie "Portret" i zmień nazwę nowej warstwy.
Krok 7
Wybierz narzędzie Tekst i utwórz pole tekstowe w obszarze nagłówka. Podałem mój motyw całkowicie losową nazwę: "Kabooom." Użyłem czcionki o nazwie Reklame Script. Możesz pobrać wersję demonstracyjną czcionki lub kupić ją za 30 USD MyFonts .
Kliknij prawym przyciskiem myszy warstwę tekstową i wybierz "Opcje mieszania". Zastosuj kolorową nakładkę do tekstu. Użyłem jasnoszarego, które jest nieco ciemniejsze niż tło, z kodem szesnastkowym # D6D6D6.
Zastosuj cień wewnętrzny do typu, używając krycia 10%, odległości 2 pikseli i wielkości 1 piksela. Pozostaw wszystko na 0. To sprawi, że typ będzie wyglądał tak, jakby był wygrawerowany w tle.
Aby ukończyć efekt grawerowania, dodamy cień do typu, używając koloru białego z normalnym trybem mieszania. Podaj cienie w odległości 2 pikseli i 1 piksela. Te ustawienia sprawią, że cień pojawi się jako podkreślenie na dole tekstu, dodając więcej głębi do typu i wzmacniając cień wewnętrzny.
Krok 8
Ponownie wybierz narzędzie Tekst i utwórz pole tekstowe, które wypełnia szerokość prawego paska bocznego, który oznaczono za pomocą linii pomocniczych. Umieść różne kategorie pod nagłówkiem kategorii, jak pokazano poniżej:
Wybierz nagłówek kategorii i zmień krój czcionki na jedną z opcji. Użyłem Minion Pro. Eksperymentuj z pod-czcionkami (pogrubieniem, kursywą itp.) I wielkościami punktów.
Zmień czcionkę dla kategorii ("Wiadomości", "Dni na zewnątrz", "Fotografia" itp.) Użyłem Myriad Pro. Zmniejsz rozmiar punktu typu i dostosuj wiodącą (tj. Spację między wierszami tekstu), aby górna linia była niższa niż domyślna.
Skopiuj pierwszy nagłówek i linki i wklej je poniżej w tym samym polu tekstowym. Zmień nagłówek i kategorie. Użyłem nagłówków "Moje projekty" i "Moi przyjaciele". Oczywiście wykorzystajcie to, co jest istotne dla waszej strony.
Krok 9
Teraz sprawimy, że tekst na prawym pasku bocznym będzie nieco bardziej atrakcyjny. Wybierz tekst dla podkategorii (tzn. Nie nagłówków) i zmień kolor z czarnego na ciemny szary. Użyłem # 333333. Kliknij OK.
Kliknij prawym przyciskiem myszy warstwę tekstową i wybierz "Opcje mieszania". Zastosuj biały cień z normalnym trybem mieszania. Zmień kąt na 120 °, a odległość i rozmiar na 1 piksel. Pozostaw wszystko inne ustawione na 0 pikseli. Spowoduje to dodanie podkreślenia na dole tekstu, podobnie jak w nagłówku.
Krok 10
Wybierz narzędzie Linia i przytrzymując klawisz Shift, aby zachować prostą linię, narysuj linię pod nagłówkiem "Kategorie".
Kliknij prawym przyciskiem myszy warstwę linii i wybierz "Opcje mieszania". Zastosuj biały cień z normalnym trybem mieszania. Ustaw kąt na 90 °, a odległość na 1 piksel. Ustaw wszystko inne na 0 pikseli.
Duplikuj warstwę liniową i umieść ją poniżej każdego z nagłówków.
Krok 11
Jeśli masz taką samą liczbę nagłówków jak ja, powinieneś mieć trzy warstwy linii. Wybierz je wszystkie i powiel je. Przy wciąż trzech wybranych liniach przesuń je o 10 pikseli przytrzymując klawisz Shift i jednokrotnie naciskając klawisz strzałki w dół. Obniż krycie twoich nowszych warstw linii do 25%, aby zakończyć coś takiego:
Krok 12
Chwyć narzędzie Kształt prostokąta i narysuj prostokąt podobny do poniższego. Utwórz prostokąt o szerokości dokładnie 570 pikseli. Umożliwi to 10-pikselową przerwę między lewym bocznym paskiem i krawędzią nowego prostokąta oraz 20-pikselową luką pomiędzy prawym bocznym paskiem a krawędzią nowego prostokąta, co widać na poniższym zrzucie z komentarzem:
Krok 13
Ponownie wybierz narzędzie Kształt prostokąta i utwórz znacznie mniejszy szary prostokąt, taki jak ten poniżej. Ustaw go w prawym górnym rogu dużego prostokąta, przesuniętym o 10 pikseli od dużego prostokąta. Ustaw kształt w odległości 30 pikseli od wierzchołka prostokąta.
Krok 14
Zduplikuj warstwę tekstową na prawym pasku bocznym i, używając kombinacji klawiszy Shift i Cursor key, przesuń warstwę typu duplikowanego nad główny obszar zawartości. Zrób to samo z dwiema warstwami liniowymi dla nagłówka "Kategorie".
Wybierz narzędzie Tekst i kliknij swoją powieloną warstwę tekstową. Usuń cały tekst z pola i zmień nagłówek na coś bardziej odpowiedniego. Właśnie użyłem tutaj jakiegoś tekstu: "To tutaj nazywa się tytułem".
Krok 15
Przejdź do Plik → Umieść i zlokalizuj zdjęcie, aby umieścić je w dokumencie jako symbol zastępczy. Używanie prawdziwych obrazów jest zawsze najlepsze, ponieważ sprawiają, że makieta wydaje się bardziej realna i atrakcyjna. Użyłem a zdjęcie mojej siostry .
Przejdź do Edycja → Darmowa transformacja, aby zmniejszyć rozmiar zdjęcia i umieścić go we właściwym miejscu. Spraw, by w sumie był on o 20 pikseli krótszy zarówno w stosunku do szerokości, jak i wysokości, tak aby pasował ładnie do czarnego prostokąta, tak jak poniżej:
Krok 16
Otwórz opcje mieszania dla dużego czarnego prostokąta. Zastosuj nakładkę koloru białego i cień z nieprzezroczystością 10% i rozmiarem 3 pikseli.
Krok 17
Wybierz ponownie narzędzie Kształt prostokąta i narysuj długi kształt poniżej kształtu białego tła. Upewnij się, że ma tę samą szerokość. Wypełnij go jasnoszarą.
Otwórz opcje mieszania dla nowego szarego prostokąta i zastosuj cień. Ustaw kolor na biały, z normalnym trybem mieszania, krycie na 100% i odległość do 1 piksela. Pozostaw wszystko inne ustawione na 0 pikseli.
Zastosuj również cień wewnętrzny, używając koloru czarnego, o nieprzezroczystości 10%. Zmień rozmiar na 13 pikseli, a pozostałe elementy ustaw na 0 pikseli. Te dwa style warstw sprawią, że nowy kształt będzie wyglądał tak, jakby był wytrawiony w tle, podobnie jak nasza typografia nagłówka:
Krok 18
Przechodząc na pasek boczny, pobierz kilka powtarzających się tekstur drewna. Używam zestaw od GraphicRiver obejmuje trzy różne tekstury drewna: lekkie, średnie i ciemne.
Po zainstalowaniu szablonów w programie Photoshop (po otwarciu każdego obrazu i zdefiniowaniu go jako wzorca) wybierz pasek boczny w dokumencie programu Photoshop. Przejdź do Warstwy → Nowa warstwa wypełnienia → Wzór. Wybierz jedną ze swoich tekstur drewna (wybrałam wersję średnią) i kliknij OK. Wybierając najpierw pasek boczny, wzór powinien wypełniać tylko ten obszar.
Kliknij prawym przyciskiem myszy warstwę wzorów i wybierz "Opcje mieszania". Zastosuj nakładkę gradientową, przechodząc od czerni do przezroczystości do czerni:
Zmień przezroczystość nakładki gradientu na 10% i ustaw ją pod kątem 0 °. Spowoduje to dodanie subtelnego cienia do paska bocznego, dzięki czemu będzie wyglądać trochę bardziej realistycznie i mniej płasko.
Zastosuj również cień na pasku bocznym. Obniż krycie do 30% i zmień kąt na 180 °. Zmień odległość na 1 piksel, a rozmiar na 5 pikseli, pozostawiając wszystko inne ustawione na 0 pikseli. To doda mały i subtelny cień do paska bocznego.
Krok 19
Otwórz "Opcje mieszania" dla portretu koła, który stworzyliśmy w pobliżu początku tego samouczka. Zastosuj biały cień korzystając z poniższych ustawień:
Zastosuj również wewnętrzny cień, korzystając z poniższych ustawień. Sprawi to, że portret koła będzie wyglądał tak, jakby był umieszczony w drzewie, a nie tylko siedział na nim.
Krok 20
Zduplikuj tytułową warstwę w głównej zawartości. Zmień położenie na pasku bocznym i zmień tekst na "O mnie". Zmień położenie i rozmiar dwóch linii poniżej nagłówka.
Otwórz "Opcje mieszania" dla nowej warstwy typu i zmień ustawienia tego cienia:
Dodaj tekst do sekcji "O mnie", używając tej samej czcionki i rozmiaru, co w prawym tekście na pasku bocznym. Otwórz "Opcje mieszania" dla tego nowego tekstu i kliknij zakładkę "Zewnętrzna poświata", aby zastosować zewnętrzną poświatę; zmień krycie na 30%, kolor na biały i rozmiar na 18 pikseli.
Sprawi to, że nasz tekst będzie bardziej czytelny na drewnianym tle.
Rozejrzyj się za pomocą rozmiaru czcionki, aby ułatwić skanowanie tekstu.
Krok 21
Po kilku eksperymentach zdecydowałem, że cały pasek boczny wygląda o wiele lepiej w ciemniejszym z trzech wyżej wymienionych tekstur. Zmieniłem wzór paska bocznego i kolory tekstu. Wykorzystaj techniki, których już się nauczyłeś, aby to zrobić.
Oto jak wygląda mój projekt:
Krok 22
Jakkolwiek zaplanowałeś, jesteś zobowiązany do wprowadzania zmian podczas procesu projektowania. Patrząc na projekt jako całość (a nie fragmentarycznie), doszedłem do wniosku, że 10 pikseli między pasmami bocznymi i głównym obszarem treści nie było wystarczająco blisko.
Używając klawisza Shift i kombinacji klawiszy kursora, przesuń zawartość w poprzek, tworząc dwie przerwy 40 pikseli zamiast 10. To sprawi, że projekt będzie bardziej użyteczny i atrakcyjny.
Krok 23
Postanowiłem również zmienić styl nagłówka tematu.
Zmień kolor (za pomocą nakładki koloru w oknie "Opcje mieszania") na jeden wybrany z portretu okręgu. Wybrałem ciemnozielono-niebieski.
Usunąłem także cień wewnętrzny i zmieniłem ustawienia cieniowania, dzięki czemu wygląda on tak, jakby nagłówek znajdował się nad tłem, a nie na nim ustawiony.
Krok 24
Przechodząc do głównego banera treści (tj. Utworzonego wcześniej prostokąta, który znajduje się w prawym górnym rogu obszaru obrazu głównego treści), zaznacz prostokąt, klikając podgląd miniatury warstwy, przytrzymując klawisz Command.
Przejdź do opcji Warstwa → Nowa warstwa wypełnienia → Wzór i wybierz tę samą teksturę, co dla paska bocznego.
Kliknij prawym przyciskiem myszy warstwę wypełnienia deseniem i wybierz opcję "Rasterize layer". Korzystając z narzędzi Dodge and Burn, dodaj rozjaśnienia po lewej i górze kształtu oraz cienie po prawej i dolnej stronie kształtu.
To doda głębi i nada kształtowi nieco trójwymiarowego charakteru. Narzędzie Nagraj spowoduje przyciemnienie obrazu, a narzędzie Dodge rozjaśni je.
Wybierz narzędzie Lasso wielokątne. Wybierz kształt podobny do poniższego i wypełnij go ciemnobrązowym, wybranym z twojej tekstury.
Za pomocą narzędzia Zaznaczanie prostokątne wybierz obszary w nowym kształcie, które nie są potrzebne, a następnie naciśnij klawisz Delete, aby je usunąć. Powinieneś skończyć z czymś podobnym do tego:
Krok 25
Chwyć nasze własne ekskluzywny zestaw ikon "Reflection". W naszych projektach wykorzystamy kilka z tych ikon.
Wstaw ikony, które potrzebujesz w dokumencie, przechodząc do Plik → Umieść. Wybrałem ikony aparatu, serca, przeładowania, edycji i zegara, które będą służyć jako moje zdjęcia, takie jak, reblog, notatki i ikony czasu w temacie.
Krok 26
Wybierz ikonę kamery i zmień jej rozmiar. Umieść go na pasku typu postu, który właśnie utworzyliśmy. Zastosuj do niej cień wewnętrzny i cień, korzystając z ustawień podobnych do tych, których używaliśmy podczas tego samouczka.
Dodaj trochę typografii do paska typu postu. Użyłem tego samego skryptu Reklame, który użyliśmy w nagłówku i tych samych opcji mieszania, które wykorzystaliśmy dla nagłówków lewego paska bocznego.
Krok 27
Wybierz pozostałe cztery warstwy ikon. Kliknij prawym przyciskiem myszy i wybierz "Rasteryzuj warstwy", aby przekształcić je z obiektów inteligentnych w obiekty pikselowe.
Użyj narzędzia Zaznaczanie prostokątne, aby wybrać wszystkie odbicia ikony.
Naciśnij klawisz Delete na każdej z warstw ikon, aby usunąć jego odbicie.
Krok 28
Ponownie wybierz wszystkie cztery warstwy ikon. Idź do Edytuj → Bezpłatne przekształcenie i przytrzymując klawisz Shift, aby zachować proporcje ikon, zmniejsz ich rozmiar i umieść je na pasku poniżej głównego obszaru treści, który utworzyliśmy wcześniej.
Wyrównaj symbole równomiernie za pomocą klawiszy kursora.
Krok 29
Kliknij prawym przyciskiem myszy warstwę ikony serca i wybierz "Opcje mieszania" z menu. Zmień kolor na jasnoszary używając nakładki kolorów i zastosuj cień wewnętrzny, korzystając z następujących ustawień:
Teraz zastosuj cień, korzystając z następujących ustawień:
Po zastosowaniu ustawień do warstwy ikony serca kliknij prawym przyciskiem myszy i wybierz "Skopiuj style warstw". Wybierz ponownie wszystkie cztery ikony, kliknij prawym przyciskiem myszy i wybierz "Wklej style warstw". Wszystkie ikony na tym pasku powinny mieć teraz taki sam efekt.
Krok 30
Wybierz narzędzie Tekst i ułóż małe pole tekstowe obok ikony serca. Wpisz "Like this post". Zastosuj cień wewnętrzny i cień przy użyciu ustawień podobnych do tych, z których korzystaliśmy w tym samouczku.
Powtórz poprzedni krok dla pozostałych ikon, używając następujących wyrażeń: "Rebloguj ten wpis", "1052 notatki" i "Zamieszczono w dniu 19/03/2011." Pamiętaj, aby skopiować i wkleić ten sam styl warstwy na każdej warstwie typu.
Możesz także zmienić położenie niektórych ikon z nowym tekstem, upewniając się, że luka między tekstem i ikonami jest spójna; ze względu na różne długości tekstu mogło się to zmienić.
Krok 31
Powiel wszystkie warstwy w głównym obszarze zawartości i umieść je poniżej oryginału. Zmień tytuł, obraz i prostokąt typu wpisu. Jak wspomniano, im bardziej realistyczna jest makieta, tym lepiej.
Krok 32
Zduplikuj nagłówek i tekst na pasku bocznym i wstaw kilka ikon. Użyłem doskonałych ikon mediów społecznościowych znanych jako Buddycons , kolejny zestaw wyłącznie dla Webdesigner Depot.
Ostateczny produkt
Po kilku kolejnych poprawkach (usunąłem poszarpane wstążkowe cięcie u dołu paska bocznego), skończyłem! Oto nasz ostateczny projekt, gotowy do zakodowania lub wysłany do programisty, aby to zrobić.
Ten samouczek został stworzony wyłącznie dla Webdesigner Depot przez Callum Chapman , niezależny projektant interfejsu użytkownika handlujący pod nazwą Kreacja Circlebox . Callum również pracuje nad galeria inspiracji projekt o nazwie Vinspires.
Czy chciałbyś zobaczyć kolejny samouczek na temat tego, w jaki sposób wyciąć i zakodować ten projekt w w pełni działający motyw Tumblr?