Текст книги "Работа на ноутбуке"

Глава 23
Работа с графикой

• Adobe Photoshop

• CorelDRAW

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

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

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

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

Формат растровой графики предполагает сохранение в файле информации о каждом пикселе[41]41
  Пиксел – от англ. pixel (picture element – «элемент картинки»). Это минимальный элемент (обычно представляется квадратной точкой) любого изображения на экране. В пикселах измеряется разрешающая способность экранов, а также разрешение всех картинок.


[Закрыть] картинки. Если изображение монохромное (то есть состоит из 256 оттенков серого цвета), то для хранения одного пиксела достаточно 1 байта на носителе информации (28 = 256 значений цвета).

Современные цветные картинки на компьютере могут состоять из 16,7 млн цветов. Любой цвет складывается из трех составляющих: красного (Red), зеленого (Green) и синего (Blue) цветов. Для каждого из них определено 256 оттенков. Таким образом, значение 0 – это отсутствие цвета (то есть если для красного, зеленого и синего установлено значение 0, то это черный цвет), а 255 – максимальная интенсивность. Выходит, что установление значения 255 для каждого из цветов дает на выходе белый цвет. Данная система формирования цвета получила название RGB (аббревиатура от английского названия каждого из цветов).

Приведу несколько примеров. Значение (255; 0; 0) для красного, зеленого и синего соответственно при смешении выдаст ярко-красный цвет, а (35; 101; 61) – темно-зеленый. Именно так формируются все цвета. Число вариаций составляет 16 777 216 или 224. Выходит, что для хранения одного цветного пиксела требуется уже 3 байта свободного места. Поэтому несложно вычислить размер той или иной картинки.

Например, размер изображения составляет 150 на 100, или 15 000 пикселов. 15 000 умножаем на 3 и получаем 45 000 байт данных, либо 43,95 Кбайт (напомню, что 15 000 необходимо делить на 1024, а не на 1000). Иногда добавляется четвертый байт, отвечающий за прозрачность, но используется он в трехмерной графике.

На бумаге разрешение намного выше, чем на экране, поэтому для сохранения четкости требуется большое изображение (современные цифровые фотографии имеют большие размеры). Так, рисунок во весь экран вместится не более чем на треть листа А4, если вы не хотите потерять в качестве. В итоге получается, что один фотоснимок состоит из 3–10 млн пикселов.

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

Наиболее известными «экономичными» форматами являются JPEG, GIF и PNG. Все они распространены в Интернете. Первый использует особый способ сжатия, обусловливающий ухудшение качества. При сохранении по специальному алгоритму рассчитывается, какие пикселы могут быть подвергнуты переработке для лучшей архивации. Чем ниже вы установите уровень качества, тем меньше файл получится на выходе, и наоборот. Этот формат хорошо подходит для фотографий и изображений с большим количеством цветов. Часто, устанавливая значение качества на 50–60 %, можно получить наилучшее соотношение по размеру файла и качеству изображения.

PNG имеет две модификации: PNG-8 и PNG-24. Последняя сжимает картинку подобно архиватору, при этом качество не страдает. Естественно, такой файл занимает больше места, чем JPEG, но значительно меньше, чем формат BMP (без сжатия), применяемый в вышеупомянутом Paint.

PNG-8 и GIF работают по одному принципу. Они хранят палитру только из 256 цветов, часто используемых в рисунке. Таким образом, иногда можно достичь очень высокого качества изображения при минимальном размере файла. К примеру, данные форматы превосходно подходят для хранения чертежей и графиков, для отображения которых требуется мало цветов, да и потери качества, как в случае с JPEG, не происходит.

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

Несколько слов о векторной графике. В файле сохраняется не информация о каж дом пикселе, а информация о том, как рисунок должен быть нарисован. По сути, это свод правил вроде «провести линию из точки A в точку B, сделать ее зеленой» и т. д. Есть множество областей, где векторная графика востребована. К примеру, различные логотипы рисуются именно вектором, после чего переводятся в растр. Вся трехмерная графика тоже векторная. Наиболее известными программами для работы с векторными форматами[42]42
  С векторными, но не трехмерными форматами. Для работы с трехмерной графикой служат такие программы, как 3D Studio MAX, Maya, Lightwave и некоторые другие. Все эти средства крайне дороги и довольно сложны в использовании. Если вас интересует работа с 3D, то рекомендую обратиться к соответствующей литературе.


[Закрыть] являются CorelDRAW и Adobe Illustrator.

Компания Adobe уже долгое время развивает свой редактор растровой графики Photoshop. На момент написания книги его последняя версия достигла индекса 10. Продукт носит название Photoshop CS3 и входит в состав пакета Adobe CS3 (Creative Suite 3).

Примечание

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

Photoshop – это не просто известный и один из лучших графических редакторов. Это уже нарицательное слово, используемое при обозначении различных действий с графикой. Чаще всего данная программа используется для обработки фотографий, то есть уже готовых изображений. Поэтому, услышав слово «зафотошопить» (или ему подобное), не удивляйтесь – оно означает обработать с помощью Photoshop.

Следует отметить, что данный редактор очень дорогой. Стоит он порядка $800 в единичном экземпляре и порядка $1600, если вы приобретаете весь пакет Adobe CS3. Существуют специальные сокращенные версии, продающиеся по более низкой цене.

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

Интерфейс приложения прост и в то же время весьма функционален (рис. 23.1).

Рис. 23.1. Главное окно программы Adobe Photoshop

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

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

Все часто используемые инструменты вынесены на палитру инструментов (рис. 23.2).

Рис. 23.2. Палитра инструментов программы Adobe Photoshop

Вкратце опишу каждый инструмент.

• Move (Перемещение), горячая клавиша – V. Используется для перемещения выделенного фрагмента изображения. Если нажать клавишу Alt, то фрагмент будет скопирован. Копия будет размещена на отдельном слое.

• Marquеe (Выделение), горячая клавиша – M. Предназначен для выделения фрагментов открытого рисунка. Состоит из четырех инструментов, позволяющих выделять различные формы. Чаще всего выбранный по умолчанию Rectan gular Marque (Прямоугольное выделение) применяется для выделения форм с прямыми углами.

• Lasso (Лассо), горячая клавиша – L. Как и Marque (Выделение), служит для выделения. Состоит из трех инструментов. Первый (Lasso (Лассо)) проводит границу выделения, следуя за указателем, после чего замыкает область. Второй (Polygonal Lasso (Полигональное лассо)) выделяет путем рисования большого произвольного полигона. Щелчком кнопкой мыши на точке начала маленькими отрезками вы выделяете нужную область. После замыкаете ее либо самостоятельно, дойдя до точки начала, либо дважды щелкнув кнопкой мыши. Третий инструмент (Magnetic Lasso (Магнитное лассо)) рисует границу выделения по контрастному контуру, к примеру на границе разных цветов (черного и белого, красного и синего и т. д.).

• Quick Selection (Быстрое выделение) и Magic Wand (Волшебная палочка), горячая клавиша – W. Предназначены также для выделения. Лучше всего работают на контрастных рисунках с сильно отличающимися друг от друга цветами. Щелкнув кнопкой мыши на какой-либо части рисунка, вы выделите область с таким же или близким по значению цветом. Первый инструмент выделяет область частями, второй – целиком.

• Crop (Кадрирование), горячая клавиша – C. Позволяет выделить нужный фрагмент изображения, после нажатия клавиши Enter обрезает его до выделенной области.

• Slice (Сегмент), горячая клавиша – K. Предназначен для разметки изображения. Как правило, используется в задачах веб-дизайна для разметки страниц.

• Healing Brush (Исцеляющая кисть), горячая клавиша – J. Служит для восстановления поврежденных фрагментов изображения. Очень удобен при работе с фотографиями, имеющими те или иные дефекты (например, старые отсканированные снимки). Нажав клавишу Alt, вы щелкаете кнопкой мыши на схожем с поврежденным фрагментом участке, после чего, щелкнув кнопкой мыши, проводите по дефекту.

• Brush (Кисть) и Pencil (Карандаш), горячая клавиша – B. Обычная кисть для рисования. Выбрав на панели свойств необходимый размер и форму (рис. 23.3), вы проводите кистью по рисунку. За указателем мыши будет тянуться шлейф. Инструмент Pencil (Карандаш) выполняет аналогичную операцию, только в виде карандаша. Справа от кистей на панели свойств расположено поле Opacity (Непрозрачность), в котором в процентах указывается непрозрачность рисуемых линий. Оно встречается и у многих других инструментов, поэтому стоит его запомнить.

Рис. 23.3. Формы и размеры кистей

• Clone Stamp (Клонирующий штамп), горячая клавиша – S. Работает по аналогичному с Healing Brush (Исцеляющая кисть) принципу, только на месте рисования он выводит изображение с указанного места без изменений.

• History Brush (Кисть истории), горячая клавиша – Y. После открытия какого-либо рисунка и некоторых изменений иногда необходимо отойти к первоначальному значению. Данный инструмент позволяет сделать это для определенной части рисунка, что иногда намного удобнее, чем возвращаться к необработанному оригиналу.

• Eraser (Ластик), горячая клавиша – E. Это ластик. Удаляет все до первого фонового слоя (носит название Background). Если выбрать инструмент Background Eraser (Ластик для фона), то удалится и фон.

• Gradient (Градиент) и Paint Bucket (Заливка), горячая клавиша – G. Первый предназначен для рисования градиентов. На панели сверху можно выбрать предусмотренные варианты переходов цветов и создать собственный, щелкнув кнопкой мыши на выбранном градиенте. Откроется окно Gradient Editor (Редактор градиента) (рис. 23.4), в котором меняются все необходимые параметры. Второй инструмент позволяет залить какую-либо область сплошным цветом. Следует отметить, что работает инструмент Paint Bucket (Заливка) по принципу инструмента Magic Wand (Волшебная палочка) – закрашиваются пикселы схожего цвета.

Рис. 23.4. Окно редактирования градиента

• Blur (Размытие), Sharpen (Четкость) и Smudge (Смазывание), горячая клавиша – R. Все три инструмента служат для определенного искажения рисунка. Первый размывает, второй делает более четким, а третий размазывает изображение.

• Dodge (Осветление), Burn (Затемнение) и Sponge (Губка), горячая клавиша – O. Предназначены для изменения яркости изображения.

• Pen (Перо), горячая клавиша – P. Служит для рисования кривых Безье. С их помощью можно как выделять различные неправильные поверхности, так и рисовать новые.

• Type (Текст), горячая клавиша – T. Предназначен для создания текста. На панели сверху можно указать все необходимые параметры: гарнитуру шрифта, размер, сглаживание, выравнивание и цвет.

• Path Selection (Выделение пути), горячая клавиша – A. Используется для выделения и изменения фрагментов, нарисованных с помощью путей. Последние создаются с помощью инструментов Pen (Перо) и Custom Shape (Заказная форма).

• Custom Shape (Заказная форма), горячая клавиша – U. Служит для рисования различных ранее предусмотренных форм: прямоугольников, кругов, ромбов, линий, а также различных фигур (рис. 23.5).

Рис. 23.5. Варианты кистей для Custom Shape Tool (Заказная форма)

• Notes (Пометки), горячая клавиша – N. Выбрав данный инструмент и щелкнув кнопкой мыши на любой области рисунка, вы откроете окно создания заметки.

• Eyedropper (Пипетка), Color Sampler (Замер цвета), Ruler (Линейка) и Count (Счетчики), горячая клавиша – I. Первые два – набор инструментов для выбора цвета, третий – для измерения расстояния в пикселах, четвертый – для установки цифровых меток.

• Hand (Рука), горячая клавиша – H. Предназначен для перемещения по рисунку в окне. Если изображение не помещается целиком, то внизу окна появляются две полосы прокрутки для перехода к необходимой части картинки. Можно воспользоваться как полосами, так и инструментом Hand (Рука): щелкните кнопкой мыши и, удерживая ее нажатой, передвигайте указатель в нужную сторону.

• Zoom (Масштаб), горячая клавиша – Z. Служит для уменьшения или увеличения масштаба изображения. По умолчанию работает на увеличение. Чтобы уменьшить картинку, нажмите клавишу Alt и щелкните кнопкой мыши.

Под инструментами на панели расположено еще несколько полезных элементов, в частности под иснтрументом Zoom (Масштаб) в двух наложенных друг на друга квадратах задается основной цвет (Foreground Color), а также цвет фона (Background Color). Щелкнув кнопкой мыши на любом из них, вы откроете окно Color Picker (Подбор цвета), которое служит для выбора цвета (рис. 23.6).

Рис. 23.6. Окно Color Picker (Подбор цвета)

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

Перейдем к панелям, расположенным в правой части окна Photo shop. Первая и довольно часто используемая – Navigator (Навигатор) (рис. 23.7). На ней отображается уменьшенный открытый рисунок. В нижней части окна находится специальный ползунок, позволяю щий увеличивать или уменьшать изображение в пределах 0,85–3200 %. При этом, если картинка не помещается в своем окне, на эс кизе красным квадратом будет показана текущая просматриваемая вами область. Вы можете перемещать данный квадрат, и соответственно будет меняться изображение в основном окне. На вкладке Histogram (Гистограмма) представлена гистограмма яркости, а на Info (Инфо) – данные об открытом файле.

Рис. 23.7. Панель Navigator (Навигатор)

Вторая панель (рис. 23.8) содержит вкладки Color (Цвет), Swatches (Образцы цвета) и Styles (Стили). Первые две предназначены для выбора цвета, то есть являются альтернативой окна Color Picker (Подбор цвета). На третьей вкладке можно выбрать предусмотренные стили для текущего слоя.

Рис. 23.8. Панель работы с цветом

Список слоев для текущего рисунка отображается на панели Layers (Слои), расположенной в нижней части главного окна графического редактора (рис. 23.9).

Рис. 23.9. Панель для работы со слоями

Слои – очень удобное приспособление для редактирования изображений. Принцип их работы предельно прост: картинка разделяется на несколько логических частей (слоев), которые накладываются друг на друга. Таким образом, можно создать рисунок из нескольких слоев, после чего одни по необходимости отключать, а другие включать. За данную операцию отвечает глазок, расположенный слева от каждого слоя. Если он есть, то это означает, что слой отображается. Щелкнув на нем кнопкой мыши, вы скроете слой. Помимо этого, в поле Opacity (Непрозрачность) можно задавать прозрачность того или иного слоя.

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

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

Вкладка Styles (Стили), описанная выше, содержит несколько заранее заданных настроек, которые применяются с помощью щелчка кнопкой мыши. Чтобы сделать свои, щелкните правой кнопкой мыши на слое и в контекстном меню выберите пункт Blending Options (Настройки наложения). Откроется окно Layer Style (Стиль слоя), где изменяются все вышеперечисленные настройки (рис. 23.10).

Рис. 23.10. Окно изменения стилей слоя

Весьма полезной является панель History (История) (рис. 23.11).

Рис. 23.11. Панель History (История)

В предыдущих версиях Adobe Photoshop эта панель располагалась над панелью Layers (Слои), но в последней версии она вызывается нажатием кнопки History (История), расположенной напротив вкладки Navigator (Навигатор).

Панель History (История) позволяет отменить ваши действия одним щелчком кнопки мыши. Важно, что вы можете сделать откат на необходимое количество операций.

Обратимся к меню Image (Изображение). В нем можно регулировать различные свойства изображения.

Например, в подменю Mode (Режим) изменяются цветовые режимы. По умолчанию выставляется RGB Color (Цвет RGB), однако есть возможность поменять его на Grayscale (Оттенки серого), Lab Color (Цвет Lab) и CMYK Color (Цвет CMYK).

Для изменения разрешения изображения служат пункты Image Size (Размер изображения) и Canvas Size (Размер холста).

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

Второй же обрезает часть картинки. Canvas Size (Размер холста) – это своеобразный аналог операции Crop (Кадрирование), однако вы можете задать обрезаемую область с точностью до пикселов, либо наоборот – увеличить область рисунка, оригинальное изображение при этом не изменится.

Из пункта Adjustments (Коррекция) можно вызвать различные операции по изменению изображения.

Довольно часто используются Brightness/Contrast (Яркость/Контраст) и Curves (Кривые). Они позволяют менять яркость и контрастность изображения, что зачастую требуется при обработке фотографий (рис. 23.12).

Рис. 23.12. Окна Brightness/Contrast (Яркость/Контраст) и Curves (Кривые)

Не менее полезные функции содержит подменю Rotate Canvas (Поворот холста). Оно позволяет вращать изображение по часовой стрелке или против нее. Кроме того, в нем можно задать зеркальное отражение рисунка по вертикали или горизонтали (рис. 23.13).

Рис. 23.13. Поворот изображения

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

• инвертирование цветов изображения – вызывается сочетанием клавиш Ctrl+I или через меню Image → Adjustments → Invert (Изображение → Коррекция → Инвертировать): все цвета в выделенной области (либо весь текущий слой) поменяются на противоположные;

• инвертирование выделения – вызывается сочетанием клавиш Shift+Ctrl+I или через меню Select → Invert (Выделение → Инвертировать): обратится текущее выделение;

• трансформирование выделения – вызывается сочетанием клавиш Ctrl+T или через меню Select → Transfrom selection (Выделение → Трансформировать выделение): выделенный фрагмент можно трансформировать произвольным образом, меняя его высоту и ширину;

• фильтры – в меню Filter (Фильтр), с помощью фильтров можно наложить на изображение огромное количество эффектов.

Можно сохранять рисунки с различным качеством для экономии места. Adobe Photoshop позволяет делать это в полной мере. Приложение поддерживает большое число распространенных форматов. Остановлюсь на трех, описанных выше: JPEG, PNG, GIF.

На мой взгляд, удобнее с ними работать через меню File → Save for Web & Devices (Файл → Сохранить для веб и устройств) (рис. 23.14). Параметры сохранения расположены справа. Здесь задается формат изображения, а также его качество (только для формата JPEG в поле Quality (Качество)).

Рис. 23.14. Сохранение изображения

Выбрав формат GIF или PNG-8, вы можете указать, сколько цветов сохранять в палитре. Их число может быть кратно степени двойки: 2, 4, 8, 16 и до 256. Кроме того, внизу, в области Color Table (Таблица цветов), показываются все включенные в файл цвета. При необходимости можно какой-либо удалить или заменить.

Если вам интересно посмотреть, как выглядит работа в Adobe Photoshop на практике, рекомендую запустить видеоролик «Урок 23.1. Работа в программе Adobe Photoshop».