Баннер

UI UX дизайн
01.11.2017

Сегодня попробуем сделать несколько видов простых баннеров.

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

Один из самых распространенных вариантов, когда есть хорошее фото.

Баннер

Cейчас еще стало модно оставлять края (рамки) вокруг, а не делать баннеры полноэкранными, т.е. вот так:

Баннер с полями

Плюсы очевидны: меню хорошо читается, есть место для навигации и она хорошо заметна, в целом выглядит аккуратнее. Ну и конечно картинку найти проще, потому что размер меньше.

Сделать очень просто, начинаем, как обычно:

Размер изображения

Создаем черный прямоугольник (U) размерами ( 1300 х 800 пкс ) и выравниваем его по центру, для этого нажимаем cmd + A, после выбираем слой с прямоугольником и в верхней панели выравниваем его ( нажмите на V для того чтобы переключиться на инструмент «перемещение»).

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

снять выделение cmd + D ( на винде во всех операциях замене cmd на ctrl )

Снять выделение

Далее находим картинку, копируем её и вставляем на наш черный прямоугольник ( все как везде "скопировать изображение" и cmd + V).

Нужно, чтобы размер картинки был не меньше прямоугольника, иначе, при увеличении картинки, она потеряет качество. Для уменьшения картинки используем команду cmd + T.

Shift зажимаем чтобы картинка сохранила пропорции, а ALT чтобы меняла размер относительно центра.

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

Теперь картинка внутри прямоугольника, с нужными нам пропорциями.

Чтобы на ней хорошо читался текст нужно сделать её прозрачнее.

Для этого выставляем прозрачность слоя на 50.

Сделаем навигацию, как на примере и добавим кружки и стрелки с подписями. Рисуем кружки небольшого размера ( так же клавиша U и далее выбор круга на панели инструментов).

Нарисуем 4 кружка. 1 кружок небольшого размера с черной заливкой, после кликаем по слою с кругом и дублируем слой. После выбираем 2 слоя с кружками и дублируем, отодвигаем все кружки в сторону. Чтобы перенести слой ровно нажмем V, после выберем слой и перетащим его удерживая shift. После выделяем все слои с кружками и выравниваем их.

После выделяем опять все слои с кружками и ещё уменьшаем их ( cmd + t + alt + shift ).

Теперь выберем 3 кружка из 4х и заменим заливку на серую:

Замена цвета кружков

Теперь выделим все слои с кружками и нажмем cmd + G , назовем группу "Кружки".

Теперь нажмем cmd + A выберем слои с группой "Кружки" и выровним по центру на верхней панели. Теперь кружки размещены по центру страницы.

Снять выделение cmd + D.

Теперь давайте зайдем на freepik во вкладку "Иконки", и скачаем стрелочку в формате svg, а после перетащим её на наш макет ( выбирайте тонкую стрелку ):

Уменьшим её размер зажимая ALT SHIFT.

Мне кажется она толстой и слишком темной, поэтому кликнем по слою со стрелкой дважды и вызовем окошко стилей. Теперь сделаем наложение цветом серого цвета и добавим внутренний контур.

Крикнем по слою со стрелкой и создадим дубликат слоя. После cmd + T и отразить по горизонтали, перетащим стрелку зажимая shift.

Зажмем оба слоя со стрелками и нажимаем сначала cmd + G, для группировки слоев , после cmd + A и на верхней панели выровнять по центру, cmd + D снять выделение.

Добавим надпись и кнопку на слайд. Шрифты 60 и 18 кегля.

Зажмем U и выберем полоску на панелями инструментов, добавим как на примере:

Осталось нарисовать кнопку. Для этого нарисуем прямоугольник и сделаем еще одну надпись «Все туры», тем же шрифтом что и подпись.

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

После сгруппируем эти 2 слоя задам cmd + G назовем группу «кнопка».

Кликнем по слою с группой «кнопка» и создадим дубликат. Переназовем слои « Кнопка при наведении». Выберем слой с текстом и нажмем Т , на верхней панели выберем черный цвет, выберем слой с прямоугольником, нажмем на U и зададим новые параметры на верхней панели.

Когда все готово можно попробовать вставить другие картинки и выбрать лучшую. Добавьте самое простое меню для полноты картины. Итог:

Задание:

Сделать 10 подобных баннеров, используя все горячие клавиши, на 1 любую тему. На задание несколько часов 3-4

Опубликовано: 2017-11-01

Оценить

Разработка сайтов и мобильных приложений любой сложности Оставить заявку