Простое правило: Чем больше информации вы будете пытаться донести большему количеству людей, тем меньше людей ее прочтут - shikardos.ru o_O
Главная
Поиск по ключевым словам:
страница 1
Похожие работы
Простое правило: Чем больше информации вы будете пытаться донести большему количеству - страница №1/1

Использованы материалы сайта http://gimp.nas2.net

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



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/final.gif

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



Чем больше информации вы будете пытаться донести большему количеству людей, тем меньше людей ее прочтут

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

Следующее важное правило для баннеров:

Не в многообразии своем будут замечены

Что я имею в виду. Баннер должен нести какую-то одну основную мысль, и все в баннере этой основной мысли должно подчиняться. Хороший баннер состоит всего из нескольких элементов. Конечно же баннер должен быть ярким и заметным, но не забывайте, что присутствие вашего баннера на странице не должно раздражать тех людей, которым ваши "симпиляторы" или "массажные очки" не интересны. Каким бы привлекательным не было то что вы предлагаете, но таких будет большинство. И если вы не хотите навсегда вызвать у них отвращение к вашим "симпиляторам", то постарайтесь сделать так, чтобы баннер выглядел как можно гармоничнее.

Для этого могу порекомендовать уделить внимание используемым цветам. Их должно быть 2 - 3, по возможности ближе к природным цветам. Ядовитые (неоновые, кислотные) цвета вряд ли у нормального человека вызовут чувство гармонии smile.

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

Также следует подумать, насколько приятно будет человеку созерцать беспрестанное мелькание множества пестрых кадров. Не советую применять более 4 кадров анимации (если анимируется весь баннер, а не отдельный элемент), так как читателю попросту надоест пересматривать все эти картинки (тем более текст), конца-краю которым не видать. И даже не пытайтесь "поправить дело" увеличением частоты показа кадров! Это надоест еще быстрее.

Многие люди платят деньги за просмотр вашего баннера

Представьте себе! Не всем еще доступен безлимитный и быстрый Интернет. Так давайте же не будем испытывать терпение этих людей и вынуждать их фильтровать слишком большие изображения, которые подчас грузятся дольше всей страницы. Будем верить в светлое будущее, но пока: тяжелый баннер - плохой баннер, и точка.



Интригующие и призывающие к действию заголовки

Как мы уже разобрались - цель баннера не дать информацию, а призвать к действию. Чаще всего - посетить какой-то ресурс, где эта информация изложена. Заголовки беннеров строятся немного не так, как заголовки газет и журналов. Лучше чтобы заголовки баннера не содержали в себе всю ту информацию, которую вы доносите, а интриговали, призывая узнать больше проследовав туда, куда вы зазываете.



Плохой пример: "Мы вырастили лучший сорт кукурузы! / kukuruzy.net /". Читатель уже все знает, зачем ему еще открывать лишнюю страницу.

Хороший пример: "Мы вырастили такое, что вам и не снилось! / kukuruz.nic /". Очень любопытно посмотреть, что же там за монстров таких вырастили.

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



Иллюстрируйте мысль

Действительно, знакомая с детства ситуация - люди в первую очередь обращают внимание на картинку, а уж потом на текст. Поэтому картинки на баннере - еще более важный элемент, чем заголовок. Это своего рода заголовок для заголовка, потому к иллюстрации применимы те же правила, что и для заголовка. Т.е. она тоже должна интриговать, гармонировать и.д. И наверно вовсе нет нужды рассказывать, насколько двигающаяся картинка лучше статичной.



Правильный размер

Создавая баннер, советую принять за правило - не ставить размер изображения "наобум", думая, что потом, при необходимости, его можно будет подогнать под необходимый размер. Ведь баннер - это вам не просто так картинка! В сети распространены давно ставшие стандартами следующие размеры баннеров: 728х90, 468х60, 240х400, 120х600, 160х60, 120х60, 100х100, 88х31.

Итак, теории пока думаю достаточно. Давайте уже приступим к практике.

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

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

mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/final.gif

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



Чем больше информации вы будете пытаться донести большему количеству людей, тем меньше людей ее прочтут

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

Следующее важное правило для баннеров:

Не в многообразии своем будут замечены

Что я имею в виду. Баннер должен нести какую-то одну основную мысль, и все в баннере этой основной мысли должно подчиняться. Хороший баннер состоит всего из нескольких элементов. Конечно же баннер должен быть ярким и заметным, но не забывайте, что присутствие вашего баннера на странице не должно раздражать тех людей, которым ваши "симпиляторы" или "массажные очки" не интересны. Каким бы привлекательным не было то что вы предлагаете, но таких будет большинство. И если вы не хотите навсегда вызвать у них отвращение к вашим "симпиляторам", то постарайтесь сделать так, чтобы баннер выглядел как можно гармоничнее.

Для этого могу порекомендовать уделить внимание используемым цветам. Их должно быть 2 - 3, по возможности ближе к природным цветам. Ядовитые (неоновые, кислотные) цвета вряд ли у нормального человека вызовут чувство гармонии smile.

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

Также следует подумать, насколько приятно будет человеку созерцать беспрестанное мелькание множества пестрых кадров. Не советую применять более 4 кадров анимации (если анимируется весь баннер, а не отдельный элемент), так как читателю попросту надоест пересматривать все эти картинки (тем более текст), конца-краю которым не видать. И даже не пытайтесь "поправить дело" увеличением частоты показа кадров! Это надоест еще быстрее.

Многие люди платят деньги за просмотр вашего баннера

Представьте себе! Не всем еще доступен безлимитный и быстрый Интернет. Многие еще "смотрят на мир" через рваные телефонные провода, мобильный GPRS или 3G. Но не многие из них правда платят за трафик по 3коп/Мб, как я smile. А знаете ли вы, что пользователи 3G мобильного Интернета во Владивостоке платят по 5руб/Мб? Так давайте же не будем испытывать терпение этих людей и вынуждать их фильтровать слишком большие изображения, которые подчас грузятся дольше всей страницы. Будем верить в светлое будущее, но пока: тяжелый баннер - плохой баннер, и точка.



Интригующие и призывающие к действию заголовки

Как мы уже разобрались - цель баннера не дать информацию, а призвать к действию. Чаще всего - посетить какой-то ресурс, где эта информация изложена. Заголовки беннеров строятся немного не так, как заголовки газет и журналов. Лучше чтобы заголовки баннера не содержали в себе всю ту информацию, которую вы доносите, а интриговали, призывая узнать больше проследовав туда, куда вы зазываете.



Плохой пример: "Мы вырастили лучший сорт кукурузы! / kukuruzy.net /". Читатель уже все знает, зачем ему еще открывать лишнюю страницу.

Хороший пример: "Мы вырастили такое, что вам и не снилось! / kukuruz.nic /". Очень любопытно посмотреть, что же там за монстров таких вырастили.

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



Иллюстрируйте мысль

Действительно, знакомая с детства ситуация - люди в первую очередь обращают внимание на картинку, а уж потом на текст. Поэтому картинки на баннере - еще более важный элемент, чем заголовок. Это своего рода заголовок для заголовка, потому к иллюстрации применимы те же правила, что и для заголовка. Т.е. она тоже должна интриговать, гармонировать и.д. И наверно вовсе нет нужды рассказывать, насколько двигающаяся картинка лучше статичной.



Правильный размер

Создавая баннер, советую принять за правило - не ставить размер изображения "наобум", думая что потом при необходимости его можно будет подогнать под необходимый размер. Ведь баннер - это вам не просто так картинка! В сети распространены давно ставшие стандартами следующие размеры баннеров: 728х90, 468х60, 240х400, 120х600, 160х60, 120х60, 100х100, 88х31.

Итак, теории пока думаю достаточно. Давайте уже приступим к практике.

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



Пускай наш баннер будет размера 160х60. Для начала давайте нарисуем ему рамочку. Цвет для рамки я выбрал серый. Залейте все изображение серым цветом с помощью Плоской заливки mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/res/icon_2_4/bucket-fill.png, потом Выделил все (Ctrl+A), Выделение - Уменьшить выделение на 1 пикс. и удалить выделенную область (клавишей Delete). Вот рамка и готова.

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

Итак, идем дальше. Теперь создадим фон для баннера, зальем градиентной заливкой и склеим с рамкой.



Слой – создать слой – название - ОК

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



Слой – создать слой – название – ОК

Предлагаю для покраски фона вместо Плоской заливки использовать Градиент.



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/2.gif

Выбрать инструмент градиентной заливки и закрасить слой.



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/3.gif

Следующий элемент (слой) - фон для надписи с адресом. Можно его сделать полосой через весь баннер. Это гораздо проще, но мы сделаем немного культурнее.

Выберем Прямоугольное выделение mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/res/icon_2_4/rect-select.png (R) и зададим радиус скругления углов около 15 пикс. (см. рисунок ниже).

mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/4.gif

Переместите выделение вот сюда:



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/5.gif

Теперь выделенную область можно закрасить.



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/6.gif

Наносим надпись. Для нее не нужно создавать отдельный слой, т.к. текст уже сам по себе создается на отдельном слое.



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/7.gif

Слева от адреса у нас осталось "гулять" свободное место. Используем его эффективно.

С помощью инструмента лассо нарисуйте стрелочку, закрасьте и скопируйте ее.

Выделенную область можно залить одним цветом и обвести другим:



Слой – создать слой – название «стрелки» – ОК

Инструментом лассо нарисовать стрелочку.

Не снимая выделения, выбрать инструмент заливка и закрасить.

Правка – копировать, правка – вставить. (Сделали две стрелочки)



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/8.gif

Теперь добавим самый важный элемент баннера - иллюстрацию. Как видите, тут я тоже допустил серьезный промах. Надпись гласит нам о каком-то скорпионе, на иллюстрации же видим нечто другое. Заметив такое несоответствие читатель улыбнется, почувствует себя победителем, разоблачившим подвох, и если и кликнет по этому баннеру, то скорее с целью посмотреть какие же еще ляпы допустили авторы этого "страшного кошмара" на своем сайте с таким неблаговидным названием.



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/9.gif

Как видите, наша картинка нарисована на белом фоне, от которого нам нужно избавится. Как вы уже догадались... smileМудрствовать не будем, пойдем "ленивым" путем. Выберите инструмент Выделение по цвету ( ). В его настройках нужно установить подходящее значение Порога. Кликните этим чудо-инструментом на белом фоне и он тут же выделится. Клавишей Delete удалите выделенную область.



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/10.gif

Помещаем картинку в нужное место инструментом Перемещение mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/res/icon_2_4/move.png (M).



mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/13.gif

Вот мы и подошли к тому, что баннер то у нас не простой, а анимированный. Подумайте сколько кадров анимации вы хотели бы использовать, что на них будет изображено. Я решил выбрать золотую середину - 4 кадра. Первые 3 кадра сделать чисто текстовыми, четвертый с иллюстрацией, чтобы не примелькалась.

Вот все 4 мои кадра:

mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/14.gif

 

mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/15.gif

 

mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/16.gif

 

mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/17.gif

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


  1. Фильтры – Анимация – Оптимизация (для GIF)

В изображениях слоев удалится лишняя повторяющаяся информация и откроется новое окно с изображением





  1. Делаем копию фонового слоя и перетаскиваем ее так, чтобы каждый слой был «проложен» фоновым



Склеиваем по два слоя: верхний с надписью и фоновый.

На верхнем слое нажать правую кнопку мыши и выбрать «Объединить с предыдущим»





В конце подготовки у вас должны в списке слоев остаться только слои с готовыми отдельными кадрами (у меня их 4).

mhtml:file://e:\documents%20and%20settings\администратор\мои%20документы\для%20класса\10\графика\gimp\рисуем%20правильный%20анимированный%20баннер.mht!http://gimp.nas2.net/image/20090402/18.gif

Теперь можете посмотреть анимацию перед сохранением через проигрыватель, который находится в том же меню. По умолчанию задержка между кадрами устанавливается в 100мс (0,1 секунды), и кадры будут мелькать так быстро, что вряд ли вам это понравится. Чтобы задать нормальную задержку, поменяйте в названии каждого слоя с кадрами число 100 на большее. Надеюсь все помнят, что 1000мс = 1 секунда. Когда проигрыватель (который можно при этом даже не останавливать) наконец покажет то, что вы задумали, анимацию можно сохранить как GIF-файл.

Файл – Export As – Выбрать папку для сохранения – Выбрать формат файла Изображение GIF. В открывшемся окне поставить галочку «Сохранить как анимацию».

Вот и все.



готовый анимированный баннер

Задание:

Создать анимированный баннер на тему рекламы своей школы, класса или образования.

Размер баннера 468х60

Сохранить в GIF формате.

Вставить в файл презентации.

Примеры баннеров http://www.rle.ru/info/banners/