+7(495)066-03-76
Предоставляемые услуги
  1. Сайты
  2. Порталы
  3. Интернет-магазины
  4. Мобильные приложения
  5. Лендинги
  6. Брендинг
  7. Нейминг
  8. Продвижение
  9. Дизайн сайта
  10. Личные кабинеты
  11. Аудит сайта
  12. Образовательные платформы
  13. Сайты на Тильде
  14. Комплексный интернет маркетинг
  15. Техническая поддержка
  16. Коммерческие фотосессии

Баннер

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

Оценить

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