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

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

Материалы: вам понадобится персональный компьютер, графический редактор Adobe Photoshop и изображение в формате .jpg.

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

1. Самый сложный этап — понять что мы хотим и как мы это видим.

2. Необходимый материал для баннера — это может быть фотография ваших работ или любое графическое изображение в формате .jpg или .jpeg , которое подчеркнет ваш стиль и привлечет покупателей. Требования к изображению: оно должно быть настолько качественным, чтоб при увеличении на весь экран вашего компьютера, оно не расплывалось, просматривались все его детали. Сознательно не называю никаких цифр, ни в пикселях, ни в мегабайтах…т.к. нет жестких ограничений.

3. Загружаем выбранное изображение в Adobe Photoshop. Самый простой способ: делаем правый клик по иконке с изображением, выбираем из списка – «открыть с помощью» и из предложенного списка программ выбираем Adobe Photoshop.

4. Мое изображение имеет размер 1280х1024 пикселя, а по требованиям к персональному баннеру, оно должно быть 760х75 пикселей. Из этих цифр видно, что пропорции исходного и нужного нам изображения довольно сильно отличаются, поэтому его нужно кадрировать — обрезать до нужной нам величины. На панели инструментов выбираем инструмент «Рамка кадрирования», нажимаем дополнительно букву «С». В верхней части экрана можно теперь вписать размеры: ширина-«760 пк», высота- «75 пк», но прежде чем вписать значения, нужно нажать на кнопку «очистить».

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

Можно растянуть рамочку на любом понравившемся участке и нажать Enter.

6.Затем в меню «Изображение» выбираем «размер изображения»

Вписываем ширину(760) и высоту (75), проверьте, стоит ли птичка рядом с параметром

«Сохранить пропорции», если стоит, то нажимаем на кнопку «Да».

7.С помощью инструмента «Масштаб», увеличиваем изображение так, чтоб с ним было удобно работать.

8.Теперь изображение нужно «Сохранить для Web и устройств».

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

В специальном окне мы видим два изображения: исходное-167 К, и измененное для Web-30,29 К. Выбираем из выпадающего меню формат .jpeg ,сохраняем.

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

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

Кликаем в нужном месте нашего изображения и пишем любой текст.

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

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

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

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

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

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

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

Откроем Фотошоп и создадим новый пустой документ. Размер зададим 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 минут) можно сделать себе по баннеру на каждый день недели и менять их ежедневно 🙂 Например вот так:

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

Бобровая хатка

Здесь мои работы для Вас: кожаные сумки, персональные ежедневники, лётные шлемы. С тканями я тоже работаю. Мой блог про продажи ручной работы в Интернете. Если темы близки, подписывайтесь на блог или пишите на электронку oksmoroz@yandex.ru

Страницы

  • Главная
  • Мои статьи о продажах
  • ПроДвижение блога
  • Ручная работа на заказ
  • Мастер-классы
  • Вопросы/ответы

бобры осень

Подпишись — интересно!

среда, 18 декабря 2022 г.

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

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

ДЛЯ ЧЕГО НУЖЕН баннер для магазина на Ярмарке мастеров?

Про очевидную пользу все знают:
— чтобы магазин был красивым,
— чтобы магазин стал запоминающимся,
— чтобы создавал настроение.

Вывод: магазин с баннером приобретает дополнительный инструмент эмоционального воздействия на посетителя. Вопрос спорный, проверьте сами)

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

Благодаря своему пустяковому баннеру я вошла в ТОП-10 конкурса «Образцовый магазин — 2022»! Сейчас вижу: конверсия магазина выросла в разы. Это гуд.

Был такой виртуальный подарок — коллекция с работами победителей. Сохранила на память — приятно быть в таком талантливом окружении. Особенно, когда со многими знакома)

С мотивирующей частью закончено, идем дальше!

КАК СДЕЛАТЬ БАННЕР?

Открываем в Сети бесплатный фоторедактор «Аватан». Эту программу не нужно устанавливать на комп, она работает он-лайн. Отредактированные фотографии, составленные фотоколлажи можно сохранять к себе в обычном порядке.

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

По последнему пункту объясню, что имею ввиду:

пока шел конкурс баннеров, мне прислали в подарок баннер. Я очень благодарна автору: Лена рисовала специально для меня. Это здорово.
Мы обсудили название моего магазина («Бобровая хатка». почему так?) И через несколько часов баннер ко мне прибыл. С бобром, жизнерадостным и юным.
Скрин мелковат, но рассмотреть можно.
Такой веселый (невинтажный) бобер в мое видение витрины магазина не вписался).

Продолжаем. В Аватане открываем фото с компьютера или картинку из Сети, предварительно сохраненную на комп.