Мастер-класс Создаем простой баннер для вашего магазина

Создание информативного баннера

Здравствуйте, дорогие мастерицы и мастера, а также покупатели и все, кто интересуется обработкой фотографий в редакторе PHOTOSHOP.

Предлагаю Вашему вниманию свой очередной мастер класс, который поможет Вам создать ИНФОРМАТИВНЫЙ баннер, тоесть такой, который отразит Ваше кредо, выразит основную идею Вашего магазина, баннер, который содержит 90 процентов текста.

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

Прежде всего, если у Вас еще нет баннера, предлагаю обдумать ОСНОВНУЮ МЫСЛЬ. Если хотите юмора, можете воспользоваться сервисом генератор слоганов, например Ваш магазин будет называться «ЗОЛОТЫЕ НОЖНИЦЫ» или «ЗОЛОТЫЕ РУКИ» или просто «МАГАЗИН МАСТЕРА АННЫ».

И, достижения:

Болит голова? День не задался? Магазин золотые ножницы — именно то, что тебе нужно!
Магазин ЗОЛОТЫЕ НОЖНИЦЫ удовлетворит все твои желания.
Магазин ЗОЛОТЫЕ НОЖНИЦЫ и мир станет проще.
Магазин золотые ножницы — почувствуй нашу любовь!
Магазин ЗОЛОТЫЕ НОЖНИЦЫ — выбор президентов.
С любимым хорошо, а с магазин золотые ножницы ещё лучше!

Теперь приступим непосредственно к созданию баннера.

Познакомимся с его свойствами.

Баннер имеет размеры: 760 x75. Смотрите фото.

Итак, сохраняем любой баннер на рабочем столе и открываем его в редакторе.

Выделив все содержание баннера инструментом ПРЯМОУГОЛЬНАЯ ОБЛАСТЬ удаляем содержимое, для того чтобы оставить белый фон. Либо создаем новый графический файл таких размеров самостоятельно.

У вас появился чистый баннер нужного размера.

Теперь будем работать с инструментом ТЕКСТ. Выбрав его,пробегитесь глазами по всем его опциям. Вам понадобиться и размер шрифта, и тип шрифта, и цвет и некоторые другие настройки.

Как я уже говорила, наш баннер будет информативным, поэтому на нем мы расположим несколько надписей — две или даже три, а еще постараемся уместить небольшое украшение в виде фигуры.
Убедитесь, что у Вас открыто окно СЛОИ в редакторе. Если нет, то откройте его: ОКНО — СЛОИ.
Выделите инструментом ТЕКСТ ту область баннера, на которой мы впишем наш слоган.

Выберете подходящий размер шрифта.

Цвет шрифта выбирайте исходя из преобладающих цветовых оттенков сайта ЯРМАРКА МАСТЕРОВ, либо ВАШЕГО МАГАЗИНА. Хотя на вкус и цвет. Для того, чтобы подобрать подходящий цвет, сделайте скриншот страницы Вашего магазина, нажав на клавиатуре клавишу PrtS, затем в редакторе PHOTOSHOP нажмите ФАЙЛ — СОЗДАТЬ и РЕДАКТИРОВАНИЕ — ВСТАВИТЬ. У Вас кроме баннера появится скриншот Вашего магазина, где Вы и сможете подобрать подходящие цвета для баннера, выбрав инструмент кисть и кликая на разных цветовых оттенках при этом удерживая клавишу ALT. Слева на панели инструментов, в инструменте ОСНОВНОЙ ЦВЕТ Вы будете видеть Ваш выбор.

Воспользуйтесь таблицей WEB цветов в случае необходимости.

Если вас не устраивает размер текста, уменьшайте или увеличивайте его. Также изменяте гарнитуру.

Также можно просто использвать инструмент ТРАНСФОРМИРОВАТЬ, нажав комбинацию клавиш CTRL +T и растянуть Вашу надпись так, чтобы она поместилась на весь баннер.

Если вас все устраивает, оставьте такой вариант, однако я предлагаю воспользоваться не только цветом, а еще поэкспериментировать со стилями. (ОКНО-СТИЛИ — откройте эту вкладку в редакторе).

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

Кликните на понравившемся стиле и ваша надпись измениться. Экспериментируйте!

Снова перейдя в инструмент ТЕКСТ, добавьте еще одну надпись и затем еще одну.

Расположите их в разных местах баннера. Поменяйте местами, переместите вверх вниз, попробуйте изменить размер и шрифт.

На нижних скриншотах появились фигурки ввиде рук (сердечки, цветочки и прочее). Как добавить их я расскажу ниже.

Я разместила фигурки рук справа и слева. Для перемещения объектов и текста перейдите на самый первый инструмент в панели инструментов ПЕРЕМЕЩЕНИЕ.

Убрали надпись «нет ничего проще».

Справа, в окне СЛОИ вы видите ВСЕ ОБЪЕКТЫ, которые Вы создали. Кликните на объект и изменяйте его, перемещайте, удаляйте, делайте с ним что хотите, но предварительно его нужно выбрать в слоях.

Если надпись Вам не нужна, вы можете удалить ее просто перетащив слой в корзину РЕДАКТОРА или нажав кнопку DELITE на клавиатуре.

Приступим к украшению. На картинке показан инструмент ПРОИЗВОЛЬНАЯ ФИГУРА.

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

Для того, чтобы подогнать фигуру используйте ОПЦИЮ ТРАНСФОРМИРОВАНИЯ ИЗОБРАЖЕНИЯ. Вызвать ее можно клавишами CTRL +T, меняте форму фигуры, вращайте ее вокруг своей оси, пока Вам не понравиться результат. Далее нажмите кнопку ENTER. Если фигура Вам не подошла, просто нажмите кнопку DELITE и она удалиться, либо перетащите ее на значок корзины в редакторе.
К фигуре таже примените СТИЛИ.

По желанию Вы можете изменить ЦВЕТ ФОНА баннеру.

Выберите слой ФОН и создайте его ДУБЛИКАТ, нажав комбинацию клавиш CTRL +J, либо СЛОИ — СОЗДАТЬ ДУБЛИКАТ СЛОЯ. И воспоьзуйтесь инструментом ЗАЛИВКА.

Или снова поэксперементируйте со стилями. Находясь на ДУБЛИКАТЕ СЛОЯ, кликните на понравившемся Вам СТИЛЕ.

В конце Ваших услилей, не забудьте СВЕСТИ СЛОИ! И сохраните полученный баннер, либо, если Вы планируете продолжать работать с проектом сохраните вашу работу в формате .psd и позже можно будет продолжить коррекцию баннера.

Примеры баннеров:

С уважением, Ирина.

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

Основная цель мастер класса — показать новичкам принципы работы в редакторе photoshop с целью САМОСТОЯТЕЛЬНОГО и БЕСПЛАТНОГО создания простого баннера.

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

Материалы: вам понадобится персональный компьютер, графический редактор 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.Делаем надпись на баннере. Для этого выбираем инструмент «Текст» на панели инструментов. В верхней части экрана можно выбрать шрифт из выпадающего меню и задать высоту текста.

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

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

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

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

Страницы

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

бобры осень

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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