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

Мастер-класс по созданию баннера для магазина

Материалы: вам понадобится персональный компьютер, графический редактор Adobe Photoshop и изображение в формате .jpg.

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

1. Самый сложный этап — понять что мы хотим и как мы это видим.

2. Необходимый материал для баннера — это может быть фотография ваших работ или любое графическое изображение в формате .jpg или .jpeg , которое подчеркнет ваш стиль и привлечет покупателей. Требования к изображению: оно должно быть настолько качественным, чтоб при увеличении на весь экран вашего компьютера, оно не расплывалось, просматривались все его детали. Сознательно не называю никаких цифр, ни в пикселях, ни в мегабайтах…т.к. нет жестких ограничений.

3. Загружаем выбранное изображение в Adobe Photoshop. Самый простой способ: делаем правый клик по иконке с изображением, выбираем из списка – «открыть с помощью» и из предложенного списка программ выбираем Adobe Photoshop.

4. Мое изображение имеет размер 1280х1024 пикселя, а по требованиям к персональному баннеру, оно должно быть 760х75 пикселей. Из этих цифр видно, что пропорции исходного и нужного нам изображения довольно сильно отличаются, поэтому его нужно кадрировать — обрезать до нужной нам величины. На панели инструментов выбираем инструмент «Рамка кадрирования», нажимаем дополнительно букву «С». В верхней части экрана можно теперь вписать размеры: ширина-«760 пк», высота- «75 пк», но прежде чем вписать значения, нужно нажать на кнопку «очистить».

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

Можно растянуть рамочку на любом понравившемся участке и нажать Enter.

6.Затем в меню «Изображение» выбираем «размер изображения»

Вписываем ширину(760) и высоту (75), проверьте, стоит ли птичка рядом с параметром

«Сохранить пропорции», если стоит, то нажимаем на кнопку «Да».

7.С помощью инструмента «Масштаб», увеличиваем изображение так, чтоб с ним было удобно работать.

8.Теперь изображение нужно «Сохранить для Web и устройств».

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

В специальном окне мы видим два изображения: исходное-167 К, и измененное для Web-30,29 К. Выбираем из выпадающего меню формат .jpeg ,сохраняем.

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

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

Кликаем в нужном месте нашего изображения и пишем любой текст.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать крутой баннер для емейл рассылки

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

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

Где брать идеи для создания баннера?

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

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

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

Pngtree (огромная база бесплатных изображений и готовых шаблонов).

Freepik (немного меньше, чем Pngtree).

Pixabay (лучший фотосток, есть поиск и доступны разные размеры для скачивания).

IM Free (есть поиск, но архив не такой большой, как у Pixabay).

Pickupimage (в тройке лидеров среди стоков).

Creative Commons Search (это скорее не сток, а поисковик по стокам, но иногда очень здорово выручает).

На платных фотостоках изображений гораздо больше, но за них придется заплатить. Из основных могу выделить:

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

Пошаговая инструкция по созданию баннера для емейл-рассылки интернет-магазина

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

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

А теперь самое интересное

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

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

Открываем фотошоп и создаем документ, в котором будем работать.

Нужно учитывать то, что баннер нужен для емейл-рассылки, и максимально допустимая ширина изображения при работе с eSputnik — 600 пикселей.

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

Рабочий документ готов, ничего сложного, не так ли?

Если все сделано правильно, должен открыться документ с исходными параметрами по высоте и ширине.

Основные элементы интерфейса Photoshop, с которыми нам предстоит работать:

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

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

Перетягиваем изображение в рабочую область:

В рабочем документе и на панели “Слои” появится изображение. Эти действия нужно подтвердить клавишей Enter или галочкой, я ее тоже отметил на скриншоте.

Пройдемся по инструментам, с которыми будем работать:

Инструмент “Перемещение” (с его помощью можно перемещать то, что находится в документе);

Более подробно со всеми инструментами вы можете ознакомиться на сайте Photoshop.

Работа с фоном картинки

Инструментом “Перемещение” двигаем изображение к краю рабочей области:

Фон, на котором находится девушка, мне нравится, но что делать, когда цвет фона не подходит к общему оформлению емейл-рассылки? Для этого нужен “ластик”, а точнее “волшебный ластик”. Выбрать его можно нажатием правой кнопки мыши по ластику.

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

Теперь, когда мы выбрали “Волшебный ластик”, жмем в любом месте изображения, в появившемся окне выбираем “ок”. Изображение готово чтобы работать “волшебным ластиком”.

Жмем по голубому фону, если вы все правильно сделали, фон должен удалиться.

Удаляем таким же способом оставшийся фон с изображения.

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

Цвет выбрать можно на панели инструментов.

Выберите необходимый цвет и приступайте к заливке основного фона.

Создаем текст и призыв к действию

Для добавления текста выбираем соответствующий инструмент:

После выбора инструмента “Шрифт” появится панель с настройками его параметров (тип шрифта, размер, дополнительные параметры).

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

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

Для этого, с помощью инструмента “прямоугольник”, рисуем кнопку и добавляем нужную надпись.

Если в дальнейшем нужно изменить размер кнопки, сделать это можно с помощью комбинации клавиш CTRL+t, изначально выделив слой с кнопкой на панели “Слои”. Потянув за нужный угол, можно растянуть кнопку по ширине и высоте. По завершению подтвердит действие “ок” или Enter.

Цвет кнопки можно изменить двойным щелчком мыши по слою с кнопкой.

Если текст не отображается, нужно на панели “Слои” выделить текстовый слой и переместить его выше слоя с кнопкой.

Чтобы расположить текст по центру кнопки, выделяем слой с текстом и кнопкой с помощью клавиши CTRL на панели “Слои”.

Включаем инструмент “Перемещение”, на появившейся панели центрируем текст относительно кнопки.

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

Выбираем слой с кнопкой, нажатием правой кнопкой мыши из выпадающего меню выбираем “Параметры наложения”

2. В появившемся окне включаем “тень”

3. Меняем значения:

непрозрачность в пределах 60-70%;

смещение — 10-20 пикс;

размер — 50-60 пикс.

Не забываем про иерархию слоев, если какой-то слой не отображается, значит сверху него находится другой слой, который его закрывает. Для этого перемещаем вышележащий слой ниже.

Последние штрихи и баннер готов!

Давайте на панели инструментов выберем эллипс:

Нарисованный эллипс будет выходить за границы рабочей области, но его можно всегда отредактировать, выделив на панели слоев и нажав комбинацию клавиш CTRL+t.

Добавим небольшую тень, чтобы визуально получился эффект наложения эллипса.

Настройки тени выбираем такие :

Осталось только добавить логотип.

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

Поздравляю вас с полезным новым опытом! Надеюсь, что статья помогла вам в создании своего первого баннера, и ответила на вопросы, с которыми вы столкнулись в процессе, а приобретенные навыки работы в программе Photoshop помогут вам с новыми рассылками.

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

С помощью нашего редактора вы сможете:

без труда добавить кнопку, текст и даже видео в шаблон емейл письма;

работать с несколькими слоями, и это не вызовет у вас трудностей и дискомфорта;

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

создать свой собственный баннер с помощью блока “Баннер”, когда под рукой нет Photoshop.

А еще, я подготовил для вас приятный бонус ?. По ссылке находятся файлы, необходимые для создания баннера.

В новых релизах мы подготовим для вас еще больше полезных функций!