СКРЫТЬ | HIDE

Забыли пароль

Забыли логин

Регистрация


Векторный клипарт, растровый клипарт, скрап-наборы, иконки, открытки, тату, рамки для фото
Код баннера для размещения на сайте



Лучшее на сайте

 

 

 

 

 

 

 

 

 



Главная :: Статьи :: Секреты web-графики



Секреты web-графики

Секреты web-графики Как вы знаете, 70% информации об окружающем мире человек воспринимает через органы зрения. Конечно, с появлением различных графических браузеров, появилась возможность добавлять изображение к тексту, Интернет получил сильнейший инструмент воздействия на своих пользователей. Для получения любого необходимого цвета достаточно лишь смешать в определенных пропорциях три цвета: зеленый (Green),красный (Red), и синий (Blue) — как известно, в английской аббревиатуре RGB. Такой принцип довольно широко имеет свойство применяется в цветных фотопленках, где, при замене степени засветки красного, зеленого и синего слоев, получают тот или другой цвет. При появлении цветного кино принцип его (RGB) перешел постепенно в цветное телевидение, где цвета образуются при соединении красного, зеленого и синего лучей разной интенсивности. Естественно, что с экранов телевизоров он перекочевал на экраны компьютерных мониторов. Так как конечный цвет является результатом суммирования, то и называется он аддитивным (additive color). Однако при подготовке изображений на компьютере используется и противоположный способ смешивания — вычитания (subtractive color). При этом происходит удаление из белого, соответственно, негативов вышеназванных цветов — голубого (Cyan), пурпурного (Magenta), желтого (Yellow) и, для получения лучшего контраста, негатива белого — черного (blaK). В английской аббревиатуре — CMYK. Данный способ используется, прежде всего, для подготовки изображения к печати на бумаге и в Web практически не применяется. Нас же он интересует постольку, поскольку он вообще существует. При создании изображения на компьютере не столько важно знать, как получается тот или иной цвет, сколько — как им управлять. При всем многообразии форматов графических файлов, а соответственно, и цветовых режимов, для подготовки графики в Web используются от силы три-четыре. Но прежде чем рассматривать эти режимы, необходимо определиться с терминологией. Палитра цветов — сразу возникают ассоциации с мастерской художника, с мольбертами и дощечками для смешивания цветов. В некотором роде так оно и есть, только и кисти, и мольберт, и краски, и саму мастерскую заменяет компьютер. В компьютерной графике палитра (таблица) — перечень цветов, используемых в данном режиме при работе с изображением. Количество их в палитре зависит от глубины. Глубина цвета определяется количеством используемых битов на пиксель (единичный элемент, можно сказать, "атом" изображения). В принципе, глубина цвета, а соответственно, и количество цветов в палитре, может быть сколь угодно большим. Но не стоит забывать, что "все хорошо в меру!". Человеческий глаз хоть и уникальный инструмент для работы с цветовой гаммой, но имеет конечную разрешающую способность (возможность различать) по цветам. Кроме того, необходимо учитывать и скорость обсчета большого объема изображения (я не говорю о больших размерах файлов — об этом немного позже) компьютером, и возможности монитора при большой глубине цвета. Отсюда приходим к максимуму — 24 бита на пиксель (8 бит на каждый цвет в RGB) или 224=16,8 млн. цветов в палитре. Однако не всегда целесообразно использовать "полную" палитру (true color) при подготовке изображения для Web. В последнее время большую популярность приобрел даже не сам ретро, сколько стилизация под ретро и как одно из направлений — использование черно-белых изображений. В них нет необходимости держать информацию обо всех цветах, хранится лишь информация об оттенках одного цвета. Именно этот принцип использует режим градации серого (grayscale), использующий до 256 оттенков серого цвета. Как уже отмечалось, не всегда целесообразно, использовать большое количество цветов в изображении. В режиме индексированных цветов (index color) цвета формируются не традиционным смешиванием трех "чистых" — каждому пикселю изображения присваивается индекс (отсюда и название) цвета в палитре. Причем количество их может быть разным, но не более 256. Естественно, чем меньше цветов в палитре, тем меньше и объем файла изображения. Однако для полноцветных изображений с плавными градиентными переходами необходим режим RGB, дающий доступ к управлению всеми цветами путем задания одного из 256 оттенков каждого из трех цветов. Это наиболее часто используемый режим работы подготовки изображений. При всем разнообразии изображения в компьютерной графике можно поделить на два больших класса: растровые и векторные. Каждый из них имеет свои преимущества и недостатки. Принцип построения растровых изображений основан на конечности разрешающей способности глаза, когда при сближении двух точек, глаз перестает их различать. Вспомните рисунки, создаваемые на заре компьютерных технологий с помощью ASCII-символов, которые можно было рассмотреть только с некоторого расстояния. Растровое изображение можно представить как массив пикселей, каждый из которых имеет свой цвет. Соответственно, растр — представление изображения (компьютер передает так любую информацию), выражаясь языком математики, методом дифференцирования (деления непрерывности на элементарные отрезки). Именно из принципа представления растрового изображения и проистекают его недостатки. Так, для изображения 300?200 пикселей при трех байтах на пиксель для RGB размер файла будет 300?200?3=180 Кбайт. Согласитесь, не каждый захочет ждать загрузки такого изображения, тем более если оно не одно. Кроме того, любая элементарная единица, будь то атом в понимании древних греков или пиксель в нашем понимании, в принципе, неделима. Отсюда невозможность масштабирования растрового изображения. Попробовав увеличить такую картинку раз этак в 10, единственное, что можно будет увидеть, — нагромождение цветных квадратиков в стиле раннего авангарда, понять смысл которого можно будет только шагов с пяти (вспомните пример с ASCII-символами) и то, если позволит экран монитора. Достоинства растра — это прямое продолжение его недостатков. Только в нем можно получить полный доступ к каждому пикселю изображения, изменить его яркость, тон или насыщенность, поменять белое на черное. Именно на этом основаны многочисленные графические фильтры, позволяющие сделать изображение размытым или, наоборот, более резким, более или менее контрастным, тонировать. Растровые форматы используются при сканировании и захвате изображения с экрана. Растровые графические редакторы гораздо чаще используются для редактирования изображений, чем для их создания, поэтому довольно мирно уживаются Corel Draw и PhotoShop. Еще как немаловажную особенность надо отметить, что практически все графические броузеры понимают растровые изображения без подключаемых модулей (plug-in). Кроме того, практически любой векторный рисунок быстро и без искажений можно перевести в растр. Обратной же силы этот закон не имеет. Как интеграл в математике является обратной функцией дифференцированию, так и "вектор", можно сказать, является противоположностью растру. Любую кривую, в том числе и замкнутую, можно описать некоторым набором математических формул и представить в виде программного кода. Любое изображение можно представить как совокупность фигур (замкнутых линий), окрашенных в тот или иной цвет. Именно так мы создаем изображения с помощью карандашей и кисточек, именно на этом принципе построены векторные форматы. Эти принципы и определяют основные достоинства "вектора". Отсутствие необходимости описывать каждый пиксель позволяет значительно уменьшить объем файлов даже при довольно больших размерах изображения. Кроме того, из математики известно, что при умножении функции на постоянное число (константу) форма описываемой ею кривой не изменяется. Отсюда мы получаем векторное изображение как идеальный объект для масштабирования. Изображение, увеличенное в десять раз, будет выглядеть не хуже оригинала. Однако, получив возможность управлять размерами, мы теряем гибкость работы с цветом, свойственную растровым изображениям. Поэтому векторные графические редакторы используются для создания изображений с последующей их доводкой и нюансировкой, придания им некоторой реалистичности в растровых редакторах и размещения в Интернете. Особое место среди программ для работы с векторной графикой занимают шрифтовые редакторы. В последнее время это стало весьма актуальным в связи с развитием таблиц стилей (CSS) и появившейся возможностью подгружать шрифты на пользовательские машины. Одной из разновидностей векторной является трехмерная (3D) графика. В этих файлах просто вводится еще одна координата, но при этом получается не изображение, а целая сцена с большим количеством нюансов, и, соответственно, большим объемом вычислений. Но при всем многообразии графических форматов для представления изображений в Web используeтся малое их количество. Основным ограничителем здесь выступает размер файла. А потому выбор формата при подготовке изображения для Web определяется оптимальным соотношением двух взаимоисключающих параметров: размеров изображения и объема файла. Однако из теории вероятности известно, что большинство схем представления информации обладают той или иной степенью избыточности. К примеру, составляя конспект на лекциях, мы пользуемся некой системой сокращений слов и фраз, не теряя при этом смысла содержания. Этот принцип положен в основу большинства систем сжатия информации, в том числе и форматов графических файлов, используемых в Web. Однако при одинаковом принципе алгоритмы его реализации разрабатываются разными людьми, а потому имеют весьма существенные различия между собой. Более того, не стоит забывать, что каждый формат имеет и другие особенности, поэтому при его выборе следует учитывать прежде всего исполнение рисунка. GIF (Graphics Interchange Format, формат взаимообмена графикой) разработан CompuServe Incorporated, последняя версия GIF-89a. Первоначально, как можно понять из названия, этот формат разрабатывался для передачи графической информации в потоке данных, а потому, в отличие от остальных, представляет собой последовательную организацию, а не произвольную, что позволяет использовать минимум ресурсов процессора при его распаковке. Для компрессии файлов GIF использует LZW-алгоритм сжатия, или, как его еще называют, сжатие без потерь, при этом он наиболее эффективен при больших однотонных областях с четкими границами. А так как сканирование изображения происходит по горизонтали, то и сжатие будет более эффективно при больших горизонталях таких областей. Однако GIF не способен хранить неиндексированные изображения, то есть может отображать не более 256 цветов. Эта ограниченность формата не позволяет добиться плавного перехода от одного цвета к другому, что особенно заметно при использовании градиентов и размывок. Можно, конечно, использовать прием "диффузия", но эффект "зернистости", получаемый при этом, выглядит, скорее, как стилизация, а потому не всегда оправдан в общем контексте сайта. Кроме того, при использовании диффузии увеличивается неоднородность изображения, что ведет к снижению эффективности компрессии. Обратной стороной ограниченности палитры в GIF может служить ее гибкость. Изменяя размер таблицы, а, следовательно, и количество цветов в ней, web-дизайнер получает в свои руки прекрасный инструмент для регулировки соотношения качество изображения / размер файла. Так, уменьшая в изображении размером 100?100 пикселей количество цветов с 256 (8 бит на пиксель) до 128 (7 бит на пиксель), получаем 100?100?8 — 100?100?7 = 10 000 бит экономии. Еще одной особенностью, введенной в последнюю версию формата, является создание прозрачных областей в изображениях, открывающее интересные возможности в web-дизайне. "Потоковая" природа GIF, относительно малые размеры его файлов, возможность компрессии за счет использования прозрачных областей в кадрах сделали его прекрасным инструментом для создания анимации в Web. Использование GIF целесообразно, прежде всего, для так называемых плоскоцветных изображений с четко обозначенными границами переходов между цветами, а также малоразмерных изображений типа кнопок, превьюшных картинок и т. п. JPEG (Joint Photographic Experts Group). Разработан группой экспертов по фотографии (что видно из названия) под эгидой ISO (Международная организация по стандартам). Вообще этот формат довольно уникален тем, что использует алгоритм сжатия, отличающийся от применяемых во всех остальных графических форматах, — сжатие с потерями. Этот алгоритм ранее использовался на телевидении в схеме телевизионной трансляции США (NTSC). Основан он на все той же ограниченности человеческого зрения, неспособности глаза не замечать некоторые искажения в восстановленном изображении. На сегодня этот алгоритм является одним из самых эффективных (коэффициент сжатия достигает 1:100), однако он не очень хорошо обрабатывает изображения с малым количеством цветов и резкими границами. Вообще JPEG можно назвать противоположностью GIF. Он позволяет отображать 24-битную палитру, т. е. все 16,8 млн. цветов, что дает возможность отображать градиенты с фотографической точностью, но при этом не может иметь прозрачных областей. Однако этот формат таит в себе одну особенность, которую нельзя не учитывать. При повторном сохранении изображения в JPEG он повторно запускает алгоритм сжатия, естественно, с ухудшением качества. Поэтому сохранять изображение в нем следует только после окончательной обработки. Оба растровых формата, и GIF, и JPEG, поддерживаются всеми графическими броузерами "по умолчанию" и могут быть обработаны в большинстве графических редакторов. Выбор между форматами определяется прежде всего особенностями конкретной картинки, и сделать его иногда бывает возможно только путем эксперимента. Однако и векторные форматы все чаще обращают на себя внимание web-дизайнеров. В последнее время весьма популярным стал формат Shockwave Flash, разработанный фирмой Macromedia. Обладая такими преимуществами векторных форматов, как масштабируемость и относительно небольшой объем файла, он все-таки не является чисто графическим. Инструментарий для рисования в программе Macromedia Flash Direct ближе к растровым редакторам, нежели к векторным, а способность создавать анимации, озвучивать их, заставлять реагировать на перемещение мыши и способность работать с гиперссылками делают Flash похожим на мультимедийный формат. В качестве отдельных элементов сайта Flash-заставки используются в основном как интерактивные баннеры в некоторых рекламных сетях. Такого вида баннерам пророчат большое будущее из-за их большей возможности влиять на пользователей Сети, нежели классических, выполненных в GIF. Однако гораздо чаще этот формат находит применение для создания целой страницы или большей ее части (классическим примером, на мой взгляд, является "Диснеевский" сайт {http://www.disney.com/}). Камнем преткновения для Flash является наличие дополнительного модуля для его просмотра, который хоть и распространяется бесплатно, но при весе 0,24 М и необходимости загрузки через Сеть может отбить желание просматривать Flash-заставки. Но появление встроенного модуля уже в 4.5 версии "Коммуникатора" и обещания Microsoft сделать аналогичное и в IE 5.0+ может вполне выдвинуть Flash в лидеры среди графических форматов для Internet и несколько изменить само представление о web-дизайне. Не остались забытыми и трехмерные объекты. Для их создания в Интернете в ноябре 1994 года состоялась презентация VRML 1.0 (Virtual Reality Modeling Language — язык моделирования виртуальной реальности). Последняя версия VRML 2.0 позволяет создавать сложные виртуальные миры со звуковыми эффектами. Для написания файлов этого формата может быть достаточно простого текстового редактора (подобно HTML, они не требуют дальнейшей компиляции), но существуют также специальные программы, помогающие этот процесс визуализировать и автоматизировать. Кроме того, некоторые 3D-пакеты поддерживают формат VRML 2.0. Для просмотра виртуальных миров необходимы дополнительные модули, включенные в состав последних версий NC и IE. Но при всей своей привлекательности 3D-миры пока еще не нашли широкого применения. Основными недостатками являются невозможность встраивания таких миров в HTML-страницу и, соответственно, "переплетение" с общим дизайном сайта, в отличие, например, от Flash. Другой неприятной особенностью является довольно большое количество вычислительных ресурсов компьютера для качественного рендеринга (визуализации) трехмерной сцены. Говоря о графике в Web, обычно не упоминают о шрифтах как графических объектах. Связано это прежде всего с тем, что до недавнего времени в HTML-страницах предполагалась весьма ограниченная возможность управления параметрами шрифтов. Но уже в спецификации CSS level2 вводится понятие встраивания шрифтов, открывающее возможность использовать не только стандартные. Существующие программы позволяют создавать даже символьные шрифты, получая вместо букв монохромные масштабируемые изображения. Но и эту идею не обошла "война броузеров". Разная реализация "подгружаемых" шрифтов в NC и IE, к сожалению, не позволяет использовать эти возможности в полной мере. Конечно, приведенные здесь рассуждения не могут охватить весь океан под названием "web-графика". Но начиная строить дом, необходимо знать кое-что и о кирпичах. И я думаю, что мой первый кирпич не будет лишним при строительстве вашего сайта.


Рекомендуем к просмотру :
Копилочка сайтов по обработке фото, онлайн-редакторы, фотоэффекты онлайн

Секреты web-графики Как вы знаете, 70% информации об окружающем мире человек воспринимает через органы зрения. Конечно, с появлением различных графических браузеров, появилась возможность добавлять изображение к тексту, Интернет получил сильнейший инструмент воздействия на своих пользователей. Для получения любого необходимого цвета достаточно лишь смешать в определенных пропорциях три цвета: зеленый (Green),красный (Red), и синий (Blue) — как известно, в английской аббревиатуре RGB. Такой принцип довольно широко имеет свойство применяется в цветных фотопленках, где, при замене степени засветки красного, зеленого и синего слоев, получают тот или другой цвет. При появлении цветного кино принцип его (RGB) перешел постепенно в цветное телевидение, где цвета образуются при соединении красного, зеленого и синего лучей разной интенсивности. Естественно, что с экранов телевизоров он перекочевал на экраны компьютерных мониторов. Так как конечный цвет является результатом суммирования, то и называется он аддитивным (additive color). Однако при подготовке изображений на компьютере используется и противоположный способ смешивания — вычитания (subtractive color). При этом происходит удаление из белого, соответственно, негативов вышеназванных цветов — голубого (Cyan), пурпурного (Magenta), желтого (Yellow) и, для получения лучшего контраста, негатива белого — черного (blaK). В английской аббревиатуре — CMYK. Данный способ используется, прежде всего, для подготовки изображения к печати на бумаге и в Web практически не применяется. Нас же он интересует постольку, поскольку он вообще существует. При создании изображения на компьютере не столько важно знать, как получается тот или иной цвет, сколько — как им управлять. При всем многообразии форматов графических файлов, а соответственно, и цветовых режимов, для подготовки графики в Web используются от силы три-четыре. Но прежде чем рассматривать эти режимы, необходимо определиться с терминологией. Палитра цветов — сразу возникают ассоциации с мастерской художника, с мольбертами и дощечками для смешивания цветов. В некотором роде так оно и есть, только и кисти, и мольберт, и краски, и саму мастерскую заменяет компьютер. В компьютерной графике палитра (таблица) — перечень цветов, используемых в данном режиме при работе с изображением. Количество их в палитре зависит от глубины. Глубина цвета определяется количеством используемых битов на пиксель (единичный элемент, можно сказать, "атом" изображения). В принципе, глубина цвета, а соответственно, и количество цветов в палитре, может быть сколь угодно большим. Но не стоит забывать, что "все хорошо в меру!". Человеческий глаз хоть и уникальный инструмент для работы с цветовой гаммой, но имеет конечную разрешающую способность (возможность различать) по цветам. Кроме того, необходимо учитывать и скорость обсчета большого объема изображения (я не говорю о больших размерах файлов — об этом немного позже) компьютером, и возможности монитора при большой глубине цвета. Отсюда приходим к максимуму — 24 бита на пиксель (8 бит на каждый цвет в RGB) или 224=16,8 млн. цветов в палитре. Однако не всегда целесообразно использовать "полную" палитру (true color) при подготовке изображения для Web. В последнее время большую популярность приобрел даже не сам ретро, сколько стилизация под ретро и как одно из направлений — использование черно-белых изображений. В них нет необходимости держать информацию обо всех цветах, хранится лишь информация об оттенках одного цвета. Именно этот принцип использует режим градации серого (grayscale), использующий до 256 оттенков серого цвета. Как уже отмечалось, не всегда целесообразно, использовать большое количество цветов в изображении. В режиме индексированных цветов (index color) цвета формируются не традиционным смешиванием трех "чистых" — каждому пикселю изображения присваивается индекс (отсюда и название) цвета в палитре. Причем количество их может быть разным, но не более 256. Естественно, чем меньше цветов в палитре, тем меньше и объем файла изображения. Однако для полноцветных изображений с плавными градиентными переходами необходим режим RGB, дающий доступ к управлению всеми цветами путем задания одного из 256 оттенков каждого из трех цветов. Это наиболее часто используемый режим работы подготовки изображений. При всем разнообразии изображения в компьютерной графике можно поделить на два больших класса: растровые и векторные. Каждый из них имеет свои преимущества и недостатки. Принцип построения растровых изображений основан на конечности разрешающей способности глаза, когда при сближении двух точек, глаз перестает их различать. Вспомните рисунки, создаваемые на заре компьютерных технологий с помощью ASCII-символов, которые можно было рассмотреть только с некоторого расстояния. Растровое изображение можно представить как массив пикселей, каждый из которых имеет свой цвет. Соответственно, растр — представление изображения (компьютер передает так любую информацию), выражаясь языком математики, методом дифференцирования (деления непрерывности на элементарные отрезки). Именно из принципа представления растрового изображения и проистекают его недостатки. Так, для изображения 300?200 пикселей при трех байтах на пиксель для RGB размер файла будет 300?200?3=180 Кбайт. Согласитесь, не каждый захочет ждать загрузки такого изображения, тем более если оно не одно. Кроме того, любая элементарная единица, будь то атом в понимании древних греков или пиксель в нашем понимании, в принципе, неделима. Отсюда невозможность масштабирования растрового изображения. Попробовав увеличить такую картинку раз этак в 10, единственное, что можно будет увидеть, — нагромождение цветных квадратиков в стиле раннего авангарда, понять смысл которого можно будет только шагов с пяти (вспомните пример с ASCII-символами) и то, если позволит экран монитора. Достоинства растра — это прямое продолжение его недостатков. Только в нем можно получить полный доступ к каждому пикселю изображения, изменить его яркость, тон или насыщенность, поменять белое на черное. Именно на этом основаны многочисленные графические фильтры, позволяющие сделать изображение размытым или, наоборот, более резким, более или менее контрастным, тонировать. Растровые форматы используются при сканировании и захвате изображения с экрана. Растровые графические редакторы гораздо чаще используются для редактирования изображений, чем для их создания, поэтому довольно мирно уживаются Corel Draw и PhotoShop. Еще как немаловажную особенность надо отметить, что практически все графические броузеры понимают растровые изображения без подключаемых модулей (plug-in). Кроме того, практически любой векторный рисунок быстро и без искажений можно перевести в растр. Обратной же силы этот закон не имеет. Как интеграл в математике является обратной функцией дифференцированию, так и "вектор", можно сказать, является противоположностью растру. Любую кривую, в том числе и замкнутую, можно описать некоторым набором математических формул и представить в виде программного кода. Любое изображение можно представить как совокупность фигур (замкнутых линий), окрашенных в тот или иной цвет. Именно так мы создаем изображения с помощью карандашей и кисточек, именно на этом принципе построены векторные форматы. Эти принципы и определяют основные достоинства "вектора". Отсутствие необходимости описывать каждый пиксель позволяет значительно уменьшить объем файлов даже при довольно больших размерах изображения. Кроме того, из математики известно, что при умножении функции на постоянное число (константу) форма описываемой ею кривой не изменяется. Отсюда мы получаем векторное изображение как идеальный объект для масштабирования. Изображение, увеличенное в десять раз, будет выглядеть не хуже оригинала. Однако, получив возможность управлять размерами, мы теряем гибкость работы с цветом, свойственную растровым изображениям. Поэтому векторные графические редакторы используются для создания изображений с последующей их доводкой и нюансировкой, придания им некоторой реалистичности в растровых редакторах и размещения в Интернете. Особое место среди программ для работы с векторной графикой занимают шрифтовые редакторы. В последнее время это стало весьма актуальным в связи с развитием таблиц стилей (CSS) и появившейся возможностью подгружать шрифты на пользовательские машины. Одной из разновидностей векторной является трехмерная (3D) графика. В этих файлах просто вводится еще одна координата, но при этом получается не изображение, а целая сцена с большим количеством нюансов, и, соответственно, большим объемом вычислений. Но при всем многообразии графических форматов для представления изображений в Web используeтся малое их количество. Основным ограничителем здесь выступает размер файла. А потому выбор формата при подготовке изображения для Web определяется оптимальным соотношением двух взаимоисключающих параметров: размеров изображения и объема файла. Однако из теории вероятности известно, что большинство схем представления информации обладают той или иной степенью избыточности. К примеру, составляя конспект на лекциях, мы пользуемся некой системой сокращений слов и фраз, не теряя при этом смысла содержания. Этот принцип положен в основу большинства систем сжатия информации, в том числе и форматов графических файлов, используемых в Web. Однако при одинаковом принципе алгоритмы его реализации разрабатываются разными людьми, а потому имеют весьма существенные различия между собой. Более того, не стоит забывать, что каждый формат имеет и другие особенности, поэтому при его выборе следует учитывать прежде всего исполнение рисунка. GIF (Graphics Interchange Format, формат взаимообмена графикой) разработан CompuServe Incorporated, последняя версия GIF-89a. Первоначально, как можно понять из названия, этот формат разрабатывался для передачи графической информации в потоке данных, а потому, в отличие от остальных, представляет собой последовательную организацию, а не произвольную, что позволяет использовать минимум ресурсов процессора при его распаковке. Для компрессии файлов GIF использует LZW-алгоритм сжатия, или, как его еще называют, сжатие без потерь, при этом он наиболее эффективен при больших однотонных областях с четкими границами. А так как сканирование изображения происходит по горизонтали, то и сжатие будет более эффективно при больших горизонталях таких областей. Однако GIF не способен хранить неиндексированные изображения, то есть может отображать не более 256 цветов. Эта ограниченность формата не позволяет добиться плавного перехода от одного цвета к другому, что особенно заметно при использовании градиентов и размывок. Можно, конечно, использовать прием "диффузия", но эффект "зернистости", получаемый при этом, выглядит, скорее, как стилизация, а потому не всегда оправдан в общем контексте сайта. Кроме того, при использовании диффузии увеличивается неоднородность изображения, что ведет к снижению эффективности компрессии. Обратной стороной ограниченности палитры в GIF может служить ее гибкость. Изменяя размер таблицы, а, следовательно, и количество цветов в ней, web-дизайнер получает в свои руки прекрасный инструмент для регулировки соотношения качество изображения / размер файла. Так, уменьшая в изображении размером 100?100 пикселей количество цветов с 256 (8 бит на пиксель) до 128 (7 бит на пиксель), получаем 100?100?8 — 100?100?7 = 10 000 бит экономии. Еще одной особенностью, введенной в последнюю версию формата, является создание прозрачных областей в изображениях, открывающее интересные возможности в web-дизайне. "Потоковая" природа GIF, относительно малые размеры его файлов, возможность компрессии за счет использования прозрачных областей в кадрах сделали его прекрасным инструментом для создания анимации в Web. Использование GIF целесообразно, прежде всего, для так называемых плоскоцветных изображений с четко обозначенными границами переходов между цветами, а также малоразмерных изображений типа кнопок, превьюшных картинок и т. п. JPEG (Joint Photographic Experts Group). Разработан группой экспертов по фотографии (что видно из названия) под эгидой ISO (Международная организация по стандартам). Вообще этот формат довольно уникален тем, что использует алгоритм сжатия, отличающийся от применяемых во всех остальных графических форматах, — сжатие с потерями. Этот алгоритм ранее использовался на телевидении в схеме телевизионной трансляции США (NTSC). Основан он на все той же ограниченности человеческого зрения, неспособности глаза не замечать некоторые искажения в восстановленном изображении. На сегодня этот алгоритм является одним из самых эффективных (коэффициент сжатия достигает 1:100), однако он не очень хорошо обрабатывает изображения с малым количеством цветов и резкими границами. Вообще JPEG можно назвать противоположностью GIF. Он позволяет отображать 24-битную палитру, т. е. все 16,8 млн. цветов, что дает возможность отображать градиенты с фотографической точностью, но при этом не может иметь прозрачных областей. Однако этот формат таит в себе одну особенность, которую нельзя не учитывать. При повторном сохранении изображения в JPEG он повторно запускает алгоритм сжатия, естественно, с ухудшением качества. Поэтому сохранять изображение в нем следует только после окончательной обработки. Оба растровых формата, и GIF, и JPEG, поддерживаются всеми графическими броузерами "по умолчанию" и могут быть обработаны в большинстве графических редакторов. Выбор между форматами определяется прежде всего особенностями конкретной картинки, и сделать его иногда бывает возможно только путем эксперимента. Однако и векторные форматы все чаще обращают на себя внимание web-дизайнеров. В последнее время весьма популярным стал формат Shockwave Flash, разработанный фирмой Macromedia. Обладая такими преимуществами векторных форматов, как масштабируемость и относительно небольшой объем файла, он все-таки не является чисто графическим. Инструментарий для рисования в программе Macromedia Flash Direct ближе к растровым редакторам, нежели к векторным, а способность создавать анимации, озвучивать их, заставлять реагировать на перемещение мыши и способность работать с гиперссылками делают Flash похожим на мультимедийный формат. В качестве отдельных элементов сайта Flash-заставки используются в основном как интерактивные баннеры в некоторых рекламных сетях. Такого вида баннерам пророчат большое будущее из-за их большей возможности влиять на пользователей Сети, нежели классических, выполненных в GIF. Однако гораздо чаще этот формат находит применение для создания целой страницы или большей ее части (классическим примером, на мой взгляд, является "Диснеевский" сайт {http://www.disney.com/}). Камнем преткновения для Flash является наличие дополнительного модуля для его просмотра, который хоть и распространяется бесплатно, но при весе 0,24 М и необходимости загрузки через Сеть может отбить желание просматривать Flash-заставки. Но появление встроенного модуля уже в 4.5 версии "Коммуникатора" и обещания Microsoft сделать аналогичное и в IE 5.0+ может вполне выдвинуть Flash в лидеры среди графических форматов для Internet и несколько изменить само представление о web-дизайне. Не остались забытыми и трехмерные объекты. Для их создания в Интернете в ноябре 1994 года состоялась презентация VRML 1.0 (Virtual Reality Modeling Language — язык моделирования виртуальной реальности). Последняя версия VRML 2.0 позволяет создавать сложные виртуальные миры со звуковыми эффектами. Для написания файлов этого формата может быть достаточно простого текстового редактора (подобно HTML, они не требуют дальнейшей компиляции), но существуют также специальные программы, помогающие этот процесс визуализировать и автоматизировать. Кроме того, некоторые 3D-пакеты поддерживают формат VRML 2.0. Для просмотра виртуальных миров необходимы дополнительные модули, включенные в состав последних версий NC и IE. Но при всей своей привлекательности 3D-миры пока еще не нашли широкого применения. Основными недостатками являются невозможность встраивания таких миров в HTML-страницу и, соответственно, "переплетение" с общим дизайном сайта, в отличие, например, от Flash. Другой неприятной особенностью является довольно большое количество вычислительных ресурсов компьютера для качественного рендеринга (визуализации) трехмерной сцены. Говоря о графике в Web, обычно не упоминают о шрифтах как графических объектах. Связано это прежде всего с тем, что до недавнего времени в HTML-страницах предполагалась весьма ограниченная возможность управления параметрами шрифтов. Но уже в спецификации CSS level2 вводится понятие встраивания шрифтов, открывающее возможность использовать не только стандартные. Существующие программы позволяют создавать даже символьные шрифты, получая вместо букв монохромные масштабируемые изображения. Но и эту идею не обошла "война броузеров". Разная реализация "подгружаемых" шрифтов в NC и IE, к сожалению, не позволяет использовать эти возможности в полной мере. Конечно, приведенные здесь рассуждения не могут охватить весь океан под названием "web-графика". Но начиная строить дом, необходимо знать кое-что и о кирпичах. И я думаю, что мой первый кирпич не будет лишним при строительстве вашего сайта.



Ключевые теги:

Сек, ики, Как, знае, ин, ма, ок, жа, ми, еловек, во, инимае, ган, ения, Коне, появлением, азли, ки, зе, появила, возможно, добавля, изоб, ажение, ек, Ин, не, пол, ил, ней, ин, мен, воздей, вия, вои, пол, зова, елей, Для, пол, ения, бого, необ, одимого, ве, до, ли, ме, оп, еделенн, опо, ия, ве, зелен, иний, как, изве, англий, кой, абб, евиа, Такой, ин, довол, око, имее, вой, именяе, ве, опленка, где, замене, епени, за, ве, ного, зеленого, инего, лоев, пол, или, гой, ве, появлении, ве, ного, кино, ин, его, пе, по, епенно, ве, ное, елевидение, где, ве, об, аз, оединении, ного, зеленого, инего, азной, ин, ен, ивно, венно, анов, елевизо, пе, еко, евал, ан, комп, мони, Так, как, коне, ве, являе, ез, мми, ования, наз, вае, адди, ивн, Однако, подго, овке, изоб, ажений, комп, пол, ивоположн, по, ме, ивания, ания, ои, оди, даление, белого, оо, ве, венно, нега, ивов, еназванн, ве, гол, бого, ного, жел, ого, для, пол, ения, его, кон, нега, ива, белого, ного, англий, кой, абб, евиа, Данн, по, пол, ежде, его, для, подго, овки, изоб, ажения, пе, маге, ак, именяе, На, ин, по, ол, по, кол, вооб, оздании, изоб, ажения, комп, ол, важно, зна, как, пол, ае, или, иной, ве, кол, как, авля, многооб, азии, ма, ки, айлов, оо, ве, венно, ве, ов, ежимов, для, подго, овки, ики, пол, ил, ежде, ма, ива, ежим, необ, одимо, оп, едели, минологией, Пали, ве, аз, возника, иа, ма, кой, дожника, мол, бе, ами, до, ками, для, ме, ивания, ве, неко, оде, оно, ол, ки, мол, бе, ам, ма, заменяе, комп, комп, ной, ике, пали, абли, пе, ен, ве, пол, ем, данном, ежиме, або, изоб, ажением, Коли, пали, зави, гл, бин, Гл, бина, ве, оп, еделяе, коли, вом, пол, ем, би, пик, ел, едини, лемен, можно, каза, изоб, ажения, ин, ипе, гл, бина, ве, оо, ве, венно, коли, ве, пали, може, кол, годно, бол, ои, заб, ва, ме, Челове, кий, глаз, никал, ин, мен, для, або, ве, овой, гаммой, имее, коне, аз, по, обно, возможно, азли, ве, оме, ого, необ, одимо, ва, ко, об, бол, ого, об, ема, изоб, ажения, гово, бол, азме, айлов, немного, позже, комп, возможно, мони, бол, гл, бине, ве, одим, мак, им, би, пик, ел, би, кажд, ве, или, млн, ве, пали, Однако, егда, еле, ооб, азно, пол, зова, полн, пали, подго, овке, изоб, ажения, для, по, леднее, емя, бол, поп, ля, но, иоб, даже, кол, илиза, под, как, одно, нап, авлений, пол, зование, бел, изоб, ажений, ни, не, необ, одимо, де, жа, ин, ма, обо, ве, ани, ли, ин, ма, енка, одного, ве, Именно, ин, пол, ежим, ада, ого, пол, енков, ого, ве, Как, ме, ало, егда, еле, ооб, азно, пол, зова, бол, коли, ве, изоб, ажении, ежиме, индек, ованн, ве, ве, ми, ади, ионн, ме, иванием, каждом, пик, ел, изоб, ажения, ваивае, индек, название, ве, пали, коли, може, азн, более, венно, мен, ве, пали, мен, об, айла, изоб, ажения, Однако, для, полно, ве, изоб, ажений, плавн, адиен, пе, одами, необ, одим, ежим, да, до, авлени, еми, ве, ами, задания, одного, енков, каждого, ве, наиболее, пол, ем, ежим, або, подго, овки, изоб, ажений, азнооб, азии, изоб, ажения, комп, ной, ике, можно, подели, два, бол, кла, ов, век, Кажд, ни, имее, вои, еим, недо, ин, по, оения, ов, изоб, ажений, нован, коне, но, аз, по, обно, глаза, когда, ближении, дв, глаз, пе, ае, азли, помни, нки, оздаваем, за, комп, нологий, помо, имволов, ко, можно, мо, ол, неко, ого, ояния, Ра, овое, изоб, ажение, можно, ед, ави, как, ма, пик, елей, кажд, ко, имее, вой, ве, Соо, ве, венно, ед, авление, изоб, ажения, комп, пе, едае, ин, ма, ажая, яз, ком, ма, ема, ики, ме, одом, ди, ен, ования, деления, неп, вно, лемен, езки, Именно, ин, ипа, ед, авления, ового, изоб, ажения, ои, ека, его, недо, Так, для, изоб, ажения, пик, елей, бай, пик, ел, для, азме, айла, де, Кбай, Согла, кажд, за, жда, заг, зки, акого, изоб, ажения, более, оно, одно, оме, ого, бая, лемен, ная, едини, понимании, евни, еков, или, пик, ел, на, понимании, ин, ипе, неделима, невозможно, ма, аби, ования, ового, изоб, ажения, Поп, обовав, вели, ак, ка, инк, един, венное, можно, де, виде, наг, омождение, ве, квад, иков, иле, аннего, аванга, поня, ко, ого, можно, де, ол, агов, пя, помни, име, имволами, позволи, мони, До, оин, ямое, одолжение, его, недо, ков, Тол, нем, можно, пол, полн, до, каждом, пик, ел, изоб, ажения, измени, его, ко, или, на, енно, поменя, белое, ное, Именно, нован, много, ленн, кие, ил, позволя, дела, изоб, ажение, азм, или, наобо, более, езким, более, или, менее, кон, они, ова, Ра, ов, ма, пол, кани, овании, за, ва, изоб, ажения, ана, Ра, ов, кие, едак, го, аздо, пол, для, едак, ования, изоб, ажений, для, оздания, по, ом, довол, ми, жива, как, немаловажн, обенно, надо, ме, ак, кие, зе, понима, ов, изоб, ажения, без, подкл, аем, мод, лей, оме, ого, ак, бой, век, нок, без, кажений, можно, пе, еве, Об, ной, ил, закон, имее, Как, ин, ег, ма, ема, ике, являе, об, ной, нк, ией, ди, ен, овани, век, можно, каза, являе, ивоположно, ив, замкн, можно, опи, неко, набо, ма, ема, ки, ед, ави, виде, ог, аммного, кода, бое, изоб, ажение, можно, ед, ави, как, овок, пно, иг, замкн, линий, ок, енн, или, иной, ве, Именно, оздаем, изоб, ажения, помо, ка, анда, ки, именно, ин, ипе, по, оен, век, ма, ин, ип, оп, еделя, новн, до, оин, век, вие, необ, одимо, опи, ва, кажд, пик, ел, позволяе, зна, ел, мен, об, айлов, даже, довол, бол, азме, изоб, ажения, оме, ого, ма, ема, ики, изве, множении, нк, по, оянное, кон, ан, опи, ваемой, ивой, изменяе, пол, аем, век, ное, изоб, ажение, как, идеал, об, ек, для, ма, аби, ования, Изоб, ажение, вели, енное, де, де, гляде, игинала, Однако, пол, возможно, авля, азме, ами, яем, гибко, або, ве, вой, венн, ов, изоб, ажениям, По, ом, век, кие, едак, пол, для, оздания, изоб, ажений, по, лед, доводкой, ан, овкой, идания, неко, еали, но, ов, едак, азме, ения, Ин, не, обое, ме, еди, ог, амм, для, або, век, ной, икой, занима, ов, едак, по, леднее, емя, ало, ве, ак, ал, вязи, азви, ием, абли, илей, появив, ей, возможно, подг, жа, пол, зова, ел, кие, ма, ин, Одной, азновидно, век, ной, являе, ме, ная, ика, айла, вводи, одна, коо, дина, пол, ае, изоб, ажение, елая, ена, бол, коли, вом, ан, оо, ве, венно, бол, об, емом, лений, многооб, азии, ки, ма, для, ед, авления, изоб, ажений, пол, малое, коли, новн, ог, ани, елем, зде, пае, азме, айла, по, ом, бо, ма, подго, овке, изоб, ажения, для, оп, еделяе, оп, имал, оо, но, ением, дв, взаимои, кл, па, аме, азме, изоб, ажения, об, ема, айла, Однако, ео, ве, оя, но, изве, бол, ин, ед, авления, ин, ма, облада, или, иной, епен, изб, но, име, авляя, кон, пек, лек, ия, пол, ем, некой, емой, ок, ений, лов, оде, жания, ин, положен, нов, бол, ин, жа, ин, ма, ма, ки, айлов, пол, ем, Однако, одинаковом, ин, ипе, алго, его, еализа, аз, аба, ва, азн, по, ом, име, ве, венн, азли, межд, обой, Более, ого, ои, заб, ва, кажд, ма, имее, гие, обенно, по, ом, его, бо, лед, ва, ежде, его, полнение, нка, ма, взаимообмена, икой, аз, або, по, ледняя, ве, Пе, вона, ал, как, можно, поня, названия, ма, аз, аба, вал, для, пе, еда, кой, ин, ма, по, оке, данн, по, ом, ли, ал, ед, авляе, обой, по, ледова, ел, ганиза, оизвол, позволяе, пол, зова, миним, его, паковке, Для, комп, айлов, пол, алго, жа, или, как, его, наз, ва, жа, без, по, наиболее, ек, ивен, бол, одно, онн, обла, кими, ани, ами, как, кани, ование, изоб, ажения, ои, оди, го, изон, али, жа, де, более, ек, ивно, бол, го, изон, аля, аки, обла, Однако, по, обен, ани, неиндек, ованн, изоб, ажения, може, об, ажа, более, ве, ог, ани, енно, ма, позволяе, доби, плавного, пе, ода, одного, ве, гом, обенно, заме, пол, зовании, адиен, азм, вок, Можно, коне, пол, зова, ием, ди, зия, ек, зе, ни, пол, аем, гляди, ко, как, илиза, по, ом, егда, оп, авдан, об, кон, ек, ай, оме, ого, пол, зовании, ди, зии, вели, ивае, неодно, одно, изоб, ажения, веде, нижени, ек, ивно, комп, Об, ной, оной, ог, ани, енно, пали, може, жи, гибко, Изменяя, азме, абли, ледова, ел, коли, ве, ней, дизайне, пол, ае, вои, ек, ин, мен, для, ег, ли, овки, оо, но, ения, ка, изоб, ажения, азме, айла, Так, мен, изоб, ажении, азме, пик, елей, коли, ве, би, пик, ел, би, пик, ел, пол, аем, би, кономии, одной, обенно, введенной, по, ледн, ве, ма, являе, оздание, оз, обла, изоб, ажения, ва, ин, возможно, дизайне, По, оковая, ода, но, ел, мал, азме, его, айлов, возможно, комп, пол, зования, оз, обла, кад, делали, его, ек, ин, мен, для, оздания, анима, пол, зование, еле, ооб, азно, ежде, его, для, наз, ваем, пло, ко, ве, изоб, ажений, обозна, енн, ани, ами, пе, одов, межд, ве, ами, акже, мало, азме, изоб, ажений, ипа, кнопок, ев, ка, инок, Раз, або, ппой, пе, ог, видно, названия, под, гидой, Межд, на, одная, ганиза, анда, Вооб, ма, довол, никален, пол, алго, жа, ли, ий, именяем, ал, ки, ма, жа, по, ями, алго, анее, пол, зовал, елевидении, еме, елевизионной, ан, ля, США, нован, ог, ани, енно, елове, кого, ения, не, по, обно, глаза, заме, неко, кажения, во, ановленном, изоб, ажении, егодня, алго, являе, одним, ам, ек, ивн, ко, иен, жа, до, игае, однако, ен, об, аба, вае, изоб, ажения, мал, коли, вом, ве, езкими, ани, ами, Вооб, можно, назва, ивоположно, позволяе, об, ажа, би, пали, млн, ве, дае, возможно, об, ажа, адиен, ог, кой, но, може, име, оз, обла, Однако, ма, аи, ебе, одн, обенно, ко, нел, ва, пов, ном, анении, изоб, ажения, пов, зап, кае, алго, жа, венно, ением, ка, По, ом, аня, изоб, ажение, нем, лед, ол, по, окон, ел, ной, об, або, Оба, ов, ма, подде, жива, еми, кими, зе, ами, мол, ани, мог, об, або, ан, бол, ин, ки, едак, бо, межд, ма, ами, оп, еделяе, ежде, его, обенно, ями, конк, ной, ка, инки, дела, его, иногда, вае, возможно, ол, пе, имен, Однако, век, ма, об, ебя, внимание, дизайне, по, леднее, емя, ве, поп, ля, ма, аз, або, анн, мой, Обладая, акими, еим, вами, век, ма, как, ма, аби, емо, но, ел, небол, об, айла, аки, являе, ким, Ин, мен, для, ования, ог, амме, ближе, ов, едак, нежели, век, по, обно, оздава, анима, озв, ива, за, авля, еаги, ова, пе, еме, ение, по, обно, або, гипе, лками, дела, по, ожим, имедийн, ма, ка, дел, лемен, ай, за, авки, пол, новном, как, ин, ак, ивн, банне, неко, екламн, Такого, вида, банне, бол, бол, возможно, влия, пол, зова, елей, Се, нежели, кла, ки, полненн, Однако, го, аздо, ма, на, оди, именение, для, оздания, елой, ани, или, бол, кла, ким, име, мой, взгляд, являе, Ди, неев, кий, ай, Камнем, кновения, для, являе, нали, дополни, ел, ного, мод, для, его, мо, ко, аняе, бе, пла, ве, необ, одимо, заг, зки, Се, може, би, желание, ма, ива, за, авки, появление, оенного, мод, ве, Комм, ника, обе, ания, дела, аналоги, ное, може, вполне, двин, лиде, еди, ки, ма, для, не, кол, измени, амо, ед, авление, дизайне, али, заб, ме, об, ек, Для, оздания, Ин, не, нояб, года, ояла, езен, яз, модели, ования, ви, ал, ной, еал, но, По, ледняя, ве, позволяе, оздава, ложн, ви, ал, ми, зв, ков, ек, ами, Для, напи, ания, айлов, ого, ма, може, до, ого, ек, ового, едак, подобно, они, еб, дал, ней, компиля, акже, пе, иал, ог, амм, помога, виз, ализи, ова, ав, ома, изи, ова, оме, ого, неко, паке, подде, жива, ма, Для, мо, ви, ал, ми, необ, одим, дополни, ел, мод, вкл, енн, по, ледни, ве, воей, ивлека, ел, но, ми, пока, на, окого, именения, новн, недо, ками, явля, невозможно, аивания, аки, ми, ани, оо, ве, венно, пе, епле, ение, об, дизайном, ай, ли, нап, име, гой, неп, ия, ной, обенно, являе, довол, бол, коли, ли, ел, комп, для, ка, венного, енде, инга, виз, ализа, ме, ной, ен, Гово, ике, об, помина, как, ки, об, ек, Связано, ежде, его, недавнего, емени, ани, едполагала, ве, ог, ани, енная, возможно, авления, па, аме, ами, пе, ика, вводи, поня, аивания, ва, возможно, пол, зова, ол, анда, ог, амм, позволя, оздава, даже, имвол, пол, вме, моно, омн, ма, аби, ем, изоб, ажения, иде, обо, война, зе, Разная, еализа, подг, жаем, ожалени, позволяе, пол, зова, возможно, полной, ме, Коне, иведенн, зде, ждения, мог, ва, ве, океан, под, названием, ика, на, иная, ои, дом, необ, одимо, зна, кое, ки, пи, ма, мой, пе, ки, пи, де, ли, ним, ои, ел, ва, его, ай,




  • Оставить комментарий