Как сделать баннер в фотошопе? Пошаговое руководство
Баннер или шапка сайта HTML представляют собой графику, которая находится в верхней части сайта. На ней обычно отображается название компании. Часто это первое, что видит человек при посещении сайта. В этой статье мы расскажем, как сделать баннер в фотошопе.
Создание простого веб-баннера в Photoshop
Начнем с готового баннера. У нас есть базовый пример, используемые в нем цвета успокаивают глаза. Его можно размещать на сайте, посвященном моде и стилю, а также для персонального блога. Следуйте приведенным ниже инструкциям:
Разрабатываем простой веб-баннер в Photoshop
Откройте новый документ. Открываем в Photoshop новый документ нужного размера:
Новый документ
Нарисуйте прямоугольник с помощью инструмента «Прямоугольная область».
Перед тем, как сделать шапку сайта HTML, создайте на новом слое прямоугольник любого цвета:
Прямоугольник
Стиль слоя> Наложение градиента. Нажмите на стиль, а затем примените градиент:
Стиль «Наложение градиента»
Выбор формы кисти. После применения к прямоугольнику градиента и создания нового слоя поверх него, создайте выделение фигуры. Удерживая нажатой клавишу CTRL, кликните по фигуре прямоугольника. Активируйте кисть и настройте ее параметры, как показано на рисунке ниже. Зарисуйте одну сторону прямоугольника:
Форма кисти, настройки кисти
Создайте новый слой. Создайте новый слой и выберите инструмент «Овальная область». Измените настройки выделения и перетащите его на фигуру прямоугольника, как показано на рисунке ниже. Измените режим наложения на «Перекрытие», создайте еще два дубликата этого выделения:
Инструмент «Эллиптическое выделение»
Измените режим смешивания на «Перекрытие». Перед тем, как сделать баннер в шапку сайта HTML, переместите три дубликата, созданных ранее, и поместите их в соответствующих местах.
Измените их режим наложения на «Перекрытие». При этом обратите внимание, чтобы они не вышли за пределы прямоугольника:
Эллиптические фигуры
Используйте кисть, чтобы удалить лишние области, поместите эти три слоя в группу и кликните по иконке маски слоя. Выберите любой размер кисти, но не очень большой. Установите «Жесткость» — 0%, «Непрозрачность» — 10%. Зарисуйте края этих эллипсов, чтобы смешать их, и уменьшите непрозрачность:
Кисти — разработка простого баннера
Выберите инструмент «Горизонтальный текст» и введите надпись шапки сайта HTML. Введите основную надпись баннера, а затем добавьте дополнительную информацию о сайте:
Надпись на баннере
Создайте новый слой и создайте тень баннера. Создайте новый слой, кликните кистью один раз в любом месте и установите тень внизу веб-баннера так, чтобы прозрачность составляла 50 или 40%:
Тень веб-баннера
Создайте новый слой ниже слоя баннера. Создайте новый слой ниже слоя баннера, как показано на рисунке ниже, и кликните один раз кистью белого цвета, «Жесткость» — 0%.
Затем разместите эту светлую область на основном баннере и уменьшите непрозрачность слоя до 70%:
Светлая область
Поместите все слои в группу. Затем продублируйте эту группу и измените цвет градиента. Измените градиент и надпись баннера, как показано на рисунке ниже:
Простой баннер
Заключение
Мы рассказали вам как сделать баннер в фотошопе. Надеюсь, что эта статья оказалась полезной для вас.
Вадим Дворниковавтор-переводчик статьи «How to Design Simple Web Banner In Photoshop»
Как сделать рекламный баннер в Фотошопе для сайта
Если вы оказались на этой странице, то вы, скорее всего, активный участник партнерских программ или же у вас есть собственный интернет-магазин. И в том и в другом случае вам нужны рекламные материалы для продвижения своих товаров/услуг на различных площадках.
Это наш очередной урок по Фотошопу. И прямо сейчас мы пошагово расскажем и покажем, как создать баннер размером 300×600 пикселей. Такой размер обычно используется в сайдбарах (боковых панелях) сайтов.
Для примера возьмем изображение наушников от SONY и загрузим его в проект:
Это руководство раскроет вам не техническую сторону вопроса, а именно методику, по которой стоит создавать баннеры в Photoshop.
Содержание
- Что нужно знать
- Формат шрифтов
- Работа с фоном
- Симметрия объектов
- Результат
Что нужно знать
- Чтобы CTR (соотношение кликов к показам) был высоким, баннер нужно делать очень контрастным, чтобы он ни коим образом не сливался с общей цветовой гаммой сайта, но при этом и не пестрил в глазах.
- Не стоит подробно расписывать все, что вы знаете о товаре – это только оттолкнет пользователя. Самое главное, чего хотят люди – узнать название товара, цену на него и есть ли скидка/акция.
- На баннере должен присутствовать обязательный призыв к действию. Обычно этим самым призывом выступают слова “Купить”, “Заказать” или “Подробнее”.
- Как бы вы не креативили с баннером, главное изображение (товар) должно находиться в центре внимания.
Исходя из выше сказанного, макет баннера размером 300×600 будет выглядеть так:
Найти картинки для баннера можно и в Google картинках, но лучше взять фото на сайте самого поставщика/продавца. Оттуда же возьмите и логотип.
Что касается кнопки, то ее тоже можно скачать в Google картинках, но нам не составит труда создать ее в Фотошопе.
Давайте добавим 3 этих элемента:
Формат шрифтов
Смотрите также: “Как изменить размер изображения в Фотошопе CS6 и CC”
При создании баннера необходимо соблюдать его привлекательность. Для это все должно быть плюс-минус симметричным, а надписи желательно создавать используя единый шрифт. В нашем случае мы использовали Fira Sans. Это, естественно, не касается логотипов и кнопок с плашками.
Нужно определиться с цветом шрифта. Мы возьмем какой нибудь темный оттенок с самих наушников, но можно брать и темно серый или черный цвет. Хотя лучше избегать прям 100% черного цвета.
Работа с фоном
Многие остановятся на предыдущем этапе, но это неправильно, т.к. нужно придать баннеру немного стиля и глянца, особенно когда фон белый, а это как раз наш случай. Нужно как минимум выделить границы баннера. Давайте приступим.
Берем инструмент “Градиент”:
В настройках инструмента выставляем переход от светло-серого к прозрачному, а вид градиента выбираем “Радиальный”.
Остается только залить фон. Если вы не знаете, как работать с этим инструментом, то советуем для начала ознакомиться с этим уроком: Как залить фон в Фотошопе CS6 и CC
У нас получился такой результат после заливки:
Важно! Какие бы вы действия не проводили над дизайном, главное, чтобы основная информация легко читалась и была на первом плане.
Симметрия объектов
Смотрите также: “Как выделить слой в Фотошопе”
Чтобы баннер был законченным и смотрелся аккуратно, стоит потратить время на выстраивании симметрии.
Поэтому подвигаем немного объекты.
Для этого нам включаем линейки и, благодаря направляющим, выравниваем объекты:
Вот теперь можно сказать, что баннер готов:
Стоит отметить, что использование красных цветов вместо синих приведет к увеличению вовлеченности пользователей.
На этом все! Благодаря программе Фотошоп и простым действиям мы смогли оперативно сделать баннер. Надеемся этот урок помог вам. Не стесняйтесь задавать свои вопросы в комментариях.
До встречи в наших следующих уроках!
Как создать баннер в Photoshop
Это краткое руководство по созданию баннера поможет людям с небольшим опытом в дизайне или без него сделать его самостоятельно. Выполняйте эти простые шаги один за другим, и вы получите готовый к печати баннер в кратчайшие сроки.
Создать новый документ В Photoshop выберите «Файл» и «Создать».
Откроется окно «Новый файл», в котором вы можете выбрать все свойства вашего баннера.
Выберите размер (мы выбрали 8 футов на 2 фута) и разрешение (в данном случае достаточно 120 пикселей/дюйм, учитывая, что этот баннер будет виден с расстояния примерно 10 футов). Чем дальше будет стоять зритель, тем ниже может быть разрешение. Таким образом, вы не получите массивный файл. Если вы не уверены, какое разрешение выбрать, обратитесь к своему принтеру.
Убедитесь, что ваш цветовой режим CMYK. Этот режим используется для печати, а фоновое содержимое установлено на белый цвет для белого фона.
После того, как вы нажмете кнопку OK, откроется такой слой.
Шаг 2
Вставьте изображение Выберите файл и место
Откроется окно места. Выберите изображение по вашему выбору и нажмите «Поместить».
Выбранное изображение появится на вашем баннере вот так.
Чтобы переместить изображение, просто нажмите и перетащите. Чтобы изменить его размер, наведите указатель мыши на один из его углов, пока курсор не примет вид двусторонней стрелки.
Совет. Удерживайте клавишу Shift и перетащите, чтобы пропорционально изменить размер.
Повторяя процесс, вы можете добавить столько изображений, сколько захотите. Здесь мы добавили логотип.
Если вы хотите изменить размер фотографии после ее размещения, выберите «Редактировать», затем «Свободное преобразование».
и ограничительная рамка снова появится.
Шаг 3
Добавление текста Выберите инструмент «Текст» в боковом меню.
Щелкните в любом месте баннера, чтобы начать печатать.
После того, как вы закончите, подтвердите действие так же, как при размещении изображений.
Чтобы переместить текст, выберите слой, на котором он находится (справа от вас), и инструмент перемещения в меню слева, затем щелкните и перетащите.
Повторите процесс, чтобы добавить текст, если необходимо.
Вы можете изменить размер текста так же, как вы изменили размер изображения (Правка> Свободное преобразование), и перемещать его с помощью инструмента «Перемещение».
Шаг 4
Изменение цвета фона
Выберите инструмент ведро с краской в меню слева и фоновый слой. Выберите цвет либо из образцов, либо из цветового микшера.
Просто нажмите на баннер, чтобы изменить цвет фона.
Шаг 5
Сохранение файла Выберите «Файл», затем «Сохранить как…»
Откроется окно «Сохранить как». Сначала сохраните файл в формате Photoshop, чтобы вы могли вносить в него любые изменения в будущем.
Затем перейдите к слою — сведите изображение и повторите процесс (Файл>Сохранить как…) и сохраните его в формате Photoshop PDF. Это файл, который вы доставите на свой принтер. Щелкните Сохранить.
Откроется новое окно «Сохранить Adobe PDF». Убедитесь, что вы выбрали «Высокое качество печати» в качестве предустановки.
Создание простого баннера сайта с логотипом в Photoshop
Простое пошаговое руководство по созданию баннера и логотипа веб-сайта в Photoshop.
Образец .psd и готовый веб-сайт также включены.
Баннер или заголовок — это изображение, которое находится в верхней части веб-сайта и обычно отображает название компании и логотип. Часто это первое, что видит человек, когда открывает сайт. Смешение цветов должно быть привлекательным, информативным, комфортным для глаз и помогать убедить зрителя остаться на вашем сайте.
Начнем с нашего баннера. Здесь у нас есть общий баннер, и используемые цвета успокаивают глаза. Его можно использовать для баннера моды и красоты, а также для личного или праздничного баннера.
Выполните следующие шаги, чтобы создать вышеуказанный баннер веб-сайта:
Шаг 1: Создание баннера размера
Шаг 2: Установка цвета фона
Создайте новый слой. Назовите его bgcolor. Задайте цвет фона, выполнив следующие действия:
- Измените цвет переднего плана на #E4D1B8.
- Нажмите на Paint Bucket Tool на панели инструментов справа.
- Щелкните мышью на холсте. Цвет вашего фона теперь изменен на новый цвет.
Шаг 3: Цвет фона внутри
Создайте новый слой. Назовите его внутренний цвет. Выберите Rectangular Marquee Tool , показанный на панели инструментов справа. Сделайте ширину прямоугольника 760 пикселей и высоту 100 пикселей внутри фона. Залейте его цветом # C64866, используя инструмент Paint Bucket.
Шаг 4: Создание фона логотипа
Создайте новый слой. Назовите его логобкг. Выберите инструмент «Прямоугольная область». Сделайте ширину прямоугольника 120px и высоту 100px. Поместите прямоугольник в левой части баннера.
Шаг 5. Создание логотипа с помощью инструмента пользовательской формы
Создайте новый слой. Назовите его логотип. Выберите инструмент пользовательской формы , показанный на панели инструментов справа. Щелкните раскрывающееся меню Shape , которое отображается на верхней панели инструментов. Нажмите на стрелку и выберите Украшения. Найдите украшение на знамени.
Перетащите его в пространство логотипа и расположите так, чтобы он находился в центре фона логотипа. Теперь у вас есть временное украшение в виде логотипа, который при необходимости можно заменить на логотип вашей компании.
Шаг 6: Создание вертикальных линий на баннере
Создайте новый слой. Назовите группу. Выберите инструмент «Прямоугольная область». Сделайте размер прямоугольника шириной 7px и высотой 120px. Поместите прямоугольник в середину баннера.
Залейте его цветом # E8B0BD.
Сделайте четыре копии полосы слоя.
Чтобы сделать копию, щелкните правой кнопкой мыши слой и выберите дубликат. Появится экран с названием «Дублировать слой».
Введите имя слоя как бэнд-копию. Нажмите «ОК». Сделайте то же самое с бэндом copy2, бэндом copy3, бэндом copy4. Разместите полосы правильно в баннере.
Шаг 8: Создание границы логотипа
Создайте новый слой. Назовите его границей. Выберите инструмент «Прямоугольная область». Сделайте ширину прямоугольника 20px и высоту 100px. Залейте его цветом # A63D56. Поместите прямоугольник справа от фона логотипа. Сделайте копию и поместите новый прямоугольник слева от фона логотипа.
Шаг 9: Создание пунктирных линий
Теперь выберите Horizontal Type Tool (текстовый инструмент). Введите «_________» с помощью дефиса. Поместите его в верхнюю часть баннера. Сделайте копию, кликните правой кнопкой мыши по слою и выберите дубликат.