Що таке Лендінг Пейдж і з чим його їдять?
Навіщо потрібні Landing page?
Крок 1: Підготовка
У створенні Лендінгем ми будемо покладатися на популярний інструмент 960 Grid System, який в допоможе нам правильно розташувати графіку на робочому просторі щоб потім насадити її на вже готову схему блоків від 960 Grid System. У роботі були використані наступні шрифти: Source Sans Pro, Nevis і Bebas Neue, але ви можете використовувати шрифти на ваш розсуд. Як іконок використовувався набір Impressionist Icons, який на даний момент є платним.
Для роботи нам знадобляться завантажити 960 Grid System. Після скачування розархівуйте його в папку і відкрийте PSD файл з 12 колонками під назвою 960_grid_12_col.psd. він знаходиться в папці templates \ photoshop. Спершу нам потрібно додати трохи робочого місця, тому перейдіть в меню Image> Canvas Size і встановіть Width (Ширина) 1200px and Height (Висота) 1330px.
Залиште 245px зверху для нашої головної картинки в шапці сторінки. Решті простору задайте сірий колір (# f0f0f0) за допомогою інструменту Rectangle Tool. Просто виберіть цей інструмент і намалюйте прямокутну область, яка покриває весь простір нижче наших заповітних 245px. відведених під шапку. Зверніть увагу, що при створенні прямокутника ви повинні задати йому потрібний колір (# f0f0f0) в палітрі.
Результат повинен виглядати приблизно ось так:
Крок 2: Зображення в шапці
Крок 3: Панель навігації
За допомогою Rectangle tool створіть прямокутну область висотою 20px і шириною на всю робочу область, після чого надайте отриманого шару Opacity в 25% - таким чином ми доб'ємося напівпрозорості шару як це показано на зображенні знизу.
Перейдіть на Horizontal Type Tool (T). Надалі ми будемо використовувати шрифт Source Sans Pro - абсолютно безкоштовний шрифт, який можна без проблем сказати з серверів Гугла.
В опціях виставте наступні параметри стилю:
В результаті у вас повинно вийти ось це:
Крок 4: Лого-стрічка
В якості логотипу ви можете використовувати будь-який растрове або векторне зображення, або ж намалювати фігуру засобами Adobe Photoshop. Перейдіть в меню View> Show> Guides, таким чином ви включите встановлені в 960 Grid System лінії розмітки. Якщо хочете отримати подібну стрічку - використовуйте інструмент Pen Tool і просто обведіть потрібний вам контур по лініях розмітки, після чого надайте елементу зелений (# 79b02f) колір.
Тепер давайте додамо нашій стрічці кілька додаткових стилів, щоб вона стала виглядати як повноцінний лого. Почнемо з Inner Shadow з Opacity на рівні 35%.
і додамо Bevel and Emboss. Для параметра Highlight Mode встановіть Opacity на рівні 0% (нам адже зовсім не потрібен хайлайт ефект), в той час як для Shading Mode ставимо Opacity в15%. Зверніть увагу як це виглядає на малюнку:
Після цього додамо Gradient Overlay до елементу. Параметр Blend Mode залиште в позиції Soft Light. а Opacity на рівні 50%. Ось так має виглядати вікно настройки ефектів:
Тепер можна нанести який-небудь текст поверх нашого логотипу. Використовуйте Horizontal Type Tool і напишіть потрібні вам символи або текст. У нашому випадку це літери "DM" в шрифті Nevis (Bold 36px) + Drop Shadow ефект.
Крок 5: Заголовки
Для оформлення заголовків був використаний шрифт Source Sans Pro, дбайливо виділений Bold 'ом. Більший заголовок виконаний шрифтом з розміром 24pt. менший - 18pt.
Ось так заголовки виглядають після надання їм ефекту Drop Shadow:
Крок 6: Кола
Тепер нам з вами треба буде додати на наш Лендінгем Пейдж 3 кола: 2 кола однакового розміру + один побільше і з'єднати їх лінією в 5px. Щоб зробити кола скористаємося інструментом Ellipse Tool, а для лінії підійде Line Tool з товщиною лінії в 5 px.
Далі використовуйте рандомний дефолтний свій улюблений шрифт і напишіть кілька написів з ключовими аспектами Лендінгем. У найбільшому колі додайте + 10pt до розміру шрифту.
Крок 7: Кнопка заклику до дії (Call to action)
Отже, ми нарешті добралися до call-to-action кнопки. Зробимо її за допомогою інструменту Rounded Rectangle Tool. Виставте радіус 3px + колір # 96c64f і намалюйте елемент шириною 7px і висотою 35px. після чого додайте до елементу Drop Shadow ефект:
Далі додамо Inner Shadow c Distance в 1px і Opacity на рівні 30%. Отримаємо наступне:
І знову Bevel and Emboss для call to action кнопки. Цей ефект відмінно справляється із завданням додання обсягу елементів, саме тому ми його тут і використовуємо. Але з ним теж не варто особливо перегинати, щоб зробити ефект ледь помітним, виставте для опції Highlight Mode залиште Opacity на рівні 0% а для Shadow Mode - на рівні 7%.
Далі додаємо до елементу ефект Gradient Overlay в режимі змішування Soft Light з Opacity на рівні 60%:
Тепер нам з вами треба буде додати трохи шуму нашої кнопці. Існує безліч різних технік, але ми продовжуємо використовувати патерни. Як зробити свій власний кастомний патерн?
- Створіть новий документ будь-якого розміру
- Створіть новий шар і видаліть дефолтний бекграунд
- Перейдіть в меню Select> All
- Виберіть Edit> Fill щоб заповнити весь робочий простір
- Далі знімаємо виділення Select> Deselect
- Додаємо досить помітний шум наступними діями Filter> Noise> Add Noise
- Знову виділяємо весь робочий простір: Select> All
- Переходимо в меню Edit> Define Pattern
Вітаємо, ви створили власний новий патерн з шумом, який ми зараз і додамо до кнопки. Додаємо Pattern Overlay і вибираємо тільки що створений патерн.
Тепер додамо нашої багатостраждальної кнопці Stroke еефект і виберемо для цього один з відтінків зеленого. Зверху кнопки ефект буде ледь помітним через колір бекграунду, але посилюватися до центру і нижніх частин.
Далі нам потрібно створити невеликий елемент, який буде служити роздільником між іконкою і текстом на кнопці. Для цього створюємо вертикальну лінію висотою в 10px за допомогою інструменту Line Tool. Додаємо до лінії ефект GradientOverlay з наступними параметрами:
Використовуємо той же шрифт, який ми використовували для заголовків і пишемо заклик до дії, наприклад напис Download it Now. Надаємо тексту темно зелений колір (# 4d7500) і присвоюємо ефект Drop Shadow з білим (#ffffff) кольором тіні і Opacity на рівні 30%.
Далі додаємо будь-яку вподобану вам іконку або малюємо свою. У нашому випадку це буде іконка хмари.
Крок 8: Стрічка поруч з кнопкою
Використовуйте ту ж техніку, за допомогою якої ми малювали стрічку для логотипу і додатково зменшите Opacity щоб крізь стрічку було видно фонова картинка. Це важливо також, щоб не відволікати відвідувача від головного call-to-action. Після того як стрічка буде готова, напишіть на ній що-небудь, наприклад "100% free".
Крок 9: Секція основного контенту
Можна сказати що ми закінчили з шапкою. Тепер нам належить пропрацювати секцію основного контенту, в якій найчастіше представлені основні характеристики та переваги продукту.
Використовуйте Rectangle Tool щоб створити елемент шириною 220px і висотою 214px. Нижче отриманого прямокутника намалюйте ще один маленький прямокутник 5px висотою і світло-зеленим (# 91c04c) кольором. Використовуйте підготовлені сети іконок і розташуйте обрану іконку в центрі верхньої третини прямокутника. Далі використовуйте Horizontal Type Tool і Source Sans Pro обраний вами шрифт сірого кольору (# 262626) для заголовка і більш світлий відтінок сірого кольору для решти тексту (# 9c9c9c). Дублюйте отриманий елемент три рази щоб в результаті у вас вийшло 4 подібних елемента, замініть іконки і заголовки на копіях. У вас повинно вийти ось так:
Використовуйте Nevis або будь-який вподобаний вам шрифт в Bold розміром 18pt і напишіть яке-небудь пропозицію. Колір тексту той же самий, який ми використовували для Заголовків на попередньому етапі, а зелений колір - це колір зелених прямокутників, які ми теж робили на попередньому етапі. Наголосіть на словосполученні "Contact Us" - воно буде посиланням, тому зробіть його підкресленим.
Використовуючи такий же сірий колір, напишіть кілька рядків тексту і розташуйте його під щойно створеним заголовком. Візьміть обрану вами іконку (в нашому випадку - це іконка гаманця) і надайте їй той же зелений колір, що ми використовували для інших зелених іконок. Після чого надайте Drop Shadow ефект із зеленим кольором і параметрами як це показано на малюнку нижче:
Крок 10: Футер, підвал. або як там його?
Використовуємо Rectangle Tool щоб створити елемент 1200px в ширину і 280px в висоту. Пофарбуйте його в сірий колір (# d0d0d0) - це і буде наш бекграунд для футера.
Використовуємо Horizontal Type Tool і той же шрифт що і раніше щоб написати черговий Тема як на наступній картинці. Ми розділимо наш футер на 3 секції і кожна з них матиме власний заголовок. Як ви можете бачити на картинці, заголовок першого блоку говорить "More About Us". Додамо до нього Drop Shadow ефект з параметром Opacity на рівні 50% і Distance в 1px.
Використовуйте той же шрифт щоб написати текст-рибу і надайте йому більш світлий відтінок (# 7a7a7a).
Використовуйте Line Tool щоб створити просту сіру лінію, яка і буде служити роздільником між секціями.
Наступна секція буде називати "Newsletter". Створіть поле для введення імейл за допомогою Rounded Rectangle Tool з радіусом в 3px. Надайте бекграунді дуже світлий сірий колір (# f5f5f5). Give it a subtle Drop Shadow effect. Give the shape a really subtle 1pxStroke layer effect. Use the Horizontal Type Tool (T) to input some text in the shape. Додайте пару ефектів за смаком: наприклад Drop Shadow і 1pxStroke. Напишіть текст-рибу для поля введення.