ДомойДизайнВеб-дизайнПростой баннер для сайта

Простой баннер для сайта

Интернет пользователи на каждом сайте видят небольшие по размеру картинки, которые в той или иной мере рекламируют сайты, товары и прочее. Это так называемые баннеры. Сделаем простой тип баннера.

Создаем новый файл размером 550*600 пикселей.

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

создаем простой баннер для сайта

Так как фотография для примера взята темных тонов, то под её тона и будем делать баннер. Дополняем недостающие части слоя «Заливкой» либо инструментом «Штамп».

pbanner-02

Создаем дубликат слоя: вкладка «Слои» – «Создать дубликат слоя». Добавляем к новому слою слой-маску. Снимаем видимость у нижнего слоя с изображением (глазик возле миниатюры слоя). Включаем «Вспомогательные элементы». Инструментом «Прямоугольная область» делаем квадратик размером 3*3 клеточки. В слое-маске заливаем квадратик черным цветом. Снова нажимаем на «Прямоугольная область» и, не снимая выделения, перетаскиваем его рядом через квадрат и заливаем черным цветом.

pbanner-03

Возвращаем видимость нижнему слою с изображением. Снижаем непрозрачность слоя до 50 %.

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

  • создать новый файл размером 1*1 пикселей,
  • верхний пиксель заливаем черным цветом,
  • заходим во вкладку «Редактирование» и выбираем «Определить узор».

Важно установить галочку возле строки «Связать со слоем» и снизить непрозрачность до 10-20%.

pbanner-04

Ставим галочку возле параметра «Тень» и устанавливаем цвет #ac2729.

pbanner-05

Ставим галочку возле параметра «Наложение градиента». Настраиваем его, как показано на рисунке.

pbanner-06

Создаем новый слой и выделяем полосу, которую заливаем контрастным ярким цветом #a5f41f.

pbanner-07

Инструментом «Ластик» большого диаметра, непрозрачностью 80-90 % стираем края полосы.

pbanner-08

Функционалом «Трансформирование» уменьшаем толщину полосы, растягиваем её, если необходимо и перемещаем вниз.

pbanner-09

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

pbanner-10

Снова создаем новый слой и делаем сверху полосу, которую заливаем тем же цветом, что и обводку. Правой кнопкой мыши нажимаем в окне слоев на слое с полосой и в контекстном меню выбираем «Объединить с предыдущим».

pbanner-11

Вызываем для объединенного слоя «Параметры наложения». Устанавливаем галочки возле «Обводка» и «Наложение узора». Настраиваем значения параметров.

pbanner-12

Добавляем надписи: кулинарный сайт, название сайта и приглашение посетить сайт.

Под слоем с рамочкой и текстовыми слоями создаем новый слой, как показано на рисунке и ставим яркое пятно контрастного цвета #a5f41f.

pbanner-13

Изменяем режим наложение слоев на «Цветовой тон».

Снова создаем новый слой и ставим пятна цвета #fcf905.

pbanner-14

Изменяем режим наложения слоев на «Умножение».

Создаем новый слой поверх рамочки и прокрашиваем её верх цветом #fcf905.

pbanner-15

Изменяем режим наложения слоев на «Светлее».

Режимы наложения подбираем в зависимости от исходных данных и цветовой тональности коллажа.

banner-res

Источникfotokomok.ru

ОСТАВЬТЕ КОММЕНТАРИЙ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

ПОХОЖИЕ СТАТЬИ