Lektsia_3

Мультимедиа компоненты

иногда больше - значит больше

Работа с изображениями

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

Слайд-шоу. Компилируя слайд-шоу из отдельных картинок, принимайте во внимание их содержание, переходы и возможность управления со стороны пользователя. Для акцентов на баннере или определенной области информации выбирайте качественные изображения, объединенные темой (цветом, сюжетом и т. д.) и с одинаковой ориентацией.

Если слайд-шоу должно рассказать какую-то историю, организуйте изображения, как видео.

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

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

Переходы в слайд-шоу.

Программы для компиляции слайдов предлагают много типов переходов.

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

Простое - всегда лучшее, выберите один стиль и придерживайтесь его.

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

сами слайды. Выберите один простой стиль переходов и придерживайтесь его.

Мы рекомендуем резкий или плавный монтажные переходы, в противовес бесконтрольным вспышкам и вращению.

Скорость показа.

Медленно и размеренно или в бешеном темпе - продолжительность показа и скорость переходов задают общий стиль слайд-шоу.

Если вы рассчитываете, что зрители оценят и запомнят содержание слайдов, предоставьте им для этого необходимое время.

Эффект Кена Бернса позволяет оживить неподвижные изображения путем панорамирования или приближения и удаления изображений в слайд-шоу.

Бернс использовал эту технику при работе с историческими фотографиями, письмами и картами в своих документальных фильмах.

Эффект предустановлен во многих непрофессиональных программах обработки видео, но обращайтесь с ним осторожно.

Повторять или не повторять?

Слайд­шоу можно зациклить до бесконечности или выставить определенное ко­

личество повторов - все зависит от того, где оно будет демонстрироваться.

Если на подложке баннера, тогда бесконечный повтор может быть уместен.

Если слайд-шоу рассказывает какую-то историю, вполне достаточно прокрутить его лишь однажды.

Как правило, лучший вариант - дать пользователю возможность контролировать воспроизведение: запускать, останавливать, повторять, ставить на паузу и регулировать громкость.

Интерактивные галереи изображений.

При просмотре интерактивных галерей изображений у зрителей больше контроля

над опциями просмотра.

картинка - Галереи изображений.

Существует множество недорогих и бесплатных плагинов для воспроизведения

фотографий на сайтах и в блогах.

ВИДЕОРОЛИКИ

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

Простые программы для видеомонтажа достаточно популярны, поэтому и дилетанты вполне могут мастерить ролики хорошего качества.

В клипе главное не дизайн, а сценарий, съемка и обработка, хотя иногда участие художника-постановщика необходимо.

Советы для качественной съемки видео:

1. Установите камеру на штатив или другую стабильную поверхность. Дрожание кадра очень быстро приедается.

2. Снимайте при ярком равномерном освещении. Избегайте резкого контрастного света и подсветки сзади, а также всего, что воспринимается как световой спецэффект.

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

4. Снимайте каждый фрагмент по меньшей мере на 10-15 секунд дольше, чем, по вашему мнению, нужно (отснятые, но неотредактированные материалы, используемые в качестве визуального наполнения или для создания переходов, называют «биролламю> - от англ. b-roll).

Лишний материал всегда можно отрезать, а вот вставить то, что не было снято, - это уже из области волшебства.

5. Каждую сцену снимайте с разных позиций: крупный план, средний, полный, широкий и длинный. Подумайте, какие кадры сделать установочными, а какие крупными или парадными.

6. Избегайте наезда и панорамирования. Стандартный резкий переход естественнее всего.

7. Выстраивайте композицию в кадре. Используйте правило третей в качестве руководства к действию и размещайте фокусную точку соответствующим образом.

8. Не разговаривайте во время съемки - вдруг микрофон запишет ваш голос~ Шумные вздохи за кадром тоже могут представлять проблему.

Интервью и монологи («говорящие головы»)

1. Снимайте в спокойной тихой обстановке.

2. С умом подойдите к выбору «говорящей головы».

Не все могут интересно и увлекательно говорить на камеру.

3. Делайте пробную съемку ... Береженого бог бережет.

При обработке

1. Выбирайте простые переходы - резкие или плавные.

Придерживайтесь ОДНОГО СТИЛЯ, внимание ДОЛЖНО быть сконцентрировано на видео, а не на переходах.

2. Не затягивайте продолжительность ролика.

Случайные пользователи выдержат несколько секунд, а любители смотреть видео - не

более минуты.

Кодирование.

Кодирование - это последний этап создания видео.

Существуют различные форматы файлов.

Видеохостинги, например, часто предъявляют определенные требования к размеру

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

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

Стандарт MPEG-4 (Motion Pictures Expert Group) очень распространен в Сети, он проигрывается на разных платформах и поддерживается самыми популярными браузерами.

Помимо формата файла необходимо уделить внимание формату картинки (отношению ширины к высоте) и окончательному размеру файла.

Убедитесь, что видео проигрывается без искажений.

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

картинка - Если на сайте есть аудио- и видеоклипы, позвольте пользователям ими управлять

(запускать/останавливать, прибавлять/убавлять звук).

Аудио

Как вы знаете, аудио тоже входит в состав мультимедиа в виде закадрового

текста или естественного шума, сопровождая отснятый видеоматериал.

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

DVD-проекте.

Короткие аудиоклипы призваны сигнализировать о каком-то действии, например о на­

жатии кнопки или отправке электронного письма.

Аудио - это приятные слуху звуки, подчеркивающие, что важно, а что - нет, и задающие тон и настроение.

Основные правила создания качественной аудиопродукции

1. Используйте звуковое сопровождение, особенно звуки активации (например, нажатия кнопок) дозированно.

Как и в случае с большинством элементов дизайна, немного - это вполне достаточно.

2. Фоновая музыка поддерживает общую атмосферу и месседж проекта.

Она не должна задавать тон.

3. Предоставьте пользователям контроль: возможность запускать, останавливать, ставить на паузу и регулировать громкость звука.

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

Используйте лучший микрофон, какой только можете, - не встроенный в видеокамеру. Аудитория скорее простит плохое изображение, чем плохой звук.

картинка - Вы слышите? Аудио - это эффективный мультимедийный компонент. Попробуйте представить себе звуковое сопровождение ДЛЯ ЭТИХ двух фотографий

Анимация

Она повсюду, от приветствия при включении мобильного телефона до впечатляющих спецэффектов в блокбастерах.

Как и другие мультимедийные компоненты, анимацию можно классифицировать по уровням сложности.

Анимация для художественных фильмов и сложных интерактивных сайтов остается

в сфере компетенции профессионалов высокого класса.

Более простая и распространенная анимация, такая как переходы между слайдами, генерируется программой для создания презентаций автоматически.

Расчетная, или твиновая, анимация.

Цифровая анимация основывается на том же принципе, что и анимация, нарисованная от руки.

Серия изображений, каждое из которых слегка отличается от предыдущего, быстро

проносится перед глазами, и таким образом создается иллюзия движения.

Скорость цифровой анимации составляет примерно 30 кадров в секунду, так

что для одной секунды ролика нужны 30 изображений, а это большой объем

работы.

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

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

картинка - Расчетная, или твиновая, анимация

Расчетная анимация прекрасно работает с простыми движениями и может также использоваться для передачи изменения цвета и непрозрачности или для постепенного появления или исчезновения объекта.

Раскадровки - превосходный метод планирования расчетной анимации.

Стрелками обозначаются движения вместе с взаимосвязями между формами и текстом. Каждый набросок раскадровки сопровождается описанием содержания и звуковой подложки.

картинка - Просто - значит, хорошо. Анимация не обязана быть сложной.

На этом логотипе за несколько секунд вырастает буква 1 и листочек над ней.

Все дело во времени.

На самом деле не движение выделяет анимацию среди других видов графики. А временной компонент.

Анимированные элементы появляются, исчезают и меняют форму в различных точках временной шкалы.

В анимации и видео скорость и переходы влияют на общее ощущение от проекта, а, следовательно, и от сообщения.

Быстрый темп и резкий монтаж определяют ощущение энергичности и актуальности. Плавные изменения - успокаивают.

Другой важный момент - продолжительность.

Продолжительность зависит от задачи анимации.

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

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

Но это произойдет только в том случае, если эта анимация не дополняет хаос сама по себе.

Используйте ее целенаправленно, убедившись, что это подходящее средство для передачи вашего сообщения, а не ради того, чтобы использовать.

ИНТЕРАКТИВ

Самое замечательное качество мультимедиа - они позволяют зрителю участвовать в происходящем.

Рекомендации для создания качественного интерактивного мультимедиапроекта:

1. Не каждая история, не каждый сюжет потянет на полноценный проект. В его основе должна быть глубокая, интересная и многогранная тема.

2. Выбирайте лучшие мультимедийные элементы для конкретной темы. Если у вас нет подходящего кандидата на роль «Говорящей головы» или диктора, вычеркните видеомонолог из плана.

Рассмотрите возможности иных форм подачи информации, например инфографику (это графический способ подачи информации, данных и знаний.).

3. Выберите одно средство, чтобы рассказать историю, а прочие пусть выполняют вспомогательные функции. Учитывайте, что у информации должна быть четкая фокусная точка.

4. Определитесь с общим стилем оформления, затем подберите элементы дизайна, которые ему соответствуют.

5. Сделайте интерфейс понятным.

Кнопки должны выглядеть, как кнопки, чтобы их было легко найти и чтобы ими было легко пользоваться. То же касается ссылок.

6. Не позволяйте технологиям затмить информацию или историю.

Технология должна быть невидимой пользователю. Новые технологии вдохновляют дизайнеров и визкомов на многое.

Просто помните, что подгонять дизайн гостиной под журнальный столик - по меньшей мере неразумно.

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

Элементы и принципы дизайна

Элементы дизайна

ЭЛЕМЕНТ № 1. ПРОСТРАНСТВО

Позитивное пространство - заполненное.

Негативное пространство - пустое, оно не враг вам.

Пространство, позитивное либо негативное, - это не просто один из ключевых элементов графического дизайна. Это необходимое условие.

Иногда отрицательное и положительно пространства меняют друг друга.

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

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

ЭЛЕМЕНТ №2. ЛИНИЯ

Линия обозначит границы отрицательного или создаст положительное пространство.

Линии могут быть прямыми, ломаными и кривыми. Могут быть толстыми или тонкими, сплошными или пунктирными.

Границы страницы или экрана - это линии.

Из линий складываются рамки и границы.

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

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

Верх, низ и стороны прямоугольной фотографии (с рамкой или без нее) образуют горизонтальные и вертикальные линии.

Все эти виды линий формируют оси, благодаря им Вы можете выстраивать и компоновать объекты во время верстки.

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

картинка –

ЭЛЕМЕНТ №3. ФОРМА

Иначе говоря, форма - это контур.

В большинстве своем макеты имеют прямоугольную форму.

Текстовые блоки чаще всего тоже прямоугольны. Именно потому мы и называем их блоками.

Форма способна вызвать мгновенное узнавание.

Форма может пробуждать воспоминания.

картинка - Вверху: Огромный лист слева - явный акцент, но в левом верхнем

углу на контрасте с ним расположен значительно меньший по размеру

логотип - вместе это визуально интересное решение.

ЭЛЕМЕНТ №4. РАЗМЕР

Можно говорить о соотношении размеров, или масштаба, например между крупным заголовком и тегами, набранными самым мелким шрифтом.

Мы говорим о точном соблюдении размеров и пропорций (нельзя деформировать фотографии).

Понятно, что размер крайне важен для компоновки. Он может заставить элементы кричать. Или шептать.

ЭЛЕМЕНТ №5. ШАБЛОН

Шаблон означает повторение.

Для обоев и оберточной бумаги характерны шаблоны.

Четыре сгруппированных вместе фотографии в верстке - и это шаблон.

Неорганические шаблоны воспроизводятся точь-в-точь, без вариаций.

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

Шаблоны дают ощущение порядка и предсказуемости.

В зависимости от того, как шаблон используется, он может сообщать и тактильные свойства.

ЭЛЕМЕНТ №6. ТЕКСТУРА

Дизайнеры могут создать иллюзию осязаемой текстуры, глубины и объема на экране или на бумаге, которая сама по себе обладает текстурой.

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

ЭЛЕМЕНТ №7. СВЕТОТЕНЬ

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

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

Чем мельче градация этих тонов, тем отчетливее мы ощущаем глубину и объем.

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

Светотень может быть необходима для сильной композиции.

Ее используют, чтобы создать ощущение глубины, как и для иллюзии текстуры.

Мы привносим разнообразие с ее помощью.

Еще мы используем светлые или темные тона, чтобы выделить один предмет или ослабить значимость другого.

картинка - Светотень.

Контраст между освещенными ангелами и черным фоном создает ауру таинственности.

Принципы дизайна

ПРИНЦИП № 1. ФОКУСНАЯ ТОЧКА

Визуальный объект работает как точка входа - место, с которого взгляд

начинает путешествие по макету.

Это фокусная точка, самая важная деталь любого макета.

Она прежде всего обращает на себя внимание, где бы ни располагалась.

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

Правило №2, касающееся фокусной точки: ограничьтесь одной фокусной точкой на экранную или печатную страницу, историю или рекламу.

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

Точкой фокуса может быть все что угодно, пока оно остается самым заметным элементом визуальной коммуникации.

Возможно, фокусная точка становится таковой в окружении негативного пространства.

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

размер.

Может быть так, что фокусная точка светлее или темнее, чем остальной макет. Тогда это контраст.

картинка - Фокусная точка и контраст.

На этом макете соединение фотографии с крупной декоративной R образует фокусную точку, притягивающую к себе внимание. Посмотрите, как линия кресел подводит к декоративной R, которая в свою очередь переводит взгляд на заголовок.

ПРИНЦИП №2. КОНТРАСТ

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

Вольны поместить рядом объекты, контрастные по размеру.

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

Цвет и светотень - тоже эффективны.

Одновременное использование темных и светлых тонов или цветов вновь порождает контраст.

ПРИНЦИП №3. БАЛАНС

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

Есть три вида визуального баланса: радиальный, симметричный и асимметричный.

При радиальном балансе элементы располагаются вокруг центра кругами.

Независимо от формы, для достижения симметричного баланса необходимо, чтобы каждая сторона состоящего из двух частей дизайна была зеркальным отображением другой.

В асимметрии, наоборот, получаются две неравные части.

Асимметричный баланс визуально интереснее, чем симметричный.

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

Не выровненный по центру макет необязательно сбалансирован.

Положительное пространство визуально тяжелее, чем отрицательное. Так что большой объем заполненного пространства требует уравновешивающего объема пустого пространства.

Темные тона визуально тяжелее светлых. Поэтому, если получается много темных тонов, нужно сбалансировать их соответствующим количеством светлых.

Большие по размеру объекты визуально тяжелее маленьких и т. д.

картинка - Баланс. Этот дизайн - пример того, как работает нарушение правил.

Бездарным, выровненным по центру макетом он не стал благодаря выверенному балансу, изобилию белого пространства, цветным пятнам и аккуратному обращению со шрифтом.

ПРИНЦИП №4. ДВИЖЕНИЕ

Принцип движения основан на идее, что хороший дизайн ведет взгляд по макету.

Линии помогают перемещаться по печатной странице или экрану.

Горизонтальные линии устремляются слева направо или справа налево.

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

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

Две соединяющиеся диагонали символизируют расстояние, например уходящую и исчезающую где-то там, на линии горизонта, дорогу.

Кроме того, изогнутые линии передают, например, дистанцию.

картинка - Движение. Как передано движение в двух данных примерах.

Обведите кружком элемент, который был применен:

а) диагональная линия;

б) s-образная кривая;

в) размытие изображения;

г) глубина резкости;

д) все перечисленное.

ПРИНЦИП №5. РИТМ

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

В графическом дизайне ритмическое движение немыслимо без повторяющихся элементов - это как фоновый ритм.

картинка - Ритм. Сосчитайте, сколько типов ритма использовано в данном макете: повторяющаяся

сетка, квадраты, звезды, цвета, шрифты и буллиты.

ПРИНЦИП №6. ПЕРСПЕКТИВА

Перспектива относится к другому типу динамики - иллюзии движения от переднего плана через второй к заднему плану.

Существуют четыре способа композиции, которые создают ощущение перспективы:

- линия горизонта (Приближение линии горизонта к нижнему краю пейзажа

сократит воображаемое расстояние. Приближение линии

горизонта к верхнему краю картины увеличит воображаемое

расстояние)

- относительный размер и масштаб (могут порождать ощущение расстояния: более крупные объекты кажутся ближе, чем мелкие, которые воспринимаются как находящиеся вдалеке)

- линейное движение (две диагонали, сближающиеся и пересекающиеся где-то там вдали

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

- воздушная перспектива (цвет и тон могут порождать чувство перспективы или расстояния. Темные тона всегда кажутся расположенными ближе, чем светлые.

Цвета на переднем плане имеют более богатую игру светотени, чем цвета на рас­

стоянии, которые обычно блекнут и размываются)

картинка - Перспектива.

ПРИНЦИП №7. ЕДИНСТВО

Единство означает, что все составляющие дизайна взаимодействуют друг с другом,

работая на единую цель.

Макет смотрится как единое целое, если различные его части визуально взаимосвязаны.