Maj
8
2015

Tworzenie landing page w Adobe Photoshop

Na naszym blogu pojawiały się już tutoriale na temat tworzenia stron internetowych oraz ich różnych elementów. Wiele osób zadaje sobie pytanie, jak stworzyć landing page i to właśnie na tym elemencie strony postanowiłem się skupić w tym tutorialu.

Landing Page to strona, która ma za zadanie skłonić użytkownika do wykonania jakiejś akcji. Na skuteczność landinga wpływa wiele rzeczy, także design. Powinien być czysty i nie rozpraszać użytkownika – zamiast tego, trzeba go nakłonić do wykonania akcji.

W internecie można znaleźć systemy, które pozwalają na stworzenie landing page, jednak są one płatne i wymagają sporych umiejętności. Naszym zdaniem, warto do tego celu użyć Adobe Photoshopa i następnie albo samodzielnie zakodować stronę w HTML i CSS, albo nawet posłużyć się domyślnym narzędziem tego programu, czyli cięciem na plasterki.

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

Zobacz kurs Photoshop projektowanie stron -> TUTAJ

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

Zdajemy sobie sprawę z tego, że strona w formie „tabelki” nie jest najnowszym krzykiem internetowej mody, jednak ruch na Landing Page zwykle jest kierowany i nie liczy się jego struktura.

Samodzielne kodowanie landing page nie powinno stanowić problemu – jedyna trudność powstaje przy kodowaniu formularza.

1 – Wymiary strony

Strona będzie miała szerokość 960 pikseli, natomiast długość na początku wynosi 1500 pikseli i może się zwiększyć, w zależności od ilości tekstu. Warto o tym pamiętać podczas kodowania strony.

2 – Tło

Zdjęcie na tło pobrałem ze strony Pixabay – po prostu przeciągnij je na plik z projektem landing page i dostosuj jego wymiary (ctr+e)

ScreenClip

3 – Główny tytuł na stronie

To jeden z najważniejszych elementów strony, dlatego warto go wyróżnić wizualnie. Użyj dużej czcionki. Wybrałem czcionkę Nyala wielkości 80 pt i dołożyłem do niej cień na domyślnych ustawieniach.

ScreenClip [1]

4 – Podpis pod tytułem

Ten napis zwykle jest dłuższy, dlatego lepiej wybrać dobrze znaną czcionkę, łatwą w odbiorze. W moim przypadku jest to calibri 48 pt bez cienia.

ScreenClip [2]

Poprawienie tytułu

Zmieniając parametry „Leading” i „Tracing”, możesz zmienić wygląd tekstu. Ustawiłem parametry tak, jak na zrzucie ekranu, dzięki czemu „zagęściłem tekst”.

ScreenClip [3]

5 – Formularz zapisu

To najtrudniejszy element do zakodowania w html i css, dlatego staram się nie utrudniać sobie życia. Stwórz biały prostokąt bez obrysu i skopiuj go, następnie rozmieść go tak, jak na zdjęciu. Dodaj także krótkie opisy pól – użyłem tej samej czcionki, co do mniejszego opisu. Jeśli chcesz wyciągnąć sobie na plik linie pomocnicze, włącz najpierw linijki (ctrl+r) i następnie przeciągnij myszą linijkę na obraz.

ScreenClip [4]

6 – Przycisk do wysyłania

Skopiuj jedno z okienku zapisu i zmień jego kolor na pomarańczowy, żeby lepiej rzucało się w oczy. Następnie wybierz białą czcionkę i umieść w nim napis, który zachęci do wysłania. Rozmieść okna tak, żeby ładnie się komponowały.

ScreenClip [5]

7- Prostokąty pod obrazem

Następnie użyj narzędzia „prostokąt z zaokrąglonymi rogami” i stwórz na dole strony 3 pola, w których znajdą się dodatkowe napisy. Najprościej jest stworzyć jeden prostokąt i skopiować go dwa razy. Odsuń je za sobą za pomocą klawiatury (trzymając shift), dzięki czemu będziesz przesuwał je o 10 pikseli za każdym wciśnięciem klawisza. Kolor pola jest taki sam, jak kwiatka na obrazku – skopiuj go za pomocą narzędzia pipeta. Prostokąty możesz wydłużyć, dzięki złapaniu za dolną krawędź i przeciągnięciu – ja zrobiłem to do linii pomocniczej, dzięki czemu mają taką samą długość.

ScreenClip [6]

8 – Teksty w prostokątach

Wybierz narzędzie Tekst (T) i następnie zaznacz w prostokącie obszar, który będzie nieco mniejszy od prostokąta, by powstały marginesy. Następnie umieść w nim swój tekst. Nie zapomnij zmienić parametrów spacing i tracing, bo w przeciwnym razie tekst będzie prezentował się nienaturalnie. Następnie skopiuj warstwę z tekstem jeszcze dwa razy i przesuń te warstwy na kolejne prostokąty. Teraz możesz zmienić tekst na taki, jakiego potrzebujesz.

ScreenClip [7]

9 – Gwarancja

W tym miejscu użyłem czcionki calibri. Wypunktowanie za pomocą kwiatków zrobisz najprościej, jeśli użyjesz osobnego obrazka.

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

Zobacz kurs Photoshop dla web designera -> TUTAJ

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

ScreenClip [8]

10 – CTA (wezwanie do działania)

Na koniec dodałem wezwanie do działania w jaskrawym kolorze. Teraz nie pozostaje nic innego, jak zakodować szablon do html i css i cieszyć się z wysokiej konwersji.

ScreenClip [1]
2 – 3 lata temu strony były znacznie bardziej skomplikowane – ludzie chętnie wykorzystywali trójwymiarowe przyciski, cienie i inne efekty. Dziś znacznie częściej można spotkać się z upraszczaniem – wystarczy przyjrzeć się płaskiemu interface Androida 5.0, nowym aplikacjom i stronom www.


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