Сделаем дизайн шапки сайта landind page для юриста в программе photoshop.
Шапка у лендинга имеет большое значение, она должна зацепить посетителя и удержать на сайте.
Зацепить можно продающим заголовком уникальным торговым предложением.
Заголовок первого уровня должен быть большими заглавными буквами с красивым классическим шрифтом с засечками из семейства serif.
Второй подзаголовок и текст можно оформлять шрифтами sans.
В дизайне используется не больше трех красивых цветов, чтобы легче воспринимал глаз посетителя.
Между всеми элементами есть стандартные отступы в 30 или 50 пикселей, чтобы дизайн был воздушный и простой.
Отступы в 10 пикселей делаются в photoshop с помощью выделения одного или нескольких элементов дизайна в режим свободного трансформирования ctrl+T и дальнейшем смещении блока зажатым shift и стрелочкой курсора в любом направлении.
Также в дизайне шапки сайта должна быть тематическая картинка или видео плюс простая форма с одним полем для ввода телефона и большой кнопкой с градиентом и свечением при наведении или наоборот.
Содержание статьи
Дизайн меню шапки landing page
Вначале откроем заготовку в формате psd с bootstrap сеткой из 12 колонок. Скачать bootstrap сетку можно тут.
Дизайн делается строго по колонкам, чтобы в дальнейшем было удобно делать адаптивную верстку.
Сверху будет классическое меню из трех элементов.
- Логотип сайта.
- Меню сайта посередине.
- Справа телефон с ссылкой, чтобы на мобильном устройстве было удобно сделать вызов по клику.
Логотип и телефон занимают две или три колонки и прижимаются с левой и с правой стороны.
Теперь нужно для меню сделать одинаковые отступы между элементами ctrl+t и shift + стрелка.
Выделим все элементы меню и сделаем свободное трансформирование, чтобы поместить меню в колонки.
Дизайн заголовка и кнопки шапки сайта
- Заголовок первого уровня сделаем шрифтом Museo Sans с шрифтом 900, чтобы наложить линейный градиент из двух цветов, непрозрачность у градиента будет 70 процентов. Для того чтобы добавить слой маску изображения. Добавляем картинку в проект, переносим выше текста заголовка и зажимаем клавишу alt и делаем маску. Изображение потребуется еще для украшения правой части экрана. Ниже с отступом 30 пикселей делаем заголовок второго уровня шрифтом Museo Serif с засечками. Текст под заголовком делаем этим же шрифтом.
- Оформим кнопку. Кнопка будет занимать семь колонок пропорционально тексту и заголовку. На кнопку наложим такой же градиент, как и на заголовок, второй параметр наложения внешнее свечение с размахом около 30 пикселей и непрозрачностью 30 процентов.
Оформим правую часть экрана сайта
- Разместим тематическое изображение с юристом в синем пиджаке под цвет сайта. Изображение занимает четыре колонки напротив заголовка текста и формы обратной связи в виде кнопки.
- На заднем плане юриста поместим во весь экран изображение, которое использовали для маски заголовка первого уровня. Это изображение будет маской для прямоугольника во весь экран под углом. Добавим градиент с непрозрачностью 30 процентов. Прямоугольник уходит на весь экран за сетку. За bootstrap сеткой можно располагать не активные части лендинга.
Дизайн левой части шапки сайта
Добавим символ юристов фигуру с весами на задний план.
Чтобы фигура не выделялась, сделаем три вещи.
- Зайдем в меню photoshop фильтр, галерея фильтров и выберем наклонные штрихи. Параметрами можно отрегулировать нужную четкость.
- Сделаем размытие по Гауссу на пять пикселей.
- Добавим наложение светло синего или серого цвета на картинку.
Полностью разобрали дизайн шапки сайта landing page, как использовать маску и фильтры. Как сделать верстку шапки сайта читать тут.