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

Магия рукоделия
Содержание статьи:

Создаем аватар и баннер для своего магазина на Ярмарке Мастеров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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%». Получился такой баннер:

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

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

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

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

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

Создаем аватар и баннер для своего магазина на Ярмарке Мастеров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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%». Получился такой баннер:

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

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

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

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

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

Создаем аватар и баннер для своего магазина на Ярмарке Мастеров

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

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

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

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

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

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

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

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

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

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

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

Оцените статью
Магия рукоделия: подборка лучших видео-мастерклассов
Добавить комментарий