Создание сайта/блога на WordPress — что может быть проще!
как сделать баннер в фотошопе
Рубрика: Все для вебмастера

Часть2: как сделать баннер в фотошопе для сайта

31 комментарий   

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

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

Ну не буду долго тянуть кота за яйца :razz: поехали…

Делаем баннер в Adobe Photoshop

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

Затем уже можно запустить Photoshop и создать новое изображение с прозрачным фоном (File/New) размером, например, 468 на 60 пикселей;
kak-sdelat-banner-v-Photoshop-001Выводим на экран панель работы со слоями “Layer”.
kak-sdelat-banner-v-Photoshop-002В качестве отдельного слоя создаём фон – здесь советуем особо не экономить и любой сколько-нибудь заметный элемент баннера размещать на отдельном слое, вплоть до того, что под каждую букву слогана выделить свой слой.
kak-sdelat-banner-v-Photoshop-003На отдельном слое – рекламный призыв, а так же заранее подготовленную по размерам фотографию, эмблему.
kak-sdelat-banner-v-Photoshop-004Компонуем все элементы баннера и обязательно создаём несколько возможных вариантов, которые не мешает обсудить с коллегами.
kak-sdelat-banner-v-Photoshop-005Все варианты, пока в многослойном варианте, сохраняем в отдельных файлах в формате psd (заметим, jpg-формат «не помнит» информацию о слоях, он все слои соберёт в один и в будущем разбивка уже будет невозможна).

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

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

Как сделать баннер в фотошопе анимированным (gif-файл)? И с этой задачей наш родной Фотошоп справится на ура! Открываем вкладку — окно — Анимация.
kak-sdelat-banner-v-Photoshop-006

Далее в этом окне нужно добавить кадры, путем скрытия и показа слоев. Так же определим скорость показа кадра и его зацикливание!
kak-sdelat-banner-v-Photoshop-007

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

Здесь потребуется точно определить все:

  • временные параметры поведения каждого слоя;
  • поведение его прозрачности;
  • траекторию перемещения.

Дело совсем не сложное, но заставит почувствовать, насколько сложна эта профессия сценариста-режиссёра.

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

Только одно предупреждение. Чтобы сохранить анимированный рекламный баннер в gif-формате, необходимо использовать команду File / Save Optimized As. Привычное File / Save As здесь не работает, вернее, не создаётся анимированный gif.

Вот такой вот баннер я создал за 5 минут! Он конечно далек от совершенства, но ведь моей целью было показать Вам возможности Фотошопа и я с этим справился! :razz:


P.S: Надеюсь эта статья помогла Вам и теперь Вы без труда сможете сделать любой баннер самостоятельно! В знак признательности за мой труд, прошу поделиться ссылкой на данную статью с теми, кого интересует вопрос — как сделать баннер в фотошопе!


Да, чуть не забыл рассказать о своей находке :razz: В прошлой статье, я рассказывал о том, что купил видео курсы Сергея Буйбарова, о том как создавать баннеры и зарабатывать на них! После детального изучения (целый день смотрел видео трюки и фишки Сережи) я понял, что подобного рода курсы, очень нужны в Рунете! Советую к приобретению однозначно…

До скорого в новой статье!


Савельев Владимир Александрович
С уважением, Владимир Савельев

Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее
Продвижение в социальных сетях - сервис SocLike.ru
Прочтите еще:
Обсуждение статьи: 31 комментарий


  1. Никита Волков 2015-04-21 в 17:14 

    Статью добавлю в закладки) На днях надо сделать баннер))

    ВОВА ПОЗДРАВЛЯЮ ТЕБЯ С РОЖДЕНИЕМ ДОЧЕНЬКИ!!!! Юхууу!! Это прекрасная новость!

    Так же поздравляю тебя с выпуском твоего первого информационного продукта!!! Кстати, мы с тобой в один день выпустили по информационному продукту) Тоже сегодня доделал свою систему))

    Ответить
    • Владимир Савельев 2015-04-21 в 18:12 

      Огромное спасибо Никита :razz: Сегодня фоточки дочки получил, но сказали пока нельзя показывать, так как сглазят :sad: Так что чуть попозже :oops: И еще в дизайн ее нарисовать надо :arrow:

      Ответить
      • Игорь 2015-07-29 в 17:45 

        Володь,вот в дизайне и покажешь. ;-)

      • Саня Сабегатулин 2015-07-31 в 13:05 

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

      • Игорь 2015-09-23 в 20:36 

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

    • Владимир Савельев 2015-04-21 в 18:13 

      Кстати ты же спрашивал на счет ОМ2, так вот теперь я могу официально продавать этот замечательный скрипт :roll: Но об этом потом! Сегодня я взял выходной :razz:

      Ответить
      • Никита Волков 2015-04-21 в 23:38 

        Классно как! Ты пока не забирал её с роддома, значит, да?
        Скоро на шапке появится ещё один ребетёнок))
        Ооо! Это прекрасная новость! Когда соберусь покупать, то тоже только через тебя буду брать! Будет интересно узнать подробнее об этом!

      • Владимир 2015-04-23 в 10:36 

        Нет Никита они еще в роддоме после кесарева недельку там будут :cry:

  2. Маргарита 2015-04-22 в 10:41 

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

    P.S. Большое спасибо за справочник, уже изучаю, очень полезная информация для такого новичка как я ;-)

    Ответить
    • Владимир 2015-04-23 в 10:40 

      Спасибо Маргарита за поздравление :razz: Маленькие дети прикольные такие :roll:

      Если будут какие-либо вопросы по справочнику пиши проконсультирую на счет тегов!

      Ответить
  3. Дмитрий 2015-04-23 в 09:46 

    Я вот только одного понять не могу…. Профессия блогер. А зачем блогеру делать баннеры? Для этого есть успешные люди с навыками, опытом, образованием.
    Не проще ли им поручить сделать баннер. А у Вас останется время на выполнение более великих задач — например на масштабирование бизнеса.
    Не знаю. Я не понимаю людей, которые пытаются сделать все сами. Ну давайте тогда сами будем стричь себя, сами себе зуб выдергивать.
    Это мое мнение. Спасибо.

    Ответить
    • Владимир 2015-04-23 в 10:46 

      Дмитрий ты абсолютно прав на все 100! Я бы даже 200 сказал… Но как ты знаешь основная масса людей, очень любят экономить, или делать все сами))))

      Отсюда и цифры 9 401 показ в месяц по этому запросу! Хотя если ресурс серьезный я бы тоже заказал работу у профи :roll: А если для других целей, то почему бы и не попытаться сделать самому? Авось получится? :razz:

      Ответить
      • Дмитрий 2015-04-24 в 21:08 

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

      • Игорь 2015-07-29 в 17:48 

        Дмитрий,а вы вообще сам залезли настраивать,либо по какому то видео уроку?

      • Саня Сабегатулин 2015-07-31 в 13:18 

        Да, Вов, ты абсолютно прав. Я и сам такой же. Пусть сделаю не так круто, как профессионал, но зато сам и бесплатно :smile:

  4. Джек Хелпер 2015-04-23 в 13:18 

    Довольно таки неплохой баннер получился))

    Ответить
    • Владимир 2015-04-23 в 17:55 

      Джек привет! Да это так плюшка для демонстрации, на самом деле можно создать действительно классный баннер если часа 3-4 посидеть :razz:

      Ответить
      • Джек Хелпер 2015-04-23 в 17:58 

        По мне так очень даже хорошо выглядит баннер. Видел намного намного хуже. ;-)

  5. Виталий Охрименко 2015-05-21 в 00:51 

    Классная статья, уверен многим будет полезна.

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

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

    Ответить
    • Владимир Савельев 2015-05-22 в 20:50 

      Виталий очень просто это делается с помощью фотошопа скрипта и верстки :razz: В будущем напишу более подробней

      Ответить
      • Игорь 2015-07-29 в 17:50 

        Володь,а темы статей так и наваливаются. Ты хоть в блокнотик записывай.
        Я обычно так делаю.

  6. Саня Сабегатулин 2015-06-24 в 10:03 

    Во, а я только на той неделе задумался о том как делаются баннеры. Так как нашел партнерку по автотематике, но у них своих баннеров и т.п. нет. Вот и задумался сделать крутой баннерок своими руками. Спасибо за информацию, буду пробовать творить :smile:

    Ответить
  7. Екатерина 2015-06-30 в 23:48 

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

    Ответить
    • Саня Сабегатулин 2015-07-31 в 13:20 

      Ну наверное все-таки не совсем просто, но если серьезно заняться этим вопросом, то все должно получится.

      Ответить
  8. Ольга 2015-08-12 в 22:45 

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

    Ответить
  9. дима 2015-10-15 в 00:52 

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

    Ответить
    • Владимир Савельев 2015-10-15 в 21:40 

      Делают это в графическом редакторе например в фотошопе с помощью фильтров! Кто то думает, что так картинка будет уникальна — хотя на самом деле это ни так… а кто то просто придерживается своего стиля )

      Ответить
  10. дима 2015-10-15 в 00:54 

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

    Ответить
    • Владимир Савельев 2015-10-15 в 21:37 

      Как раз для этого и существует подписка на комментарии снизу формы добавления! Приходит уведомление и сразу по ссылке переходите в нужное место =) А если заведу форум, на блог точно времени уже не будет…

      Ответить
      • Игорь 2015-11-09 в 19:37 

        Володь,интересные тебе предложения вносят. ;-)
        Ну тогда лучше на блоге отдельную страничку для общения открыть

  11. iphone 4 2016-03-22 в 10:17 

    Добрый день! Вы видимо читаете мои мысли, только подумала что нужно инфу искать как делать баннеры, а вы уже все сделали и урок записали. Огромное мерси, урок в закладки! Я все больше погружаюсь в изучение фотошопа.

    Ответить

Добавить комментарий

Прочитать Соглашение и Правила блога

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?:

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Рекомендую покупать шаблоны тут
русские шаблоны для wordpress