Я веб-дизайнер. Урок 4. Hero, offer, CTA. Выравнивание.

 Привет, юный дизайнер. Прошло длительное время с третьего урока и пора браться за четвертый. В нем сделаем так называемую Hero image, сделаем offer, CTA и поговорим о выравнивании элементов в Photoshop CC2017.

Hero image

Это ничто иное как большая картинка в верхней части сайта. Отличается от слайдера тем, что она статичная. Занимать может как весь экран по высоте, так и фиксированную высоту. В нашем случае представим, что страничку будут смотреть на ноутбуке с стандартным разрешением 1366х768. То есть 768 это полностью высота всего экрана. В них также входит - заголовок браузера, панель закладок, поисковая строка - это все занимает место на экране. Плюс еще меню которое мы сделали высотой 75 пикселей. Вычтем на глаз все элементы, и сделаем высоту у hero image 650px.

Создадим прямоугольник размером 1920х650 кликнув по холсту с выбранным инструментом создания прямоугольника. Не забываем кликнуть на папку hero в слоях, чтобы элемент разместился в этой папке.

Сделаем заливку любого серого цвета и уберем обводку в панели свойств элемента

Пока элемент активен отцентрируем его по горизонтали, а по вертикали переместим так, чтобы он “прилип” к прямоугольнику верхнего меню. (чтобы элемент двигался только по вертикальной оси жмем и держим шифт).

Мы подготовили “основу” для будущей картинки. Теперь ищем картинку, желательно на бесплатном фотохостинге. Так как мы делаем дизайн “студии дизайна” подберу нечто в тему. Картинка векторной клубники вкусно и красиво.

Сохранив картинку на ПК, перетягиваем ее в поле проекта ФШ. При этом картинка вначале войдет в режим предварительного редактирования, о чем говорят диагональные линии. Жмем enter.

Получилось непонятно что. Прямоугольник и сверху картинка клубники. Что дальше? Дальше используем очень популярный и важный принцип работы с графическими элементами. Будем делать для картинки маску. Маска это по сути некий графический примитив, который ограничивает показ картинки своей формой. Для того, чтобы прямоугольник стал маской для картинки нужно навести курсок в панели инструментов в положении между слоями. Нажать и держать Alt. Когда курсор изменился на квадратик со стрелочкой, щелкаем левой кнопкой. Должно получиться вот так:

Картинка клубники при импорте не заполнила всю ширину 1920 пикселей, и я изменил её размер нажав Ctrl+T и зажав Shift для сохранения пропорций растянул до нужной ширины.
Мы получили конструкцию: прямоугольник снизу “подрезает” картинку, которая наложена сверху. Таким образом мы достигаем постоянный размер картинки в нужных нам размерах 1920х650. Я разместил картинку так, чтобы сверху осталось место для текста и кнопки. В панели слоев получившуюся пару (картинка+прямоугольник) объединю в общую папку, которую назову bg (background).

Offer

Оффер в переводе с английского - предложение. Это краткий посыл в виде текста, который емко описывает товар\услугу\сервис. Состоит из двух частей: основной и вспомогательной. Иногда вспомогательную часть можно не использовать. Основная и вспомогательная часть должны отличаться друг от друга. Первая более выразительная, вторая менее заметная, но готовая дать информацию при чтении первой. Так как мы создаем студию дизайна, я сделал примерно так:

Как видно, первая часть написана шрифтом Open Sans начертание Regular размер 50px. Вторая часть Open Sans light 35px.
Все, наш оффер готов. Не забываем создать папку для этого элемента в панели слоев.

CTA

CTA = Кнопка. Call to action = призыв к действию. Такая кнопка, которая манит чтобы на нее нажать. Это должна быть в меру крупная, в меру видимая, аккуратная кнопка, на которую так и хочется нажать. Кнопка ЦТА размещается под оффером.

Возьмем инструмент прямоугольник и нарисуем его с размером 250х45 пикселей. В свойствах укажем скругление углов 10 пикселей. Цвет заливки я сделал красным, без контура. Тут же создадим текст для кнопки, размером 20 пикселей, я сделал еще две вещи: капитализация и трекинг. Капитализация делает все буквы заглавными, а трекинг устанавливает расстояние между буквами.

Для того чтобы выровнять текст в кнопке, нужно на панели слоев с нажатой Шифт выделить текст и кнопку, выбрать инструмент выделения и на верхней панели отцентровать по вертикали и горизонтали. После этого, пока элементы выделены сгруппируйте их в папку, назовите ее cta. После чего кликнув в панели слоев на эту папку выровняйте ее по центру и вручную по нужной высоте.

Клубника перетягивает акцент с кнопки. На помощь придет еще одна хитрость. Сделаем наложение цвета на картинку, чтобы “прибить” ее акцент. Для этого щелкаем дважды по слою с картинкой примерно в левой стороне как на скриншоте. Появится панель стилей слоя.

В этой панели нам интересен пункт Color overlay. Щелкнув по нему автоматически слева появится галочка. Выберите цвет белый, непрозрачность я выставил для моего примера 35% и нажал окей. Результат:

Теперь, можно поподгонять оффер и ЦТА выделив в панели слоев обе папки и перетаскивая инструментом выделения. Можно работать как мышью, так и стрелками клавиатуры.

Выравнивание

Особенность раз:

Выравнивание в ФШ сделано не очень удобно и совсем не интуитивно понятно.
С появлением CC2017 оно стало немного проще. Дело в том, что в режиме, когда включены артборды (рабочие области) для выравнивания элемента достаточно выделить его и с помощью инструмента выделения нажать нужную иконку на верхней панели.
Но, если документ создан без использования этих артбордов, то выделить элемент будет недостаточно. Чтобы выровнять его нужно еще выделить всю рабочую область нажав Ctrl+A. После этого кнопки выравнивания станут активны. После выравнивания для снятия выделения нужно нажать Ctrl+D.

Особенность два:

Важно то, что выбрано на панели слоев. Если выбраны два элемента, то выравнивание будет влиять непосредственно на эти два объекта, схлапывая их между собой. Но, если эти два объекта поместить в папку и выделить её, то выравнивание этой папки по центру не приведет к смещению объектов внутри нее относительно друг друга. На первом скриншоте результат центровки относительно друг друга. На втором центровка папки с элементами относительно самого документа.

В следующем уроке будем делать плашки работ с текстом, и узнавать как же еще можно управляться с ФШ.