Как сделать баннер для сайта. Часть 1.

20

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

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

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

На статических баннерах используется одно изображение без движения. Это изображение может представлять собою просто картинку, фон или картинку с надписями, либо просто надписи. Изображение может быть как в формате jpg, так и в формате gif (если картинка с анимационными эффектами).

Анимационные (GIF-баннеры) представляют собой несколько последовательно идущих друг за другом изображений, которые сменяют друг друга и создают «эффект движения». Смена каждого изображения происходит последовательно с учетом выставляемой выдержки ( задержки) времени каждого кадра. В данном виде баннера обычно используется несложный сценарий, плавность движений в нем зависит от количества промежуточных кадров, дающих визуальный эффект движения. Но при этом чем сложнее сценарий, тем больше «весит» баннер. Это тоже надо учитывать при создании анимационного баннера. Оптимальное количество кадров- 5-6 для такого вида баннеров.

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

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

Стандартные размеры горизонтальных баннеров

Стандартные размеры вертикальных баннеров

Стандартные размеры квадратных баннеров

Создание статического баннера для сайта
Для создания статического баннера вам пригодится фотошоп или любой другой графический редактор. Процесс создания достаточно прост и не требует больших усилий. Он состоит из следующих операций:
• выбираем размер баннера,
• приводим готовое изображение (фон, картинку, коллаж, анимированную картинку…) к размеру выбранного баннера,
• делаем внешнюю обводку баннера,
• пишем нужный текст,
• сохраняем полученный баннер в формате jpg, png или gif.

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

Вот такой баннер я сделала для своего сайта в фотошопе.

Или можно воспользоваться бесплатным онлайн-сервисом

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

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

создание статического баннера- 01

2- Меню «Макет» предполагает:
2.1 — выбор размера баннера ( размер по умолчанию, ваш индивидуальный размер баннера и стандартный размер баннера из выпадающего списка),
2.2 — выбор фона баннера : однотонный фон с выбором нужного вам цвета; фон градиентный- можно выбрать любой из предложенного списка; фон ( картинка, фон, коллаж ) ваш, который можно загрузить с вашего компьютера.

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

4- Выбираем меню «Текст»
создание статического баннера- 02

4.1 — в поле «текст» вводите построчечно необходимый вам текст,
4.2 – затем подбираете параметры шрифта: название, размер, цвет шрифта, а также поворот текста для каждой строчки введенного вами текста.
Нажимаете кнопку 3 и двигаете на самом баннере текст так, как вам больше нравится. Когда вы расположили текста так, как вам нужно, опять нажимаете кнопочку 3 и переходите к следующему пункту.

5- Меню «Воздействие». Перевод неправильный. Я бы назвала эту закладку выбор эффекта для текста. В данной закладке подбираете тень для каждой строчки текста вашего баннера. После нажатия кнопки 3 – видите эффект.
создание статического баннера- 03

6- Меню «Пограничная». Опять же «деффект» перевода. В данной закладке вам предлагается выбрать окантовку вашего баннера ( рамочку).
создание статического баннера- 04

7- Меню «Формат». Выбираете формат, в котором вы хотите сохранить свой баннер.
создание статического баннера- 05

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

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

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

11- Нажав кнопку «Получить коды» вы увидите код баннера, который вы можете скопировать и затем вставить непосредственно на свой сайт или в свою статью.

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

баннер сайта- 01

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

TEXT.RU - 100.00%

Если статья Вам понравилась, поделитесь в соц. сетях


podpiska-na-email Введите адрес вашей электронной почты:

20 комментариев

  • Николай Чернов

    Класс, Лора… оказывается, как обычно! Всё гениальное просто! Спасибо. Сейчас у меня нет времени, но обязательно воспользуюсь этим онлайн — сервисом и твоими подсказками, для создания банера на свой блог.

    • Лора Лора

      По крайней мере будешь знать , куда забежать, когда соберешься делать баннер))) Еще сделаю урок по анимационным баннерам)) Вдруг и такая информация кому-то пригодится)))

  • Светлана

    Какая хорошая подробная инструкция по созданию баннера, несомненно многим пригодится.

    • Лора Лора

      очень на это надеюсь))) Спасибо, Светик!!! думаю еще сделать продолжение, как сделать анимационный баннер! Он больше внимания привлекает)))

  • golodniy-kot

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

    • Лора Лора

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

  • Светлана

    Эх, Лора, эту бы статью мне пораньше прочесть. Как вспомню свои мучения над банером для конкурса- тоска берет. А оказывается, все довольно просто

    • Лора Лора

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

  • Людмила Винокурова

    Лорочка! Поздравляю со Старым Новым Годом!
    Спасибо за информацию! Сейчас много сервисов по изготовлению банеров, буду знать ещё один.

    • Лора Лора

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

  • Людмила

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

  • Арина

    Спасибо, Лора за совет и подробную инструкцию. Такой он-лайн сервис — настоящая находка для тех, кто не хочет или не может тратить время на изучение фотошопа. И в то же время, нужно сделать баннер ( как я поняла , Светлана столкнулась с такой задачей).

    • Лора Лора

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

  • Алекс Чмутов

    Благодарю за рекомендации!
    Делаю картинку размером 260х180 загружаю ее и накладываю текст кирилицей, только отображаются иероглифы..

    • Лора Лора

      Скорее всего вы выбрали шрифт для написания текста такой, который не совместим с русским языком… Попробуйте сделать надпись обычным стандартным шрифтом Arial, например)
      Если вы изначально выставили русский интерфейс и правильно выбрали шрифт, который корректно отображает кириллицу, то в принципе не должно быть кракозяблов.. по крайней мере у меня их не было…

  • Ольга

    Здравствуйте, Лора. Очень хороший и полезный у Вас сайт. У меня такой вопрос. Хотела зарегистрироваться на онлайн сервисе по созданию баннеров, но у меня что то ничего не получается. Подскажите, что я делаю не так. Вот что он мне пишет: prntscr.com/623eah. В поле «Полное Имя» я пишу свое имя.

    • Лора Лора

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

  • Ольга

    Спасибо за ответ, попробую сделать как Вы сказали

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Рейтинг@Mail.ru