Wydawać by się mogło, że podział pracy pomiędzy koderem a projektantem graficznym jest już od dawna ustalony. Grafik tworzy w Photoshopie, a frontendowiec pisze kod. Jednak zawód frontendowca ma to do siebie, że kod jest ściśle powiązany z warstwą wizualną. Dlatego też dbałość o szczegóły i jak najwierniejsze odwzorowanie projektu graficznego są istotnymi cechami każdego kodera stron WWW.
Bywa tak, że grafik szczegółowo opisuje programiście swój projekt wraz z rozmiarami poszczególnych elementów, wielkością tekstu, kolorami itp. Zdarzają się również sytuacje, kiedy grafik kończy pracę na stworzeniu pliku .psd, który następnie trafia do frontendowca. Zatem część dalszych działań związanych z wygenerowaniem zasobów tzw. assetów czy pomiarem elementów leży po stronie programisty. Właśnie dlatego zachęcamy Was do zapoznania się z podstawowymi możliwościami Photoshopa.
Zapraszamy na krótki kurs, dzięki któremu dowiemy się:
jak definiować jednostki,
jak sprawdzać kroje pisma,
jak mierzyć wielkości elementów,
jak generować assety.
Jeśli jesteś projektantem graficznym lub stawiałeś już pierwsze kroki w Photoshopie, możesz pominąć ten rozdział.
Ustawienie wybranych jednostek
Najbardziej wygodną dla nas jednostką jest piksel (px). Wybieramy ją wchodząc do ustawień: Photoshop → Preferences → Units & Rulers.
![Ustawienie jednostek w Photoshopie][1] [1]: /images/ps-units.png
Zalecamy ustawić piksele zarówno dla linijek (Rulers), jak i dla rozmiaru tekstu (Type).
![Ustawienie pikseli zarówno dla obiektów, jak i rozmiaru tekstu][2] [2]: /images/ps-units-panel.jpg
Dzięki temu od tej pory wszystkie wielkości prezentowane będą w pikselach.
Sprawdzanie krojów pisma i wielkości fontu
W celu sprawdzenia m.in. nazwy kroju, wielkości czy interlinii przyda się nam panel Character. Uruchamiamy go poprzez: Window → Character.
Klikając klawisz T automatycznie przechodzimy do narzędzia Horizontal Type Tool, oznaczonego charakterystycznym T w panelu narzędzi po lewej stronie. Dzięki temu możemy kliknąć w dany tekst i odczytać w panelu Character, jaki krój pisma został użyty, jaka jest wielkość itd. W panelu Character znajdziecie wszystko, co będzie potrzebne do wprowadzenia w arkuszu stylów, czyli font-family, font-size, font-style oraz line-height. Wyjaśnijmy jeszcze, czym jest line-height. Jest to interlinia, którą możemy określać bezwzględnie (w pikselach) lub względnie (w procentach), np.
line-height: 150%;
line-height: 27px;
```
## Pomiar elementów
Dowiedzieliśmy się już jak sprawdzać wielkość fontu. Pora teraz na obiekty – kontenery, ramki, obrazki.
Do pomiaru innych elementów możemy skorzystać z linijki, czyli `Ruler Tool`, która znajduje się w panelu z narzędziami.
!["Wybranie linijki z zestawu narzędzi"][5]
[5]: /images/ps-ruler.gif
Żeby mieć podgląd wymiarów przyda nam się panel `Info`. Uruchamiamy go poprzez: `Window → Info`.
!["Panel Info"][6]
[6]: /images/ps-info-panel.jpg
W panelu `Info` odczytać możecie wartość dla `W` ( >width</i> ), czyli szerokości, oraz `H` ( >height</i> ), czyli wysokości.
W przypadku kształtów, oznaczonych w warstwach kwadracikiem src="/images/ps-shape.jpg" style="width: 200px; display: inline-block; vertical-align: middle;" />,
do pomiaru możemy wykorzystać panel na samej górze aplikacji, który pokazuje m.in jaki kolor wypełnienia, obramowania oraz wysokość (H) i szerokość (W) ma dany element.
!["Górny panel z informacjami dotyczącymi elementu"][7]
[7]: /images/ps-top-panel.jpg
!["Warstwa zawierająca kształt"][8]
[8]: /images/ps-shape-layer.jpg
Należy jedynie kliknąć na element wykorzystując `Path Selection Tool`.
!["Path Selection Tool"][9]
[9]: /images/ps-path-selection.gif
> #### Important::Ważne
>
> Ze względu na pojawienie się wysokiej rozdzielczości, czyli >Retiny</i>, w komputerach Mac grafiki zaczęto przygotowywać w "podwójnej gęstości". Na czym to polega?
>
>Jeśli chcemy, żeby obrazek docelowo wyświetlił się w rozdzielczości 100x100 pikseli, to plik który przygotowujemy "pod Retinę" powinien mieć wymiary 200x200 pikseli, zatem dwukrotnie większą wysokość i szerokość.
Dlatego też od jakiegoś czasu graficy zwykli projektować strony www w dwukrotnie większej rozdzielczości. Dzięki temu bez problemu można przygotować assety w dwóch rozmiarach: @2x (oznaczenie dla Retiny) oraz normalnych rozmiarach 1:1.
>W przypadku grafik, takich jak ikony czy logotypy, warto jest stosować pliki wektorowe. Najlepszym formatem wektorowym przyjaznym środowisku webowemu jest format `SVG`.
>
>`SVG` (ang. >Scalable Vector Graphic</i>) jest skalowalny i odpowiada naszym potrzebom w temacie responsywności, o której być może już słyszeliście. Dzięki temu możemy zwiększać wymiary obrazka bez utraty jakości w odróżnieniu np. od plików `JPG`.
Jeśli chcesz zagłębić się w temat pikseli oraz Retiny przydatna może być lektura href="https://www.smashingmagazine.com/2012/08/towards-retina-web/" target="_blank">artykułu na Smashing Magazine</a>.
Biorąc pod uwagę, to co przeczytaliście w akapicie powyżej, w pliku `.psd`, który pobraliście w paczce z zasobami, wszystkie elementy oraz wielkość tekstów są dwukrotnie większe. Zatem jeśli będziecie sprawdzać rozmiary elementów i fontów, pamiętajcie o podzieleniu ich przez 2 przy przypisywaniu wartości w CSS.
Przykładowo: jeśli tekst "because we care for plants" ma wielkość `36px`, docelowo nadamy w pliku CSS wartość:
`font-size: 18px; /* ponieważ 36px/2 = 18px */`.
## Generowanie assetów w Photoshop Creative Cloud
Photoshop Creative Cloud umożliwia wygenerowanie assetów w bardzo prosty i szybki sposób. Wszystko opiera się na >warstwach</b> (ang. >layers</i>). Zanim przejdziemy do szczegółów warto zajrzeć do zawartości pliku `.psd`. Z reguły każdy z elementów – zdjęcia, obiekty, teksty – są tworzone w oddzielnej warstwie. Umożliwia to łatwą modyfikację poszczególnych elementów, jak i późniejsze łatwe zapisanie odseparowanych elementów na potrzeby zakodowania layoutu.
### Warstwy
Spróbujmy zajrzeć co kryje się w poszczególnych warstwach, uruchamiając panel warstw: `Window → Layers`
![Panel z warstwami][10]
[10]: /images/ps-layers-panel.jpg
Poszczególne warstwy powiązane są w grupy, czyli foldery. Dzięki temu każdy element strony pogrupowany jest według swojej przynależności do sekcji na stronie. Warto trzymać porządek i usunąć zbędne warstwy. Dzięki temu nie pogubimy się. Rozwijając grupy znajdziecie konkretne elementy.
### Automatyczne generowanie assetów
Pora na wygenerowanie plików z naszego layoutu. Skorzystamy z funkcjonalności, która zawarta jest w najnowszej wersji programu. Włączamy ją poprzez: `File → Generate → Image Assets`.
Zwróć uwagę, czy opcja ta jest zaznaczona. Jeśli tak, to automatyczne generowanie assetów na podstawie nazwy warstw jest włączone. Możemy zatem przejść do kolejnego kroku.
W wersji Photohop Creative Cloud mamy możliwość szybkiego zapisywania assetów z poziomu warstw. Wystarczy zmienić nazwę danej warstwy np. z `flower-2` na `flower-2.png`, wtedy w folderze, gdzie znajduje się nasz plik .psd, zostaną automatycznie wygenerowane assety z zadaną przez nas nazwą i rozszerzeniem. Assety są zapisywane w podfolderze `*-assets`. Sprawdźmy teraz, czy pojawił się tam plik z danym assetem.
![Automatyczne generowanie assetów][11]
[11]: /images/ps-generate-assets.gif
Taką czynność powtarzamy dla elementów, których będziemy potrzebować do zbudowania layoutu. Pamiętajcie, że CSS umożliwia stworzenie wielu obiektów takich jak ramki lub proste figury geometryczne, więc nie musimy zapisywać każdej z warstw do pliku. W przypadku Planty potrzebować będziemy jedynie zdjęć i ikon mediów społecznościowych.
> #### Exercise::Ćwiczenie
>
> Wróćmy do naszego layoutu – pora na tchnięcie w niego trochę życia i kolorów. Skorzystaj zatem z świeżo nabytej wiedzy i dokonaj następujących zmian na stronie:
>
> - Wiesz już, co wchodzi w skład modelu pudełkowego. Odszukaj w projekcie wszystkie elementy, które mogą potrzebować dodania ramki lub wypełnienia (>paddingu</i>).
> - Zwróć uwagę na pojawiające się elementy formularzy (przyciski, czyli `buttony`, `inputy`, `textarea`). Nadaj im wygląd zgodny z projektem.
>
> Podpowiadamy, że do dokonania powyższych zmian wystarczy Ci znajomość poznanych dotąd właściwości, czyli `color`, `background-color`, `border`, `padding`, `width`, `height`. Jeśli czujesz się komfortowo używając Photoshopa, możesz pobrać tam wartości kolorów oraz poszczególnych wymiarów.