Мастер-класс по созданию баннера для магазина

Создание баннера для магазина

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

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

Все, что я буду говорить дальше – частный случай. Применять его к себе можно с известной долей допущений и фантазий. Я просто приведу частный пример создания баннера. А Вы, взяв за основу этот материал, создадите свой, ни на что не похожий шедевр.

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

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

Итак, для примера я возьму изготовление баннера для магазина мыла. Фотографии и логотип для удобства я использую реальные, на это получено разрешение автора. Прошу не расценивать это, как чей-либо пиар – ведь надо-же мне на чем-то показывать!

Откроем Фотошоп и создадим новый пустой документ. Размер зададим 760х75 пикселей, разрешение – 100 dpi. Это основа нашего баннера.

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

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

Теперь маленький фокус-покус. Выберем вкладку Filter — Sharpen — Sharpen. Заметили, как после применения этого фильтра изменилась фотография? Стала более, четкой, резкой насыщенной..

Ну вот, фон нашего баннера готов. Теперь нам нужно поместить на баннер логотип и название нашего магазина. В данный момент, логотип помещать особо некуда, тем более, если он у нас довольно длинный. Поэтому сместим фотографию слегка вправо. Этим мы убьем «двух зайцев» — освободим место для логотипа и скроем от глаз правую, темную и не очень красивую часть фотографии. Однако, одна проблема у нас все-таки появится — слева вылезает пустое место.

Скопируем часть полотенца, на котором лежит мыло и аккуратно закроем этим кусочком левую часть.

Ну вот. Теперь у нас есть место для размещения логотипа и названия магазина. Поместим логотип и название на наш баннер. Если Мы хотим перекрасить логотип, что-бы он больше подходил по цвету к баннеру, воспользуемся вкладкой Image — Adjustments — Hue/Saturation.

Логотип и название на месте. Однако, читаются они плоховато. Попросту, сливаются с фоном. Что-бы выделить название и логотип магазина, сделаем вокруг них котрастное сияние. Применим вкладку Layer — Layer Style — Outer Glow.

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

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

Затем перекрасим его в светлый цвет с помощью вкладки Image — Adjustments — Hue/Saturation , которой мы уже пользовались. Вот так:

Теперь применим к этому логотипу эффект Overlay, который находится в выпадающем меню над разверткой со слоями. Если результат будет слишком ярким, можно уменьшить прозрачность слоя. Она уменьшается ползунком Opacity рядом с этим эффектом.

Вот такой интересный эффект у нас получился. Что-то колдовское, руническое, едва обозначенное. 🙂

Осталось только добавить рамку к нашему баннеру и вот он!

Кстати, изменив только фотографию и цвет логотипа и рамки (на что уходит не более 5 минут) можно сделать себе по баннеру на каждый день недели и менять их ежедневно 🙂 Например вот так:

Ежели интересно, можно увидеть как этот баннер смотрится в реальном магазине. Ссылку не даю, магазин несложно найти по названию в поиске.

Как сделать крутой баннер для емейл рассылки

Хорошо разработанный баннер является основой вашей емейл рассылки. От него зависит, будет ли дальше адресат читать электронное письмо или закроет рассылку и безвозвратно отпишется от нее. Я советую вам больше сосредоточиться на дизайне баннера и попытаться выйти за рамки того, что делают ваши конкуренты.

В этой статье я хочу поделиться опытом, который в дальнейшем пригодится вам при создании баннеров для емейл-рассылки и научить вас делать свой первый баннер в программе Photoshop.

Где брать идеи для создания баннера?

У вас есть продукт или услуга, которую вы хотите показать людям в электронной рассылке. Несомненно этой работой должны заниматься маркетологи и дизайнеры. Но что делать, когда такой команды у вас нет?

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

Немаловажно использовать качественные изображения при создании баннера, лучше всего, когда фотографии для баннера сделаны вами. Если же таких нет, подходящие всегда можно найти на бесплатных фотостоках, их достаточно много:

Pngtree (огромная база бесплатных изображений и готовых шаблонов).

Freepik (немного меньше, чем Pngtree).

Pixabay (лучший фотосток, есть поиск и доступны разные размеры для скачивания).

IM Free (есть поиск, но архив не такой большой, как у Pixabay).

Pickupimage (в тройке лидеров среди стоков).

Creative Commons Search (это скорее не сток, а поисковик по стокам, но иногда очень здорово выручает).

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

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

Пошаговая инструкция по созданию баннера для емейл-рассылки интернет-магазина

Баннер первое что увидит получатель письма, поэтому он должен оставить только положительное впечатление, это сделает емейл-рассылку эффективнее. Потратьте на его разработку немного больше времени и результат проделанной работы сразу даст о себе знать.

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

А теперь самое интересное

Сейчас на примере покажу, как правильно делать баннер. Для этого вам нужен установленный Photoshop. Баннер я буду создавать для магазина, занимающегося продажей одежды и сумок. Я подобрал подходящую картинку с интернета, она достаточно яркая и хорошо подходит для баннера:

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

Открываем фотошоп и создаем документ, в котором будем работать.

Нужно учитывать то, что баннер нужен для емейл-рассылки, и максимально допустимая ширина изображения при работе с eSputnik — 600 пикселей.

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

Рабочий документ готов, ничего сложного, не так ли?

Если все сделано правильно, должен открыться документ с исходными параметрами по высоте и ширине.

Основные элементы интерфейса Photoshop, с которыми нам предстоит работать:

Рабочая область, в которой отображаются все графические элементы при создании баннера.

Панель “Слои” со структурой документа, в которой последовательно будут отображаться графические элементы.

Перетягиваем изображение в рабочую область:

В рабочем документе и на панели “Слои” появится изображение. Эти действия нужно подтвердить клавишей Enter или галочкой, я ее тоже отметил на скриншоте.

Пройдемся по инструментам, с которыми будем работать:

Инструмент “Перемещение” (с его помощью можно перемещать то, что находится в документе);

Более подробно со всеми инструментами вы можете ознакомиться на сайте Photoshop.

Работа с фоном картинки

Инструментом “Перемещение” двигаем изображение к краю рабочей области:

Фон, на котором находится девушка, мне нравится, но что делать, когда цвет фона не подходит к общему оформлению емейл-рассылки? Для этого нужен “ластик”, а точнее “волшебный ластик”. Выбрать его можно нажатием правой кнопки мыши по ластику.

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

Теперь, когда мы выбрали “Волшебный ластик”, жмем в любом месте изображения, в появившемся окне выбираем “ок”. Изображение готово чтобы работать “волшебным ластиком”.

Жмем по голубому фону, если вы все правильно сделали, фон должен удалиться.

Удаляем таким же способом оставшийся фон с изображения.

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

Цвет выбрать можно на панели инструментов.

Выберите необходимый цвет и приступайте к заливке основного фона.

Создаем текст и призыв к действию

Для добавления текста выбираем соответствующий инструмент:

После выбора инструмента “Шрифт” появится панель с настройками его параметров (тип шрифта, размер, дополнительные параметры).

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

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

Для этого, с помощью инструмента “прямоугольник”, рисуем кнопку и добавляем нужную надпись.

Если в дальнейшем нужно изменить размер кнопки, сделать это можно с помощью комбинации клавиш CTRL+t, изначально выделив слой с кнопкой на панели “Слои”. Потянув за нужный угол, можно растянуть кнопку по ширине и высоте. По завершению подтвердит действие “ок” или Enter.

Цвет кнопки можно изменить двойным щелчком мыши по слою с кнопкой.

Если текст не отображается, нужно на панели “Слои” выделить текстовый слой и переместить его выше слоя с кнопкой.

Чтобы расположить текст по центру кнопки, выделяем слой с текстом и кнопкой с помощью клавиши CTRL на панели “Слои”.

Включаем инструмент “Перемещение”, на появившейся панели центрируем текст относительно кнопки.

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

Выбираем слой с кнопкой, нажатием правой кнопкой мыши из выпадающего меню выбираем “Параметры наложения”

2. В появившемся окне включаем “тень”

3. Меняем значения:

непрозрачность в пределах 60-70%;

смещение — 10-20 пикс;

размер — 50-60 пикс.

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

Последние штрихи и баннер готов!

Давайте на панели инструментов выберем эллипс:

Нарисованный эллипс будет выходить за границы рабочей области, но его можно всегда отредактировать, выделив на панели слоев и нажав комбинацию клавиш CTRL+t.

Добавим небольшую тень, чтобы визуально получился эффект наложения эллипса.

Настройки тени выбираем такие :

Осталось только добавить логотип.

Теперь созданный баннер можно легко использовать в рассылках. Нужно только добавить его в шаблон письма, сделать это можно в нашем адаптивном редакторе. Письмо будет выглядеть так:

Поздравляю вас с полезным новым опытом! Надеюсь, что статья помогла вам в создании своего первого баннера, и ответила на вопросы, с которыми вы столкнулись в процессе, а приобретенные навыки работы в программе Photoshop помогут вам с новыми рассылками.

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

С помощью нашего редактора вы сможете:

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

работать с несколькими слоями, и это не вызовет у вас трудностей и дискомфорта;

использовать готовые элементы (меню, разделители, соц. сети), которые имеют ряд функциональных и визуальных настроек;

создать свой собственный баннер с помощью блока “Баннер”, когда под рукой нет Photoshop.

А еще, я подготовил для вас приятный бонус ?. По ссылке находятся файлы, необходимые для создания баннера.

В новых релизах мы подготовим для вас еще больше полезных функций!

Создаем аватар и баннер для своего магазина на Ярмарке Мастеров

Встречают по одежке

Провожают по уму

Уверена, что никто из мастеров и покупателей не будет спорить со старой истинной «Встречают по одежке». То, насколько качественно вы оформите магазин, непосредственно влияет на его популярность, доверие покупателя, и, в конечно результате, — на продажи.

Привет, меня зовут Ольга. Я занимаюсь продажей чехлов из дерева для смартфонов, а некоторое время назад вышла и на Ярмарку Мастеров. Вообще, оказалось, что Ярмарка Мастеров — это другой мир, тут все иначе, все по-другому, порой бьешься головой об стену, но не понимаешь: «Где же потерялся покупатель?»

Несмотря на всю самобытность Ярмарки Мастеров и магазинчиков в ней, основные законы рынка работают и тут: у вас должен быть качественный товар, и вы должны его красиво предложить покупателю. О товаре говорить сейчас не будем (ведь каждый из вас продает что-то свое, уникальное, интересное), а вот вопрос предложения обсудим.

«Встречают по одежке» — не забывайте об этом. И на Ярмарке Масеров у вас есть несколько возможностей для того, чтобы красиво «одеть» (оформить) вашу страничку:

  • Красивые фотографии.
  • Интересное описание товара и магазина.
  • Красивые аватар и баннер.

О первых двух пунктах мы поговорим с вами отдельно, а сегодня займемся созданием баннера и аватара.
У меня для вас сюрприз — я провела хорошую работу и подготовила очень удобный мокап (специальный шаблон) для Photoshop. Вы сможете творить и незамедлительно видеть результат, без необходимости загружать картинки на Ярмарку Мастеров.

Шаг 1. Скачиваем Photoshop

Для хорошей работы нужна хорошая программа. В первую очередь вам нужно скачать в Интернете Фотошоп и установить на свой компьютер.

Шаг 2. Скачиваем мокап

Как я говорила, у меня подготовлен очень удобный шаблон, в котором легко и быстро можно создать и примерять свои аватарку и баннер на своем магазинчике. В комментариях к мастер-классу я напишу, как его получить.

Шаг 3. Немножко теории

Как было сказано ранее — нас интересуют аватарка и баннер. На фото ниже я выделила их.

Аватарка имеет размеры 150х150 пикселей.

Баннер имеет размеры 760х75 пикселей.

На этом сложная теоретическая подготовка окончена. Перейдем к работе.

Шаг 4. Творим творчество!

Возможно, что у вас уже есть какая-то идея оформления, а возможно и нет. В любом случае, впереди очень интересный путь поиска и тестирования.

Всего есть два типа аватарок и баннеров.

Тип 1. Согласованный. Используется одна большая картинка на оба элемента

Аватар и баннер называются согласованными, когда они представляют собой единую картинку, просто специальным образом разрезанную. Благодаря этому создается очень интересный эффект. Чуть подробнее на фото ниже.

Тип 2. Независимый. Используются две независимые картинки

В данном случае аватарка и баннер независимы и содержат совершенно разные изображения.

Именно вам выбирать, как вы оформите вашу страничку. Я советую попробовать оба варианта, и не по одному разу!

А хорошая новость в том, что мокап, который вы скачали выше, позволит вам с легкостью реализовать ваши задумки, будь то согласованный или независимый тип!

Самое время перейти к работу в Photoshop. Дважды щелкните на скачанный ранее мокап, после чего он откроется перед вами.

Все, что вам нужно для работы, расположено в правой нижней панели: Панель слоев (см. рисунок ниже).

В этой панели расположены все слои, с которыми вам предстоит работать. Некоторые из слоев организованы в папки. Глазик слева от слоев и папок значит, что данный слой (или группа слоев) будут отображаться на картинке в рабочей области.

Попробуйте поотключать/повключать папки «Отдельные аватарка и баннер» и «Совместные аватарка и баннер» и посмотрите на результат.

Как вы наверное заметили — картинка меняется. Дело в том, что разные слови отвечают за решение разных вопросов (как это видно из их названия). Так, например, для того, чтобы создать согласованные баннер и аватарку, необходимо отключить папку «Отдельные аватарка и баннер» и заняться редактированием слоя «Открыть для редактирования» в папке «Совместные аватарка и баннер». Для того, чтобы создать независимые баннер и аватар, необходимо отключить папку «Совместные аватарка и баннер» и отдельно отредактировать слои «Аватарка» и «Баннер».

Даже если это звучит сложно — мы с вами попробуем сделать все вместе, после чего вы с легкостью будете делать свои варианты.

ВАЖНО! Сохраните резервную копию мокапа, потому что иногда мы делаем-делаем и ломаем. Вдруг нажмете куда-то не туда.

ВАЖНО 2! Слой «Макет Магазина» содержит все элементы магазинчика, которые отображаются на рисунке в рабочей области, но не относятся к аватарке и баннеру. Это относится в том числе к товарам, названию и так далее. Если вы хотите вставить элементы своего магазинчика, то вам придется открыть магазинчик в браузере и сфотографировать рабочий экран (не на телефон, конечно, а с помощью кнопки PrintScreen на клавиатуре), после чего открыть его в графическом редакторе, нарезать и вставить в наш мокап. Звучит жутко, а на самом деле — очень просто. И делается за 15-20 секунд.

Теперь приступим к созданию аватарки и баннера. Начнем с согласованного (как самого интересного) вида.

  1. Отключите (щелкните по глазику) папку «Отдельные аватарка и баннер».
  2. Дважды щелкните по миниатюре слоя «Открыть для редактирования». Щелкнуть нужно именно по маленькому изображению слева от текста.

Вы только что открыли смарт-объект, специально сделанный для редактирования согласованных аватарки и баннера. Перед вами открылась новая рабочая область.

Редактируя данный файл, вы будете видеть результат на главном файле, на котором выводится макет всего магазинчика.

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

Вы можете редактировать ваше изображение с включенным или отключенным слоев «Рамка». Делайте, как вам будет удобнее, это ни на что не влияет.

Теперь найдем красивый фон в интернете.

Сохраняете его на компьютер и перетаскиваете на открытый смарт-объект, прямо в рабочую область.

При необходимости измените размеры, потянув за уголки (для сохранения пропорции при этом зажмите клавишу Shift).

Теперь включите (если отключен) слой «Рамка» и переместите новый созданный слой сразу под слой «Рамка» (для этого просто перетяните).

ВАЖНО! Ваш новый слой может и будет иметь другое имя, отличное ото того, что отображается на картинке ниже.

Теперь в рабочей области можете спокойно двигать новый слой (главное, чтобы он был активным на панели слоев), изменять его размеры и добавлять необходимые элементы типа текста.

После того, как закончите редактирование данного смарт-объекта, вам необходимо:

  1. Сохранить его, выбрать пункт меню «Файл-Сохранить» (см. фото ниже)
  2. Вернуться к исходному файлу, нажав на его имя в верхней строке навигации (см. фото ниже).

Перед вами открылся ваш магазинчик, но только с новыми баннером и аватаркой! Красота! (см. фото ниже).

Вот так просто можно сделать и примерить аватарку и баннер.

Если вам требуется создать независимые баннер и аватарку, то, как говорилось ранее, отключайте папку «Совместные аватарка и баннер» и отдельно отредактируйте смарт-объекты «Аватарка» и «Баннер». Принцип их редактирования точно такой же, как и у рассмотренного выше смарт-объекта:

  1. Включаете отображение слоя (папки).
  2. Дважды щелкаете по миниатюре слоя (смарт-объекта).
  3. Редактируете необходимым образом. При этом у смарт-объектов «Аватарка» и «Баннер» нет слоя «Рамка», так как так он просто не нужен.
  4. Сохраняете сделанные изменения.
  5. Возвращаетесь к исходному файлу и видите изменения.

Шаг 5. Сохраняем аватарку и баннер

Вы сделали ваши аватарку и баннер. Теперь их нужно сохранить и загрузить на Ярмарку Мастеров. Делаем следующее:

  • Сохраняем файл с расширением JPG или JPEG. Для этого используем пункт меню «Файл-Сохранить как».
  • Нажимаем «Файл-Открыть» и открываем только что сохраненный файл.
  • У открывшегося файла в панели слоев должен быть только один слой. Если справа от него есть значок замка, то нажмите его, и он исчезнет.
  • Изменяем размер холста. Для этого выбираем пункт «Изображение» — «Размер холста» и ставим его 150 на 150 пикселей.
  • Ваша рабочая область сильно уменьшится! Теперь перемещая (именно перемещая, не изменяя его размеров) фоновое изображение подгоните его так, чтобы аватарка входила точно в рабочую область (см. рисунок ниже).
  • Сохраните файл, выбрав «Файл»-«Сохранить как», и дав ему имя «Аватарка.jpg».
  • Теперь снова измените размер холста на 760 на 75 пикселей.
  • Подгоните (перемещая, не изменяя его размеров) баннер точно под вашу рабочу область (см. рисунок ниже).
  • Сохраните, выбрав пункт «Файл»-«Сохранить как» и дав ему имя «Баннер.jpg».

Шаг 6. Устанавливаем аватарку и баннер на магазинчик

Для этого просто войдите на Ярмарку Мастеров, зайдите в раздел «Профиль» и нажмите кнопку «Изменить информацию». После этого вы увидите разделы для редактирования ваших аватарки и баннера.

На этом все! Я старались, надеюсь, что мои статья и мокап действительно принесут вам пользу! Жду комментариев, о чем еще написать или дописать в этой статье.

Всем добра. 🙂 И не забываем подписываться, впереди еще много интересного!

Оцените статью
Моё хобби - рукоделие!