Мастер-класс Как сделать баннер для магазина на Ярмарке Мастеров. Подробная инструкция

Как сделать баннер для магазина на Ярмарке Мастеров. Подробная инструкция

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

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

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

1. Нажимаем «Edit», потом «Preferences», затем «General» (либо сразу «Interface»). Также можно нажать комбинацию горячих клавиш Ctrl+K.

2. Далее где колонка «Text», в поле «UI Language» выбираем «Russian» и нажимаем «OK».

В этом же меню «Interface» можно поменять цвет темы, размер шрифта темы и тд.

3. Далее, когда вы закрыли меню, если язык не изменился, то просто закройте фотошоп и откройте заново.

Теперь приступим к созданию баннера, который по размеру должен быть 760 на 75 пикселей.

Создаем новый файл, нажимая вкладку «Файл», затем «Создать» (либо же комбинацию клавиш Ctrl+N), открывается меню, где в поле «ширина» вписываем 760, а в поле «высота» 75 и нажимаем «ОК».

Если новый файл у вас открылся таким образом:

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

Следующий шаг — это нахождение интересных картинок, из которых вы хотите сделать оформление своего магазина. Когда вы найдете картинку, допустим в поисковике, нажмите по ней правой кнопкой мыши и выберите «Копировать изображение». Затем перейдите в фотошоп и создайте новый файл, ничего не меняя в открывшемся меню. Потом комбинацией клавиш Ctrl+Shift+V вставьте картинку в созданный файл.

Теперь выделим картинку с помощью «Прямоугольная область».

Нажимаем Ctrl+Shift+C, затем переходим во вкладку с созданной заготовкой для баннера и нажимаем Ctrl+Shift+V, чтобы вставить туда фон, который вы выбрали. Обычно картинка вставляется посередине, щелкните по краю «обводки» картинки, чтобы она стала зафиксированной, далее перетаскивайте картинку, изменяйте размер как вам захочется, располагая ее на заготовке для баннера. Если картинка маленькая и вы не хотите ее увеличивать, тем самым растягивая и искажая рисунок, то просто вставьте картинку несколько раз и передвигайте две картинки, совмещая их.

Чтобы избавиться от зафиксированной «обводки», нажмите «Enter».

Теперь перейдем к самому интересному — слоям. Чтобы открыть вкладку со слоями, нажмите в левом меню эту кнопку:

Мы видим, что наш фон для баннера состоит из трех картинок: 1-3 слой. Щелкните два раза по слою, который называется «Фон» и нажмите «Enter», теперь у нас все слои активные.

Теперь щелкните по 3 слою правой кнопкой мыши и нажмите «Объединить с предыдущим», далее объедините все слои, кроме бывшего слоя «Фон», нынешнего «Слой 0». Если ваш фон вас устраивает, то вы можете пропустить следующие шаги, но я сейчас покажу как изменить немного цвета слоя.

Выберете слой с фоном, далее нажмите «Изображение», нам доступны здесь три варианта редактирования изображения: «Автотон», «Автоконтраст», «Автоматическая цветовая коррекция», нажмите каждый из них и посмотрите как меняется ваша картинка, если вам понравилось — отлично, если нет — просто отмените свои действия во вкладке «Редактирование», «Шаг назад» (либо комбинацией клавиш Alt+Ctrl+Z).

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

«Цветовой баланс» уровни «-40», «-65», «+14».

«Цветовой тон/насыщенность» уровень «Цветовой тон» — «0», уровень «Насыщенность» — «-5», уровень «Яркость» — «+3».

В итоге получилось следующее:

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

В этом случае мы сталкиваемся с тем, что на картинке присутствует ненужный черный фон. Для начала, удалим слой «Фон» во вкладке «Слои» кнопкой «Del». Теперь мы можем использовать инструмент «Волшебная палочка», где щелкаем по черному фону и удаляем кнопкой «Del», пока весь черный фон не будет удален. Чтобы удалить более мелкие части, можно воспользоваться инструментом «Ластик», предварительно увеличив картинку, зажав кнопку «Alt» и крутя колесико на мышке. Размер ластика можно увеличить/уменьшить наверху, либо нажав правой кнопкой мыши по картинке, где откроется такое же меню, в котором можно выбрать форму ластика и его размер, а также жесткость. Таким же главным атрибутом ластика является интенсивность, либо непрозрачность, которую можно поменять также наверху, рядом с размером кисти.

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

Когда вы уменьшаете/увеличиваете картинку, зажмите «Shift», чтобы размеры изменялись равномерно.

Когда вы выберете как будет находиться ваша картинка, то если приблизить будут видны плохо обработанные края, чтобы убрать это, можно воспользоваться инструментом «Размытие», предварительно поставив интенсивность не более «30%», чтобы сглаживание выполнялось мягко.

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

Если у вас есть вот такие дыры в картинке, то воспользуйтесь инструментом «Восстанавливающая кисть», зажав «Alt» нажмите рядом с дырой и потом заново нарисуйте пропущенный кусок.

В итоге получаем вот это:

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

Теперь можем сделать фильтр. Создадим новый слой.

Затем нажмем инструмент «Кисть», поставим ей размер побольше, а цвет выберем такой, какой «фильтр» нам нужен, нажимая левой кнопкой мыши на квадратик с цветом. Я выберу розовый цвет.

Теперь проведем кистью по всему слою, вот так:

Затем поставим непрозрачность слоя, такую, чтобы весь закрашенный фон — фильтр был еле виден, я поставила «20%». Получился такой баннер:

Осталось только добавить название магазина. Выберем инструмент «Горизонтальный текст».

И щелкнем на месте, где хотим расположить текст. Выберем цвет текста, шрифт, размер текста и другие параметры, вверху меню.

Получается вот так:

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

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

Как сделать баннер для своего магазина на «Ярмарке Мастеров»

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

С каждым заходом на страницы коллег начала замечать, что у многих мастеров нет баннера. Как же это так? Удивлялась я и попыталась узнать причину отсутствия чудо баннера у знакомых с « Ярмарки Мастеров». Мне ответили, что не знают, как их делать. И тут в моей голове родилась идея – рассказать об этом всем мастерам.

Для начала расскажу вам, что такое баннер и для чего он нужен на «Ярмарке Мастеров».

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

В итоге у вас должно получиться вот так:

Для удобства чтения, а именно увеличения текста либо картинок зажмите на клавиатуре клавишу Ctrl (не отпускайте) и одновременно крутите колесико мыши!

Работа в фотошопе:

1) Скачать фотошоп (у кого нет).

2) Ищем фон в интернете и скачиваем его.

3) Открываем программу фотошоп.

4) Затем нажимаем на вкладку в верхней панели «Файл» – «Открыть как смарт-объект».

Затем ищем нужный файл и нажимаем кнопку «Открыть»

5) На панели инструментов выбираем инструмент «Рамка» и прописываем нужные нам параметры (760х75 px), как это сделано на рисунке – это размер нужных нам пропорций изображения либо фона для будущего баннера.

6) Далее нажимаем 2 раза «ENTER», таким образом мы отрезаем ненужный нам фон.

7) Заходим во вкладку на верхней панели «Изображение» — «Размер изображения» и прописываем в сплывающем окне нужные нам параметры:

8) Далее всплывает окошко, в котором мы прописываем размер баннера. В самой верхней ячейке вводим (760х75 рх) и ставим разрешение (150 pd), нажимаем «ОК».

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

10) Затем мы открываем новый файл с выбранным вами изображением (в данном случае с узором) в формате PNG.

«Файл» — «Открыть как смарт объект»

Перед нами открывается окошко с нужным изображением (узором в png формате), рядом с нашим фоном.

Нажав курсор (стрелочку в панели инструментов), берем изображение и перетаскиваем его на основной фон.

11) Когда мы перетащили объект в формате PNG на основной фон, мы видим, что изображение (большое/маленькое), в данном случае большое.

Для того чтобы задать необходимые размеры изображению, нам нужно зайти во вкладку верхней панели «Редактирование» — «Трансформирование» — «Масштабирование», зажав клавишу «SHIFT», пропорционально уменьшим изображение.

И у нас получается вот так:

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

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

12) Далее переходим во вкладку верхней панели и заходим в «Редактироание» — «Трансформирование» — «Отобразить по горизонтали». Таким образом мы отображаем нужное нам изображение.

13) Теперь самое важное – это текст. Чтобы создать текст нам понадобиться инструмент «Горизонтальный текст». Он обозначен буквой — «Т» и находится на панели инструмента полевую руку от вас. Но для начала задайте цвет вашему тексту (нажмите на панели инструментов «Палитра»), выплывет окно с параметрами , там вы выбираете нужный цвет для будущего текста, нажимаете — «ОК ».

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

14) Теперь осталось сохранить наше изображение. Заходим во вкладку на верхней панели с названием «Файл» — «Сохранить как».

В сплывающем окне указываем формат нашего готового баннера, ставим JPG и нажимаем «ОК».

15) Наш баннер готов и теперь нам нужно его разместить на странице магазина. Для этого зайдем в свой профиль, затем нажмем на кнопочку «Изменить информацию», затем в пункте «Баннер» загружаем изображение и сохраняем (изменение настроек).

Рис. 1

Рис. 2

Ура! Мы сделали это!

Поделись со своими друзьями полезной информацией и скинь ссылку на мой блог другу 🙂

Ну прям все для таких как я)))) Спасибо, Оксана!

Ого. Какой день! С Днем Рождения, Оксана. Здоровья, счастья, любви.

присоединяюсь к поздравлениям =)

часть «скачиваем фотошоп» напомнила: «как нарисовать сову» -сначаала рисуем два круга, это глаза, а потом дорисовываем вокруг сову. видите как просто!

но эт шутка, не обижайтесь =) по теме все хорошо расписано =)

Вы правы, для человека несведующего — это не так просто, как кажется 🙂

К тому же фотошоп — платная программа. Бесплатный вариант (демо) только на 30 дней (мы же законопослушные граждане ).

Оксана, с Днем Варенья.

Миллион спасибо Вам в подарок . (За ликбез по фотошопу) И доброго здоровья и творческих успехов на долгие годы.

Оксана, с Днем рождения. Статья отличная, забираю в избранное и постараюсь сделать себе баннер. Спасибо.

Обязательно поделитесь тем, что получилось)

Большое спасибо! Кажется, это первая публикация на ЯМ, посвященная баннерам.

С Днем рождения! Всего Вам самого-самого! И спасибо за МК!

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

Присоединяюсь к поздравлениям!

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

Спасибо за такой понятный и нужный мастер-класс!

Не совсем всё и просто )

С Днём Рождения ))))

С днем рождения! Прекрасный мастер-класс.

Оксана, с днем рождения!

Спасибо за такой полезный МК.

Спасибо большое, очень нужная статья. С днём рождения.

С Днем Рождения! Счастья и добра! Удачи. Спасибо за мастер — класс! Пока у меня нет банера, а надо бы сделать.

Спасибо, Оксана, с Днем Рождения! Процветания Вам на Ярмарке и новых идей! Какой же хороший подарок Вы сделали нам в свой праздник!

С Днем рождения. Спасибо за МК.

Большое Вам спасибо, Оксана! Очень нужная публикация! От всей души поздравляю Вас с днём рождения, желаю Вам счастья, радости, любви и творческих успехов.

Ехуу, с днем варения! Спасибо за МК!

Оксана, с Днем Рождения! Спасибо за публикацию, очень пригодится!

С Днем рождения. И , огромное Спасибо за МК.

а мне и без баннера прекрасно живется)главное есть фото Главного Рукодельника-лично мне и моим клиентам этого хватает:)если это не криминал и не принципиально-я ставить его не буду)

С днем рождения. Большое спасибо за полезную информацию.

Спасибо! Будем учиться.

Спасибо огромное! Думаю, что многие будут Вам признательны за такой подарок!

С Днем рождения!!

Спасибо за МК, Оксана! И с Днем рождения.

Спасибо огоромное! Это хорошо, когда мысленные желания воплощаются. Надо будет сделать себе тоже банер . И с Днем Рождением.

Сколько всего интересного! Фотошоп, конечно, целая вселенная и изучать его можно наверное всю жизнь, но это очень увлекательно «открывать тайны вселенной» !

Спасибо. День Рождения у Вас, а подарок всем нам!

С днем рождения. Всех благ и творческих успехов! Спасибо за прекрасный МК. Взяла в избранное. А этот МК можно применить для постановки фона для готовых изделий в магазине? Видела в некоторых магазинах красиво оформленные фоны с изделиями. Такой МК возможен?

Спасибо за идею, обязательно этим поделюсь в своем следующем МК)

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

Эта статья специально как будто для меня,а то очень боюсь интернет пространства.Все время нахожу для себя отговорки ,что для интернет магазина нужно много времени и т.д.,типа в реале продаются и хорошо.(А сейчас лето . заказов мало, так что еще раз спасибо за обучение.)

Очень рада, что мой МК понравился и принес вам пользу, интересно увидеть , что у Вас получилось в итоге)

Пожалуйста) Учиться чему-то новому — это успех будущего)

С Днем Рождения, Оксана.

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

С днем рождения.

Ха, 158 комментов и 228- в избранное!! Это здорово.

Спасибо огромное. С днем Рождения, Оксана.

Спасибо! проголосовала и в избранное добавила

Спасибо за столь подробную и полезную статью!)

С днем Рождения, Оксана!

Процветания и Удачи в творчестве!

Оксана, спасибо за МК)))
С Днем Рождения.

На торрентах, где ж еще можно бесплатно найти платную программу. Вбиваете в поисковик «adobe photoshop скачать торрент» и ищете.

А триал (бесплатную версию на 30 дней) можно скачать на официальном сайте.

Отличный МК, спасибо!

Спасибо, Оксана! Очень дельная и полезная публикация, С Днём Рождения Вас! Странно только что в избранном статья у 322человек, а понравилось только 241.

Спасибо от чайников!

Спасибочки за статью Оксана! Очень-очень нужная информация!

Спасибо, все понятно, я думаю после этого МК у всех будет свой баннер.

С Днем рождения! Удачи и веры в себя!

Спасибо и хотелось бы увидеть как получилось это у Вас)

Спасибо большое! Прямо то, что нужно) только вчера опять думала как бы мне его сделать)))) и присоединяюсь ко всем поздравлениям! Всего самого доброго!

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

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

Уважаемые мастера! Ссылки в блог с других сайтов скидывать я так понимаю запрещено! Пробуйте скачивать фотошоп «Пробной версии»

Коллеги, Фотошоп — программа лицензионная и недешевая. А для скачивания нелегальных версий ищите программистов знакомых. Успехов!

А Оксане — спасибо большое! Хотя и работаю в Photoshop, но надеюсь, это меня «подстегнет» для создания баннера. Хотя сначала должен макет в голове созреть)))

Извините, конечно, но программисты занимаются совершенно другим.

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

Замечание не ко мне, скорее всего)))). Простите. Лично я торрентом не пользуюсь — берегу свой комп, хоть и антивирусник профессиональный стоит. Насчет программистов. я не знаю, как их назвать — просто людей, умеющих «скачивать ключи» и т.д., и т.п. Не все люди — продвинутые в компьютерах. И к чему такая скрытая агрессия?!

Попробуйте скачать Пробную версию, она идет бесплатно на 30 дней

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

А ребят, чья работа — заниматься всякой подобной мелочевкой, типа установки программ или системы, чистки от вирусов, и т.д. и т.п., обычно зовут эникеями или эникейщиками. Пошло от «press any key» — кое-где встречающихся требований нажать любую клавишу, чтобы загрузка/установка пошла дальше. Но на клавиатуре же нет такой клавиши, а-а-а, что жать, паника-паника! Вот и звали подобных людей.
Программисты же занимаются — не поверите! — программированием. Программист создает программу (хоть тот же Фотошоп), эникей ее помогает ставить.
Нередко, кстати, называют «компьютерщиками». Что временами различных спецов раздражает (ибо у каждой профессии есть свое название, системный администратор, программист и веб-дизайнер занимаются совершенно разными вещами), но хотя бы ближе к истине. Лучше, чем звать программистами.

Чтобы не бояться за комп, достаточно пользоваться надежными сайтами — есть несколько довольно крупных, их обычно вполне достаточно. Читать комментарии к раздачам еще можно.
А вообще, ни разу на торрентах не словила вирус. В отличие, как бы парадоксально это ни звучало, от поиска редких учебников. Стоит бесплатный Аваст, проблем — ноль.
Единственное, антивиры нередко могут воспринимать кейгены (генераторы ключей) как вирусы. Фактически вреда для компьютера они не несут — впрочем, после установки и введения ключа, если все нормально работает, их обычно можно и стереть, если беспокоят.

Да что же Вам не успокоиться?! Вы мне это все рассказываете? Я все знаю. Или наша питерская погода так влияет?! Ну не в тему дискуссия.

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

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

Как показывает жизнь, каждый, кто работает с людьми, встречается с одним и тем же типом из серии, описанный вами в крайнем абзаце. Если говорить о дизайне/верстке, то есть еще вариант — «Вы не можете увеличить фотографию? это же просто — добавьте пикселей, есть специальная программа»

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

А от чего Вы бережете комп, не пользуясь торрентами?)

Есть некоторые моменты в установке/использовании пиратских программ, которые неопытного пользователя могут «подвести под монастырь».

Поэтому лучше посоветоваться со специалистом, как говорится 🙂

Уважаемые мастера, как узнать прошла ли моя публикация модерацию на участие в конкурсе?

С праздником Оксана!

Мастер-класс действительно отличный,когда-нибудь пригодится,спасибо!

Большое спасибо! Всё руки никак не доходили заняться этим дело. Ваш МК толкает на подвиги

Спасибо! Все думаю — ставить или не ставить баннер? Было 50%*50%. Сейчас больше склоняюсь к баннеру. Тем более МК — вот он!

Оксана, спасибо большое за мастер класс. Только недавно думала о том, что надо сделать баннер, но незнала как это, что это. СПАСИБО уже делаю))

Пожалуйста и обязательно поделитесь тем, что у Вас получилось)

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

Баннер в магазине уже проходит проверку!

Так что, наконец-то я вспомнила и сделала, так сказать выполнила свой долг перед магазином! Вы просто ум, честь и моя совесть!

Класс. Мои поздравления)

Спасибо большое. Теперь у меня тоже есть баннер)

Оксана, большое спасибо! Обязательно попробую сделать.

спасибо огромное за информацию.как раз вовремя-собираюсь оформить собственный магазинчик на ЯМ.Так что в самый раз и нужное!

Оксана, огромное спасибо за этот МК!

Поражена следующему: разница между цифрами «Нравится» и «В избранном» — больше ста!

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

Да что ж эта кнопка всем покоя не дает? За каждое нажатие автору пять рублей дают, что ли?

Кармодрочерство какое-то, простите мой луркморский.

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

Подглядела)))) С наступившим вас днем рождения! Всего самого доброго и светлого в жизни и творчестве.

Урок 5. Баннер для Ярмарки Мастеров за 10 минут!

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

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

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

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

Что значит «онлайн»? То есть, ничего не надо скачивать себе на компьютер, устанавливать, запускать и пр. Раньше эти действия меня ужасно пугали, поэтому я очень обрадовалась, когда нашла этот сайт.

Первый баннерочек я делала, конечно, долго. Поскольку, пришлось долго подбирать желаемый шрифт, размер и пр. А во второй раз все получилось буквально минут за 7-10! Так что, если вы будете просто повторять за мной действия, выставляя те же значения, что у меня, вам тоже удастся быстро сделать баннер своими руками. И не надо будет к кому-то обращаться за помощью.

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

Итак, что мы разберем в этом уроке?

1. Как создать баннер для ЯМ за 10 минут.
2. Как баннер проходит модерацию в ЯМ .

Часть 1. Создаем простой баннер для Ярмарки Мастеров

Обращаю ваше внимание, что на Ярмарке Мастеров строгие правила по размещению баннеров. Читаем их ниже, привела их на скриншот-картинке. Из всего текста нам сейчас нужно знать, какие размеры допустимы: ровно 760 х 75 пикселей. Запомнили, приступаем к работе.

Для начала нужно попасть на нужный сайт. Вводим в строке браузера адрес: //bannerfans.com

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

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

Начнем с первого пункта «Макет». Сайт англоязычный, переводится в гугле автоматически, поэтому иногда перевод может отличаться, например, на фото ниже вы видите слово « Планировка». Прямо под ним видим задание:

1. «Выберите размер» . Выбираем вторую строку, чтобы иметь возможность задать свои параметры.

Затем переходим вправо:

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

Прямо под этой надписью смотрим:

3. «Режим» , я выбрала второй, т. е. на баннере будет две цветовой полосы, плавно переходящей одна в другую.

Теперь уходим влево, к надписи выбора:

4. «Градиент цвета» . Выбирайте на свой вкус, нажимая на цветные квадратики. Сразу появятся новые окна с выбором цветов.

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

После всех действий смело нажмем «Обновить» .

Через пару секунд увидим обновление.

Значит, время переходить к текстовому оформлению. Кликнем по «Текст и шрифты».

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

1. В поле «Ваш текст» вписываю нужные предложения.
2. «Имя шрифта» — вот тут в первый раз я «застряла» надолго, т. к. не все из них распознают кириллицу. Сейчас вы можете просто вписать такие же, как у меня на фото, чтобы не терять время. А позже, при желании, поэкспериментировать еще. Предупреждаю, дело захватывающее, т. к. нам предлагают множество разных шрифтов, от готических до классических. Чтобы их увидеть, кликните по значку «>» рядом с каждым.

Примечание от 22.08.2022 г.: чтобы шрифт отображался корректно, при выборе шрифта кликните по строке «кириллица», как у меня указано на скриншоте ниже. И выбирайте из того, что будет предложено.

3. Так, «Размер шрифта» — при клике выскакивает длинная таблица с нумерацией. Чтобы выбрать какой-то номер, жмем по нему, он сразу отразится.
4. «Цвет» — здесь уже интуитивно понятно. При нажатии появится маленькое окно, в котором можно выбрать желаемый оттенок для текста.
После всех изменений вновь обновляем . И увидим, что текстовые сообщения окрасились в разные цвета, и обрели новые размеры и конфигурацию.

Теперь зададим «Тени и эффекты» (кликнув по ним). При нажатии на значки в строке «Расстояние» появляется такая картина. Выберем значение «4px», чтобы тень от букв немного падала вправо. И еще отметим цвет теней.

Далее идет раздел «Граница» . В нем можно задавать вид пограничных линий (т. е. края рамки). Но, у меня все осталось, как было задано «по умолчанию». Видите, отмечено точкой «None» .

И, наконец, отметим «Формат» IPG, поскольку у нас изображение не требует прозрачности (PNG) и не анимировано (GIF).

Все, наш простой баннер готов! Нажмите на кнопку внизу справа «Скачать баннер». И сохраните так, как вам удобно (например, на рабочем столе). Остается разместить его в магазине на Ярмарке Мастеров и ждать одобрения модераторов.

Часть 2. Про то. как баннер проходит модерацию на ЯМ

О том, как баннеры проходят проверку, я писала в своем блоге в Лиру и на ЯМ. Копия статьи приведена ниже в формате скриншот-снимков (т. е. снятых прямо с экрана компьютера). Все изображения кликабельны, просматриваются в виде фото-галереи.

Вот и весь урок. Желаю вам отличных продаж!

А я буду дальше разрабатывать наши новые модели — повязки на голову и шапочку-чалму.

Мастер-класс: Как сделать баннер для магазина на Ярмарке Мастеров. Подробная инструкция

Здравствуйте, мои дорогие!
Вот уж не думала, что буду писать мастер класс (даже робею как-то =)) ), но сегодня я сделала для себя большое открытие! =) Только не смейтесь пожалуйста, я узнала как разместить в своём блоге баннер на свой магазин на Ярмарке мастеров. Если точнее, то как сделать ее такой как она должна быть, с «авторской» картинкой ЯМ, а не с первой попавшейся! (у меня ссылка до сегодняшнего дня работала, но в блоге она выглядела как простая фотография).
И так!=)
1. Заходим в свой магазин на Ярмарке мастеров;
2. С левой стороны в самом низу ищем вкладку «мои кнопки» и нажимаем туда;

Как я делала себе баннер для ЯМ (пособие для новичков)

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

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

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

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

Оцените статью
Скрапбукинг, вышивка, вязание и другие виды рукоделия