Создание сложного анимированного баннера - SatSat.info
     
-Прошивки, ПО, софт для приемников эфирного цифрового телевидения DVB-T/DVB-T2 anarxistn
-Транспондерные новости 2019 bat333
-ТЕННИС SAN-GENARO
-Анекдоты 2019 krapov
-Фотоприколы...(здесь смешные/прикольные фотки на разные темы) 2018 krapov
-Афоризмы krapov
-Ш*А*ринг Бесплатные тесты одновременно на несколько пакетов bat333
-ТВ новости (Самые свежие) 2019 Maxsimus
-Транспондерные новости PakSat 1. 38E (C Band) Maxsimus
-Транспондерные новости TurkmenAlem (MonacoSat), 52°E Maxsimus
-Мультистрим на Astra 4A 4.8° East (приём, обсуждение и вопросы) vadiaravolk
-Российская Федерация: прошлое, настоящее, будущее. 2019 SergMorin
-BISS ключи на FEED. 2018 bat333
-Нaстройкa нa Intelsat 15-Horizons-2 85°E vitaliy89
-Обсуждения каналов и вопросы по настройке на Express-AM6 53°E vitaliy89
-Прозрачные Пиконы 220х132 merkuri
-Настройка Wicard juraperec
-Обсуждения каналов и вопросы по настройке Express-AM22 80°E vitaliy89
-Спутниковые новости одной строкой Maxsimus
-Транспондерные новости Eutelsat 21A (w6) 21.6°E Maxsimus
-Чемпионат мира 2022 peresihne
-КХЛ peresihne
-Транспондерные новости Hellas Sat 2, 39E Maxsimus
-16.0°E Транспондерные новости. 2018 Maxsimus
-Футбольное обозрение. 2019 SAN-GENARO
-Дії президента Зеленського. vovasumu01
-Спутниковый проект «МТС» ABS 2, 74.9°E (Только новости) Maxsimus
-Український гумор strenger
-Транспондерные новости Astra 19.2°E Maxsimus
-Ш*Г "Viasat Ukraine"? Poljak77
-Реальные приколы из жизни (без обсуждения) 4101-
-БАСКЕТБОЛ. peresihne
-Украина: прошлое, настоящее, будущее. 2019 Vokss
-4°W AMOS, транспондерные новости 2016.09 Maxsimus
-7.0°E Транспондерные новости 2018 Maxsimus
новые сообщения... остальные сообщения...




Разместите рекламу здесь! Напишите на skype VOPROS24


СМОТРИ ЛЮБИМЫЕ КАНАЛЫ С GLOBALSERVIS! Подключение ЗДЕСЬ!
СМОТРИ ЛЮБИМЫЕ КАНАЛЫ С GLOBALSERVIS!
Подключение ЗДЕСЬ!




Вернуться   SatSat.info > РАЗНОЕ > БОНУС (возможно здесь вы найдете для себя чтото полезное...)

Ответ
 
LinkBack Опции темы Опции просмотра
Старый 10.05.2008, 21:20   #1 (permalink)
alexgrin3 Меню пользователя alexgrin3 показать/скрыть дополнительную инфу?
учаcтник неактивен
85 126 258
online: 1мес0нед4д16ч20м
Луганская обл.
 
Аватар для alexgrin3
По умолчанию Создание сложного анимированного баннера

Создание сложного анимированного баннера

Не будем спорить, что именно называть "сложным" анимированым банером – здесь разговор пойдет о баннере, в котором БОЛЬШЕ трех фреймов. И больше 10. Ну, скажем, около 150. Интересно?

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

1.

наиболее существенный параметр индексированного изображения – количество цветов в его палитре. Важной задачей при создании нашего баннера станет сведение количества цветов к минимуму;
2.

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

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

очень сложно подготовить большое количество фреймов, соблюдая динамику и не допустить никаких ошибок, поэтому технология изготовления баннера из отдельных кадров, поочереди загружаемых в Ulead Gif Animator нам не подойдет. Баннер будем делать в Adobe (все исходники можно собрать в PhotoShop'e, a саму анимацию – в ImageReady)

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

1.

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

В случае если разрабатываемый баннер имеет цвет, отличный от белого, черного и серого, - скорее всего общий тон вашего баннера будет отличаться от основного тона страницы сайта. Теория вероятности штука сложная, но даже если вы делаете баннер с хитролиловым background`oм, и он попадает на похожий хитролиловый сайт (совершенно случайно) - скорее всего оттенки все же будут отличаться. Но баннеры со стандартным цветом background`а лучше оформлять в рамочку, можно тоненькую однопиксельную, можно цвета не сильно отличающегося от основного… Для того, что бы ту информацию, которую представляете в баннере ВЫ отделить от общей информации пространства чужого для вас cайта.
3.

Пора считать - background и обводка – это уже два цвета. Считать и контролировать количество придется все время.
4.

Внимательно подумайте – является ли необходимым присутствие на баннере иллюстраций? Допустим, да. Зачастую это действительно оправдано – человек, мельком взглянувший на баннер, рекламирующий компьютерный магазин легче зацепится взглядом за изображение монитора или мыши, чем то же самое, написанное словами. Если вы решили в баннере эти самые мониторы таки показать – заранее обработайте изображение – для того, что бы монитор был похож сам на себя, достаточно двух-трех цветов. Количество цветов продолжаем считать. В макете уже присутствуют минимум два слоя – подложка с обводкой и слой с картинкой. Кстати сразу можно использовать в качестве контура баннера самый темный цвет, присутствующий на картинке.
5.

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

ТЕПЕРЬ – предлагается метод порезки слова (любого другого элемента баннера) для создания динамического эффекта прорисовки элемента баннера на экране.

*

Впечатываете это слово, выбираете нужную гарнитуру и размер, в параметрах сглаживания шрифта устанавливаете NONE и делаете копию слоя, в меню Layer выбираете Type—>Render Layer – ваше название перестало быть текстом – это просто графический элемент, имеющий один (!) цвет.Дайте название слою – например NAME.
*

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

Нарисуйте на этом слое однопиксельную линию (на выбор – горизонтальную или вертикальную. Для горизонтально ориентированного баннера, да еще если в качестве тренировки рекомендую именно горизонтальную) контрастного цвета. Любого – этот цвет мы считать не будем, поскольку ЭТА линия в нашем дизайне используется как ИНСТРУМЕНТ, а не элемент баннера, поэтому лучше сделать ее ярким цветом, да еще и таким, чтобы гарантированно отличить от реальных деталей баннера.
*

В случае, если готовится таки горизонтальная порезка названия – которое у нас уже забито в предыдущем слое и сконвертировано в графику – выберите инструмент move (кнопка V на англицкой раскладке) и переместите линию в самый верх по отношению к верхнему пикселю вашего названия (можно вниз – направление принципиального значения не имеет, важна последовательность)
*

Ctrl-click на слое TEMP – вы получили SELECT прямоугольной области высотой в один пиксель. Click на слое NAME, Ctrl-Shift-J – и из вашего названия вырезалась в новый слой однопиксельная полоска. Click на слое TEMP, при активном инструменте Move стрелкой переместите вашу рабочую полоску на один пиксель вниз, Ctrl-click на слое TEMP, перейдите на слой NAME, Ctrl-Shift-J – вы получили еще один слой со второй вырезанной полоской из вашего названия. По этому алгоритму разрежьте на полоски все ваше слово – слои последовательно будут создаваться, и их имена будут иметь порядковые номера.
*

Создайте еще один слой, например со слоганом, описывающим суть рекламы. Цвет, опять же – из уже существующих в палитре. Параметр сглаживания текста – NONE.
*

Поскольку рассматривается самый простой вариант сложного баннера (извиняюсь за неудачный каламбур) другие возможные элементы баннера рассматривать не будем. Главное описать технологию. Это я говорю к тому, что сейчас приступаем к сборке заготовок в полноценную анимацию.

Если со слоями вы работали в PhotoShop`e, то сейчас самое время перейти в ImageReady – в меню File —> to —> Image Ready.

В меню Window выбрать Show Animation – появится свиток, в котором присутствует один фрейм. Сделайте все слои макета UnVisible, оставив Visible только подложку и рамочку.

*

В свитке Animation в левом верхнем углу нажмите на стрелочку – появится локальное меню свитка. Выберите команду New Frame – вы создали фрейм, который является дубликатом предыдущего – т.е. со включенным слоем с подложкой и рамочкой.
*

сделайте Visible слой с верхней полоской вашего разрезанного элемента. (возможно слой с названием "Name copy")
*

Создайте еще один New Frame – в нем уже будет подложка, рамочка и первый элемент, и сделайте Visible слой со второй полоской имени ("Name copy 2").
*

Таким образом – добавляя фреймы и включая слои прорисуйте все имя, и когда будут включены все слои имени обратитесь к свойству фрейма "delay" и измените время задержки на, допустим, величину в 5 секунд.
*

Создайте еще один фрейм, проверьте, чтобы параметр delay был маленьким, и включите видимость слоя с графикой (в нашем примере тот самый монитор).
*

Новый фрейм – и выключите Visible нижней полоски ИМЕНИ, и по соответствующей технологии в обратном порядке последовательно, пофреймово уберите ИМЯ.
*

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

И для начала достаточно. Параметр цикличности анимации установите в состояние Forever – и ваш баннер будет прокручиваться всегда.

Обратитесь к свитку Optimize, установите параметры gif - 4 colors – lossy:0 – No dither – Selective – No transparent

В свитке Animation в подменю Optimize Animation нужно отметить оба checkbox.

Запомните полученый gif (File—>SaveOptimizedAs) и запустите гиф – просмотреть его можно и из Image Ready напрямую, и через File—>Preview in в браузере, но если все сделано правильно – ваша анимация будет проигрываться без сдвигов и ошибок. Пример баннера, изготовленного по этой технологии:

– 186 фреймов, вес – 13 кило.

В заключении хотелось бы подчеркнуть тот факт, что эту технологию можно применять и для создания более сложной анимации – и при ограниченном количестве цветов можно изготавливать сложные и оригинальные баннеры.
Можно усложнить процесс прорисовки ИМЕНИ – слои с разрезанными полосочками продублировать (правая кнопка мыши на слое —>Dublicate Layer) и дубликатам задать прозрачность слоя 50% (как вариант), и при создании анимации генерить прорисовку сначала полупрозрачных слоев, затем непрозрачных.
Подобный эффект можно создать с прорисовкой вертикальных элементов – и при грамотной композиции элементов баннера и хорошей цветовой гамме баннер будет удачным.
Как вы могли заметить объект на слое TEMP в конечном дизайне нами не использовался. Это всего лишь инструмент для быстрого создания маски, которой вырезается элемент анимации. И маска эта не обязательно должна быть однопиксельной полоской – это может быть любая произвольная форма. Движение прорисовки также может происходить в любом направлении, хоть по диагонали, хоть сначала сверху, потом слева, потом еще откуда нибудь.

Удачных вам анимированных баннеров!
Источник: makeweb.narod.ru
вне форума  
4 спасибо:
Ответ


Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Выкл.


-Прошивки, ПО, софт для приемников эфирного цифрового телевидения DVB-T/DVB-T2 anarxistn
-Транспондерные новости 2019 bat333
-ТЕННИС SAN-GENARO
-Анекдоты 2019 krapov
-Фотоприколы...(здесь смешные/прикольные фотки на разные темы) 2018 krapov
-Афоризмы krapov
-Ш*А*ринг Бесплатные тесты одновременно на несколько пакетов bat333
-ТВ новости (Самые свежие) 2019 Maxsimus
-Транспондерные новости PakSat 1. 38E (C Band) Maxsimus
-Транспондерные новости TurkmenAlem (MonacoSat), 52°E Maxsimus
-Мультистрим на Astra 4A 4.8° East (приём, обсуждение и вопросы) vadiaravolk
-Российская Федерация: прошлое, настоящее, будущее. 2019 SergMorin
-BISS ключи на FEED. 2018 bat333
-Нaстройкa нa Intelsat 15-Horizons-2 85°E vitaliy89
-Обсуждения каналов и вопросы по настройке на Express-AM6 53°E vitaliy89
-Прозрачные Пиконы 220х132 merkuri
-Настройка Wicard juraperec
-Обсуждения каналов и вопросы по настройке Express-AM22 80°E vitaliy89
-Спутниковые новости одной строкой Maxsimus
-Транспондерные новости Eutelsat 21A (w6) 21.6°E Maxsimus
-Чемпионат мира 2022 peresihne
-КХЛ peresihne
-Транспондерные новости Hellas Sat 2, 39E Maxsimus
-16.0°E Транспондерные новости. 2018 Maxsimus
-Футбольное обозрение. 2019 SAN-GENARO
-борьба peresihne
-Дії президента Зеленського. vovasumu01
-Спутниковый проект «МТС» ABS 2, 74.9°E (Только новости) Maxsimus
-Український гумор strenger
-Транспондерные новости Astra 19.2°E Maxsimus
-Ш*Г "Viasat Ukraine"? Poljak77
-Реальные приколы из жизни (без обсуждения) 4101-
-БАСКЕТБОЛ. peresihne
-Украина: прошлое, настоящее, будущее. 2019 Vokss
-4°W AMOS, транспондерные новости 2016.09 Maxsimus
-7.0°E Транспондерные новости 2018 Maxsimus
-Профилактики и перерывы в вещании каналов VIVA TV «Восточный Экспресс» - «Телекарта Восток» Maxsimus
-Транспондерные новости AzerSpace 1/Africasat-1A 46°East Maxsimus
-Транспондерные новости Intelsat 3R, 43.1°W Maxsimus
-Транспондерные новости Eutelsat 7 West A & Nilesat 102/201, 7°W Maxsimus
-Сетанта Спорт lymmm
-Армения (прошлое,настоящее,будущее) Yujniy
-Керлинг peresihne
-Турция вчера, сегодня, завтра Yujniy
-UEFA Euro-2020 peresihne
-ПОГОДА в данный момент 2019 TUFTUF
-Азербайджан : Вчера , Сегодня и Завтра Yujniy
-Формула-1. Новости. 2019 peresihne
-OpenFox X8 Rusllan
-Все о кино и что с этим связано peresihne
-учимся правильно задавать вопросы alex2019
-Республика Беларусь сегодня bpali
-Satcom 4050 HD AC3 patron07
-Скорбим... 2019 peresihne
-Новости цифровой техники peresihne

–> Ваша реклама может быть здесь... пишите на Skype VOPROS24


Часовой пояс GMT +3, время: 01:02.


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

Перевод: zCarot
Powered by vBulletin®
Copyright ©, Jelsoft Enterprises Ltd.
SEO by vBSEO 3.6.0

Зарегистрирована на satsat.info Реклама может быть здесь...
satsat.info TV SAT спутник ключи тюнер код кодировка карты прошивки dreambox IPTV каналы
globo openbox biss via hotbird sirius amos
abs настройка тарелка программы
Page generated in 0.16522 seconds with 18 queries