Отправляет email-рассылки с помощью сервиса Sendsay

MGraphics - всё от графики, до программирования и раскрутки.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Дистанционное обучение Web-дизайну: DW-Photoshop-Flash-PHP" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Ноябрь 2004   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Vulko

Статистика

2.761 подписчиков
-8 за неделю
←   Все выпуски   →

MGraphics - всё от графики, до программирования и раскрутки. Выпуск 60


Информационный Канал Subscribe.Ru
Mgraphics - всё о Photoshop, Flash, Illustrator, gif, 3D, Corel Draw, Swish, PHP, MySQL, HTML, CSS и раскрутке.
Выпуск 60.
У нас открылся форум. Всегда рады новым посететилям и участникам. Мы с радостью ответим на все ваши вопросы, поможем вам советом, поделимся опытом. Заходите!

Сейчас идут работы над новым движком для сайта. Будет изменен не только дизайн, но и кое-какие принципы постороения сайта. Изчезнет раздел "Гостевая". Будут реформированы категории учебников и статей. Ориентировочный срок - конец ноября.

Важно:
В связи с тем, что сайт будет переделан, до этого момента будут размещаться только статьи и новости. Никаких мер по раскрутке и разлычных мероприятий для посетителей не будет. Сейчас точно решено устроить конкурс для авторов статей. Конкурс будет проводиться в 2-х номинациях - "лучшая авторская статья" и "лучший перевод статьи". Победителей будет 3-е в обеих номинациях. Естественно будут призы. Пока варианты призов следующие - денежное вознаграждение, хостинг, домен.
Если у вас есть какие-либо идеи или предложения по поводу конкурса, с радостью их рассмотрю на нашем любимом форуме!
Дизайн и создание веб-сайтов:
Cоздание сложного анимированного баннера.

Прочитать статью он-лайн

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

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

  1. палитра gif'a может содержать максимум 256 цветов (меньше - можно, больше - нет) и в нем применяется алгоритм сжатия без потери качества изображения (конкретно - алгоритм LZW). Также GIF допускает создание прозрачных областей и анимации. Используя gif-формат, следует помнить о закрытости лицензии алгоритма компрессии LZW, из-за чего требуется её (эту самую лицензию) оплачивать для использования в любом программном обеспечении. Этот недостаток приведёт к тому, что постепенно в графике для web от формата GIF будут отказываться в пользу других, более открытых форматов. Что касается анимированных баннеров - здесь альтернативой может являться использование flash-технологий, avi... Печально это как-то звучит... И все же, поскольку разговор идет именно об анимированном gifе, переходим к сл. пункту:

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

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

  4. Опять же в целях уменьшения количества цветов в палитре рекламный текст, присутствующий на баннере, будет без сглаживания. Следует отметить, что anti-aliased вообще имеет смысл включать только лишь для шрифта крупнее 12px - мелкий шрифт читаться со сглаживанием не будет. Конечно, тут же перед вами возникнет проблема выбора шрифта - но это вопрос к следующему материалу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если со слоями вы работали в PhotoShope, то сейчас самое время перейти в ImageReady - в меню File -" Jump to -" Image Ready.

В меню Window выбрать Show Animation - появится свиток, в котором присутствует один фрейм. Сложная анимация баннера в Image Ready Сделайте все слои макета 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 Plays Animation (движок внизу свитка Animation), и через File->Preview in в браузере, но если все сделано правильно - ваша анимация будет проигрываться без сдвигов и ошибок.

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

Удачных вам анимированных баннеров!

Автор: nundesign@ukr.net
http://nundesign.narod.ru/
Последние статьи
Дизайн и создание веб-сайтов: Подбор гармоничных цветов
Дизайн и создание веб-сайтов: Цвета, которые мы выбираем
Дизайн и создание веб-сайтов: Cоздание сложного анимированного баннера
Последние новости
Персонификация PC: компьютеры "для девочек"
У VoodooPC вообще подход к каждому выпускаемому компьютеру очень индивидуальный, но в своей новой затее, похоже, компания перещеголяла всех. Теперь можно заказать внешний вид компьютера, наиболее соответствующий половой принадлежности пользователя (по умолчанию для дам предлагается розовый цвет) и выбрать Voodoo Tatoo – рисунки, которые будут украшать корпус. Конфигурацию компьютеров при заказе можно изменять в очень широких пределах, а построена новая линейка на платформе AMD64...
Сенсорный монитор по приемлемой цене
Достижения научно-технического прогресса могут существенно облегчить работу многих людей. Например, использование сенсорного монитора в качестве терминала может значительно облегчить работу персонала. Но цена подобных решений зачастую перевешивала все их достоинства. Однако прогресс не стоит на месте, и вот компания Dell анонсировала свой сенсорный 15" экран по вменяемой цене – 500$. Dell E153FPT для более удобной работы может поворачиваться на углы до 135 градусов. Примечательно, что до этого самым доступным сенсорным дисплеем Dell была 15-дюймовая модель из линейки Elo, имевшая цену около 700$...
Blu-Ray будет совместим с обычными DVD?
В самом ближайшем будущем стандарт Blu-Ray придет на смену обычному DVD. Мы уже сообщали о выпуске рекордеров для этого стандарта. Но немаловажен вопрос совместимости нового стандарта с существующими DVD дисками. Ведь записывающие DVD-приводы имеются далеко не у всех, а в дальнейшем, если не решить этот вопрос, пришлось бы иметь 2 привода – один для Blu-Ray дисков, а другой – для обычных DVD...
19" LCD с временем отклика 8 мс – теперь от Hyundai
Такие производители мониторов, как LG, Samsung, BenQ уже анонсировали свои 19" модели ЖК-мониторов со временем отклика 8 мс. Теперь их примеру последовала и компания Hyundai, представив свою модель ImageQuest L90D+...
Кровавый джойстик в стиле Resident Evil 4
Nuby Tech выпустила игровой манипулятор в виде бензопилы для самых кровожадных геймеров любящих серию известного action-adventure Resident Evil. Игровой джойстик предназначен для игровой приставки GameCube...
"Раскладушка" с сенсорным дисплеем, на базе Smartphone 2003
Тайваньская компания Ya Hsin Industrial несколько дней назад представила смартфон в форм-факторе "раскладушки", с сенсорным экраном и на базе ОС Microsoft Smartphone 2003...
Система охлаждения за 720 евро
Специально для обеспеченных оверклокеров компания Asetek представила новый продукт из серии VapoChill, в которую входят системы охлаждения для процессора. VapoChill Extreme Edition II представляет из себя корпус со встроенной системой охлаждения CPU...
Стильный и функциональный домашний ПК
Выпуск корпорацией Microsoft операционной системы Windows XP Media Center Edition 2005 послужил отправной точкой для многих производителей "готовых" ПК. Компании одна за другой начали представлять так называемые "мультимедийные центры". Вот еще одно видение того, каким должен быть настоящий медиа-центр...
В суд, из-за компьютера...
Одиннадцатилетний мальчик из центрального Китая подал в суд на свою мать, которая пообещала ему купить компьютер, но не сделала этого. Если верить китайской газете China Daily мама поставила сыну определенные условия, а когда он их выполнил, сказала, что не "потянет" эту покупку. Сын обратился к судье с претензией касательно невыполненного обещания и попросил судью заставить мать выполнить устное обещание. Судье удалось помирить оппонентов, но купили таки мальчику компьютер или нет – неизвестно...
Второе рождение Bluetooth
Организация Bluetooth SIG, отвечающая за спецификацию Bluetooth, анонсировала введение в эксплуатацию стандарта Bluetooth v2.0 - ее официальное название "Bluetooth Core Specification Version 2.0 + EDR. Новый стандарт позволит увеличить скорость передачи данных между устройствами в 3 раза при том, что потребление энергии будет снижено. Более экономный расход электроэнергии позволит устройствам работать вдвое дольше. Новая спецификация обратно совместима с более старыми версиями 1.0, 1.1 и 1.2. Первые изделия с поддержкой Bluetooth v2.0 появятся в продаже в 2005 году...
Компания Creative планирует анонсировать новую звуковую карту для меломанов. Ожидается, что новинка будет называться Sound Blaster Zenith...
Ведущий рассылки: Волков Кирилл (Vulko)
E-mail: vulko@bk.ru 
ICQ: 375195
Всегда рад ответить на ваши вопросы и предложения.
© Mgraphics.ru 2003-2004. Все права защищены.
© Волков Кирилл 2003-2004. Все права защищены.
http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: inet.webbuild.mgraphics		 Отписаться
В избранное