This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Санкт-Петербургский государственный институт Точной механики и оптики (технический университет)
А.Л.Бочков, А.В.Меженин
Графика и мультимедиа для Web Учебно-методическое пособие
Санкт-Петербург 2002 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
УДК 681.3 А.Л. Бочков, А.В. Меженин. Графика и мультимедиа для Web. Учебнометодическое пособие. - СПб.: СПбГИТМО(ТУ), 2002. – 44с Рецензенты:
Л.С. Лисицына, к.т.н., доцент, директор РЦ ФИО, А.В. Лямин, к.т.н., доцент, директор ЦДО СПбГИТМО (ТУ)
Учебно-методическое пособие предназначено для Web-разработчиков и представляет собой практическое руководство по использованию графики и средств мультимедиа в Интернет. Помимо общих рекомендаций по вопросам проектирования и создания Webсайтов и Web-страниц, рассматриваются все возможные аспекты по графическому наполнению Web–страниц. Предлагается решение типичных проблем, с которыми сталкиваются начинающие Web–дизайнеры, раскрываются секреты создания графических эффектов, даются советы по наиболее продуктивному использованию инструментов Photoshop. В пособии рассмотрены вопросы использования текста, графических элементов, таблиц, каскадных таблиц стилей, аудио- и видеофрагментов для оформления Web–страниц. Материал полезен для начинающих Web–дизайнеров и мастеров, рекомендуется для подготовки студентов университета по ряду специальностей и направлений, а также для поддержки курсов повышения квалификации школьных учителей «Использование Интернет-технологий в системе образования", проводимых Санкт-Петербургским региональным центром Федерации Интернет Образования в рамках проекта «Поколение.ru».
2 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
ОГЛАВЛЕНИЕ 1. ПЛАНИРОВАНИЕ WEB САЙТА И СТРАНИЦ 1.1. Что такое Web – узел 1.2. Схема Web – узла, уровни документов 1.3. Навигация 1.4. Дизайн страниц 2. РАСТРОВАЯ И ВЕКТОРНАЯ ГРАФИКА. ГРАФИЧЕСКИЕ ФОРМАТЫ WEB 2.1. Растровые и векторные изображения 2.2. Форматы GIF, JPEG, GIF89a и PNG 3. ЦВЕТА Web 3.1. Глубина цвета 3.2. Цвета поддерживаемые броузерами 3.3. Определение цветов с помощью HTML 3.4. Цвета и размер файла 3.5. Советы дизайнеру по работе с цветом 4. ОСНОВЫ РАБОТЫ В PHOTOSHOP 4.1. Слои 4.2. Инструменты выделения 4.3. Использование инструмента Magic wand («Волшебная палочка») 4.4. Изменение размера, яркости и контрастности изображения 4.5. Выбор цвета 4.6. Работа с текстом 4.7. Инструмент Rubber Stamp (Штамп) 4.8. Примеры 5. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS КАК СРЕДСТВО ДИЗАЙНА 5.1. Встроенные стили 5.2. Внедренные стили 5.3. Связанные таблицы стилей 5.4. Динамические макеты 6. МУЛЬТИМЕДИА И СЕТЬ ИНТЕРНЕТ 6.1. Общие сведения 6.2. Видео- и аудио- форматы 6.3. Краткий обзор инструментальных средств мультимедиа 6.4. Использование технологии Lotus Screen Cam 6.5. Вставка звука и видео на страницу 7. СОЗДАНИЕ АНИМИРОВАННЫХ GIF СРЕДСТВАМИ IMAGE READY 7.1. Примеры 1, 2, 3. 7.2. Разбиение графического изображения на фрагменты 8. СОЗДАНИЕ ПРОСТЕЙШИХ КЛИПОВ В ПРОГРАММЕ ADOBE PREMIER 8.1. Общие сведения 8.2. Импорт клипов 8.3. Монтаж фильма
PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
8.4. Переходы 8.5. Просмотр переходов и эффектов 9. ИНТЕРНЕТ-ТЕХНОЛОГИИ 3D-ВИЗУАЛИЗАЦИИ И ВИРТУАЛЬНЫЕ МИРЫ 9.1. Что такое трехмерный Интернет 9.2. Язык моделирования виртуальной реальности VRML 9.3. Metastream 9.4. Cult3D
42 43 44 44 44 46 48
4 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
1. ПЛАНИРОВАНИЕ WEB САЙТА И СТРАНИЦ Из-за ряда преимуществ по сравнению с традиционными средствами печати среда WWW (World Wide Web – всемирная паутина) стала использоваться для публикации широкого диапазона материалов. С помощью Web-технологий теперь можно доводить разнообразную информацию до пользователей сети Интернет, работать с потребителями, обучать сотрудников, продавать товары и осуществлять техническую поддержку. Изначально в Web были только страницы текста без всякой графики. Сегодня Web-броузеры фирм Microsoft и Netscape предоставляют пользователю богатые возможности, включая высококачественную графику, анимацию, звук и видео. Для создания Web-страниц служит язык HTML. HTML позволяет включать в документ не только текст, но и графику. Перед размещением графических изображений на Web-странице, их создают (или обрабатывают готовые) в графическом редакторе, например, Photoshop и сохраняют в соответствующем формате в виде файлов. Затем в коде HTML создаются ссылки на эти графические файлы, после чего картинка появляется на Web-странице. Web изначально задумывался как аппаратно-независимая система публикации информации, работающая на аппаратных средствах любого пользователя. Так как шрифты, разрешение и размер монитора различны для разных компьютеров, то в HTML не были предусмотрены стандартные приемы верстки типа буквиц или размещения текста в несколько колонок. HTML предназначен для описания структуры документа, а не самого макета страницы. Несмотря на ограничения HTML, разработан ряд приемов для получения интересных Web-узлов. Так же развиваются новые технологии – это каскадные таблицы стилей (CSS-Cascading Style Sheets) и загружаемые шрифты, которые помогут сделать дизайн Web-страниц более простой задачей. 1.1. Что такое Web-узел Web-узлы или Web-сайты – это наборы связанных Web-страниц, размещенных на одном сервере. Сайт обычно посвящен какой-то определенной теме, например, сведения о каком-то учебном заведении, компании, новости, справочники и т.д. Web-сайты через гиперссылки имеют связь с другими сайтами. 1.2. Схема Web-узла, уровни документов Первый документ Web-сайта называется главной (или начальной) страницей (home page). Главная страница содержит ссылки на все остальные документы сайта. Так как связи между страницами могут быть очень сложными, то при создании сайта используют карты или графические схемы. На рисунке показана схема Webузла с тремя уровнями.
5 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Главная
Мой предмет
page1.htm
Ссылки на ресурсы Интернет page2.htm
index.htm
Об авторе
page3.htm
Тесты
page4.htm
Моя школа page5.htm
Схема Web-сайта с тремя уровнями 1.3. Навигация Так как Web-страницы связаны друг с другом с помощью гиперссылок, что позволяет пользователям самим выбирать маршрут движения по узлу, то организация удобного перемещения является очень важным моментом при разработке Web-сайта. Для организации перемещения или навигации можно использовать графические значки, кнопки или строки меню. Задача создания ясной системы перемещения ложится на Web-дизайнеров. С помощью карты узла дизайнер создает эскиз всех областей, доступ к которым должен предоставляться пользователю из любой страницы Web-сайта. 1.4. Дизайн страниц В настоящее время дизайну Web уделяется все большее внимание. Если Webмастер в первую очередь занят технологиями создания Web-сайтов и страниц, то Web-дизайнер стремиться создать красивый ресурс, уделяет внимание улучшению восприятия информации. Все это способствует повышению эффективности Webресурсов. Можно выделить три направления Web-дизайна. § Информационный дизайн. Основное внимание уделяется содержанию, возможно в ущерб интересной графике. § Художественный дизайн. Содержит интересные (иногда спорные) образы. § Графический дизайн. Сочетает текстовый дизайн и профессионально созданные макеты страниц. Самое большое отличие между дизайном в области полиграфии и Web состоит в том, что Web-дизайнер не может контролировать механизм доставки изображения пользователю. В отличие от печати, где при создании дизайна макета задается тип и размер бумаги, известен способ печати, Web-страницы просматриваются на самых разных компьютерах и других электронных устройствах. И здесь в первую очередь играет значение разрешение экрана монитора – это 640х480, 800х600 и1024х768 и различные возможности видео-карты, определяющей 6 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
глубину цвета. Web-броузеры позволяют прокручивать документы, которые не помещаются на экране, что позволяет создавать страницы практически бесконечной длины. Что необходимо для отличного Web-дизайна? Можно сказать, что для этого необходим талант, но на самом деле можно добиться очень неплохих результатов, используя определенные приемы и хитрости, и создавать эффектные макеты, несмотря на ограничения HTML. Прежде чем решать проблему дизайна необходимо продумать ответы на следующие вопросы: § Каков характер создаваемого Web-узла? Либо это информационный сайт организации или фирмы, или основная задача сайта - развлекать людей играми и эффектами мультимедиа. § Какие цвета будут использованы, шрифты, графические иллюстрации? § Какими будут основные области Web-узла, доступ к которым должен быть организован с каждой страницы? Как пользователи будут переходить на страницы второго, третьего или четвертого уровней? У каждого дизайнера существует собственный подход к разработке Web-страниц. Наилучший результат получается, когда выполняются эскизы графического оформления страниц.
Эскиз Web-страницы 7 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
После формулировки основных идей, которые должны быть реализованы на сайте, выполняются наброски Web-страниц. Затем наступает следующий этап – работа с графическим редактором. Создание непосредственно изображения в графическом редакторе. Программа Adobe Photoshop – один из лучших инструментов для работы с графикой. Выполняется компоновка всей страницы. После этого один большой файл может быть разбит на небольшие графические фрагменты и экспортирован для использования на Web-странице.
Готовая Web-страница Так работает большинство профессиональных web-дизайнеров. Новички используют другой подход – используя визуальный web-редактор, например, Macromedia Dreamweaver, создают web-страницы, что называется с чистого листа, постепенно наполняя их текстовой и графической информацией. Большинство Web-дизайнеров создает страницы не более 700 пикселей в ширину и 500 пикселей в высоту чтобы их можно было просматривать на небольших мониторах и при низких разрешениях. Страница такого размера будет отображаться на экране целиком, без необходимости горизонтальной или вертикальной прокрутки. 8 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
2. РАСТРОВАЯ И ВЕКТОРНАЯ ГРАФИКА. ГРАФИЧЕСКИЕ ФОРМАТЫ WEB 2.1. Растровые и векторные изображения Растровая графика. Растровая графика описывает объект цветными точками – пикселями, определенным образом размещенными в координатной сетке. Изображение описывается положением и цветом всех точек, из которых, как из мозаики, складывается единый объект. Редактируя растровые объекты, можно менять только точки, а не линии. Растровая графика зависит от оптического разрешения, так как ее объекты описываются точками в координатной сетке определенного размера. При изменении размеров объекта может измениться качество изображения, например, могут расплыться края из-за перераспределения пикселей по краям координатной сетки. Воспроизведение растрового объекта на устройстве с низким оптическим разрешением снижает качество изображения. Существуют различные способы получения растровых изображений: • Создание изображения с помощью графической программы; • Снятие копии изображения с экрана и затем вставки в графический редактор; • Снятие копии изображения с фотографии, иллюстрации или телевизионного изображения с помощью сканера или видеоустройства с последующей оцифровкой изображения; • Использование готовых графических библиотек на дисках CD-ROM или через Интернет Векторная графика. Векторная графика описывает объект направленными кривыми – векторами, которые имеют координаты и цветовое значение. Например, изображение задается точками, через которые проходят линии, образуя его контур. Цвет определяется цветом контура и заключенных в нем областей. Редактируя векторный объект, можно менять свойства линий, из которых состоит изображение. Можно передвигать объект, менять его размеры, форму и цвет без какого либо влияния на качество изображения. Векторная графика не зависит от оптического разрешения, и воспроизведение с различным оптическим разрешением не приводит к потере качества изображения. 9 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
2.2. Форматы GIF, JPEG, GIF89a и PNG Для представления информации в Интернет используется несколько графических форматов. Формат взаимообмена графикой (GIF –Graphics Interchange Format), формат объединенной группы экспертов по фотографии (JPEG –Joint Photographic Experts Group) и переносимая сетевая графика (PNG – Portable Network Graphics) – форматы, которые отображаются в броузерах Microsoft и Netscape. GIF – наиболее популярный графический формат в Web. Формат GIF первоначально был изобретен для использования в одной из первых коммерческих сетей – CompuServe. Он разрабатывался для передачи графики в компьютерных сетях с низкой скоростью передачи данных, поэтому идеально подошел для использования в Web и стал первым графическим форматом, поддерживаемым в ней. Формат GIF использует алгоритм Лемпела-Зива и Уэлча (LZW – Lempel-Ziv Welch) – математическую формулу, способную преобразовывать большие файлы в маленькие, которые лучше подходят для Web. Алгоритм LZW построен на сжатии ряда одинаковых символов в один, умноженный на число повторений, т.е. он наиболее эффективен при больших однотонных областях с четкими границами. В разработанной в 1989 году новой версии формата GIF89a способность эффективного сжатия дополнена уникальными свойствами – прозрачность (Transparency) и чересстрочная развертка (Interlace). При установке флажка Interlaced получаемое изображение выводиться с высокой скоростью но низким разрешением. По мере дальнейшей загрузки файла происходит повышение качества изображения и настраивается его фокус. Формат GIF не может отображать более 256 цветов. Эта ограниченность формата не позволяет добиться плавного перехода от одного цвета к другому, что особенно заметно при использовании градиентов и размывок. Обратной стороной ограниченности палитры в GIF может служить ее гибкость. Изменяя количество цветов в ней, web-дизайнер получает в свои руки прекрасный инструмент для регулировки соотношения качество изображения / размер файла. Так, уменьшая в изображении размером 100х100 пикселей количество цветов с 256 (8 бит на пиксель) до 128 (7 бит на пиксель), получаем 100х100х8 – 100х100х7 = 10 000 бит экономии. Еще одной особенностью, введенной в последнюю версию формата, является создание прозрачных областей в изображениях, открывающее 10 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
интересные возможности в web-дизайне. "Потоковая" природа GIF, относительно малые размеры его файлов, возможность компрессии за счет использования прозрачных областей в кадрах сделали его прекрасным инструментом для создания анимации в Web. Использование GIF целесообразно, прежде всего, для так называемых плоскоцветных изображений с четко обозначенными границами переходов между цветами, а также малоразмерных изображений типа кнопок, превьюшных картинок и т. п. Формат JPEG является TrueColor-форматом, то есть может хранить изображения с глубиной цвета 24 бит/пиксел. Такой глубины цвета достаточно для практически точного воспроизведения изображений любой сложности. JPEG в общем обладает более высокой степенью сжатия изображений, нежели GIF. Однако, и в JPEG присутствуют свои недостатки. В отличие от GIF, не поддерживает прозрачности и ориентирован, прежде всего на реалистичные изображения, то есть изображения фотографической направленности, и качество сжатия значительно ухудшается при обработке изображений с четко очерченными линиями и границами цветов. Определяющими при выборе формата являются: тип изображения, размер файла, необходимое качество изображения, время вывода на экран. Формат GIF предпочтительнее использовать для хранения иллюстраций с небольшим количеством цветов или четкими границами между ними. JPEG лучше подойдет для изображений с богатой цветовой гаммой, например, фотографий или сканированных рисунков.
JPEG
GIF
Формат PNG разработан в качестве альтернативы GIF – формату. В нем реализован открытый алгоритм сжатия данных, обеспечивающий более высокие результаты. В отличие от 256 цветовой палитры GIF, формат PNG позволяет сохранять изображение с глубиной до 48бит/пиксель. Более эффективный алгоритм череcстрочности, первый проход занимает 1/64 файла по сравнению с 1/8 в GIF. Позволяет хранить полную информацию о степени прозрачности с помощью специального альфа-канала. Использование гамма-коррекции позволяет сохранять коэффициент яркости дисплея.
11 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
3. ЦВЕТА WEB 3.1. Глубина цвета Глубина цвета характеризуется количеством цветов, отображаемых монитором. Если монитор отображает 256 цветов – это 8 — разрядный цветовой режим. В настоящее время компьютеры могут работать в 24-разрядном режиме или выше, что дает более 16 миллионов цветов. Существуют различные цветовые модели, но при разработке Web-проектов используются режимы RGB и Index Color. Режим RGB основан на цветовой модели RGB, которая базируется на смешивании различных значений красного, зеленого и синего цветов для создания большинства цветов в спектре. Режим Index Color используется в первую очередь для уменьшения размеров графических файлов. При этом создается так называемая поисковая таблица цветов (CLUT- color lookup table), которая содержит 256 или менее цветов, на основе которых и составляется изображение. Необходимо отметить, что часто изображения, которые были взяты из Интернет, имеют формат Index Color и многие эффекты Photoshop, а так же работа со слоями в этом режиме не поддерживается. Поэтому, прежде чем начинать работать с таким изображением, его необходимо перевести в режим RGB. 3.2. Цвета, поддерживаемые броузерами Если при создании Web-страницы используются графические файлы, имеющие больше цветов чем может отобразить компьютер, система управления цветом подбирает недостающие цвета с близкими параметрами. Но система не всегда правильно угадывает цвета, и результат может быть совершенно неожиданным. Microsoft и Netscape приняли в качестве стандарта одну и туже палитру из 216 цветов (256 цветов минус 40 цветов зарезервированных для системного программного обеспечения компьютера) для использования Web-броузерами. 3.3. Определение цветов с помощью HTML Чтобы применить цвет к неграфическим элементам типа текста, ссылок и фона страниц, цвет следует определить либо по названию, либо с помощью специальных числовых кодов. Цвет задается после атрибута COLOR. Допустимые стандартные названия цветов: aqua (аквамарин), black (черный), blue (синий), fuchsia (фуксиновый), green (зеленый), gray (серый), lime (светло-зеленый), maroon (каштановый), navy (ультрамарин), olive (оливковый), purple (пурпурный), red (красный), silver (серебристый), teal (сизый), white (белый), yellow (желтый). Например: 12 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
горизонтальная линия синего цвета высотой 20 пикселей и шириной в 90% от размера окна броузера. Но все же более надежный способ указания цвета в HTML – использование шестнадцатеричного кода (hexadecimal color), который содержит шесть значений: два для красного, два для зеленого и два для синего цвета. В этом случае предыдущий пример будет выглядеть: . 3.4. Цвета и размер файла При разработке Web-страниц важно создавать файлы как можно меньшего размера, чтобы уменьшить время, необходимое для загрузки страницы. Есть два способа уменьшения размеров цветного графического файла. Во-первых, при создании графического файла следует использовать меньшее количество цветов. Вовторых, можно сократить набор цветов, который используется в файле для отображения графики. Так как каждый цвет в графическом файле несет дополнительную информацию, то если использовать меньшее количество цветов, в результате получится файл меньшего размера. Конечно, уменьшение числа цветов в графическом файле может приводить к снижению качества изображения. Но при сохранении изображения с меньшим количеством цветов, всегда можно визуально оценить качество получаемого изображения и добиться приемлемых результатов. 3.5. Советы дизайнеру по работе с цветом § При создании Web-узла старайтесь использовать наименьшее количество цветов. В вопросах дизайна фраза «лучше меньше, да лучше» действительно справедлива. § Длинные фрагменты светлого текста на темном фоне трудно читаемы. В этих ситуациях используйте темный текст на светлом фоне. В качестве фона в палитре 216 цветов есть ряд цветов которые являются достаточно светлыми. § Основной текст Web-узла не обязательно должен быть черным. Можно попробовать использовать темно-синий или зеленый цвет. § Фотографии на Web-сайте не обязательно должны быть полно цветными. Применив осветление или насыщенность можно придать изображениям общий стиль. При работе с Photoshop удобно загрузить Web-палитру. По умолчанию загружается палитра 122 цвета. Для загрузки Web палитры (216 цветов) щелкните на стрелке справа, откроется меню палитры. Выберите команду Replace Swatches (Заменить каталог). Откройте папку Program Files/Adobe/Photoshop/Goodies/Color Palettes и выберите файл Web Colors.
13 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Загрузка палитры Web
При выборе цвета можно выбрать палитру цветов Web (Only Web Colors). Если используется вся палитра цветов удобно использовать шестнадцатеричное представление цвета. 14 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
4. ОСНОВЫ РАБОТЫ В PHOTOSHOP Работая в графическом пакете Photoshop, необходимо отметить простоту интерфейса. Можно выбрать нужный вам инструмент, щелкнув мышью на его значке в панели инструментов. Маленький треугольник справа внизу от значка инструмента указывает на существование открывающегося меню невидимых (альтернативных) инструментов. Чтобы выбрать такой инструмент, нужно установить курсор на значок закрывающего его инструмента, нажать левую кнопку мыши и, удерживая ее, переместить курсор на значок нужного инструмента. Для отображения или отключения различных панелей инструментов пользователю достаточно выбрать команду в меню Window. Параметр Show говорит о том, что панель можно открыть, Hide – закрыть.
4.1. Слои Каждый создаваемый в программе Adobe Photoshop документ сначала состоит только из фона. Фоновый слой может быть белым (White), окрашенным в текущий цвет заднего плана (Background color), либо прозрачным (Transparent). Эту характеристику вы можете задавать каждый раз при создании нового изображения.
15 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Слои можно рассматривать как прозрачные носители (например, калька), наложенные друг на друга. Удобно, с точки зрения редактирования, разнести фрагменты изображения по различным слоям. Слои можно создавать, дублировать, связывать, удалять, объединять, изменять порядок слоев. Палитра Layers вызывается (как и все остальные палитры) через меню Windows. При необходимости можно добавить в документ один или несколько слоев. Слои предоставляют пользователю возможность редактировать отдельные элементы изображения независимо друг от друга. Таким образом, можно изменять и перемещать содержимое любого слоя, не затрагивая при этом объекты, расположенные на других слоях. Для создания нового слоя достаточно щелкнуть левой кнопкой мыши на кнопке Create new Layers. Выделенное синим цветом имя слоя и изображение кисточки ( ) показывают какой слой является в данный момент текущим, то есть, в каком можно строить изображение (если он, конечно, не заблокирован). Текущим слой можно сделать, щелкнув на его имени в палитре. На вкладке палитры Layers перечислены все слои изображения, начиная с верхнего; background-слой всегда расположен в самом низу таблицы (при создании нового прозрачного изображения первый слой называется Layer 1). Самый верхний слой в палитре является верхним и на изображении. Захватывая (удерживая в нажатом состоянии левую кнопку мыши на имени слоя) слой, можно его переместить в списке слоев куда-либо, таким образом, менять очередность слоев на изображении. Среди прочих параметров у слоя есть, как и у большинства инструментов, параметр Opacity (непрозрачность). Варьируя значением этого параметра, можно получать интересные эффекты наложения изображений. Используя режимы наложения, можно добиваться специальных эффектов, по Вкладка слои
Режимы наложения Прозрачность слоя
Сохранить прозрачность Слои Показать, спрятать слой Создание нового слоя
Удаление слоя
умолчанию недоступных, изменять параметры прозрачности и режимы наложения, не изменяя при этом графического (фактического) содержимого слоев. При помощи команды Merge Visible объединяют видимые слои, (команда находится в меню в палитре Layer, или ее можно вызвать, указав левой кнопкой мыши на кнопке слоев). До тех пор, пока вы не объедините слои, каждый из них будет оставаться независимым элементом изображения. Слои сохраняются только при сохранении 16 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
в формате Adobe Photoshop (.psd). Любые другие графические форматы не поддерживают слоев. Указав мышью (правая кнопка) на имя слоя в палитре, можно выбрать опцию Layer Options и с помощью открывшегося диалога задать или изменить имя слоя, степень его прозрачности и режим наложения. 4.2. Инструменты выделения Средства выделения предоставляют единственный реальный способ создания четкой графики с ясно определенными границами. Очень часто пользователю приходится редактировать фрагмент изображения. Чтобы не затронуть другую часть изображения, необходимо выделить этот фрагмент, используя для этого один из инструментов выделения. Инструменты выделения находятся вверху на панели инструментов. Рассмотрим инструменты выделения прямоугольной ( ) и эллиптической ( ) областей. Область создается при нажатой левой кнопке и перемещении мыши. Если удерживать при этом клавишу Shift, область будет правильной формы, т.е. квадратной или круглой. Область выделения отображается на экране бегущей штриховой линией. Если навести курсор мыши внутрь области выделения, то при нажатой левой кнопке мыши ее можно переместить в нужное место. Если нажать клавишу Shift перед началом выделения, то фрагмент будет добавляться к существующим выделенным фрагментам. Если удерживать нажатой клавишу Ctrl, то будет происходить вычитание областей из активного выделения. Для снятия выделения, выберите команду Select→Deselect, или сочетание клавиш Ctrl+D. Когда на изображении есть область выделения, то доступно для редактирования только то, что находится внутри нее. 4.3. Использование инструмента Magic wand («Волшебная палочка») Инструмент «волшебная палочка» позволяет выбирать цветную область (соседние пиксели по цветовому диапазону, или «допуску») без необходимости обводки ее контура. Для осуществления такого выбора необходимо следующее. 1. Выбрать инструмент «волшебная палочка» ( ). 2. В поле допуска, ввести значение в пикселях, в пределах от 0 до 255. Малое значение позволяет выделять цвета очень похожие, при большем выделяется более широкий диапазон цветов. 3. Чтобы смягчить край области выбора, необходим режим Anti-aliased. 4. Чтобы выделить только смежные области, использующие те же самые цвета что и выделенный пиксель, используется режим Contiguous. В изображении, выбирается цвет, который необходимо выделить. Если режим Contiguous отключен, будут выделены все пиксели на всем изображении в пределах диапазона допуска.
17 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
5. Чтобы выделить цвета, использующие данные от всех видимых слоев, выбирается Use All Layers (Использовать все слои). Иначе, инструмент «волшебная палочка» выберет цвета только из активного слоя. 4.4. Изменение размера, яркости и контрастности изображения Перед размещением графических изображений на веб странице необходимо задать их размеры в соответствии с выбранной композицией. Откройте графический файл в программе PhotoShop. Если выполнить команду Image → Image Size, откроется окно в котором показаны текущие значения Ширины и Высоты Вашего изображения. Если опция Constrain Proportion (пропорциональность) включена (параметры Ширина и Высота будут связаны скобкой), и в полях Width (Ширина) или Height (Высота) изменение одного из значений приведет к автоматическому изменению второго значения. Всегда уменьшайте изображение, а не увеличивайте. При увеличении изображение будет терять резкость. Масштабируйте изображение за одну операцию. Многократное масштабирование также приведет к потере качества изображения. Иногда необходимо скорректировать яркость и контрастность. Для этого выполняются команды Image → Adjust → Brightness/Contrast. С помощью движков и визуальной оценки корректируется яркость и контрастность изображения. Флажок Preview (Просмотр) позволяет отслеживать результат внесения изменений. 4.5. Выбор цвета Индикатор Foreground Color / Background Color (Основной и фоновый цвета) отображает выбранные текущие цвета. Он расположен на панели инструментов. Первый цвет расположен выше и является основным. Этот цвет применяется при использовании любого инструмента рисования. Для переключения этих двух цветов достаточно щелкнуть на дуговой стрелке в правом верхнем углу. Чтобы вернуться к цветам, заданным по умолчанию, нужно щелкнуть на значке Default Colors в левом нижнем углу. При щелчке на цвете Foreground появится окно Color Picker (Палитра цветов). Перемещение движка по вертикальной линейке, приводит к перемещению по спектру. Для выбора конкретного цвета необходимо щелкнуть в большом цветовом поле. Для выбора цвета удобно использовать палитру Swatches (Каталог). В ней отображаются образцы заданных цветов. 1. Поместив указатель мыши поверх палитры, курсор примет вид пипетки. 2. Щелчок на любом цветовом поле, позволит осуществить выбор цвета. 4.6. Работа с текстом При необходимости можно сделать надписи в рисунке, например, на кнопках. Для этого необходимо. 18 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
1. Выбрать инструмент Type ( ); 2. Щелкнуть на рабочем поле; 3. В появившемся текстовом редакторе ввести нужный текст. При этом переместить окно редактора, чтобы был виден текст на рабочей области. Переместив курсор на рабочее поле, можно переместить введенный текст, не закрывая окна редактора. 4. При окончании ввода текста достаточно щелкнуть в окне текстового редактора ОК. В результате в палитре Layer появится новый слой с символом Т. Необходимо помнить, что любое новое применение инструмента “текст” приводит к автоматическому образованию нового слоя, что сразу же отображается в палитре слоев. Для редактирования содержания текста достаточно дважды кликнуть на текстовом слое. Выбор начертания шрифта: подчеркнутый, жирный, курсив Выбор гарнитуры шрифта Расстояние между строчками
Выбор размера и единиц измерения шрифта
Выбор цвета шрифта Выбор режима сглаживания Область ввода текста
Межбуквенное расстояние
4.7. Инструмент Rubber Stamp (Штамп) Этот инструмент копирует пиксели из одной части изображения в другую. С помощью штампа можно слегка подправить изображение, удалить ненужный фрагмент, скопировать часть изображения. При копировании различных изображений всегда необходимо обратить внимание на то, в каком цветовом режиме сохранен открытый файл. Для этого воспользуйтесь командой Image→Mode. Если копируются фрагменты изображения из одного файла в другой, необходимо, чтобы цветовые режимы у файлов совпадали! Если вы после открытия файла (например, скаченного из Internet) видите, что некоторые функции, инструменты PhotoShop не работают (не активны), следует перевести изображение в цветовой режим RGB. 19 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Часто на фотографиях видны лишние элементы фона, избавиться от них можно, скопировав фрагмент изображения в другой файл, или на фоновую картинку. 1. Выбирается инструмент Rubber Stamp ( ) на палитре инструментов. 2. В палитре Brushes указывается нужный размер кисти. 3. Подводится курсор к фрагменту изображения, который нужно скопировать. Далее, удерживая клавишу Alt, необходимо щелкнуть левой кнопкой мыши, чтобы определить начальную точку. 4. Поместить курсор в место копирования фрагмента. Нажмите левую кнопку мыши и перемещайте мышь. Место, откуда копируется фрагмент изображения, отмечается перекрестием.
4.8. Примеры Пример 1: создание базовой кнопки Создайте документ с размером 50*50 пикселей (File →New). В появившемся диалоговом окне, в разделе Contens выберите опцию Transparent (прозрачный фон). 2. С помощью инструмента Elliptical Marquee tool, удерживая клавишу Shift нажатой, выделите область в виде окружности. 1.
3.
Выберите цвета: Foreground – белый, а Background цвет создаваемой кнопки. Для задания цвета необходимо щелкнуть мышкой на верхнем квадратике – Foreground и нижнем – Background.
4.
Залейте выделенную область градиентом (инструмент Radial Gradient tool ) так, чтобы была имитация трехмерного изображения. Из возможных вариантов градиентных заливок необходимо выбрать радиальную.
20 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Уменьшите на 3-4 пикселя выделенную область (Select→ Modify→ Contract). Поверните содержимое выделенной области на 180 градусов (Edit→Transform→ Rotate 180). Таким образом, имитируется вогнутая поверхность. 6. Создайте копию текущего слоя (Duplicate Layer). 7. Уменьшите еще на 1-2 пикселя выделенную область (Select→ Modify→ Contract). Затем снова поверните содержимое выделенной области на 180 градусов. У нас получилась круглая кнопка в двух «состояниях» — исходном и «нажатом». Это понадобится в том случае, если использовать эффект Rollover Image (Сменяющаяся картинка), то есть при наведении курсора мыши на кнопку, имитируется эффект нажатия. Этот эффект можно реализовать при разработке Web-страницы в программе Dreamweaver. В Photoshop наша задача подготовить два изображения. 8. Для использования созданной кнопки на странице html необходимо, чтобы фон за кнопкой был прозрачным. Для сохранения прозрачности фона сохраните файл в формате GIF. • Сделайте видимым один слой (кнопка отжата). 5.
• Вызовите команду File → Save for Web. • Выберите вкладку, делящую экран на два видовых окна: исходное и оптимизированное изображения. Параметры оптимизации находятся справа вверху. Выберите формат сохранения GIF, обязательно включите опцию Transparency. Можно поварьировать количеством используемых цветов. Чем меньше цветов, тем меньше размер файла, но ухудшается качество изображения. Выберите приемлемый вариант с вашей точки зрения. Нажмите ОК и сохраните в своем каталоге под именем button1. • Сделайте второй слой видимым (кнопка нажата) и проделайте те же действия. Имя файлу присвойте button2. Если размер изображения меньше рабочей области, то есть вокруг кнопки есть поля, необходимо их обрезать. Для этого, до выполнения пункта 8 проделайте следующее. 1. Выберите один слой активным, а второй выключите, нажав на значок ( ) в палитре слоев. 2. Выберите инструмент «волшебная палочка» и щелкните курсором на фоне. В результате будет выделено все, кроме кнопки. 3. Инвертируйте выделение командой Select→Inverse. В результате будет выделена кнопка. 4. Скопируйте содержимое выделенной области в буфер командой Edit→Copy. 21 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
5. Создайте новый файл: File→New, ничего не меняя в установках, нажмите ОК. дело в том, что размер нового файла в точности соответствует размеру изображения, находящемуся в буфере. 6. Вставьте из буфера в новый файл изображение Edit→Paste и сохраните его командой Save for Web. То же самое проделайте с изображением на втором слое. Пример 2: создание выдавленной надписи 1. Создайте надпись на кнопке используя инструмент Type Tool ( ). В палитре слоев наведите курсор мыши на текстовый слой и кликните правой кнопкой мыши. В появившемся контекстном меню выберите пункт Effects. 2. Появится диалоговое окно Effects. Выберите из списка эффектов Bevel and Emboss (скос и рельеф). 3. Настройте параметры данного эффекта такими, как представлено на рисунке, а потом попробуйте их изменить по своему усмотрению. В результате применения данного эффекта к текстовому слою получится выдавленная надпись. Список эффектов
Применить
Подсветка
Тень
Стиль
Можно тонировать надпись, для этого надо дважды кликнуть на названии текстового слоя и изменить цвет шрифта, щелкнув на прямоугольнике цвета в диалоговом окне.
22 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Пример 3: Создание надписи, выдавленной из фоновой картинки 1. Откройте любой файл с фоновой картинкой. 2. Создайте надпись инструментом Type Tool. 3. Создайте копию слоя Background. Для этого из контекстного меню, открывающемся при нажатии на черный треугольник в палитре слоев, выберите команду Duplicate Layer… 4. Активизируйте новый слой и поместите его поверх текстового слоя (переносом мышью за заголовок слоя при нажатой левой кнопке). 5. Подведите курсор мыши точно к границе этих слоев и нажмите клавишу . Курсор примет вид пересекающихся окружностей ( ). После чего щелкните левой кнопкой мыши, в результате слои сгруппированы. После этой операции буквы стали прозрачными и сквозь них видна фоновая картинка.
6. Можно применить к текстовому слою эффект Bevel and Emboss, который вызывается по щелчку правой кнопкой мыши на названии слоя, командой Effects. 7. На экране появится диалоговое окно, в котором можно настроить параметры выбранного эффекта. Попробуйте поизменять стили данного эффекта и выберите наиболее подходящий для Вашего случая (смотри предыдущее задание).
23 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
5. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS КАК СРЕДСТВО ДИЗАЙНА Каскадные таблицы стилей (Cascading Style Sheets) – современное средство для разработки Web-приложений и оформления страниц. С помощью CSS можно определять размер и начертание шрифта, цвет фона и текста, цвета ссылок, поля и расположение текста и графики на странице. Таблицы стилей могут быть встроенные, внедренные и связанные. Таблицы стилей называют каскадными, потому что они могут определяться как для всего Web-сайта, так и на различных уровнях страницы и переопределять стили более высоких уровней. Встроенные стили воздействуют на отдельный тег, внедренные – на всю страницу, а связанные применяются для всего сайта. 5.1. Встроенные (Inline) стили Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Он определяется при помощи атрибута STYLE. Атрибут и его значения помещают прямо в тег:
Добро пожаловать!
5.2. Внедренные (Embedded) стили Внедренный стиль позволяет определить атрибуты всей HTML страницы. Он создается при помощи тега <STYLE>, который помещается внутри раздела страницы HTML. <TITLE>Embedded Styles <STYLE> BODY {font:30pt "Arial"; color:red} H1 {font:15pt "Times"; color:green} P {font:10pt "Arial"; color:blue} Text
This is the H1 style
This is the P style
24 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
5.3. Связанные (Linked или External) стили Связанная таблица стилей позволяет создавать образцы стилей (master styles), которые можно применить ко всему Web-сайту. Связанные таблицы стилей создаются как обычный текст в файле с расширением CSS. Эти стили связываются с одной или несколькими Web-страницами при помощи тега , который помещается на той странице, где эти стили будут применяться. Тэг помещается в разделе HEAD и поэтому доступен перед тем, как программа просмотра окончательно сформирует страницу. Предположим, имеется таблица стилей в файле MYSTYLE.CSS и необходимо связать ее с Web-страницей. Тогда в разделе этой страницы нужно написать: Ниже приведен фрагмент типичной таблицы стилей. BODY { margin-left: 20px; margin-right: 20px; font: 14pt/14pt "Arial"; text-align: left; color: Red; background: transparent; } P{ color: Blue; margin-left: 0px; text-indent: 0px; font: 14pt/14pt "Times New Roman; background: transparent; } H1 { margin-left: 0px; font: 30pt/30pt "Arial"; color: Green; font-weight: bold; background: transparent; } Теперь если возникнет необходимость изменить стили во всех связанных Webстраницах, то для этого достаточно изменить определение в таблице стилей.
25 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
5.4 Динамические макеты Одна из интересных возможностей CSS – указание абсолютного положения элементов Web-страницы. Текст и графика могут быть не только точно расположены относительно краев страницы, но даже располагаться поверх друг друга.
Text
New Text
Приведенный фрагмент демонстрирует задание расположения текста на странице в абсолютных координатах.
26 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
6. МУЛЬТИМЕДИА И СЕТЬ ИНТЕРНЕТ 6.1. Общие сведения Мультимедиа – это любая комбинация текста, графических изображений, звука, анимации и видео, которые предоставляются нам с помощью компьютера или другой электронной техники Проект мультимедиа не обязательно должен быть интерактивным, пользователь может смотреть его как фильм или телепередачу. В этом случае проект называется линейным (linear). Если пользователю предоставлена возможность выбора, то мультимедиа становиться нелинейным (nonlinear) и интерактивным, что обеспечивает наиболее удобный доступ к информации. Гибкость доступа к информации, заложенной в проекте мультимедиа, требует особого внимания к сообщениям, созданию сценария (scripting), сортировке и последовательности показа информации (storyboarding), художественному оформлению и программированию. Элементы мультимедиа связываются в проект с помощью инструментальных средств (authoring tools). Для работы с мультимедиа в сети Интернет требуются специальные протоколы, использующие соответствующие документы и форматы данных. Компьютер – получатель должен иметь соответствующее программное обеспечение и аппаратные средства для декодирования этой информации и воспроизведения видео и звуковых данных. Программы просмотра (browsers) позволяют устанавливать дополнительные типы фалов и назначить каждому типу прикладные программы для декодирования и воспроизведения данных. Элементы мультимедиа обычно записываются и передаются по сети Интернет в форматах MIME-типов (Multipurpose Internet Mail Extensions) и имеют соответствующие расширения. Например звуковые файлы имеют расширения .WAV, .AU, .AIF и другие. Фильмы в формате QuickTime имеют расширения .QT или .MOV, видео от Microsoft (Microsoft Video for Windows) известно как .AVI (Audio Video Interface). Для создания эффективного мультимедиа разработчикам следует не только понимать, как создавать и редактировать элементы мультимедиа, но и как поставлять эти элементы для HTML-броузеров, программных модулей и устройств воспроизведения. Официальная версия HTML 2.0 предоставляет только метод для вставки объекта в HTML-документ – тег . Для версии HTML 3.0 предлагается новый тег для объектов мультимедиа, включая аудио, видео и такие средства как апплеты на языке Java, COM-объекты (Components Object Model) фирмы Microsoft и OLE (в настоящее время называемые “Active-x”). Этот тег должен впоследствии заменить тег <EMBED>, который используется в Microsoft Explorer и Netscape Navigator для вставки программных модулей мультимедиа. 6.2. Видео- и аудио - форматы Говоря о видео- и аудио- форматах, хотелось в первую очередь остановиться на формате MPEG. История семейства форматов MPEG, к которому собственно и 27 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
принадлежит стремительно набирающий в последнее время популярность формат MPEG-4, началась в 1988 году. Именно в этом году был основан комитет Moving Pictures Expert Group, что на русский переводится примерно как экспертная группы кинематографии (движущихся изображений), аббревиатура которого – MPEG известна теперь любому, кто имел дело с мультимедиа - компьютерами или с цифровым телевидением. В этом же году была начата разработка формата MPEG-1, который в окончательном виде был выпущен в 1993 году. Но кроме изображения в практически любом видеофрагменте присутствует так же и звук. Кодирование звука осуществляется отдельным звуковым кодером. По мере развития формата MPEG, звуковые кодеры неоднократно переделывались, становясь все эффективнее. К моменту окончательной стандартизации формата MPEG-1 было создано три звуковых кодера этого семейства - MPEG-1 Layer I, Layer II и Layer 3 (тот самый знаменитый MP3). Принципы кодирования всех этих кодеков основаны на психоакустической модели, которая становилась все более и более совершенной и достигла своего апофеоза для семейства MPEG-1 в алгоритмах Layer-3. В Windows для воспроизведения мультимедиа использовался Microsoft Windows Media Player. Но он не поддерживал воспроизведение новых форматов данных, в первую очередь семейство форматов MPEG. В новой программе Microsoft Windows Media Player 7 существенно расширился список поддерживаемых форматов. Кроме этого, программа совершенно не похожа на предшественниц и обладает рядом очень полезных особенностей. В частности, в Media Player 7 есть встроенная система true-bass, существенно улучшающая звучание низких частот и придающая композиции глубину, есть многополосный графический эквалайзер, плагины визуализации и даже скины, позволяющие совершенно изменить облик программы, чего в предыдущих версиях не было. Программа совершенно бесплатна и ее можно загрузить по адресу: www.microsoft.com/windows/mediaplayer/download/.
28 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
В последнее время на смену формату .AVI приходят новые форматы для хранения видео и звука. Это формат .WMV (Windows Media Video), который получает все большее распространение для хранения и передачи звуковой и видеоинформации в Интернет. Данные в этом формате воспроизводятся проигрывателем Windows Media. Начиная с версии WindowsME, в стандартную поставку входит программа Windows Movie Maker, которая позволяет производить простейшее редактирование видео и аудио информации и сохранить готовый клип в формате .WMV. Степень сжатия и, следовательно, качество записи можно выбирать перед сохранением файла.
29 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Технология QuickTime (Macintosh) использует свой фирменный формат. Программа QuickTime предназначена для воспроизведения звука, анимации и видеофайлов на компьютере. Формат “MOVIE” представляет собой контейнер с многочисленными «дорожками», каждая из которых содержит информацию о данных, связанных со временем. Программу можно скачать по адресу:
http://www.apple.com/quicktime/download/ В последнее время в Интернет часто встречаются данные в формате Real Audio (Real Video).RealAudio — это формат записи музыки в Интернет, а RealVideo — формат записи видео. Эти форматы используются для проигрывания на компьютере, подключенном к Интернет, аудио- и видеоклипов, причем они могут быть как записаны на сервере, так и передаваться напрямую с микрофона (камеры). Прием клипа осуществляется одновременно с его проигрыванием. В общем случае, клип на жестком диске не сохраняется. Для проигрывания таких клипов есть программа RealPlayer. Она поставляется бесплатно и ее можно скачать на http://www.real.com/. В Интернет можно послушать русские радиостанции, вещающие в формате RealAudio. Для всех: www.math.msu.su/~guzei/radio – это указатели на все радиостанции, работающие в России по городам. Есть станицы для RealAudio и RealVideo. 6.3. Краткий обзор инструментальных средств мультимедиа Для работы со звуком предлагается множество программ. Простейшие программы для работы с аудио включены в состав всех версий Windows. С их помощью можно регулировать громкость разных источников звука, а также установить чувствительность микрофона и линейного входа. Кроме этого можно записать небольшой звуковой фрагмент. 30 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Специальные звуковые редакторы позволяют вводить и обрабатывать звуки из различных источников, улучшать качество звучания и добавлять эффекты. Лучшими звуковыми редакторами признаны SoundForge и WaveLab. Для многоканального монтажа применяется редактор Cool Edit. Для создания и редактирования музыки в формате MIDI можно назвать программы CakeWalk Pro Audio и Cubase. Для работы с видео можно использовать как встроенные средства Windows, так и множество специализированных программ. Самыми известными программами для работы с видео являются Adobe Premiere, Adobe After Effects и Ulead Media Studio Pro. С помощью этих программ можно создавать видеоролики профессионального качества. Эти программы являются универсальными и позволяют оцифровывать видеосигнал, производить его обработку, а также кодировать полученное изображение в различные форматы. Adobe Premiere и Adobe After Effects – это программы, взаимно дополняющие друг друга. Если первая предназначена для монтажа видеофильма из отдельных фрагментов, то вторая создает эффекты, смешивая произвольное количество клипов различными способами, недоступными программе видеомонтажа. Например, очень удобно использовать Adobe After Effects для соединения видео и компьютерной графики. Компания ULEAD предлагает целый набор программ для видео и анимации. Большинство из них доступно на сайте http://www.ulead.com .
31 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Кроме универсальных программ существуют специализированные, которые решают отдельные задачи. Отдельную группу программ составляют, так называемые, кодеры. Назначение этих программ – преобразование видео изображений из одного формата в другие. Чаще всего используют кодеры в различные стандарты MPEG. Один из них Xing MPEG Encoder.
6.4. Использование технологии Lotus Screen Cam При дистанционном обучении основной организационной формой учебной деятельности является самостоятельная работа студентов над учебной информацией, которая представляет собой мультимедиа-уроки, записанные на CD. Уроки подготовлены высококвалифицированными преподавателями, содержат их объяснения и последовательность действий. Для создания учебных материалов используются программные продукты фирмы Macromedia – Director, Flash и фирмы Lotus – ScreenCam. Важной отличительной чертой уроков, выполненных с использованием технологии “screen recording” (записи всего, что происходит на экране компьютера) от традиционного книжного описания является то, что здесь фиксируются все действия преподавателя, и обучаемый видит результат на каждом этапе объяснения (в то время, как автор книги может упустить некоторые моменты, которые он подразумевает, но о них не упоминает). В результате, при выполнении упражнений по книге, не всегда получается ожидаемый результат.
32 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Подготовка уроков по технологии “Screen Recording”не занимает много времени и позволяет привлечь к их созданию профессионалов по программированию, которые никогда бы не задумывались о написании книг. 6.5. Вставка звука и видео на страницу Можно озвучить свою страницу разными способами. Звук может срабатывать всегда, когда загружается страница, или при нажатии в документе на какую-либо ссылку. Самый простой способ — это вставка в документ тэга EMBED (вставка), который вызывает программу, отвечающую за просмотр/проигрывание именно этого типа файла. Этот способ будет работать во всех броузерах (NETSCAPE, EXPLORER), где установлены соответствующие дополнения (plug-in'ы), как правило, они уже входят в установочный комплект. Как NETSCAPE, так и MS EXPLORER будут одинаково корректно проигрывать следующие файлы: миры VRML, клипы AVI и QuickTime, видео и аудио MPEG, звуки WAV, музыку MID, файлы Sun AU и звуковые файлы AIFF. Теперь примеры:
33 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
- имя файла MIDI (*.mid), WAV (*.wav) или AVI (*.avi -
- выравнивание консоли с панелью управления; - ширина панели; - высота панели; - проигрывать файл сразу после загрузки страницы (true - да, false - нет); play_loop=2 - количество повторов проигрывания файла, при условии, что repeat = true (повторять или нет проигрывание файла); hidden=false - скрыть / показать панель управления; controls=smallconsole - вид панели управления (уменьшенные кнопки); type="music/crescendo" - подключить конкретную программу (plug-in) для проигрывания файла; song="always.mid" - имя файла и/или путь до него; pluginpage="http://www.firma.com/plagin.html" - ссылка на страницу, откуда можно скачать plug-in, если он не установлен. Для отображения видео файла лучше ставить просто ссылку на него, в этом случае броузер сам запускает программу или плагины для его воспроизведения. Ссылку можно поставить так: Мой видео файл
34 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
7. СОЗДАНИЕ АНИМИРОВАННЫХ GIF СРЕДСТВАМИ IMAGE READY Программа ImageReady является дополнением к программе Photoshop и включает в себя средства работы с анимацией и другие Web-инструменты. Рабочая область программы выглядит аналогично рабочей области Photoshop. Анимация основана на показе кадров (Frames) через заданные промежутки времени. Создание кадров анимации и задание времени их проигрывания задается на палитре Animation. Приведенные примеры покажут основные приемы по работе с этой программой. Пример 1. Появление надписи через определенные промежутки времени Рассмотрим создание простейшей анимации. Войдите в программу ImageReady. Выберите File → New. Используя инструмент Текст, создайте три надписи. Чтобы каждое слово находилось в отдельном слое, перед набором очередной надписи необходимо слой Layer 1 делать активным.
Параметры текста – тип шрифта, его размер задаются на закладке Type. 35 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Анимация создается в палитре Animation (если ее нет, откройте ее командой Windows→Show Animation). На этой палитре можно создать необходимое количество кадров Frames (команда New Frame). При создании нового кадра он повторяет содержимое предыдущего. Для каждого кадра можно установить время проигрывания (нижняя часть кадра) и установить видимость слоев.
Для нашей анимации мы создадим пять кадров. Последовательно появляются слова «МОЯ», «ПЕРВАЯ» и «АНИМАЦИЯ». Для демонстрации того, что количество кадров не связано с количеством слоев, сделаем так, чтобы слово «АНИМАЦИЯ» после появления исчезала и затем появлялась вновь.
Если анимация воспроизводится слишком быстро или медленно можно изменить значения задержки в поле Delay палитры Animation для каждого кадра. Любой кадр в созданной анимации может быть удален или скопирован. С помощью опции Forever можно задать будет ли анимация проигрываться один, определенное количество раз или непрерывно.
36 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Пример 2. Создание постепенно открывающейся надписи Создадим два слоя - первый содержит текст, а второй полностью залит каким либо цветом и находится поверх текстового, т.е. закрывает его. На палитре Animation создадим два кадра – первый надпись закрыта, второй надпись открыта. Внимание, открытую надпись мы сделаем не как в предыдущем примере, выключением слоя, а путем его сдвига вправо (при активном втором кадре и слое Laer2) воспользуемся инструментом Move Tool. Сдвиг слоя выполняем при нажатой кнопке Shift. Теперь наша задача сделать так, что бы надпись открывалась постепенно. Для этого можно создать автоматически промежуточные кадры (команда Tween …).
В итоге получаем постепенно открывающуюся анимацию.
Пример 3. 1. Создадим баннер авторской песни. Для этого нам понадобится изображение гитары, имеющей прозрачный фон. 2. Перейдите в программу ImageReady. Создайте новое изображение с размером 60*468 пикселей командой File–New. Фон установите белым. 3. Выберите инструмент Type и создайте текст. Параметры текста должны быть такими, чтобы он занимал всю ширину баннера. Выберите цвет текста. 4. Скопируйте изображение гитары в созданный документ. Разместите ее изображение так, чтобы она была полностью видна. 37 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
5. Текущим должен быть слой с гитарой! Выберите инструмент Move и с нажатой клавишей <Shift> переместите изображение гитары за левую границу документа. 6. Установите белый цвет основным (Foreground). Заполните им слой с гитарой командой Fill. 7. Переместите гитару инструментом Move с клавишей <Shift> так, чтобы она оказалась посередине документа. 8. Выделите прозрачную часть между грифом и белой заливкой инструментом Magic Wand (Волшебная палочка). Залейте выделенную область белым цветом. 9. Аналогичным образом выделите прозрачную область позади гитары. Выберите инструмент Airbrush. 10. Большой кистью создайте плавный переход от белого к прозрачному цвету. 11. Убедитесь, что все слои видимы. Инструментом Move с клавишей <Shift> переместите гитару за левую границу документа. Это будет первым кадром нашей анимации. 12. Создайте еще один кадр, нажав кнопку с изображением листа – Duplicates current frame на палитре Animation. Повторите предыдущий пункт, переместив гитару вправо за границу документа. Это последний кадр анимации. 13. Для построения промежуточных кадров (для плавного перемещения гитары) выделите оба кадра с клавишей щелкнув на каждом из них. 14. Выберите команду Tween из меню палитры Animation. В диалоговом окне переключатель Layers переведите в положение All Layers, в группе Parameters установите флажок Position, в поле Frames to Add введите число промежуточных кадров анимации, например, 12. Нажмите ОК. 15. Проиграйте анимацию. Установите задержку на последнем кадре 2 сек. 16. Оптимизируйте изображение. Выберите команду Optimize Animation из меню палитры Animation. В появившемся диалоговом окне первая опция обрезает в каждом кадре все области изображения, которые не изменяются на протяжении анимации. Вторая опция удаляет все пиксели, которые не изменяются от кадра к кадру. Кроме всего прочего кадры анимации можно удалять (мусорное ведро на палитре Animation); перемещать мышью по линейке кадров. Если вы хотите изменить положение какого либо объекта в одном кадре, а потом распространить это новое положение на все остальные, то воспользуйтесь командой Match Layer Across Frame из меню палитры Animation. 17. Сохраните анимацию командой Save Optimized. 38 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
7.2. Разбиение графического изображения на фрагменты Обычно графические файлы на Web- страницах размещаются в ячейках таблиц. Для этого изображение разбивают на фрагменты, чтобы затем каждый фрагмент вставить в ячейку таблицы. 1. Выставите направляющие, (они вытаскиваются из линеек) по которым будет происходить «резка» изображения. 2. Выберите команду Slices–Create Slices from Guides (создать фрагменты по направляющим). Для объединения фрагментов (после их выделения) воспользуйтесь командой Slices–Combine Slices. 3. Выберите команду File–Save Optimized As. Включите опцию Save Images. В результате все фрагменты будут сохранены как отдельные графические файлы в папке Images, которая создается по умолчанию, внутри вашей папки. Опция Save HTML file создает HTML файл, в котором прописан код для таблицы с размещенными в ячейки фрагментами нашего изображения.
39 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
8. СОЗДАНИЕ ПРОСТЕЙШИХ КЛИПОВ В ПРОГРАММЕ ADOBE PREMIER 8.1. Общие сведения Чтобы освоить видео-монтаж на персональном компьютере, совсем необязательно иметь дорогостоящее оборудование. Начать освоение этого интересного направления можно с нуля, имея только персональный компьютер. Программа Adobe Premier одна из лучших в области нелинейного видео-монтажа для персональных компьютеров. В общих чертах последовательность работы с программой Adobe Premiere заключается в следующем. Для каждого фильма или презентации создается новый проект. Для него задаются определенные параметры (размер изображения, методы сжатия видео и звука). Затем в проект импортируются файлы с видео, звуком, статическими изображениями, компьютерной анимацией. Весь исходный материал размещается на дорожках окна монтажа. Далее создаются плавные переходы на стыках видеофрагментов и применяются другие специальные эффекты: фильтрация, движения, наложения. После этого смонтированный фильм просматривается, при необходимости выполняется редактирование, а затем готовый проект записывается в нужном формате на диск. Рассмотрим создание простейшего клипа. Для этого необходимо выполнить определенные шаги: ü Запустить программу. ü Создать новый проект и сохранить его на диске File → Save As… Проект имеет расширение ppj. Он будет содержать в себе ссылки на все исходные видео- и аудио фрагменты или клипы, а также титры. ü Импортировать в проект отдельные клипы и статические изображения, из которых будет состоять фильм. ü Просмотреть видео- и прослушать аудиоклипы в специальном окне монитора. ü Разместить видеоклипы в нужной последовательности в специальном окне монтажа. ü Добавить титры в окно монтажа. ü Создать плавные переходы между отдельными клипами. ü Просмотреть готовый фильм в режиме предварительного просмотра. ü Создать файл с фильмом и просмотреть его, используя средства операционной системы Windows. 8.2. Импорт клипов Перед началом работы над проектом необходимо в окно проекта поместить мате риал, который будет в нем спользован. Этот процесс называется импортом. В Premier можно импортировать разнообразные файлы: видео- и аудиофайлы; статичные изображения в формате JPEG, GIF,PSD и 40 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
др. Разрабатываемый клип только ссылается на исходный файл. Окно Project служит для хранения всех исходных материалов для разрабатываемого клипа. Для удобства работы в левой части окна проектов можно создать каталоги (bin – корзины) для упорядочивания большого количества материала. Для импорта файлов в проект необходимо выполнить следующие действия: 1. В окне Project щелкнуть на папке в которую хотим импортировать файл. 2. Выберите команду File→Import→File. Откроется диалоговое окно Import. Если характеристики статичного изображения (пропорции) не соответствуют заданным в проекте, то изображение будет искажаться. Для того чтобы это не происходило, необходимо подготовить картинки соответствующего размера используя программу Photoshop или заблокировать пропорции в окне настроек проекта Edit→Preferences→General and Still Image. Откроется панель General and Still Image диалогового окна Preferences. 8.3. Монтаж фильма Исходные клипы из окна Project перетаскиваются с помощью мыши на дорожку окна монтажа. Вставка клипа между смежными клипами в окне монтажа: 1. Перетащите клип в окно монтажа и расположите на границе двух клипов. Курсор приобретет форму стрелки. 2. Отпустите кнопку мыши. Новый клип будет вставлен, а все последующие сдвинутся по шкале времени на длину этого клипа.
Разрезание клипов. Иногда клип в окне монтажа нужно разрезать на две или несколько частей. Это выполняется с помощью инструмента Razor – Бритва.
41 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
8.4. Переходы Переход – это визуальная смена одного клипа другим. И хотя основным переходом является прямая склейка, под данным термином обычно понимают постепенную замену одного клипа другим. Adobe Premiere содержит 75 настраиваемых переходов, включая наплывы, вытеснения и специальные эффекты. Доступные переходы представлены в программе в палитре Transitions (Переходы), где они сгруппированы впапки.
Добавление перехода в режиме развернутой дорожки осуществляется следующим образом. Перетащите переход из палитры Transitions на дорожку переходов и установите его на границу между клипами. Переход отобразится на границе между клипами, при этом его продолжительность и положение будут определяться параметрами, заданными по умолчанию.
42 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
8.5. Просмотр переходов и эффектов Для просмотра смонтированного фильма достаточно нажать кнопку Play в окне Monitor. При предварительном просмотре в окне Monitor переходы, фильтры и другие эффекты игнорируются, о чем информирует значок X, расположенный в углу окна программы.
Для получения окончательного результат необходимо выполнить Timeline→Preview.
команду
43 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
9. ИНТЕРНЕТ-ТЕХНОЛОГИИ 3D-ВИЗУАЛИЗАЦИИ И ВИРТУАЛЬНЫЕ МИРЫ 9.1. Что такое трехмерный Интернет В настоящее время идет бурное развитие технологий, позволяющих рассмотреть трехмерные модели на сайтах в Internet. С помощью данных технологий пользователь может сам управлять трехмерным объектом (вращать, изменять масштаб, перемещать объект и изучать его конфигурацию). Данные технологии применяются на сайтах различных фирм, Интернетмагазинов, в системах дистанционного обучения. В настоящее время технологии публикации трехмерных объектов в Internet и умение работать в них вызывают большой интерес у специалистов по web-дизайну для осуществления любых запросов заказчика по изготовлению web-сайтов. 9.2. Язык моделирования виртуальной реальности VRML VRML – Virtual Reality Modeling Language (язык моделирования виртуальной реальности) уже довольно давно применяется в сети Интернет. Он признан Webконсорциумом для описания интерактивной трехмерной графики и мультимедийных приложений и стандартизирован (ISO/IEC 14772). VRMLдокумент представляет собой обычный текстовый файл, который содержит описания трехмерных фигур и свойств их поверхностей (цвет, текстура, освещение и т.п.).Такой документ поступает в браузер в виде исходного текста, точно так же, как и обычный HTML-документ. Браузер, получающий VRML-документ, должен уметь интерпретировать VRML-код. Язык VRML был впервые предложили Марк Песк (Mark Pesce), Питер Кеннард (Piter Kennard) и Энтони Париси (Anthony S. Parisi) в мае 1994 г/ на Первой международной конференции по WWW, а его первая спецификация (VRML 1.0) была подготовлена на основе формата Open Inventor фирмы SGI (Silicon Graphics), и впервые представлена на Второй конференции WWW в октябре 1994 г. Виртуальная реальность состоит из блоков VRML, которые называются мирами VRML. Спецификация языка представляет собой набор команд, называемых элементами (nodes) и предназначенных для создания простых объектов типа сферы, куба или цилиндра, а также объектов, состоящих из наборов вершин (vertices) и сторон (faces). Язык VRML позволяет создавать более сложные объекты путем комбинации простых объектов. Это иерархический язык – порожденные или дочернии (child) объекты наследуют свойства родительских (parent) объектов. Для определения местоположения и отношений различных объектов между собой требуется указание их относительных размеров и координат VRML. В дополнение к этому язык позволяет определить освещение в вашем мире, а также предварительно установленные пейзажи. Версия языка 1.0 была статичной. Изменялось лишь место расположения зрителя при его передвижении по виртуальному пространству. VRML 2.0 позволяет создавать динамические миры, благодаря значительному расширению его 44 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
интерактивных возможностей. Стандарт VRML 2.0 поддерживает анимацию и звуковые эффекты; для него существует поддержка на уровне языков Java и JavaScript. VRML 2.0 был рассмотрен открытой дискуссионной группой и одобрен многими компаниями, а в августе 1996 года был принят его стандарт. В декабре 1997 года VRML 2.0 был официально заменен на VRML 97 (называемый также VRML Technical Symposium), который был впервые представлен в феврале 1997 года в Монтерее (Калифорния,США). Новый стандарт ISO/IEC 14772 практически идентичен спецификациям VRML 2.0 с учетом редакционных поправок и некоторых незначительных функциональных различий. Таким образом, текущим VRMLстандартом является VRML 97, а в работе находится новый формат – VRML 200х. VRML-программу можно сделать оптимальной и более корректной, улучшив скорость отображения и время транспортировки. Добиться этого можно следующим путем: так как VRML-файлы текстовые, можно достичь высокой степени их сжатия утилитой упаковки данных. Например, wrl-файл размером 358 Кб может быть уменьшен до 69 Кб, т.е. сжат приблизительно в 5 раз. Крайне нежелательно, чтобы время, затрачиваемое на распаковку файла, составляло значительную долю в общей сумме временных затрат от начала транспортировки по сети до момента его отображения. Поэтому интересно сравнить время, затрачиваемое на транспортировку и распаковку виртуальных миров, со временем передачи по сети несжатого VRML-файла.
Виртуальная модель ИТМО (ТУ) Новичкам моделирования можно посоветовать следующее: 1. Не создавайте невидимые объекты (объекты внутри объектов) 45 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
2. Используйте примитивы, а не многоугольники, т.к. многие VRML-броузеры содержат алгоритмы, позволяющие отображать примитивы (конус, куб, цилиндр и сфера) намного быстрее, чем объект, состоящий из многоугольников. Экономия вычислительных ресурсов очевидна на примере примитива типа сфера, имеющего только один параметр – радиус. По сравнению с объемом информации, необходимой для создания сфероподобного многоугольника, выгода огромна. 3. Используйте как можно меньше многоугольников. Большинство экспертов по VRML при создании виртуального мира задействует не более 10000 многоугольников. 9.3. Metastream Технология MetaStream была разработана в начале 1999 года группой Real Time Group (RTG), подразделением компании MetaCreations (http://www.metacreations.com), совместно с Intel для демонстрации трехмерных объектов через Интернет, и лицензирована Microsoft. Особенностью и новшеством этой технологии является использование трикселов. Пока файлы .MTS поддерживаются только двумя средами трехмерного моделирования – Ray Dream Studio и Ray Dream 3D (их производитель MetaCreations). Есть также plug-in для импорта из 3D Studio Max. MetaStream – это формат для потоковой загрузки 3D-объекта. Он предполагает так называемый "multiresolution", то есть, в файле данных лежит несколько уровней детализации одного фэйссета. Алгоритм Metastream устроен так, что предусматривает автоматическое упрощение объекта и текстур, таким образом, MetaStream как бы подстраивается под возможности компьютера, а также под скорость связи по Интернету. Когда браузер прочитал один уровень (очень грубый), он тут же его показывает. Создается ощущение, что сцена загрузилась мгновенно, хотя размеры файлов в Metastream достаточно большие. Структура файла очень оптимизирована под размер, используются только jpg-текстуры. Получается вполне приемлемое изображение и скорость анимации даже на достаточно медленных процессорах с частотой 133 МГц и небольшим объемом памяти. Меньше изображение объекта – меньше трикселов, а значит, меньше поступило информации об объекте. Больше изображение – больше трикселов, машина больше “узнала” об объекте, картинка стала еще детальнее: вам видны ее мелкие части. Объект появляется не сразу, а по мере его загрузки. Все это чем-то напоминает interlaced GIF. Более того, существует возможность настройки изображения, то есть разработчик может сам настроить разрешение, выбирая между скоростью и детализацией. Так, к примеру, можно получить отображение только каркаса модели. Со стороны пользователя может быть выбран один из следующих способов визуализации объекта: OpenGL, Direct3D или MetaCreation’овский SreeD. 46 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
Еще одним, не менее важным преимуществом технологии MetaStream, является простота разработки MetaStream-объектов. Разработчики Web-сайтов получают возможность создавать 3D-объекты, используя стандартные средства трехмерного моделирования. Созданный разработчиками в RayDream Studio или RayDream 3D-объект может быть с легкостью сохранен в файл с расширением .MTS, который и является исходным файлом MetaStream. Наряду с этим компания выпускает и также бесплатно распространяет “plug-in” для Kinetix 3D-studio MAX версий 2 и 2.5, который позволяет экспортировать практически любой объект, созданный с использованием этой популярной программы, в формат .MTS. При этом разработчик имеет возможность указать качество текстур объекта, что напрямую влияет на конечный размер файла, а также вид освещения объекта. После того как вы создали файл .MTS, содержащий 3D-объект и текстуру, вы загружаете .MTS-файл на сервер и прописываете управляющий HTML-код в вашу страницу. Сам по себе код может быть изменен и является мощным средством настройки различных параметров визуализации вашего 3D-объекта. Кроме стандартных параметров любого HTML-объекта, таких как ALIGN, BGCOLOR, BACKGROUND и т.д., вы можете регулировать многие другие дополнительные параметры, начиная с простых (таких как замена цвета background при наведении курсора мыши на объект) и заканчивая такими “наворотами”, как регулировка скорости анимации, качество детализации объекта, настройка объектива виртуальной камеры, режима вращения, возможность указания URL, который загрузится при клике, не говоря уже о том, что объект MetaStream имеет свой собственный графический интерфейс. При ссылке непосредственно на MTS-файл, он показывается в специальном графическом интерфейсе с необходимыми элементами управления. Анимация в реальном времени, “оживление” персонажей 3D-сцен, сквозное интерактивное управление, возможность интеграции с видео, синхронизация со звуком и другие возможности постоянно совершенствуются, и в самом ближайшем будущем формат Metastream станет полностью универсальным и возможно составит серьезную конкуренцию VRML-формату.Модели формата Metastream поддерживает следующие эффекты и свойства: • Тени на объектах • Наложение карт отражения • Моделирование преломлений на драгоценных камнях и стекле • Текстурные карты высокого разрешения • Высокая детализация моделей • Маленький размер передаваемого файла Создаваемые в Metastream модели полностью управляемые, с текстурой высокого разрешения, тенями, отражениями и даже анимацией в реальном времени. Этот формат можно использовать для разного рода презентаций, электронных витрин в Интернет-магазинах и т.д. Причем любой демонстрируемый товар можно будет сильно увеличить, осмотреть со всех сторон, а также поменять цвет, обивку мебели, пере компоновать детали и части объекта, а также составить различные комбинации товаров. При просмотре вы можете изменять размер окна, масштабировать, вращать и перемещать объекты в любых направлениях практически без потери качества визуализации. 47 PDF created with FinePrint pdfFactory trial version http://www.pdffactory.com
