"Компьютерная графика в дизайне web-страниц"
Введение
Первый в мире сайт info.cern.chпоявился в 1990 году, далее сайты развивались, и появилась необходимость оформления сайтов, с целью приятного визуального восприятия его пользователем.
В данной работе мы постараемся изучить основные понятия компьютерной графики, дизайна web-страниц а также основы построения композиции и подбора цвета. Распишем достоинства и недостатки как растровой, так и векторной графики, так же узнаем с каким программным обеспечением лучше всего работать для создания графического оформления, рассмотрим цветовые модели, укажем плюсы и минусы каждой модели. Опишем форматы графических изображений, которые используются в web-дизайне.
web дизайн компьютерный графика
1. Понятие web-дизайна
.1 Понятие web-дизайна
Веб-дизайн (от англ. webdesign) - это визуальное оформление веб-страниц. Он играет такую же роль для сайта, как полиграфический дизайн и вёрстка для бумажного издания. Часто «веб-дизайном» называют веб-разработку, то есть дело создания сайта вообще: проектирование структуры, навигации и иногда даже движков сайта.
С первого взгляда может показаться, что ответить на этот вопрос совсем несложно. Первое, что приходит в голову - это графическое оформление. Однако сегодня в это понятие вкладывается гораздо большее по широте охвата значение. Возможно, это не совсем верно, но на сегодняшний день, говоря «веб-дизайн», подразумевают не только профессиональное графическое оформление сайта.
В этом понятии собрано несколько вполне самостоятельных направлений, которые и складываются в итоге в то, что мы называем «веб-дизайн». Это и графический интерфейс сайта, который мы видим сразу после того, как страница загрузилась в браузере, и проектирование системы навигации, и контент-проект сайта, то есть - его информационное наполнение, которое также должно учитываться при создании нового сайта. Дружелюбность и понятность интерфейса, который мы видим на экране и многое другое.
Фактически, собственно графика, внешний вид и оформление сайта не являются главным моментом и отправной точкой в проектировании Интернет-страницы.
Веб-дизайн сегодня превратился в самостоятельное явление просто потому, что для занятия дизайном в Интернет недостаточно одного знания программ, предназначенных для работы с графикой и художественных способностей. Конечно, собственно программированием, особенно решением сложных задач, занимаются профессиональные программисты. Но и работа дизайнера невозможна без чёткого представления технологий Интернет. Дизайнер должен чётко представлять, какими путями можно решить поставленную задачу или воплотить в действующую модель свои идеи, что влечёт за собой необходимость разбираться и в языках программирования, и в некоторых тонкостях серверных технологий. Он должен представлять себе, каким образом осуществляется передача данных в сети, как и в каком виде его разработки достигнут своего конечного пользователя - посетителя разрабатываемого сайта.
В конечном итоге, простая с первого взгляда задача «рисования» обрастает огромным количеством дополнительных требований, в основном - технического характера, имеющими с художественной стороной мало общего. В итоге можно сказать, что веб-дизайн - это именно и есть создание сайта. Сочетание художественных способностей и широких знаний современных компьютерных технологий позволяют создавать сайты, которые запоминаются и заставляют посетителя возвращаться на них вновь.
1.2 Основные принципы web-дизайна
Целью большинства веб- дизайнеров является создание привлекательных, легкодоступных и функциональных сайтов, которые могут воздействовать на посетителя с целью выполнения какого-то действия. Подобный веб-проект требует хорошего графического дизайна сайта, простой и интуитивно понятной навигации по сайту, логически выверенную структуру сайта и надежное копирование. Хороший веб-дизайн сайта должен представлять собой, сочетание здравого смысла и хорошего планирования. Сайт должен быть привлекательным и простым в использовании, и самое главное предоставлять пользователю информацию или услуги, которые его интересуют.
2. Виды компьютерной графики
.1 Виды компьютерной графики
Обычно компьютерную графику разделяют на растровую и векторную. Отдельно стоят фрактальный тип представления изображенийи трехмерная графика.
2.2 Растровая графика
Растровое изображение - это прямоугольная (растровая) сетка пикселей на компьютерном мониторе, бумаге и других отображающих устройствах и материалах. При использовании растровой графики важным элементом является размер полотна, тип цветопередачи (например, RGB) и количество используемых цветов. Pixel(пиксель) - это мельчайшая единица цифрового изображения в растровой графике. Он представляет собой неделимый объект прямоугольной (обычно квадратной) формы, обладающий определенным цветом. Любое растровое компьютерное изображение состоит из пикселов, расположенных по строкам и столбцам. При увеличении изображения видны ряды пикселов. Максимальная детализация растрового изображения задается
при его создании и не может быть увеличена. Если увеличивается масштаб изображения, пикселы превращаются в крупные зерна. От количества пикселов зависит детальность изображения: Пикселы, сливаясь на расстоянии, создают ощущение цветовых переходов.
Достоинства растровой графики:
Можно воспроизвести любой рисунок - и условный, схематичный, и фотографического качества;
Растровая графика используется сейчас практически везде - от маленьких иконок до плакатов.
Недостатки растровой графики:
Большой размер, занимаемый файлами;
Потеря качества изображения при операциях трансформирования.
2.3 Векторная графика
Векторное изображение представляет собой набор объектов - линий или примитивных геометрических фигур (окружности, прямоугольники). Этим объектам присваиваются атрибуты - толщина линий и цвет заполнения. Векторный рисунок хранится в файле как набор координат, векторов и других чисел, характеризующих объекты · рисунка. Все современные компьютерные видеодисплеи способны отображать информацию только в растровом формате. Для отображения векторного формата на растровом используются преобразователи, программные или аппаратные, встроенные в видеокарту. Также существует узкий класс устройств, ориентированных исключительно на отображение векторах данных. К ним относятся графопостроители, а также некоторые типы лазерных проекторов. Векторные изображения используются при компьютерном черчении, создании технической иллюстрации, деловой графики, шрифтов, векторной анимации.
Достоинства векторной графики:
Небольшой размер файла;
Нет потери качества при операциях трансформирования объектов;
Векторные изображения на растровых устройствах выводятся с максимальным качеством, доступным на этом устройстве.
Недостатки векторной графики:
Не каждый объект может быть изображен в векторном виде, например фотографии;
Чем больше число объектов, тем больше памяти и времени требуется на отображение и обработку векторного рисунка.
2.4 Трехмерная графика (3D)
Раздел компьютерной графики, предназначенный для отображения объемных объектов. По сути, трехмерное изображение является геометрической проекцией объемной модели на плоскость.
Для его получения сначала происходит моделирование - создание математической 3D-модели сцены и объектов в ней, а затем визуализация (рендеринг) - построение проекции на основе выбранной физической модели.
Одним из основных призваний трехмерной графики является создание движения 3D-модели в пространстве, называемое анимацией, которая в наше время является неотъемлемой частью не только для современных компьютерных игр, но и телевидения, кинематографа, а так же научного и промышленного моделирования. Так же трехмерная графика широко применяется в архитектурной визуализации и печатной продукции.
Самыми популярными программами, используемыми для создания 3D графики и анимации, являются пакеты компании Autodesk: 3DS Max (собственный формат MAX) и Maya (собственный формат MA). Стоит отметить и универсальное комплексное приложение MaxonCinema 4D (собственный формат C4D) с более простым интерфейсом, чем у продуктов Autodesk и поддержкой русского языка, что делает его особенно привлекательным для русскоязычной аудитории.
Процесс трехмерного моделирования, визуализации и анимации является очень ресурсоемкой задачей, так что если вы решите попробовать свои силы на этом поприще, придется раскошелиться на высокопроизводительный компьютер. Более того, и само программное обеспечение стоит очень недешево.
Например, за 3DS MAX просят около 4000 евро. Хотя Autodesk пошла навстречу тем людям, которые не собираются извлекать коммерческую выгоду при использовании этой программы, выпустив для них бесплатную версию, которая становится доступна после регистрации на сайте компании.
.5 Фрактальная графика
Фрактал - объект, отдельные элементы которого наследуют свойства родительских структур. Поскольку более детальное описание элементов меньшего масштаба происходит по простому алгоритму, описать такой объект можно всего лишь несколькими математическими уравнениями.
Фракталы позволяют описывать целые классы изображений, для детального описания которых требуется относительно мало памяти. С другой стороны, фракталы слабо применимы к изображениям вне этих классов нетерпеливы, исследования показывают, что большинство пользователей уйдут по следующей ссылке, если загрузка страница по времени занимает, более чем на 10 секунд. Всегда оптимизируйте ваши фотографии, а также другие графические файлы, чтобы они имели как можно меньший размер, насколько это возможно без ущерба для качества отображения и общего вида сайта.
3.Цветовые модели
.1 Цветовые модели
Цветовая модель - способ указания цвета при выводе его на экран или на печать. Цветовой охват (цветовое пространство) модели - диапазон оттенков цвета, которые могут быть воспроизведены, зафиксированы или описаны каким-либо способом. Так как не существует технических устройств, которые могли бы воспроизвести весь диапазон видимых оттенков, поэтому изображение на экране или бумаге всегда отличается от оригинального.
Технологические модели описания цвета основаны на базовых компонентах. Каждый базовый компонент вносит свой вклад в создание конкретного цвета.
Канал - базовый компонент цветовой модели. Для отображения и работы с цветовыми каналами в Photoshop используется палитра Channels (каналы).
Цвета объектов окружающего нас мира можно условно разделить на излучаемые и отраженные. Излучаемые цвета - это цвета светящихся объектов, например, экран монитора, пламя свечи. Чем больше интенсивность и разнообразнее излучение, тем свет более светлый и яркий. Таким образом, черный цвет - это отсутствие всякого излучения, а белый цвет - максимально яркий цвет. Отраженные цвета получаются поглощением (вычитанием) поверхностью предмета некоторой части спектра из света, попавшего на эту поверхность. Черный цвет получается при полном поглощении поверхностью всего падающего на нее цвета. Белый цвет получается при полном отражении света от поверхности.Излучаемые цвета всегда более яркие, чем отраженные, так как интенсивность отраженного света меньше интенсивности падающего.
3.2 Модель RGB
Цветовая модель RGB основана на красном (Red), зеленом (Green) и синем (Blue) цветах (каналах). Данная цветовая модель используется для описания цвета излучающих объектов. Каждый канал имеет 256 градаций яркости и изменяется в диапазоне от 0 (нет излучения) до 255 (максимальная интенсивность излучения). Таким образом, теоретически может быть представлено 16 миллионов (16777216) цветовых оттенков.Это аппаратно-зависимая цветовая модель. В связи с технологическими ограничениями, на экране монитора, телевизора или другого устройства в реальности отображается меньшее количество цветов.Photoshop может сохранить изображение, созданное в цветовой модели RGB, почти во всех графических форматах. Исключение составляют: GIF, DCS 1.0, DCS 2.0
3.3 Модель CMYK
Модель CMYK описывает реальный процесс цветной печати на офсетной машине и цветном принтере. Основные субтрактивные цвета достаточно яркие и поэтому не годятся для воспроизведения темных цветов. Используя только голубой, пурпурный и желтый цвета нельзя вывести на печать черный цвет - получается грязно-коричневый цвет. Черный цвет в модели CMYK также используется для подчеркивания теней, создания темных оттенков.
Интенсивность цветов изменяется от 0% до 100%.Photoshop может сохранить изображение, созданное в цветовой модели CMYK, в следующих графических форматах: PSD, PSB, DCS 1.0, DCS 2.0, EPS, JPEG, PDF, Scitex CT, TIFF.
3.4 Модель HSB
Интуитивная модель HSB - сокращение от английских слов Hue (Оттенок или Цвет), Saturation (Насыщенность) и Brightness(Яркость). HSB-математическая модель, основанная на модели RGB, но имеющая другую систему координат, представляет собой цветовой круг. Цветовая модель очень удобна для подбора оттенков и цветов. Модель HSB имеет широкий цветовой охват. Режим HSB был в Photoshop лишь в первых двух версиях. Затем его перенесли в окно выбора цвета (ColorPicker). Модель была создана Элви Реем Смитом, одним из основателей Pixar, в 1978 году. Она является нелинейным преобразованием модели RGB.Цвет, представленный в HSV, зависит от устройства, на которое он будет выведен, так как HSV - преобразование модели RGB, которая тоже зависит от устройства. Для получения кода цвета, не зависящего от устройства, используется модель Lab.
3.5 Модель Lab
Трехканальная модель Lab является аппаратно-независимой. Это перцепционная модель, т.е. основана на восприятии цвета человеком. В то же время Lab чисто математическая модель. Канал L (Lightness или Luminosity) определяет яркость. Значение яркости 0 соответствует черному цвету. Значение яркости 100 соответствует белому цвету. Хроматические каналы «a» и «b» принимают значения от -128 до +127. Канал «a» содержит цвета от темно-зеленого (низкая яркость) через серый (средняя яркость) до ярко-розового (высокая яркость). Канал «b» содержит цвета от светло-синего (низкая яркость) через серый до ярко-желтого (высокая яркость).
Цветовой охват модели Lab соответствует видимому человеком цветовому охвату. Более широкий, чем у RGB и CMYK, цветовой охват Lab позволяет использовать эту модель при переводе изображений из одного цветового пространства в другое, не теряя при этом качества.AdobePhotoshop CS 5 может сохранить изображение, созданное в цветовой модели Lab, в ограниченном количестве графических форматов: PSD, PSB, EPS, PDF, TIFF, PhotoshopRaw. Изображение также может быть сохранено в форматах DCS 1.0 и DCS 2.0, но при открытии этих файлов изображение преобразовывается в цветовую модель CMYK.
3.6 Другие цветовые модели
Модель Grayscale
Изображение в градациях серого не содержит информации о цвете. Полутоновое изображение имеет 256 ступеней яркости. В оперативной памяти занимает по одному байту на пиксель.ВAdobePhotoshop CS 5 этот режим также используется как промежуточный этап, перед выбором моделей Bitmap и Duotone.Полутоновое изображение может быть сохранено в любом формате, кроме DCS 1.0.
Модель Bitmap
Растровое или черно-белое изображение состоит только из черных или белых точек. Может быть полезно при подготовке изображений к черно-белой печати. Вид получаемой «растровой картинки» зависит от используемого метода растеризации. У монохромного изображения разрешение должно быть равно разрешению устройства вывода.Изображение в модели Bitmap можно сохранить в следующих графических форматах: PSD, PSB, DCS 2.0, EPS, GIF, PCX, PDF, PICT, PNG, TIFF.
Модель Duotone
Дуплекс (двуцвет или дуотон) расширяет тоновый диапазон, а также позволяет тонировать полутоновые изображения. В режиме Duotone изображение может быть одноцветным (monotone), двуцветным (duotone), трехцветным (tritone) и четырехцветным (quadtone).AdobePhotoshop CS 5 может сохранить дуплекс в ограниченном количестве графических форматов: PSD, PSB, DCS 2.0, EPS, PDF.
Модель IndexedColor
Модель Multichannel
В мультиканальной (многоканальной) модели каждый из каналов изображения содержит 256 уровней серого. Может содержать любое количество цветовых каналов. Общее количество цветовых и альфа-каналов не может превышать 56-ти. Эта модель используется для специальных режимов печати, например, при использовании заказных (плашечных) цветов, а также при некоторых преобразованиях из одной цветовой модели в другую.Изображение в мультиканальной модели может быть сохранено лишь в PSD, PSB, Photoshop 2.0, PhotoshopRaw, DCS 2.0.
4.Форматы изображений в веб-дизайне
.1Форматы изображений в веб-дизайне
Не секрет, что графика может существовать в различных форматах. Самыми популярными среди них, пожалуй, являются GIF, JPEG и PNG. На этих трёх китах и стоит web-дизайн любых сайтов. Давайте рассмотрим каждый из них по очереди и выясним особенности.
4.2 Формат GIF
Итак, GIF. (Graphics Interchange Format).Разработанный в 1987 году компанией CompuServe этот формат предназначался для передачи растровых изображений по Сети (локальной и Интернет). Но первый GIF получился комом: изображение выходило слишком «увесистым», то есть превышало объёмы, которые бы позволяли передавать его по Сети. Тогда ему на смену двумя годами позже пришёл усовершенствованный вариант, получивший название GIF87a, который имел несколько серьёзных отличий от своего предшественника. Во-первых, были существенно сокращены объёмы файла. Достичь этого удалось благодаря LZW-компрессии. Сжатие происходит за счёт строк, которые имеют повторяющиеся участки. Например, с лёгкостью можно уменьшить размер изображения, в котором большое количество пикселей одного цвета по горизонтали. Кстати, алгоритм сжатия LZW относят к форматам сжатия без потерь. И это не просто красивые слова: восстановленные из GIF данные будут в точности соответствовать упакованным. Однако это касается только 8-битных изображений с 256-цветовой палитрой. В случае перевода в GIF цветной фотографии, конечно же, будут довольно существенные потери в качестве. Всё потому, что изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов. Кроме того, GIF обладает свойством чересстрочности, что даёт возможность увидеть всё изображение целиком, имея только часть файла (правда тогда страдает разрешение). Эта опция находит широкое применение в Интернете. Свойства формата определили и область его применения. GIF чаще всего можно встретить в диаграммах, графиках, простейших (немногоцветных) изображениях и, конечно же, в анимации, например, в баннерах.
4.3 Формат JPEG
Ещё одним популярным форматом является JPEG (JointPhotographicExpertsGroup). Основное назначением этого формата является как раз хранение многоцветных фотографических изображений. В Сети JPEG нашёл применение благодаря своей удивительной способности сжимать изображения практически без потерь, то есть без уменьшения количества цветов. В данном случае метод основывается на сокращении числа пикселей, содержащих информацию. Работает это, примерно, так. JPEG находит плавные переходы цвета в участках 9х9 пикселей. Вместо действительных значений JPEG хранит скорость изменения от пикселя к пикселю. Ту информацию, которая с его точки зрения является лишней, он отбрасывает, усредняя некоторые значения. В процессе сжатия происходит конвертация изображения в цветовую систему YCbCr.
Каналы Cb и Cr, несущие информацию как раз о цвете, уменьшаются в 2 раза. После чего все цветовые каналы изображения, в том числе черно-белый канал Y, дробятся на части (8х8 пикселей), которые и проходят дискретное косинусное преобразование, то есть сжатие без потерь. На последнем этапе происходит упаковка полученных в итоге коэффициентов при помощи кодов Хаффмана. Чем выше мы устанавливаем уровень компрессии, тем больше таких данных отбрасывается, а, значит, тем ниже становится качества картинки на выходе. Метод сжатия JPEG позволяет получить файл в 10-500 раз меньше, чем ВМР. И, кстати, этот формат, как и GIF, поддерживает чересстрочность. Перечисленные выше свойства JPEG дают понять, что лучше его использовать для сжатия растровых картинок фотографического качества, а не для, скажем, логотипов или схем. Объясняется такая избирательность просто: в фотографиях гораздо больше полутоновых переходов, чем в логотипах, где из-за однотонной заливки повышается вероятность нежелательных помех. Естественно, что исходный файл, для которого требуется сжатие, должен обладать высоким разрешением, для того, чтобы в итоге получились наиболее мягкие переходы цвета.
4.4 Формат PNG
(Portable Network Graphics) (именно так звучит развёрнутый вариант наименования этого формата) был придуман как замена GIF, поэтому во многом они схожи друг с другом (например, возможность прозрачного фона).
Однако этот брат не совсем близнец. PNG имеет больший, по сравнению всё с тем же GIF, размер файла, да и поддержка анимации здесь отсутствует. Но кроме отличительных минусов, PNG имеет и ряд отличительных плюсов. Так, PNG открывает возможность сохранения всей цветовой информации и информации об Alpha-каналах масок и слоёв.
В отличие от GIF его «заменитель» позволяет хранить и, так называемые, полноцветные изображения, глубина цвета которых может достигать 48 бит/ пискель. Ну и плюс ко всему здесь используется более эффективный алгоритм чересстрочности, прозрачности и механизм гамма-коррекции.
4.5 Основные сферы применения форматов
Графические элементы сайта (меню, баннеры, кнопки). JPEG лучше работает с фотографиями, а PNG больше подходит для хранения предварительных набросков макетов будущего web-дизайна ресурса.
5. Программное обеспечение для создания графики
.1 Программное обеспечение для создания графики
Графические программы -программное обеспечение, позволяющее создавать, редактировать или просматривать графические файлы.
5.2 Свободное программное обеспечение
Свободное программное обеспечение - программное обеспечение, в отношении которого права пользователя («свободы») на неограниченную установку, запуск, а также свободное использование, изучение, распространение и изменение (совершенствование) защищены юридически авторскими правами при помощи свободных лицензий. Blender- свободный пакет для создания трёхмерной компьютерной графики, включающий в себя средства моделирования, анимации, рендеринга, постобработки видео, а также создания интерактивных игр.был разработан как рабочий инструмент голландской анимационной студией NeoGeo (не имеет отношения к игровой консоли Neo-Geo). В июне 1998 года автор Blenderа, Тон Розендаль (TonRoosendaal), основал компанию Not a Number (NaN) с целью дальнейшего развития и сопровождения Blender. Программа распространялась по принципу shareware.В 2002 году компания NaN обанкротилась. Усилиями Тона Розендаля кредиторы соглашаются на изменение лицензии распространения Blender в пользу GNU GPL с условием единовременной выплаты €100000. 18 июля 2002 года началась программа по сбору спонсорских пожертвований на покрытие необходимой суммы. Уже 7 сентября 2002 года было объявлено о том, что необходимая сумма набрана, и о планах перевести в ближайшее время исходный код и сам Blender под лицензию GPL.13 октября 2002 года компания BlenderFoundation представила лицензированный под GNU GPL продукт. В настоящее время Blender является проектом с открытым исходным кодом и развивается при активной поддержке BlenderFoundation.
Достоинства и недостатки: Большие возможности и полностью бесплатно; Широкие возможности импорта/экспорта; Возможность создания игр; Кроссплатформенность; Небольшой размер; − в базовую поставку не входит развёрнутая документация; − нет возможности асинхронной подгрузки уровней. GIMP- растровый графический редактор, программа для создания и обработки растровой графики и частичной поддержкой работы с векторной графикой. Проект основан в 1995 году Спенсером Кимбеллом и Питером Маттисом как дипломный проект, в настоящий момент поддерживается группой добровольцев. Распространяется на условиях GNU GeneralPublicLicense.Изначально сокращение «GIMP» означало англ. GeneralImageManipulationProgram, а в 1997 году полное название было изменено на «GNU ImageManipulationProgram», и программа официально стала частью проекта GNU. Типичные задачи, которые можно решать при помощи GIMP, включают в себя создание графики и логотипов, масштабирование и кадрирование фотографий, раскраска, комбинирование изображений с использованием слоёв, ретуширование и преобразования изображений в различные форматы. Недочёты, их решение и пути обхода: В настоящее время использование GIMP в коммерческом дизайне, полиграфии и фотографии сопряжено с рядом сложностей, а во многих случаях и вовсе невозможно: нет поддержки плашечных цветов (и палитры Pantone); нет полноценной поддержки цветовых моделей, CIELAB и CIE XYZ; нет поддержки режима 16 и более разрядов на цветовой канал; нет поддержки HDRi и операторов отображения тонов; нет процедурных (корректирующих) слоёв и эффектов (стилей) слоёв. Многие из упомянутых недочётов планируется устранить на втором этапе перехода к использованию библиотеки GEGL.Существует расширение для экспорта в TIFF с цветоделением в CMYK и цветопробой Inkscape- векторный графический редактор, удобен для создания как художественных, так и технических иллюстраций (вплоть до использования в качестве САПР общего назначения, чему также способствует легкость обмена чертежами). Это стало возможным во многом благодаря открытому формату SVG, развиваемому консорциумом W3C. Формат SVG позволяет создавать иллюстрации различного типа, в том числе анимированные. Поскольку SVG основан на языке разметки XML, к нему можно писать расширения, чем авторы Inkscape и пользуются. Программа распространяется на условиях GNU GeneralPublicLicense. История Inkscape началась с того, что нескольких программистов и дизайнеров, умеющих писать код, перестали устраивать условия разработки редактора векторной графики Sodipodi. Поняв, что они не смогут в должной степени применить свои навыки, они организовали новый проект, который назвали Inkscape. На тот момент в Linux было всего два редактора векторной графики, которые можно было использовать в реальной работе - Sodipodi и SKetch, позднее переименованный в Skencil. С тех пор разработка Sodipodi и Skencil сошла на нет. Inkscape де-факто стал самым популярным свободным редактором в своей области.
5.3 Коммерческое и собственническое ПО
CorelDRAW - векторный графический редактор, разработанный канадской корпорацией Corel. Текущая версия продукта - CorelDRAWGraphicsSuite X6, доступна только для MicrosoftWindows. Более ранние версии выпускались также для Macintosh и Linux. Последняя версия для Linux - 9-я, выпущенная в 2000 году. В 2002 году вышла последняя 11-я версия для Macintosh. Поддерживаемые форматы файлов: AdobeIllustrator (AI), ШрифтAdobeType 1 (PFB), Растровое изображение Windows (BMP), Растровое изображение OS/2 (BMP), Метафайл компьютерной графики (CGM), CorelDRAW (CDR), CorelPresentationExchange (CMX), CorelPHOTO-PAINT (CPT), Библиотека символов Corel (CSL), Ресурс курсоров (CUR), ФайлыMicrosoftWord (DOC, DOCXилиRTF), MicrosoftPublisher (PUB), CorelDESIGNER (DSFилиDES), Формат обмена чертежами AutoCAD (DXF) и База данных изображений AutoCAD (DWG), Инкапсулированный PostScript (EPS), PostScript (PS или PRN), GIF, HTML, JPEG (JPG), JPEG 2000 (JP2), Изображение KodakPhoto-CD (PCD), PICT (PCT), Формат переносимых документов Adobe (PDF), Файл плоттера HPGL (PLT), Переносимая сетевая графика (PNG), AdobePhotoshop (PSD), CorelPainter (RIF), Масштабируемаявекторнаяграфика (SVG), MacromediaFlash (SWF), Растровое изображение TARGA (TGA), Растровое изображение TIFF (TIF), CorelPaintShopPro (PSP), ШрифтTrueType (TTF), ДокументWordPerfect (WPD), ГрафикаWordPerfect (WPG), ФорматыфайловкамерыRaw, Сжатое растровое изображение вейвлета (WI), Формат Метафайл Windows (WMF).
ACDSee - условно-бесплатная программа для просмотра и организации изображений для MicrosoftWindows, а также для Mac OS X, выпускаемая ACD Systems. Содержит многочисленные инструменты для обработки изображений, в том числе и пакетной. В последних версиях имеет два режима просмотра: быстрый, в котором доступны только инструменты поворота изображения и изменение масштаба, и полный, с загрузкой всех инструментов обработки. Особенности: Ускоренный поиск изображений при помощи QuickSearchBar. Быстрый просмотр RAW изображений. Расширенная поддержка RAW форматов от цифровых камер Nikon, Canon, Konica-Minolta, Olympus, Fuji и Pentax, включая популярные новые DSLR модели: Nikon D3X, Nikon D7000, Canon EOS-1Ds Mark III, Canon EOS 600D,Pentax K-5 и Olympus E-5. Мощные средства обработки RAW форматов дают пользователю полный контроль над изображениями при помощи точных инструментов для коррекции баланса белого, различных дефектов, резкости и помех. Полная поддержка управления цветом для ICC и ICM цветовых профилей. Возможность визуальной маркировки позволяет быстро сортировать и выбирать нужные фотографии. Интегрированнаяподдержка DNG (Digital Negative Specification) RAW формата. Редактирование наборов из тысяч фотографий с одновременным использованием множества функций. Интегрированная IPTC поддержка для взаимодействия с PhotoShopCaptions.
AutodeskMaya - редактор трёхмерной графики. В настоящее время стала стандартом 3D графики в кино и телевидении. Первоначально разработана для ОС Irix (платформа SGI), затем была портирована под ОС Linux, MicrosoftWindows и Mac OS. В настоящее время существует как для 32, так и для 64-битных систем. Изначально Maya была разработана AliasSystemsCorporation и выпущена для операционных систем MicrosoftWindows, Linux, IRIX и Mac OS X. В сентябре 2007 года, была выпущена новая версия, получившая имя Maya 2008. Для платформы IRIX последней версией была 6.5, в связи с уменьшающейся популярностью ОС в последние годы. В октябре 2005 года компания Alias влилась в Autodesk. Представители компании в различных интервью подтвердили, что не будут сливать Maya и 3ds Max в один продукт. Важная особенность Maya - её открытость для сторонних разработчиков, которые могут преобразовать её в версию, более удовлетворяющую требованиям больших студий, которые предпочитают писать код, специфичный для их нужд. Даже невзирая на присущую Maya мощь и гибкость, этой особенности достаточно для того, чтобы повлиять на выбор. Maya стала результатом совмещения трех программных продуктов: WavefrontTheAdvancedVisualizer (Калифорния, США), ThomsonDigitalImage (TDI) Explore (Франция) и AliasPowerAnimator (Торонто, Канада). В 1993 Wavefront купила TDI, затем в 1995 компания SiliconGraphicsIncorporated (SGI) купила обе компании Alias и Wavefront. Объединенная компания стала называться Alias|Wavefront. Позднее Alias|Wavefront была переименована в Alias. В 2003 году Alias была продана SGI частной инвестиционной фирме Accel-KKR. В октябре 2005 Alias была снова перепродана, на сей раз компании Autodesk. 10 января 2006 Autodesk закончил слияние и теперь AliasMaya известна как AutodeskMaya.
6. Photoshop
.1Photoshop
Adobe Photoshop - многофункциональныйграфическийредактор, разработанный и распространяемый фирмойAdobeSystem. В основном работает срастровымиизображениями, однако имеет некоторые векторныеинструменты. Продукт является лидером рынка в области коммерческих средств редактированиярастровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют простоPhotoshop. В настоящее время Photoshop доступен на платформахMacиWindows. Здесь сразу можно найти два применения, в зависимости от того, какие именно сайты вы делаете:
В случае самописного сайта в Photoshop рисуется макет страниц сайта полностью. Далее HTML-верстальщик вырезает из макета нужные графические элементы и соответствующим кодом HTML реализует то, что нарисовал дизайнер. При создании макета сайта в Photoshop необходимо учитывать будет ли сайт "резиновым" или фиксированного размера. Кстати говоря, резиновость сайта - это далеко не сама цель и в огромном количестве случаев резиновый макет хуже фиксированного по размерам. Если макет резиновый, то необходимо понимать, где именно он будет тянуться. Важным фактором при подготовке макета является то, что сайт должен без горизонтальной прокрутки уместиться в разрешение монитора 1024*768 - это минимальное, на данный момент, разрешение 17-дюймового монитора.
Заключение
Проведя данную работу на тему «Компьютерная графика в дизайне WEB страниц» я выполнил поставленные цели, а именно: )Изучил основные понятия компьютерной графики, дизайна web-страниц )Изучил основы построения композиции и подбора цвета. )Расписал достоинства и недостатки как растровой, так и векторной графики )Узнал с каким программным обеспечением лучше всего работать для создания графического оформления )Рассмотрел цветовые модели, указал плюсы и минусы каждой модели. 6)Описал форматы графических изображений, которые используются в web-дизайне. ) Узнал, почему для работы с web-дизайном рекомендуют пользоваться программой Photoshop
При таком способе анимации Flash автоматически создает промежуточные кадры, которые встраиваются между ключевыми кадрами, заданными вами. Это означает, что вы в одном кадре рисуете объект, потом в другом кадре производите его изменения. Созданные кадры являются ключевыми. Затем вы просите Flash рассчитать кадры, которые должны занять место между двумя ключевыми кадрами. В результате вы получаете анимацию.
Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение, а также от скорости прокрутки вашего Flash-мультфильма (movie). Скорость прокрутки мультфильма можно установить в Flash 5.0 командой Modify>Movie
или клавишами
Плавность и длительность задаются количеством кадров, отведенных на всю анимацию (ее фрагмент). Например, если скорость вашего мультфильма составляет 30 кадров/с, и вам нужно, чтобы совершалось перемещение объекта из одного угла картинки в другой за 2,5 с, то на движение потребуется отвести 75 кадров. В Flash есть два варианта построения промежуточных изображений:
- Shape tweening - построение анимации на основе изменения формы;
- Motion tweening - построение анимации на основе изменения символов.
Первый вариант используется в случаях, когда нужно обеспечить лишь плавное изменение формы объекта. Второй используется чаше всего из-за своей универсальности.
Анимация на основе изменения формы (Shape tweening)
Допустим, нужно, чтобы квадрат плавно превратился в круг, или изображение кошки плавно превратилось в изображение собаки. В таких случаях используется shape tweening
(изменение формы, трансформация). При этом вы задаете два ключевых кадра на некотором расстоянии друг от друга. В рассматриваемом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов). После того как вы создали два ключевых кадра, сделайте активным первый из них (просто перейдите на него щелчком кнопкой мыши) и выберите в палитре Frame
(вызываемой командой Windows>Panels>Frame
или нажатием клавиш
Рис. 567. Указываем вариант анимации Shape tweening
Кадры на временной шкале должны окраситься в зеленоватый цвет, а от первого кадра ко второму должна протянуться стрелка. В результате вы получите ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй. Чтобы показать содержимое соседних кадров, нужно включить режим отображения теней. На следующем рисунке показана анимация, при которой круг плавно превращается в полумесяц.
Рис. 568. Круг плавно переходит в полумесяц. Здесь первый ключевой кадр содержит круг, а последний, 10-й кадр, - полумесяц. На рисунке показаны все кадры мультфильма
Рассмотрим параметры преобразования shape tweening. При выборе этого варианта в палитре Frame появились параметры Easing и Blend и поле ввода метки кадра Label .
- Параметр Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от -100 до +100. Это означает, что если вы зададите отрицательную величину в поле Easing, то движение будет происходить с положительным ускорением (скорость будет увеличиваться). И наоборот, если значение Easing положительное, анимация замедляется.
Рис. 569. Анимация с ускорением (Easing < 0)
Рис. 570. Анимация с замедлением (fusing > 0)
- Параметр Blend (Переход) определяет алгоритм перехода: Distributive (Размытый) и Angular (Угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов и отрезки прямых линий. Рекомендуется поэкспериментировать с этим параметром, чтобы понять, в каких случаях какое значение параметра лучше использовать.
Последний инструмент в анимации типа shape tweening - контрольные точки
(shape hints), с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись при работе со сложными формами. Пользоваться контрольными точками очень легко. В первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (команда Modify>lransform>Add shape hint
или клавиши
На следующих двух рисунках вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и кадрами, созданными с использованием таковых.
Рис. 571. Shape tweening без использования контрольных точек
Рис. 572. Shape tweening с использованием контрольных точек
При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:
- Форма
- Расположение
- Размер (любые пропорции)
- Угол поворота
Если вам нужно отключить shape tweening, то в палитре Frame выберите в списке Tweening значение None .
Анимация на основе изменения символов (Motion tweening)
Как уже отмечалось выше, наиболее часто используется вариант анимации motion tweening (анимация движения). В этом случае анимация строится на основе модификации символов, т. е. объектом анимации является символ. Как и в анимации shape tweening, для каждого объекта в каждый момент времени требуется один слой. В этом слое должен находиться один символ, с которым и будут происходить все изменения.
Вот какие параметры символа могут модифицироваться при использовании motion tweening:
- размер (как пропорционально, так и непропорционально - отдельно высота и ширина)
- наклон
- расположение
- угол поворота
- цветовые эффекты
Включить motion tweening можно несколькими способами, а отключить - только одним. Для того чтобы включить motion tweening, нужно сделать активным начальный кадр перехода, а затем, нажав правую кнопку мыши, в контекстном меню выбрать команду Create motion tween , либо выбрать команду Insert>Create motion tween ). Универсальный способ включения/выключения motion tweening- в палитре Frame выбрать значение в списке Tweening .
Параметры анимации:
- Easing - задает обратное экспоненциальное ускорение; работает так же, как и в shape tweening;
- Rotate
- позволяет управлять вращением:
- Auto - заставляет Flash автоматически пытаться определить количество витков;
- CW - задает вращение по часовой стрелке;
- CCW - задает вращение против часовой стрелки; при этом в ставшем доступном поле справа можно ввести количество оборотов (можно использовать только целые значения или отключить вращение, выбрав в списке Rotate значение None).
- Options
- дополнительные параметры:
- Orient to path - поворачивает символ в соответствии с направляющей линией;
- Snap - привязывает символ к направляющей линии;
- В случаях, когда количество кадров основной сцены не кратно количеству кадров символа, флажок Synchronize (Синхронизировать) позволяет синхронизировать эти две анимации.
Направляющие слои
Движение объекта можно организовать с помощью направляющего слоя. В направляющем слое рисуется траектория, по которой должен дв"игаться объект, затем к ней привязывается сам объект, а направляющий слой вместе с траекторией делается невидимым. В общем случае в качестве объекта может выступать символ типа Movie clip , т. е. некоторый мультфильм, или даже группа объектов различных типов. Рассмотрим простой пример, в котором по произвольной кривой перемещается изображение стрелки.
В слое, который назовем Стрелка , нарисуем объект в виде стрелки и преобразуем его в символ типа Graphic . В более общем случае в качестве объекта может выступать символ типа Movie Clip , т. е. некоторый мультфильм или даже группа объектов различных типов.
Рис. 574. Объект в виде стрелки, который должен двигаться
Далее, щелкнем правой кнопкой мыши на имени слоя Стрелка
и в контекстном меню выберем команду Add Motion Guide
(Добавить направляющую движения). В результате в списке слоев появится новый слой Guide: Стрелка
с характерным значком слева от его имени. Это и есть направляющий слой
(guide layer). Слой, находящийся в списке непосредственно под ним, является направляемым
(guided). В направляющем слое нарисуем траекторию движения. Для этого можно использовать любой инструмент рисования линий, например, «Карандаш» (Pencil)
. Главное, чтобы траектория была линией (контуром), а не областью заливки.
Выделим наш объект в виде стрелки и переместим его на начало траектории. При перемещении в центре изображения объекта появится кружок, который должен попасть на линию траектории и как бы зацепиться за нее. Этим мы привязываем объект к траектории.
На временной шкале выберем кадр, соответствующий окончанию движения по траектории (в нашем примере это 30-й кадр). Сделаем его ключевым. Это нужно сделать сначала в направляющем слое, а затем - в направляемом.
Убедимся, что активным является направляемый слой (в нашем примере это слой Стрелка). Перетащим объект на конец траектории, а затем вернемся к первому кадру в этом же слое. Создадим анимацию (команда Insert Motion Tween ). В общих чертах организация движения по направляющей траектории завершена.
Рис. 576. Задание параметров движения по траектории
Рис. 577. Движение объекта с его ориентацией вдоль траектории
Чтобы траектория движения была невидимой, достаточно сделать невидимым направляющий слой. Если вы хотите, чтобы объект ориентировался вдоль траектории, установите для первого кадра слоя с объектом свойство Orient to Path . Ускорение или замедление движения по траектории определяется параметром Easing .
Если направляющий слой уже существует, то любой слой можно сделать направляемым. Для этого достаточно либо просто перетащить его имя в списке слоев непосредственно под имя направляющего слоя, либо создать новый слой, расположенный ниже направляющего, и установить тип этого слоя Normal .
Слои-маски
Содержимое слоя можно рассматривать через отверстие, скрыв все остальное. Для этого служит так называемый слой-маска
- особый тип слоя, содержащий собственно маску. Маска
(отверстие или окно просмотра) может быть создана на основе объектов различных типов: области заливки, текстового поля, экземпляра графического символа и даже мультфильма. Маску можно заставить изменять свою форму или перемещаться. Однако нельзя применять слои-маски внутри кнопок.
Маска представляет собой слой, в котором любая область заливки интерпретируется как отверстие, через которое виден нижележащий слой. При этом цвет заливки, градиент и контур игнорируются. По умолчанию слой-маска закрывает (маскирует) только тот слой, который лежит непосредственно под ним.
Рассмотрим создание простой маски на основе области заливки. Создадим сначала маскируемый слой. Назовем его Фон.
Мы импортировали в него растровую картинку из пакета Photoshop 7.O. Далее, создадим слой-маску. Для этого достаточно щелкнуть на кнопке со знаком «+» внизу списка слоев. Назовем его Маска.
В этом слое нарисуем какую-нибудь фигуру и зальем ее каким-нибудь цветом, т. е. создадим область заливки. Мы нарисовали овал, а затем трансформировали его с помощью инструмента Subselect
(белая стрелка). Теперь укажем, что данный слой является слоем-маской. Для этого достаточно щелкнуть правой кнопкой мыши на его имени и в контекстном меню выбрать команду Mask
(Маска). При этом слева от имени слоя-маски и маскируемого слоя появятся характерные значки, и оба слоя будут заблокированы (справа от их имен появятся изображения замков). Маскирование вступит в силу, ивы увидите на рабочей области лишь участок фона, который накрывается фигурой слоя-маски.
Чтобы перейти в режим редактирования маски и увидеть как фон, так и просмотровое окно маски, разблокируйте слой-маску (щелкните на соответствующем изображении замка) В режиме редактирования можно изменить форму, расположение и даже количество просмотровых окон маски.
В общем случае можно маскировать несколько слоев, а не только тот, который находится непосредственно под слоем-маской. Если необходимо сделать какой-либо слой маскируемым, то его прежде всего следует расположить ниже слоя-маски, а затем в свойствах этого слоя установить переключатель Masked
(Маскируемый). Наоборот, чтобы вывести слой из-под маски, установите этот переключатель Normal.
Итак, мы рассмотрели простейший способ создания маски. Зачем нужны маски? Маска в статическом виде является инструментом для создания коллажей.
Здесь мы не будем останавливаться на том, в каких случаях и зачем может потребоваться скрывать что-то из уже имеющегося, чтобы оставшееся предстало в интересном или нужном нам виде.
Рис. 578. Маска в режиме редактирования. Чтобы увидеть действие маски, установите блокировку слоя-маски (замок)
Рис. 579. Вид сцены при включенном режиме маскирования: слой-маска заблокирован (замок). Фон виден только через просмотровое окно маски
Наиболее интересные и полезные эффекты применения масок получаются при их анимировании: просмотровые окна масок могут изменять свою форму и перемещаться на фоне маскируемых слоев. Именно поэтому они и находят широкое применение в мультфильмах. Раскрывающиеся меню, рябь на воде, метаморфозы облаков, движение губ при разговоре - все это можно сделать с помощью аними-рованных масок.
Теперь рассмотрим создание анимированных масок. По существу, анимиро-ванная маска - это маска, просмотровое окно которой либо изменяет свою форму, либо перемещается в рабочей области. Вы можете создать несколько просмотровых окон, но все они должны быть сгруппированы в единый объект с помощью команды Modify>Groupe (Модифицировать>Группировать).
Для слоя-маски создадим анимацию движения. Сначала сделаем перемещение просмотрового окна в слое-маске. В нашем примере в качестве последнего выбран 20-й кадр (он является ключевым). В слое-маске перемещаем фигуру просмотрового окна на новое место. Возвращаемся к первому кадру и выполняем команду Insert>Create Motion Tween
(Вставить>Создать анимацию движения). В результате между первым и последним кадрами появится стрелка. Чтобы анимация получилась, советуем вам сначала выделить фигуру просмотрового окна, а затем применить к ней команду группировки Modify>Groupe
. Мы уже отмечали это обстоятельство при рассмотрении направляющих слоев. Если что-то не так, между первым и последним кадрами вместо стрелки появляется штриховая линия. Затем в маскируемом слое вставьте кадр на 20-ю позицию. Это может быть обычный, не обязательно ключевой, кадр. Заблокируйте слои и нажмите клавишу
Рис. 581. Временная шкала при создании перемещающейся маски и вид рабочего поля в режиме редактирования (слои разблокированы)
В Flash MX создание анимации несколько отличается от того, как это делается в Flash 5.O. Эти отличия мы уже рассматривали в разделе данной главы. Их суть заключается в выборе подходящих значений свойств кадра в палитре Properties (Свойства).
Просмотровое окно маски может изменять форму. Для этого вместо motion tweening (Анимация движения) следует использовать shape tweening (Анимация формы). Для этого в свойствах первого кадра следует выбрать в раскрывающемся списке Tweening значение Shape (Форма). Значение Distributive (Размытый) параметра Blend (Переход) позволяет получить более сглаженные промежуточные кадры; значение Angular (Угловатый) этого же параметра позволяет сохранить в промежуточных кадрах углы и отрезки прямых линий.
Особенность анимации на основе изменения формы состоит в том, что к трансформируемому объекту не следует применять операцию группировки, как это делается при создании анимации движения. Наилучший визуальный эффект при трансформации достигается, если трансформируется только один объект. Если необходимо трансформировать несколько объектов, то расположите их в одном слое.
В Flash MX анимация типа трансформации производится аналогичным образом. Особенность заключается в том, что свойства первого кадра устанавливаются в палитре Properties (Свойства).
Интересные визуальные эффекты получаются, когда под маской находятся несколько фоновых слоев. Рассмотрим случай, когда требуется лучом фонарика осветить какое-нибудь темное изображение. В нашем примере это растровая картинка - фрагмент интерьера сельского дома. Очевидно, что в слое-маске можно использовать круглое просмотровое окно, которое будет имитировать световое пятно. Далее, нам потребуются два слоя, содержащие идентичные изображения, отличающиеся друг от друга только тем, что одно из них светлее другого. Эти изображения можно получить из одного и того же файла путем коррекции яркости и контрастности в каком-нибудь растровом графическом редакторе, например, в Photoshop. Светлое изображение поместим в слой непосредственно под слоем-маской, а темное изображение - в слое, расположенном еще ниже. Картинки в этих двух слоях должны быть расположены так, чтобы одна полностью накрывала другую. Маскируемым будет слой со светлым изображением.
Рис. 582. Картинки в разных слоях должны быть совмещены так, чтобы более светлая накрывала темную
Слой-маска будет содержать перемещающееся круглое просмотровое окно. В режиме просмотра этот круг будет перемещаться по темному изображению, ос-зетляя тот его участок, над которым находится. Таким образом, создается визу-шьный эффект перемещения луча от фонарика.
Рис. 583. Использование маски для создания эффекта перемещения луча от фонарика
Другой способ создания анимаций на основе масок состоит в том, что окно маски остается неподвижным, а элементы маскируемого слоя перемещаются. Таким образом можно создать, например, эффект изменения пейзажа за окном движущегося поезда, или бегущие титры. Если, скажем, создать группу из нескольких просмотровых окон (несколько областей заливки, сгруппированных в один объект), то при соответствующем выборе маскируемого изображения и фона можно создать иллюзию движущихся и изменяющихся по форме облаков или морских волн. Наконец, можно перемещать одновременно как объекты маскируемого слоя, так и просмотровые окна.
Рассмотрим пример, в котором маска неподвижна, а картинка в маскируемом слое перемещается. На исходной картинке, которая является фоном всей композиции, изображены дюна и облачное небо. Мы хотим, чтобы облака перемещались. С этой целью мы поместили в маскируемый слой растянутое по ширине исходное изображение, а просмотровое окно маски сделали так, чтобы оно совпадало с участком неба на исходной картинке. Растянутое изображение в маскируемом слое перемещается по горизонтали. При этом в окно маски попадает только небо, а дюна маскируется. Ширина растянутого изображения должна быть такой, чтобы к окончанию движения его левый край совпадал елевым краем фоновой картинки. Конечно, в качестве перемещающегося изображения можно было бы взять только полосу с облаками, но наш способ оказался в данном случае более быстрым: мы просто скопировали исходную картинку в маскируемый слой и применили к ней команду Scale.
Рис. 584. Создание эффекта плывущих облаков на основе неподвижного просмотрового окна маски и перемещающегося маскируемого слоя
Цветовые эффекты
Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует у shape tweening.
В Flash 5.0, для того чтобы применить эффект к символу, нужно выделить этот символ и на палитре эффектов, открываемой командой Windows>Panels>Effects
, выбрать нужный эффект (см. рисунки).
Рис. 587. Точная установка всех составляющих цвета (Advanced)
Рис. 588. Установка прозрачности (Alpha)
В Flash MX аналогичные эффекты выбираются в раскрывающемся списке Color (Цвет) в палитре Properties (Свойства).
Рис. 589. Установка эффектов в палитре Properties в Flash MX
Любая Web-страница абсолютно немыслима без разнообразных графических Web-элементов, и хотя основным назначением программы Paint Shop Pro является создание и редактирование растровых и векторных изображений, она будет полезна и Web-дизайнерам.
В списке возможностей программы, ориентированных на Web-графику, решение вопросов по оптимизации изображений, создание текстур и кнопок, в том числе интерактивных, «разрезание» картинок, разработка rollover-элементов, создание карт гиперсвязей и пр., а также создание gif-анимации (но о последней возможности мы поговорим в другой раз).
Оптимизация Web-графики
Графическая информация передается намного медленнее текстовой, а время загрузки изображений пропорционально размеру их графических файлов. Поэтому быстрая загрузка Web-страниц предполагает небольшой размер внедренных в них графических изображений, что достигается путем их оптимизации. В целом оптимизация осуществляется посредством уменьшения количества цветов в графических изображениях, использования сжатых и специальных форматов файлов и оптимизации параметров сжатия для отдельных фрагментов изображений. Основная задача оптимизации найти удачный компромисс между скоростью загрузки страницы и качеством представленных на ней изображений.
Paint Shop Pro имеет встроенные инструменты оптимизации изображений программа не только обеспечивает собственно процесс оптимизации, но и позволяет осуществить его быстро и достаточно удобно благодаря возможности предварительного просмотра. Предварительный просмотр дает точное представление о том, как будет выглядеть оптимизированное изображение в режиме реального времени, что вкупе с информацией о предполагаемом размере сжатого файла помогает оценить результат оптимизации и удачно подобрать нужные настройки.
Web-графику можно сохранять в форматах сжатия GIF, JPG или PNG. Индексированные изображения, имеющие небольшое количество цветов, сохраняют в формате GIF. Для сохранения полноцветных и полутоновых изображений: фотографий и цветонасыщенной графики, например градиентных заливок, используется формат JPG. Для полноцветных изображений с прозрачными участками применяется формат PNG, который позволяет сохранять как индексированные, так и полноцветные изображения, не теряющие при сохранении в PNG своего качества.
Для примера попробуем сжать обычную фотографию в формате JPG (рис. 1) с оптимизацией. Для этого откроем изображение и воспользуемся командой File=>Export=>JPG Optimizer (Файл=>Экспорт=>JPG-оптимизация), установив на вкладке Quality (Качество) степень сжатия в окне Set compression value to (Установить значение компрессии), например так, как показано на рис. 2. Изображение, полученное в результате JPG-компрессии, представлено на рис. 3 внешне оно по качеству ничуть не хуже, а его размер оказался на 13 Кбайт меньше.
Рис. 3. Результат оптимизации в формате JPG с коэффициентом сжатия 15
А теперь проведем вариант оптимизированного сжатия индексированного изображения в формате GIF (рис. 4). Откроем изображение и при помощи команды File=>Export=>GIF Optimizer (Файл=>Экспорт=>GIF-оптимизация) установим на вкладке Colors (Цвета) максимальное количество цветов (рис. 5), а на вкладке Format (Формат) выберем вариант появления изображения: Non-Interlaced появление изображения на Web-странице сразу или Interlaced постепенное появление с возрастающей детализацией (рис. 6). В результате будет получено оптимизированное изображение, представленное на рис. 7, размер которого, а значит и скорость загрузки, окажется чуть ли не в два раза меньше, чем у исходного.
Если в изображении имеются прозрачные области, что нередко бывает необходимо при создании кнопок, логотипов и иных Web-элементов, то после оптимизации и экспорта в Web они превратятся в белые. Чтобы такого не произошло, необходимо сохранять изображение в формате PNG, указав соответствующие настройки оптимизации. Для примера попробуем сохранить таким образом, например, логотип для детского Web-журнала (рис. 8). Откроем изображение и в меню File=>Export (Файл=>Экспорт) выберем команду PNG Optimizer (PNG-оптимизация), на вкладке Transparency (Прозрачность) установим вариант Single color transparency (Один цвет прозрачный) (рис. 9) полученное в итоге изображение сохранит свой прозрачный фон (рис. 10). Если бы в изображении не присутствовали градиентные заливки, то можно было бы добиться значительного уменьшения его размера за счет сокращения количества цветов, однако в данном случае это приведет к существенному снижению качества изображения.
Рис. 10. Результат оптимизации в формате PNG с сохранением прозрачного фона
Создание фоновых текстур
Background, или фоновая текстура (background в переводе с англ. означает «фон»), это стандартный элемент любой Web-страницы, представляющий собой небольшое точечное изображение, которое используется в качестве фона для остальных ее элементов. Фон часто представляет собой имитацию какой-нибудь поверхности песка, мятой бумаги, дерева, мрамора, неба с плывущими по нему облаками и способен существенно украсить и оживить Web-страницу. Как правило, фоновые текстуры имеют небольшой фиксированный размер, а браузеры способны генерировать эти небольшие изображения на все пространство страницы. А потому основное требование при создании фоновых текстур для Web добиться идеального соприкосновения друг с другом образцов «кирпичиков» фона. Иными словами, основная задача при создании текстуры получение полностью бесшовного изображения.
Создание собственных фонов для Web-страниц это отдельный вид искусства, и Paint Shop Pro позволяет проявить на данном поприще всю свою фантазию. Хотя, конечно, можно найти и более простой способ, позаимствовав готовые фоны в Сети или найдя подходящие на лазерных дисках. Правда, в этом случае придется создавать дизайн страницы, подстраиваясь под найденную текстуру, и ни один серьезный Web-дизайнер на такой вариант не согласится. Поэтому часто фоновые текстуры приходится создавать самостоятельно. В Paint Shop Pro фоны создаются только вручную, так как никаких специальных генераторов фонов, имитирующих естественные материалы, такие как мрамор, вода, облака и пр., в программе нет.
Текстура из фотографии
Попробуем создать фоновую текстуру на основе фрагмента снимка (рис. 11). Несмотря на то что внешний вид снимка очень напоминает реальную текстуру, в качестве фона для Web-страницы он не подойдет, так как швы между сгенерированными копиями изображений будут заметны. Поэтому воспользуется командой Effects=>Image Effects=>Seamless Tiling (Эффекты=>Эффекты с изображениями=>Бесшовное покрытие) при параметрах, показанных на рис. 12. Обратите внимание, что доступны три метода создания бесшовной текстуры: Edge (Край смешивает грани изображения), Corner (Угол смешивает изображение в заданных углах) и Mirror (Зеркало отражает грани изображения). Выбор одного из них зависит от исходного изображения и от того, какой эффект вы хотите получить. Чаще применяется метод Corner , как и в данном примере.
В итоге будет получено изображение, как на рис. 13, которое уже можно использовать как фоновое никаких швов заметно не будет (рис. 14).
Текстура на основе встроенных элементов палитры Materials
В программе Paint Shop Pro имеются очень интересные возможности создания текстур на основе изображений палитры Materials (Материалы).
Для начала попробуем создать бесшовную текстуру на основе обычной градиентной заливки. Создадим на прозрачном фоне новое изображение размером 125х125 пикселов (рис. 15). Щелкнем дважды на окне Foreground (Передний план) палитры Materials и выберем подходящий вид градиентной заливки, например Duotone green в стиле Sunburst (рис. 16). Увеличим значение в окне Repeats (Повторение) с нуля, например, до 90 внешний вид заливки тут же изменится (рис. 17). Возьмем большую кисть с неразмытыми краями и закрасим изображение видоизмененным градиентом (рис. 18).
Применим команду Effects=>Image Effects=>Seamless Tiling (Эффекты=>Эффекты с изображениями=>Бесшовное покрытие) при параметрах, показанных на рис. 19. Результатом будет бесшовная текстура, показанная на рис. 20. Ею уже можно воспользоваться, но фон будет слишком ярким, поэтому в ряде случаев лучше перед применением уменьшить степень прозрачности изображения, дважды щелкнув на имени слоя в палитре Layer и уменьшив значение параметра Opacity (Непрозрачность), например, до 50% (рис. 21). Изображение станет напоминать рис. 22, а если вставить полученную текстуру в Web-страницу, то результат может оказаться похожим на рис. 23.
А теперь попробуем создать текстуру на основе встроенных текстур палитры Materials . Создадим новое изображение размером 125х125 пикселов и закрасим его подходящим цветом (рис. 24). Щелкнем дважды на окне Foreground (Передний план) палитры Materials и выберем более темный цвет, затем включим флажок Texture и выберем понравившийся вариант текстуры для наложения (рис. 25).
Возьмем очень большую неразмытую круглую кисть размером, например, в 200 пикселов (кисть должна быть значительно больше изображения) и один раз щелкнем ею в центре изображения (рис. 26). Очевидно, что для фона Web-страницы изображение слишком яркое, поэтому уменьшим непрозрачность слоя примерно до 40 (рис. 27). Применим команду Effects=>Image Effects=>Seamless Tiling (Эффекты=>Эффекты с изображениями=>Бесшовное покрытие) при параметрах, показанных на рис. 28. Полученная бесшовная текстура показана на рис. 29, а Web-страница с ее использованием на рис. 30.
Интересные бесшовные текстуры можно получить, воспользовавшись текстурными эффектами. Для этого создадим новое изображение размером 125х125 пикселов и закрасим его подходящим цветом (рис. 31). Воспользуемся командой Effects=>Texture Effects=>Texture (Эффекты=>Текстурные эффекты=>Текстуры) и настроим параметры текстуры в соответствии с рис. 32. Изображение станет напоминать рис. 33. Применим команду Effects=>Image Effects=>Seamless Tiling (Эффекты=>Эффекты с изображениями=>Бесшовное покрытие) при тех же параметрах, что и в предыдущем случае, и получим готовую текстуру (рис. 34), после использования которой в качестве фона Web-страницы страница будет выглядеть примерно так, как на рис. 35.
А теперь для создания бесшовного текстурного фона попробуем воспользоваться подходящей текстурой из палитры Materials , преобразовав ее понравившимся эффектом. Создадим новое изображение размером 125х125 пикселов, откроем в палитре Materials вкладку Pattern (Текстуры) и выберем подходящую текстуру в списке текстур (рис. 36). А затем большой неразмытой круглой кистью закрасим исходное изображение (рис. 37). Воспользуемся командой Effects=>Texture Effects=>Fur (Эффекты=>Текстурные эффекты=>Мех) и настроим параметры текстуры в соответствии с рис. 38. Изображение станет напоминать рис. 39. Применим команду Effects=>Image Effects=>Seamless Tiling (Эффекты=>Эффекты с изображениями=>Бесшовное покрытие) при параметрах, соответствующих рис. 40, и получим текстуру, показанную на рис. 41, которая в случае внедрения в Web-страницу придаст ей вид в соответствии с рис. 42.
Создание кнопок
Незаменимым специфическим элементом дизайна любых Web-страниц являются графические элементы управления кнопки, без которых просто невозможно представить себе страничку. Рисование кнопок стало сегодня своего рода жанром, а Paint Shop Pro позволяет создавать самые замысловатые их варианты.
Разновидностей кнопок уже создано немало ведь любой штрих может придать кнопке неповторимый внешний вид и оригинальность, так что рассмотреть все возможные нюансы в одной статье не представляется возможным. Остановимся лишь на разработке основных типов кнопок.
Но вначале напомним о двух правилах создания кнопок:
- создавать кнопки нужно только на прозрачном фоне, чтобы потом можно было без проблем вставить кнопку в Web-страницу с любым фоном;
- сохранять кнопки нужно не просто командой File=>Save (Файл=>Сохранить), а с помощью команд File=>Export=>GIF Optimizer (Файл=>Экспорт=>GIF-оптимизация) или File=>Export=>PNG Optimizer (Файл=>Экспорт=>PNG-оптимизация), поскольку все остальные варианты не позволят сохранить прозрачный фон кнопки.
Кнопка в виде шара
Создадим на прозрачном фоне новое изображение размером 125х125 пикселов (рис. 43). Дважды щелкнем на окне Foreground (Передний план) палитры Materials и установим белый цвет, затем дважды щелкнем на окне Background (Задний план) и на вкладке Gradient выберем подходящий градиент в стиле Sunburst (рис. 44). Для выпуклой кнопки необходимо, чтобы светлая область некий отблеск света находилась в левом верхнем углу кнопки, а цветовой переход выполнялся в направлении от светлого к темному, а не наоборот, как в данном случае. Учитывая, что создавать кнопки приходится довольно часто, удобнее специально для кнопки подготовить свой градиент на основе выбранного. Для этого щелкнем на кнопке Edit (Редактирование), затем на кнопке New (Новый), введем имя нового градиента и отредактируем его параметры (рис. 45). Результат может напоминать рис. 46. Теперь необходимо переместить блик в левый верхний угол примерно так, как это показано на рис. 47. По окончании всех этих действий палитра Materials должна выглядеть в соответствии с рис. 48.
Затем из группы инструментов Preset Shape (Заданные формы) выберем инструмент Ellipse и нарисуем примерно такую же кнопку, как показана на рис. 49. При необходимости из одной такой кнопки можно получить целую серию разноцветных кнопок. Для этого достаточно воспользоваться командой Adjust=>Hue and Saturation=>Hue/Saturation/Lightness (Регулировка=>Оттенок и насыщенность=>Оттенок/Насыщенность/Освещенность), убрать флажок Colorize (Колоризация) и настроить цветовые параметры нужным образом (рис. 50). После нескольких таких манипуляций мы сможем получить несколько разноцветных кнопок, например таких, как представлены на рис. 51. Сохраним каждую из кнопок в своем файле (они нам потребуются в дальнейшей работе) с сохранением прозрачного фона командой File=>Export=>PNG Optimizer (Файл=>Экспорт=>PNG-оптимизация) созданные файлы в данном случае имеют вид: image1.png, image2.png и image3.png.
Затем при желании к кнопке можно добавить надпись или стрелку. Если надпись должна располагаться внутри кнопки горизонтально, то лучше вначале превратить векторный слой с кнопкой в растровый, щелкнув правой кнопкой на его имени в палитре Layer и выбрав команду Convert to Raster Layer (Конвертировать в растровый слой), а затем напечатать нужный текст, например так, как показано на рис. 52. Или можно просто добавить надпись на новый векторный слой, чтобы потом при необходимости можно было работать с кнопкой и надписью как с отдельными объектами.
Очень популярно размещение текста по окружности вне или внутри контура кнопки. Если речь идет о размещении текста по окружности над кнопкой, то достаточно просто напечатать нужный текст на векторном слое с кнопкой, выделить инструментом Object Selection (Выделение объектов) оба векторных объекта кнопку и текст и применить команду Objects=>Fit Text to Path (Объекты=>Разместить текст вдоль пути) текст разместится вдоль созданной кривой. По умолчанию надпись появляется над кнопкой-шаром, но, как правило, расположена несимметрично. Для ее выравнивания выделим надпись инструментом Object Selection и щелкнем на кнопке Horz. Center in Canvas (Горизонтальное выравнивание относительно центра). Возможно, что в итоге кнопка будет выглядеть так, как показано на рис. 53.
Намного больше времени потребуется в том случае, если нужно, чтобы надпись шла по кривой, но внутри кнопки. В этом случае в палитре Layer выделим векторный слой с кнопкой и щелкнем на кнопке Duplicate Layer (Дублировать слои), создав тем самым вторую копию кнопки. Щелкнем дважды на кнопке во второй копии слоя палитры Layer и вызовем свойства векторного объекта, удалим заливку и сделаем очень тонкую черную границу, чтобы можно было ориентироваться относительно положения и размеров окружности (рис. 54). Немного сместим вспомогательную окружность и изменим ее размеры примерно так, чтобы над ней вполне могла уместиться надпись, располагающаяся в то же время внутри кнопки, например как на рис. 55.
Напечатаем текст и расположим его вдоль кривой, соответствующей вспомогательной окружности. Для этого выделим текст и вспомогательную окружность и воспользуемся командой Objects=>Fit Text to Path (Объекты=>Разместить текст вдоль пути). Затем скорректируем положение текста, а саму вспомогательную окружность сделаем невидимой, щелкнув на кнопке Visibility Togle (Видимость) в палитре Layer . Возможно, результат будет напоминать рис. 56.
Рис. 56. Окончательный вид кнопки с текстом, расположенным по кривой и находящимся внутри кнопки
Следующий этап необходимость правильно сохранить кнопку, чтобы оставить в сохранности прозрачную область вокруг нее. Учитывая, что кнопка имеет сложную градиентную заливку, которая будет утрачена при сохранении в формате GIF, лучше воспользоваться форматом PNG . Для этого откроем из меню File=>Export (Файл=>Экспорт) команду PNG Optimizer (PNG-оптимизация). На вкладке Color (Цвет) установим вариант 16.7 Million Colors , а вкладку Transparency (Прозрачность) настроим в соответствии с рис. 57. Результат показан на рис. 58 и 59.
Круглая вогнутая кнопка
В принципе, технология создания вогнутой кнопки мало отличается от создания кнопки в виде шара вся задача состоит в том, чтобы удачно подобрать градиентные заливки для переднего (Foreground ) и заднего (Background ) планов палитры Materials . Градиент должен быть в стиле Sunburst , а направление градиента в случае переднего и заднего планов должно быть прямо противоположным.
Для примера создадим на прозрачном фоне новое изображение размером 125х125 пикселов и настроим градиент переднего плана в соответствии с рис. 60, а заднего с рис. 61, при этом палитра Materials примет вид, соответствующий рис. 62. Затем из группы инструментов Preset Shape (Заданные формы) выберем инструмент Ellipse и нарисуем примерно такую же кнопку, как показана на рис. 63.
При желании можно, например, добавить к кнопке тень, применив команду Effects=>3D Effects=>Drop Shadow (Эффекты=>3D-эффекты=>Тень) при примерно таких параметрах, как на рис. 64. Результат представлен на рис. 65. После этого следует сохранить кнопку с помощью команды File=>Export=>PNG Optimizer (Файл=>Экспорт=>PNG-оптимизация) (рис. 66).
Рис. 66. Готовая для вставки в Web-страницу кнопка
Прямоугольная пластиковая кнопка
Создадим на прозрачном фоне новое изображение размером 500х400 пикселов и инструментом Rounded Rectangle (Закругленный прямоугольник) нарисуем на нем прямоугольник, примерно такой, как представлен на рис. 67. Сформируем выделенную область на основе созданного векторного объекта командой Selections=>From Vector Object (Выделение=>Из векторного объекта). Создадим новый растровый слой командой Layers=>New Raster Layer (Слои=>Новый растровый слой). После этого, не снимая выделения, воспользуемся командой Effects=>3D Effects=>Cutout (Эффекты=>3D-эффекты=>Контур) с такими параметрами, как, например, на рис. 68. Полученный результат может напоминать рис. 69. Уменьшим непрозрачность слоя примерно до 50%, и в итоге кнопка примет вид, соответствующий рис. 70.
Создадим новый векторный слой и на нем инструментом Ellipse нарисуем в левом верхнем и правом нижнем углах кнопки небольшие белые овалы, а в верхней и нижней частях инструментом Rectangle узкие белые прямоугольники примерно так, как показано на рис. 71. Потом превратим векторный слой в растровый, щелкнув на векторном слое в палитре Layer правой кнопкой и выбрав команду Convert to Raster Layer (Конвертировать в растровый слой), а затем выполним размытие изображения по Гауссу при помощи команды Adjust=>Blur=>Gaussian Blur (Настройки=>Размытие=>Размытие по Гауссу) с коэффициентом размытия в 3,5 пиксела. Результат может напоминать рис. 72. Для формирования бликов точно таким же образом добавим еще один векторный слой, нарисуем в левом верхнем и правом нижнем углах кнопки белые овалы размером чуть побольше и не столь сплющенные, превратим векторный слой в растровый и выполним размытие по Гауссу с коэффициентом размытия в 3 пиксела. Возможно, кнопка станет напоминать представленную на рис. 73.
Создадим новый векторный слой и нарисуем на кнопке равносторонний белый треугольник, воспользовавшись инструментом Triangle при нажатой клавише Shift . Разместим его в левом углу кнопки, скопируем треугольник в буфер обмена и вставим из буфера на новый слой. Повернем копию треугольника на 180° и разместим его в правом углу кнопки. Чтобы все объекты оказались на одной линии относительно вертикального центра, выделим их инструментом Object Selection и щелкнем на кнопке Vert. Center in Canvas (Вертикальное выравнивание относительно центра). Возможно, что в итоге кнопка будет выглядеть так, как на рис. 74. Допечатаем нужный текст (рис. 75) и сохраним кнопку при помощи команды File=>Export=>PNG Optimizer (Файл=>Экспорт=>PNG-оптимизация) (рис. 76).
Создание rollovers-элементов
Без сомнения, «живые» Web-страницы сразу привлекают внимание, и потому на просторах Всемирной сети с каждым днем их число растет. Одним из способов «оживления» является внедрение элементов дизайна, которые изменяют свой внешний вид (или состояние) в зависимости от поведения мыши. По-английски такие элементы называются rollovers (от roll over перекатываться, переворачиваться). В русском языке строгого соответствия данному термину не существует, и потому Web-дизайнеры позаимствовали его из английского и называют подобные элементы ролловерами. Примерами типичных ролловеров являются анимированные кнопки; нередко ролловеры используются и при создании других навигационых элементов сайта.
В действительности любой ролловер представляет собой не одно, а несколько (до четырех) изображений, каждое из которых соответствует конкретному событию. При возникновении конкретного события браузер заменяет текущее изображение другим.
Что касается событий, то основными среди них принято считать следующие: Normal обычное состояние, Over наведение курсора мыши на элемент и Down нажатие левой кнопки мыши при ее наведении. Теоретически могут быть задействованы и события: Click отпускание левой кнопки мыши после нажатия, Up после отпускания кнопки, Out при выходе за пределы активной зоны. Однако на практике чаще ограничиваются изменением реакции элемента только на первые три или даже на первые два события.
Анимированная кнопка
При создании анимированной кнопки воспользуемся разноцветными кнопками в виде шара, созданными в одном из предыдущих разделов и сохраненными в виде файлов: image1.png, image2.png и image3.png.
Откроем файл image1.png и воспользуемся командой File=>Export=>Image Mapper (Файл=>Экспорт=>Карта изображения) откроется окно Image Mapper , которое в начальный момент будет выглядеть как на рис. 77. Обратите внимание на палитру инструментов Tools , служащих для выделения элементов изображения, в отношении которых должно быть определено то или иное ролловер-состояние.
Рис. 77. Исходное состояние окна Image Mapper
В данном случае нам потребуется инструмент Ellipse , при помощи которого нужно выделить на изображении кнопку примерно так, как на рис. 78. При необходимости положение выделенной области можно сразу же скорректировать, воспользовавшись инструментом Move . На следующем этапе введем имя сайта, который должен загружаться по щелчку на данной кнопке в окне URL (рис. 79), а затем щелкнем на кнопке Rollover Creator для того, чтобы определить необходимые ролловер-состояния. В данном примере, учитывая, что у нас в наличии имеются три разноцветные кнопки, определим три ролловер-состояния: Mouse over для указания изображения, сменяющего исходное при наведении мыши, Mouse out для возврата исходного изображения, когда мышь оказывается за пределами области, и Mouse down для определения изображения, которое появится при нажатии левой кнопки мыши (рис. 80). Save (Сохранить) и введем имя создаваемого HTM-файла в данном случае был создан файл пример1.htm (рис. 81).
Рис. 79. Состояние окна Image Mapper после выделения области
для
формирования ролловер-состояния и ввода имени, загружаемого щелчком на кнопке
сайта
Рис. 81. Вид Web-страницы при наведении мыши на кнопку кнопка
поменяла свой исходный цвет, а в строке состояния появилось имя сайта, на который
будет осуществлен переход в случае щелчка
Создание слайсов
Путешествуя по тем или иным ресурсам Всемирной сети, мы постоянно встречаем графические изображения, отдельные фрагменты которых связаны разными гиперссылками. Чаще речь идет об обычных навигационных панелях, возможно с rollover-эффектами, а иногда о больших графических изображениях, щелкая которые, мы попадаем на различные Web-страницы. В обоих случаях подобный эффект достигается за счет разрезания исходного изображения на отдельные фрагменты и размещения последних в отдельных ячейках таблицы, соответствующих различным гиперссылкам.
Навигационные элементы
Откроем исходное изображение (рис. 82 в качестве примера взято изображение с http://www.kasperskylab.ru/), а затем из командного меню File=>Export (Файл=>Экспорт) уже знакомую нам карту изображения командой Image Mapper (Карта изображения). Активизируем из панели инструментов инструмент Rectangle и с его помощью выделим на изображении часть рабочей области, соответствующей первому слайсу, и в окне URL определим адрес для перехода (рис. 83). Аналогичным образом выделим все остальные слайсы, параллельно задавая для них соответствующие URL . В итоге изображение будет разбито на семь отдельных слайсов, как показано на рис. 84.
После этого щелкнем на кнопке Save пример2.htm (рис. 85).
Рис. 85. Вид Web-страницы при наведении мыши на один из элементов навигационной панели
Обратите внимание, что для создания слайсов прямоугольной формы только что рассмотренный метод не очень подходит, поскольку довольно долго приходится корректировать размеры слайсов и их положение. Однако для работы со слайсами произвольной формы (об этом мы поговорим далее) он подходит идеально.
Попробуем добиться того же результата более простым путем. Вновь откроем исходное изображение (см. рис. 82) и воспользуемся командой File=>Export=>Image Slicer (Файл=>Экспорт=>Карта слайсов). Здесь намного беднее набор инструментов, зато имеется нож, при помощи которого можно очень быстро нарезать слайсы прямоугольной формы достаточно провести им вдоль нужных прямых (рис. 86). Все остальные параметры слайсов определяются как и в предыдущем случае.
Рис. 86. Результат разбиения изображения на слайсы в режиме Image Slicer
Бывают ситуации, когда выгоднее воспользоваться еще одним способом разбиения на слайсы путем создания сетки. Для примера откроем в качестве исходного рис. 87 и воспользуемся командой File=>Export=>Image Slicer (Файл=>Экспорт=>Карта слайсов). Потом щелкнем на инструменте Grid , а затем на изображении и зададим число столбцов и строк (рис. 88). Результат будет выглядеть примерно так, как на рис. 89. Разбиение получилось не совсем удачным, и часть разделяющих линий придется переместить для этого возьмем инструмент Pointer и переместим линии нужным образом, а затем определим все прочие параметры для каждого из слайсов (рис. 90). Обратите внимание, что для перемещения изображения в окне просмотра вам придется использовать инструмент Pan Image . После этого щелкнем на кнопке Save (Сохранить) и введем имя создаваемого HTM-файла в данном случае был создан файл пример3.htm .
Карты ссылок
Если разрезаемые области имеют отличную от прямоугольной форму, то в этом случае говорят не о слайсах, а о картах ссылок. Рассмотрим данную ситуацию на конкретном примере. Откроем исходное изображение (рис. 91 в качестве изображения взят рисунок с сайта http://www.grantasticdesigns.com/).
Воспользуемся командой File=>Export=>Image Mapper (Файл=>Экспорт=>Карта изображения). Активизируем из панели инструментов инструмент Ellipse и последовательно выделим им круглые области. Далее возьмем инструмент Polygon (он предназначен для выделения областей произвольной формы и напоминает магнитное лассо) и выделим им фрагменты карты с более сложной формой (прямоугольники, одна из границ которых является вогнутой). Затем, последовательно переходя от слайса к слайсу, определим в окне URL адрес для перехода в данном примере, чтобы на локальном компьютере проверить работоспособность перехода по ссылкам, в качестве адреса возьмем имя одной из созданных перед этим Web-страниц (рис. 92).
После этого щелкнем на кнопке Save (Сохранить) и введем имя создаваемого HTM-файла в данном случае был создан файл
Графика на WEB ‑страницах
Введение
Безопасная палитра
Некоторые форматы записи графики на Web‑страницах
Типовые графические элементы Web‑страниц
Введение
Визуальное представление позволяет осуществлять наиболее быструю передачу информации, обеспечивая также быстрое её восприятие наблюдателем (читателем) как непосредственно, так и с использованием принятых в мировой культуре источников информации (книги, газеты, кино, телевидение, Интернет). Манипулируя цветом, контрастом и символами, можно за долю секунды вызвать у наблюдателя ощущение тепла либо холода, спокойствия или напряженности, а вместе с тем даже передать некоторые сведения. Важную роль в графической передаче информации играют ассоциации – определённые образы, всплывающие в сознании пользователя в моменты, когда он видит некоторые символы или систему графических объектов.
Стиль Интернет-сайта определяется сочетанием текста, графики и активных элементов (формуляры, диалоговые окна, мультимедиа). Существенным является также подбор компонентов, их свойств (размер, цвет) и способов размещения на странице.
Цвета
В настоящее время RGB является самым популярным способом задания цвета и практически в каждой графической программе существует возможность описания цвета этим форматом. Комбинация трёх однобайтовых значений (24 бита) позволяет определить 16,7 млн. цветов (точнее 2 24).
HSL (Hue, Saturation, Luminance, т.е. оттенок, насыщение, яркость) – это палитра красок, определяемых сочетанием не основных цветов (как это имеет место для RGB), а оттенка, насыщения и яркости. Этот условный способ описания цвета намного более интуитивен и близок естественному восприятию цветов человеком. Значительно легче изменить оранжевый цвет на жёлтый, изменяя оттенок, насыщение и яркость, чем подбирать нужное сочетание красного, зелёного и синего.
· CMY, CMYK
Палитра CMY (Cyan, Magenta, Yellow, т.е. сине-зелёный, пурпурный, жёлтый) – ещё один способ определения цвета. Он составляет альтернативу RGB. Палитра CMY, расширенная черным цветом, обозначается CMYK и повсеместно применяется печатающими устройствами.
Безопасная цветовая палитра
Безопасная цветовая палитра – это набор из 216 цветов, общих для всех инструментальных платформ. Каждый из них может быть задан однобайтовым кодом. Их 216 потому, что 8‑битовое определение позволяет задать 256 цветов (2 8). Однако принято, чтобы поле в 40 и цветов было зарезервировано для операционной системы, тогда 216 цветов остаются для применения в прикладных программах пользователей. Картинки, отображаемые на мониторах компьютеров, способных правильно передать 256 цветов (8-битовая графика), отображаются правильно (и предсказуемо) и при условии применения 216 безопасных цветов. Остальные краски передаются как смесь компонентов из безопасной палитры.
Вопрос адекватного отражения цветов имел большое значение несколько лет назад, когда в повсеместном использовании были компьютеры с 8-битовой графической картой. Хорошим тоном считалось применение на Web‑страницах именно безопасного цветового набора. Теперь же мы все пользуемся 24-битовой графикой. Поэтому кажется более целесообразным использовать всю полноту возможностей, представляемых современными компьютерами, и применять на Web‑страницах различные сочетания цветов, в том числе и тех, что выходят за рамки безопасной палитры.
Некоторые форматы записи графики на Web ‑страницах
GIF (GraphicInterchangeFormat – Графический формат обмена) – один из первых графических форматов. Он и сегодня продолжает оставаться самым часто применяемым форматом записи графики и простой анимации для Интернет-сайтов. Формат GIF разработан фирмой CompuServ (онлайновая информационная служба). В 1987 году вышла его первая версия GIF‑87. Дальнейшая работа над расширением возможностей записи изображений увенчалась созданием новой версии GIF‑89а. В этой новой версии появились возможности определения выбранного цвета как прозрачного, чересстрочной загрузки и записи анимации. Важным достоинством формата GIF является его универсальность – на сегодняшний день все Интернет-браузеры поддерживают отбражение картинок в формате GIF.
Графика, записанная в формате GIF, компрессируется с использованием алгоритмов LZW (Lempel-Ziv-Welch). Этот алгоритм безутратной компрессии (сжатия), основанный на устранении избыточности информации, поэтому картинка отображается на 100% в соответствии с оригиналом. Компрессия заключается в отыскании повторяющихся последовательностей точек и записи информации о размерах этой последовательности и месте её начала. Этот способ позволяет значительно снизить размер файлов при записи изображений, имеющих довольно большие одноцветные участки.
GIF‑89а состоит: из заголовка и блоков данных. В заголовке отображаются: версия формата GIF, предпочтительные параметры картинки – высота, ширина, размер палитры, разрешение, цвет фона. Отдельные байты содержат информацию о глобальной цветовой палитре – каждый цвет это 3-байтовое значение, которым задаётся цветовое сочетание RGB. За заголовком следуют контрольные блоки, блоки изображения и дополнительные блоки.
1) В контрольном блоке находится информация о продолжительности экспозиции (времени показа на экране) и способе перехода от картинки к картинке. Формат GIF‑89а позволяет записывать много изображений в одном файле и задавать значения экспозиции и цикличности анимации.
2) Блоки изображения (их может быть несколько, если в файле записана анимация) содержат детальное описание параметров картинки, локальную цветовую палитру (если она отличается от глобальной палитры) и компрессированные данные о последовательностях точек изображения.
3) Дополнительный блок содержит данные, которые не отображаются, например комментарий, связанный с данной картинкой.
Ограничением формата GIF является размер цветовой палитры – максимум 256 цветов, то есть цветовая палитра может иметь размер от 2 1 по 2 8 , или 2, 4, 8, 16, 32, 64, 128 и 256 цветов. На практике это означает, что если на картинке появляется 7 цветов, то при использовании палитры размером 16 цветов часть полей палитры остаётся не задействованными. В этом случае редукция цветовой палитры до величины 8 не приведёт к потере качества, но позволит уменьшить размер файла записи картинки. Операция сужения цветовой палитры – обычная опция записи файла в формате GIF.
Кодировка LZW позволяет воспроизвести компрессированное изображение точно таким, каким оно было до компрессии. Подобные алгоритмы компрессии называются «безутратными», в отличие от «утратных» алгоритмов, которые предполагают потерю части информации об изображении. Сжатие LZW уменьшает размер файла GIF так эффективно, что на практике становится невыгодной дополнительная архивация и компрессия файлов этого типа программами ZIP, ARJи т.п. сжатием изображения занимаются графические программы.
В 1990 году Объединенной группой экспертов в области фотографии (JointPhotographicExpertGroup, JPEG) была предложена схема сжатия, которая впоследствии завоевала всеобщее признание, как стандартный метод обработки неподвижных изображений. JPEG – это алгоритм сжатия изображений. Но общепринятым стало применение названия JPEG к файлам, записанным в формате JFIF (JPEGFileInterchangeFormat). JPEG (или JFIF) – это формат записи изображений, применяемых как на Интернет-сайтах, так и для типографской печати, а также в цифровой фотографии.
Процесс компрессии изображения в формате JPEG идет в несколько этапов:
1) Если нужно, то сначала происходит конвертация данных о точках изображения из системы RGB в систему YCbCr, которая аналогична HSL, позволяет выразить яркость цвета.
2) Уменьшение в два раза ширины шкалы Cb и Cr (свойства цвета) при сохранении оригинальной шкалы яркости Y. Сужение шкалы происходит путём усреднения значений Cb и Cr соседних пикселей.
3) Анализ блоков изображения: 8*8 пикселей. С помощью дискретного косинусного преобразования (ДКП) производится округление значений изменения яркости цвета.
4) Массив данных, которым приближённо описывается оригинальное изображение, может быть подвергнут очередной компрессии (на этот раз безутратной), поскольку в результате округления появилось много одинаковых значений.
Выгодой алгоритма компрессии, применяемого в формате JPEG, особенно ощутим при обработке больших многоцветных изображений (например, фотоснимков). Для малых изображений (иконок) или картинок с преобладанием одного цвета лучше применять формат GIF.
Формат JPEG не поддерживает чересстрочную загрузку, но здесь есть возможность записи файла в прогрессивной форме. Просмотр крупного файла, записанного в прогрессивной форме JPEG, предполагает быстрое отображение картинки худшего качества, постепенное улучшение которого происходит по мере считывания очередных порций файловой информации. Это имеет большое значение для тех, кто публикует фотоснимки, карты и т.п. Быстрый просмотр картинки немного худшего качества даёт возможность решить, стоит ли ожидать дальнейшей загрузки, или можно прервать передачу изображения в браузер.
Формат BMP (Bitmap, Битовая карта) является очень простым способом записи графики для применения в системе Windows.
Вообще, этот формат в Интернете не применяется. BMP – это внутренняя графическая система Windows. В частности, в этом формате записываются «копии экрана». Достаточно нажать клавиши
