Kilka lat temu efekty tła takie jak gradienty, zaokrąglone narożniki, kształty i cienie byliśmy w stanie zrobić ze zdjęć wyciętych z jednego projektu PSD. Musieliśmy stworzyć piramidę kodu w celu osiągnięcia pożądanego rezultatu w szablonie.

Obecnie, za pomocą stylów CSS3 można osiągnąć ten sam efekt, optymalizując kod źródłowy szablonu i upraszczając pracę.

Co to są plasterki?

Każdy z najnowszych szablonów Joomla zawiera plik PSD z plasterkami. Pozwala on na łatwą modyfikację obrazków znajdujących się w szablonie. Oznacza to, że każdy obraz użyty w szablonie jest dostępny jako warstwa w pliku PSD.

Po modyfikacji warstwy, obraz jest zapisany z tymi samymi wymiarami i tym samym rozszerzeniem pliku jak obraz, który został używany w szablonie. Warto wspomnieć, że inne elementy, takie jak banery i ikony, których używamy na stronie demonstracyjnej są również dostępne w postaci plików PSD.

Jak modyfikować plasterki?

Na początku należy zainstalować oprogramowanie, umożliwiające otwieranie i modyfikację plików psd, na przykład GIMP (darmowy) lub Adobe Photoshop.
W tym tutorialu będziemy używać Adobe Photoshop CS6 i pliku psd z plasterkami dla szablonu Joomla 3.x JM School Tools
Załóżmy, że chcesz zmienić niebieską wersję kolorystyczną na inną.

Wiele elementów szablonu zakodowaliśmy za pomocą stylów CSS3, należy więc nadpisać style w plikach CSS (dla Joomla 2.5) lub w plikach LESS (Joomla 3.x)
Tu jednak skupimy się na modyfikacji obrazków w tle. Obrazki dla niebieskiej wersji kolorystycznej znajdują się lokalizacji: templates/jm-school-tools/images/style-4

 

alt

 

Otwórzmy plik slices.psd
Po prawej stronie znajdziesz grupy i warstwy. Zostaw widoczną tylko niebieską grupę, która zawiera plasterki potrzebne w naszym przypadku.

 

alt

 

Teraz kliknij prawym przyciskiem myszy na warstwę, którą chcesz zmodyfikować, a pojawi się rozwijane menu. Wybierz Style warstwy-> nałożenie koloru

 

alt

 

Kliknij pole z kolorem:

 

alt

 

Wybierz kolor i kliknij “OK”. Można zauważyć, że warstwa zmieniła kolor.

 

alt

 

Powtórz tę czynność dla wszystkich pozostałych warstw, które chcesz zmodyfikować.
Gdy zmiany zostaną wprowadzone, możesz zapisać plasterki jako obrazki. Idź do Plik-> Zapisz dla internetu i urządzeń. Zobaczysz podobny screen. Wybierz narzędzie do zaznaczania plasterków i zaznacz te, które chcesz zapisać jako obrazy.

 

alt

 

Kliknij przycisk Zapisz. Zobacz, jak prezentują się nasze nowe obrazy:

 

alt

 

Jak widzisz, zapisane obrazy mają tę samą nazwę jak w templatce. Wszystko co musisz teraz zrobić to przenieść wygenerowane obrazy do folderu images/style4 nadpisując obecne.

Gratulacje! Zmodyfikowałeś obrazy w swojej templatce!