Тема 4. Компьютерная графика
Основы теории компьютерной графики
4.1.1. Цвет и цветовые модели
4.1.2. Растровая и векторная графика
4.1.3. Особенности графики для Web
4.1.4. Форматы графических данных для Web
4.1.5. Ускорение загрузки графики для Web
4.1.6. GIF-анимация
Программные средства разработки графики для Web
4.2.1. Основы работы с графическим редактором Adobe Photoshop
4.2.2. Создание простейшей анимации в редакторе Adobe ImageReady
1. Цвет и цветовые модели
Для того, чтобы «увидеть» предмет, необходимы две вещи:
Источник света (свет + освещенный им объект);
Приемник света (глаз)
Белый свет является сложным светом, состоящим из лучей различной цветности: красного, оранжевого, желтого, зеленого, голубого, синего, фиолетового – такое разложение называется спектром.
Если белый свет падает на белый предмет, то все составляющие белого света отражаются от него, и мы видим белый цвет предмета. Если белый свет падает на зеленый предмет, то все составляющие света поглощаются поверхностью предмета, и лишь зеленая составляющая отражается, в результате чего мы видим зеленую окраску предмета. Аналогично происходит и с другими цветами: красным, синим, зеленым и т. п. Если свет падает на поверхность черного цвета, то поглощаются все составляющие спектра, и мы видим черный предмет.
Изображение может быть черно-белым (то есть содержать только два цвета: белый и черный), полутоновым (то есть содержать разные оттенки одного цвета, например оттенки серого) и цветным. Оцифрованное цветное изображение представляется с помощью одной из цветовых моделей.
Цветовая модель RGB(Red – красный,Green – зеленый,Blue – синий). Цветовую модель RGB обычно иллюстрируют картинкой в виде трех пересекающихся кругов (рис. 4.1). В центре пересечения эти три цвета в сумме дают белый цвет. Попарное пересечение смежных кругов дает дополнительные цвета: желтый (Yellow); голубой (Cyan); пурпурный (Magenta).
Рис. 4.1. Цветовая модель RGB
В режиме RGB осуществляется сканирование изображений, эта же модель положена в основу конструкции экрана монитора и соответствует восприятию цветов человеческим глазом.
Красный, зеленый и синий цвета, представленные в одинаковых количествах дают оттенок серого. Чем это количество больше, тем оттенок серого светлее (ярче). Если цветовые составляющие представлены в неравных количествах, то образуется цвет.
Цвет в формате RGBобычно представляют в виде совокупности трех десятичных или шестнадцатеричных чисел в диапазоне от 0 до 255, либо от 00 доFFсоответственно, что соответствует одному байту на каждый канал и 3 байта (24 бит) на все три канала. Пример:255,128,52 (FF8034).
Однако модель RGB неприемлема для печати, поскольку обыкновенные краски не излучают свет. Информацию о цвете бумаги человек получает из отраженного света.
Цветовая модель CMY(Cyan– голубой,Magenta– пурпурный,Yellow– желтый). Цветовую модельCMYобычно иллюстрируют картинкой в виде трех пересекающихся кругов (рис. 4.2). В центре пересечения эти три цвета в сумме дают черный цвет.
Рис. 4.2. Цветовая модель CMY
Однако на практике, ввиду невозможности получения красок, абсолютно точно передающих базовые цвета, комбинация всех трех составляющих дает не черный, а грязно-серый цвет. Поэтому обычно применяется отдельный черный краситель, тогда имеет место цветовая модельCMYK(К– черный). Данная цветовая модель используется в полиграфии.
Существуют другие цветовые модели, например, HSBиLAB.
4.1.2. Растровая и векторная графика
Основой растровогопредставления графики являетсяточка(пиксел) с указанием ее цвета. Средствами растровой графики принято иллюстрировать работы, требующие высокой точности в передаче цветов и полутонов.
Основной параметр растровых изображений – разрешение, определяющее число точек (пикселей) изображения по горизонтали и вертикали. Так, например, изображение с разрешением 800х600 пикселей содержит 800 точек по горизонтали и 600 точек по вертикали (всего 480 тыс. точек). Другой важный параметр –глубина цвета, определяет объем информации, отводимый на один пиксел изображения. Наиболее распространены изображения с глубиной цвета 8 или 24 бит/пиксел.
На рис. 4.3а представлен пример растрового изображения, содержащего 8 точек по горизонтали и 8 точек по вертикали.
а) б)
Рис. 4.3. Растровая и векторная графика
Чем больше разрешение и глубина цвета растрового изображения, тем больший объем памяти занимает данное изображение. Так для изображения на рис. 4.3а, с учетом присутствия двух цветов (белый и синий), объем изображения составит 8 ∙ 8 ∙ 1 = 64 бит (8 байт).
Одним из недостатков растровой графики является так называемая пикселизацияизображений при их увеличении. Поскольку в оригинале присутствует определенное количество точек, то при большем масштабе увеличивается и их размер, становятся заметны элементы растра, что искажает саму иллюстрацию. Для противодействия пикселизации принято заранее оцифровывать оригинал с разрешением, достаточным для качественной визуализации при масштабировании. Наконец, при масштабировании используют метод интерполяции, когда увеличение размера иллюстрации происходит не за счет масштабирования точек, а путем добавления необходимого числа промежуточных точек.
Если в растровой графике базовым элементом изображения является точка, то в векторнойграфике –линия. Линия описывается математически как единый объект, и потому объем данных для отображения объекта средствами векторной графики существенно меньше, чем в растровой графике.
Линия – элементарный объект векторной графики. Как и любой объект, линия обладает свойствами: формой (прямая, кривая), толщиной, цветом, начертанием (сплошная, пунктирная). Замкнутые линии приобретают свойство заполнения. Охватываемое ими пространство может быть заполнено другими объектами (текстуры, карты) или выбранным цветом. Простейшая незамкнутая линия ограничена двумя точками, именуемыми узлами. Узлы также имеют свойства, параметры которых влияют на форму конца линии и характер сопряжения с другими объектами. Все прочие объекты векторной графики составляются из линий. Например, куб можно составить из шести связанных прямоугольников, каждый из которых, в свою очередь, образован четырьмя связанными линиями. Возможно, представить куб и как двенадцать связанных линий, образующих ребра.
На рис. 4.3б представлен пример векторного изображения, состоящего из трех связанных линий.
Выбор растрового или векторного формата зависит от целей и задач работы с изображением. Если нужна фотографическая точность цветопередачи, то необходим растр. Логотипы, схемы, элементы оформления удобнее представлять в векторном формате. Понятно, что и в растровом и в векторном представлении графика (как и текст) выводятся на экран монитора или печатное устройство в виде совокупности точек.
4.1.3. Особенности графики для Web
Графика широко используется в Web. Известно, что одно небольшое изображение может заменить целую страницу текста. В информационном содержании Web-страниц графическая информация занимает все более весомое место.
Главной особенностью графики в Web-дизайне является то, что она обычно соседствует с текстовой информацией и элементами интерфейса (кнопками, переключателями и т. п.), и это соседство приходится учитывать при создании изображений. Основное назначение графики в том, чтобы привлечь внимание к Web-странице в целом или к отдельным ее фрагментам, а также представить информацию, которую трудно описать словами. Иначе говоря, графика используется и для оформления страницы, и для представления информации (иллюстраций). Она может, как существенно помочь посетителю понять информацию, так и наоборот, сбить его с толку, сделать тексты трудночитаемыми. Графический дизайн Web-сайта — дело тонкое, требующее вкуса и чувства меры. Плохое графическое оформление сайта может просто отпугнуть посетителей. В то же время нужно помнить, что посетители возвращаются к сайту снова и снова благодаря, прежде всего, его информативности, а не красоте.
Другая немаловажная особенность графики для Web заключается в довольно жестких ограничениях, накладываемых на объем файлов. И это связано не столько с экономией дискового пространства компьютера, сколько с пропускной способностью каналов связи. В настоящее время, большинство посетителей Интернета используют подключение к серверу через модем. Сегодня наиболее производительные модемы обеспечивают скорость передачи данных 57 600 бит/с (около 6 Кбайт/с). Многие используют модемы производительностью 33 600 бит/с и ниже. Если Web-страница загружается в браузер дольше 10 с это раздражает посетителей, которые могут уйти по другому адресу, так и не дождавшись окончания загрузки. Отсюда следует, что надо стремиться к тому, чтобы Web-страница не превышала по объему 50—60 Кбайт. Для графических изображений это довольно серьезное ограничение, требующее от дизайнеров особых знаний и умения. В частности, нужно хорошо разбираться в форматах файлов и способах монтирования изображений в Web-страницу.
Третья особенность графики состоит в том, что в мире встречаются компьютеры, построенные на различных платформах. Так, существуют компьютеры на платформе PC и на платформе Macintosh. Мониторы этих компьютеров имеют различную яркость. Если этого не учитывать, то одна и та же картинка, великолепно выглядящая на одном мониторе, может потерять свою выразительность на другом.
4.1.4. Форматы графических данных для Web
В компьютерной графике применяют, по меньшей мере, три десятка форматов файлов для хранения изображений. Но лишь часть из них стала стандартом «де-факто» и применяется в Web-дизайне.
BMP (BitMaP).
Формат предназначен для хранения растровых изображений без сжатия. Точки изображения описываются построчно. Недостаток – большой объем файла. BMP применяется крайне редко именно ввиду огромных объемов неупакованных данных и лучше всего подходит разве что для хранения оригиналов ценных изображений для их дальнейшего преобразования.
Файлы изображений в формате BMP имеют расширение bmp.
JPEG (Joint Photographic Experts Group).
Формат предназначен для хранения растровых изображений. Позволяет регулировать соотношение между степенью сжатия файла и качеством изображения. Применяемые методы сжатия основаны на удалении «избыточной» информации.
JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16,7 миллионов. Очевидно также, что чем выше степень компрессии(сжатия) такого изображения, тем ниже его качество. Web-мастеру, создающему для сайта иллюстрации в формате JPEG, необходимо помнить следующее правило: при изготовлении иллюстраций в формате JPEG рекомендуется избегать использования больших участков, заполненных одним цветом, во избежание появления на изображении постороннего цветового «шума» и «грязи». Несоблюдение этого правила может повлечь за собой ряд неприятных последствий: например, картинка в формате JPEG, содержащая достаточно большое пространство, заполненное одним цветом, будет выглядеть на экране компьютера «грязно» и неопрятно, фон сохраненного в JPEG логотипа, «подогнанный» под фоновый цветHTML-документа, «поплывет» при изменении свойств экранной палитры.
При работе со стандартом JPEG следует учитывать, что сжатию с наименьшей потерей качества поддаются изображения, сохраненные с высоким разрешением. В процессе обработки иллюстраций лучше всего сохранять картинку в другом формате и переводить в JPEG лишь готовый результат, поскольку каждое промежуточное сохранение файла JPEG на диск приводит к удалению второстепенной информации и ухудшению качества рисунка.
Файлы изображений в формате JPEG имеют расширение jpg или jpeg.
GIF (Graphics Interchange Format).
Стандартизирован в 1987 году как средство хранения сжатых изображений с фиксированным (256) количеством цветов. Получил популярность в Интернете благодаря высокой степени сжатия. Последняя версия формата GIF89a позволяет выполнять чересстрочную загрузку изображений и создавать рисунки с прозрачным фоном. Ограниченные возможности по количеству цветов обусловливают его применение исключительно в электронных публикациях.
Подготавливая рисунок для сохранения в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения.
Файлы изображений в формате GIF имеют расширение gif.
PNG (Portable Network Graphics).
Сравнительно новый (1995 год) формат хранения изображений для их публикации в Интернете. Поддерживаются три типа изображений – цветные с глубиной цвета 8 или 24 бит/пиксел и черно-белые с градацией до 256 оттенков серого. Сжатие информации происходит практически без потерь.
Поскольку данный формат появился на свет относительно недавно, его поддерживают далеко не все браузеры, в отличие от GIF и JPEG, которые распознаются без проблем любыми программами, предназначенными для отображения графики. PNG поддерживается Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше. Старые браузеры отобразить картинку в формате PNG не смогут.
Файлы изображений в формате PNG имеют расширение png.
Какой формат лучше использовать: GIF или JPEG?
Обычно формат JPEG рекомендуют использовать для фотографий или изображений с постепенным цветовым переходом, на которых снижение качества (сопутствующее сжатию по этой технологии) ради получения файла наименьшего размера, наименее заметно. Правильнее будет разделить все изображения на «искусственные», содержащие резкие контрастные переходы цветов или большие площади, залитые однородным, «плоским» цветом (рис. 4.4а), и «естественные» – те, в которых все плавно, неоднородно и не слишком четко (рис. 4.4б). Изображения, создаваемые с помощью компьютера (графических программ), – логотипы, текстовые заголовки и т. д. – по этой классификации чаще принадлежат к «искусственным», а сканированные фотографии и рисунки – к «естественным». Однако нередки и исключения из этого правила.
а) б)
Рис. 4.4. «Искусственные» и «естественные» изображения
Для большинства типично «искусственных» изображений JPEG противопоказан – как правило, мусор и рябь, появляющиеся возле резких переходов цветов, в них слишком заметны. С другой стороны, GIF может безнадежно испортить красивую фотографию палитрой в 256 цветов. Поэтому граница (довольно-таки расплывчатая) между «искусственными» и «естественными» изображениями по большей части совпадает с границей между форматами GIF и JPEG. В то же время иногда вполне «искусственные» изображения, особенно небольшие по размеру и с темной цветовой гаммой, вполне пристойно выглядят и в JPEG. Критерий при прочих равных условиях – размер получающегося файла.
Чем PNG лучше GIF?
1. PNG реализует открытый, незапатентованный алгоритм сжатия данных, дающий, тем не менее, лучшие результаты, чем GIF.
2. В отличие от GIF с его максимумом в 256 цветов, PNG позволяет хранить полноцветные изображения с 24 и даже 48 битами на пиксел.
3. PNG реализует гораздо более эффективный алгоритм чересстрочности (которую в данном случае правильнее было бы называть «через-пиксельностью»). Достаточно сказать, что первый проход, дающий общее представление об изображении, занимает в PNG не одну восьмую исходного файла, как в GIF, а всего лишь одну шестьдесят четвертую – и тем не менее распознаваемость картинки при этом заметно лучше.
4. PNG позволяет хранить полную информацию о степени прозрачности в каждой точке изображения в виде так называемого альфа-канала. Каждый пиксель PNG-файла, вне зависимости от его цвета и местоположения, может иметь любую градацию прозрачности – от нулевой (полная непрозрачность) до абсолютной невидимости.
5. Чтобы сгладить различия в яркости дисплеев, существующие между разными типами компьютеров (и, соответственно, между создаваемыми на них изображениями), PNG позволяет хранить в файле исходный коэффициент яркости того дисплея, на котором изображение было создано. Это дает возможность программам просмотра перед выводом на экран регулировать яркость изображения, приспосабливая ее к особенностям данной видеосистемы (так называемая гамма-коррекция).
4.1.5. Ускорение загрузки графики для Web
Многие начинающие web-дизайнеры, разрабатывая свой первый самостоятельный проект, сталкиваются иногда с весьма трудной задачей, связанной с отображением графики в документах HTML. Проблема заключается в том, что каждый HTML-документ должен быть максимально компактным, тогда как большое количество иллюстраций, появляющихся, например, при создании виртуального фотоальбома, значительно перегружает файл, пропорционально увеличивая время его считывания с сервера.
Решить эту проблему, оптимизировав объем итогового HTML-документа, можно двумя методами.
Первый методзаключается в следующем. Создавая фотоальбом, подготовьте две копии каждого изображения: одну – нормального размера и качества, такую, которую вы и хотели бы поместить на своюWeb-страницу, а вторую – в уменьшенном масштабе и с низким разрешением. Разместите наWeb-странице уменьшенные копии картинок, назначив для каждой из них гиперссылку с атрибутомTARGET="_blank", которая перенаправит пользователя к большому графическому файлу. В документ вставьте пояснение для посетителей о том, что щелчок кнопкой мыши на любом рисунке приведет к его загрузке в отдельном окне браузера в увеличенном масштабе. Тогда пользователю, не заинтересованному в разглядывании ваших фотографий, не придется подолгу дожидаться окончания считывания странички с удаленного узла. Если же он все-таки захочет полюбоваться на некоторые из опубликованных вами иллюстраций, ему не составит труда выбрать наиболее интересные из них. Такой подход к представлению графики в Интернете носит название «предварительного просмотра», или, по-английски, preview.
Если назвать файл, содержащий уменьшенную копию картинки, picture1.jpg, а файл нормального размера – picture2.jpg, то HTML-код гиперссылки, описанной выше, может выглядеть следующим образом:
<А HREF="picture2.jpg" TARGET="_blank"><IMG SRC="../picture1.JPG" WIDTH="100" HEIGHT="98" АLT="Уменьшенная картинка" BORDER="0"></A>
Второй методускорения загрузки графических файлов с сервера несколько отличается от предыдущего. Если, предположим, сайт содержит фото галерею, доступ к которой открывается с пятой – шестой страницы по счету, то все содержащиеся в ней графические файлы можно загрузить в клиентский компьютер заранее, на предыдущих страницах, выводя их на экран размером 1x1пиксел.HTML-код, осуществляющий подобный вывод графики, выглядит так:
<IMG SRC="URL графического файла"WIDTH="1"HEIGHT="1">
Изображение при этом станет невидимым для посетителя сайта, но сохранится в кэшеего машины, а при последующем открытии данной картинки она будет загружаться уже с жесткого диска локального компьютера. Таким образом, у пользователя создается впечатление, что изображение выводится на экран очень быстро. Однако за все надо платить: время загрузки предыдущих страниц при этом пропорционально увеличивается. Чтобы посетитель сайта не скучал, в процессе загрузки графики его можно развлечь чем-нибудь другим: например, предложить почитать новости или подборку свежих анекдотов.
4.1.6. GIF-анимация
Возможностей применения движущихся изображений существует великое множество: их можно разместить в заголовках Web-страниц в качестве управляющих навигацией элементов, вместо кнопок, вызывающих почтовый клиент или заносящих ярлык ресурса в системную папку «избранное» с помощью специальногоскрипта, выполненного на языке Java. Но чаще всего анимированная графика встречается в размещаемой на Интернет-сайтах рекламе, то есть в виде разнообразныхбаннеров. Использование в рекламных изображениях движущихся элементов стало на сегодняшний день повсеместной традицией.
Во Всемирной сети применяют несколько видов анимации. Среди современных подходов следует упомянуть технологию Macromedia Flash, оперирующую векторными графическими объектами, и технологиюJava, когда графика и текст перемещаются посредством включения вHTML-документ специального кода, обрабатываемого клиентским браузером совместно с кодом самойWeb-страницы. Оба эти варианта не лишены ряда недостатков. Прежде всего, это пропорциональное увеличение времени загрузкиHTML-документа, которое к тому же чрезвычайно плохо поддается регулировке. Более того, для отображения элементов flash требуется специальная надстройка для пользовательского браузера, а скрипт Java не будет обработан браузерами старых версий и браузерами, в которых отключена поддержка этого языка. Остановимся на наиболее традиционном способе передачи движения наWeb-странице, а именно – наGIF-анимации.
Вскоре после появления стандарта GIF было замечено, что принцип записи графической информации в файл этого формата позволяет помещать под одним заголовком последовательность отдельных кадров, которые можно чередовать на экране с определенным временным интервалом. Именно эта особенность файлов GIF, точнее – модификации данного стандарта, известной под названием GIF89a, и легла в основу анимации, исторически первой появившейся в Интернете. Для того чтобы пользователи Всемирной сети могли наблюдать GIF-анимацию, не требуется какого-либо дополнительного программного обеспечения, помимо любого стандартного браузера, поддерживающего отображение графики.
Процесс подготовки анимированного GIF можно условно разделить на несколько этапов: создание отдельных кадров, генерация движущегося изображения и оптимизация целевого файла. Базовые кадры формируются в любом графическом редакторе и сохраняются на диске в формате GIF, их изготавливают приблизительно по такому же принципу, по которому создается обычная мультипликация. Рекомендуется заранее нарисовать соответствующий вашей задумке шаблон – файл, содержащий изображение фиксированного размера с уже нанесенным на него неподвижным фоном, однотонным или текстурным, поверх которого будут перемещаться движущиеся объекты. При подготовке рисунков следует обращать внимание на то, чтобы подвижный элемент смещался в каждом кадре на равное расстояние и именно в том направлении, в котором необходимо. Если, например, какой-то объект должен перемещаться строго по горизонтали, но в одном из кадров он размещен чуть ниже или выше первоначального положения, траектория его движения получится ломаной. Для того чтобы избежать этого, используют имеющиеся в составе большинства профессиональных графических редакторов линейки и направляющие. Если фон будущей анимации предполагается сделать однотонным, можно нанести на ранее созданную заготовку шаблонную сетку, которая по окончании работы без труда удаляется замещением соответствующей цветовой маски фоновым цветом.
Уже в процессе работы над исходными кадрами следует подумать о сокращении размера будущего файла. Во-первых, постарайтесь не включать в анимацию большое количество цветов: чем меньше их число, тем меньше килобайт необходимо будет впоследствии перекачать пользователю с сервера, на котором размещен ваш сайт. Однако простого сокращения числа оттенков, составляющих изображение, как правило, недостаточно: необходимо уменьшить соответствующее значение в используемой файлом цветовой палитре. Необходимо на глаз определить количество составляющих рисунок оттенков, и при переводе изображения в индексированный формат указать эту цифру в параметрах сохраняемого файла. Использование прозрачного фона также уменьшает размер целевого файла.
4.2. Программные средства разработки графики для Web
4.2.1. Основы работы с графическим редактором Adobe Photoshop
Общие сведения
Adobe PhotoshopфирмыAdobe– это самая известная программа для обработки изображений на компьютере. Как следует из названия, она предназначена главным образом для редактирования фотографий, полученных со сканера или цифрового фотоаппарата. Кроме того, она позволяет создавать реалистичные рисунки «с нуля», но эти возможности – второстепенные.
Существует множество версий программы Photoshop. Самая последняя – Photoshop CS2 (9.0). К сожалению, существующие русские переводы иногда искажают смысл команд и пунктов меню до неузнаваемости. Поэтому специалисты рекомендуют использовать только английскую версию.
По своим функциональным и эксплуатационным возможностям Photoshopявляется одной из самых совершенных программ обработки растровой графики и пользуется заслуженным успехом в среде компьютерных дизайнеров. Среди достоинств этой программы можно выделить следующие:
высокое качество обработки графических изображений;
удобство и простота в эксплуатации;
богатые возможности, позволяющие выполнять любые мыслимые операции по созданию и обработке изображений;
широкие возможности по автоматизации обработки растровых изображений, базирующиеся на использовании сценариев;
современный механизм работы с цветовыми профилями, допускающий их внедрение в файлы изображений с целью автоматической коррекции цветовых параметров при выводе на печать для разных устройств;
обширный набор команд фильтрации, с помощью которых можно создавать самые разнообразные художественные эффекты.
Программа Photoshop умеет читать и сохранять изображения практически во всех широко известных компьютерных форматах: BMP,GIF,JPEG,PNGи многих других. Однако ее «родной» формат –PSD, только в этом формате можно полностью сохранить все специальные эффекты, примененные к рисунку. Поэтому чаще всего изображения при обработке хранят в формате PSD, а окончательные версии преобразуют в нужный формат.
Photoshop поддерживает все стандартные операции с файлами, которые можно найти в меню Файл:
|
Новый |
Ctrl+N |
Создать новый файл |
|
Открыть |
Ctrl+O |
Загрузить файл с диска |
|
Сохранить |
Ctrl+S |
Сохранить файл на диске |
|
Сохранить как... |
Shift+Ctrl+S |
Сохранить файл с другим именем, в другом формате или с другом месте |
|
Закрыть |
Ctrl+W |
Закрыть файл |
Команда Файл Открыть последнийпозволяет быстро открыть один из последних рабочих файлов.
Главное окно редактора Photoshop представлено на рис. 4.5.
Рис. 4.5. Главное окно редактора Adobe Photoshop
Photoshop позволяет одновременно работать с несколькими файлами, для каждого из них открывается внутреннее окно. Его можно свернуть, оставить в среднем состоянии или развернуть на всю рабочую область.
Размеры файла для выбранного рисунка можно увидеть в строке состоянийв нижней части окна. Они измеряются в килобайтах (К) или мегабайтах (М). Первое число обозначает размер готового изображения, второе – размер файла с информацией о слоях. Для файлов в формате PSD, содержащих несколько слоев, второе число больше первого. Если числа равны, изображение состоит из одного слоя.
Инструменты для работы выбираются из палитры инструментов (на рис. 4.5 находится слева), свойства выбранного инструмента по умолчанию отображаются в верхней части основного окна. При работе часто используются дополнительные окна (на рис. 4.5 находятся в правой части основного окна).
Ввод изображений
Сканированиемназывают кодирование изображения в компьютерном формате с помощью специального устройства ввода –сканера. Иногда используют выражениеоцифровка изображения, то есть, перевод в цифровую форму.
При сканировании изображение разбивается на пиксели в соответствии с установленным разрешением; для каждого пикселя определяется его цвет, который раскладывается на составляющие R(красный),G(зеленый) иB(синий), и записывается в память компьютера.
Для сканирования используется специальная программа, которая поставляется со сканером. Она позволяет определить область рисунка (прямоугольник) и режимы (параметры) сканирования. Среди параметров наиболее важны два – тип изображенияиразрешение сканирования.
Как правило, сканеры позволяют вводить изображения трех типов:
черно-белые изображения (Line Art), содержащие только два цвета;
изображения в оттенках серого цвета(Grayscale, от белого до черного);
цветныеизображения (Color).
Конечно, можно вводить все изображения как цветные, но при этом увеличивается объем получаемого файла:
черно-белые изображения – 1бит на пиксель (2 цвета);
изображения в оттенках серого цвета – 8бит на пиксель (256 оттенков серого);
цветные изображения – 24бита на пиксель (модель RGB: по 8 бит на канал, всего 16777216 цветов).
Таким образом, цветной рисунок того же размера занимает (при том же разрешении) в 24 больше места в памяти, чем черно-белый.
Если изображение надо будет потом обрабатывать (например, ретушировать фотографию), рекомендуют всегда вводить его как цветное, а затем переводить в нужный формат окончательный вариант. Это позволяет улучшить качество рисунка.
Качество изображения и размер файла напрямую определяются установленным разрешением сканирования. Нужное разрешение зависит от цели сканирования. Если изображение предназначено для последующей обработки, рекомендуется сканировать его с наибольшим приемлемым разрешением и обрабатывать в этом режиме, а затем окончательный вариант сохранять с нужным разрешением. Можно привести некоторые рекомендации по выбору разрешения сканирования:
для текста с математическими формулами – не менее 200 ppi(точек на дюйм);
для текста, предназначенного для распознавания с помощью специальных программ – 300-400 ppi;
для фотографий – 300-600 ppi;
Предельное разрешение сканера определяется его техническими характеристиками. Обычно сканеры имеют различное разрешение по длине и ширине. Для современных моделей разрешение меняется от 1200ppi до4800ppi.
Цифровые фотоаппараты сразу записывают изображение в цифровой форме – в виде точечного рисунка. В отличие от обычных фотоаппаратов, свет падает не на фотопленку, а на электронную матрицу, состоящую из отдельных элементов. Каждый элемент преобразует попавший на него свет в формат RGB. Информация со всех элементов составляет растровый рисунок. Цифровые фотографии могут храниться в так называемом «сыром» формате (RAW), то есть, хранится точно та информация, которая поступила с датчиков матрицы. Но чаще всего используют форматыJPEGилиTIFF– в них используется сжатие изображения и файлы занимают значительно меньше места нафлэш-карте. Photoshop умеет обрабатывать файлы во всех этих форматах, включаяRAW.
Для передачи отснятых изображений на компьютер надо подключить фотоаппарат с помощью специального кабеля к порту USB. После этого в Проводнике Windows можно обращаться к карте памяти фотоаппарата как к обычному диску: копировать и удалять файлы.
Кадрирование
Кадрирование – это «обрезка» рисунка. Слово кадрирование пришло из фотографии, где оно применяется для компоновки кадра.
Кадрирование необходимо в двух случаях:
при сканировании часто захватывается не только сам рисунок, но и посторонние элементы, которые надо удалить (например, неровные края фотографии);
художественное кадрирование, которое состоит в том, чтобы обрезать изображение для увеличения выразительности и для того, чтобы подчеркнуть основную мысль фотохудожника.
Для обрезки рисунка используют инструмент Рамкана панели инструментов (Crop, включается при нажатии клавишиC). Необходимо выделить прямоугольник, ограничивающий нужный кадр. Все, что не попало в область выделения (и не войдет в кадр), затеняется.
Размеры прямоугольника можно менять, используя маркеры в его углах и на сторонах. Если вывести указатель мыши за границы выделенной области, можно вращать прямоугольник выделения. Это нужно, если края фотографии не параллельны краям области сканирования.
При нажатии на клавишу Enterрисунок будет обрезан по границе прямоугольника, для отмены надо нажатьEsc.
В современных версиях программы Photoshop существует удобное средство автоматического кадрирования. Программа умеет распознавать границы фотографий и вырезать их из файла, полученного со сканера. Важно, что эта команда работает даже в том случае, если было отсканировано сразу несколько изображений – при этом создается несколько новых изображений.
Для использования автоматического кадрирования необходимо загрузить нужный файл и выбрать пункт меню ФайлАвтоматизацияКадрировать и выпрямить фотографию.
Масштабирование изображения
Часто требуется увеличить часть изображения, например, для того, чтобы точнее выделить какой-либо объект. Кроме того, Photoshop позволяет редактировать и большие рисунки, которые не помещаются на экране – их надо уменьшать, для того, чтобы просмотреть полностью. В обоих случаях надо установить правильный масштаб– увеличение. Масштаб 100 % обозначает, что 1 пиксель рисунка соответствует 1 пикселю на экране. Если масштаб меньше 100% – рисунок уменьшается, если больше – увеличивается (максимум до 1600 %).
Когда программа загружает файл, масштаб выбирается автоматически так, чтобы весь рисунок поместился на экране. Масштаб указываться в заголовке окна изображения и в левом нижнем углу в строке состояния.
Существует несколько способов изменения масштаба:
Ввести с клавиатуры нужный масштаб в строке состояния.
Использовать сочетания клавиш и соответствующие пункты меню Вид:
Ctrl++
Увеличить масштаб.
Ctrl+–
Уменьшить масштаб.
Ctrl+0
Показать во весь экран.
Alt+Ctrl+0
Масштаб 100%.
Сочетания Alt+Ctrl++иAlt+Ctrl+–позволяют не только увеличивать и уменьшать размеры рисунка, но и «подгонять» под них размеры окна.
Включить инструмент Увеличениена панели инструментов (Zoom, включается при нажатии клавишиZ). После щелчка по рисунку он увеличивается, при нажатой клавишеAlt– уменьшается. Этим инструментом можно также обвести на рисунке прямоугольник, который надо увеличить. Если отметить флажокИзменить размеры окна до подходящихна панели свойств инструмента, будет меняться не только масштаб, но и размеры окна.
Если рисунок не помещается в окно, для сдвига видимой области можно использовать линейки прокрутки или инструмент Рука(Hand, включается при нажатии клавишиH), который позволяет «схватить» и перетащить рисунок в окне. ИнструментРукаможно временно включать, не выключая активный инструмент – для этого надо удерживать клавишу пробел.
Удобно также использовать окно навигатора (Окно Навигатор). В нем выводится уменьшенное изображение, красная рамка (ее можно перетаскивать мышкой) показывает видимую часть. Движок внизу служит для изменения масштаба.
Изменение цветового режима изображения
Для того, чтобы определить цветовой режим загруженного изображения, необходимо выбрать пункт меню ИзображениеРежими посмотреть, какой пункт верхнего списка отмечен галочкой. Photoshop поддерживает следующие режимы:
Битовый (Bitmap) – двуцветное черно-белое изображение;
Градации серого(Grayscale) – изображение в 256 оттенках серого;
Дуплекс(Duotone) – изображение образуется путем смешения двух цветов (плюс белый);
Индексированные цвета(Indexed) – изображение с палитрой цветов (от 2 до 256 цветов);
RGB– полноцветное изображение, цвет в формате RGB;
CMYK– полноцветное изображение, цвет в формате CMYK;
Lab– полноцветное изображение, цвет в формате Lab.
Это же меню можно использовать для преобразования из одного формата в другой. Однако при этом часть информации может быть потеряна. Например, при преобразовании цветного рисунка в черно-белый теряется информация о цвете. Если же переводить полноцветное изображение в индексированный режим, цвета пикселей будут искажены, так как палитра может содержать от 2 до 256 цветов.
Изменение разрешения изображения
Чтобы определить размеры изображения, необходимо вызвать окно Изображение Размер изображения. Оно показывает размеры изображения в пикселях и в сантиметрах.
Можно изменить разрешение изображения двумя способами:
Сохранить размер в пикселях, изменяя размер в сантиметрах (при этом рисунок не искажается, потерь информации нет).
Сохранить размер в сантиметрах, изменяя размер в пикселях (при этом рисунок искажается, поскольку при увеличении разрешения добавляются новые пиксели, а при уменьшении некоторые пиксели удаляются).
Изменение яркости и контраста изображения
Настройка многих приборов, имеющих экран (телевизоров, мониторов), выполняется двумя регуляторами, которые изменяют яркость и контраст изображения. В Photoshop также есть возможность менять эти характеристики рисунка.
Автоматическая настройка контраста выполняется с помощью пункта меню ИзображениеКоррекцияАвтоконтраст(Alt+Shift+Ctrl+L). Для ручной коррекции необходимо вызвать окноИзображениеКоррекцияЯркость/Контраст, которое содержит два движка-регулятора.
Слои
Изображение в Photoshop может включать в себя несколько слоев. Во многих случаях это удобно, потому что позволяет разделить весь рисунок на независимые части, каждая из которых может редактироваться и перемещаться отдельно, не затрагивая другие. Рекомендуют также выполнять все сложные операции с копией слоя, чтобы потом в случае ошибки можно было легко вернуться к исходному изображению.
При создании рисунка изначально он содержит особый непрозрачный слой – задний план(илифон, background). Затем сверху можно добавлять новые слои (вначале они будут прозрачными), в каждом из которых может быть некоторое изображение.
Слои накладываются друга на друга и мы видим рисунок на экране так, как если бы мы смотрели сверху на все слои. Через прозрачные области верхнего слоя видны нижние слои. Слои могут быть полупрозрачные (например, с непрозрачностью 30 %), в этом случае через изображение проступает нижний слой.
Слои можно удалять, менять местами, объединять. Чаще всего все операции выполняются с одним слоем, который называется активным. Некоторые инструменты (например,Волшебная палочкаилиШтамппозволяют работать одновременно со всеми слоями. Для этого надо отметить флажокИспользовать все слоив палитре свойств инструмента.
Каждый слой занимает дополнительное место в памяти, поэтому ненужный слои лучше удалять или объединять.
4.2.2. Создание простейшей анимации в редакторе Adobe ImageReady
Вместе с программой Photoshop поставляется вторая программа – Image Ready, которая специально разработана для подготовки иллюстраций, размещаемых в Интернете.
Две программы очень хорошо взаимодействуют между собой и понимают формат PSD. Работая с изображением, можно быстро переключаться из Photoshop в Image Ready и обратно, нажав на клавишиCtrl+Shift+M(или через менюФайл→Редактировать в Image Ready).
Программа Image Ready позволяет создавать анимированные («оживленные») рисунки. Они строятся по очень простому принципу: в файле хранятся несколько изображений одинакового размера. Они сменяют друг друга через заданные промежутки времени. За счет этого можно показывать движение объектов.
Необходимо учитывать, что для того, чтобы движение было более плавным, нужно увеличивать количество кадров, но при этом обязательно увеличивается и размер файла. Так что на практике необходим компромисс между качеством анимации и размером файла.
При разработке анимации используется описанный ранее механизм слоев. В простейшем случае каждый кадр анимации содержится в отдельном слое. Дополнительно Image Ready позволяет автоматически генерировать нужное число промежуточных кадров межу двумя опорными при создании эффектов движения и изменения формы.
По окончании разработки анимация может быть экспортирована в формат GIF илиMacromedia Flash.