Как в Photoshop создать простой веб-баннер?

Баннер или шапка веб-сайта HTML представляют собой графику, которая находится в верхней части веб-сайта. На ней обычно выводится название компании. Часто это первое, что видит человек при посещении веб-сайта. В данной статье мы расскажем, как при помощи Photoshop создать простой веб-баннер.

Создание простого веб-баннера в Photoshop

Начнем с готового баннера. У нас есть базовый пример, используемые в нем цвета успокаивают глаза. Его можно без труда размещать на веб-сайте, посвященном моде и стилю, а также для персонального блога. Следуйте приведенным ниже инструкциям:

Как в Photoshop создать простой веб-баннер?
Разрабатываем простой веб-баннер в Photoshop

  1. Откройте новый документ. Открываем в Photoshop новый документ нужного размера:

Как в Photoshop создать простой веб-баннер?
Новый документ

  1. Нарисуйте прямоугольник при помощи инструмента «Прямоугольная область». Перед тем, как сделать шапку веб-сайта HTML, создайте на новом слое прямоугольник любого цвета:

Как в Photoshop создать простой веб-баннер?
Прямоугольник

Стиль слоя> Наложение градиента. Нажмите на стиль, а далее примените градиент:

Как в Photoshop создать простой веб-баннер?
Стиль «Наложение градиента»

  1. Выбор формы кисти. После применения к прямоугольнику градиента и создания нового слоя поверх него, создайте выделение фигуры. Удерживая нажатой клавишу CTRL, кликните по фигуре прямоугольника. Активируйте кисть и настройте ее настройки, как показано на рисунке ниже. Зарисуйте одну сторону прямоугольника:

Как в Photoshop создать простой веб-баннер?
Форма кисти, параметра кисти

  1. Создайте новый слой. Создайте новый слой и выберите инструмент « Овальная область ». Измените параметра выделения и перетащите его на фигуру прямоугольника, как показано на рисунке ниже. Измените режим наложения на « Перекрытие », создайте ещё два дубликата этого выделения:
  2. Как в Photoshop создать простой веб-баннер?
    Инструмент «Эллиптическое выделение»

    1. Измените режим смешивания на «Перекрытие». Перед тем, как сделать баннер в шапку веб-сайта HTML, переместите три дубликата, созданных ранее, и поместите их в соответствующих местах. Измените их режим наложения на « Перекрытие ». При этом обратите внимание, чтобы они не вышли за пределы прямоугольника:

    Как в Photoshop создать простой веб-баннер?
    Эллиптические фигуры

    Используйте кисть, чтобы удалить лишние области, поместите данные три слоя в группу и кликните по иконке маски слоя. Выберите любой размер кисти, но не большой. Установите « Жесткость » — 0%, « Непрозрачность » — 10%. Зарисуйте края данных эллипсов, чтобы смешать их, и уменьшите непрозрачность:

    Как в Photoshop создать простой веб-баннер?
    Кисти — разработка простого баннера

    1. Выберите инструмент «Горизонтальный текст» и введите надпись шапки веб-сайта HTML. Введите основную надпись баннера, а далее добавьте дополнительную информацию о веб-сайте:

    Как в Photoshop создать простой веб-баннер?
    Надпись на баннере

    1. Создайте новый слой и создайте тень баннера. Создайте новый слой, кликните кистью один раз в любом месте и установите тень внизу веб-баннера так, чтобы прозрачность составляла 50 или 40%:

    Как в Photoshop создать простой веб-баннер?
    Тень веб-баннера

    1. Создайте новый слой ниже слоя баннера. Создайте новый слой ниже слоя баннера, как показано на рисунке ниже, и кликните один раз кистью белого цвета, « Жесткость » — 0%. Далее разместите эту светлую область на основном баннере и уменьшите непрозрачность слоя до 70%:

    Как в Photoshop создать простой веб-баннер?
    Светлая область

    1. Поместите все слои в группу. Далее продублируйте эту группу и измените цвет градиента. Измените градиент и надпись баннера, как показано на рисунке ниже:

    Как в Photoshop создать простой веб-баннер?
    Простой баннер

    Заключение

    Мы закончили создание шапки веб-сайта HTML. Надеюсь, что эта статья оказалась полезной для вас.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *