Основы web-дизайна. Графические редакторы

Основы web-дизайна. Графические редакторы

Федеральное государственное автономное образовательное учреждение

высшего профессионального образования

«СИБИРСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»

Институт нефти и газа

Базовая кафедра химии и технологии природных энергоносителей и углеродных материалов

КУРСОВАЯ РАБОТА

Основы web-дизайна. Графические редакторы

Руководитель __________ __________________ Кузубов А.А.

Студент НГ 10-11 081012423 __________ Куликов Р.А.

Студент НГ 10-11 081012538 __________ Атакишиева Э.Э.

Студент НГ 10-11 081012531 __________ Чорнопольская Ю.Э.

Студент НГ 10-11 081012523 __________ Чаплыгин Д.А.

Студент НГ 10-11 081012455 __________ Кузнецов Ю.Д.

Красноярск 2014

Федеральное государственное автономное образовательное учреждение

высшего профессионального образования

«СИБИРСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»

Институт нефти и газа

Кафедра «Химическая технология природных энергоносителей и углеродных материалов»

РЕФЕРАТ

Основы web-дизайна. Графические редакторы

СОДЕРЖАНИЕ

Введение

. Основные понятия web-дизайна

.1 Web-дизайн, web-страница, основы строения сайта

.2 Web-редактор, примеры

.2.1 Текстовые редакторы для разработки Web приложений

.2.2 Стандартные средства разработки для Unix систем

.2.3 Профессиональные среды разработки и их ответвления

.2.4 Визуальные редакторы для разработчиков WEB

.3 Языки

.3.1 Клиентские языки

.3.2 Сервисные языки

. Представление о web-сайте

.1 Создание web-сайта

.2 Основные положения

.3 Структура документа

.4 Тэги тела документа

.5 Список базовых тэгов HTML

.6 Тэги списков

.7 Гипертекстовые ссылки

.8 Таблицы

.9 Оптимизация графики для Web

.10 Основы CSS

. Виды компьютерной графики

.1 Растровая графика

.1.1 Разрешение оригинала

.1.2 Разрешение экранного изображения

.1.3 Разрешение печатного изображения и понятие линиатуры

.1.4 Динамический диапазон

.1.5 Связь между параметрами изображения и размером файла

.1.6 Масштабирование растровых изображений

.1.7 Adobe Photoshop

.1.8 GIMP

.2 Векторная графика

.2.1 Математические основы векторной графики

.2.2 Adobe Illustrator

.2.3 Corel Draw

.3 Программные средства обработки трехмерной графики

. Представление графических данных

.1 Форматы графических данных

.2 Цвет и цветовые модели

.2.1 Цветовая модель CIE Lab

.2.2 Цветовая модель RGB

.2.3 Цветовая модель HSB

.2.4 Цветовая модель CMYK

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

РЕФЕРАТ

Данная курсовая работа содержит пояснительную записку из 74 страниц текста, 7 формул, 2 таблиц, 7 изображений и 10 литературных источников.

ГРАФИКИ, ПИКСЕЛЬ, ЯЗЫК, HTML, ТЕГ, JPEG, СКРИПТ, МИКШЕР, CSS, БИТ, ШРИФТ, СТИЛЬ, ЯЧЕЙКА, ИЗОБРАЖЕНИЕ.

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

ВВЕДЕНИЕ

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

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

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

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

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

Рисунок 1 - Примеры графики.

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

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

1. Основные понятия web-дизайна

.1 Web-дизайн, web-страница, основы строения сайта

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

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

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

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

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

Если мы говорим о сайтах, то не можем не упомянуть о блоках. Само слово «блок» имеет множество значений. В среде веб-разработок блоки, в разном понимании этого слова, встречаются и в программировании, и в верстке, и в дизайне. В общих чертах блок - это элемент структуры, как правило, состоящий из других элементов. Стандартная страница в интернете состоит из нескольких блоков: это шапка сайта (header), содержимое (content), подвал (footer), а также меню навигации.

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

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

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

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

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

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

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

Информация на веб-странице может быть представлена в различных формах:

)        текст

)        статические и анимированные графические изображения

)        аудио

)        видео

)        апплеты

.2 Web-редактор, примеры

eb-редактор - программа, использующаяся для редактирования HTML документов.

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

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

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

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

Текстовыми редакторами для Web разработки принято называть те программы, которые впитали в себя лучшие качества работы с кодом и подсветкой синтаксиса на различных языках. Для программирования приложений в интернет применяются специальные средства разработчиков, которые умеют работать с данными HTML, CSS, PHP, JavaScript.(What You See Is What You Get) -вид программ, имеющий дело с представлениями результатов работы программного кода на экране в графическом виде, который применяется разработчиками интернет-приложений. Эти редакторы позволяют отображать результаты работы кода на экране в удобном для пользователей виде.

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

1.2.1 Текстовые редакторы для разработки Web приложений

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

Notepad++ (Windows, Linux, Mac).++ - это продукт созданный программистами для программистов. Функционал практически неограничен, но производители скромно заявляют лишь о части самых необходимых для общего числа пользователей функциях программы.

PHPeditor.

)        Простенький продукт, для работы с HTML и PHP.

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

)        Программа имеет возможность подсветки синтаксиса HTML, PHP;

)        Есть инспектор кода HTML и PHP;

)        Включён встроенный сервер, для проверки серверных приложений;

)        Многовкладочный интерфейс;

)        Функции вставки;

)        Поддержка макросов;

)        Запись шаблонов кода с небольшим первоначальным набором.

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

.2.2 Стандартные средства разработки для Unix систем

Vim (Windows, Mac, Linux).

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

Fraise (Mac).

Простой в использовании и не перегруженный функционалом редактор для Mac Fraise, содержит необходимые инструменты для простой разработки приложений для Web без дополнительных плагинов:

)        Подсветка синтаксиса;

)        Удобная работа с блоками;

)        Поиск и замена;

)        Блоки для быстрого ввода тегов HTML и CSS;

)        Встроенный браузер с функцией автоматического обновления при замене стилей;

)        Закрытие тэгов нажатием одной кнопки;

)        Инспектор HTML.

Этот редактор создан специально для Mac и является хорошей заменой стандартному текстовому редактору. Он является приложением Smultron, по этой причине он работает только в поздних версиях ОС Mac, либо, при установленном Smultron.

.2.3 Профессиональные среды разработки и их ответвления

Komodo Edit (Windows, Linux, Mac).

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

)        Поддержка подсветки синтаксиса на большинстве языков программирования для интернета;

)        Автозаполнение и закрытие тегов;

)        Файловый менеджер и менеджер проектов;

)        FTP - клиент, работающий по разным протоколам;

)        Встроенный браузер для просмотра результатов работы;

)        Функции поиска и замены с регулярными выражениями;

)        Многооконный интерфейс с вкладками;

)        Проверка html кода tidy.

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

Bluefish Editor (Windows, Linux).Editor - возможно так же существует аналог для Mac. Пожалуй единственное решение для Linux в плане разработки, которое годится для решения любых задач. В целом функционал программы аналогичен, функциям Aptana Studio. Эта программа для профессионалов. Весь её функционал не перечислить. Поэтому настройка её требует определённых навыков. Главным недостатком этого редактора, является, на мой взгляд, медлительность и неповоротливость.

.2.4 Визуальные редакторы для разработчиков WEB

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

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

AdobeGolive и Adobe LiveMotion.

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

Microsoft Front Page.

Это удобная, простая в использовании, визуальная среда разработки. Не отличается чистотой кода на выходе. Но в то же время она позволяет работать с различными мультимедийными данными и не требует знания особых навыков, помимо знания Ms Word. Может загружать готовые страницы по ftp, На данный момент Front Page в пакетах Microsoft Office заменен на Microsoft Expression Web и Microsoft Office SharePoint Designer.

Существует (1997 бесплатная версия FrontPage Express, которая делает достаточно чистый код, который, впрочем, уже не соответствует стандартам HTML. Но если вам на скорую руку надо сверстать сложную таблицу - это именно то, что вам надо. Дистрибутива у FrontPage Express нет, работает без установки.

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

1.3 Языки

.3.1 Клиентские языки

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

)        JavaScript

)        VBScript

)        ActionScript

)        Java

)        CoffeeScript

web дизайн сайт текстовый

1.3.2 Сервисные языки

Когда пользователь дает запрос на какую-либо страницу (переходит на неё по ссылке или вводит адрес в адресной строке своего браузера), то вызванная страница сначала обрабатывается на сервере, то есть выполняются все программы, связанные со страницей, и только потом возвращается к посетителю по сети в виде файла. Этот файл может иметь расширения: HTML, PHP, ASP, ASPX, Perl, SSI, XML, DHTML, XHTML.

Работа программ уже полностью зависима от сервера, на котором расположен сайт, и от того, какая версия того или иного языка поддерживается. К серверным языкам программирования можно отнести: PHP, Perl, Python, Ruby, любой .NET язык программирования (технология ASP.NET), Java, Groovy.

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

)        Firebird

)        IBM DB2

)        IBM DB2 Express-C

4)      Microsoft SQL Server

5)      Microsoft SQL Server Express

6)      mSQL

7)      MySQL

8)      Oracle

9)      PostgreSQL

10)    SQLite

11)    Sybase Adaptive Server Enterprise

2. Представление о web-сайте

.1 Создание web-сайта

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

2.2 Основные положения

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

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

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовок документа </title>

Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-браузером при интерпретации документа. HTML-документ может включать вышеописанные элементы, только если они помещены внутрь тэгов <PRE> и </PRE>. Более подробно о тэгах <PRE> будет написано ниже.

2.3 Структура документа

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML>

...тело документа...

</HTML>

Заголовочная часть документа <HEAD>. Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>

<HEAD>

<TITLE>Список сотрудников</TITLE>

</HEAD>

Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-браузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Заголовок документа <TITLE>. Большинство WEB-браузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

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

<!--Это комментарий-->

Комментарии могут встречаться в документе где угодно и в любом количестве.

2.4 Тэги тела документа

Тело документа <BODY>. Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>. Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак "1". Синтаксис заголовка уровня 1 следующий:

<H1>

Заголовок первого уровня

</H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx>

Заголовок x-го уровня

</Hx>,

где x - цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>.

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов документа. Вы можете центрировать все элементы документа в окне браузера. Для этого можно использовать тэг <CENTER>.

Все элементы между тэгами <CENTER> и </CENTER> будут находиться в центре окна.

Тэг преформатирования <PRE>. Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

) перевод строки

) символы табуляции (сдвиг на 8 символов вправо)

) непропорциональный шрифт, устанавливаемый браузером.

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться браузером при помещении их между тэгами <PRE> и </PRE>.

Далее идет несколько более подробный пример, собранный из предыдущих:

<HTML>

<HEAD>

<TITLE> Список сотрудников </TITLE>

</HEAD>

<BODY>

<H2> Список сотрудников нашей фирмы </H2>

<H3> Составлено: 30 июля 1996 года </H3>

Данный список содержит фамилии, имена и отчества

всех сотрудников нашей компании. <P>

Список может быть использован только в служебных целях. <P>

</BODY>

</HTML>

Вот, что вы увидите на экране браузера:

Список сотрудников нашей фирмы

Составлено: 30 июля 1996 года

Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.

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

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

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

Куликов Роман <BR> Проспект Свободный,<BR> 82/6 <BR>

Дополнительный параметр позволяет расширить возможности тэга <BR>.

<BR CLEAR=left|right|all>

Данный параметр позволяет не просто выполнить перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <BR> для смещения текста ниже рисунка:

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left> <img src="#"865435.files/image004.gif">(для оригиналов, рассматриваемых “на просвет”, например слайдов) или коэффициенту отражения (для прочих оригиналов, например полиграфических отпечатков).

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

3.1.5 Связь между параметрами изображения и размером файла

Средствами растровой графики принято иллюстрировать работы, требующие высокой точности в передаче цветов и полутонов. Однако размеры файлов растровых иллюстраций стремительно растут с увеличением разрешения. Фотоснимок, предназначенный для домашнего промотра (стандартный размер 10х15 см, оцифрованный с разрешением 200-300 dpi, цветовое разрешение 24 бита), занимает в формате TIFF с включенным режимом сжатия около 4 Мбайт. Оцифрованный с высоким разрешением слайд занимает 45-50 Мбайт. Цветоделенное цветное изображение формата А4 занимает 120-150 Мбайт.

3.1.6 Масштабирование растровых изображений

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

Рисунок 2 - Эффект пикселизации при масштабировании растрового изображения.

3.1.7 Adobe Photoshop

Adobe Photoshop - растровый графический редактор, разработанный и распространяемый фирмой Adobe Systems. Этот продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop. В настоящее время Photoshop доступен на платформах Mac OS X/Mac OS и Microsoft Windows. Ранние версии редактора были портированы под SGI IRIX, но официальная поддержка была прекращена начиная с третьей версии продукта. Несмотря на то, что изначально программа была разработана для редактирования изображений для печати на бумаге (прежде всего, для полиграфии), в данное время она широко используется в веб-дизайне. В более ранней версии была включена специальная программа для этих целей - Adobe ImageReady, которая была исключена из версии CS3 за счёт интеграции её функций в самом Photoshop. тесно связан с другими программами для обработки медиафайлов, анимации и другого творчества. Совместно с такими программами, как Adobe ImageReady (программа упразднена в версии CS3), Adobe Illustrator, Adobe Premiere, Adobe After Effects и Adobe Encore DVD, он может использоваться для создания профессиональных DVD, обеспечивает средства нелинейного монтажа и создания таких спецэффектов, как фоны, текстуры и т. д. для телевидения, кинематографа и всемирной паутины. Основной формат Photoshop, PSD, может быть экспортирован и импортирован во весь ряд этих программных продуктов. Photoshop CS поддерживает создание меню для DVD. Совместно с Adobe Encore DVD, Photoshop позволяет создавать меню или кнопки DVD. Photoshop CS3 в версии Extended поддерживает также работу с трёхмерными слоями. поддерживает следующие цветовые модели:

)        RGB

)        LAB

)        CMYK

)        Grayscale

)        BitMap

)        Duotone

Последние версии включают в себя Adobe Camera RAW - плагин, разработанный Томасом Кноллом, который позволяет читать ряд RAW-форматов различных цифровых камер и импортировать их напрямую в Photoshop.

Поддерживается обработка изображений, с глубиной цвета 8 бит (256 градаций на один канал), 16 бит (используется 15 битов плюс один уровень, то есть 32769 уровней) и 32 бит (используются числа одинарной точности с плавающей запятой). Возможно сохранение в файле дополнительных элементов, как то: направляющих (Guide), каналов (например, канала прозрачности - Alpha channel), путей обтравки (Clipping path), слоёв, содержащих векторные и текстовые объекты. Файл может включать цветовые профили (ICC), функции преобразования цвета (transfer functions). Допускаются неквадратные пиксели (

Рисунок 3 - Среда Adobe Photoshop.

3.1.8 GIMP

GNU Image Manipulation Program или GIMP (Гимп) - растровый графический редактор, программа для создания и обработки растровой графики. Частично поддерживается векторная графика. Проект основан в 1995 году Спенсером Кимбелломи Питером Маттисом как дипломный проект, в настоящий момент поддерживается группой добровольцев. Распространяется на условиях GNU General Public License.

Изначально сокращение «GIMP» означало англ. General Image Manipulation Program, а в 1997 году полное название было изменено на «GNU Image Manipulation Program», и программа официально стала частью проекта GNU.

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

В GIMP присутствует достаточно неплохой набор инструментов цветокоррекции:

)        уровни;

)        микшер каналов;

)        постеризация;

)        тон-насыщенность;

)        баланс цветов;

)        яркость-контраст;

)        обесцвечивание.

При помощи фильтров, инструментов, масок и слоёв с разными типами наложения (всего 22) можно:

выравнивать заваленный горизонт;

убирать искажения, вносимые оптикой;

корректировать перспективу;

выполнять клонирование объектов с учётом перспективы;

кадрировать фотографии;

удалять дефекты вроде пыли на матрице (штамп, лечебная кисть);

имитировать использование различных цветофильтров;

«вытаскивать» потерянную детализацию в тенях;

реализовано управление цветом.

Рисование

несколько рисующих инструментов;

свободно масштабируемые кисти;

поддержка графических планшетов.

Экранные фильтры.

Дополнительные возможности по коррекции изображений на протяжении всей работы реализованы в виде экранных фильтров. К ним относятся: имитация разных типов дальтонизма (протанопия, дейтеронопия, тританопия);

гамма-коррекция;

коррекция контраста;

управление цветом.

Настраиваемый интерфейс.

Плавающие палитры легко группируются и перегруппируются;

возможна полная перенастройка клавиатурных комбинаций, действий мыши, а также устройств ввода вроде Griffin Powermate;

любое меню можно превратить в свободно перемещаемое окно (GNU/Linux/UNIX).

Автоматизация.

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

TinyScheme, иначе Script-Fu (в комплекте с программой);

Python (в комплекте с программой);

Ruby;

Perl;

Java (экспериментально, часть проекта gimp-sharp);

Tcl (в настоящее время не поддерживается).

С помощью этих инструментов можно писать как интерактивные сценарии и модули для GIMP, так и создавать изображения полностью автоматически, например, генерировать «на лету» изображения для веб-страниц внутри программ CGI или выполнять пакетную цветокоррекцию и преобразования изображений. Следует отметить, что для пакетной обработки изображений всё же лучше подходят пакеты наподобие ImageMagick.

Рисунок 4 - Среда GIMP.

3.2 Векторная графика

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

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

3.2.1 Математические основы векторной графики

Рассмотрим подробнее способы представления различных объектов в векторной графике.

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

Рисунок 5 - Объекты векторной графики.

Прямая линия. Ей соответствует уравнение

=kx+b.                          (1)

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

Отрезок прямой. Он отличается тем, что требует для описания еще двух параметров - например, координат x1 и х2 начала и конца отрезка.

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

+a1y2+a2xy+a3x+a4y+a5=0. (2)

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

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

В общем случае уравнение кривой третьего порядка можно записать так:

+a1y3+a2x2y+a3xy2+a4x2+a5y2+a6xy+a7x+a8y+a9=0. (3)

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

Рисунок 6 - Кривая третьего порядка и кривая Безье.

Кривые Безье. Это особый, упрощенный вид кривых третьего порядка (см. рис. 6). Метод построения кривой Безье (Bezier)основан на использовании пары касательных, проведенных к отрезку линии в ее окончаниях. Отрезки кривых Безье описываются восемью параметрами, поэтому работать с ними удобнее. На форму линии влияет угол наклона касательной и длина ее отрезка. Таким образом, касательные играют роль виртуальных “рычагов”, с помощью которых управляют кривой.

3.2.2 Adobe Illustrator

Adobe Illustrator - векторный графический редактор, разработанный и распространяемый фирмой Adobe Systems. Illustrator был задуман как редактор векторной графики, однако дизайнеры используют его в самых разных целях. Он очень удобен для быстрой разметки страницы с логотипом и графикой - простого одностраничного документа, не содержащего текст. Illustrator, первоначально разработанный для платформы Macintosh, - известная и широко используемая программа создания изображений. Существуют версии для Macintosh, Microsoft windows и NeXT. Мощные возможности Adobe Illustrator обусловлены тем, что в качестве графических объектов здесь реализованы кривые Безье, а также наличием простого пользовательского интерфейса, который обеспечивает точное позиционирование сплайновых графических объектов. Использование кривых Безье дает некоторые преимущества при моделировании естественных (а в определенных случаях и искусственных) объектов, файлы Adobe Illustrator применяются для обмена графическими элементами.

Формат AI инкапсулирует и формализует в структурированном файле подмножество языка описания страницы (PDL) PostScript. Такие файлы предназначены для отображения на принтере PostScript, но могут включать и растровую версию изображения, обеспечивая тем самым его предварительный просмотр. PostScript в полной реализации представляет собой мощный и сложный язык и способен определять почти все, что может быть отображено на двумерном устройстве вывода, формат AI адаптирован для хранения традиционных графических данных: рисунков, чертежей и декоративных надписей. Отметим все же, что файлы AI могут быть очень сложными. Мощь PostScript обусловлена в основном возможностью определять последовательности операций и затем объединять их простыми синтаксическими средствами. Эта скрытая сложность в файлах Adobe Illustrator иногда (но не всегда) сводится к минимуму. Простые файлы AI конструировать довольно легко, и прикладная программа сможет создавать файлы, которые будут прочитаны любой программой чтения AI и распечатаны на любом PostScript-принтере. А вот чтение файлов AI - совсем другое дело. Некоторые операции могут оказаться слишком сложными для реализации и моделирования программой визуализации. Поэтому разработчики часто предпочитают не визуализировать изображение из данных этого подмножества PostScript. Тем не менее следует отметить, что, как правило, почти все изображение можно реконструировать простыми операциями. Если хотите разработать программу чтения файлов Adobe Illustrator, то рекомендуем в качестве подсказки воспользоваться исходными текстами системы GNU GhostScript, которая содержит почти полную реализацию языка PostScript. , а, следовательно, и его подмножество AI, представляет собой особый язык со своими правилами. Поэтому, прежде чем начать работать с AI-файлами и изучать спецификацию и ознакомится с документацией по PostScript.

.2.3 Corel Draw

CorelDRAW Graphics Suite X4 предоставляет все необходимые инструменты для продуктивной работы современного дизайнера. Интуитивно понятные инструменты для векторного иллюстрирования и макетирования страниц позволяют создавать великолепные дизайнерские решения. Профессиональное программное обеспечение для редактирования фотографий помогает ретушировать и улучшать фотографии. Растровые изображения можно легко преобразовать в редактируемые и масштабируемые векторные файлы. Каким бы ни был ваш проект, CorelDRAW Graphics Suite X4 упростит рабочий процесс и вдохновит вас новыми возможностями для творчества.

Уже многие годы CorelDraw является основным рабочим инструментом для большинства дизайнеров и художников, работающих в среде Windows. Пакет приложений CorelDraw 6 Suite для Power Macintosh, как и его родственник для Windows, воплощает философию компании Corel - "чем больше, тем лучше". Набор содержит восемь приложений и утилит: недавно приобретенный Corel текстовый процессор WordPerfect 3.5, CorelDream 3D 6 (моделирование и рендеринг), CorelArtisan 6 (рисование и редактирование графики), а также CorelTexture (генератор текстур), плюс к этому - 1000 шрифтов Type 1 и 1000 изображений в формате Photo CD. Наш обзор посвящен, главным образом, модулю иллюстративной двухмерной графики CorelDraw.

Главное место на рабочем экране CorelDraw занимает настраиваемая панель инструментов. Стандартная панель инструментов позволяет в большинстве случаев одним щелчком получить быстрый доступ к функциям меню File и Edit. Но за внешне простым интерфейсом скрывается множество дополнительных инструментальных панелей. Панель цветов позволяет работать с цветовыми пространствами RGB, CMYK, HSV, HSB, LAB, YIQ и градациями серого. Можно также выбрать цветовую палитру из восьми вариантов, в том числе Pantone и Trumatch, или создать свою собственную.

К числу замечательных возможностей CorelDraw относятся его уникальные фильтры, которые называются Lens Effects. В роли линзы может выступить любая векторная форма, включая текст. А сам эффект применим к любому векторному или растровому объекту, который располагается под линзой. Объекты, расположенные под линзой, могут быть "заморожены". В этом случае создается копия только той части объекта, которая видима сквозь линзу. При этом сам объект остается в исходном состоянии и может редактироваться.

Рисунок 7 - Corel Draw.

.3 Программные средства обработки трехмерной графики

На персональных компьютерах основную долю рынка программных средств обработки трехмерной графики занимают три пакета. Эффективней всего они работают на самых мощных машинах (в двух- или четырехпроцессорных конфигурациях Pentium II/III, Xeon) под управлением операционной системы Windows NT.

Программа создания и обработки трехмерной графики 3D Studio Max фирмы Kinetix изначально создавалась для платформы Windows. Этот пакет считается “полупрофессиональным”. Однако его средств вполне хватает для разработки качественных трехмерных изображений объектов неживой природы. Отличительными особенностями пакета являются поддержка большого числа аппаратных ускорителей трехмерной графики, мощные световые эффекты, большое число дополнений, созданных сторонними фирмами. Сравнительная нетребовательность к аппаратным ресурсам позволяет работать даже на компьютерах среднего уровня. Вместе с тем по средствам моделирования и анимации пакет 3D Studio Max уступает более развитым программным средствам.

Программа Softimage 3D компании Microsoft изначально создавалась для рабочих станций SGI и лишь сравнительно недавно была конвертирована под операционную систему Windows NT. Программу отличают богатые возможности моделирования, наличие большого числа регулируемых физических и кинематографических параметров. Для рендеринга применяется качественный и достаточно быстрый модуль Mental Ray. Существует множество дополнений, выпущенных “третьими” фирмами, значительно расширяющих функции пакета. Эта программа считается стандартом “де-факто” в мире специализированных графических станций SGI, а на платформе IBM PC выглядит несколько тяжеловато и требует мощных аппаратных ресурсов.

Наиболее революционной с точки зрения интерфейса и возможностей является программа Мауа, разработанная консорциумом известных компаний (Alias, Wavefront, TDI). Пакет существует в вариантах для разных операционных систем, в том числе и Windows NT. Инструментарий Мауа сведен в четыре группы: Animation (анимация), Modeling (моделирование), Dynamic (физическое моделирование), Rendering (визуализация). Удобный настраиваемый интерфейс выполнен в соответствии с современными требованиями. На сегодняшний день Мауа является наиболее передовым пакетом в классе средств создания и обработки трехмерной графики для персональных компьютеров.

. Представление графических данных

.1 Форматы графических данных

web дизайн сайт текстовый

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

TIFF (Tagged Image File Format). Формат предназначен для хранения растровых изображений высокого качества (расширение имени файла .TIF). Относится к числу широко распространенных, отличается переносимостью между платформами (IBM PC и Apple Macintosh), обеспечен поддержкой со стороны большинства графических, верстальных и дизайнерских программ. Предусматривает широкий диапазон цветового охвата - от монохромного черно-белого до 32-разрядной модели цветоделения CMYK. Начиная с версии 6.0 в формате TIFF можно хранить сведения о масках (контурах обтравки) изображений. Для уменьшения размера файла применяется встроенный алгоритм сжатия LZW.(PhotoShop Document). Собственный формат программы Adobe Photoshop (расширение имени файла .PSD), один из наиболее мощных по возможностям хранения растровой графической информации. Позволяет запоминать параметры слоев, каналов, степени прозрачности, множества масок. Поддерживаются 48-разрядное кодирование цвета, цветоделение и различные цветовые модели. Основной недостаток выражен в том, что отсутствие эффективного алгоритма сжатия информации приводит к большому объему файлов.. Формат появился как формат хранения растровых данных программы PC PaintBrush фирмы Z-Soft и является одним из наиболее распространенных (расширение имени файла .PCX). Отсутствие возможности хранить цветоделенные изображения, недостаточность цветовых моделей и другие ограничения привели к утрате популярности формата. В настоящее время считается устаревшим.(Joint Photographic Experts Group). Формат предназначен для хранения растровых изображений (расширение имени файла .JPG). Позволяет регулировать соотношение между степенью сжатия файла и качеством изображения. Применяемые методы сжатия основаны на удалении “избыточной” информации, поэтому формат рекомендуют использовать только для электронных публикаций.(Graphics Interchange Format). Стандартизирован в 1987 году как средство хранения сжатых изображений с фиксированным (256) количеством цветов (расширение имени файла .GIF). Получил популярность в Интернете благодаря высокой степени сжатия. Последняя версия формата GIF89a позволяет выполнять чересстрочную загрузку изображений и создавать рисунки с прозрачным фоном. Ограниченные возможности по количеству цветов обусловливают его применение исключительно в электронных публикациях.(Portable Network Graphics). Сравнительно новый (1995 год) формат хранения изображений для их публикации в Интернете (расширение имени файла .PNG). Поддерживаются три типа изображений - цветные с глубиной 8 или 24 бита и черно-белое с градацией 256 оттенков серого. Сжатие информации происходит практически без потерь, предусмотрены 254 уровня альфа-канала, чересстрочная развертка.(Windows MetaFile). Формат хранения векторных изображений операционной системы Windows (расширение имени файла .WMF). По определению поддерживается всеми приложениями этой системы. Однако отсутствие средств для работы со стандартизированными цветовыми палитрами, принятыми в полиграфии, и другие недостатки ограничивают его применение.(Encapsulated PostScript). Формат описания как векторных, так и растровых изображений на языке PostScript фирмы Adobe, фактическом стандарте в области допечатных процессов и полиграфии (расширение имени файла .EPS). Так как язык PostScript является универсальным, в файле могут одновременно храниться векторная и растровая графика, шрифты, контуры обтравки (маски), параметры калибровки оборудования, цветовые профили. Для отображения на экране векторного содержимого используется формат WMF, а растрового - TIFF. Но экранная копия лишь в общих чертах отображает реальное изображение, что является существенным недостатком EPS. Действительное изображение можно увидеть лишь на выходе выводного устройства, с помощью специальных программ просмотра или после преобразования файла в формат PDF в приложениях Acrobat Reader, Acrobat Exchange.(Portable Document Format). Формат описания документов, разработанный фирмой Adobe (расширение имени файла .PDF). Хотя этот формат в основном предназначен для хранения документа целиком, его впечатляющие возможности позволяют обеспечить эффективное представление изображений. Формат является аппаратно-независимьм, поэтому вывод изображений допустим на любых устройствах - от экрана монитора до фотоэкспонирующего устройства. Мощный алгоритм сжатия со средствами управления итоговым разрешением изображения обеспечивает компактность файлов при высоком качестве иллюстраций.

4.2 Цвет и цветовые модели

В компьютерной графике применяют понятие цветового разрешения (другое название - глубина цвета). Оно определяет метод кодирования цветовой информации для ее воспроизведения на экране монитора. Для отображения черно-белого изображения достаточно двух бит (белый и черный цвета). Восьмиразрядное кодирование позволяет отобразить 256 градаций цветового тона. Два байта (16 бит) определяют 65 536 оттенков (такой режим называют High Color). При 24-разрядном способе кодирования возможно определить более 16,5 миллионов цветов.

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

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

Второй закон Грассмана (закон непрерывности): при непрерывном изменении излучения цвет смеси также меняется непрерывно. Не существует такого цвета, к которому нельзя было бы подобрать бесконечно близкий.

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

=R1R+G1G+B1B; (4)=R2R+G2G+B2B; (5)=RnR+GnG+BnB; (6)сумм=(R1+R2+…+Rn)R+(G1+G2+…+Gn)G+ (B1+B2+…+Bn)B. (7)

.2.1 Цветовая модель CIE Lab

В 1920 году была разработана цветовая пространственная модель CIE Lab (Communication Internationale de I'Eclairage - международная комиссия по совещанию. L, a, b - обозначения осей координат в этой системе). Система является аппаратно независимой и потому часто применяется для переноса данных между устройствами. В модели CIE Lab любой цвет определяется светлотой (L) и хроматическими компонентами: параметром a, изменяющимся в диапазоне от зеленого до красного, и параметром b, изменяющимся в диапазоне от синего до желтого. Цветовой охват модели CIE Lab значительно превосходит возможности мониторов и печатных устройств, поэтому перед выводом изображения, представленного в этой модели, его приходится преобразовывать.

Данная модель была разработана для согласования цветных фотохимических процессов с полиграфическими. Сегодня она является принятым по умолчанию стандартом для программы Adobe Photoshop.

.2.2 Цветовая модель RGB

Цветовая модель RGB является аддитивной, то есть любой цвет представляет собой сочетание в различной пропорции трех основных цветов - красного (Red), зеленого (Green), синего (Blue). Она служит основой при создании и обработке компьютерной графики, предназначенной для электронного воспроизведения (на мониторе, телевизоре). При наложении одного компонента основного цвета на другой яркость суммарного излучения увеличивается. Совмещение трех компонентов дает ахроматический серый цвет, который при увеличении яркости приближается к белому цвету. При 256 градационных уровнях тона черному цвету соответствуют нулевые значения RGB, а белому - максимальные, с координатами (255,255,255).

4.2.3 Цветовая модель HSB

Цветовая модель HSB разработана с максимальным учетом особенностей восприятия цвета человеком. Она построена на основе цветового круга Манселла. Цвет описывается тремя компонентами: оттенком (Hue), насыщенностью (Saturation) и яркостью (Brigfitness). Значение цвета выбирается как вектор, исходящий из центра окружности. Точка в центре соответствует белому цвету, а точки по периметру окружности - чистым спектральным цветам. Направление вектора задается в градусах и определяет цветовой оттенок. Длина вектора определяет насыщенность цвета. На отдельной оси, называемой ахроматической, задается яркость, при этом нулевая точка соответствует черному цвету. Цветовой охват модели HSB перекрывает все известные значения реальных цветов.

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

4.2.4 Цветовая модель CMYK

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

голубой (cyan) = белый - красный = зеленый + синий;

пурпурный (magenta) = белый - зеленый = красный + синий;

желтый (yellow) = белый - синий = красный + зеленый.

Такой метод соответствует физической сущности восприятия отраженных от печатных оригиналов лучей. Голубой, пурпурный и желтый цвета называются дополнительными, потому что они дополняют основные цвета до белого. Отсюда вытекает и главная проблема цветовой модели CMY - наложение друг на друга дополнительных цветов на практике не дает чистого черного цвета. Поэтому в цветовую модель был включен компонент чистого черного цвета. Так появилась четвертая буква в аббревиатуре цветовой модели CMYK (Cyan, Magenta, Yellow, blacK). Для печати на полиграфическом оборудовании цветное компьютерное изображение необходимо разделить на составляющие, соответствующие компонентам цветовой модели CMYK. Этот процесс называют цветоделением. В итоге получают четыре отдельных изображения, содержащих одноцветное содержимое каждого компонента в оригинале. Затем в типографии с форм, созданных на основе цветоделенных пленок, печатают многоцветное изображение, получаемое наложением цветов CMYK.

ЗАКЛЮЧЕНИЕ

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

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

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

По увеличению числа графических терминалов от 100 в 1964 году до 50.000 в 1977 году, а уже в 1994 году 3 млн. рабочих станций и 60 млн. ПК используются только в США. Машинная графика имеет сегодня промышленную базу, оцениваемую в 36 млрд. долл., которая обеспечивает работой около 300 тысяч специалистов. Она продолжает лидировать в вопросах обеспечения нашего взаимодействия с компьютерами и организации доступа к информации. Мы вступаем в новую эпоху расширения полномочий графических систем при движении по информационной супермагистрали.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1) Информатика: Базовый курс/С.В. Симонович и др. - СПб.: «Питер», 2001

) http://ru.wikipedia.org/wiki

) Информатика: Практикум по технологии работы на компьютере/од редакцией И.В. Макаровой. - 2-е издание. - М.: «Финансы и статистика», 1998.

) Вин Дж. Искусство WEB-дизайна. Самоучитель. - СПб.: Питер, 2003. -224 с.

) Григин И.Е. РНР 5.1. Руководство программиста. - СПб.: Питер, 2006. - 490с.

) Дронов В.А. Самоучитель. Macromedia Dreamweaver 8. - СПб.: БХВ-Петербург, 2006. - 320 с.

) Дунаев В. Самоучитель Java Script. 2-е издание. СПб.: Питер, 2006. - 395 с.

) Кингсли-Хью Э., Кингсли-Хью К. Java Script 1.5. Учебный курс. - СПб.: Питер, 2002. - 272 с.

) Комолова Н.В. HTML. Учебный курс. - СПб.: Питер, 2006. - 268 с.

) Курушин В.Д. Графический дизайн и реклама. Самоучитель. - М.: ДМК Пресс, 2001. 272 с.