Сегодня попробуем сделать несколько видов простых баннеров.
В слайде все баннеры должны быть в одном стиле, могут меняться в цвете фона или расположении текста, лучше делать слайды похожими друг на друга.
Один из самых распространенных вариантов, когда есть хорошее фото.
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
Оценить
