Практическая работа №27. Создание серии баннеров для графического оформления сайта.

Группа Т(О), ТГ(О), С(О)–24-02, 2025 год

Занятие по рабочей программе №43

Дисциплина: ОД.08 «Информатика»

Прикладной модуль 2. Введение в создание графических изображений.

Тема: Практическая работа №27. Создание серии баннеров для графического оформления сайта.

1. Цель занятия:

   1. Дидактическая:

• сформулировать представление студентов о компьютерной графике;

• выяснить понятие растровая и векторная графика;

• раскрыть алгоритм работы с интерфейсом графического редактора;

• выяснить принципы и методы создания изображений;

• систематизировать и обобщить знания при работе с компьютерной графикой;

• углубить и закрепить знания по дисциплине «Информатика».

Воспитательная:

• развивать коммуникативные способности;

• развивать аналитические способности;

• развивать творческий подход к процессу обучения.

• воспитывать самостоятельность, дисциплинированность;

• стимулировать студентов к изучению дисциплины;

• побуждать к формированию активной жизненной позиции;

• прививать уважение и любовь к будущей профессии.

Вид занятия: практическая работа.

Тип занятия: обобщение и систематизация знаний.

Форма проведения занятия: репродуктивная и эвристическая беседа.

Междисциплинарные связи:

Обеспечивающие Математика, Охрана труда, Безопасность жизнедеятельности.

Обеспечиваемые

Информационные технологии в профессиональной деятельности, и др.

Методическое обеспечение: опорный конспект.

Литература:

1. Филимонова, Е. В. Информатика и информационные технологии в профессиональной деятельности: учебник / Е. В. Филимонова. – Москва: Юстиция, 2019. – 213 с. – (Среднее профессиональное образование). - ISBN 978-5-4365-2703-1.

2. GNU Image Manipulation Program. Руководство пользователя.

3. Р. П. Борисов, М. А. Корнилов, М. В. Устинов, Н. Д. Шульгин. GIMP и Inkscape : электронное учебно-методическое пособие [Электронный ресурс] / Р. П. Борисов [и др.]; ФГБОУ ВО «Московский политехнический университет» ― Режим доступа: https://mpudelta.github.io/gimp-inkscape/

ХОД ЗАНЯТИЯ

1. Ознакомление с темой, целью и планом занятия.

Тема: ПР №27. Создание серии баннеров для графического оформления сайта.

Цель работы: Получить практические навыки работы по оформлению сайта баннерами.

ПЛАН

1. Способы создания баннеров.

3. Классификация баннеров.

4. HTML-баннер: как делать.

5. Как вставить HTML5-баннер.

6. 9 советов, как создать эффективный баннер.

1. Изложение и изучение нового материала, практическая работа.

ЛИТЕРАТУРА: [3], стр.

1. Способы создания баннеров

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

1.1. Привлечь специалиста или агентство

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

1.2. Создать интернет-баннер с помощью графического редактора

Даже если вы никогда не работали с графикой, создать блок рекламы самостоятельно вполне реально. Сложность способа в том, что создавать блок изображений придется «с нуля». Но на YouTube и на подобных ресурсах легко найти подходящие уроки. Чаще всего используются редакторы Paint, Photoshop, Gimp, CorelDRAW. Но могут быть задействованы и другие графические программы.

2. Конструкторы баннеров для сайта онлайн

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

2.1. Сервис Гифовина

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

Как создать креатив на этом сервисе? 

1. Если у вас есть фоновое изображение, загрузите его по кнопке «Добавить кадры».

1. Изображение загрузилось на сервис. Через инструменты меню вы можете добавлять к работе фигуры, текст, а также менять размер и подбирать эффекты анимации.

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

1. Когда закончите создавать креатив, нажмите «Готово». 

2.2. Google Web Designer

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

2.3. Онлайн-редактор Canva 

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

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

3. Классификация баннеров

Виды интернет-баннеров можно выделять по разным критериям. 

По площадке размещения

Глобально можно разделить баннерные изображения на два типа:

1) внутренние — располагаются на сайте рекламодателя;

2) внешние — размещаются на сторонних площадках.

В числе внешних площадок для кампании могут быть:

• сайты;

• выдача в поисковых системах;

• социальные сети — ленты новостей, сообщества, личные страницы;

• мобильные приложения. 

По размеру

• Широкий, Leaderboard. Обычно 728×90 пикселей.

• Полный, Full Banner. 468×60 пикселей.

• Большой прямоугольный, Large Rectangle. 336×280 пикселей.

• Средний прямоугольный, Medium Rectangle. 300×250 пикселей.

• Вертикальный, Skyscraper. 120×600 пикселей.

Большой популярностью пользуются web-баннеры 240 на 400 HTML5. Но размеры больше и меньше для блоков рекламы также активно используют. Подбор размера баннера для рекламы зависит от вида сайта и задач, которые он должен решать.

Распространенные размеры баннеров, источник: unisender.com

4. HTML-баннер: как делать

HTML-формат требует больше усилий, чем остальные виды креативов, однако даст ряд весомых преимуществ:

• может быть адаптирован под любую версию страницы сайта - и для мобильных устройств, и для просмотров с ПК;

• не повлияет на скорость загрузки сайта;

• имеет больше возможностей для интеграции с системами статистики;

• позволяет воплотить любые идеи с динамикой контента.

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

Ulead Gif и Easy GIF Pro

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

Adobe Edge Animate

Еще одна популярная программа для создания HTML5-баннеров. Может использоваться также и другой продукт от этого же разработчика - Adobe Animate CC. 

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

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

5. Как вставить HTML5-баннер

Способ вставки HTML5-баннера зависит от места сайта, в которое вы хотите поместить креатив, а также от используемой CMS. Например, в WordPress достаточно поместить скопированный код в необходимый виджет.

Для вставки баннера в шапку сайта потребуется найти файл header.php. А для размещения в тексте - просто скопировать необходимый код и разместить в формате HTML в статье. 

6. 9 советов, как создать эффективный баннер

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

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

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

2. Если вы создаете блок изображений самостоятельно, убедитесь, что код баннера для сайта или для e-mail написан правильно. В нем должна быть и картинка, и адрес ссылки, на которую ведет реклама.

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

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

5. В блоке рекламы может не быть текста. Но желательно добавить несколько лаконичных строк, которые зацепят внимание посетителя.

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

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

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

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

Пример такого креатива — слайдер с популярными товарами.

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

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

Контрольные вопросы

1. Что такое баннер?

2. Какие виды информации следует включать в баннер, чтобы привлечь целевую аудиторию?

3. Какие размеры баннера рекомендуются для использования на большинстве веб-сайтов?

4. Какие цвета и шрифты привлекают внимание и улучшают эффективность баннерного изображения?

5. Как создавать маркетинговые креативы?

ДОМАШНЕЕ ЗАДАНИЕ

1. Изучить теоретический материал по данной теме.

2. Выполнить Практическое задание: разработать баннер по рекламе вашей специальности.

3. Ответить письменно на контрольные вопросы.

Перечень рекомендуемых учебных изданий, Интернет-ресурсов, дополнительной литературы.

Основные источники:

1. Информатика. 10 класс : учебник для общеобразоват. организаций: базовый и углубленный уровни / [А.Г.Гейн , А.Б Ливчак, А.И. Сенокосов, Н.А. Юнерман]. – 4-е изд. – М. : Просвещение, 2018. – 272 с. : ил. – ISBN 978-5-09-058130-1

2. Информатика. 11 класс : учебник для общеобразоват. организаций: базовый и углубленный уровни / [А.Г.Гейн, А.И. Сенокосов]. – 6-е изд. – М. : Просвещение, 2019. – 336 с. : ил. – ISBN 978-5-09-072326-8.

Электронные источники:

1. Зимин, В. П.  Информатика. Лабораторный практикум в 2 ч. Часть 1 : учебное пособие для среднего профессионального образования / В. П. Зимин. — 2-е изд., испр. и доп. — Москва : Издательство Юрайт, 2023. — 126 с. — (Профессиональное образование). — ISBN 978-5-534-11851-3. — Текст : электронный // Образовательная платформа Юрайт [сайт]. — URL: https://urait.ru/bcode/514893

2. Зимин, В. П.  Информатика. Лабораторный практикум в 2 ч. Часть 2 : учебное пособие для среднего профессионального образования / В. П. Зимин. — 2-е изд. — Москва : Издательство Юрайт, 2023. — 153 с. — (Профессиональное образование). — ISBN 978-5-534-11854-4. — Текст : электронный // Образовательная платформа Юрайт [сайт]. — URL: https://urait.ru/bcode/514918

3. Мойзес, О. Е. Информатика. Углубленный курс : учебное пособие для среднего профессионального образования / О. Е. Мойзес, Е. А. Кузьменко. — Москва: Издательство Юрайт, 2020. — 164 с. — (Профессиональное образование). — ISBN 978-5-534-07980-7. — Текст : электронный // ЭБС Юрайт [сайт]. — URL: https://urait.ru/bcode/455803 .

4. Советов, Б. Я. Информационные технологии : учебник для среднего профессионального образования / Б. Я. Советов, В. В. Цехановский. — 7-е изд., перераб. и доп. — Москва : Издательство Юрайт, 2020. — 327 с. — (Профессиональное образование). — ISBN 978-5-534-06399-8. — Текст: электронный // ЭБС Юрайт [сайт]. — URL: https://urait.ru/bcode/450686 .

5. Новожилов, О. П. Информатика в 2 ч. Часть 1 : учебник для среднего профессионального образования / О. П. Новожилов. — 3-е изд., перераб. и доп. — Москва: Издательство Юрайт, 2020. — 320 с. — (Профессиональное образование). — ISBN 978-5-534-06372-1. — Текст : электронный // ЭБС Юрайт [сайт]. — URL: https://urait.ru/bcode/448995 .

6. Новожилов, О. П. Информатика в 2 ч. Часть 2 : учебник для среднего профессионального образования / О. П. Новожилов. — 3-е изд., перераб. и доп. — Москва: Издательство Юрайт, 2020. — 302 с. — (Профессиональное образование). — ISBN 978-5-534-06374-5. — Текст : электронный // ЭБС Юрайт [сайт]. — URL: https://urait.ru/bcode/448996

7. Гаврилов, М. В. Информатика и информационные технологии : учебник для среднего профессионального образования / М. В. Гаврилов, В. А. Климов. — 4-е изд., перераб. и доп. — Москва: Издательство Юрайт, 2020. — 383 с. — (Профессиональное образование). — ISBN 978-5-534-03051-8. — Текст: электронный // ЭБС Юрайт [сайт]. — URL: https://urait.ru/bcode/449286

Дополнительные источники:

1. Филимонова, Е. В. Информатика и информационные технологии в профессиональной деятельности: учебник / Е. В. Филимонова. – Москва: Юстиция, 2019. – 213 с. – (Среднее профессиональное образование). - ISBN 978-5-4365-2703-1.

2. Цветкова М.С., Информатика. Практикум для профессий и специальностей естественно-научного и гуманитарного профилей: : учеб. пособие для студентов учреждений сред. проф. образования / М.С. Цветкова, И.Ю. Хлобыстова. - 5-е изд., стер. - М. : Издательский центр "Академия", 2019. - 240 с. ISBN 978-5-4468-7901-4

Электронные источники:

1. Гаврилов, М. В.  Информатика и информационные технологии : учебник для среднего профессионального образования / М. В. Гаврилов, В. А. Климов. — 4-е изд., перераб. и доп. — Москва : Издательство Юрайт, 2021. — 383 с. — (Профессиональное образование). — ISBN 978-5-534-03051-8. — Текст : электронный // Образовательная платформа Юрайт [сайт]. — URL: https://urait.ru/bcode/469424

2. Акопов, А. С.  Компьютерное моделирование : учебник и практикум для среднего профессионального образования / А. С. Акопов. — Москва : Издательство Юрайт, 2023. — 389 с. — (Профессиональное образование). — ISBN 978-5-534-10712-8. — Текст : электронный // Образовательная платформа Юрайт [сайт]. — URL: https://urait.ru/bcode/517999

3. Демин, А. Ю.  Информатика. Лабораторный практикум : учебное пособие для среднего профессионального образования / А. Ю. Демин, В. А. Дорофеев. — Москва : Издательство Юрайт, 2023. — 133 с. — (Профессиональное образование). — ISBN 978-5-534-07984-5. — Текст : электронный // Образовательная платформа Юрайт [сайт]. — URL: https://urait.ru/bcode/516857

Преподаватель: Владимир Александрович Волков