Компьютерная графика в дизайне web-страниц

Размещено на http://www.allbest.ru/

"Компьютерная графика в дизайне web-страниц"



Введение

Первый в мире сайт info.cern.chпоявился в 1990 году, далее сайты развивались, и появилась необходимость оформления сайтов, с целью приятного визуального восприятия его пользователем.

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

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



1. Понятие web-дизайна

1.1 Понятие web-дизайна

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

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

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

Фактически, собственно графика, внешний вид и оформление сайта не являются главным моментом и отправной точкой в проектировании Интернет-страницы.

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

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

1.2 Основные принципы web-дизайна

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



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

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

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

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

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

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

Достоинства растровой графики:

- Можно воспроизвести любой рисунок - и условный, схематичный, и фотографического качества;

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



Недостатки растровой графики:

- Большой размер, занимаемый файлами;

- Потеря качества изображения при операциях трансформирования.

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

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

Достоинства векторной графики:

- Небольшой размер файла;

- Нет потери качества при операциях трансформирования объектов;

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

Недостатки векторной графики:

- Не каждый объект может быть изображен в векторном виде, например фотографии;

- Чем больше число объектов, тем больше памяти и времени требуется на отображение и обработку векторного рисунка.



2.4 Трехмерная графика (3D)

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

Для его получения сначала происходит моделирование - создание математической 3D-модели сцены и объектов в ней, а затем визуализация (рендеринг) - построение проекции на основе выбранной физической модели.

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

Самыми популярными программами, используемыми для создания 3D графики и анимации, являются пакеты компании Autodesk: 3DS Max (собственный формат MAX) и Maya (собственный формат MA). Стоит отметить и универсальное комплексное приложение MaxonCinema 4D (собственный формат C4D) с более простым интерфейсом, чем у продуктов Autodesk и поддержкой русского языка, что делает его особенно привлекательным для русскоязычной аудитории.

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

Например, за 3DS MAX просят около 4000 евро. Хотя Autodesk пошла навстречу тем людям, которые не собираются извлекать коммерческую выгоду при использовании этой программы, выпустив для них бесплатную версию, которая становится доступна после регистрации на сайте компании.

2.5 Фрактальная графика

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

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



3.Цветовые модели

3.1 Цветовые модели

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

Технологические модели описания цвета основаны на базовых компонентах. Каждый базовый компонент вносит свой вклад в создание конкретного цвета.

Канал - базовый компонент цветовой модели. Для отображения и работы с цветовыми каналами в Photoshop используется палитра Channels (каналы).

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



3.2 Модель RGB

Цветовая модель RGB основана на красном (Red), зеленом (Green) и синем (Blue) цветах (каналах). Данная цветовая модель используется для описания цвета излучающих объектов. Каждый канал имеет 256 градаций яркости и изменяется в диапазоне от 0 (нет излучения) до 255 (максимальная интенсивность излучения). Таким образом, теоретически может быть представлено 16 миллионов (16777216) цветовых оттенков.Это аппаратно-зависимая цветовая модель. В связи с технологическими ограничениями, на экране монитора, телевизора или другого устройства в реальности отображается меньшее количество цветов.Photoshop может сохранить изображение, созданное в цветовой модели RGB, почти во всех графических форматах. Исключение составляют: GIF, DCS 1.0, DCS 2.0

3.3 Модель CMYK

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

Интенсивность цветов изменяется от 0% до 100%.Photoshop может сохранить изображение, созданное в цветовой модели CMYK, в следующих графических форматах: PSD, PSB, DCS 1.0, DCS 2.0, EPS, JPEG, PDF, Scitex CT, TIFF.



3.4 Модель HSB

Интуитивная модель HSB - сокращение от английских слов Hue (Оттенок или Цвет), Saturation (Насыщенность) и Brightness(Яркость). HSB-математическая модель, основанная на модели RGB, но имеющая другую систему координат, представляет собой цветовой круг. Цветовая модель очень удобна для подбора оттенков и цветов. Модель HSB имеет широкий цветовой охват. Режим HSB был в Photoshop лишь в первых двух версиях. Затем его перенесли в окно выбора цвета (ColorPicker). Модель была создана Элви Реем Смитом, одним из основателей Pixar, в 1978 году. Она является нелинейным преобразованием модели RGB.Цвет, представленный в HSV, зависит от устройства, на которое он будет выведен, так как HSV -- преобразование модели RGB, которая тоже зависит от устройства. Для получения кода цвета, не зависящего от устройства, используется модель Lab.

3.5 Модель Lab

Трехканальная модель Lab является аппаратно-независимой. Это перцепционная модель, т.е. основана на восприятии цвета человеком. В то же время Lab чисто математическая модель. Канал L (Lightness или Luminosity) определяет яркость. Значение яркости 0 соответствует черному цвету. Значение яркости 100 соответствует белому цвету. Хроматические каналы «a» и «b» принимают значения от -128 до +127. Канал «a» содержит цвета от темно-зеленого (низкая яркость) через серый (средняя яркость) до ярко-розового (высокая яркость). Канал «b» содержит цвета от светло-синего (низкая яркость) через серый до ярко-желтого (высокая яркость).

Цветовой охват модели Lab соответствует видимому человеком цветовому охвату. Более широкий, чем у RGB и CMYK, цветовой охват Lab позволяет использовать эту модель при переводе изображений из одного цветового пространства в другое, не теряя при этом качества.AdobePhotoshop CS 5 может сохранить изображение, созданное в цветовой модели Lab, в ограниченном количестве графических форматов: PSD, PSB, EPS, PDF, TIFF, PhotoshopRaw. Изображение также может быть сохранено в форматах DCS 1.0 и DCS 2.0, но при открытии этих файлов изображение преобразовывается в цветовую модель CMYK.

3.6 Другие цветовые модели

Модель Grayscale

Изображение в градациях серого не содержит информации о цвете. Полутоновое изображение имеет 256 ступеней яркости. В оперативной памяти занимает по одному байту на пиксель.ВAdobePhotoshop CS 5 этот режим также используется как промежуточный этап, перед выбором моделей Bitmap и Duotone.Полутоновое изображение может быть сохранено в любом формате, кроме DCS 1.0.

Модель Bitmap

Растровое или черно-белое изображение состоит только из черных или белых точек. Может быть полезно при подготовке изображений к черно-белой печати. Вид получаемой «растровой картинки» зависит от используемого метода растеризации. У монохромного изображения разрешение должно быть равно разрешению устройства вывода.Изображение в модели Bitmap можно сохранить в следующих графических форматах: PSD, PSB, DCS 2.0, EPS, GIF, PCX, PDF, PICT, PNG, TIFF.

Модель Duotone

Дуплекс (двуцвет или дуотон) расширяет тоновый диапазон, а также позволяет тонировать полутоновые изображения. В режиме Duotone изображение может быть одноцветным (monotone), двуцветным (duotone), трехцветным (tritone) и четырехцветным (quadtone).AdobePhotoshop CS 5 может сохранить дуплекс в ограниченном количестве графических форматов: PSD, PSB, DCS 2.0, EPS, PDF.

Модель IndexedColor

Индексированная (фиксированная) цветовая палитра содержит не более 256 цветов. Используется для размещения изображений во Всемирной паутине или мультимедийных презентаций. В этой модели сильно ограничены возможности редактирования изображений.Изображение с индексированной палитрой цветов может быть сохранено в PSD, PSB, BMP, GIF, EPS, PCX, PDF, PhotoshopRaw, Photoshop 2.0, PICT, PNG, Targa, TIFF.

Модель Multichannel

В мультиканальной (многоканальной) модели каждый из каналов изображения содержит 256 уровней серого. Может содержать любое количество цветовых каналов. Общее количество цветовых и альфа-каналов не может превышать 56-ти. Эта модель используется для специальных режимов печати, например, при использовании заказных (плашечных) цветов, а также при некоторых преобразованиях из одной цветовой модели в другую.Изображение в мультиканальной модели может быть сохранено лишь в PSD, PSB, Photoshop 2.0, PhotoshopRaw, DCS 2.0.



4.Форматы изображений в веб-дизайне

4.1Форматы изображений в веб-дизайне

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

4.2 Формат GIF

Итак, GIF. (Graphics Interchange Format).Разработанный в 1987 году компанией CompuServe этот формат предназначался для передачи растровых изображений по Сети (локальной и Интернет). Но первый GIF получился комом: изображение выходило слишком «увесистым», то есть превышало объёмы, которые бы позволяли передавать его по Сети. Тогда ему на смену двумя годами позже пришёл усовершенствованный вариант, получивший название GIF87a, который имел несколько серьёзных отличий от своего предшественника. Во-первых, были существенно сокращены объёмы файла. Достичь этого удалось благодаря LZW-компрессии. Сжатие происходит за счёт строк, которые имеют повторяющиеся участки. Например, с лёгкостью можно уменьшить размер изображения, в котором большое количество пикселей одного цвета по горизонтали. Кстати, алгоритм сжатия LZW относят к форматам сжатия без потерь. И это не просто красивые слова: восстановленные из GIF данные будут в точности соответствовать упакованным. Однако это касается только 8-битных изображений с 256-цветовой палитрой. В случае перевода в GIF цветной фотографии, конечно же, будут довольно существенные потери в качестве. Всё потому, что изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов. Кроме того, GIF обладает свойством чересстрочности, что даёт возможность увидеть всё изображение целиком, имея только часть файла (правда тогда страдает разрешение). Эта опция находит широкое применение в Интернете. Свойства формата определили и область его применения. GIF чаще всего можно встретить в диаграммах, графиках, простейших (немногоцветных) изображениях и, конечно же, в анимации, например, в баннерах.

4.3 Формат JPEG

Ещё одним популярным форматом является JPEG (JointPhotographicExpertsGroup). Основное назначением этого формата является как раз хранение многоцветных фотографических изображений. В Сети JPEG нашёл применение благодаря своей удивительной способности сжимать изображения практически без потерь, то есть без уменьшения количества цветов. В данном случае метод основывается на сокращении числа пикселей, содержащих информацию. Работает это, примерно, так. JPEG находит плавные переходы цвета в участках 9х9 пикселей. Вместо действительных значений JPEG хранит скорость изменения от пикселя к пикселю. Ту информацию, которая с его точки зрения является лишней, он отбрасывает, усредняя некоторые значения. В процессе сжатия происходит конвертация изображения в цветовую систему YCbCr.

Каналы Cb и Cr, несущие информацию как раз о цвете, уменьшаются в 2 раза. После чего все цветовые каналы изображения, в том числе черно-белый канал Y, дробятся на части (8х8 пикселей), которые и проходят дискретное косинусное преобразование, то есть сжатие без потерь. На последнем этапе происходит упаковка полученных в итоге коэффициентов при помощи кодов Хаффмана. Чем выше мы устанавливаем уровень компрессии, тем больше таких данных отбрасывается, а, значит, тем ниже становится качества картинки на выходе. Метод сжатия JPEG позволяет получить файл в 10-500 раз меньше, чем ВМР. И, кстати, этот формат, как и GIF, поддерживает чересстрочность. Перечисленные выше свойства JPEG дают понять, что лучше его использовать для сжатия растровых картинок фотографического качества, а не для, скажем, логотипов или схем. Объясняется такая избирательность просто: в фотографиях гораздо больше полутоновых переходов, чем в логотипах, где из-за однотонной заливки повышается вероятность нежелательных помех. Естественно, что исходный файл, для которого требуется сжатие, должен обладать высоким разрешением, для того, чтобы в итоге получились наиболее мягкие переходы цвета.

4.4 Формат PNG

PNG(Portable Network Graphics) (именно так звучит развёрнутый вариант наименования этого формата) был придуман как замена GIF, поэтому во многом они схожи друг с другом (например, возможность прозрачного фона).

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

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



4.5 Основные сферы применения форматов

GIF - графические элементы сайта (меню, баннеры, кнопки). JPEG лучше работает с фотографиями, а PNG больше подходит для хранения предварительных набросков макетов будущего web-дизайна ресурса.



5. Программное обеспечение для создания графики

5.1 Программное обеспечение для создания графики

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

5.2 Свободное программное обеспечение

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

Blender

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

Blender был разработан как рабочий инструмент голландской анимационной студией NeoGeo (не имеет отношения к игровой консоли Neo-Geo). В июне 1998 года автор Blender'а, Тон Розендаль (TonRoosendaal), основал компанию Not a Number (NaN) с целью дальнейшего развития и сопровождения Blender. Программа распространялась по принципу shareware.В 2002 году компания NaN обанкротилась. Усилиями Тона Розендаля кредиторы соглашаются на изменение лицензии распространения Blender в пользу GNU GPL с условием единовременной выплаты €100000. 18 июля 2002 года началась программа по сбору спонсорских пожертвований на покрытие необходимой суммы. Уже 7 сентября 2002 года было объявлено о том, что необходимая сумма набрана, и о планах перевести в ближайшее время исходный код и сам Blender под лицензию GPL.13 октября 2002 года компания BlenderFoundation представила лицензированный под GNU GPL продукт. В настоящее время Blender является проектом с открытым исходным кодом и развивается при активной поддержке BlenderFoundation.

Достоинства и недостатки:

+ большие возможности и полностью бесплатно;

+ широкие возможности импорта/экспорта;

+ возможность создания игр;

+ кроссплатформенность;

+ небольшой размер;

? в базовую поставку не входит развёрнутая документация;

? нет возможности асинхронной подгрузки уровней.

GIMP

GIMP-- растровый графический редактор, программа для создания и обработки растровой графики и частичной поддержкой работы с векторной графикой. Проект основан в 1995 году Спенсером Кимбеллом и Питером Маттисом как дипломный проект, в настоящий момент поддерживается группой добровольцев. Распространяется на условиях GNU GeneralPublicLicense.Изначально сокращение «GIMP» означало англ. GeneralImageManipulationProgram, а в 1997 году полное название было изменено на «GNU ImageManipulationProgram», и программа официально стала частью проекта GNU.

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

Недочёты, их решение и пути обхода:

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

-нет поддержки плашечных цветов (и палитры Pantone);

-нет полноценной поддержки цветовых моделей, CIELAB и CIE XYZ;

-нет поддержки режима 16 и более разрядов на цветовой канал;

-нет поддержки HDRi и операторов отображения тонов;

-нет процедурных (корректирующих) слоёв и эффектов (стилей) слоёв.

Многие из упомянутых недочётов планируется устранить на втором этапе перехода к использованию библиотеки GEGL.Существует расширение для экспорта в TIFF с цветоделением в CMYK[4] и цветопробой

Inkscape

Inkscape-- векторный графический редактор, удобен для создания как художественных, так и технических иллюстраций (вплоть до использования в качестве САПР общего назначения, чему также способствует легкость обмена чертежами). Это стало возможным во многом благодаря открытому формату SVG, развиваемому консорциумом W3C. Формат SVG позволяет создавать иллюстрации различного типа, в том числе анимированные. Поскольку SVG основан на языке разметки XML, к нему можно писать расширения, чем авторы Inkscape и пользуются. Программа распространяется на условиях GNU GeneralPublicLicense.

История Inkscape началась с того, что нескольких программистов и дизайнеров, умеющих писать код, перестали устраивать условия разработки редактора векторной графики Sodipodi. Поняв, что они не смогут в должной степени применить свои навыки, они организовали новый проект[3], который назвали Inkscape. На тот момент в Linux было всего два редактора векторной графики, которые можно было использовать в реальной работе -- Sodipodi и SKetch, позднее переименованный в Skencil. С тех пор разработка Sodipodi и Skencil сошла на нет. Inkscape де-факто стал самым популярным свободным редактором в своей области.



5.3 Коммерческое и собственническое ПО

CorelDRAW

CorelDRAW -- векторный графический редактор, разработанный канадской корпорацией Corel. Текущая версия продукта -- CorelDRAWGraphicsSuite X6, доступна только для MicrosoftWindows. Более ранние версии выпускались также для Macintosh и Linux. Последняя версия для Linux -- 9-я, выпущенная в 2000 году. В 2002 году вышла последняя 11-я версия для Macintosh.

Поддерживаемые форматы файлов:

AdobeIllustrator (AI), ШрифтAdobeType 1 (PFB), Растровое изображение Windows (BMP), Растровое изображение OS/2 (BMP), Метафайл компьютерной графики (CGM), CorelDRAW (CDR), CorelPresentationExchange (CMX), CorelPHOTO-PAINT (CPT), Библиотека символов Corel (CSL), Ресурс курсоров (CUR), ФайлыMicrosoftWord (DOC, DOCXилиRTF), MicrosoftPublisher (PUB), CorelDESIGNER (DSFилиDES), Формат обмена чертежами AutoCAD (DXF) и База данных изображений AutoCAD (DWG), Инкапсулированный PostScript (EPS), PostScript (PS или PRN), GIF,

HTML, JPEG (JPG), JPEG 2000 (JP2), Изображение KodakPhoto-CD (PCD), PICT (PCT), Формат переносимых документов Adobe (PDF), Файл плоттера HPGL (PLT), Переносимая сетевая графика (PNG), AdobePhotoshop (PSD), CorelPainter (RIF), Масштабируемаявекторнаяграфика (SVG), MacromediaFlash (SWF), Растровое изображение TARGA (TGA), Растровое изображение TIFF (TIF), CorelPaintShopPro (PSP), ШрифтTrueType (TTF), ДокументWordPerfect (WPD), ГрафикаWordPerfect (WPG), ФорматыфайловкамерыRaw, Сжатое растровое изображение вейвлета (WI), Формат Метафайл Windows (WMF).



ACDSee

ACDSee -- условно-бесплатная программа для просмотра и организации изображений для MicrosoftWindows, а также для Mac OS X, выпускаемая ACD Systems. Содержит многочисленные инструменты для обработки изображений, в том числе и пакетной. В последних версиях имеет два режима просмотра: быстрый, в котором доступны только инструменты поворота изображения и изменение масштаба, и полный, с загрузкой всех инструментов обработки.

Особенности:

+Ускоренный поиск изображений при помощи QuickSearchBar.

+Быстрый просмотр RAW изображений.

+Расширенная поддержка RAW форматов от цифровых камер Nikon, Canon, Konica-Minolta, Olympus, Fuji и Pentax, включая популярные новые DSLR модели: Nikon D3X, Nikon D7000, Canon EOS-1Ds Mark III, Canon EOS 600D,Pentax K-5 и Olympus E-5.

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

+Полная поддержка управления цветом для ICC и ICM цветовых профилей.

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

+Интегрированнаяподдержка DNG (Digital Negative Specification) RAW формата.

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

+Интегрированная IPTC поддержка для взаимодействия с PhotoShopCaptions.



AutodeskMaya

AutodeskMaya -- редактор трёхмерной графики. В настоящее время стала стандартом 3D графики в кино и телевидении. Первоначально разработана для ОС Irix (платформа SGI), затем была портирована под ОС Linux, MicrosoftWindows и Mac OS. В настоящее время существует как для 32, так и для 64-битных систем.

Изначально Maya была разработана AliasSystemsCorporation и выпущена для операционных систем MicrosoftWindows, Linux, IRIX и Mac OS X. В сентябре 2007 года, была выпущена новая версия, получившая имя Maya 2008. Для платформы IRIX последней версией была 6.5, в связи с уменьшающейся популярностью ОС в последние годы. В октябре 2005 года компания Alias влилась в Autodesk. Представители компании в различных интервью подтвердили, что не будут сливать Maya и 3ds Max в один продукт.

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

Maya стала результатом совмещения трех программных продуктов: WavefrontTheAdvancedVisualizer (Калифорния, США), ThomsonDigitalImage (TDI) Explore (Франция) и AliasPowerAnimator (Торонто, Канада). В 1993 Wavefront купила TDI, затем в 1995 компания SiliconGraphicsIncorporated (SGI) купила обе компании Alias и Wavefront. Объединенная компания стала называться Alias|Wavefront. Позднее Alias|Wavefront была переименована в Alias. В 2003 году Alias была продана SGI частной инвестиционной фирме Accel-KKR. В октябре 2005 Alias была снова перепродана, на сей раз компании Autodesk. 10 января 2006 Autodesk закончил слияние и теперь AliasMaya известна как AutodeskMaya.



6. Photoshop

6.1Photoshop

Adobe Photoshop -- многофункциональный графический редактор, разработанный и распространяемый фирмой AdobeSystem. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop. В настоящее время Photoshop доступен на платформах MacиWindows. Здесь сразу можно найти два применения, в зависимости от того, какие именно сайты вы делаете:

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

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

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

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



Заключение

Проведя данную работу на тему «Компьютерная графика в дизайне WEB страниц» я выполнил поставленные цели, а именно:

1)Изучил основные понятия компьютерной графики, дизайна web-страниц

2)Изучил основы построения композиции и подбора цвета.

3)Расписал достоинства и недостатки как растровой, так и векторной графики

4)Узнал с каким программным обеспечением лучше всего работать для создания графического оформления

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

7) Узнал, почему для работы с web-дизайном рекомендуют пользоваться программой Photoshop



Список используемой литературы

1.http://www.perfect-design.ru/stati17.html

2.http://design.trilan.ru/articles/image-formats.html

3.http://256.ru/pages/adobe_ps_color_modes1.php

4.http://www.diera.ru/biblio/biblio-cgprog/

5.http://www.sdelaysite.com/kniga/web-design/photoshop-dlya-sajta

6.http://www.i2r.ru/static/255/out_17358.html

7.Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова(116-118 страницы)

8.Пауэлл Томас А. Web-дизайн: пер. с английского.(страницы: 58-63, 86-87,89)

9.Яцюк О. Основы графического дизайна на базе компьютерных

технологий.(235-236 страницы)

10.Немцова Т. И., Назарова Ю. В.Компьютерная графика и web-дизайн.(318, 321, 324-326 страницы)

11.ТыщенкоО.Б. Adobe Certified Instructor in Photoshop CS 5 (ACI)(30-35 страницы)

12.Борисенко А.А - Web-дизайн. Просто как дважды два(58-63, 65)

Размещено на Allbest.ru