Лекция по теме Обработка растровой графики в программе Adobe Photoshop

Тема: Обработка растровой графики в программе Adobe Photoshop

Цели урока:

Главная дидактическая цель: Сформировать представление о компьютерной графике и областях ее применения.

Операциональные цели:

• выделить основные возможности программы Adobe Photoshop;

• рассмотреть основные инструменты и палитры;

• дать понятие слоя;

• рассмотреть принципы создания анимированных изображений;

• указать на различие форматов графических файлов GIF и JPEG.

Содержание урока:

1. Назначение и основные возможности программы Adobe Photoshop.

2. Интерфейс программы Adobe Photoshop.

3. Работа со слоями и палитрами.

4. Создание GIF-анимации в Adobe ImageReady.

5. Форматы графических файлов для Интернета.

1. Назначение и основные возможности программы Adobe Photoshop

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

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

Выделим основные возможности и особенности программы Adobe Photoshop:

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

• Программа позволяет легко изменять цветовое представление документов (в градациях серого, черно-белого, RGB или CMYK и др.).

• Photoshop - это программа растровой графики, т. е. любой элемент изображения строится по точкам.

• Редактор рассчитан для работы со всеми видами растровой графики, сфера применения которой достаточно широка и охватывает всё - от полиграфии до Интернета.

• Photoshop замечательно работает как приложение для сканирования фотографий, и совместим со всем видами сканеров. Это очень удобно, так как полученное изображение вы можете тут же и отредактировать, не перетаскивая его в другие программы.

• В последних версиях в связке с Photoshop идет программа Adobe ImageReady, которая открывает много возможностей для оптимизации размера файла, что актуально для Web-графики. Также она позволяет значительно облегчить подготовку анимированных изображений, используя все возможности Photoshop.

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

2. Интерфейс программы Adobe Photoshop

В левой части экрана находится палитра (панель) инструментов", с помощью которых можно создавать и редактировать изображение: выделять его области, перемещать их, закрашивать и т. д. Их в Photoshop довольно много, поэтому они объединены в группы. Рядом с некоторыми пиктограммами расположена маленькая стрелочка. Если по ней щелкнуть, то открывается всплывающая палитра, содержащая инструменты, входящие в группу.

Инструменты выделения

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

Выделение овальной области изображения.

Выделение области шириной в один пиксель по горизонтали.

Выделение области шириной в один пиксель по вертикали.

Лассо. Выделение криволинейной области произвольной формы. При нажатии клавиши Alt можно создать контур, состоящий из прямых отрезков.

Полигональное лассо. Выделение произвольной многоугольной области. От предыдущего отличается тем, что позволяет достичь более точного выделения.

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

Волшебная палочка. Выделение областей на основе сходства цветов.

Инструмент перемещения.

Перемещение выделенной области, слоя или направляющей.

Инструмент кадрирования.

Кадрирование (обрезка) изображения.

Инструменты рисования.

Кисть. Имитация мазков кисти. Края линии нарисованной с помощью кисти несколько размыты.

Карандаш. Создание линии с четкими, не размытыми краями.

Аэрограф. Создание штрихов с мягкими, размытыми краями.

Штамп. Копирование одной части изображения с последующим его наложением на другую часть.

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

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

Узорная кисть событий. Закрашивание изображения с помощью стилизованных мазков, имитирующих начертание различных стилей краски.

Ластик. Удаление фрагментов изображения с возвращением к цвету фона или нижележащего слоя изображения. Выполнение команды при нажатой клавише Alt приводит к восстановлению фрагментов или слоев изображения.

Фоновый ластик. Удаление участков фонового изображения.

Волшебный ластик. Удаление области изображения с заданным цветом

Градиент. Создание плавного перехода от одного цвета к другому с использованием множества промежуточных цветов.

Заливка. Заполнение одинаково окрашенных областей цветом переднего плана.

Инструменты редактирования.

Размытие. Уменьшение резкости (контрастности) выбранных фрагментов изображения. Использование этого инструмента при нажатой клавише Alt приводит к увеличению резкости.

Резкость. Повышение резкости (контрастности) выбранных фрагментов изображения. Использование этого инструмента при нажатой клавише Alt приводит к уменьшению резкости.

Палец. Размывание цвета на каком-либо фрагменте изображения.

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

Затемнитель. Затемнение выбранных участков изображения. При нажатии клавиши Alt происходит переключение на инструмент Осветлитель.

Губка. Изменение насыщенности цветов в изображении.

Лечащая кисть. Отбор образца цвета при нажатой клавише Alt и замена цвета.

Вставка.

Замена цвета.

Инструмент Текст

Текст. Создание в изображении надписей на отдельном текстовом слое.

Инструменты масштабирования.

Рука. Перемещение изображения в пределах окна документа

Лупа. Увеличение или уменьшение (при нажатой клавише Alt) масштаба просмотра изображения.

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

Выбор фрагмента. Выделение имеющихся в изображении фрагментов.

Инструменты измерения

Пипетка. Отбор образца цвета. Цвет, отобранный из точки на изображении, становится цветом переднего плана.

Цветовая проба. Получение информации о цвете нескольких точек одновременно

Линейка. Измерение расстояний между любыми точками изображения, а также углов наклонных линий в изображении

3. Работа со слоями и палитрами

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

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

Текст создается и редактируется на особых текстовых слоях. Следует помнить, что если в дальнейшем необходимо редактировать введенный текст, то изображение необходимо сохранять в форматах, поддерживающих слои: PSD, TIFF, PDF.

Чтобы сделать изображение оригинальным и эффектным, к отдельным его слоям применяют различные эффекты. Эффект - это набор некоторых процедур, выполняемых над одним слоем изображения, в результате которого получается имитация тени, свечения, рельефа и т. д. За время существования программы Photoshop появилось много таких эффектов, которые стали стандартными. Это различные тени, ореолы и скосы и др.

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

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

Палитра История (History) отображает все действия и шаги по созданию и редактированию изображения. Существует возможность вернуть документ почти в любое состояние, которое он имел на этапах редактирования.

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

Палитра Навигатор (Navigator) облегчает управление масштабом демонстрации изображений и выбором видимой их части при работе под увеличением, Перемещая бегунок внизу палитры, можно произвольно увеличивать/уменьшать отображение картинки е рабочем окне.

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

4. Создание GIF-анимации в Adobe ImageReady

Анимированные GIF-изображения остаются самым популярным способом "оживления" Web-страницы. Практически они стали стандартом для рекламных заставок в Интернете. Причина этого вполне понятна: большинство посетителей Web-страниц реально могут увидеть GIF-анимацию полностью, независимо от типа имеющегося у них компьютера или применяемого браузера. В этом и состоит отличие GIF от Flash, Java и Dynamic HTML - весьма эффективных и все более популярных форматов, для работы с которыми требуются, однако, специальные дополнительные модули, загружаемые апплеты или новейшие браузеры.

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

Рис. 4.1. Первый кадр

Рис. 4.2. Последний кадр

Сколько же всего может потребоваться кадров для создания анимированной картинки? Изобразим перелет бабочки с одного цветка на другой. На рис. 4.1. изображен первый кадр: бабочка слетает с одного цветка, а на рис. 4.2. последний кадр: бабочка подлетает к другому цветку. Если включить в анимацию только эти два кадра, то мы не увидим собственно движения (полета) бабочки с цветка на цветок, а перед нами будут поочередно сменять друг друга две картинки. Для того, чтобы наблюдать перелет бабочки между цветами, необходимо создать промежуточные кадры, показывающие бабочку в различные моменты этого перелета, как это сделано на рис. 4.3.

Совместно с Photoshop развивается и приложение Adobe ImageReady - программа, поставляемая вместе с Photoshop и предназначенная для оптимизации изображений, создаваемых для Web-страниц, создания анимации и ролловеров (элементов Web-страниц, меняющих свой вид в разных ситуациях). С помощью этой программы проще всего реализуется анимация из заранее подготовленных файлов рисунков, содержащих фазы движения, однако в ней предусмотрена и возможность автоматического расчета промежуточных кадров. Наибольший интерес представляет палитра Animation (Анимация), которая позволяет задавать свойства каждого слоя (рис. 4.4.).

Рис. 4.4. Кадры анимации

5. Форматы графических файлов для Интернета

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

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

Для Web-страницы фотографии лучше всего сохранять в формате JPEG (рис. 1.9), а иллюстрации - в формате GIF (рис. 1.10).

Применение формата GIF: текст, логотипы, иллюстрации с четкими краями, анимированные рисунки, изображения с прозрачными участками.

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

• GIF-файлы практически не сжимаются архиваторами типа FKZIP, т. е, уменьшить размер GIF-файла архивацией вам не удастся.

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

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

• Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFob.

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

• Позволяет сохранять полноцветные изображения с количеством 16,7 млн цветов.

• Использует сжатие с потерями информации, за счет чего достигается большая степень сжатия файлов, т. е. размер файла сильно уменьшается без значительной потери качества изображения, что, естественно, влияет на скорость загрузки файла (изображения) в Интернете.

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

Вопросы для самопроверки:

1. Для каких целей преимущественно используется программная среда Photoshop?

2. К какому типу графических редакторов относится Photoshop?

3. В чем заключаются основные возможности программы Photoshop?

4. В чем особенность слоя в Photoshop? Какие операции можно применить к слою?

5. На каких принципах строится создание анимированных изображений в программе Adobe ImageReady?

6. В каком формате лучше сохранять файлы для публикации их в Интернете? Почему?

7. В чем заключаются особенности формата CIF?

7