Делаем баннер, пошаговая инструкция
Уж извините меня милые дамы, но данный урок меня сподвигло сделать чувство сострадания.
Не кидайтесь сильно тухлыми помидорами за то, что тема ужа заезжена до дыр.
Но пообещал помочь одной девушке очень подробно разложить по полочкам.
И вот решил, что-бы материал не пропадал даром.
Очень пошаговая инструкция создания баннера для Ярмарки Мастеров.
Запускаем Фотошоп. Не важно какой версии. Все что здесь описывается, есть в любой версии.
Для того, что-бы открыть картинку, которую мы будем использовать для фона, нажимаем меню «File»
ШАГ 2
Выбираем пункт меню «Open».
ШАГ 3
Выбираем на своем компьютере заранее записанную картинку, которую мы будем использовать как фон.
ШАГ 4
Создадим шаблон (пустую картинку) для нашего баннера. Выбираем последовательно пункты меню «File->New».
ШАГ 5
Задаем последовательно: Имя файла (нашего баннера) «Name» -> (например «баннер для ярмарки»), ширину картинки «Width» -> 760 pixels, высоту картинки «Height» -> 75 pixels, разрешение картинки «Resolution» -> 72 pixels/inch.
(RUS)
ШАГ 6
У нас открыты 2 картинки. Одна — та которая послужит нашим фоном, вторая — чистый шаблон будущего баннера.
ШАГ 7
Начинаем операцию копирования картинки которая будет фоном в чистый шаблон баннера. Делаем активным файл с фоном (просто кликаем один раз на нем мышкой).
Выбираем последовательно пункты меню «Select -> All».
(RUS)
ШАГ 8
Выполняем операцию «Копировать». Нажимаем последовательно пункты меню «Edit -> Copy».
(RUS)
ШАГ 9
Вставляем скопированную картинку с фоном в шаблон баннера. Выбираем активным файл с пустым шаблоном (просто кликаем мышкой внутри окошка с картинкой баннера) и последовательно выполняем пункты меню «Edit -> Paste».
(RUS)
ШАГ 10
Наш фон теперь поместился в шаблон баннера и мы готовы с ним работать.
ШАГ 11
Например мы просто смасштабируем этот фон и красиво разместим его на баннере. Для этого выберем режим свободной трансформации «Edit -> Free Transform».
(RUS)
ШАГ 12
У нас появилась рамочка вокруг слоя с нашим фоном. Изменяем (уменьшаем и двигаем наш слой с фоном) так, что-бы это было красиво. Если потянуть за крайние уголки этой рамочки, то размер слоя с фоном начнет изменяться (уменьшаться или увеличиваться). Если одновременно с этим нажать и удерживать кнопку «Shift» на клавиатуре, то транcформация слоя с фоном будет пропорциональным, т.е. без искажений по горизонтали и вертикали. Еще можно вращать вокруг центральной точки (отмеченной одной из красных стрелочек). Перед тем, как тянуть за уголки мы должны выбрать инструмент «Move Tool». Как только закончили трансформацию нажмите клавишу «Enter» на клавиатуре.
ШАГ 13
Трансформируем слой с фоном на свое усмотрение.
ШАГ 14
Давайте посмотрим, где же располагается слой с нашим фоном. Выполняем последовательно меню «Window-> Layers». Откроется окошко со слоями. Наш фон сейчас находится вторым снизу. Таких слоев в файле Фотошопа может быть очень много.
ШАГ 15
Напишем название нашего магазина. Для этого выбираем инструмент со сложным названием «Horizontal Type Tool».
ШАГ 16
Кликаем мышкой примерно в том месте где хотим написать название нашего магазина. Возможно придется немного подождать, пока Фотошоп активизирует все ваши установленные шрифты. Как только появится мигающий курсор на баннере в том месте, где мы кликнули и появился новый слой с иконкой в виде буквы «Т», мы готовы набирать название нашего магазина.
ШАГ 17
Пишем название. Меняем цвет и размер шрифта, как в любимом Ворде. Баннер «на скорую руку» готов.
ШАГ 18
Записываем наш баннер «File -> Save As. » в формат *.PSD это для дальнейшей работы с ним (вдруг вы захотите поменять фон или название магазина на баннере). И записываем для загрузки на Ярмарку в формате *.JPG.
Еще раз прошу прощения за избитую тему. Можете даже ругать. 🙂
Надеюсь я помог девушке с такими подробностями.
Если будут какие-то еще уточнения по данному уроку, пишите сразу, пока у меня есть возможность править этот урок.
Источник
Создаем баннер для магазина в программе Paint
Если вы считаете, что хороший баннер для магазина можно сделать только с помощью продвинутого графического редактора, то я развею этот миф, и докажу, что даже старый добрый дружище Paint может творить чудеса! И чтобы сделать привлекательный баннер, не обязательно владеть королем редактирования изображений — фотошопом. Конечно, с помощью таких редакторов можно сделать более оригинальные баннеры. Но если подойти творчески, то желаемого результата можно достичь и с простеньким Paint. Как говорится, маленький, да удаленький! Все еще не верите?! Приступаем!
ШАГ 1.
Открываем наше изображение в Paint.
ШАГ 2.
Этот шаг можно смело пропустить. Но если Вы хотите сделать баннер более привлекательным, лучше поиграть с размерами изображения. Т.к. размер баннера фиксирован, то важно какая область первоначальной картинки попадет в эти пределы. Вы же не хотите, чтобы в эту область помещался только, например, кошачий хвост. Итак, делаем нужный размер картинки. Обратите внимание, что мы будем корректировать размер, а не изменять масштаб изображения, прошу не путать. Размер можно увидеть в самом низу редактора.
На верхней панели инструментов нажимаем кнопку “Изменить размер”.
Далее указываем либо проценты, либо пиксели, как вам удобней. Я поигралась с размерами и остановилась на таком результате.
ШАГ 3.
Теперь начинается самое интересное, вырезаем баннер. Размер баннера по правилам Ярмарки Мастеров 760 x 75. Нажимаем кнопку Выделить, устанавливаем курсор на изображение и начинаем выделять область для баннера. Внимательно следим за размерами выделенной области в нижней части редактора. Растягиваем до тех пор, пока не увидим заветных циферок 760 x 75.
Нажимаем кнопку Обрезать.
ШАГ 4.
Половина пути пройдена! Делаем надпись. Нажимаем пиктограммку А на панели инструментов. Кликаем мышью на место изображения, где хотите разместить Вашу надпись (область можно будет перемещать). Появится новая вкладка Текст. Выбираем шрифт, размер шрифта, цвет надписи, наклон шрифта и т.д.
ШАГ 5.
Чтобы сделать баннер для магазина более заметным, можно сделать рамку вокруг баннера. Для этого переходим на вкладку Главная, область Фигуры. Выбираем нужную фигуру, цвет фигуры и растягиваем по контуру изображения.
Любуемся на наш баннер!
В мастер-классе используется версия редактора 2010. Принцип для других версий одинаков, интерфейс может различаться.
Ждите моих новых мастер-классов, в том числе по созданию баннера в Photoshop.
Источник
Как самостоятельно сделать рекламный баннер: обзор популярных сервисов
София Гаитбаева ppc.world (до 2021 года)
Что делать, если в команде нет дизайнера, работать в сложных графических редакторах вы не умеете, но нужно создать красивые рекламные баннеры? На помощь приходят специальные сервисы для создания графического контента. Мы выбрали шесть популярных онлайн-редакторов: Canva, Adobe Spark, Desygner, Bannersnack, Bannerboo и Fotor, протестировали их и готовы рассказать об их преимуществах и недостатках.
Canva
- Интерфейс на русском языке: да.
- Авторизация: требуется регистрация или вход через аккаунт в Facebook или Google+.
- Стоимость: основные функции бесплатны, но есть платная подписка от $12,95 в месяц на аккаунт для командной работы.
Сервис считается одним из самых популярных инструментов для создания графического контента. В нем много шаблонов открыток, постеров, презентаций, есть специальные форматы для соцсетей Facebook и Instagram.
Попробуем создать самые «ходовые» баннеры: большой прямоугольник 336×280, средний прямоугольник 300×250, полноразмерный баннер 728×90, а также большой мобильный баннер 320×100.
Чтобы начать работу с изображением нажимаем «Создать дизайн», затем — «Использовать специальные размеры».
Вводим параметры высоты и ширины баннера и переходим в редактор.
Сначала сделаем фон. Canva предлагает различные варианты оформления: однотонные, орнаменты, узоры, градиенты, флористические и т. д.
Чтобы добавить к фону элементы (логотип, дополнительные изображения) переходим в раздел «Мое». Сюда можно загрузить изображения с компьютера. Чтобы разместить их на баннере, просто перетащите загруженные картинки из галереи на рабочее поле. Удобно, что можно сразу загрузить в медиатеку все элементы, которые планируете использовать для создания баннеров, и потом по очереди перетаскивать и редактировать.
Теперь добавим текст.
Нам нужен простой баннер, поэтому текст призыва постараемся сделать в том же стиле, что логотип.
Изменение цвета текста, выравнивания и т. д. — в меню сверху. Текст можно перетаскивать, растягивать и сжимать.
Теперь добавим кнопку. Для этого заходим в раздел «Элементы» — «Фигуры». Мы хотим круглую кнопку, соответственно, из списка фигур выбираем круг. Перетаскиваем его в нижнюю часть баннера, корректируем размер и выбираем цвет.
Можно добавить стрелку на кнопку. Для этого переходим в «Элементы» — «Линии». Тут есть уже готовые стрелки, выбираем понравившуюся, перетаскиваем на кнопку, меняем размер и цвет.
Осталось добавить несколько простых декоративных элементов. В Canva нет возможности свободно выделить часть изображения, обрезать и вставить элемент в баннер, как в более сложных и продвинутых фоторедакторах. Если нужно добавить на баннер элемент изображения, придется обрезать его в другом графическом редакторе, сохранить и загрузить в медиатеку Canva. Зато в Canva большая библиотека фонов и иллюстраций. Так как дизайн нашего баннера простой, можно выбрать что-то из иллюстраций в библиотеке сервиса.
Сохраняем то, что у нас получилось, нажав «Скачать» в верхнем правом углу, и аналогичным образом делаем остальные баннеры:
Плюсы
- Понятный интерфейс на русском языке.
- Есть медиатека, можно один раз загрузить все нужные для работы изображения и потом использовать их неограниченное количество раз, они сохраняются в разделе «Мое».
- Большая коллекция бесплатных изображений, иллюстраций, фонов, фигур и т. д.
Минусы
- Ограниченный функционал редактора: нет возможности работать со слоями, выделять фрагменты изображения, обрезать, накладывать их на рабочее поле, отсутствуют инструменты «Кисть», «Пипетка» и т. д.
- Нет возможности на одном экране работать одновременно с несколькими баннерами.
Canva — удобный и простой сервис с большой библиотекой бесплатных изображений и шаблонов оформления. Правда, отсутствуют многие полезные инструменты и функции более продвинутых графических редакторов, но новичок вполне может обойтись без них, особенно если дизайн простой и минималистичный.
Adobe Spark
- Интерфейс на русском языке: нет.
- Авторизация: требуется регистрация или вход через аккаунт в Facebook или Google+.
- Стоимость: основные функции бесплатны, но есть платная подписка от 9,99 $ в месяц.
Adobe Spark — это веб-приложение, им можно пользоваться с десктопа, также есть версия для iOS. У приложения три основных назначения:
- Создание графического контента.
- Создание видеороликов.
- Верстка веб-страниц.
Сервис позиционирует себя как инструмент для тех, кто не обладает навыками работы в сложных графических редакторах. Проверим, насколько легко с его помощью создать баннеры.
Спускаемся вниз страницы, нажимаем Create a graphic.
Сервис предлагает воспользоваться шаблонами, но мы будем создавать баннер самостоятельно, поэтому нажимаем Start from scratch.
Теперь нужно выбрать размер. Мы будем вводить параметры вручную, поэтому выбираем Custom и вводим значения ширины и высоты. Затем открывается библиотека изображений. Можно использовать что-то из выборки или ввести запрос в поисковую строку, чтобы система подобрала подходящие картинки. Также можно загрузить фото с компьютера, нажав Upload.
Переходим в редактор.
Начнем с логотипа. Чтобы загрузить его с компьютера, нажимаем на круглый значок с плюсом и выбираем Photo.
Затем выбираем расположение логотипа и корректируем размер.
Теперь добавим текст. Для этого нажимаем ту же круглую кнопку с плюсом и выбираем Text. Здесь интерфейс не такой простой и понятный, как в предыдущем сервисе, чтобы откорректировать каждый параметр (цвет, стиль шрифта, задний фон и т. д.), приходится заходить в разные вкладки на панели сбоку справа. Например, мне долго не удавалось понять, как сделать задний фон текста прозрачным. Оказалось, что фон текста редактируется во вкладке Shape. Зато набор инструментов этого редактора гораздо шире, здесь много интересных возможностей и функций.
Осталось добавить кнопку. Для этого снова нажимаем круглый значок с плюсом, выбираем Icon. Там много форм и размеров, выберем прямоугольник со скругленными краями. В этот раз кнопка будет не со стрелкой, а с призывом к действию. Пишем текст, накладываем на кнопку и выбираем цвет букв.
Сохраняем, нажав Download справа вверху. Когда один баннер готов, можно оставить макет и поменять размеры, перейдя во вкладку Resize на правой боковой панели и выбрав вариант Custom.
Источник