Школа мобильного дизайна. Сборник лекций | SEclub.org
Школа мобильного дизайна. Сборник лекций
Все новые
Тема закрыта для обсуждения.
Всего сообщений: 95
*
Malcolm
13 дек 2008 в 20:10
И насполедок хочу сказать, что в самом Themes Creator есть свои средства уменьшения размеров файлов. Они работают только с PNG (вот еще один довод в пользу этого формата). Если поставить в меню Tools настройку "Enable color reduction filter", у каждого элемента в PNG внизу можно будет поставить флажок Dither. При сохранении Themes Creator обработает все эти файлы, уменьшив в каждом количество цветов до максимального, которое поддерживают экраны мобильников. Никакой потери качества на мобильнике при этом заметно не будет, а вес уменьшиться очень заметно. Можно посмотреть, на сколько уменьшился вес каждого элемента, выбрав Tools -> Color reduced image size info.
Вот мы вместе и посмотрели, какие есть форматы, где их применять и как сделать вес темы меньше. Вес темы очень актуален, главное - не переусердствовать, чтобы не пошло в ущерб качеству.
*
Letyi
15 дек 2008 в 17:50
Глава 4.GIF-анимация. § 4.1 Введение. Форматы. Программы. Использование в теме. Всем добрый день.Вот и дошла очередь до моего раздела.Респект Malcolm’у за отличную "мат.часть" по устройству GIF. Как уже стало понятно GIF-анимация – это набор кадров,которые сменяют друг друга через определенный интервал (который можно изменять).Кроме GIF-анимации,существует и MNG, и APNG, и SWF (флэш-анимация).
*
Letyi
15 дек 2008 в 17:51
Кроме этого, существует SVG- анимация - Scalable Vector Graphics (масштабируемая векторная графика), работающая по схожему с Флэшем алгоритму на основе xml,т.е. "писать" анимацию можно в обычном блокноте, главное знать правильные коды. SVG, как ни странно, поддерживается гораздо большим числом моделей, нежели Flash и обладает многими преимуществами перед SWF (скажем просто мизерный вес в пределах нескольких килобайт). Останавливаться подробно на этом формате не стану в силу его не очень широкого (пока что) распространения. Подробно о нем можно почитать в Википедии: ru.wikipedia.org/wiki/SVG
*
Letyi
15 дек 2008 в 17:54
Вернемся, всё-таки, к старичку GIF. Существует огромное количество программ,позволяющих создавать GIF-анимацию. Если вы пользователь PhotoShop (а очень желательно,чтобы вы им были,если собираетесь заняться дизайном), то у вас есть встроенный редактор Image Ready (на мой вкус он сложноват). Лично я пользуюсь: - Easy GIF Animator–позволяет сохранять анимацию и в SWF тоже. Скачать: depositfiles.com/files/8401195 - JASC Animation Shop–крайне удобен и интуитивно понятен.Последующие примеры будут рассматриваться именно в нем.Скачать: depositfiles.com/ru/files/qdsa99wcl В темах анимация используется на Standby и во всех Highlights. Ни Desktop,ни Popup никакие другие фоны анимацию проигрывать не будут. Хотя в Креаторе всё красиво работает. На Highlights старайтесь ставить анимацию маленького веса, т.к. она может подвисать. Вводная часть завершена.Желающие могут скачать программы и пока что потренироваться работать в них.До завтра!
15 дек 2008 в 17:55 / Letyi (1)
*
Letyi
16 дек 2008 в 17:44
§ 4.2 Анимируем картинку. Варианты. Примеры.
Итак, перейдем, собственно, к процессу (готовьтесь к трате трафика). Скажу сразу, я выделяю 2 "типа" анимаций:
<b>- Анимированная картинка
- Мультипликация (в следующей лекции)</b>
Поясню.Под "Анимированной картинкой" я понимаю анимашку, сделанную из одной-двух картинок с добавлением эффектов или каких-либо дополнений.Примерами таких анимаций могут служить: letyi.do.am/_ld/0/12.gif (эффект Gaussian Blur) или скажем letyi.do.am/_ld/0/13.gif (добавлены блики),или letyi.do.am/_ld/0/14.gif (две картинки просто несколько раз меняются с разным интервалом).
*
Letyi
16 дек 2008 в 17:49
Такие анимации самое простое,что можно сделать.Чтобы добавить эффект к картинке надо просто "перетащить" картинку в прогу (я использую Jasc AnimationShop),затем в строке команд (самая верхняя строчка) выбрать Effects-->Image Effect появится окошко,где можно выбрать эффект и отрегулировать время показа кадров.В других программах принцип такой же.
Так же вы можете сделать простую анимашку из двух (трех, четырех, скольких хотите) кадров, используя "Эффекты смены кадров".Например такие: letyi.do.am/_ld/0/15.gif или letyi.do.am/_ld/0/16.gif Эффекты смены кадров можно найти в Effects-->Image Transitition и тоже выбрать то,что вам понравится.Очень советую не просто применить эффект,например вот так: letyi.do.am/_ld/0/17.gif т.к. неизбежно будет "скачок" при включении первого кадра,а делать "круговую" анимацию,скажем так: letyi.do.am/_ld/0/18.gif чтобы переходы были плавными.Выглядит это лучше.
*
Letyi
16 дек 2008 в 17:51
Итак,подведу небольшой итог.
Анимировать картинку очень просто,достаточно добавить к ней эффект.В любой программе такие эффекты есть (где-то больше,где-то меньше),так что тут дело вкуса.Так же можно сделать простую анимашку с меняющимися изображениями (эффектов смены так же много).Однако не стоит делать просто тупо мелькающие картинки,если уж взялись делать анимацию,сделайте что-нибудь красивое!
До завтра!
*
Letyi
17 дек 2008 в 17:57
§ 4.3 Мультипликация. Технология. Примеры.
Вот это уже куда интереснее (готовьтесь к трате трафика)!Но,в то же время,и сложнее.
Мультипликация – это создание движущихся изображений,образованных путем смены кадров с меняющимся положением объектов.Т.е. это не просто "мелькание" или там "слайдшоу" это маленький (ну или большой) мультик у вас на экране.
Мультипликацию нельзя сделать просто применив эффект,нужно рисовать каждый кадр в отдельности,а уж потом "собирать" их все в программе. Вот например: letyi.do.am/_ld/0/19.gif если вы откроете эту анимацию в редакторе,то увидете 8 кадров,которые сменяют друг друга.Каждый кадр-это новое положение крыльев.Собрав все кадры вместе создается иллюзия полета.
*
Letyi
17 дек 2008 в 18:00
Прежде чем начать рисовать кадры,продумайте,что вы хотите получить,как это должно выглядеть.Очень полезно будет нарисовать на бумаге (хотя бы схематично) каждый кадр,тогда будет гораздо легче рисовать,вы не собьетесь,не пропустите нужное положение и т.д. Так же важно,чтобы положение объектов в анимации изменялось постепенно.Т.е. можно сделать и вот такой полет: letyi.do.am/_ld/0/20.gif но выглядит это не красиво,и нет ощущения движения.Не забывайте и о времени показа каждого кадра!Если кадры будут меняться медленно,то анимация будет прерывистой,будет видно каждый кадр и иллюзии движения не будет.Если же поставить слишком маленькое время,то анимация получится очень быстрой и будет не естественной и не красивой.Обычно,я ставлю время кадров 0,1 секунды.
*
Letyi
17 дек 2008 в 18:01
Рисовать кадры рекомендую в PhotoShop,создавая каждый кадр на отдельном слое (а еще лучше в отдельной группе слоев).Тогда вы сможете проследить последовательность и точно подогнать положение объектов.
Кадров,естественно,может быть столько,сколько вашей душе угодно,например вот тут всего 4 кадра: letyi.do.am/_ld/0/23.gif вот тут letyi.do.am/_ld/0/21.gif всего 6 кадров, а вот в этой: letyi.do.am/_ld/0/22.gif их 92,так что смотрите сами.Всё зависит от вашей фантазии,старания и усидчивости.Пожалуй, усидчивость тут главное!
*
Letyi
17 дек 2008 в 18:02
Всё выше сказанное касается и анимации для Хайлайтов,за тем лишь исключением,что длинные тяжелые анимации могут,во-первых,не пойти,во-вторых, в них просто нет смысла, навигация внутри телефона довольно быстрая, окна сменяются быстро и вы просто не успеете увидеть большую анимацию до конца, вполне достаточно нескольких кадров, как например вот тут: letyi.do.am/_ld/0/24.gif
*
Letyi
18 дек 2008 в 18:08
§ 4.4 Общие рекомендации.
По поводу оптимизации веса анимации уже говорилось Malcolm’ом в предыдущей главе, так что на этом останавливаться не буду. Скажу лишь одно,не пытайтесь сжать анимацию до минимума.Вы неизбежно потеряете в качестве,а значит пропадет и необходимое восприятие.Если делаете большую красивую анимацию, лучше сделайте её качественно и предупредите людей о её большом весе, кому это действительно интересно - не пожалеют трафик.
Не стоит делать слайдшоу (просто смена картинок).А уж тем более,если картинки разного стиля,цветовой гаммы,тематики. Не уподобляйтесь подросткам, которые в восторге от мелькания 3 фоток голых баб.
Скачать тему
Для полноценного использования разделов сайта войдите или зарегистрируйтесь.
Картинки и темы | Загрузки Seclub | Форум | Главная
18+ © Seclub.org 2003-2024