Witam.

Pańskie pytanie jest bardzo ciekawe, ponieważ obejmuje kilka dość oddalonych od siebie dziedzin wiedzy. Tworzenie stron internetowych wymaga wiedzy z zakresu programowania (PHP, JavaScript), baz danych (MySQL), kodowania i formatowania treści (HTML i CSS) oraz grafiki (Photoshop i pokrewne programy). Jest to zajęcie zdecydowanie interdyscyplinarne.

Dzięki takim CMS-om jak WordPress albo Joomla tworzenie stron internetowych stało się wygodniejsze, szybsze i bardziej dostępne dla ludzi "nietechnicznych". Jednak każdy z gotowych CMS-ów (systemów zarządzania treścią) ma dość ograniczone możliwości wpływania na wygląd strony. Bez znajomości przynajmniej podstaw HTML-a i CSS-a użytkownik jest skazany na gotowe szablony (darmowe lub płatne).

Proces projektowania layoutu strony składa się z kilku etapów. Po pierwsze, trzeba przemyśleć, jakie elementy mają się na stronie znaleźć. W przypadku tworzenia układu pod WordPressa elementy strony są niejako narzucone przez samego CMS-a i wtyczki, które do niego instalujemy. Po przemyśleniu zawartości strony warto się zaopatrzyć w papier i ołówek, żeby za ich pomocą stworzyć kilka szkiców. Jeśli mamy wizję wspaniałej strony internetowej w głowie, może się okazać, że po przelaniu tych pomysłów na papier strona okazuje się brzydka lub po prostu nieczytelna. Poza estetyką bardzo ważna jest ergonomia i łatwość korzystania ze strony, przy czym warto się uodpornić na panujące w Internecie mody. Niegdyś modne były animowane obrazki, obecnie na czasie są wielkie nagłówki, które pewnie za kilka lat staną się przebrzmiałe. :-). Następnym etapem jest przygotowanie grafiki na podstawie naszego szkicu, potem pocięcie tej grafiki na małe obrazki, które umieścimy w pliku HTML-a ostylowanym w CSS-ie. W praktyce możemy te małe obrazki umieścić za pomocą CSS-a w tle najistotniejszych elementów witryny.

Tworzenie układów stron wyłącznie za pomocą Photoshopa to już anachronizm. W czasach WordPressa elementy graficzne stanowią jedynie tła, umieszczane w dokumencie przez CSS-a. Najczęściej jest to wykonywane przez właściwość background-image umieszczaną w elementach blokowych typu: div, h1 itd.

Przy modyfikowaniu wyglądu szablonów WordPress sugeruję następującą kolejność zadań: zapoznać się z elementami HTML-a składającymi się na witrynę. Wystarczy zajrzeć do źródła strony, gdzie można zaobserwować (powtarzane również na podstronach) elementy blokowe. Następnie warto sprawdzić, jakie jest formatowanie CSS-a tych elementów. Bardzo dobrym (i darmowym) narzędziem jest Firebug - wtyczka do Firefoksa pozwalająca na analizowanie kodu oglądanych stron WWW. Następnie dla każdego z elementów blokowych warto zaprojektować oddzielne tła lub przygotować jeden rysunek tła do pocięcia i ostylowania. Jak widać, spora część pracy będzie wykonywana w HTML-u i CSS-ie lub (jeśli wykorzystujemy szablon "klikalny", z przygotowanymi wieloma opcjami, które użytkownik może zmienić) w kokpicie WordPressa - mogę tu polecić darmowy szablon Mantra, który ma kilkaset opcji formatujących do wybrania.

Poniżej zademonstruję sposób cięcia narysowanego w Adobe Photoshopie layoutu strony na mniejsze fragmenty. Podkreślam jednak, że jest to tylko jeden z wielu etapów pracy.

Jako przykład narysowałem w Adobe Photoshopie wielowarstwowy obrazek, który mógłby się stać główną stroną mojej witryny o kwiatach (gdybym taką prowadził). Nie będę się upierał, że projekt jest ładny i nowoczesny - ma to być tylko przykład :-):

Projekt składa się z kilkunastu warstw, wykorzystuje maski warstw, efekty i kilka elementów tekstowych. Chciałbym ten obrazek pociąć na kilka mniejszych tak, aby każda linia tekstu była w oddzielnym pliku graficznym.

Z paska narzędziowego uruchamiam narzędzie Cięcie na plasterki. Myszka przybiera kształt skalpela, którym obrysowuję po kolei każdy z elementów do pocięcia:

Prostokątne obszary, które widać na obrazku powyżej nazywane są plasterkami (slices), a w starszych wersjach Photoshopa - odcięciami. Można za pomocą Photoshopa każdemu z tych plasterków przypisać wiele innych właściwości, jednak lepiej to zrobić później w czasie kodowania i stylowania strony, ponieważ kod, który Photoshop jest w stanie wygenerować, niestety nie należy do najbardziej eleganckich.

Po wyznaczeniu odcięć należy wyeksportować je do formatu dającego się wyświetlić na stronie internetowej. W praktyce jesteśmy ograniczeni do JPEG, GIF lub PNG.

Eksport rozpoczynamy poleceniem Plik --> Zapisz do Internetu, które wywoła duże okienko dialogowe, gdzie można ustawiać parametry eksportowanych obrazków i na bieżąco obserwować efekty ustawień:

Warto ustawić się tu na zakładce "2 na ekranie", gdzie w jednej części okna widać będzie oryginał, a w drugiej pliki gotowe do wyeksportowania. W prawej części okna wybieramy ustawienia dla zaznaczonych plasterków. Warto skalpelem (z przytrzymywanym Shiftem) zaznaczyć wszystkie plasterki, żeby można było wszystkim jednocześnie przypisać jednakowe formaty i ustawienia:

Ja wybiorę format PNG-24. W dolnej części okna znajduje się przycisk Zapisz, który po wciśnięciu wywołuje okienko dialogowe:

Trzeba zmienić nazwę pliku tak, by nie zawierała spacji ani polskich znaków. W polu format zostawiam Tylko obrazy. Jest tam jeszcze opcja Obrazy i HTML, ale kod generowany w Photoshopie nie przyda nam się podczas pracy w WordPressie.

Po wciśnięciu Zapisz, w wybranej przez nas lokalizacji program tworzy folder z plikami, zawierającymi fragmenty pociętego obrazka:

I tu się kończy praca Photoshopa. Dalsza część pracy powinna już być wykonana w edytorze CSS-a, który umieści obrazki jako tło wybranych elementów blokowych WordPressa. Ale - jak pisał Kipling - to już zupełnie inna bajka. :-)

Pozdrawiam.
Andrzej Słodownik.

Witam.

Generalnie proponuję zdjąć najpierw wszystkie warstwy ponad tłem i zapisać samo tło osobno, a później całą resztę jako 'obrazki' bez tła (z przezroczystością). To wiele ułatwi podczas późniejszego składania projektu przez Web Developera.