Jak łatwo zmodyfikować plasterki PSD?

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

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.

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

Kliknij pole z kolorem:

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

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.

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

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!