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

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

Photoshop же создавался для редактирования изображений. Сегодня грань между двумя этими редакторами постепенно стирается. В тоже время то, что можно нарисовать в Photohop, не совсем получится, если использовать для этих целей Fireworks. И наоборот то, что можно сделать в Fireworks может не получиться в Photoshop.

Поэтому используя преимущества каждой из программ, можно успешно заниматься созданием рисунков для своего сайта. Как создаются рисунки и анимация в графическом редакторе Fireworks CS4, подробно рассмотрено ЗДЕСЬ.

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

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

Одна из важнейших характеристик растрового изображения, отвечающая за его качество, — разрешение, DPI (Dot Per Inch): количество пикселей на квадратный дюйм. Чем больше цифра, тем четче будет картинка. Фактически DPI отвечает за размер пикселя.

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

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

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

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

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

Рассмотрим растровую графику более подробно.

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

Цвет пикселя образуется в результате смешения базовых цветов, которые, в свою очередь, и определяет цветовая модель. Их несколько, но мы рассмотрим три основных: RGB (Red, Green, Blue — красный, зеленый, синий), CMYK (Cyan, Magenta, Yellow, Black — голубой, пурпурный, желтый, черный), Grayscale (Градации серого).

Модель RGB, как видно из названия, формирует цвет пикселя, смешивая три основных цвета: красный, зеленый, синий. Значение степени использования каждого цвета варьируется от 0 до 255. 0 означает, что цвет отсутствует полностью, а 255 — что цвет взят в чистом виде.

Например: код RGB чистого красного цвета будет 255,0,0 (то есть первый цвет — красный, взят по максимуму, а все остальные не взяты вообще), код чистого зеленого цвета — 0,255,0 (по аналогии с красным), ну а чистого синего цвета — 0,0,255, то есть синий цвет взят максимально, а все остальные отсутствуют.

Соответственно, код желтого цвета будет 255,255,0; абсолютного белого — 255,255,255; абсолютно черного — 0,0,0; голубого — 0,255,255; сиреневого — 255,0,255 и т. д. Смешивая три основных цвета, при помощигаммы RGB можно передать 2563 = 16.777.216 самых разно образных оттенков.

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

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

Модель Grayscale разработана для черно-белых изображений. Цвет по ней задается всего одним параметром, значение которого варьируется в пределах от 0 до 255, либо выражается в процентах. 0% — белый цвет, 100% — черный. Все промежуточные значения представляют собой разнообразные оттенки серого. Эта модель применяется при передаче черно-белых изображений.

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

Стандартной цветовой моделью Adobe Photoshop является RGB. При работе с черно-белыми изображениями считается целесообразным ис пользовать модель Grayscale.