Мастер-класс Как сделать баннер для магазина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 1

Рис. 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как быстро и просто сделать баннер для своего магазина

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

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

Выбрала приложение Canva в плэймаркете. Это стандартное приложение, которое есть на всех телефонах.

Нужное нам приложение выглядит так.

После установки приложения необходимо зарегистрироваться. Тут два варианта — Google и Facebook. Я вошла через Google, и как-то очень быстро, что даже ничего и не поняла. Если у вас нет google аккаунта, то создайте его. Или восстановите, если забыли данные. Потому, что приложение Саnva идеально! Оно пригодится вам в будущем. Тем, более, что дальше все очень просто.

Далее, приложение предлагает выбрать нам нужный размер

Вводим нужные размеры баннера. Для для нашего баннера это 1260 пикс. на 200 пикс.

И, перед вами появляется шаблон.

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

Далее текст. Текст можно найти, а можно создать самим.

В наш баннер можно добавить иллюстрации. Там есть рамки, стрелочки и многое другое.

Только будьте аккуратны, с ними такая же история, как и с картинками.

Мастер-класс окончен! Пользуйтесь! Буду рада обратной связи!

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

Первый свой баннер я сделала за 5 минут. Это очень быстро, удобно и бесплатно!

Пыталась загрузить видео, но что-то пошло не так.

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

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

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

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

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

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

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

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

О первых двух пунктах мы поговорим с вами отдельно, а сегодня займемся созданием баннера и аватара.
У меня для вас сюрприз — я провела хорошую работу и подготовила очень удобный мокап (специальный шаблон) для 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. Баннер и его разновидности
  2. Немного о размерах
  3. Начинаем
  4. Фотография
  5. Украшения
  6. Текст
  7. В заключении

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

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

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

Три основные разновидности баннеров по их расположению:

  1. Наружные (плакаты, афиши, дорожные перетяжки и транспаранты и т.д.),
  2. Для сайтов (шапки сайтов, боковые баннеры и т.д.)
  3. Для социальных сетей (в ленте новостей, в шапках сообществ и личных страниц).

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

Так как баннер – по сути реклама товара и услуги, то обязательно нужно ознакомиться с правилами размещения рекламы, ведь у нас в России есть целый список услуг и товаров, которые рекламировать запрещено.

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

Еще баннеры разделяются в зависимости от выбранного формата на 3 вида:

  1. Статические (просто картинка или текст),
  2. Gif-анимация,
  3. Видео.

Немного о размерах

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

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

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

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

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

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

Начинаем

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

Можно взять приблизительные размеры, ведь в конце их всегда можно отредактировать. При создании обязательно проверяем настройки цветового режима: для веб-баннеров должен стоять RGB, для печатных – CMYK.

Заливаем наш фон нужным цветом с помощью инструмента «Заливка» (горячая клавиша G).

Фотография

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

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

Для этого два раза кликнем по слою с фотографией. Откроется окно настроек стиля для слоя. В открывшемся окне выбираем «Наложение градиента».

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

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

Обратите внимание, что напротив инверсии стоит галочка. Это значит, что градиент будет прозрачным цветом наружу, а не внутрь. Именно так нам и нужно сделать. Чтобы градиент был по бокам, нужно выставить угол в 180 градусов.

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

Вот такая красота у нас вышла.

Украшения

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

Если у вас есть какие-то свои идеи вы можете нарисовать их инструментом «Кисть» от руки, как вам нравится. Еще можно взять png-картинки с прозрачным фоном и также их вставить. Вариантов декораций просто уйма, вам потребуется лишь воображение.

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

Изменить обводку и заливку сердец можно сверху в их настройках. Рисунки на фоне фотографии очень сильно выделяются и забирают всё внимание на себя, предлагаю уменьшить их непрозрачность до 10-15%.

Чтобы было удобно редактировать непрозрачность сразу у всех сердец, а не по отдельности, объединим слои с ними в одну группу. Для этого с зажатой клавишей Shift выделяем все слои с сердцами и нажимаем на кнопку «Создать новую группу». Они автоматически объединятся в неё. Группе можно поменять название, два раза щелкнув по названию группы.

Функция очень полезная, ведь она позволяет редактировать сразу несколько объектов, не кликая по ним отдельно.

Текст

Далее давайте вставим текст на наш баннер. Это можно сделать с помощью горячей клавиши T, либо нажав на инструмент «Текст». После активации инструмента кликаем в месте, где примерно будет текст, и начинаем набирать.

Шрифт, размер, цвет текста можно изменить сверху в параметрах. Размещаем текст так, как нам нужно, подбираем шрифт и размер. Для удобства и более понятной сортировки слоев, текст можно также объединить в группу.

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

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

Я считаю, что на этот баннер можно больше ничего не добавлять. Вот, что в итоге у нас получилось. Просто и со вкусом.

В заключении

Ну что, друзья, как вам урок? Делитесь своими впечатлениями, рассказывайте у кого что получилось, мне очень интересно почитать! Кстати свадебная тема сегодня и вот для вас лучшие свадебные фотографы мира!

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

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

Смотрите, запоминайте то, что вам понравилось и берите за основу какие-то элементы, создавая абсолютно новые произведения. Если делали для сайта, то сохраняйте с разрешением 72 dpi, а если для печати, то соответственно — 320dpi.

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

На этом у меня всё, скоро мы с вами увидимся в новых уроках! А старые можно посмотреть вот тут. Развивайтесь, пробуйте и творите! Пока-пока!

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: 65180e5689533274 • Your IP : 46.175.165.20 • Performance & security by Cloudflare

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