Jeśli czytasz ten artykuł, prawdopodobnie masz bardzo piękny projekt strony internetowej, prawdopodobnie wykonany w Adobe Photoshop i zapisz w formacie PSD, JPG, PDF, AI lub PNG. Teraz chcesz przekonwertować ten plik obrazu do Motyw WordPress dzięki czemu możesz zastosować go do nowo utworzonej strony internetowej lub bloga. Równie dobrze możesz sobie życzyć Konwerter PSD na WordPress -Ale co by było, gdyby można było dokonać tej transformacji samemu i to też jest wolny!

Wiele osób, które są dobre w projektowaniu graficznym, dochodzi do tego momentu konwersji PSD na motywy WordPress. I czują się zablokowane! Ale to nie ich wina. Budowanie strony internetowej wymaga nie tylko umiejętności tworzenia świetnie wyglądających projektów, ale także umiejętności programistycznych. Musisz być ekspertem przynajmniej w HTML, CSS, JavaScript, jQuery i programowanie PHP aby zamienić plik PSD w stronę internetową. Problem w tym, że większość ludzi też dobry projektant lub dobry programista!

Jednak nie martw się. Konwersja PSD na motyw WordPress nie jest wcale taka trudna. Wszystko, co musisz wiedzieć, to właściwe kroki, które należy podjąć. W tym artykule powiem ci to samo! Zacznijmy się uczyć.

Co to jest plik PSD?

Ci, którzy nie wiedzą PSD oznacza dokument programu Photoshop. Jest to format pliku, w którym Adobe Photoshop zapisuje pliki wykonywalne. Możesz otworzyć pliki PSD w Photoshopie i wprowadzić dalsze zmiany w projekcie, jak chcesz. Pliki PSD są więc czasami nazywane Otwórz pliki (odnosi się do tego, że pliki te można edytować).

Jeśli chcesz wykonać projekt strony internetowej swoich marzeń, prawdopodobnie wybierzesz Photoshopa, aby go zmaterializować. Photoshop to bez wątpienia najlepsze i najpopularniejsze narzędzie do projektowania graficznego.

Czym jest WordPress?

WordPress to zasadniczo bezpłatna platforma blogowa. Jest otwarte kod źródłowy program ułatwił tworzenie własnych stron internetowych lub blogów nawet osobom niebędącym programistami. WordPress jest solidny, skalowalny i napisany w PHP.

Projekt strony internetowej w oparciu o WordPress nosi nazwę temat(i czasami, próbka).

Konwertuj PSD na motyw WordPress

Krok 1: Wytnij plik PSD

Gdy plik PSD jest gotowy, pierwszą rzeczą, którą musisz zrobić, to podzielić go na kawałki. Po co? Cóż, ponieważ jeden obraz będzie miał duży rozmiar i ładowanie zajmie więcej czasu. Ponadto będziesz musiał połączyć różne modele zachowanie z różnymi segmentami obrazu. Więc musisz go wyciąć.

Ale to nie znaczy, że możesz po prostu losowo wyciąć obraz. Musisz robić rzeczy w logiczny sposób. Np. nagłówek może stać się jednym kawałkiem, stopka powinna być osobna... potem można wyciąć tło, przycisk i menu itp.

Adobe Photoshop umożliwia korzystanie z warstw. Ma wbudowany obiekt do wycinania PSD i zapisywania powstałych segmentów jako pojedyncze pliki zdjęcia. Możesz zapisać te obrazy w formatach JPG lub PNG. Jeśli potrzebujesz przezroczystości do pracy w którymkolwiek z tych segmentów, musisz to zapisać w Format PNG ponieważ JPG nie obsługuje przezroczystości.

Podczas wycinania obrazu musisz być precyzyjny. Błąd nawet jednego piksela może sprawić, że dwie części nie nadają się do repliki.

Podczas krojenia PSD w celu przekształcenia go w motyw WordPress, musisz to zrozumieć obecnie czas CSS dość potężny i może tworzyć szereg elementów za pomocą zaledwie kilku linijek kodu. Na przykład możesz tworzyć jednolite kolorowe tła, tła gradientowe, przyciski różne rodzaje, linie, strzałki i znaki specjalne, tylko z za pomocą CSS. W ten sposób nie musisz zapisywać tych rzeczy jako obrazów. Mniej obrazów, szybciej ładuje się Twoja witryna.

Poniższy film na YouTube pokazuje dokładnie, jak podzielić plik PSD i zapisać go jako różne obrazy:

OK, teraz, gdy masz już różne elementy wizualne projektu witryny, czas przejść do następnego kroku.

Krok 2: Utwórz pliki HTML i CSS

Teraz zaczyna się główna część kodowania procesu konwersji PSD na stronę internetową. Zasadniczo musisz stworzyć stronę internetową i złożyć wszystkie pokrojone obrazy w taki sposób, aby wyglądały dokładnie tak, jak twoje PSD.

Najpierw musisz stworzyć plik HTML. Możesz to nazwać jak chcesz, ale umownie nazwijmy to index.htm. W tym pliku będziesz musiał napisać kod HTML lub XHTML, aby pokazać różne części obrazu z PSD. Aby utworzyć układ podstawowy, możesz użyć elementów DIV. Elementy DIV są bardzo wszechstronne. Elementy DIV można umieszczać obok siebie, nakładając na siebie. Możesz wyrównać środek elementu DIV do lewej i prawej strony, a także możesz ustawić je bardzo dokładnie w określonych współrzędnych na stronie internetowej.

W tych elementach DIV możesz wywoływać zapisane obrazy i wyświetlać je jako takie lub jako tło w DIV.

Po wykonaniu tego podstawowego układu strony internetowej, powinieneś: stylizuj to aby był taki sam jak twój PSD. Do stylizacji musisz użyć reguł kaskadowych arkuszy stylów (CSS). Dzięki tym zasadom możesz używać różnych stylów czcionek, rozmiarów, kolorów, cieni tekstu, skalowania szarości obrazu, obramowań itp.

Do pisania zasad style css, musisz utworzyć inny plik o nazwie style.css a następnie wywołaj ten plik css index.htm. Style obecne w style.css zastosuje się do różnych elementów w plikach HTML.

Okej, czekaj! Jeśli nie wiesz nic o kodowaniu HTML lub CSS, nie martw się! To jest bardzo proste języki skrypty i możesz łatwo nauczyć się ich online. Poniżej znajdują się niektóre zasoby online, w których możesz nauczyć się CSS i HTML:

Poradniki dotyczące HTML

1. Samouczek HTML W3Schools
2. PoradnikiPoradnik HTML Point
3. HTML.net
4. Pies HTML

Samouczki CSS

1. Samouczek CSS
2. Samouczek CSS W3Schools
3. Tuts Plus
4. Podstawy CSS

Krok 3: Łamanie pliku HTML w plikach motywów WordPress

Na ten moment w procesie konwersji PSD na motyw WordPress, miałbyś jeden plik HTML (indeks.html) i jeden plik css (style.css). W trzecim kroku musisz podzielić plik HTML zgodnie z Motyw struktury WordPress. Zdezorientowany? Cóż, WordPress ma predefiniowany zestaw plików, które są nazwane razem, aby utworzyć stronę internetową. Na przykład podczas wyświetlania posta WordPress wymaga między innymi zawartości nagłówka pliku, pliku zip, pliku paska bocznego i stopki. Ale masz cały kod w jednym pliku - index.htm. Więc będziesz musiał redystrybuować kod index.htm do różnych plików wp. To w zasadzie praca polegająca na wycinaniu i wklejaniu! Oto lista niektórych ważnych plików motywów dla WordPressa:

• archiwum.php
• kategorie.php
• komentarze.php
• stopka.php
• header.php
• index.php
• strona.php
• search.php
• sidebar.php
• pojedynczy.php
• styl.css
• 404.php

Aby stworzyć główny motyw WordPress, chciałbyś stworzyć przynajmniej nagłówek.php, stopka.php, sidebar.php pojedynczy.php I index.php

Po prostu utwórz te pliki PHP w dowolnym edytorze tekstowym notatnika i skopiuj odpowiedni kod z index.htm do tych plików. Kod, utwórz część nagłówka, wejdzie nagłówek.php, kod przypisu trafi do stopka.php... tak dalej i tak dalej.

Jeśli nie znasz języka PHP, możesz mieć trudności z prawidłowym utworzeniem tych plików. Jest kilka naprawdę dobrych i darmowych lekcje online uczyć się PHP. W3Schools i PHP.net zapewniają łatwe do zrozumienia Pomoc PHP. Możesz przejść przez te samouczki, aby poczuć PHP.

Następny film na youtube pomoże Ci zrozumieć, jak skonfigurować „nagi motyw WordPress” (w zasadzie oznacza to -Pusty motyw WodPressa.

Krok 4: Dodawanie funkcji i tagów WordPress

Teraz nadszedł czas, aby przekonwertować proste pliki PHP na pliki motywów WordPress. Aby to zrobić, musisz dodać do plików tagi WordPress. Ale możesz zapytać czym dokładnie są tagi WordPress?

Jak powiedziałem wcześniej, WordPress to doskonała i niezawodna platforma. Daje to ogromną ilość wbudowanych funkcji, które możesz łatwo wywołać i załatwić sprawy.

Spójrzmy na przykład, aby lepiej to zrozumieć. Na strona główna (indeks.php), możesz pokazać listę ostatnie posty. Ta lista powinna automatycznie zmieniać sposób i czas tworzenia nowego posta. Możesz napisać własne funkcje PHP do pobierania danych z bazy danych i wyświetlania ich na stronie głównej. Ale twórcy WordPressa ułatwili Ci życie! Nie będziesz musiał pisać własnych szczegółowych funkcji. Po prostu użyj wp_get_recent_posts ($arg, $wyjście) z WordPressa i zobacz listę ostatnio wyświetlanych postów!

WordPress posiada obszerną dokumentację online, która zawiera informacje o wszystkich funkcjach i innych elementach dostępnych w WordPress. Dokumentacja zawiera również wiele przykładów i dlatego jest bardzo łatwa do zrozumienia. Skorzystaj z poniższych łączy, aby uzyskać dostęp do tej dokumentacji:

• Tagi szablonów WordPress
• Link do funkcji WordPress

Gdy te pliki motywu będą gotowe, należy umieścić je w folderze, który powinien być taki sam, jak nazwa nowego motywu. Ten folder może również zawierać inne foldery do przechowywania plików CSS, plików JavaScript i plików obrazów.

Możesz również dołączyć do pliku obrazu o nazwie zrzut ekranu.jpg lub zrzut ekranu.png. Ten plik zostanie wyświetlony jako miniatura Twojego motywu. Łatwo nauczyć się robić zrzut ekranu.

Lista plików w typowym motywie WordPress może wyglądać następująco:

Musisz wgrać folder motywu do folderu /wp-content/themes Instalacje WordPress. Na przykład, jeśli nazwiesz motyw Minerva -Wtedy pliki motywów powinny być w / wp-content / tematy / Minerwa

Po przesłaniu folderu motywu przejdź do pulpitu WordPress, a następnie przejdź do Wygląd> Motywy. Tutaj z przyjemnością zobaczysz swój własny projekt nowego motywu wśród motywów dostępnych do aktywacji. Wystarczy wybrać motyw i go aktywować.

Obejrzyj poniższy film, aby zobaczyć dalszy proces:

Krok 5: Dodaj więcej funkcji, takich jak wyszukiwanie i funkcje niestandardowe

Twój motyw WordPress jest już uruchomiony. Podróż z PSD do motywu WordPress dobiegła końca. Ale nadal możesz dodać więcej funkcjonalność do twojego tematu.

Na przykład możesz stworzyć search.php plik z kodem, który wyświetla wyniki wyszukiwania z Twojej witryny.

Możliwe jest również tworzenie własnych funkcji PHP i używanie ich w różnych innych plikach PHP. Musisz utworzyć plik funkcje.php aby zachować niestandardowe funkcje w jednym miejscu.

Aby poradzić sobie z błędami 404 (nie znaleziono strony), możesz utworzyć plik 404.php. WordPress pokaże zawartość tego pliku, gdy ktoś spróbuje uzyskać dostęp do adresu URL Twojej witryny, który nie istnieje.

Możesz także dodać kilka funkcji JavaScript. JavaScript jest najczęściej używanym językiem skryptowym po stronie klienta. Możesz pisać funkcje JavaScript w plikach .js i wywołaj te funkcje w swoich plikach PHP. Na przykład walidacja formularzy to coś, co zwykle robi się za pomocą JavaScript. Jeśli użytkownik próbuje znaleźć coś w swojej witrynie bez wpisywania słów kluczowych w polu wyszukiwania, to jest JavaScript, który mówi użytkownikowi, że powinien wprowadzić kryteria wyszukiwania.

Po wykonaniu tych kroków możesz samodzielnie stworzyć własny motyw WordPress. Te kroki przekonwertują plik PSD na funkcjonalny motyw WordPress. Jednak niektórzy ludzie szukają darmowe konwertery PSD na WordPress. Istnieje wiele firm, które twierdzą, że biorą plik PSD i przekształcają go w dokładny motyw. Jeśli nie chcesz wdawać się w kłopoty związane z nauką programowania, możesz po prostu przekazać PSD tym firmom. Ale oczywiście pobierają za to opłatę!

Darmowe konwertery PSD na WordPress

natknąłem się na oprogramowanie Elemente od DivineProjects. Możesz pobrać ten program za darmo i przekształci Twój plik PSD w gotowy do użycia, w pełni funkcjonalny motyw WordPress. To oprogramowanie działa jak wtyczka Photoshopa.

Mam nadzieję, że ten artykuł był dla Ciebie pomocny. Jeśli masz jakiekolwiek pytania dotyczące tego tematu, nie wahaj się ich zapytać. Zrobię co w mojej mocy, aby ci pomóc. Dziękujemy za korzystanie z TechWelkin.

Zaledwie kilka lat temu pojawiła się nowa linia usług, które oferują automatyczną konwersję projektu witryny z pliku Photoshop. .PSD na kod HTML + CSS jest wolny. Kiedyś wyglądało to jak niezdarna próba automatyzacji pracy z najwyższej jakości, ale teraz usługi te ewoluowały, oferując pełną integrację z systemami zarządzania treścią (takimi jak WordPress).

W tym artykule przedstawię Ci kilka całkiem dobrych usług, które pomogą Ci zaoszczędzić czas i pieniądze.

1 DevPress

Autorem tej usługi jest Tung Do, doskonały projektant i programista WordPress, który uszczęśliwił mnie swoim nowym produktem. Oferowana przez nią usługa umożliwia: projektowanie motywów, kodowanie XHTML/CSS, tworzenie motywów XHTML-to-WordPress oraz zarządzanie witryną.

2. WP z PSD

Zespół profesjonalnych programistów pomoże w migracji projektu do standardowego motywu WordPress dla różnych przeglądarek. Wszystkie prace obiecujemy wykonać po najniższych cenach i w możliwie najkrótszym czasie. Po prostu musimy zaufać chłopakom :)

3. Kodowanie ludzi

Serwis oferuje pracę ze statycznym XHTML, HTML5, a także oferuje gotowy zestaw szablonów dla sklepu internetowego. Codingpeople jest uważany za niemiecki autorytet w zakresie jakości kodu.

4. Płótno WP

Ta usługa zapewnia, że ​​z łatwością zmieni Twój projekt w wysokiej jakości układ dla różnych przeglądarek, zgodny ze standardami W3C Prawidłowy motyw WordPress.

5. PSD do WP

Jeśli stworzyłeś doskonały projekt strony internetowej i potrzebujesz szybkiego i wysokiej jakości layoutu, usługa PSDtoWordPress Ci w tym pomoże. Zmień swój projekt w gotowy motyw WordPress za pomocą PSDtowordpress.

6.PixelWP

PixelWP.com zapewnia swoim klientom doskonały konwerter szablonów PSD na wordpress, na którym można polegać. Masz pewność, że Twój projekt zostanie zrealizowany z wysoką jakością i terminowo.

7. PSD do dowolnego

Usługa może wygenerować gotowy motyw WordPress z załączonego layoutu projektu. Jeśli nie masz umiejętności programowania i pracy z plikami motywów, ta usługa na pewno się przyda!

8. PSD 2 HTML

Usługa została uruchomiona po raz pierwszy w 2005 roku. P2H.com / PSD2HTML.com był pierwszym tego rodzaju i przyciągnął ponad 50 000 klientów.

9. Wycięcie HTML

HTMLcut to usługa, która krok po kroku zaimplementuje gotowy kod z Twojego projektu. Przesyłasz układ PSD, HTMLcut zajmuje się resztą.

10. RapidXHTML

Jeśli chcesz zamienić swój projekt w gotowy blog lub witrynę CMS, RapidxHTML jest właśnie dla Ciebie. Serwis obsługuje takie popularne platformy jak wordpress, Blogger, Drupal, Joomla i Magento.

Kategoria: . 4 komentarze. Opublikowano: 24.11.2012.

Witam, dzisiaj postanowiłem opublikować artykuł o tworzeniu layoutu strony, który następnie ułożymy i wciągniemy silnik wordpress. Dlatego jeśli nie chcesz przegapić wydania tych artykułów, to jak najbardziej subskrybuj aktualizacje bloga a po publikacji artykułu od razu się o tym dowiesz. Tworzenie układu strony psd i tworzenie szablonu wordpress jest w rzeczywistości bardzo prostym procesem i jestem pewien, że możesz postępować zgodnie z moimi instrukcjami i uzyskać całkowicie unikalny szablon.

Aby stworzyć szablon, nie potrzebujemy zbyt dużej wiedzy, znajomości HTML I css, po prostu przeczytaj artykuły w tematach na tym blogu. Szczególną uwagę należy zwrócić na użytkowanie Tagi DIV I Tagi SPAN.

Teraz zastanówmy się, czego potrzebujemy, aby stworzyć układ PSD i dalej skomponować ten szablon dla witryny. W rzeczywistości nie potrzebujesz do tego wiele, programu do photoshopa, który możesz pobrać w Internecie, mam nadzieję, że nie będzie to dla ciebie problemem i pobierz materiały źródłowe do tego.

Niedługo też opublikuję artykuły, w których opowiem o tym, jak tworzyć tekstury i tła na stronę, więc subskrybuj aktualizacje blog.

Utwórz dokument.

Teraz zacznijmy tworzyć układ i stwórzmy nowy dokument. Wybierz plik - utwórz. Wybierz wymiary dokumentu 960 na 1600 piksele.

Narysuj dwie prowadnice, lewą i prawą. Aby to zrobić, po prostu kliknij linijki i narysuj linie.

Teraz musimy zmienić rozmiar płótna. Do tego się wybieramy Rozmiar zdjęcia płótno i wybierz rozmiar płótna 1200 na 1600 pikseli. Następnie wypełnij ten obszar kolorem białym za pomocą narzędzia Wypełnij.

Grupy dla szablonu.

Teraz utwórzmy grupy dla witryny. Stwórzmy standardowe grupy jak we wszystkich szablonach a są to: nagłówek, menu, treść, kolumna boczna i stopka strony. Jest to bardzo łatwe, w menu warstw kliknij obraz folderu, aby zmienić nazwę utworzonej grupy, wystarczy dwukrotnie kliknąć nazwę i wpisać Pożądane imię.

Nagłówek witryny.

Teraz zacznijmy od stworzenia nagłówka dla witryny. Pierwszą rzeczą do zrobienia jest otwarcie tekstury z nazwą „Tekstura 1”. A teraz musimy przyciąć czarne tło, bardzo łatwo to zrobić, wybierz narzędzie "Magiczna różdżka" i kliknij na czarne tło, teraz na jasnym obszarze kliknij kliknij prawym przyciskiem myszy i wybierz „Odwróć zaznaczenie”.

Następnym krokiem jest dostrojenie naszych granic, wybranie prawego przycisku myszy i wybranie opcji Dopracuj krawędź. I ustaw wszystkie ustawienia, jak pokazano na obrazku.

Teraz wybierz „ warstwy - nowe - skopiuj do nowej warstwy”. Teraz bierzemy warstwę myszką i przeciągamy ją na nasz rysunek.

Następnym krokiem jest odwrócenie rysunku. Aby to zrobić, wybierz Edycja-Przekształć-Obróć o 90 stopni w kierunku przeciwnym do ruchu wskazówek zegara. Następnie, naciskając lewy przycisk myszy, musisz przesunąć warstwę, jak pokazano na poniższym rysunku.

Teraz musimy zwiększyć nasycenie naszego obrazu i w tym celu przechodzimy do zakładki Obrazy — Korekty — Barwa/Nasycenie. Teraz musimy zmniejszyć jasność obrazu do -100. A oto, co powinniśmy otrzymać:

Teraz napiszmy logo naszej strony. W tym celu musimy zainstalować nowa czcionka. Myślę, że już pobrałeś plik źródłowy, aw archiwum znajduje się również plik czcionki. Przede wszystkim musisz rozpakować czcionkę. Teraz musimy przejść do folderu (najczęściej jest to Dysk C: / windows - Czcionki).
I skopiuj tam wszystkie pliki czcionek. Teraz uruchom ponownie program, a ta czcionka będzie dla Ciebie dostępna.
Teraz wybierz narzędzie Tekst i wybierz naszą czcionkę, kolor jest biały, a obok lewego przewodnika tworzymy logo. To jest to co zrobiłem.

Teraz przejdźmy z prawa strona stwórzmy menu. Będzie składać się z trzech głównych punktów, a są to Strona główna, Kontakty i O autorze. Wybierz ponownie narzędzie Tekst i kliknij je w odpowiednim miejscu. Kolor jest biały, czcionka to Wide Latin, a rozmiar to 18 pikseli.

Stwórzmy nową warstwę. Teraz weź proste lasso i wybierz przycisk wokół jednej z etykiet.

I wypełnij zaznaczony obszar kolorem 2A2A2A. Teraz zmieniamy kolejność warstw, przesuwamy warstwę z napisem nad warstwę z wypełnieniem.

Główna treść serwisu.

A teraz mamy przycisk menu po kliknięciu. Teraz musimy przejść do folderu Content i utworzyć w nim nową warstwę.

Otwieramy rysunek 3 i umieść go pod wszystkimi warstwami. Za pomocą transformacji zwiększamy rozmiar obrazu, aż wypełni całą przestrzeń.

Teraz dostosuj jasność i kontrast tekstury. Aby to zrobić, naciśnij przyciski Ctrl+Shift+U. Wybierz Obraz - Dopasowanie - Krzywe.

Ustawiamy ustawienia jak na rysunku.

Utwórz nową warstwę, a teraz wybierzemy z Tobą obszar zawartości. Obszar treści będzie biały i 660 x 1200 pikseli. W tym celu wybieramy narzędzie "pole prostokątne i styl - określone proporcje", gdzie musimy wpisać wymiary pola. Następnie musimy wypełnić pole narzędziem "Wypełnij".

Teraz musimy ustawić skok dla naszego pola. Wybierz warstwę, na której znajduje się nasz obraz i kliknij przycisk „Dodaj styl warstwy”, wybierz Obrys z menu rozwijanego.

I ustaw następujące ustawienia - grubość 1 piksel i kolor c8c7c7.

Teraz otwarte zdjęcie 4, za pomocą skalowania zmniejszamy rozmiar, powinien być o jakieś dziesięć pikseli więcej od białego pola po prawej i lewej stronie. Powyżej i poniżej należy wciąć 50-60 pikseli.

Teraz naciśnij kombinacje przycisków Ctrl+Shift+U zmniejszyć nasycenie tekstury i dostosować jasność za pomocą krzywych. Ustawienia jak na zdjęciu.

Wybierz warstwę naszym białym płótnem, kliknij prawym przyciskiem myszy i wybierz „ Wybierz piksele».

Teraz wybierz szarą warstwę i kliknij selekcja - modyfikacja - kompresja i ustaw kompresję o trzy piksele. Następnie musimy odwrócić nasz wybór, już to zrobiliśmy i jest to łatwe, wybierz Wybór-inwersja, naciśnij przycisk Del. Oto, co powinniśmy otrzymać:

Teraz utwórz maskę dla tej samej szarej warstwy.

Wybierz czarno-biały gradient i lewym przyciskiem rysuj od środka do dołu strony, a tym samym wygładzimy przejście.

Teraz utwórzmy przyciski nawigacyjne strony. Aby to zrobić, wystarczy narysować czarny prostokąt, możesz wybrać rozmiar według własnego uznania. Również w każdym przycisku musisz zarejestrować nazwę stron. Używamy czcionki do etykiet Czcionka Times New Roman i rozmiar 18 piksele.

Teraz otwórzmy obrazek z ikonami i dodajmy je po przeciwnej stronie głównego menu. Teraz musimy wciąć zawartość po obu stronach o dwadzieścia pikseli. Teraz musimy dodać tytuł do naszego pierwszego artykułu, kolor tekstu jest czarny. Jako datę i liczbę komentarzy użyłem koloru cb8154.

Teraz, aby oddzielić nagłówek od głównej treści witryny, musisz narysować linię. Aby narysować linię prostą, musisz wybrać narzędzie Ołówek i przytrzymać klawisz Shift i narysować linię, klikając na początku i rysując do samego końca.

Teraz musimy stworzyć miejsce na podgląd. Aby to zrobić, utwórz prostokąt o wymiarach, których potrzebujemy, postanowiłem zrobić go 165 na 165 pikseli i wypełnić go czernią. Zastosuj do niego ustawienia: obrys i cień.

Udar.

Cień.

Teraz dodajmy własny tekst. Oto, co powinniśmy otrzymać:

Teraz, po zakończeniu artykułów, musisz oddzielić 30 pikseli i szarość (SSSSSS). Następnie narysuj cztery kwadraty o wymiarach 32 x 32 piksele i wypełnij je czerwonym 8E0A13.

Rysowanie formularza wyszukiwania.

Aby to zrobić, wystarczy narysować prostokątny obszar białego koloru, nałożyć na niego wewnętrzny cień.

Teraz rysujemy czerwony guzik o tym samym rozmiarze 32 na 32 i czerwonym kolorze i wpisujemy słowo „ Szukaj».

Pasek boczny.

Na nowej warstwie narysuj prostokąt o szerokości 270px i wypełnij go 1F1F1F. Dodajemy również tytuł o tej samej szerokości 270 pikseli i wysokości 25 pikseli, wypełniony kolorem czarnym.

Teraz musimy napisać kategorie dla bloga. Tekst czcionką Times New Roman i rozmiarem 16 pikseli. Do każdej pozycji menu musisz dodać zdjęcie. Wybierać " Dowolna postać » i wybierz kształt kropki rastrowej « Ozdoba 4” i wypełnij go kolorem 818181.

Stopka witryny.

Nie będziemy zbytnio zawracać sobie głowy stopką, wystarczy wypełnić całe pole kolorem czarnym i dodać menu, czcionką Times New Roman i wielkością 18 pikseli oraz kolorem E6E6E6.

Jeśli chcesz pobrać szablon, który się okazał, kliknij przycisk, a link do pobrania będzie dostępny. Ten artykuł się skończył i myślę, że teraz wiesz, że pierwszym krokiem do stworzenia szablonu wordpress jest stworzenie Makieta PSD teren.

Nie jest tajemnicą, że w sieci istnieje wiele gotowych szablonów WordPress. Od darmowych po drogie szablony premium z własnymi frameworkami.

Jaka jest różnica? Jaki projekt wybrać dla swojej witryny?

Ten artykuł jest przeznaczony dla tych, którzy planują swoją stronę internetową w oparciu o WordPress i stoją przed wyborem szablonu.

Zacznijmy od darmowych. Zaleta jest oczywista – taka jest cena, a raczej jej brak. Ale główną wadą szablonów publicznych jest to, że jeśli szablon jest stosunkowo przyzwoity, z konieczności zawiera już ogromną liczbę witryn. A prawdopodobieństwo, że Ty lub Twoi klienci natkniesz się na witrynę, która jest całkowicie identyczna pod względem projektu, jest bardzo, bardzo wysokie. Dlatego powinieneś wybierać szablony publiczne tylko wtedy, gdy Twój budżet jest naprawdę ograniczony i nie przejmujesz się szczególnie funkcjami graficznymi witryny. Tak, oczywiście, zainwestując niewielką ilość wysiłku lub pieniędzy, możesz zindywidualizować (dostosować) szablon publiczny nie do poznania. I nadal będzie to jedno z najtańszych rozwiązań.

Zapisz się na mój telegram i otrzymuj jako pierwszy nowe materiały, także te, których nie ma na stronie.