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

Краткое содержание:

Делаем банер для магазина

Здравствуйте, дорогие мастера и мастерицы! Предлагаю вам не сложный урок по созданию банера для магазина. Урок выполнен с использованием графических программ Corel Draw , Photoshope. Итак, начнем.

Откроем Корел Дро и создадим новый документ. Это делается щелчком мыши в левом верхнем углу на значке «создать». затем рисуем прямоугольник подходящий по пропорциям нашему банеру.

Как Сделать Красивую Шапку Для #Ютуб Канала С Нуля в #Канва

Потом пишем текст

Выбираем вверху на панели шрифты — шрифт и размер шрифта

затем покрасим наш банер, выберем градиент

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

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

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

Обводим контур кистью с клавишей Shift, эта клавиша нужна для того чтобы короткими отрезками аккуратно выделить область вырезания. контур обязательно надо замкнуть.

Вот так это выглядит

Затем возьмем слева с панели инструментов инст-т «Волшебная палочка» и ткнем в середину области. По внутреннему краю красной полосы «побегут муравьи».

Затем надо чуть расширить область где то на 3 пикселя. см. на рисунок.

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

Потом мы нажимаем кнопочку внизу. выходим из режима быстрой маски

затем делаем инверсию

И чтобы вырезать изображение нажимаем ctrl+x

Затем создаем новый слой

и нажимаем ctrl+v то есть «вставить», вот что вышло у нас

Делаем баннер для Etsy в Canva \\ Как открыть магазин на ЭТСИ

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

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

Вернемся в программу Корел Дро. Командой импорт, импортируем нашего клоуна .

Как сделать БАННЕР для ФОТОЗОНЫ

Затем выберем в Эффектах команду добавить в Power Clip( я уже рассматривала этот эффект в своих предыдущих уроках, не буду останавливаться на этом)

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

Затем надо сохранить банер в формате Jpeg . Он должен быть Размер: 760х75 пикселей, вес не более 300Кб. Формат файла: .jpg. И все вставляйте и любуйтесь!

вот диалоговое окно экспорта. там можно выставить пиксели. А затем нажать сохранить

Вот и все, ничего сложного. Если будут какие то вопросы. спрашивайте, отвечу!

Создание баннера для магазина в GIMP.

Добрый день, жители Ярмарки.
Сегодня я предлагаю Вам создать баннер для магазина в графическом редакторе GIMP. В отличие от фотошопа, гимп является свободным программным обеспечением, т.е. бесплатным, а по функционалу почти не уступает фотошопу.
Мастер-класс сделан максимально понятным с большим количеством картинок, но если что-то будет не ясно, спрашивайте-охотно отвечу.
Работать будем в несколько этапов. Первым делом найдем пару фотографий, близких по колористике. На одной из них я покажу вам, как грамотно вырезать нужное изображение и вставить его в баннер, а вторую картинку поставим фоном. Затем создадим баннер, вставим в него готовые изображения и сделаем надпись.
Итак. Я выбрала вот эти две фотографии для баннера:

Как сделать баннер в фотошопе: создание простого баннера #1

Начнем с фоновой.
Открываем картинку в гимпе: «файл-открыть»

Сначала уменьшим общий размер изображения: «Изображение-размер изображения»( выпадающее меню сверху), выставляем ширину 1000пикселей, высоту программа выставит сама, следите за тем, чтобы замочек между этими параметрами был замкнут. У кого машинки мощные, уменьшать размер изображения не обязательно, можно работать с оригиналом. Мой старичок-ноут сильно задумывается.

Изображение стало размером со спичечный коробок. Меняем масштаб на 50% (левый нижний угол).

Теперь нам надо слегка подогнать наш фон под размер будущего баннера. Берем инструмент «кадрирование» (иконка с канцелярским ножом), выделяем нужную область, удерживая левую клавишу мышки, примерно вот так:

Нажимаем «Еnter». Фон готов. Сохраняем его: «Файл-сохранить как». Закрываем, чтобы не мешал.
Переходим ко второй фотографии, из которой вырежем цветы для вставки.
Открываем новое изображение: «Файл-открыть». Сразу уменьшаем изображение, как и в первый раз: «Изображение-размер изображения-ширина-1000пикселей». Эти параметры весьма приблизительны. Потом, когда будем вставлять картинки в баннер, все подровняем.
Выбираем инструмент «свободное выделение» (третья иконка в первом ряду) и произвольно обводим нужное изображение:

Щелкаем правой кнопкой мышки на выделении: «правка-вырезать»

Далее идем в верхнее всплывающее меню: «файл-создать-из буфера обмена»:

Дизайн баннера в фотошопе. Как сделать футбольный баннер. Туториал

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

Вычищаем аккуратно, если надо убрать что-то очень мелкое, увеличиваем масштаб до 100%, где нужно, стираем оставшиеся куски ластиком (розовая иконка). В итоге должно получиться чистое и красивое изображение. Чтобы края нашей картинки не были очень резкими и изображение на другом фоне не выглядело чужеродным и вырезанным, пройдемся по периметру инструментом «резкость/размывание» (иконка голубой капли), при этом кисть выберем с мягкими краями, выставив подходящий масштаб:

Сохраняем картинку и закрываем ее.

Теперь переходим непосредственно к самому баннеру.

«Файл-создать». Размеры изображения-760 на 75:

Добавляем новый слой. В правом меню «слои» выбираем иконку «добавить слой»:

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

Удерживая правую клавишу мышки, проводим линию градиента:

Вместо градиентной можно сделать плоскую заливку. Инструмент плоской заливки находится рядом на панели инструментов.

Вставляем первую картинку: «файл-открыть как слои»:

Слой можно двигать, выбрав инструмент «перемещение», и уменьшать/увеличивать- инструмент «масштаб»:

Добиваемся красивого расположения картинки.

Как сделать ТРИ РЕКЛАМНЫХ баннера в Figma (ЗА 10 МИНУТ!)

Теперь сделаем плавный переход из правой части изображения в левую.

Правой кнопкой мышки нажимаем на «новый слой» в меню слоев справа. В открытом меню выбираем «добавить маску слоя»:

Параметры ставим вот такие:

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

Получаем красивый ровный переход:

Натяжка баннера на деревянный каркас. От проекта до монтажа.

Если сразу не получился переход, проводите линию снова и снова, пока не добьетесь нужного эффекта. Отменить неудачный шаг можно сочетанием клавиш «ctrl» и «z».

Теперь вставляем вторую картинку.
«Файл-открыть как слои»:

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

Дизайн баннера в фотошопе

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

Как сделать объемные буквы — вывеска со светодиодами

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

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

Выбираем иконку «текст» (жирная буква А, не промахнетесь), выделяем область на баннере, где будет располагаться текст и в открытом диалоговом окошечке набираем нашу надпись:

Теперь выбираем шрифт, замирая от восторга. Не знаю , как вы, а я в школе страстно мечтала иметь такой почерк:

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

Готово. Теперь сохраняем все, как есть, не меняя формат. Делаем это для того, чтобы потом, если вам вдруг разонравится какая-либо деталь в баннере, ее можно было бы легко заменить или поправить. После объединения слоев и смены формата баннер станет единой картинкой, с которой уже ничего нельзя будет сделать.

И заключительный этап- объединяем все слои в одно целое:

Получаем готовый баннер:

При сохранении баннера помните, что нужно поменять рабочий формат гимпа на .JPG. Здесь, на Ярмарке, другие картинки просто не загрузятся.
На примере этого баннера я показала вам разные приемы обработки картинок в гимпе. Пробуйте и экспериментируйте. Создание баннера, как и создание коллажей-не менее увлекательное занятие, нежели наш любимый handmade.
Удачи!

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

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

ШАГ 1.

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

ШАГ 2.

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

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

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

ШАГ 3.

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

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

ШАГ 4.

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

ШАГ 5.

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

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

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

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

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

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

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

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

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

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

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

⚡️ВИДЫ РЕКЛАМНЫХ БАННЕРОВ — кратко и ёмко

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

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

Шаг 1. Скачиваем Photoshop

Для хорошей работы нужна хорошая программа. В первую очередь вам нужно скачать в Интернете Фотошоп и установить на свой компьютер.

Шаг 2. Скачиваем мокап

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

Шаг 3. Немножко теории

Как было сказано ранее — нас интересуют аватарка и баннер. На фото ниже я выделила их.

Аватарка имеет размеры 150х150 пикселей.

Баннер имеет размеры 760х75 пикселей.

На этом сложная теоретическая подготовка окончена. Перейдем к работе.

Шаг 4. Творим творчество!

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

Всего есть два типа аватарок и баннеров.

Тип 1. Согласованный. Используется одна большая картинка на оба элемента

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

Тип 2. Независимый. Используются две независимые картинки

В данном случае аватарка и баннер независимы и содержат совершенно разные изображения.

Именно вам выбирать, как вы оформите вашу страничку. Я советую попробовать оба варианта, и не по одному разу!

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

Самое время перейти к работу в Photoshop. Дважды щелкните на скачанный ранее мокап, после чего он откроется перед вами.

Все, что вам нужно для работы, расположено в правой нижней панели: Панель слоев (см. рисунок ниже).

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

Попробуйте поотключать/повключать папки «Отдельные аватарка и баннер» и «Совместные аватарка и баннер» и посмотрите на результат.

Уроки веб-дизайна. Создание баннера в фотошоп

Как вы наверное заметили — картинка меняется. Дело в том, что разные слови отвечают за решение разных вопросов (как это видно из их названия). Так, например, для того, чтобы создать согласованные баннер и аватарку, необходимо отключить папку «Отдельные аватарка и баннер» и заняться редактированием слоя «Открыть для редактирования» в папке «Совместные аватарка и баннер». Для того, чтобы создать независимые баннер и аватар, необходимо отключить папку «Совместные аватарка и баннер» и отдельно отредактировать слои «Аватарка» и «Баннер».

Даже если это звучит сложно — мы с вами попробуем сделать все вместе, после чего вы с легкостью будете делать свои варианты.

ВАЖНО! Сохраните резервную копию мокапа, потому что иногда мы делаем-делаем и ломаем. Вдруг нажмете куда-то не туда.

ВАЖНО 2! Слой «Макет Магазина» содержит все элементы магазинчика, которые отображаются на рисунке в рабочей области, но не относятся к аватарке и баннеру. Это относится в том числе к товарам, названию и так далее. Если вы хотите вставить элементы своего магазинчика, то вам придется открыть магазинчик в браузере и сфотографировать рабочий экран (не на телефон, конечно, а с помощью кнопки PrintScreen на клавиатуре), после чего открыть его в графическом редакторе, нарезать и вставить в наш мокап. Звучит жутко, а на самом деле — очень просто. И делается за 15-20 секунд.

Теперь приступим к созданию аватарки и баннера. Начнем с согласованного (как самого интересного) вида.

  1. Отключите (щелкните по глазику) папку «Отдельные аватарка и баннер».
  2. Дважды щелкните по миниатюре слоя «Открыть для редактирования». Щелкнуть нужно именно по маленькому изображению слева от текста.

Вы только что открыли смарт-объект, специально сделанный для редактирования согласованных аватарки и баннера. Перед вами открылась новая рабочая область.

Как сделать стильный баннер для магазина #ETSY

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

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

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

Теперь найдем красивый фон в интернете.

Сохраняете его на компьютер и перетаскиваете на открытый смарт-объект, прямо в рабочую область.

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

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

ЭТСИ 2019 — Как сделать Банер для магазина. Размеры Этси Банера

ВАЖНО! Ваш новый слой может и будет иметь другое имя, отличное ото того, что отображается на картинке ниже.

Теперь в рабочей области можете спокойно двигать новый слой (главное, чтобы он был активным на панели слоев), изменять его размеры и добавлять необходимые элементы типа текста.

После того, как закончите редактирование данного смарт-объекта, вам необходимо:

  1. Сохранить его, выбрать пункт меню «Файл-Сохранить» (см. фото ниже)
  2. Вернуться к исходному файлу, нажав на его имя в верхней строке навигации (см. фото ниже).

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

Вот так просто можно сделать и примерить аватарку и баннер.

Если вам требуется создать независимые баннер и аватарку, то, как говорилось ранее, отключайте папку «Совместные аватарка и баннер» и отдельно отредактируйте смарт-объекты «Аватарка» и «Баннер». Принцип их редактирования точно такой же, как и у рассмотренного выше смарт-объекта:

  1. Включаете отображение слоя (папки).
  2. Дважды щелкаете по миниатюре слоя (смарт-объекта).
  3. Редактируете необходимым образом. При этом у смарт-объектов «Аватарка» и «Баннер» нет слоя «Рамка», так как так он просто не нужен.
  4. Сохраняете сделанные изменения.
  5. Возвращаетесь к исходному файлу и видите изменения.

Шаг 5. Сохраняем аватарку и баннер

Вы сделали ваши аватарку и баннер. Теперь их нужно сохранить и загрузить на Ярмарку Мастеров. Делаем следующее:

  • Сохраняем файл с расширением JPG или JPEG. Для этого используем пункт меню «Файл-Сохранить как».
  • Нажимаем «Файл-Открыть» и открываем только что сохраненный файл.
  • У открывшегося файла в панели слоев должен быть только один слой. Если справа от него есть значок замка, то нажмите его, и он исчезнет.
  • Изменяем размер холста. Для этого выбираем пункт «Изображение» — «Размер холста» и ставим его 150 на 150 пикселей.
  • Ваша рабочая область сильно уменьшится! Теперь перемещая (именно перемещая, не изменяя его размеров) фоновое изображение подгоните его так, чтобы аватарка входила точно в рабочую область (см. рисунок ниже).
  • Сохраните файл, выбрав «Файл»-«Сохранить как», и дав ему имя «Аватарка.jpg».
  • Теперь снова измените размер холста на 760 на 75 пикселей.
  • Подгоните (перемещая, не изменяя его размеров) баннер точно под вашу рабочу область (см. рисунок ниже).
  • Сохраните, выбрав пункт «Файл»-«Сохранить как» и дав ему имя «Баннер.jpg».

Шаг 6. Устанавливаем аватарку и баннер на магазинчик

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

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

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

One more step

Please complete the security check to access www.canva.com

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 654cd5947cc62dec • Your IP : 46.175.165.55 • Performance & security by Cloudflare

Оцените статью
Подборка лучших МК по рукоделию с видео