IGROMANIA.RU
Registration
MoreLess
Популярные за неделю
Популярные за месяц
Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы» Кино > Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы»
Ассасины и тамплиеры на большом экране. Удался ли эксперимент?
Комментариев: 49
Самые интересные проекты января: от Gravity Rush 2 и Resident Evil 7 до Yakuza 0 и Tales of Berseria Спец > Самые интересные проекты января: от Gravity Rush 2 и Resident Evil 7 до Yakuza 0 и Tales of Berseria
Продолжение Gravity Rush, возвращение «Обители зла», приключения в мире японской мафии и прочие интересности.
Комментариев: 7
Planet Coaster: парк развлечений своими руками Рецензии > Planet Coaster: парк развлечений своими руками
С самого детства мечтали построить идеальный парк аттракционов? Planet Coaster от Frontier Developments это позволяет!
Комментариев: 3

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

Это не так сложно, как кажется на первый взгляд. Усвоив основные принципы анимирования GIF-файлов, вы сможете создавать не просто баннеры, а настоящие произведения искусства. Работать мы с вами будем в одной из лучших программ для GIF-анимации — 3D GIF Designer.

Основы моделирования

Рис. 1. Главное окно программы.

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

1.Окно структуры — по мере работы с заготовкой баннера в этом окне будут отображаться все основные элементы. Кликните на любой из них — в окне настроек появятся все функции данного элемента.

2.Рабочая область — здесь расположена заготовка будущего баннера.

3. Окно настроек — в этом окне отображаются настройки элементов баннера. Выделение можно сделать как в окне структуры, так и на рабочей области.

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

Определимся с размером изображения. Пусть это будет стандартная болванка размером 468x60 пикселей. Если вы ничего не меняли в настройках программы, наша заготовка уже должна иметь такой размер. В противном случае заходим в меню View/Animation Size и выбираем там нужные габариты. Здесь же находится пункт Custom Size (произвольный размер), сейчас он нам не нужен, а вот в будущем, когда вы начнете делать свои баннеры с нестандартным размером, вам придется часто пользоваться этой функцией. Установим фоновый цвет баннера. Для этого в окне структуры нажимаем на кнопку Background — в окне настроек появится меню свойств цвета.

Украшательства

Определимся с фоном. Нажимаем на кнопку From: Color и выбираем основной цвет. Как только вы это сделаете, заготовка будет перекрашена. Теперь в меню Depth (глубина) установим значение в 2 пикселя: по краям заготовки появятся каемочки. Этот параметр не относится напрямую к анимированию — просто украшательство. Нажимаем на кнопку Highlight: Color и выбираем белый цвет. Теперь нужно определить цвет теней — кликаем на кнопку Shadow: Color и выбираем понравившийся вариант.

Рис. 2. Стандартная заготовка для баннера. Размер можно поменять в любой момент.

В интернете вы наверняка видели баннеры, имитирующие системные сообщения Windows. Сделаем нечто похожее. Создадим строку названия (title bar) — это синяя полоса сверху любого окна, где обычно пишется название программы. Для того чтобы у нас на заготовке была такая же, заходим в меню Insert (вставка) и выбираем пункт Rectangle — на заготовке появится новый элемент. Необходимо закрасить его в синий цвет. Для этого снова нажимаем на кнопку From: Color и определяем оттенок. Растянем новый объект: можете использовать мышку (растягиваем точно так же, как и любое окно в Windows) либо воспользоваться параметрами настроек блока Size в окне настроек.

Чтобы добавить на баннер надпись, снова заходим в меню Insert и выбираем пункт 3D Text — на заготовке появится новый объект. Не удивляйтесь, если его размер слишком большой, габариты можно легко подправить при помощи мышки. В окне настроек устанавливаем переключатель в положение Simple text и печатаем текст сообщения в расположенном чуть ниже окне.

Теперь необходимо задать фон для надписи — желательно, чтобы он соответствовал фону title bar. После этого останется только разместить надпись в верхнем левом углу заготовки на строке названия. Для того чтобы title bar смотрелся реалистичней, добавим на него несколько кнопочек, которые обычно располагаются в правом верхнем углу любого окна (закрыть, свернуть, развернуть). Для примера определим только одну кнопку — «Закрыть». Заходим в меню Insert, выбираем пункт Preset и в раскрывшемся окне ищем кнопку Button Close. На заготовке появилась соответствующая иконка, ее-то и нужно разместить в правом углу title bar.

Рис. 3. Меню выбора цветов для фона, текста и теней.

Еще немного красоты

Продолжим украшать нашу заготовку. Допустим, вы создаете «предупреждающий» баннер. В Windows в таких случаях на сообщении выводится восклицательный знак. Добавим этот элемент на форму. Заходим в меню Insert/Preset и кликаем на кнопку Exclamation Icon: на баннере появился соответствующий знак. Разместим его под основным сообщением.

Пришло время написать основной текст нашего послания интернетчикам. Перемещаемся в меню Insert/3D Text, в окне настроек ставим кнопочку в положение Simple Text. Не забудьте прописать сам текст сообщения в окошке рядом. После этого устанавливаем цвет шрифта и цвет фона надписи (как это делать, вы уже знаете).

Чтобы баннер смотрелся еще красивее, добавим к нему кнопку Оk. Возвращаемся в Insert/Preset и жмем на пункт Button Ok. Оформление баннера закончено. Ваша заготовка должна выглядеть приблизительно как на рис. 5.

Рис. 4. Выделение баннера рамкой.

Рис. 5. Финальная версия баннера без анимации.

На нашем диске

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

В движении — баннер

Сделаем так, чтобы по баннеру двигался указатель мышки и нажимал на кнопку Ok. Добавим указатель. В меню Insert/Preset кликаем на параметр Cursor: на заготовке появится указатель в форме стрелки. Не снимая выделения, заходим в меню Sprite/Sprite Motion и нажимаем на кнопку Linear Motion. На баннере должны отобразиться два кружочка: зеленый находится там, где размещен указатель мышки, а красный — в конечной точке следования указателя, на кнопке Ok. Чтобы переместить метки, просто щелкаем по ним левой кнопкой мышки и, не отпуская кнопки, тащим указатель.

Теперь нужно сделать так, чтобы в момент, когда указатель достигнет кнопки Ok, она нажималась. В меню Insert/Preset выбираем пункт Button Ok pressed. На заготовке появится изображение кнопки в нажатом состоянии. Располагаем эту картинку поверх изображения не нажатой кнопки. Теперь в меню Sprite/Sprite Appearance кликаем на кнопку Add Sprite Appearance. В окне настроек указываем время, которое указатель находится над кнопкой. Время изменяется бегунками Start step (когда указатель только подошел к кнопке) и End step (указатель отползает от кнопки).

Если запустить анимацию, мы увидим, что когда указатель курсора достигает кнопки, он скрывается под ней. Чтобы исправить этот недочет, найдем в окне структуры и нажмем левой кнопкой мышки на пункт Sprite 8. Обратите внимание, что восьмой спрайт вы выбираете только в том случае, если делали баннер в точности так, как описано в данной статье: в других ситуациях нужно определить тот раздел Sprite, в котором вы устанавливали кнопку Button Ok pressed. Снова заходим в меню Sprite и нажимаем кнопку Move Sprite Down (to Back) — после этого указатель курсора не будет заходить под кнопку.

Виды баннеров

Рассмотрим основные виды баннеров, которые вы можете ежедневно обнаружить на многочисленных интернет-страничках.

Баннер-кнопка — выполнен в форме обычной Windows-кнопки, в ряде случаев может даже не содержать информацию о рекламируемом объекте. Пользователь инстинктивно кликает на такой баннер и попадает на сайт, где может получить всю необходимую информацию. В некотором смысле такие баннеры являются обманками, но про них почти все знают.

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

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

Flash pop-up — разновидность pop-up, но реклама появляется не в отдельном окне браузера, а на всплывающем Flash-модуле, содержащем обычно кнопку закрытия. Flash pop-up на сегодняшний день не самый распространенный, но самый, пожалуй, докучающий вид интернет-рекламы.

Content Ad — изображение рекламы намертво «приклеивается» поверх некоторых страничек сайта, избавиться от него можно, только обновив страничку. Иногда и это не помогает: приходится заходить на сайт повторно.

Skycraper, Streaming Skyscraper — узкие вертикальные графические баннеры, располагающиеся на полях сайта слева или справа.

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

* * *

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

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

Знаменитая серия отправляет в прошлое, чтобы рассказать историю о том, как Кадзума Кирю стал одним из самых известных мафиози.
Каждый год выходят десятки замечательных инди-игр, и 2016-й не стал в этом плане исключением. Выбор тройки лучших дался нам очень тяжело.
Продолжение Gravity Rush, возвращение «Обители зла», приключения в мире японской мафии и прочие интересности.
Выбираем лучшие игры, в которые можно сыграть с друзьями по сети.
Комментарии к статьям
Войти и прокомментировать                Войти под логином игромании | Зарегистрироваться
Главные новости
Самые комментируемые статьи за месяц:
Кино > Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы»
Спец > Лучший мой подарочек — это Xbox One S!
Спец > Достать геймпад и плакать: игры, берущие за душу: от Ori and the Blind Forest и This War Of Mine до BioShock Infinite и Life is Strange
Спец > Игра в кубики. В чем сила Minecraft?
Рецензии > Соборы в небесах. Обзор Space Hulk: Deathwing
Спец > Влюбиться в убийцу: история серии Assassin’s Creed
Железный цех > В ожидании ZEN. Тестируем игровой компьютер Edelweiss MSI Edition на базе AMD 970
Спец > Горячий осенне-зимний сезон Windows Store. Главные игровые новинки
Спец > На скорости 160 км/ч, или Как работают гоночные игры
Прямым текстом > Darksiders: Warmastered Edition — жизнеспособное чудище Франкенштейна
Поиск по сайту Игровые платформы: PC  |   X360  |   XONE  |   PS3  |   PS4  |   Wii  |   Wii U  |   PSP  |   Vita  |   NDS  |   3DS  |   Android  |   iOS
1997-2017 ООО «Игромедиа». Мнение авторов и посетителей сайта может не совпадать с мнением редакции. Полное или частичное воспроизведение материалов сайта и журнала допускается только с согласия редакции. Для прямого контакта с редакцией пишите на основную почту «Игромании.ру».
Пользовательское соглашение

КОММЕРЧЕСКИЕ ССЫЛКИ:

Ремонт посудомоечных машин Коломенская

Устройство и ремонт автомобиля

service-home.ru

Механизм выбора платформы позволяет отображать на страницах информационного портала материалы, относящиеся строго к выбранным платформам.

Каждый пользователь индивидуально выбирает для себя интересующие его игровые платформы.
 
Rambler's Top100 Яндекс цитирования