Средства и методы создания статичных и анимированных баннеров

23

рекламируемого  сервера/услуг). Он должен быть оригинальным (запоминаться), возможно быть интригующим (пробуждать любопытство), но одновременно давать представление о характере  рекламируемого сервера/услуг и  создавать их положительный имидж. «Сухой» баннер с четким текстовым  изложением содержания сайта тоже не является верным решением - его CTR обычно крайне низок. Он не запоминается и  не создает положительного имиджа. Баннер помещается на странице веб-издателя и имеет гиперссылку на сервер рекламодателя. Одной из самых важных характеристик баннера является отношение числа кликов на баннер к числу его показов. Так, если баннер был показан на какой-либо странице 1000 раз, а нажали на него и, соответственно, имели шанс попасть  на сайт 50 человек, то отклик такого баннера  равен 5%. По статистике средний отклик («click/through ratio», CTR) у баннеров, используемых в WWW, - порядка 1%, и наблюдается тенденция  к его постепенному снижению. Используя  на баннере завлекающие, но мало относящиеся  к делу текст и картинки, Вы, возможно, привлечете больше заинтригованных  посетителей, но, с другой стороны, потеряете  действительно заинтересованных в  Вашем сервисе, а, следовательно, по-настоящему ценных пользователей. Однако, «сухой»  баннер с четким текстовым изложением содержания сайта тоже не является верным решением - его CTR обычно крайне низок. Он не запоминается и не создает  положительного имиджа. По-настоящему эффективный баннер должен быть хорошо выполнен художественно и технически (некачественный дизайн сразу говорит  о несолидности рекламируемого сервера/услуг), а также быть оригинальным (запоминаться), возможно, быть интригующим (пробуждать любопытство), но одновременно давать представление о характере рекламируемого сервера/услуг и создавать их положительный имидж. Для рекламных  носителей в Интернете, прекрасно  работает формула AIDA (attention, interest, desire, action), известная в традиционной рекламе. Формула представляет собой последовательность задач, которые стоят перед рекламным  обращением [6. C.154]:

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

 

 

 

24

2. interest - вызов интереса к предмету рекламы. Задача - за ту долю секунды, в течение которой пользователь обратил свой взгляд на рекламу, задержать его внимание и заинтересовать. Особое значение имеет - исполнение и рекламный креатив, апелляция к аудитории;
3. desire - стимуляция желания воспользоваться рекламируемым предложением;
4. action - действие. В большинстве случаев щелчок мышкой и переход на сайт рекламодателя, все последующие действия (включая участие, покупку и т.д.). Иногда дизайнеры помещают элементы баннера на прозрачную подложку. Графический формат GIF это позволяет.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

25

2. Примеры  создания баннеров

Заказчиком на создание анимационного  интернет-баннера является агентство  наружной рекламы «Ньютон», город  Дальнереченск. Агентство занимается изготовлением: баннерных растяжек, мобильных стендов, штендеров, табличек, визиток, вывесок, оракалом машин. Заказчику  необходим интернет-баннер для дальнейшего  размещения в среде интернета, либо печати, с целью информированности  потребителей о виде предоставляемых  им услуг. Следующим шагом является выбор формата для баннера. Выбраны 2 вида форматов: 120х60, 138х90.. Для изготовлении баннера выбран Photoshop.

Создаем первый баннер:

Пример №1

1. Создаем новый документ нужного нам размера и заливаем его нужным цветом.

 

 

 

 

 

 

2. Создаем прямоугольное  выделение с помощью инструмента  Rectangular marquee tool.
3. Нажимаем Q активировав маску quick mask. Применяем фильтр Distort>>Glass.

 

 

 

 

 

 

 

 

 

 

 

 

26

4. Двойным щелчком нажимаем на слое, чтобы активировать Blending Options.

 

 

 

 

 

 

 

 

 

 

5. Вставляем рисунок характеризующий  деятельность компании.

 

                             

 

6. Затем второй и третий.

 

 

 

 

7. Слева вставляем логотип  компании.

 

                              

 

 

 

 

27

8. Двойным щелчком нажимаем на слое, чтобы активировать Blending Options. Применяем стиль к слою.

 

                              

 

9. Пишем необходимый текст и используем второй слой для нижней строки текста.

 

 

 

     

10. Открываем ImageReady. Для первого кадра скроем все рисунки.

 

.

 

 

 

 

 

 

 

 

11. Дублируем кадры и по такому же принципу открывая остальные  слои. Для 3-го кадра поставьте время 0,2 сек. 4-го 0,1 сек, 5-го 0,2 сек., 6-го 0,1 сек., 7-го 0,2 сек.

28

 

Готовый вариант представлен на рисунке 2.1.

 

 

 

 

 

                                         Рисунок 2.1 Первый пример баннера

 

Пример № 2

1. Задаем размер баннера и заливаем его желаемым цветом. Я выбрала размер баннера 125х125. Также я добавила рамку вокруг баннера в 1 пх белого цвета.

 

 

 

 

 

 

 

 

 

2. Далее вставляем логотип  и закрепляем его за слоем, так  поступаем и со всем текстом интересующим нас.

 

 

 

 

 

 

3. Дальше открываем Окна > Анимация. Делаем видимым первый текстовый 

 

29

слой. Затем делаем «Создание копии  выделенных кадров». На этом кадре делаем видимым 2-ой текстовый слой и невидимым 1-ый и 3-ий. Аналогичные действия делаем для 3-го кадра,4-го, 5-го, 6-го и 7-го.

4. Выделяем все кадры и задаем  время отображения кадра.

5. Сохраняем баннер в GIF формате под WEB.

 

 

 

 

 

 

 

 

Так же заказчик попросил создать  логотип компании.

Пример № 3

1. Начинаем работу с создания нового файла(File>New) размером 120х90, и разрешением 300 dpi. Теперь выбираем Rectangle Tool (U) и нарисуем фон будущей картинки.
2. Применяем следующие параметры, щелкнув правой кнопкой мышки по слою. Blending Options>Gradient Overlay.
3. Параметры градиента:

 

                                       

 

 

 

 

30

                       

                        

 

 

 

 

 

31

4. Теперь выбераем Ellipse Tool (U) и рисуем силуэт яблока (логотип компании Apple). С помощью Add Anchior Point Tool вставляем несколько точек на круге и затем с помощью Convert Point Tool переместим элементы к центральной части яблока. Нажимаем Alt, когда работаем с Ellipse Tool (U) выреая часть яблока с правой стороны. Получиться следующее:

 

                                   

                                   

 

 

 

 

 

32

                                    

 

Параметры градиента:

 

                          

 

                                     

 

5. Выбираем Pen Tool (P) и нарисуем листик над яблоком, его можно исправлять с помощью Convert Point Tool.

 

 

 

 

 

 

 

 

33

                                           

 

Параметры слоя: Blending Options>Gradient Overlay

 

                                    

 

Параметры градиента

 

                         

 

 

 

 

 

 

34

                                    

 

                                            

 

6. С помощью Pen Tool (P) нарисуем с помощью Pen Tool (P) нарисуем блик на листике, вносить коррективы можно с помощью Convert Point Tool.

 

                                 

 

35

Параметры слоя: Fill 0%

 

                                      

 

Параметры градиента: от белого к прозрачному.

 

                                                

 

7. С помощью того же инструмента  – Pen Tool (P) нарисуем еще один блик, только на самом яблоке. С помощью Convert Point Tool можно вносить изменение в этот блик.

 

                                  

 

 

 

 

36

                                       

 

8. Вставим в яблоко фигуру белого цвета с помощью Pen Tool (P) и Convert Point Tool.

 

                                                        

 

                                                  

 

 

 

 

 

 

37

                                         

 

9. С помощью Ellipse Tool (U) нарисуем блик белого цвета на фигуре.

 

                                                  

 

10. Создадим новый слой и с помощью Brush Tool (B) (Opacity 20%, мягкая кисть размером 65 px) нарисуем еще один блик белого цвета.

 

                                                          

 

38

11. Нажимаем Ctrl и щелкаем мышкой по слоям, чтобы их выделить, затем нажимаем Create a new group. Сделаем копию новой группы и выберем Free Transform, чтобы отразить копию и поместить как на рисунке.
12. Создаем новый слой и с помощью стандартной черной кисточки (Opacity 20%) нарисуем тень под яблоком. Этот слой должен располагаться под всеми слоями яблока, но выше слоя отражения (в палитре слоев).

 

                             

 

 

 

 

 

 

 

 

 

14. Сделаем копию слоя с  тенью и с помощью Free Transform поместим копию ниже, применим следующие параметры  к копии: Fill 72% Blending Options>Color Overlay.

 

                                     

 

 

 

 

 

 

 

 

 

 

39

        

 

Пример готового логотипа представлен  на рисунке 2.2.

 

                                      

                                             Рисунок 2.2 Пример готового баннера

 

 

 

 

 

 

40

3. Технологии  печати и размещения баннеров

3.1 Технологии печати  баннера

 

Существует несколько видов  печати:

1. Широкоформатная печать;

2. Офсетная печать;

3. Шелкография (трафаретная печать);

4. Термоподнятие;

5. Тиснение;

6. Конгрев;

7. Цифровая печать;

8. Флексография;

9. Лазерная гравировка;

10. Тампопечать;

11. «Минитипографии» - ризографы, дупликаторы;

12. Цветная печать на принтере.

Широкоформатная печать. Так как  наша компания специализируется на широкоформатной  печати, начнем с нее. Этот вид печати применяется, главным образом, при  изготовлении наружной рекламы или  имиджевой рекламной продукции  для рекламы в местах продаж. Как  правило, широкоформатная печать осуществляется в единичных или небольших  количествах - это могут быть биллборды, баннеры, перетяжки для использования  в наружной рекламе, плакаты, постеры  или мобайлы, использующиеся для  оформления выставочных стендов  и рекламы в интерьерах магазинов  и, особенно, бутиков. Возможно создание безстыковых изображений шириной  в несколько метров и длиной в  несколько десятков метров и печать изображений на грузовом и автобусном транспорте. Печать осуществляется на высококачественном скоростном широкоформатном  плоттере. В качестве дополнительной услуги салоны широкоформатной печати обычно предлагают ламинирование продукции  для более длительного сохранения ее приличного вида. Скорость вывода и  качество широкоформатной печати в  последние годы существенно повысились, на рынок вышли новые производители  широкоформатных плоттеров, в связи  с чем стоимость широкоформатной  печати значительно снизилась. Например, печать одного баннера 3х6 метра (стандартный  щит 3х6 для наружной рекламы) может  стоить всего 2500-2700 рублей.