Ноябрь 2017
Автор: Рубрика: Web дизайн Комментариев нет

Дизайн шапки сайта в photoshop


Дизайн шапки сайта в photoshop

Сделаем дизайн шапки сайта landind page для юриста в программе photoshop.

Шапка у лендинга имеет большое значение, она должна зацепить посетителя и удержать на сайте.

Зацепить можно продающим заголовком уникальным торговым предложением.

Заголовок первого уровня должен быть большими заглавными буквами с красивым классическим шрифтом с засечками из семейства serif.

Второй подзаголовок и текст можно оформлять шрифтами sans.

В дизайне используется не больше трех красивых цветов, чтобы легче воспринимал глаз посетителя.

Между всеми элементами есть стандартные отступы в 30 или 50 пикселей, чтобы дизайн был воздушный и простой.

Отступы в 10 пикселей делаются в photoshop с помощью выделения одного или нескольких элементов дизайна в режим свободного трансформирования ctrl+T и дальнейшем смещении блока зажатым shift и стрелочкой курсора в любом направлении.

Также в дизайне шапки сайта должна быть тематическая картинка или видео плюс простая форма с одним полем для ввода телефона и большой кнопкой с градиентом и свечением при наведении или наоборот.

Дизайн меню шапки landing page

Вначале откроем заготовку в формате psd с bootstrap сеткой из 12 колонок. Скачать bootstrap сетку можно тут.

Дизайн делается строго по колонкам, чтобы в дальнейшем было удобно делать адаптивную верстку.

Сверху будет классическое меню из трех элементов.

  1. Логотип сайта.
  2. Меню сайта посередине.
  3. Справа телефон с ссылкой, чтобы на мобильном устройстве было удобно сделать вызов по клику.

Логотип и телефон занимают две или три колонки и прижимаются с левой и с правой стороны.

Теперь нужно для меню сделать одинаковые отступы между элементами ctrl+t и shift + стрелка.

Выделим все элементы меню и сделаем свободное трансформирование, чтобы поместить меню в колонки.

Дизайн меню шапки landing page

Дизайн заголовка и кнопки шапки сайта

  1. Заголовок первого уровня сделаем шрифтом Museo Sans с шрифтом 900, чтобы наложить линейный градиент из двух цветов, непрозрачность у градиента будет 70 процентов. Для того чтобы добавить слой маску изображения. Добавляем картинку в проект, переносим выше текста заголовка и зажимаем клавишу alt и делаем маску. Изображение потребуется еще для украшения правой части экрана. Ниже с отступом 30 пикселей делаем заголовок второго уровня шрифтом Museo Serif с засечками. Текст под заголовком делаем этим же шрифтом.
  2. Оформим кнопку. Кнопка будет занимать семь колонок пропорционально тексту и заголовку. На кнопку наложим такой же градиент, как и на заголовок, второй параметр наложения внешнее свечение с размахом около 30 пикселей и непрозрачностью 30 процентов.

Дизайн заголовка и кнопки шапки сайта

Оформим правую часть экрана сайта

  1. Разместим тематическое изображение с юристом в синем пиджаке под цвет сайта. Изображение занимает четыре колонки напротив заголовка текста и формы обратной связи в виде кнопки.
  2. На заднем плане юриста поместим во весь экран изображение, которое использовали для маски заголовка первого уровня. Это изображение будет маской для прямоугольника во весь экран под углом. Добавим градиент с непрозрачностью 30 процентов. Прямоугольник уходит на весь экран за сетку. За bootstrap сеткой можно располагать не активные части лендинга.

Оформим правую часть экрана сайта

Дизайн левой части шапки сайта

Добавим символ юристов фигуру с весами на задний план.

Чтобы фигура не выделялась, сделаем три вещи.

  • Зайдем в меню photoshop фильтр, галерея фильтров и выберем наклонные штрихи. Параметрами можно отрегулировать нужную четкость.
  • Сделаем размытие по Гауссу на пять пикселей.
  • Добавим наложение светло синего или серого цвета на картинку.

Дизайн левой части шапки сайта

Полностью разобрали дизайн шапки сайта landing page, как использовать маску и фильтры. Как сделать верстку шапки сайта читать тут.

Комментариев нет