Что такое баннер? Баннер – это графическое рекламное объявление. Дизайнер при создании баннера для социальных сетей, а конкретнее – для продающих групп, должен ориентироваться на соответствие этого рекламного объявления следующим критериям:
- баннер своим креативным оформлением вызывает эмоциональный отклик, обращает на себя внимание;
- баннер создает визуальный образ товара (услуги), знакомит с торговым предложением;
- баннер призывает к действию, побуждает приобрести, заказать, подписаться, зайти на сайт и т.д.
В данной статье я подробно описываю создание баннера для социальных сетей, для публикации в Инстаграм, ВКонтакте и др. в программе Photoshop.
Создаю файл размером 1080х1080 px. Беру инструмент Прямоугольник, растягиваю прямоугольник по высоте файла, а по ширине занимая примерно половину файла.

Беру инструмент Выделение контура фигуры. Кликнув по фигуре, вижу, что на ее контуре появились опорные точки.

Беру инструмент Перо+ (добавление опорной точки). Ставлю две новые опорные точки на прямоугольнике. И, передвигая их мышкой с зажатой ЛКМ, изменяю контур фигуры по своему желанию.

На панели слоев встаю на слой с фигурой. Сочетанием клавиш Ctrl+J копирую фигуру на новый слой.

Подписываю слои: верхний слой – «прямоугольник 1»; нижний слой – «прямоугольник 2».

Изменяю цвет фигур.
Встаю на слой «прямоугольник 1», нажимаю на инструмент Фигуры, при этом на панели задач появляется Заливка. Кликом по ней открываю палитру цветов, на которой выбираю нужный цвет. Точно так же выполняю заливку второй фигуры.

Стоя на слое «Прямоугольник 2», беру инструмент Перемещение. Зажав ЛКМ, вытаскиваю нижнюю фигуру из-под верхней чуть вправо.

Командой Файл – Открыть загружаю в программу изображение, устанавливаю его поверх прямоугольника 1. Сочетанием клавиш Ctrl+T вызываю трансформацию и размещаю изображение на фигуре. Для удобства переименовываю этот слой, называя его «Девушка».

Я использую изображение в формате PNG, т.е. с прозрачным фоном. Если вы используете фотографию в формате JPEG, то поступим так:
- растягиваем изображение по размеру фигуры;
- выделив слой «Девушка» и зажав клавишу Alt, наводим курсор мыши между слоями «Девушка» и «Прямоугольник 1»;
- увидев, что появилась стрелочка, щелкаем ЛКМ, прикрепляя слой «Девушка» к слою «Прямоугольник 1»

Что произошло? В данном случае прямоугольник служит нам маской. Командой Alt + клик мы вставили изображение в маску. Оно словно бы обрезалось по форме фигуры, в которую его вставили. На самом же деле оно не обрезалось, и его можно трансформировать (Ctrl+T), увеличивая и разворачивая так, чтобы красиво установить в маске.
Чтобы изменить фон будущего баннера, прежде необходимо убрать замок со слоя «Фон». Для этого встаю на слой, который называется «Фон», двойным кликом вызываю окно, в котором нажимаю кнопку «ОК».

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

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

Стоя на слое с текстом «Платки», сочетанием клавиш Ctrl+J копирую этот слой.

Встав на слой Платки, который находится ниже, вызываю трансформацию клавишами Ctrl+T. Перемещаю мышкой текст “Платки» выше, увеличиваю его и изменяю его прозрачность до 30%.

Выделив верхний слой Платки копия, создаю новый слой. И на новом слое создаю надпись «павлопосадские меховые».
Создаю еще один новый слой и внизу ввожу текст «все модели на сайте» и название сайта.
Почему каждую надпись размещаю на новом слое? Потому что в случае необходимости изменения или удаления какой-либо фразы, не придется удалять весь текст полностью, а лишь ту часть, которая нуждается в корректировке.
Разместив таким образом текст на баннере, вижу, что достаточно свободного места для стикера.
Беру инструмент Эллипс и с зажатой клавишей Shift размещаю круг. Выделив на панели инструментов Эллипс, иду в Заливку и в панели цветов выбираю нужный цвет для заливки круга, изображающего стикер.

Поверх слоя Эллипс создаю новый слой, беру инструмент Текст и ввожу надпись «Скидка 30%», размещая ее на стикере инструментом Перемещение.
Создание баннера закончено.
Свежие комментарии