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

 

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

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

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

 

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

 

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

 

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

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

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

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

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

 

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

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

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

 

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

 

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

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

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

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

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

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

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

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

 

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

 

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

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

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

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

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

Модель RGB

 

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

 

Модель CMYK

 

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

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

 

Модель HSB

 

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

 

Модель 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.

 

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

 

Модель 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.