Przez dłuższy okres czasu każdy stworzony layout strony internetowej w Photoshopie, był wycinany, czy to przez grafika, czy kodera przy pomocy narzędzia Slice, czyli plasterków. Aktualnie jest wiele rożnych technik, żeby sobie z tym poradzić, chciałbym przybliżyć jedną z nich czyli generator zasobów (ang. image assets).

Pokrótce każda zaprojektowana przez nas strona musi trafić w ręce programisty, większość elementów które się na nią składają da się stworzyć za pomocą CSS. Piszę tutaj o kształtach czy gradientach, ale jest też pewna grupa elementów, które trzeba wyciąć z projektu graficznego, żeby je następnie przenieść już do działającej strony internetowej.

O co w tym chodzi?

Wbrew pozorom obsługa tego narzędzia jest bardzo prosta, o czym się przekonacie. W pierwszej kolejności musimy je aktywować w menu Photoshopa File > Generate > Image Assets. Uwaga – za każdym razem ,gdy otworzysz nowy dokument, będziesz musiał załączyć tą opcje od nowa. Po kliknięciu nie zobaczysz żadnego okna, wszystko będzie działać w tle. Cała sprawa sprowadza się do tego, aby do odpowiedniej warstwy lub grupy dodać rozszerzenie po kropce i dodatkowe opcje, jeżeli takich wymagamy.

 

to-nie-plasterki

W praktyce

Potrzebujemy zapisać cały footer naszej strony? Trzeba go zgrupować, nadać grupie nazwę footer i na końcu dodamy rozszerzenie dla przykładu niech to będzie .jpg, otrzymamy folder z plikiem JPG o nazwie footer w miejscu, gdzie jest zapisany nasz PSD. Wszystkie pliki są generowane na bieżąco, nie trzeba żadnej ingerencji z naszej strony. Możemy zapisać pliki do jpg, png i gif. Zatem jpg jest domyślnie zapisywany w jakości 90%, żeby to zmienić musimy dodać do nazwy grupy footer.jpg100%. Zmiana rozmiaru też wchodzi w grę, w tym przypadku dodajemy przedrostek przed nazwą będzie to wyglądać tak 1170px x 400px footer.jpg. Jednostki są dowolne, możemy też zapisać w skali używając rozmiaru w procentach. W przypadku plików png domyślne zapisywane są one w 32bit chcąc to zmienić i zapisać obraz w 256 kolorach należy nazwać warstwę w ten sposób footer.png8.

Jeżeli daną warstwę albo grupę chcemy zapisać w kilku formatach, trzeba podać po przecinku nazwę i kolejne parametry np footer.jpg, footer.png. Możemy określić domyślne parametry dla wszystkich generowanych warstw, tworzymy pustą warstwę o nazwie default (nie wiem jak w polskiej wersji Photoshopa) np. default 200%/@2x  zapisze wszystkie warstwy z dwukrotnym powiększeniem i doda na końcu nazwy pliku @2x. To chyba wszystkie najbardziej przydatne opcje tego narzędzia, więcej znajdziesz w dokumentacji Photoshopa. Mam nadzieję, że się to Tobie przyda.