Mar
8
2016

Tworzenie szablonu strony mobilnej w Photoshopie

Przez ostatnie kilka lat, grafik tworzący stronę internetową, tworzył jej wersję desktopową. Następnie zadaniem programisty było stworzenie jej wersji, która wyświetli się na dużym ekranie a także (ewentualnie) na smartfonach. Dziś stosuje się zupełnie inne podejście, określane jako „mobile first”. Polega ono na tym, że tworzymy najpierw wersję mobilną strony, a dopiero potem, uzupełniamy ją o elementy, wyświetlające się na dużym ekranie. Dziś zaprezentuję prosty tutorial o tworzeniu strony w widoku mobilnym.

Tworzymy plik o szerokości 400 pikseli i długości 900 pikseli (długość strony na pewno się zmieni). Taka szerokość odpowiada starszym urządzeniom mobilnym.

Następnie otwieramy zdjęcie https://pixabay.com/en/sunrise-sky-blue-sunlight-clouds-165094/ i wklejamy je do naszego pliku roboczego. Skrótem ctrl + T dopasowujemy jego rozmiary. Dobre zdjęcie to podstawa, jeśli chcesz, by strona dobrze się prezentowała.

ScreenClip [1]

Menu strony

Nasza strona musi mieć na górze 2 elementy – nazwę strony i menu-hamburger.

Nazwa strony została napisana czcionką Lobster, 20 px.

ScreenClip [2]

Menu tworzymy w prosty sposób za pomocą linii o szerokości 2 pikseli. Proponuję dokładnie przybliżyć widok, by łatwiej ustawić linie pod sobą.

ScreenClip [2]

Tworzymy nową grupę warstw i dodajemy do niej wszystkie elementy menu. Możesz także obrysować menu kwadratem z zaokrąglonymi rogami.

——————————————————————————————————————————-

Zobacz kurs Photoshop projektowanie stron -> TUTAJ

——————————————————————————————————————————-

Po naciśnięciu menu, widok powinien się zmienić – na stronie ma pojawić się otwarte menu. Kopiujemy jedną z kresek, które składały się na ikonę hamburgera, następnie przekręcamy ją o 45 stopni (ctrl + T i obrót z klawiszem shift) i wypełniamy ją białym kolorem. Następnie robimy to samo ponownie, przekręcając kreskę w drugą stronę. Uzyskujemy w ten sposób ikonę X. Scalamy warstwy, tworzymy nową grupę warstw „menu otwarte”.

ScreenClip [3]

Kopiujemy do niej nazwę strony, przenosimy w odpowiednie miejsce warstwę krzyżyka i zmieniamy tło na łososiowe.

Menu otwarte

Menu otwarte

Następnie dodajemy opcje do menu. Czcionka to wyśrodkowane Lato 25 px, z interlinia 52px. Elementy menu nie mogą być zbyt blisko siebie, bo będzie trudno je wybrać podczas wyświetlania strony na smartfonie. Tutaj można dodać na przykład opcję rozdzielania poszczególnych sekcji za pomocą linii, albo zmieniać kolor elementu po wybraniu.

Dodajemy także napis na warstwie z obrazkiem. Okazało się, ze jest on zbyt jasny, dlatego można zmienić jego jasność. Następnie dodaję napisy, używając początkowo czcionki Lobster, a następnie – Lato Bold. Czcionka Lobster wygląda bardzo interesująco, ale pojawia się w tak dużej ilości projektów, że można poszukać dla niej alternatywy.

Menu zamknięte

Menu zamknięte

Obrazek w kółku uzyskasz dzięki wklejeniu obrazka na nową warstwę, zaznaczeniu go narzędziem zaznaczanie eliptyczne i następnie odwróceniem zaznaczenia. Teraz wybierz alt + backspace i otrzymasz sam obrazek. Następnie dodałem kolejne teksty napisane czcionką Lato bold i zwykłą Lato. Możesz je pobrać z tej strony.

Podsumowując tę sekcję – w pliku PSD tworzysz dwie grupy warstw. Pierwszą jest strona z otwartym menu, drugą, z zamkniętym.

——————————————————————————————————————————-

Zobacz kurs Photoshop dla web designera -> TUTAJ

——————————————————————————————————————————-

Kolejna sekcja to prosta galeria – nagłówek wykonałem tak, jak w poprzedniej sekcji, dodałem fotografię i 4 kółka pokazujące zmianę slajdów. Wykonasz je z użyciem narzędzia Elipsa i wypełniając je odpowiednim kolorem. Zdjęcie orzechów pochodzi ze strony Pixabay i ładnie wpasowuje się w stronę, bo ma białe tło. Sekcje oddzieliłem linią 1 px.

ScreenClip [6]

Zapis na newsletter

Bardzo ważnym elementem strony jest wezwanie do działania. Na naszej witrynie będziemy zachęcali do podania swojego adresu e-mail. W widoku mobilnym sekcja zapisu składa się z dwóch rzędów.

W pierwszym jest zachęta do zapisania się „Zapisz się na newsletter”, zapisana białą czcionką na tle koloru #85080c, a pod nią znajduje się formularz HTML. W białym polu wpisujemy szarym kolorem słowo e-mail. Kolor do stworzenia przycisku obok, pobrałem ze skorupy orzecha na zdjęciu, używając zakraplacza (skrót I). Pola formularzy to zwykły prostokąt.

ScreenClip [8]

Na końcu znajduje się stopka, której stworzenie nie powinno przysporzyć Ci trudności.

ScreenClip [1]
Podsumowując – w widoku mobilnym warto postawić na czytelny design i ustawienie elementów w prosty sposób – jeden pod drugim. Zachęcam do eksperymentowania z różnymi przyciskami oraz z tekstami wyrównanymi do lewej (jak w stopce) oraz wyśrodkowanymi (jak w pozostałych miejscach). Unikaj elementów, które są rozmieszczone obok siebie, bo korzystanie z nich na smartfonie w widoku mobilnym, będzie niewygodnie. Gdy już mamy taki układ strony, można w prosty sposób go przełożyć na widok na dużym ekranie.


Podobne wpisy

O autorze: Kamil Naja

Przygodę z obrazem zaczął od fotografii. Photoshopa poznaje od 2006 roku i program ten wciąż zaskakuje go możliwościami. Zajmuje się także copywritingiem oraz tworzeniem stron internetowych. Prowadzi własną firmę.

Zostaw komentarz

Musisz być zalogowany aby dodać komentarz.

Polecane

Kategorie