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

Создаем баннер для магазина в программе Paint

Если вы считаете, что хороший баннер для магазина можно сделать только с помощью продвинутого графического редактора, то я развею этот миф, и докажу, что даже старый добрый дружище Paint может творить чудеса! И чтобы сделать привлекательный баннер, не обязательно владеть королем редактирования изображений — фотошопом. Конечно, с помощью таких редакторов можно сделать более оригинальные баннеры. Но если подойти творчески, то желаемого результата можно достичь и с простеньким Paint. Как говорится, маленький, да удаленький! Все еще не верите?! Приступаем!

ШАГ 1.

Открываем наше изображение в Paint.

ШАГ 2.

Этот шаг можно смело пропустить. Но если Вы хотите сделать баннер более привлекательным, лучше поиграть с размерами изображения. Т.к. размер баннера фиксирован, то важно какая область первоначальной картинки попадет в эти пределы. Вы же не хотите, чтобы в эту область помещался только, например, кошачий хвост. Итак, делаем нужный размер картинки. Обратите внимание, что мы будем корректировать размер, а не изменять масштаб изображения, прошу не путать. Размер можно увидеть в самом низу редактора.

На верхней панели инструментов нажимаем кнопку “Изменить размер”.

Далее указываем либо проценты, либо пиксели, как вам удобней. Я поигралась с размерами и остановилась на таком результате.

ШАГ 3.

Теперь начинается самое интересное, вырезаем баннер. Размер баннера по правилам Ярмарки Мастеров 760 x 75. Нажимаем кнопку Выделить, устанавливаем курсор на изображение и начинаем выделять область для баннера. Внимательно следим за размерами выделенной области в нижней части редактора. Растягиваем до тех пор, пока не увидим заветных циферок 760 x 75.

Нажимаем кнопку Обрезать.

ШАГ 4.

Половина пути пройдена! Делаем надпись. Нажимаем пиктограммку А на панели инструментов. Кликаем мышью на место изображения, где хотите разместить Вашу надпись (область можно будет перемещать). Появится новая вкладка Текст. Выбираем шрифт, размер шрифта, цвет надписи, наклон шрифта и т.д.

ШАГ 5.

Чтобы сделать баннер для магазина более заметным, можно сделать рамку вокруг баннера. Для этого переходим на вкладку Главная, область Фигуры. Выбираем нужную фигуру, цвет фигуры и растягиваем по контуру изображения.

Любуемся на наш баннер!

В мастер-классе используется версия редактора 2022. Принцип для других версий одинаков, интерфейс может различаться.

Ждите моих новых мастер-классов, в том числе по созданию баннера в Photoshop.

Создаем баннер для своего магазина на андройд планшете (без Photoshop)

Всем доброго времени суток. Я на ярмарке совсем недавно и захотелось мне украсить свой пока еще маленький магазинчик баннером. Только вот с фотошопом я не очень дружу, в особенности со слоями, градиентами и пр. Вот и решила я сделать свой первый баннер на планшете ( у меня sony на платформе android 4.1) и обойтись без сложных премудростей. Итак, начнем.

Для начала нам нужно скачать с play market (что это такое все владельцы анройд планшетов должны знать, поэтому подробности опускаю, если все же не ясно, что это за зверь такой, то спрашивайте — отвечу, разъясню) программу Photo Editor. Она находится в свободном доступе. Итак, скачиваем, устанавливаем, жмем на ярлычок, который выглядит вот так:

нажимаем на «Новые»

и, собственно, создаем новый документ, забив в соответствующих окошечках числа 760 на 75:

Получаем чистый листочек. Для создания баннера мы будем использовать заранее заготовленные изображения, скачанные и сохраненные на планшете. У меня эти изображения из серии «Вдохновение цветом», у Вас могут быть любые другие, в том числе фото работ, бусин, цветов, логотип и так далее. Размер изображения практически не важен, но совсем малепусенькие, конечно, не подойдут, т.к. нам их еще предстоит обрезать. Для того чтобы вставить наше изображение кликаем на кнопочку «Текст./ Изобр.»:

Нажав кнопку !Выбрать изображение», выбираем необходимое нам (у меня это незабудка) и покрутив пальчиком сетку туда-сюда, указываем необходимую нам наиболее симпатичную часть изображения, которую мы будем вставлять в наш баннер. Также можно выбрать-обрезать ненужное по вкладке обрезка free (свободная) и,поводив пальцем, выделить необходимую область( она будет более светлая). Можно подвигать бегунок «Непрозрачность» для достижения оптимального эффекта:

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

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

Так-то лучше, но серединка пустовата. Заполним ее подходящим по цветовой гамме градиентом. Для этого нажмем кнопочку Add Shape, что в переводе означает добавить форму, очертание и выберем форму квадрата с размытыми краями, а также выберем его цвет, кликнув по цветному кружку:

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

Жмем кнопочку ОК. Проделав еще раз такую операцию с другим цветом (у меня желтый), получаем следующее:

Если нас все устраивает, жмем кномочку «ПРИМЕНИТЬ» в верхнем правом уголке планшета. Если не устраивает, выделяем неугодный элемент и редактируем его по кнопке «Редакт», вновь попадая в вышеописанные меню.

Переход цвета получился не слишком мягким. Смягчим его при помощи различных эффектов. На главном меню выбираем «Эффекты», далее «Размытие» и получаем полностью размытый баннер:

но, кликнув один раз на кнопочку «All (всё)», перейдем в режим выбираемой области размытия и обозначим её границы, а также увеличим радиус размытия, потянув нижний бегунок вправо до нужной нам силы данного эффекта:

Стык изображения и градиента можно дополнительно более точно «размыть» при помощи кисти размытия, кликнув один раз по кнопочке «Shape» (она изменит название на Brash- кисть) и нажав на значок кисточки:

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

Получилось почти идеально, нажимаем «ПРИМЕНИТЬ». Ну что ж, теперь не хватает только текста. Добавляем его, нажав уже знакомую нам кнопочку «Текст./ Изобр.» на основном меню программы, но выбрав кнопочку «Текст»:

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

Выбираем шрифт, толщину контура, междустрочный интервал (Line spasing), выравнивание (Aligh) по вкладке «Properties» (Настройки):

Данную процедуры я сделала два раза и передвинула текст в необходимое мне место, но можно все сделать и в один этап, но тогда при передвижении будет передвигаться весь блок с текста, а не отдельные его части (слова, строки). Т.е. здесь действует принцип: пишем одно слово- одно слово и двигается, пишем два — двигаются два, пишем две строки — двигаются обе строки.

А вот и результат нашего труда :

При желании, конечно, можно использовать и другие эффекты, такие как осветление, виньетирование, сепия, отражение (кнопка эффекты 2) и другие, благо программа это позволяет в довольно приличном объеме, а также обрезать и изменить размер файла нашего баннера, если он вдруг оказался слишком велик.

Сохраняем нашу красоту, нажав на кнопочку «СОХРАНИТЬ» в правом верхнем уголке планшета (качество- всегда 100%):

Создание такого баннера при определенной сноровке занимает от силы минут 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. Устанавливаем аватарку и баннер на магазинчик

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

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

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

Оцените статью
3 ниточки: рукодельный портал