Как изменить баннер на ярмарке мастеров

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

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

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

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

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

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

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

О первых двух пунктах мы поговорим с вами отдельно, а сегодня займемся созданием баннера и аватара.
У меня для вас сюрприз — я провела хорошую работу и подготовила очень удобный мокап (специальный шаблон) для 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. Устанавливаем аватарку и баннер на магазинчик

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

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

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

Решила я сделать себе баннер на Ярмарке Мастеров. А тут еще и повод подвернулся- конкурс образцовых магазинов.
Думаю, сделаю ненавязчивый, легкий, на белом фоне, надпись и фотография моей любимой росписи.

Сделала. загрузила в профиль на ЯМ. Появилась обнадеживающая надпись что-то вроде «Ваш баннер будет размещен в магазине, когда он пройдет премодерацию» думаю, мне бояться нечего ссылок на посторонние сайты я туда не ставила.
Тут приходит письмо от администрации «Ваш баннер не прошел модерацию» с таким содержанием: Ваш персональный баннер отклонен. Причина: Белый фон баннера будет сливаться с белым фоном сайта, и изображения будут смотреться как разрозненные объекты, подвешенные в воздухе. Такой баннер будет нарушать эстетическую привлекательность страницы и может негативно сказаться на покупательской активности пользователей. Вы можете либо увеличить изображение, чтобы оно занимало практически всю площадь баннера, либо заменить белый фон любым другим цветом.Рекомендуем внимательно поработать над ним. Помните, что неудачный баннер может даже оттолкнуть потенциальных покупателей.
Вот думаю, дожилась, мне, хозяину магазина (еще и графику-дизайнеру с высшим образованием) указывают какой вешать баннер. Ладно, поменяю цвет фона, хотя так не хотелось. Поискала в закромах узорчики, вставила, разместила.

Жду, любуюсь обнадеживающей надписью. Письмо от администрации с «радостной» новостью, что мой баннер опять им не угодил. Формулировка такая : Ваш персональный баннер отклонен. Причина: Изображение меньше размера баннера. Пожалуйста, увеличьте изображение и снова добавьте баннер.
Вот жеж %@№№№% %#№ пронесся непечатный текст в моей голове. Я должна тратить свой небольшой кусочек свободного времени, когда старший в школе, младшее дите спит, отведенное под творчество, на угождение администрации ЯМ. Злая уже, решила таки довести начатое дело до конца, еле нашла более-менее подходящую фотографию для этого неудобного узкого формата, отправила.

Уже нервничаю, потому как на баннере работа, не выставленная в магазине. Они, видимо, решили сжалиться и не испытывать больше мое терпение — последний вариант теперь висит в магазинчике.
Надеюсь, мой опыт пригодится тем, кто будет создавать себе баннер.
И, собственно, ради чего вся затея — конкурс «Образцовый магазин». Проголосуйте, пожалуйста, за мой магазинчик . Для этого нужно нажать на надпись под злополучным баннером «Нравится магазин? Голосуйте за него!» И в появившемся окошке нажать «Да»

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

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

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

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

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

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

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

О первых двух пунктах мы поговорим с вами отдельно, а сегодня займемся созданием баннера и аватара.
У меня для вас сюрприз — я провела хорошую работу и подготовила очень удобный мокап (специальный шаблон) для 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. Устанавливаем аватарку и баннер на магазинчик

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

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

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