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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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


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

Я выбрала новогоднюю картинку с елкой, блестками, снежинками.
Сверху в горизонтальной строке - разные менюшки. Можно там посмотреть и примерить эффекты на свое фото.
Интересны меню "Простые фильтры", "Эффекты", "Текстура", "Рамки".

Я применила "Простые фильтры. Сепия" - получила стильную обесцвеченную картинку, чтобы надпись на ней смотрелась бы ярче.

Чтобы сохранить картинку с эффектом, нажмите кнопку "Применить".

Теперь придумываем и делаем надпись во вкладке "Текст". 

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

Это и есть наша будущая надпись. Ее ловим мышкой и растягиваем до нужной величины. 

Справа работаем в всплывающем меню - подбираем цвет. 

Если все, что сделали, нравится, жмем кнопку "Сохранить" сверху. Сохраняем в компьютер. Программа предлагает из ipg перевести еще во что-то, соглашаемся, сохраняем!


Перед уходом из "Аватана" я зашла еще в меню "Текстуры". Добавила "Снег" и выбрала "Режим наложения. Экран". Результат: эффект "Сепия" съелся, картинка стала бело-голубой. 


Осталось обрезать картинку до размера, который примет "Ярмарка мастеров" = 760х75 пикселей. 
Открываем нашу  фотографию-баннер. С помощью правой кнопки мышки уходим в режим редактирования фото Microsoft Office Picture Manager. Чтобы много не писать, показываю скрин - на нем все переходы при нажатой правой клавише мышки. 
Открывается окно редактирования.


Нажимаем в верхнем горизонтальном меню "Изменить рисунки". Справа выпадет меню возможностей. Выбираем в нем - "Обрезка".
Дальше сжимаем сверху и снизу, сбоку нашу картинку, при этом следим за показаниями счетчика. Он тоже справа. Нужно добиться заветных 760х75.

Обрезка завершена. Сохраняем в два приема:
- сначала подтверждаем "ОК" - кнопка справа, около счетчика пикселей.
- потом в меню "Файл" (слева вверху) выбираем папку, куда именно сохранить "Сохранить как".

Справились? Идем в магазин на "Ярмарку мастеров"  в свой "Профиль". Находим там поле "Баннер - выберите файл" и загружаем только что созданный баннер.
Уфф!

23 комментария:

  1. Оксаночка, спасибо, вечером займусь и. У меня тоже будет банер с заветный ромашками. Спасибо ещё раз

    ОтветитьУдалить
    Ответы
    1. Насть, очень посмотреть охота! Позовешь?))

      Удалить
    2. уф, добралась, сделала, пройдет перемодерацию - позову смотреть ;)

      Удалить
    3. Анастасия, главное, что он наконец-то есть! Поздравляю)))

      Удалить
  2. Оксанчик, спасибо, хотя я научилась в своей программе, но спасибо за проделанную работу. Мне нравится АВАТАН, я оттуда снежинки и снежок беру, но , блин, внизу вечно какая нибудь порнуха вылазит.

    ОтветитьУдалить
    Ответы
    1. Я, Снежан, помню твои эксперименты с фонами-эффектами, ты в каком-то посту показывала))

      Удалить
  3. Спасибо, Оксана, за подсказки. Хочется сделать себе новый баннер в блоге. Попробую.

    ОтветитьУдалить
    Ответы
    1. Эльвира!!! Спасибо за подсказки: я-то баннер не додумалась для блога сделать!!!!

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

    ОтветитьУдалить
    Ответы
    1. Наташ, скорей бы! Там еще в коллажах можно пофантазировать, например, слепить из нескольких фоток что-нибудь интересное))

      Удалить
  5. Мило получается) И каждый сможет украсить свой магазин по сезону :)

    ОтветитьУдалить
  6. Оксана, спасибо за МК.
    Теперь бы мне вопользоваться информацией и сделать баннер в блоге. Это реально с помощью Вашего МК?

    ОтветитьУдалить
    Ответы
    1. Конечно, делаешь, обрезаешь, вставляешь в блог через страницу "Дизайн".

      Удалить
  7. интересная программка, надо посмотреть...

    ОтветитьУдалить
  8. Трудящиеся радуются и апплодируют))) Спасибо, Оксана! будем экспериментировать...

    ОтветитьУдалить
    Ответы
    1. Кто бы только знал, как меня пугают всякие компьютерные примочки... Благодаря таким щедростям, как этот пост, потихоньку осваиваю все эти электронные премудрости...

      Удалить
  9. Этот комментарий был удален автором.

    ОтветитьУдалить
  10. Я не знала про эту программку, спасибо большущее, Оксана, будем пробовать!

    ОтветитьУдалить
    Ответы
    1. Дарья, там много интересного. От раза к разу все открываю что-нибудь полезное)

      Удалить
  11. Спасибо огромное! Всё получилась ,можете посмотреть!

    ОтветитьУдалить
  12. Очень интересно!!!! Спасибо!!!!

    ОтветитьУдалить

Тэги, допустимые в комментариях