«TeachPro™ WEB-дизайн Мультимедиа Технологии и Дистанционное Обучение МОСКВА 2006 Мультимедийный самоучитель на CD-ROM: TeachPro™ WEB-дизайн/Под ред. Катхановой Ю.Ф., Гринберг Г.С., Антонова Г., Соловьева И., Суховерхова ...»

Начнем знакомиться с растровой графикой. Надо сказать, что этот вид графики наиболее распространен и связанно это в первую очередь с особенностями восприятия человеком изображения. Свет, отражённый от поверхности предмета проецируется на сетчатку глаза, где он воспринимается миллионами светочувствительными клетками глаза. Происходит кодирование светового сигнала, он разбивается на множество частей, которые в свою очередь попадают в мозг, где и воспринимается как объёмный предмет. Тот же процесс напоминает и растровая графика при демонстрации на мониторе компьютера, только в обратном порядке. Растровая графика напоминает нам лист клетчатой бумаги или шахматную доску, на которой любая клетка закрашивается определенным цветом, образуя (в совокупности) рисунок.

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

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

Запомните две важные характеристики: размер и расположение пикселей — характеристики, которые фиксируются компьютером. Файл растровых изображений должен их сохранить, чтобы создать картинку.

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

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

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

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

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

Разработав всего один элемент орнамента, его можно много раз повторить (размножить) без дополнительной прорисовки, сэкономив много времени для другой работы. Особенно важно, что векторное изображение изначально позволяет выполнять точные геометрические построения, следовательно, чертежи и другую конструкторскую документацию К большому сожалению, векторный формат становится невыгодным при передаче изображений с большим количеством оттенков или множеством мелких элементов, например, фотографий. Ведь каждый мельчайший блик в этом случае будет представляться не совокупностью одноцветных точек, а сложнейшей математической формулой или множеством графических элементов (примитивов), каждый из которых, является формулой. Все это приводит к большому файлу. Файлы растровых изображений имеют гораздо больший размер, чем векторные, так как в памяти компьютера каждый из объектов этой графики сохраняется в виде математических уравнений. В то же время как параметры каждой точки в файле растровой графики задаются индивидуально. Вот откуда такие огромные размеры файлов в этой графике.

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

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

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

Эти свойства трехмерной графики позволяют создавать и кинопродукцию профессионального качества. Интересно, что в процессе разработки трехмерной графики и ее анимации человек выступает в качестве режиссера и оператора, поскольку ему приходится придумывать сюжет, содержание и композицию каждого кадра и распределять движение объекта или объектов сцены не только в пространстве, но и во времени. Что же требует трехмерная графика от человека? Конечно же, умение моделировать различные формы и конструкции при помощи различных программных средств, а также знания ортогонального (прямоугольного) и центрального проецирования.

Последняя — называется перспективой.

И последний вид компьютерной графики это фрактальное изображение.

Фрактальная графика является на сегодняшний день одним из самых быстро развивающихся перспективных видов компьютерной графики.

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

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

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

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

Именно из совокупности пикселов и состоит растровое изображение.

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

Еще — цвет. Например, изображение описывается конкретным расположением и цветом каждой точки сетки, что создает изображение примерно также как в мозаике.

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

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

Они кодируются 24 bit на точку — это примерно 16 500 000 цветов. Этот режим называют «Настоящий цвет». Кодирование в 16 bit на точку позволяет различать 65 536 оттенков цвета. Этот режим получил название «Качественный цвет». Кодирование в 8 bit на точку позволяет различить всего 256 оттенков цвета. Этот режим известен как «Фиксированные цвета». Эти понятия непосредственно связаны со второй группой понятий «Цветовые форматы», о которых мы будем говорить на следующих уроках.

При редактировании растровой графики, качество ее представления может измениться, ведь меняются сами пиксели. В частности, изменение размеров растровой графики может привести к «разлохмачиванию» краев изображения, поскольку пиксели будут перераспределяться на сетке. К сожалению, масштабирование таких картинок в любую сторону также обычно ухудшает качество. При уменьшении количества точек теряются мелкие детали и деформируются надписи (правда, это может быть не так заметно при уменьшении визуальных размеров самой картинки — т.е. сохранении разрешения).

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

Помимо естественного вида растровые изображения имеют другие преимущества. Устройства вывода, такие как принтеры, для создания изображений используют наборы точек, поэтому растровые изображения могут быть очень легко распечатаны. Таким образом, растровое представление обычно используют при сканировании и обработке графических изображений с большим количеством деталей и оттенков, например, фотографий, при создании изображений для использования в других программах, в частности для передачи другим пользователям по сети Internet, при создании различных художественных эффектов, которые возможны благодаря специальным программным фильтрам. Самые известные программы растровой графики — Adobe Photoshop и Corel PHOTO-PAINT. А теперь мы зададим вопрос себе. В каких случаях лучше использовать растровую графику?

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

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

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

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

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

BMP, PCX, TIFF, CPT, PSD, GIF и JPEG.

Форматы СРТ и PSD используют для сохранения многослойных изображений, а форматы GIF и JPEG применяют главным образом при работе в Internet, (они обеспечивают приемлемое качество изображений при небольших размерах файлов). В зависимости от того, какую обработку изображения планируется выполнить, может возникнуть потребность представления его в том или ином виде (растровом или векторном).

Для преобразования растровых изображений в векторные и наоборот используются соответствующие функции программ векторной графики, а также специализированные программы трассировки Adobe Streamline 4.0, CorelTRACE 9. Операция трассировки заключается в формировании в автоматическом или ручном режиме векторного изображения, являющегося копией исходного растрового. Создаваемое изображение состоит из отдельных векторных объектов, раскрашенных определенными цветами и расположенных определенным образом друг относительно друга. Операция преобразования векторного изображения в растровое называется растрированием.

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

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

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

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

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

Таким образом, векторная графика в основном «живет» созданием новых объектов, широко используется в дизайнерских проектах, в то время как растровая графика изначально создавалась и существует для обработки фотографий, это видно и из самих названий программ — Adobe Photoshop, Corel PHOTO-PAINT. Следующая группа понятий раскрывает содержание «векторной компьютерной графики».

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

Для её математического представления используются: точка, прямая, отрезок прямой, парабола, отрезок параболы, функция y = x3, кривая второго порядка, кривая третьего порядка, кривая Безье. Соподчинёнными для понятия линия являются: точка, конец кривой линии, управляющая линия касательная к кривой, изгиб кривой, маркер управляющей линии. Также, как и линия, основным базовым понятием для векторной графики является объект.

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

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

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

Как следствие, еще одно преимущество — качественное масштабирование в любую сторону. Увеличение или уменьшение объектов производится увеличением или уменьшением соответствующих коэффициентов в математических формулах. Еще один плюс — векторная графика не зависит от разрешения, т.е. может быть показана в разнообразных выходных устройствах с различным разрешением без потери качества. Но, к сожалению, векторный формат становится невыгодным при передаче изображений с большим количеством оттенков или мелких деталей (например, фотографий). Ведь каждый мельчайший блик в этом случае будет представляться не совокупностью одноцветных точек, а сложнейшей математической формулой или совокупностью графических примитивов, каждый из которых, является формулой.

Это приводит к утяжелению файла. Теперь поговорим о проблеме размеры файлов. Файлы векторных изображений имеют гораздо меньший размер, чем растровых, так как в памяти компьютера каждый из объектов этой графики сохраняется в виде математических уравнений, в то время как параметры каждой точки (координаты, интенсивность, цвет) описываются в файле растровой графики индивидуально, отсюда — такие огромные размеры файлов. Наиболее популярными графическими программами, предназначенными для обработки векторных изображении, являются Adobe Illustrator и Corel DRAW. Чем же интересно векторное изображение, используемое в компьютерной графике?

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

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

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

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

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

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

Типичным примером такой системы является пакет программ AutoCAD. К средствам работы с векторной графикой, которые могут быть использованы для поддержки графических дисциплин, относят такие графические редакторы как, Corel DRAW, Macromedia Freehand, Adobe Illustrator, AutoCAD, ArhiCAD. На следующем уроке мы поговорим о трёхмерной графике так как она вобрала в себя многое от векторной графики и от растровой. А этот урок закончен.

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

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

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

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

Трёхмерная компьютерная графика, как и векторная, является объектноориентированной, что позволяет изменять как все элементы трёхмерной сцены, так и каждый объект в отдельности. Этот вид компьютерной графики обладает большими возможностями для поддержки технического черчения. С помощью графических редакторов трёхмерной компьютерной графики, например Autodesk 3D Studio, можно выполнять наглядные изображения деталей и изделий машиностроения, а также выполнять макетирование зданий и архитектурных объектов, изучаемых в соответствующем разделе архитектурно-строительного черчения. Наряду с этим может быть осуществлена графическая поддержка таких разделов начертательной геометрии как, перспектива, аксонометрические и ортогональные проекции, т.к. принципы построения изображений в трёхмерной компьютерной графике частично заимствованы из них. Для декоративно-прикладного искусства трёхмерная компьютерная графика предоставляет возможность макетирования будущих изделий с передачей фактуры и текстуры материалов, из которых эти изделия будут выполнены.

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

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

К средствам работы с трёхмерной графикой, относят такой графический редактор как, 3D Studio MAX. Это один из самых известных трёхмерных редакторов, он часто используется при создании фильмов. Разработка программы 3D Studio МАХ была начата в 1993 году. Версия 3D Studio МАХ 1.0 вышла в 1995 году на платформе Windows NT.

Уже тогда некоторые эксперты осторожно высказывали мнение, что МАХ может конкурировать с другими пакетами трехмерной графики. Осенью года discreet выпускает Зd max 6. Новые инструменты анимации частиц в связке с модулями позволяют создавать фотореалистичные атмосферные эффекты. Появились встроенная поддержка капельно-сетчатых объектов, полноценная сетевая визуализация, импорт данных из САD-приложений, новые возможности для моделирования. Но кроме 3D Studio MAX есть и другие не менее популярные программы трёхмерного моделирования, например Maya. Maya — эта программа аналог 3D Studio MAX, но она предназначена в первую очередь для анимации и, например, для передачи мимики на лице трёхмерного актёра, так же в Maya удобнее рисовать. 3D Studio MAX направлен в первую очередь на качественную визуализацию предметов, ещё в нём можно выполнять примитивные чертежи.

Вообще для черчения существуют свои программы трёхмерного моделирования, самые известные из них AutoCAD, ArhiCAD. AutoCAD предназначен в первую очередь для машиностроительного черчения, а ArhiCAD для архитектурного моделирования. Что же требует трехмерная графика от человека?

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

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

Именно это условие дает возможность описать с помощью получаемых плоскостей «пространственную сетку», которая представляет собой модель объекта. Затем объекту дополнительно присваиваются характеристики поверхности объекта — материал. В свою очередь, материал характеризует качество поверхности, например, полированная, шероховатая, блестящая и др.

Описывается и его текстура (камень, ткань, стекло и др.). Задаются и оптические свойства, например, прозрачность, отражение или преломление световых лучей и т.д. Наряду с этим, трехмерному объекту можно задать условия освещения и выбрать точку зрения (камеру) для получения наиболее интересного наглядного изображения. Постановка, состоящая из трехмерного объекта, условий освещения и выбранной точки зрения называется «трехмерной сценой». А вот для описания трехмерного пространства и объекта, находящегося внутри его, используется хорошо уже знакомый Вам координатный метод.

Существуют различные методы моделирования трехмерных объектов.

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

Последней из рассматриваемых видов компьютерной графики — это фрактальная графика. Фрактальная графика является на сегодняшний день одним из самых быстро развивающихся перспективных видов компьютерной графики. Математической основой фрактальной графики является фрактальная геометрия. Здесь в основу метода построения изображений положен принцип наследования от, так называемых, «родителей»

геометрических свойств объектов-наследников.

Понятия фрактал, фрактальная геометрия и фрактальная графика, появившиеся в конце 70-х, сегодня прочно вошли в обиход математиков и компьютерных художников. Слово фрактал образовано от латинского fractus и в переводе означает «состоящий из фрагментов». Оно было предложено математиком Бенуа Мандель-бротом в 1975 году для обозначения нерегулярных, но самоподобных структур, которыми он занимался.

Фракталом называется структура, состоящая из частей, которые в каком-то смысле подобны целому. Одним из основных свойств фракталов является самоподобие. Объект называют самоподобным, когда увеличенные части объекта походят на сам объект и друг на друга. Перефразируя это определение, можно сказать, что в простейшем случае небольшая часть фрактала содержит информацию обо всем фрактале. В центре фрактальной фигуры находится её простейший элемент — равносторонний треугольник, который получил название «фрактальный». Затем, на среднем отрезке сторон строятся равносторонние треугольники со стороной, равной (1/3a) от стороны исходного фрактального треугольника. В свою очередь, на средних отрезках сторон полученных треугольников, являющихся объектами-наследниками первого поколения, выстраиваются треугольники-наследники второго поколения со стороной (1/9а) от стороны исходного треугольника.

Таким образом, мелкие элементы фрактального объекта повторяют свойства всего объекта. Полученный объект носит название «фрактальной фигуры».

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

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

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

Итак, базовым понятием для фрактальной компьютерной графики являются «Фрактальный треугольник». Затем идет «Фрактальная фигура», «Фрактальный объект»; «Фрактальная прямая»; «Фрактальная композиция»;

«Объект-родитель» и «Объект наследник». Следует обратить Ваше внимание на то, что фрактальная компьютерная графика, как вид компьютерной графики двадцать первого века получила широкое распространение не так давно.

Её возможности трудно переоценить. Фрактальная компьютерная графика позволяет создавать абстрактные композиции, где можно реализовать такие композиционные приёмы как, горизонтали и вертикали, диагональные направления, симметрию и асимметрию и др. Сегодня немногие компьютерщики в нашей стране и за рубежом знают фрактальную графику. С чем можно сравнить фрактальное изображение?

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

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

Создатель фракталов — это художник, скульптор, фотограф, изобретатель и ученый в одном лице. Вы сами задаете форму рисунка математической формулой, исследуете сходимость процесса, варьируя его параметры, выбираете вид изображения и палитру цветов, то есть творите рисунок «с нуля». В этом одно из отличий фрактальных графических редакторов (и в частности — Painter) от прочих графических программ. Например, в Adobe Photoshop изображение, как правило, «с нуля» не создается, а только обрабатывается. Другой самобытной особенностью фрактального графического редактора Painter (как и прочих фрактальных программ, например Art Dabbler) является то, что реальный художник, работающий без компьютера, никогда не достигнет с помощью кисти, карандаша и пера тех возможностей, которые заложены в Painter программистами.

зеленый, Blue — синий), CMYK (Cyan — голубой, Magenta — пурпурный, Yellow —желтый, Black — черный) и HSB (Hue — оттенок, Saturation — насыщенность, Brightness — яркость).

Большинство цветовых моделей описывают цвета, входящие в цветовое пространство соответствующего устройства. В частности, модель RGB используется при воспроизведении цветов на экране монитора, сканировании, а также печати на цветном струйном принтере. Модель CMYK применяют в полиграфии. Давайте поговорим про цветовую модель RGB.

Глаз человека воспринимает длины волн в диапазоне от 400 до 700 нм.

Длину волны от 430 нм до 470 нм человеческий глаз воспринимает как синий цвет, в диапазоне от 500 до 540 нм, как зеленый цвет и в диапазоне от до700 нм, как красный цвет. В компьютерной промышленности эти цвета называются тремя первичными цветами. Для их обозначения и используется цветовая модель RGB.

Все цвета, встречающиеся в природе, можно создать, смешивая свет трех этих длин волн, варьируя их интенсивности. Смесь, состоящая из 100% каждого цвета, дает белый свет. Смесь 0% от каждого цвета дает отсутствие света или черный свет. Искусство воспроизведения цвета путем сложения в различных пропорциях трех первичных RGB цветов называется аддитивным смешением.

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

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

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

Краски или красители создают цвет субтрактивным методом: когда краситель или пигмент поглощает красный и отражает зеленый и синий свет, мы видим голубой. Когда он поглощает зеленый и отражает синий и красный, мы видим пурпурный. Голубой, пурпурный и желтый являются тремя базовыми цветами, используемыми в субтрактивном смешении. Цвета в таких светящихся устройствах, как телевизоры и компьютерные мониторы формируются путем смешивания трех первичных цветов RGB, но такие средства воспроизведения цвета, как печатные издания и картины работают на поглощении одних длин волн и отражение других три вторичных цвета CMY.

Поскольку реальные чернила CMY не создают чисто черного цвета он получается темно коричневым, а также при создании черного цвета с помощью модели CMY тратится в три раза больше красок, то к этим трем цветам добавляется отдельно черный цвет (К) и модель называется CMYK.

Диапазон представления цветов CMYK хуже, чем в RGB, поэтому при преобразовании данных из RGB в CMYK цвета получаются более темными и приглушенными.

Для расширения цветового охвата применяют цветоделение на шесть красок. Модель HexaChom в ней кроме цветов CMYK используются дополнительные -Green и Orange (зеленый и оранжевый). В современной цифровой, широкоформатной и офсетной печати используется система цветов.

Цветовые модели CIE. Эти цветовые модели были разработаны Международной комиссией по освещению. Они основаны на реакции человеческого глаза на RGB и спроектированы так, чтобы точно представлять восприятие цвета человеком. Эти модели используются для того, чтобы определять так называемые аппаратно независимые цвета, которые могут правильно воспроизводиться устройствами любого типа: сканерами, мониторами и принтерами. Эти модели широко применяются, потому что их легко использовать на компьютерах и они описывают широкий диапазон цветов.

Системы цветов HSB и HSL Системы цветов RGB и CMYK базируются на ограничениях, накладываемых аппаратным обеспечением (мониторами компьютеров в случае RGB и типографскими красками в случае CMYK). Более интуитивным способом описания цвета является представление его в виде тона, насыщенности и яркости — система HSB.

Она известна также как система HSL (тон, насыщенность, освещенность).

Тон представляет собой конкретный оттенок цвета, отличный от других:

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

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

Яркость (или освещенность) цвета показывает величину черного оттенка, добавленного к цвету, что делает фотографию с натюрмортом более темной или уменьшая что делает ее более светлой. Система HSB хорошо согласуется с моделью восприятия цвета человеком. Тон является эквивалентом длины волны света, насыщенность — интенсивности волны, а яркость — общего количества света. Система HSB имеет перед другими системами важное преимущество: она больше соответствует природе цвета. Недостатком этой системы является то, что для работы на мониторах компьютеров ее необходимо преобразовывать в систему RGB, а для четырехцветной печати — в систему CMYK.

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

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

Вспомним Adobe Photoshop. На данном уроке мы поговорим об особенностях такой программы как Adobe Photoshop. Сразу надо сказать, что программа Adobe Photoshop является электронным редактором и программой обработки растрового изображения, в частности фотографий переведённых в электронный (растровый) вид, а не программой для рисования, хотя и обладает большими возможностями в данной области.

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

В программный пакет такой фирмы как Corel входят следующие редакторы:

графический редактор векторной графики Corel Draw, редактор растровой графики Corel PHOTO-PAINT, программа конвертирования растровых и ображений в векторные Corel TRACE и другие. В программный пакет Adobe входят такие программы как: Adobe Photoshop, программа растровой графики, программа векторной графики Adobe Illustrator, Adobe Imaeg Ready программа по подготовки изображения к печати и другие.

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

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

Adobe Photoshop стал индустриальным стандартом. В последнее время без него не обходится ни одно издательство. Были также «переписаны» для PC известные программы вёрстки для настольных издательских систем «Адоб Пайджмэйкер» (AdobePagemaker) и «Кварк Экспресс» (QuarkXPress). Так почемуже программы Adobe и в частности Adobe Photoshop? Сами создатели называют Photoshop — «фотокамерой фантазии», и это действительно так.

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

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

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

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

Ну и, конечно же, надо упомянуть о Image Ready, который теперь встроен в Photoshop. Это сделано из расчетов на то, что в данный момент очень много графики создается под Web. Это программа для Веб-дизайна, ключевой "игрок" среди профессиональных инструментов для создания Web-графики.

Изучение курса Веб-дизайн невозможно без знания этой программы, это доказало проводимое исследование среди студентов ХГФ. Большая часть того, что принято называть дизайном для Веб-страниц делается именно в этой программе, она также является связующим звеном между остальными программами компьютерной графики и анимации. Ниже перечислен ряд возможностей программы Adobe Photoshop, которые применяются в Вебдизайне.

1. Создание растровой графики, которая подходит для оптимизации Webизображений.

2. Web-безопасная палитра, полезная при оптимизации графики для Web (появилась в версия 4.0).

3. Использование слоев — мощного средства работы с изображениями, позволяющее эффективно компоновать элементы Веб-страницы.

4. Функция экспорта GIF89, позволяющая создавать прозрачные и чередующиеся GIF-изображения.

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

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

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

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

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

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

В последней версии этой популярной программы по обработке графики Photoshop CS добавлено много новых возможностей. Как известно Photoshop всегда работал только с растровой графикой, видимо в компании Adobe немного подумали и решили составить конкуренцию продуктам компании Corel. Так что, теперь для работы с векторной графикой Вам не будут нужны дополнительные программные продукты. Например, появилась возможность работы с векторной графикой, имеется встроенный Image Ready, увеличены возможности при работе со слоями.

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

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

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

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

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

Это даст возможность зрителям воссоздать целостную картину происходящего в данный момент события. Всё это касается в основном людей, которые связаны с фотографиями, а как быть Web-дизайнерам? Дизайнеры по своей специфике для работы используют уже готовые фотографии. Для этого существуют различные источники — это электронный клипарт, компакт диски с множеством картинок, интернет — где просто море всяческих иллюстраций, ну и просто глянцевые журналы.

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

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

Это делается, для того чтобы сэкономить время и средства на изготовление художественных продуктов — например Web-страниц в Интернете или рекламы.

Но вернёмся к Web-дизайнеру и его способам работы с фотографией. Как уже было сказано, художник-фотограф применяет кадрирование с самого начала от поиска композиции в фотообъективе до печати фотографии.

Фотограф является человеком, который получае6т изображения. А что можно сказать про дизайнера, может ли он сам делать новые фотографии? Конечно, да и это относится не только к работе с фотоаппаратом, но и к работе с компьютером. Каждый художник по своему обрабатывает изображения: задаёт индивидуальные размеры, придаёт свой тон, применяет фильтры и просто из разных частей фотографий создаёт в результате новое изображение. Теперь давайте поговорим собственно о самом кадрировании, о том как это применяется компьютерной графике. В большинстве случаев соотношение сторон исходного файла не пропорционально соотношению сторон требуемого отпечатка. Это связано с тем, что почти у всех цифровых фотоаппаратов соотношение сторон кадра 4:3, а многие стандартные форматы рассчитаны на печать с пленки, где соотношение сторон чаще всего 3:2.

Так же этот вопрос возникает при печати фотографий с фотопленок, сделанных фотоаппаратами с нестандартным соотношением сторон кадра (например, 6x7 для широкой пленки). В результате при печати таких фотографий встает вопрос — либо уместить изображение на отпечатке целиком за счет возникновения белых полей, либо напечатать без белых полей, но за счет потери информации. У Web-дизайнеров эта проблема решается гораздо проще. С помощью программного обеспечения, в частности редактора растровой графики Adobe Photoshop можно просто вырезать из первоначального изображения необходимые части и в бедующем с ними работать.

Как это делается. Да очень просто, берётся инструмент прямоугольная область выделения и выделяется необходимая область фотографии, затем копируется в новый файл. Так же можно просто обрезать края имеющейся фотографии и пересохранить файл под другим именем и т. д. Подробную техническую сторону мы опустим, лишь скажем, что способов работы в программах очень много и каждый дизайнер работает за компьютером посвоему. Всё это касается изготовления самого изображения, но во многих случаях после кадрирование следует предпечатная подготовка, теперь давайте поговорим о ней.

Подготовка издания к печати включает в себя ряд операций, объединяемых одним термином: допечатная подготовка. Иногда говорят «предпечатная подготовка», «форпресс», но, как ни назови, это комплекс действий по подготовке рукописи (текста), включающий в себя набор, корректуру, правку, дизайн, верстку и подготовку иллюстраций. А также цветоделение, фотовывод. Заканчивается допечатная подготовка передачей подготовленных к печати полуфабрикатов в типографию или заказчику, который потом ищет цветокорректирование.

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

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

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

И всё это нужно для качественной печати имеющихся изображений, что бы рассчитать характеристики красок. Цветовые характеристики печатной краски — это три основных показателя: цветовой тон, насыщенность и светлота краски. В производственных условиях их контролируют денситометром. Цветовые характеристики печатных красок на оттиске зависят от вида пигмента (красочного лака), его количества в краске, степени перетира краски, связующего вещества, толщины красочного слоя на оттиске, вида запечатываемой поверхности, а также от характеристик других печатных красок (например, их совместимости при наложении) и др. Вот какой долгий путь надо пройти изображению прежде чем попасть на станицы журнала или на Web-сайт.

В этом уроке мы в самых общих чертах рассмотрим техническую сторону вопроса: познакомимся с основными концепциями Интернета, без понимания которых невозможно приступать к изучению веб-дизайна. Интернет — это компьютерная сеть. Назначение любой компьютерной сети — дать компьютерам возможность "общаться", то есть обмениваться друг с дружкой информацией. Когда такой обмен происходит нечасто (допустим, Вы выполнили какую-то работу и отвезли её показать заказчику), Вы можете воспользоваться внешним носителем: дискетой, компакт-диском и т.п.

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

Например, вы сидите в редакции, обрабатываете изображения и передаёте их верстальщику. Если этот верстальщик сидит в соседней комнате, то можно к нему "сбегать с дискеткой". Но если он находится в другом здании, а то и в другом городе, то нужно уже что-то другое. В прежние времена такой обмен информацией с помощью внешних носителей называли в шутку "Floppy-net", от английского названия дискеты: Floppy Disk. Должен сказать, что "Floppynet" был сомнительным удовольствием.

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

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

Небольшие группы компьютеров, расположенных недалеко друг от друга, объединяют в так называемые локальные сети. Например, может существовать локальная сеть предприятия или института. Внутри такой сети узлы могут "общаться" между собой, но получить к ней доступ "извне", с компьютера, не подключенного к этой сети, невозможно. Локальные сети могут включать в себя довольно много узлов, но всё же имеется ряд ограничений, не позволяющих построить "одну большую" локальную сеть на весь мир (поэтому они и называются локальными). Тем не менее, существует способ соединения нескольких локальных сетей между собой. Получается "сеть сетей". Тогда компьютеры из одной сети смогут через это соединение "общаться" с компьютерами другой сети.

Например, из офиса Вы сможет получить доступ к сети магазина или склада. "Сети сетей" также можно объединить между собой, а их объединения — между собой, и так далее, пока мы не получим глобальную сеть, объединяющую все компьютеры, в которой любой узел может найти "дорожку" к любому другому узлу. Тогда студент из Новосибирска сможет соединиться с библиотекой Конгресса США, а хакер из Сургута — с сервером Пентагона, как если бы все они находились по соседству. Такой глобальной "сетью всех сетей" и является Интернет. Благодаря Интернету единое информационное пространство расширилось до масштабов планеты.

Теперь перейдём к вопросам более практическим. Прежде всего, разберёмся, каким же образом компьютерам удается не заблудиться в этом "лесу" информационного пространства и отыскивать те самые "дорожки" к нужным узлам? Очевидно, что каждый узел сети должен иметь некий "адрес", по которому его можно безошибочно найти. Кроме того, нужна карта, позволяющая "добраться" по этому адресу. Например, в телефонной сети каждый абонент имеет принадлежащий только ему номер, а телефонная станция соединяет один номер с другим.

В Интернете происходит примерно то же самое. Каждый компьютер, подключенный к глобальной сети, получает уникальный для всей сети адрес, называемый IP-адресом. IP-адрес состоит из четырех чисел в диапазоне от до 255, что теоретически позволяет закодировать чуть больше 4 миллиардов адресов. Что касается карты, то в Интернете скорее действует принцип "язык до Киева доведёт": там, где более мелкие сети соединяются в более крупные, установлены специальные устройства. Эти устройства, хотя и не содержат полной "карты" Интернета, то есть не могут знать точного маршрута до нужного вам адреса, но, проанализировав IP-адрес, они подскажут, в каком направлении лучше двигаться. Там вы встретите другое такое устройство, которое также укажет вам дальнейший путь в пределах свое "зоны видимости". В конце концов, вы доберетесь до ближайшего к вашему адресату устройства, которое уже "подведёт вас за ручку" к нужному узлу.

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

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

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

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

Одной из наиболее распространенных и знакомых, наверное, Вам систем Интернета является Worldwide Web (сокращенно WWW). "Всемирная паутина" или просто Веб, как её называют — это те самые, сайты, которые вы посещаете, выходя в Интернет, и создание которых называется "Вебдизайном", чем мы с Вами и будем заниматься.

Иногда некоторые люди ошибочно отождествляют Интернет и WWW, хотя это абсолютно неправильно. Веб — лишь одна из систем Интернета. Кроме неё существует электронная почта, пересылка файлов и множество других систем. WWW изобрел человек по имени Тим Бёрнерс-Ли, ныне член Английского Королевского научного общества, и даже обладатель звания рыцаря Ордена Британской Империи.

В 1989 году Бернерс-Ли работал в Европейской лаборатории элементарных частиц, что в Женеве. Бернерс-Ли задался целью разработать систему для объединения разрозненных работ по физическим исследованиям, систему для связывания частей информации. Он её успешно разработал, и эта система включала все базовые элементы современного веба.

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

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

"Браузерами" называют веб-клиенты, т.е. программы для просмотра сайтов (от английского слова browse — пролистать, проглядеть). Браузер является "посредником" между пользователем и сервером: когда вы пишите в адресной строке браузера адрес некоего сайта, браузер отправляет запрос серверу, на котором хранится этот сайт, получает от него информацию, переводит её с языка HTML на "человеческий" и показывает Вам в виде запрошенного Вами сайта.

История развития браузеров — это история ожесточенной борьбы, взлётов и падений. Она, поистине, заслуживает отдельной главы. Исторически сложилось так, что на сегодня мы имеем одним из наиболее распространённых браузеров встроенную в операционную систему Windows программу Internet Explorer.

В 1991 году проект "WWW" влился в тогда ещё только американскую сеть Интернет, и с тех пор, как говорится, началось… Система очень быстро набирала популярность благодаря таким своим качествам, как простота и универсальность: по задумке Бернерса-Ли размещенные в www документы должны были открываться на любом компьютере, вне зависимости от операционной системы и возможностей вывода. Именно универсальность является одним из главных свойств WWW.

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

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

Как вы помните, адресом в сети Интернет является IP-адрес.

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

Вы, наверное, имеете некоторый опыт работы с Сетью и адрес сайта для Вас — это не циферки, а нечто вроде www.что-то такое.ru. Как же подобные привычные нам веб-адреса соотносятся с реальными IP-адресами серверов?

Для этого была введена система так называемых доменных имён, поставившая в соответствие IP-адресам "человеческие" слова, как правило, отражающие содержание сайта или его название. Система называется DNS (Domain Name System). Благодаря этой системе вы можете вместо 213.180.216.200 набрать адрес www.yandex.ru и попасть на один и тот же сайт. Точно так же в мобильном телефоне вам достаточно выбрать имя того, кому вы хотите позвонить, а телефонный номер будет взят из адресной книжки автоматически.

Разница в том, что в Интернете такая "адресная книжка" расположена вне вашего компьютера, а распределена по специальным DNS-серверам; она едина для всех, и любой человек, набравший www.yandex.ru, попадет на сайт поисковой системы Яндекс, а не, допустим, Рамблер.

Итак, с помощью доменного имени (ну, или с помощью IP-адреса, если вы питаете слабость к цифрам) мы можем обратиться к некоторому сайту "всемирной паутины". Что же происходит дальше? Как этот сайт показывается нам? Сайт состоит из так называемых страниц, и браузер показывает нам его постранично, т.е. в один момент времени мы видим на экране одну страницу сайта. Таким образом, кроме доменного имени браузер должен "знать" ещё и адрес интересующей нас страницы. С точки зрения хранения на сервере, страницы — это просто файлы, и адресом страницы является имя файла. От доменного имени оно отделяется слешом — символом косой черты "/".

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

Кроме этого URL может содержать ещё некоторые элементы, которыми мы не будем сейчас забивать себе голову.

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

Веб-Сайт — это совокупность связанных друг с другом "страниц", объединенных по какому-то признаку: по тематике содержащейся на них информации, по автору или по какому-либо другому. В конце концов, просто по объединению под одним доменным именем. Однако аналогия с книгой уместна лишь отчасти.

Во-первых, в отличие от книги, сайт, как правило, делится на страницы не по объёму размещаемой на них информации, а по содержанию. Название "страница" достаточно условно. Это, прежде всего, некая законченная порция информации. Страница может состоять из двух строчек, а может вмещать текст, объёмом с хороший том. Поэтому и листают страницы сайта обычно не последовательно, как в книге, а сразу переходят к странице, содержащей нужную информацию.

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

Родоначальником этой идеи является Теодор Нельсон, предлагавший создать "документарную вселенную", связав все тексты, произведенные человечеством, перекрёстными ссылками. Такую совокупность связанных текстов Нельсон назвал "гипертекстом".

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

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

И когда пользователь просматривал один из документов, он мог тут же вызвать связанный. Классическое определение гипертекста, которое дал Нельсон в 1987 г., — это "форма письма, которое ветвится или осуществляется по запросу". Иначе говоря, это "нелинейное письмо", которое "больше чем текст", т.е. сверх-текст, hypertext. Более формальное определение гипертекста звучит так: гипертекст — это представление текстовой информации как сети, в которой читатели получают свободу перемещаться нелинейным образом.

Переход от одного фрагмента гипертекста к другому осуществляется гипертекста и гиперссылок и заложил Тим Бернерс-Ли в основу WWW.

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

Язык для разметки гипертекста был назван языком гипертекстовой разметки или hypertext markup language, сокращенно HTML. На этом языке и пишутся веб-страницы. Вы можете возразить: мы, мол, учимся веб-дизайну, а не программированию. Дизайнер должен картинки рисовать, а не программы писать.

Ну, во-первых, HTML — это не язык программирования, а язык разметки, т.е. основу его составляет обычный человеческий текст, дополненный специальными знаками. И для его освоения вовсе не нужно быть программистом.

Во-вторых, веб-дизайн далеко не ограничивается рисованием картинок. Веб дизайн — это не столько оформление информации, сколько "дизайн", так сказать, самой этой информации: её структурирование, выделение этих самых законченных фрагментов, установка между ними связей и т.д..

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

Существуют специальные программы — визуальные HTML-редакторы, которые по создаваемому нами макету сами формируют необходимый HTMLкод, а работа в таких программах — не намного сложнее работы в том же Ворде. Тем не менее, должен оговориться: поскольку в любом случае результатом деятельности веб-дизайнера является документ на языке HTML, в профессиональной работе обойтись без его знания затруднительно. Изучению HTML'я посвящена соответствующая глава, а здесь мы сделаем первые шаги в веб-дизайне с помощью одного из HTML-редакторов.

Свойства документа. На данном уроке мы поговорим о том из чего состоит Веб-сайт. И первое понятие на котором стоит остановиться — это Вебстраница.

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

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

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

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

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

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

Обычно роль исходного кода для веб страниц играют языки гипертекстовой разметки. Самый популярный и основной язык это HTML, который является простым средством разметки, предназначенным для создания гипертекстовых документов. Кроме HTML существуют много других языков как модификаций, так и независимых. Немного о браузерах. Браузер — это программа просмотра Веб-страничек во всемирной компьютерной сети Интернет. Иначе говоря, браузер интерпретирует информацию, составляющею веб-сайт, и отражает ее на экране пользователя.

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

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

В качестве языка, или протокола, в Веб-транзакциях используется Hypertext Transfer Protocol, или HTTP. На удаленных машинах, содержащих необходимые документы, работают HTTP-серверы, которые ожидают запросов браузеров и по получении запроса выдают браузеру затребованные документы. В реальности браузеры являются НТТР-клиентами.

Существует более десятка различных браузеров выпущенных разными разработчиками и имеющие различные возможности. Основными веб браузерами используемыми около 90% пользователей Интернет являются MS Internet Explorer и Netscape Navigator.

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

Особенности изображений для веб. При всем многообразии графических форматов для представления изображений в Веб используется малое их количество. Основным ограничителем здесь выступает размер файла. А потому выбор формата при подготовке изображения для Веб определяется оптимальным соотношением двух взаимоисключающих параметров: размеров изображения и объема файла.

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

Однако при одинаковом принципе алгоритмы его реализации разрабатываются разными людьми, а потому имеют весьма существенные различия между собой. Более того, не стоит забывать, что каждый формат имеет и другие особенности, поэтому при его выборе следует учитывать прежде всего исполнение рисунка. В мире Интернет безраздельно господствую два графических формата: GIF и JPEG. Причем сферы применения каждого четко определены: GIF-картинки, как правило, применяются при оформлении страницы как элементы навигации и фона, а JPEG — для "высококачественного" репродуцирования.

Сейчас продвигается новый формат для Веб-графики под названием PNG, но он пока еще мало распространен, и не все браузеры его понимают, поэтому с этим форматом пока разбираться не будем. JPEG. JPEG (Joint Photographic Experts Group). Разработан группой экспертов по фотографии (что видно из названия) под эгидой ISO (Международная организация по стандартам).

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

Этот алгоритм ранее использовался на телевидении в схеме телевизионной трансляции США (NTSC). Основан он на все той же ограниченности человеческого зрения, неспособности глаза не замечать некоторые искажения в восстановленном изображении. На сегодня этот алгоритм является одним из самых эффективных (коэффициент сжатия достигает 1:100), однако он не очень хорошо обрабатывает изображения с малым количеством цветов и резкими границами.

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

Разновидность progressive JPEG позволяет сохранять изображения с выводом за указанное количество шагов (от 3 до 5 в Photoshop'e) — сначала с маленьким разрешением (плохим качеством), на следующих этапах первичное изображение перерисовывается все более качественной картинкой. Анимация или прозрачный цвет форматом не поддерживаются. Уменьшение размера файла достигается сложным математическим алгоритмом удаления информации — заказываемое качество ниже — коэффициент сжатия больше, файл меньше.

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

Наиболее подходящий формат для размещения в Интернете полноцветных изображений. Вероятно, до появления мощных алгоритмов сжатия изображения без потери качества останется ведущим форматом для представления фотографий в Веб. Формат JPEG: — Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение; — Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов; — Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается. Пожалуй, это все преимущества формата JPG, и основное его предназначение — хранение изображений фотографического качества.

GIF (Graphics Interchange Format, формат взаимообмена графикой) разработан CompuServe Incorporated, последняя версия GIF-89a.

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

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

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

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

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

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

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

Приёмы оптимизации графики.

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

Подготовку графики для вебстраницы условно можно разбить на этапа: создание графических элементов в векторном редакторе (в нашем случае это — CorelDRAW! версии 8), экспорт в полноцветный растровый формат и, наконец, оптимизацию полученной графики с одновременным переводом ее в формат с ограниченной цветностью (GIF) или в формат, реализующий сжатие с потерями (JPEG).

Деление на этапы условно: между вторым и третьим этапами на изображение можно наложить какие-либо специфически растровые эффекты (например, тени или размывки); или второй этап может отсутствовать вообще, если векторная программа способна экспортировать графику сразу в GIF или JPEG и предоставляет при этом достаточные для профессионала возможности настройки этого процесса.

Таким образом, оптимизацию графики можно характеризовать как поиск компромисса между ее качеством и объемом файла, как выбор одного из двух форматов и параметров сжатия в выбранном формате. Рассмотрим подробнее возможности сжатия графики в этих форматах. Сжатие графики в формате JPEG определяется одним параметром, называемым уровнем качества (quality) и измеряемым в относительных единицах — чаще всего от (максимальное сжатие) до 100 (максимальное качество). Большинство JPEGфайлов сохраняются с уровнем качества в диапазоне от 50 до 100. Чем плавнее и размытее цветовые переходы в изображении, тем меньшим может быть этот параметр и тем большего сжатия удается достичь.

Наоборот, четкие и контрастные цветовые границы требуют повышения уровня качества, иначе возле них появляется муар. В большинстве случаев можно сразу выбрать либо JPEG-формат (для фотографий или коллажей, где они доминируют), либо GIF (для неполноцветных изображений с ограниченным количеством используемых цветов, надписей, заголовков и т.п.). Если нельзя сразу определить, в каком формате выгоднее сохранять изображение, надо попробовать сначала сохранить его в формате JPEG, повышая степень сжатия до тех пор, пока качество не перестанет нас удовлетворять. Даже если полученный файл будет слишком велик и мы решим воспользоваться форматом GIF, у нас будет цифра, с которой можно будет сравнить результаты.

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

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

Если JPEG оперирует единственным и довольно абстрактным параметром quality для сжатия, то в GIF присутствует целый ряд параметров, главным из которых является количество цветов, или размер палитры. В отличие от других форматов, которые имеют только стандартные градации цветовой глубины (2 цвета, 16, 256, 215- high color, 224-true color), GIF может иметь любое количество цветов от 2 до 256.

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

Хотя количество цветов, необходимое для изображения, подбирается опытным путем, есть некоторые закономерности. Например, одноцветному тексту на одноцветном фоне должно хватить палитры из 8, а в небольших размерах даже и 4 цветов — два из них станут основными, а остальные отойдут промежуточным тонам для анти-алиасинга (сглаживания) на общих границах основных цветов.

С другой стороны, 256 (а иногда и 128) цветов с диффузией обычно вполне достаточно для полноценной передачи фотографического изображения средних размеров (хотя с этой задачей лучше справится JPEG). Основная часть веб-графики располагается где-то в промежутке между этими крайностями. На величину палитры сильно влияет наличие или отсутствие диффузии — метода, подменяющего смешение цветов внутри пиксела смешением пикселов разных цветов. Основанная на псевдослучайном распределении пикселов, диффузия обнаруживает свое несомненное сходство с фотографическими текстурами: хотя на первый взгляд диффузная зернистость совсем не похожа на фотографическую плавность и размытость, для глаза сочетание двух аморфных текстур гораздо естественнее, чем диффузия изображений с плоским цветом и четкими границами объектов.

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

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

Главный смысл использования диффузии состоит в том, чтобы изображение становилось гораздо терпимее к размеру палитры. Например, если без применения диффузии картинка не выдерживает редукции даже до 128 цветов, то с диффузией ее можно ограничить до 64 или даже 32 цветов без особой потери качества, С другой стороны, случайная диффузия резко ухудшает сжимаемость графики. Вот почему иногда, снизив цветность изображения с 256 до 128 цветов, из-за этого противоположно направленного эффекта мы вместо уменьшения размера файла получим увеличение. В ряде случаев даже диффузия неспособна "вытянуть" такие сугубо фотографические элементы изображения, как размывки и градиенты. При воспроизведении в ограниченной палитре градиент распадается на сильно портящие впечатление поперечные полосы (хотя без диффузии эти полосы были бы несоизмеримо заметнее).

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

Процесс оптимизации может быть применен не только к статичному, но и анимированному GIF-файлу. Жесткие требования к объему файла будут продиктованы в данном случае не столько из-за количества кадров в фрагменте, сколько благодаря физиологическим особенностям восприятия движущихся изображений: здесь уместно пользоваться гораздо более скромной палитрой и во многих случаях отказываться от таких вспомогательных эффектов, как диффузия и анти-алиасинг. Быстро мелькающие изображения не только не позволяют зрителю заметить возможные изъяны оптимизации, но и компенсируют недостатки друг друга, накапливая визуальное впечатление предсказуемо движущегося или изменяющегося объекта и нейтрализуя случайно расположенные дефекты. То же самое можно наблюдать в кинематографе, где субъективное качество движущегося изображения О программе Macromedia Dreamweaver Macromedia Dreamweaver — это программа, которая содержит программный инструментарий для визуальной компоновки Веб-страниц и для работы с HTML-кодом. Интуитивно понятный интерфейс Dreamweaver прост, не требующий длительного изучения.

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

Первым этапом в изучении программы Dreamweaver — это изучение интерфейса и настройки программы. Благодаря применению диалоговых окон можно без труда освоить основные настройки программы. Стоит отметить, что несмотря на то, что интерфейс программы прост, все расширенные возможности программы становятся доступны только после соответствующей настройки. Множество функций скрыто в меню программы и количество и размер кнопок интерфейса минимально. Подобное расположение в значительной мере позволило сэкономить рабочее пространство, не позволяя отвлекаться от основной задачи создания Веб-сайтов.

Использование встроенной системы шаблонов и библиотечных элементов для ускорения процесса создания сайта позволяет пользователям, совершенно не знакомых с навыками программирования HTML, создавать свои Вебстраницы без заучивания синтаксиса языка HTML, тегов, не тратя время на исправление ошибок в коде Веб-страницы. Задание основных свойств страницы. В меню "Modify" выбираем пункт "Page Properties ". Появляется следующее диалоговое окошко: свойства страницы. Encoding (кодировку символов) придется задавать для каждой страницы, если сразу не заменить его на кириллицу в свойствах Dreamweaver (Edit / Preferences / Encoding).

В окошке "Title" прописываем название страницы (которое будет отображаться в верхней части панели браузера). При условии задания верной кодировки русский язык поддерживается абсолютно корректно. В окошке "Background Image" задается фоновый рисунок, если надо. При наведении курсора на квадратики рядом с пунктами "Background", "Text", "Links", "Visited Links", "Active Links" вид курсора меняется на пипетку. Если нажать этой пипеткой на квадратик, получим следующее диалоговое окно. Внизу отображается образец цвета, над которым расположен в данный момент курсор, и его код.

Три кнопочки справа: пипетка — выбор цвета из данной палитры, ластик — выбор цвета, отображаемого браузером по умолчанию — "Default" (если сделан данный выбор, то в код страницы не будет добавлено никаких тегов относительно цвета данного элемента.

Далее можно задать значения краев страницы. Если вы решили воспользоваться этой возможностью, то обязательно укажите одинаковые значения в ячейках "Top Margin" и "MarginHeight", а также в ячейках "Left Margin" и "MarginWidth" (например, 0 и 0; 7 и 7), чтобы страница отображалась корректно в различных браузерах — все они понимают "края" по своему (Top Margin и Left Margin прописываются для Эксплорера, а MarginHeight и MarginWidth — для Навигатора). После заполнения всех этих полей можно нажать кнопку "Apply", посмотреть, что получилось, и если не понравится — сразу переделать. Можно также нажать кнопку "ОК" и вернуться к основному окну, а переделать потом.

Одно из основных достоинств Dreamweaver состоит в том, что в текущем сеансе работы функция "Undo" ("отменить") применима даже к изменениям, сделанным до сохранения файла. То есть, если вы сделали что-то, сохранили файл, а потом решили отменить это действие — это возможно (во Front Page возможность отмены действия после сохранения исчезает). Задание текущей директории и редактирование свойств сайта в целом Чтобы иметь возможность создавать короткие гиперссылки и работать с вложенными папками сайта, нужно задать директорию, в которой располагается сайт в целом, и определить его остальные свойства. В Dreamweaver также имеется собственный встроенный FTP-клиент, который в 3-ей версии ни в чем не уступает Cute FTP, а в чем-то даже его превосходит.

Например, можно попросить загрузить на сервер страницу вместе со всеми связанными изображениями, a Dreamweaver сам определит, какие картинки использованы на странице, и подгрузит их в нужные директории автоматически. Причем это именно FTP-клиент, который не позволяет себе ни в чем превышать полномочия.

Чтобы пользоваться встроенным FTP-клиентом, также необходимо задать параметры сайта. Параметры сайта и определение рабочей директории ("root folder") так же нужны для того, чтобы Dreamweaver корректно прописывал пути к вставляемым изображениям. Итак, в меню "Site"выбираем пункт "New site" и в результате получаем следующее диалоговое окно Заполняем все требуемые пункты в разделе "Local Info" (в "Link Management Options"можно ничего не прописывать, если вы предпочитаете использовать короткие ссылки вида: ). Главное — указать "Local Root Folder", остальные параметры особого значения не имеют.

Заполнение раздела "Web server info" требуется в том случае, если вы собираетесь пользоваться встроенным FTP-клиентом. Настройки похожи на настройки Cute FTP. Раздел "Site Map Layout" является настройкой карты сайта. В него надо вникать, если вы собираетесь использовать автоматическую навигацию. Если нет — оставьте все, как естъ.Все остальные настройки тоже лучше оставить по умолчанию.

Когда вы все заполните и нажмете кнопку "ОК", вас спросят, создать ли кэш для ускорения работы. Для основных сайтов кэш лучше создать. Если же вы делаете что-либо одноразовое, типа обоев в виде страницы, то от создания кэша можно отказаться.