В. Г.

Мануйлов

PHOTOSHOP ДЛЯ МУЛЬТИМЕДИЙНЫХ

ОБРАЗОВАТЕЛЬНЫХ ПРОЕКТОВ
 Содержание
1. ИСТОЧНИКИ И ФОРМАТЫ ГРАФИЧЕСКИХ ФАЙЛОВ ................................................................... 4
РАСТРОВАЯ И ВЕКТОРНАЯ ГРАФИКА .......................................................................................................... 4
ФОРМАТЫ РАСТРОВОЙ ГРАФИКИ................................................................................................................. 5
ФОРМАТ GIF............................................................................................................................................................ 5
ФОРМАТ JPEG ......................................................................................................................................................... 5
ФОРМАТ PNG .......................................................................................................................................................... 5
ФОРМАТ TIFF .......................................................................................................................................................... 5
ФОРМАТ ВЕКТОРНОЙ ГРАФИКИ FLASH...................................................................................................... 6
РАЗМЕРЫ ФАЙЛОВ РАСТРОВЫХ ИЗОБРАЖЕНИЙ ................................................................................... 6
ГДЕ ВЗЯТЬ ИЗОБРАЖЕНИЯ ............................................................................................................................... 6
СКАНИРОВАНИЕ ИЗОБРАЖЕНИЯ И ТЕКСТА ............................................................................................. 7
СКАНИРОВАНИЕ ИЗОБРАЖЕНИЯ .............................................................................................................................. 7
Задание 1. ............................................................................................................................... 7
СКАНИРОВАНИЕ И РАСПОЗНАВАНИЕ ТЕКСТА .......................................................................................................... 9
Задание 1.2 ........................................................................................................................... 10
«ИЗВЛЕЧЕНИЕ» ТЕКСТА С ЭКРАННОЙ КОПИИ ...................................................................................... 11
Задание 1.3 ........................................................................................................................... 11
2. РЕДАКТИРОВАНИЕ ИЗОБРАЖЕНИЙ В СРЕДЕ ПРОГРАММЫ PHOTOSHOP.......................... 13
КАДРИРОВАНИЕ ИЗОБРАЖЕНИЯ ................................................................................................................. 13
ИНСТРУМЕНТЫ КАДРИРОВАНИЯ ............................................................................................................................ 13
ВЫДЕЛЕНИЕ ПРЯМОУГОЛЬНОЙ ОБЛАСТИ .............................................................................................................. 14
Задание 1 .............................................................................................................................. 14
ВЫДЕЛЕНИЕ ЭЛЛИПТИЧЕСКОЙ ОБЛАСТИ............................................................................................................... 15
Задание 2 .............................................................................................................................. 15
КАДРИРОВАНИЕ С ВОЗМОЖНЫМ ВРАЩЕНИЕМ ВЫДЕЛЕННОЙ ОБЛАСТИ ............................................................... 17
Задание 3 .............................................................................................................................. 17
ВЫДЕЛЕНИЕ ПРОИЗВОЛЬНЫХ ОБЛАСТЕЙ ИЗОБРАЖЕНИЯ ............................................................. 18
ВЫДЕЛЕНИЕ ОБЛАСТИ С ПОМОЩЬЮ ИНСТРУМЕНТА ЛАССО ................................................................................. 19
Задание 4 .............................................................................................................................. 19
ВЫДЕЛЕНИЕ ОБЛАСТИ С ПОМОЩЬЮ ИНСТРУМЕНТА МНОГОУГОЛЬНОЕ ЛАССО ........................................................ 19
Задание 5 .............................................................................................................................. 19
ВЫДЕЛЕНИЕ ОБЛАСТИ С ПОМОЩЬЮ ИНСТРУМЕНТА МАГНИТНОЕ ЛАССО ............................................................ 20
Задание 5 .............................................................................................................................. 20
ВЫДЕЛЕНИЕ ОБЛАСТИ С ПОМОЩЬЮ ИНСТРУМЕНТА ВОЛШЕБНАЯ ПАЛОЧКА ....................................................... 20
Задание 6 .............................................................................................................................. 21
ИЗМЕНЕНИЯ РАЗМЕРОВ ИЗОБРАЖЕНИЯ .................................................................................................. 21
Задание 7 .............................................................................................................................. 22
ПОВОРОТ ИЗОБРАЖЕНИЯ ............................................................................................................................... 23
Задание 8 .............................................................................................................................. 23
КОРРЕКЦИЯ ЯРКОСТИ И КОНТРАСТНОСТИ ИЗОБРАЖЕНИЯ........................................................... 24
Задание 9 .............................................................................................................................. 24
ГРАФИЧЕСКИЙ ТЕКСТ...................................................................................................................................... 25
ВВОД И РЕДАКТИРОВАНИЯ ТЕКСТА ....................................................................................................................... 25
Задание 10 ............................................................................................................................ 25

2
ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЯ ДЛЯ ВЕБ-СТРАНИЦЫ И СЛАЙДОВ ПРЕЗЕНТАЦИИ.............. 27
СОХРАНЕНИЕ ОПТИМИЗИРОВАННОГО ФАЙЛА ИЗОБРАЖЕНИЯ В ФОРМАТЕ JPEG ................................................. 27
Задание 10 ............................................................................................................................ 27
СОХРАНЕНИЕ ОПТИМИЗИРОВАННОГО ФАЙЛА ИЗОБРАЖЕНИЙ В ФОРМАТЕ GIF.................................................... 29
Задание 11 ............................................................................................................................ 29

3
1. Источники и форматы графических
файлов
Растровая и векторная графика
Графические изображения могут быть двух типов: растровые и векторные. Растровое
изображение представляет собой массив точек – пикселов. Каждый писксел содержит ин-
формации о цвете. При выводе изображения на экран дисплея растровое изображение ото-
бражается подобно мозаике. Самыми близкими аналогами растровой графики является жи-
вопись, фотография, изображение на сетчатке глаза. При увеличения качество растрового
изображения ухудшается, что демонстрируется рис. 1.1 и рис. 1.2.

Рис. 1. 1. Исходное растровое изображение

Рис. 1. 2. Фрагмент исходного растрового изображение после увеличения

Векторное изображение строится на экране дисплея из кривых (кривые Безье), которые

задаются математическими формулами. Самым близким аналогом векторной графики явля-
ются знакомый каждому школьнику метод построения графиков на координатной сетке. При
увеличении или уменьшении векторного изображения его качество не меняется. На рис.1.3
показано два автомобиля с гонщиком. Изображение большого автомобиля является увели-
ченной копией меньшего изображения. Дорога, по которой едет автомобиль, представляет
собой кривую Безье. Для наглядности на кривой Безье показаны узлы, которые соединяются
кривыми, рассчитываемыми по математическим формулам. Плавность кривых достигается
тем, что в узлах кривые имеют равные производные.
Изображение элементов машины и гонщика «собрано» из отдельных кривых Безье. Для
примера на рис. 1.4 показано частично «разобранное» на фрагменты изображение автомоби-
ля и гонщика, при этом на фрагменте изображения кузова выведены узлы кривой Безье.

4
 Рис. 1.3. Увеличенное векторное изображение и кривая Безье (дорога)

Рис. 1.4. Кривые Безье, образующие фрагмент кузова машины

Форматы растровой графики

Формат GIF
Формат файлов растровой графики GIF (Graphics Interchange Format - формат обмена
графическими данными) разработан компанией CompuServe и используется для представле-
ния растровых изображений. Имена файлов формата GIF имеют расширение GIF. В данном
формате изображение не может иметь более 256 цветов, в нем используется метод сжатия
без потерь, при котором распакованное изображение в точности соответствует оригиналу
Алгоритм сжатия, используемых в этом формате, в наибольшей степени подходит для
создания изображений, содержащих линии (логотипы, чертежи, рисунки, текст, представ-
ленный в виде графики); изображений, состоящих из областей, закрашенных равномерно без
плавных переходов к другим цветам; изображений с прозрачным фоном и анимированных
изображений.
Формат JPEG
Формат файла JPEG (Joint Photographic Experts Group - Объединенная экспертная груп-
па по фотографии) предназначен для хранения изображений с большой глубиной цвета, на-
пример, полученных при сканировании фотографий с многочисленными оттенками цвета, а
также с цифровых фотокамер. Файлы этого формата имеют расширение JPG или JPEG. В
формате используется алгоритм сжатия с потерями информации.
Формат PNG
PNG (Portable Network Graphic - переносимый сетевой формат) разработан для замены
формата GIF. Подобно формату JPEG формат PNG сохраняет яркость и оттенки цветов в фо-
тографиях, поддерживает прозрачность фона и детали изображения в линейных рисунках,
логотипах, или иллюстрациях с текстом. Формат PNG использует свободный от потерь ин-
формации алгоритм сжатия.
Формат TIFF
Формат растровой графики TIFF (Tagged Image File Format) используется в настольных
издательских системах, программах передачи факсов, а также для передачи растровых изо-
бражений, в том числе полученных при сканировании, между различными прикладными
программами. Файлы изображения этого формата имеют расширение TIFF или TIF. Формат
TIFF используется для хранения черно-белых изображений, изображений с фиксированной
цветовой палитрой и полноцветных изображений, в нем используется алгоритм сжатия фай-
5
ла без потери информации. Изображения, выполненные в формате TIFF, перед использова-
нием их на страницах веб-сайтов должны быть преобразованы в один из описанных выше
форматов, например, с помощью графического редактора Photoshop.

Формат векторной графики Flash

Формат Flash SWF является единственным векторным форматом, который используется
при создании веб-страниц. Файлы данного формата имеют расширение SWF. Для того, что-
бы браузер мог читать данный формат необходимо установить соответствующее plag-in
(расширение). Данный plag-in устанавливается автоматически при загрузки из сети веб-
страницы с вставленными на них изображениями формата Flash SWF. Качество изображения
формат Flash SWF не изменяются при изменении его размера.

Размеры файлов растровых изображений

При подготовке в графическом редакторе Photoshop файлов изображений для веб-
страниц можно изменять степень сжатия файла изображения. При этом чем больше степень
сжатия, тем меньше цветов используется для формирования изображения и, соответственно,
тем хуже качество изображения. На рис. 1.5 приведены результаты обработки отсканиро-
ванной цветной фотографии размером 4,5 см х 6 см. Исходный формат отсканированного
файла TIFF. Данный файл был сохранен в трех форматах PNG, GIF и JPEG с разной степе-
нью сжатия.

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

Где взять изображения

Изображения, которые вы хотите разместить на веб-страницах можно:
• взять из коллекций, записанных на CD-дисках;
• взять из коллекций изображений, опубликованных в Интернете;
• отсканировать с материальных носителей (рисунок, фотография, текст, ноты,
таблицы и др.);
• получить с помощью цифровых фотоаппарата и видеокамеры, телевизора и
видеомагнитофона;
• использовать копии экрана (скриншоты);
6
 • взять из коллекции Картинок (Microsoft);
• нарисовать в графическом редакторе

При использовании изображений из первых трех источников необходимо учитывать

ограничения, накладываемые Законом РФ «Об авторском праве и смежных правах».
В настоящее время в Интернете имеется достаточное число веб-сайтов, на которых размеще-
ны бесплатные анимированные и статические изображения. Список некоторых из этих веб-
сайтов приводится на веб-странице http://manuilov.narod.ru/ssilki/ssilki.htm

Сканирование изображения и текста

При необходимости размещения на слайдах изображений, оригиналы которых выпол-
нены на материальном носителе, для получения электронной копии изображения использу-
ется сканер.
В качестве примера рассмотрим процедуру сканирования изображений на планшетном
сканере HP scanjet 5400c
Сканирование изображения
Для сканирования изображения воспользуемся программой Photoshop CS21, т.к. в слу-
чае необходимости можно сразу же отредактировать отсканированное изображение и преоб-
разовать его в формат GIF, JPEG или PNG с одновременной настройкой (оптимизацией) ка-
чества изображения.

Задание 1.
Для сканирования изображения необходимо выполнить следующие действия.
1. Положите на стекло сканера носитель с изображением (оригинал) и закройте
крышку сканера.
2. Запустите программу Photoshop.
3. Выберите команды: File, Import, HP Precisionscan Pro 3.1.
4. Выделите мышью область оригинала (оригинал целиком или его фрагмент), кото-
рую необходимо отсканировать (рис. 1.6), и щелкните на кнопке Вернуться в. Бу-
дет произведено сканирование, после завершения которого отсканированное изо-
бражение импортируется в программу Photoshop (рис. 7).
5. Выберите команды: File, Save As (можно выбрать Save). Откроется диалоговое
окно Save As.
6. Откройте папку, в которой будет сохранен текстовый файл.
7. Введите в текстовое поле Имя файла имя, под которым будет сохранен файл изо-
бражения.
8. Выберите из списка Тип файла: (*.TIF,*.TIFF).2
9. Щелкните на кнопке Сохранить.

1
Можно использовать программу Photoshop предыдущих версий.
2
Отметим, что целесообразно сохранять файл отсканированного изображения в формате TIFF, а затем, если
возникает необходимость, конвертировать в формат программы Photoshop (PSD).
7
 Рис.1.6. Выделенная для сканирования область

Рис. 1. 7. Отсканированное изображение

При сканирование оригинала маленького размера или фрагмента оригинала целесооб-

разно проводить сканирование при большем разрешении.
1. Выберите команды: Сервис, Изменить разрешение.
2. Щелкните на кнопке Вернуться в. Откроется диалоговое окно Smart Friend HP
Precisionscan Pro, в котором необходимо активизировать кнопку-переключатель
Сканировать с текущим значением разрешения, а затем щелкнуть на кнопке
ОК.
3. В случае если требуется увеличить масштаб отображения выделенной области,
выберите команды: Просмотр, Увеличить.

При сканировании оригиналов формат А4, фотографий стандартного размера (напри-

мер, 9 см х 12 см) и др. можно использовать разрешение, равное 200 dpi, что обеспечивает
достаточное качество отсканированного изображения для его дальнейшей обработки и раз-
8
мещении на слайдах презентации. Отметим, что с увеличением разрешения сканирования
возрастает размер файла отсканированного изображения. Для примера на рис. 1.8 представ-
лена зависимость размера файла, сохраненного в формате TIFF, при сканировании оригинала
2 см х 2 см при различных значениях разрешения. На графике рядом с каждой точкой указан
размер файла в Кбайт. График описывается уравнением тренда y = 0,0038x1,8983 с достовер-
ности R2 = 1.

Рис. 1. 8. Зависимость размера отсканированного файла от разрешения сканирования

Сканирование и распознавание текста

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

3 Отметим, что текст, введенный в текстовый редактор Word с использованием «экзотического» шрифта, мож-
но преобразовать в изображение, если сделать его экранную копию (скриншот), а затем вставить в графический
редактор и сохранить файл изображения в нужном формате (см. «Извлечение» текста с экранной копии»).
9
Задание 1.2
Рассмотрим алгоритм сканирования и распознавания текста с помощью программы
ABBYY FineReader 7.0 Professional.4
1. Положите на стекло сканера бумажный носитель с текстом (текст может содер-
жать рисунок) и закройте крышку сканера.
2. Запустите программу FineReader 7.0 Professional.
3. Выберите команды: Файл, Сканировать изображение. Будет запущена програм-
ма HP Precisionscan Pro 3.1.
4. Выделите мышью область оригинала (рис. 1.9), которую необходимо отсканиро-
вать, и щелкните на кнопке Вернуться в. Будет произведено сканирование, после
завершения которого отсканированное изображение импортируется в Окно изо-
бражение и Окно крупным планом программы FineReader.

Рис. 1.9. Главное окно программы FineReader после завершения распознавания

5. Выберите команды: Процесс, Распознать (можно щелкнуть на кнопке Распо-

знать). Распознанный текст вместе с картинкой появится в окне Окно текст.
Символы, которые программа не смогла распознать, выделены серыми прямо-
угольниками и их можно исправить непосредственно в этом окне, ориентируясь на
увеличенное изображение в окне Окно Крупный план или оригинал текста (рис.
1.10).

4 FineReader —система оптического распознавания символов (Optical Character Recognition - OCR) предназна-
чена для автоматического ввода печатных документов в компьютер.

10
 Рис. 1.10. Редактирование отсканированного текста

6. После завершения редактирования выберите команды: Файл, Передать страни-

цы в, Microsoft Word. Распознанный текст и картинка будут переданы в тексто-
вый редактор Word (рис. 1.11).

Рис. 1.11. Распознанный текст и картинка в окне текстового редактора Word

«Извлечение» текста с экранной копии

Рассмотрим алгоритм «извлечения» текста с экранной копии, снятой, например, со
страницы руководства пользователя, поставляемого на CD-диске в формате PDF.

Задание 1.3
1. Скопируйте экран в буфер обмена, нажав на клавишу PrtScn (если необходимо
скопировать только активное окно, то нажмите клавиши Alt+ PrtScn).
2. Запустите программу Photoshop и выберите команды: File, New. Откроется диало-
говое окно New.
11
3. Щелкните на копке ОК этого диалогового окна. Появится холст, по размеру рав-
ный размеру снятой копии.
4. Выберите команды: Edit, Paste. Копия экрана будет скопирована на холст
(рис.1.12).

Рис. 1.12. Выделение текстового фрагмента

5. Выделите требуемый текст или текст с рисунком, используя инструмент Crop

Tool (С) (Кадрирование).
6. Выберите команды: File, Save As (Файл, Сохранить как). Откроется диалоговое
окно Save As.
7. Откройте папку, в которой будет сохранен файл.
8. Введите в текстовое поле Имя файла имя сохраняемого файла.
9. Выберите из списка Тип файла пункт (*.TIF,*.TIFF).
10. Щелкните на кнопке Сохранить. Откроется диалоговое окно TIFF Options.
11. Активизируйте кнопку-переключатель None и щелкните на кнопке ОК, а затем
еще раз щелкните на кнопке ОК в окне подтверждения.
12. Запустите программу FineReader.
13. Выберите команды: Файл, Открыть изображение. Откроется диалоговое окно
Открыть изображение.
14. Откройте папку, в которой был сохранен файл с изображением текста (или текста
с рисунком). Выделите имя этого файла и щелкните на кнопке Открыть.
15. Выберите язык распознавания.
16. Выберите команды: Процесс, Распознать.
17. Отредактируйте (если требуется) распознанный текст и выберите команды: Файл,
Передать выбранные страницы в, Microsoft Word. Распознанный текст (и кар-
тинка) будут переданы в текстовый редактор Word.

12
2. Редактирование изображений в среде программы
Photoshop
Чаще всего изображения, полученные из перечисленных выше источников, требуют
дополнительного редактирования.5 В настоящее время лучшей программой для редактирова-
ния является Adobe Photoshop. Рассмотрим ряд алгоритмов редактирования изображений,
чаще всего используемых в веб-дизайне на примере версии программы Adobe Photoshop
CS2.6

Кадрирование изображения
При кадрировании изображения отсекается часть изображения вокруг выбранной об-
ласти.
Инструменты кадрирования
Инструменты кадрирования, чаще всего используемые при подготовке изображений
для веб-страниц, представлены на рис. 2.1 – Rectangular Marquee Tool (Выделение прямо-
угольника), Eliptical Marquee Tool (Выделение эллипса) и Crop Tool (С) (Кадрирование).

Рис. 2.1. Инструменты Rectangular Marquee Tool, Eliptical Marquee Tool и Crop Tool

При выборе инструментов Rectangular Marquee Tool (Выделение прямоугольника),

Eliptical Marquee Tool (Выделение эллипса) открывается соответствующая панель управле-
ния (рис. 2.2).7

Рис. 2.2. Панель управления инструментами кадрирования

На панели размещены следующие основные элементы управления:

• New selection (Новое выделение) –устанавливается режим формирования но-
вой выделенной области при удалении ранее выделенной;
• Add to selection (Добавить к выделенному) устанавливается режим добавле-
ния новой выделенной области к ранее выделенной;
• Subtract from selection (Вычесть из выделенного) устанавливается режим
вычитания новой выделенной области из ранее выделенной;
• Intersect with selection (Пересечь с выделенным) устанавливается режим пе-
ресечения новой выделенной области с ранее выделенной;
• поле Feather (Растушевка) устанавливает ширину размытия границы выде-
ленной области (в пикселах);
5
Перед началом редактирования всегда сохраняйте резервную копию исходного изображения.
6
Перед редактированием изображения всегда сохраняйте резервную копию исходного изображения.
7
При выборе инструмента Crop Tool и описанных далее инструментов также открываются соответствующие
панели управления со своими элементами управления.
13
 • флажок Anti-aliased (Сглаживание) задает режим сглаживания пикселов,
расположенных на границе выделенной области, для инструмента Eliptical
Marquee Tool (Выделение эллипса).

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

• кадрирование с выделением прямоугольной области;
• кадрирование с выделением эллиптической области;
• кадрирование с трансформацией и вращением выделенной области.
Выделение прямоугольной области
Задание 1
1. Запустите программу Photoshop.
2. Откройте файл Гавань.jpg из папки Photoshop для мультимедийных
образовательных проектов.
3. Щелкните на кнопке инструмента Rectangular Marquee Tool (Выделение прямо-
угольника).
4. Установите значение Feather (Растушевка), равным 1 px.
5. Поместите курсор мыши (крестик), например, в верхний левый угол выделяемой
области, нажмите клавишу мыши и не отпуская ее перемещайте курсор мыши к
правому нижнему углу выделяемой области, как показано на рис. 2.3. Выделяемая
область будет обведена пунктирным прямоугольником. При нажатой клавише
Shift выделяемая область будет иметь форму квадрата. Для перемещения области
выделения зацепитесь мышью за границу выделения и перемещайте ее в нужном
направлении.

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

6. Выберите команды: Image, Crop (Изображение, Кадрирование) как показано на

рис. 2.4.

14
 Рис. 2.4. Выбор команды Crop

Результат выполнения данной команды показан на рис. 2.5.

Рис. 2.5. Результат выполнения команд Image, Crop

Выделение эллиптической области

Задание 2
1. Запустите программу Photoshop.
2. Откройте файл Bilbo.jpg из папки Photoshop для мультимедийных
образовательных проектов.
3. Щелкните на кнопке инструмента Eliptical Marquee Tool (Выделение эллипса).
4. Установите значение Feather (Растушевка), равным 1 px.
5. Активизируйте флажок Anti-aliased (Сглаживание).
6. Поместите курсор мыши (крестик), например, в верхний левый угол выделяемой
области, нажмите клавишу мыши и не отпуская ее перемещайте курсор мышы к
правому нижнему углу выделяемой области, как показано на рис. 2.6. Выделяемая
область будет обведена пунктирным эллипсом. При нажатой клавише Shift выде-
ляемая область будет иметь форму круга. Для перемещения области выделения
зацепитесь мышью за границу выделения и перемещайте ее в нужном направле-
нии.
15
 Рис. 2. 6. Выделение эллиптической области

7. Скопируйте выделенную область на новый холст для чего: 8

• выберите команды: Edit (Правка), Copy (Копировать) – выделенная область
будет записана в буфер обмена;
• выберите команду File (Файл) – откроется диалоговое окно New (Но-
вый файл);
• активизируйте кнопку-переключатель Transapent (Прозрачный) в группе
Background Contents: (Тип подложки);
• щелкните на кнопке ОК, будет создан новый холст с прозрачным фоновым
слоем и размерами, совпадающими с диаметрами эллипса, которым выделена
область;9
8. выберите команды: Edit (Правка), Paste (Вставить) – выделенная область, запи-
санная в буфере обмена, будет скопирована на созданный холст (рис. 2.7).
9. Сохраните полученное изображение в формате GIF10.

8
Если будут выбраны команды: Image, Crop, то вместо эллептической области выделения, будет создано изо-
бражения с прямоугольной областью выделения.
9
В том случае, если изображение будет вставляться в веб-страницу, имеющей какой-либо фон, то новый холст
должен иметь прозрачный фоновый слой. При необходимости можно залить фоновый слой любым цветом,
воспользовавшись инструментом Paint Bucket Tool (Заливка).
10
При сохранении в другом формате фон не будет прозрачным.
16
 Рис. 2. 7. Выделение эллиптической области, скопированная на холс с прозрачным фоном

Кадрирование с возможным вращением выделенной области

Задание 3
1. Запустите программу Photoshop.
2. Откройте файл Школьная доска.jpg из папки Photoshop для мульти-
медийных образовательных проектов.
3. Щелкните на кнопку инструмента Crop Tool (С) (Кадрирование).
4. Поместите курсор мыши (крестик), например, в верхний левый угол выделяемой
области, нажмите клавишу мыши и не отпуская ее перемещайте курсор мыши к
правому нижнему углу выделяемой области. Выделяемая прямоугольная область
будет обведена пунктирным прямоугольником с маркерами по углам и по середи-
нам сторон.
5. Для изменения размера выделенной области зацепитесь мышью за любой из мар-
керов и перемешайте мышь в нужном направлении. Для поворота выделенной об-
ласти поместите курсор мыши вне ее (курсор пример форму дугообразной двуна-
правленной стрелки), нажмите клавишу мыши и перемещайте мышь про дуге, вы-
деленная область будет поворачиваться, как показано на рис. 2.8.

17
 Рис. 2. 8. Выделенная и повернутая область кадрирования

6. Выберите команды: Image, Crop (Изображение, Кадрирование). Результат выпол-

нения данных команд показан на рис. 2.9.

Рис. 2. 9. Результат кадрирования с поворотом

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

Достаточно часто при подготовке изображений для веб-страниц необходимо вырезать
произвольный участок изображения. Инструменты: Lasso Tool (Лассо), Poligonal Lasso Tool
(Многоугольное лассо), Magnetic Lasso Tool (Магнитное лассо) и Magic Wand Tool (Маги-
ческая палочка), предназначенные для решения данной задачи показаны на рис. 2.10 и рис.
2.11.

Рис. 2. 10. Инструменты Lasso Tool, Poligonal Lasso Tool и Magnetic Lasso Tool

18
 Рис. 2. 11. Инструмент Magic Wand Tool

Выделение области с помощью инструмента Лассо

Инструмент Lasso (Лассо) служит для выделения области изображения произвольной
формы.

Задание 4
1. Запустите программу Photoshop.
2. Откройте файл Наша газета.jpg из папки Photoshop для мультимедий-
ных образовательных проектов.
3. Щелкните на кнопку инструмента Lasso (Лассо).
4. Установите на панели управления значение Feather (Растушевка), равным 1 px.
5. Активизируйте на панели управления флажок Anti-aliased (Сглаживание).
6. Нажмите левую кнопку мыши и, не отпуская ее, обводите требуемую область вы-
деления. Выделяемая область будет «окружаться» линией. При достижении на-
чальной точки выделения отпустите кнопку мыши, линия замкнется.
7. Скопируйте выделенную область (алгоритм копирования описан выше), например,
на новый холст с белым фоном (на рис. 2.12 слева показано исходное изображе-
ние с выделенной областью, а справа - скопированная выделенная область).

Рис. 2. 12. Выделенная инструментом Лассо область и ее копия на белом фоновом слое

Выделение области с помощью инструмента Многоугольное лассо

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

Задание 5
1. Запустите программу Photoshop.
2. Откройте файл Наша газета.jpg из папки Photoshop для мультимедий-
ных образовательных проектов.
3. Щелкните на кнопку инструмента Poligonal Lasso Tool (Многоугольное лассо)
4. Установите на панели управления значение Feather (Растушевка), равным 1 px.
5. Активизируйте на панели управления флажок Anti-aliased (Сглаживание).

19
 6. Нажмите левую кнопку мыши, щелкните кнопкой мыши и перемещайте мышь.
Нарисовав отрезок, вновь щелкните кнопкой мыши и переместите ее, чтобы нари-
совать следующий отрезок. Углы многоугольника определяются точками, где
производились щелчки мыши. При достижении начальной точки выделения (око-
ло курсора появится кружок) щелкните кнопкой мыши, многоугольник замкнется.
7. Скопируйте выделенную область (алгоритм копирования описан выше), например,
на новый холст с требуемым фоном.
Выделение области с помощью инструмента Магнитное лассо
Инструмент выделяет область, имеющую четкий контур. Для примера рассмотрим вы-
деление области (голова) из исходного изображения, показанного на рис. 2.14.

Задание 5
1. Запустите программу Photoshop.
2. Откройте файл Вопрос.jpg из папки Photoshop для мультимедийных
образовательных проектов.
3. Щелкните на кнопку инструмента Magnetic Lasso Tool (Магнитное лассо).
4. Установите на панели управления значение Feather (Растушевка), равным 1 px.
5. Активизируйте на панели управления флажок Anti-aliased (Сглаживание).
6. Щелкните на кнопке New selection (Новое выделение), размещенной на панели
настройки (рис. 2.13) инструмента Magnetic Lasso Tool (Магнитное лассо). Фраг-
мент панели настройки показан на рис. 2.13.

Рис. 2. 13. Фрагмент панели настройки инструмента Магнитное лассо

7. Нажмите левую кнопку мыши и, не отпуская ее, ведите курсор мыши по контуру
выделяемой области изображения. При достижении начальной точки выделения
(около курсора появится кружок) отпустите кнопку мыши, область выделения
замкнется.
8. Скопируйте выделенную область, например, на новый холст с прозрачным фоном
(на рис. 2.14 слева показано исходное изображение с выделенной областью, а
справа - скопированная выделенная область).

Рис. 2. 14. Выделенные инструментом Магнитное лассо область и ее копия на прозрачном фоне

Выделение области с помощью инструмента Волшебная палочка

Инструмент Волшебная палочка позволяет выделять множество областей одного цве-
та. Рассмотрим пример выделения и копирования изображения, представленного слева на
рис. 2.16, на холст с прозрачным фоновым слоем (справа на рис. 2.15).

20
Задание 6
1. Запустите программу Photoshop.
2. Откройте файл Наша газета.jpg из папки Photoshop для мультимедий-
ных образовательных проектов.
3. Щелкните на кнопку инструмента Magic Wand Tool (Волшебная палочка).
4. Установите на панели управления инструментом Magic Wand Tool (Волшебная
палочка) параметр Tolerance (Допуск), равным 32 px. Данный параметр определя-
ет диапазон оттенков пикселов изображения, отличных от цвета выбранного для
выделения пиксела.
5. Активизируйте на панели управления флажок Anti-aliased (Сглаживание).
6. Щелкните на белом фоне изображения. Появятся выделенные области, окружен-
ные пунктирными линиями.
7. Щелкните на кнопке Edd to selection (Добавить к выделенному), размещенной на
панели настройки инструмента Magic Wand Tool (Волшебная палочка лассо).
8. Щелкните на внутренних областях букв «А». В результате проделанных операций
на изображении будут выделены все области, закрашенные белым цветом.
9. Выберите команды: Select Inverse (Инвертировать), которая инвертирует – меняет
вестами выделенную и невыделенную области.
10. Скопируйте выделенную область (алгоритм копирования описан выше), например,
на новый холст с прозрачным фоном (на рис. 2.15 показано исходное изображение
с выделенной областью и скопированные выделенные области).
11. Сохраните полученное изображение в формате GIF.

Рис. 2. 15. Выделенные инструментом Волшебная палочка области и их копии на прозрачном фоновом слое

Изменения размеров изображения

Достаточно часто необходимо увеличить или уменьшить линейные размеры изображе-
ния (ширину и/или высоту).11 При увеличении линейных размеров качество изображения
ухудшается в большей степени, чем при уменьшении. Отметим, что процесс изменения раз-
меров необратим, так, например, увеличение размеров после проведенного уменьшения,
продолжает ухудшать качество изображения, поэтому необходимо провести откат проделан-
ных операций с помощью инструментов палитры History (История) и начать все заново. Ес-

11
При изменение линейных размеров изображения с помощью средств прикладной программы, в документ ко-
торой вставляется изображение (например, программ PowerPoint, Word, Excel, FrontPage и др.) размер файла
изображения не изменяется.
21
ли же результат изменения линейных размеров был записан в файл, то надо воспользоваться
резервной копией исходного изображения.
Зависимость изменения размера файла изображения с линейными размерами 2505 х
3978 пикселов, сохраненного в формате JPEG, от пропорционального изменения размеров
(%) представлена на рис. 2.16. График описывается уравнением тренда y = 0,001x2 -
2
0,0024x + 0,039 с достоверности R = 1.

Рис. 2. 16. Зависимость изменения размера файла (Мбайт) от изменения размера изображения (%)

Задание 7
1. Запустите программу Photoshop.
2. Откройте файл Шатл.jpg из папки Photoshop для мультимедийных об-
разовательных проектов.
3. Выберите команды: Image, Image Size (Изображение, Размер изображения). От-
кроется диалоговое окно Image Size, показанное на рис. 2.17. В верхней области
окна указывается размер файла Pixel Dimensions (Размер в пикселах) исходного
изображения (was 9,5 М) и размер файла после изменения размеров изображения
(561 К).
4. Активизируйте флажки Constrain Proportions (Сохранять пропорции) и Resample
Image (Интерполяция изображения). Если необходимо изменить ширину и высоту
независимо друг от друга, то флажок Constrain Proportions необходимо снять.
Значение Resolution (Разрешение) для изображений, предназначенных для разме-
щения на веб-страницах, принято устанавливать равным 72 pixels/inch (72 пик-
сел/дюйм).
5. Введите в текстовом поле Width (Ширина), расположенном в группе Pixel
Dimensions (Размеры в пикселах), требуемое значение ширины (или в текстовом
поле Height (Высота) требуемое значение высоты)12.
6. Щелкните на кнопке ОК.

12
При установленном флажке Constrain Proportions (Сохранять пропорции) можно изменять либо ширину,
либо высоту, а при снятом флажке – и ширину и высоту изображения.
22
 Рис. 2. 17. Диалоговое окно изменения размера изображения

Поворот изображения
При необходимости изображение можно повернуть.

Задание 8
1. Запустите программу Photoshop.
2. Откройте файл Мяч.psd из папки Photoshop для мультимедийных обра-
зовательных проектов.

3. Выберите команды: Image, Rotate Canvas (Изображение, Повернуть холст). От-

кроется меню второго уровня, показанное на рис. 2.18. Меню содержит команды:
• 180° - поворот на 180°;
• 90° CW — поворот на 90° по часовой стрелке;
• 90° CCW — поворот на 90° против часовой стрелки;
• Arbitrary (Произвольный) — поворот на произвольный угол;
• Flip Horizontal (Отразить горизонтально) — зеркальное отражение по гори-
зонтали;
• Flip Vertical (Отразить вертикально) — зеркальное отражение по вертикали.

23
 Рис. 2. 18. Команды меню Повернуть холст

4. Для поворота на фиксированный угол или отражения изображения по вертикали

или горизонтали выберите соответствующую команду.
5. Для поворота изображения на произвольный угол выберите команду Arbitrary
(Произвольный), откроется диалоговое окно Rotate Canvas (Поворот холста). Ак-
тивизируйте кнопку-переключатель CW или CCW и введите в текстовое окно
Angle (Угол) требуемый угол поворота изображения и щелкните на кнопке ОК.

Коррекция яркости и контрастности изображения

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

Задание 9
1. Запустите программу Photoshop.
2. Откройте файл Девочка.jpg из папки Photoshop для мультимедийных
образовательных проектов.
3. Выберите команды: Image (Изображение), Adjustment (Настройка), откроется ме-
ню второго уровня.
4. Выберите команду: Brightness/Contrast (Яркость/Контрастность). Откроется диа-
логовое окно Brightness/Contrast, показанное на рис. 2.19. Установите флажок
Preview (Предварительный просмотр).
5. Изменяя положения ползунков Brightness и Contrast, добейтесь требуемых ре-
зультатов. Пример изменения яркости и контрастности изображения показан на
рис. 2.19 (левый рисунок – исходный, справа – откорректированный).

24
 Рис. 2. 19. Коррекция яркости и контрастности изображения

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

Задание 10
1. Запустите программу Photoshop.
2. Откройте файл Космонавт.tif из папки Photoshop для мультимедийных
образовательных проектов.
3. Щелкните на кнопке инструмента Туре (Текст) и выберите Horizontal Type Tool
(Горизонтальный текст) как показано на рис. 2.20.

Рис. 2.20. Выбор инструмента Horizontal Type Tool

4. Щелкните на холсте. На холст будет добавлен прозрачный слой.

5. Установите значения элементов управления инструмента Туре (Текст) в соответ-
ствии с показанными на рис. 2.21.

25
 Рис. 2.21. Настройка инструмента Horizontal Type Tool

6. Для установки цветов текста щелкните на кнопке Set the text color (показана на
рис. 2.21) и установите следующие составляющие цвета текста: (R – 26, G – 248, B
– 199).

Рис. 2.22. Установки цвета текста

7. Введите текст «КОСМОНАВТ». Для выхода из режима создания текста щелкните,

например, на кнопке Rectangular Marquee Tool (Выделение прямоугольника)
или же на букве Т в палитре Layers (Слои).
8. Щелкните на кнопке Move (Перемещение) и переместите текстовый слой на хол-
сте как показано на рис. 2.23).
9. Выберите команды: Layer (Слой), Layer Style (Стиль слоя), Drop Shadow (Отбро-
сить тень). Откроется диалоговое окно, показанное на рис. 2.24.

Рис. 2.23. Выбор команд для настройка тени

10. Создайте тень в соответствии с настройками, показанными на рис. 2.24.

26
 Рис. 2.24. Настройка тени

11. При необходимости отредактируйте текст, для чего дважды щелкните на букве
«Т» в палитре Layers (Слои), выделите текст и внесите изменения как в тексте, так
и в настройке элементов управления инструмента Туре (Текст). Выйдите из режи-
ма редактирования.

Оптимизация изображения для веб-страницы и слайдов

презентации
Изображение, созданное в программе Photoshop, необходимо сохранить либо в формате
JPEG, GIF или в PNG (т. к. формат PNG не совместим с некоторыми браузерами, рассмот-
рим форматы JPEG и GIF).
В процессе сохранения файла изображения в указанных форматах имеется возможность
выбора формата и степени сжатия файла таким, чтобы размер файла был минимальным при
хорошем качестве изображения.
Сохранение оптимизированного файла изображения в формате
JPEG
Задание 10
1. Запустите программу Photoshop.
2. Откройте файл Красная шапочка.psd из папки Photoshop для мульти-
медийных образовательных проектов.

27
3. Выберите команды File (Файл), Save For Web (Записать для Веб). Откроется диа-
логовое окно Save For Web, показанное на рис. 2.25.
4. Щелкните на ярлычке вкладки 2-Up – откроется два окна с изображениями, в пер-
вом из которых выводится оригинальное, а во втором – оптимизированное изо-
бражение. Под оригинальным изображением указано имя файла и его размер, под
оптимизированным – формат файла, его размер и время загрузки изображения в
браузер при скорости 28.8 Kbps. В строке состояния слева расположен раскры-
вающийся список масштабов Zoom Level (Масштаб) представления изображения.
Выберите масштаб Fit on Screen. Если необходимо просмотреть определенный
участок изображения, находящийся вне окна изображения, щелкните на кнопке
Hand (Рука), расположенной в левой верхней части диалогового окна Save For
Web. Поместите курсор мыши на изображение, нажмите клавишу мыши и не от-
пуская ее, переместите изображение в требуемое направлении и отпустите кнопку
мыши.
5. С правой строны диалогового окна расположена панель управления. Настройте
параметры изображения:
• выберите в раскрывающемся списке Settings (Настройки) формат JPEG;
• выберите в раскрывающемся списке Compression quality (Качество сжатия),
например, Maximum (Максимальное);
• активизируйте флажок Progressive (Прогрессивный), что обеспечивает по-
степенное повышения качества изображения в процессе его загрузки на веб-
страницу;
• при необходимости измените размеры изображения, для чего откройте
вкладкуImage Size (Размер изображения), установите новые размеры и щелк-
ните на кнопке Applay (Применить).
• Щелкните на изображении, которое вас устраивает по качеству и размеру
файла, а затем на кнопке Save (Сохранить) и сохраните оптимизированный
файл изображения.

28
 Рис. 2.25. Диалоговое Save For Web

6. Сохраните оптимизированное изображение, щелкнув на кнопке Save (Сохранить).

Сохранение оптимизированного файла изображений в формате GIF

Задание 11
1. Запустите программу Photoshop.
2. Откройте файл Красная шапочка.psd из папки Photoshop для мульти-
медийных образовательных проектов.
3. Выберите команды File (Файл), Save For Web (Записать для Веб).
4. Щелкните на ярлычке вкладки 2-Up.
5. Настройте на панели управления параметры изображения:
• выберите в раскрывающемся списке Settings (Настройки) файловый формат
GIF;
• выберите в раскрывающемся списке Color (Цвет) число цветов, используе-
мых для формирования изображения;
• активизируйте флажок Progressive (Прогрессивный), что обеспечивает по-
степенного повышения качества изображения в процессе его загрузки на веб-
страницу;
• при необходимости измените размеры изображения, для чего откройте
вкладку Image Size (Размер изображения), установите новые размеры и
щелкните на кнопке Applay (Применить).

6. Сохраните оптимизированное изображение, щелкнув на кнопке Save (Сохранить).

29
Вопросы для самоконтроля:

1. Графический редактор предназначен для:

создания и редактирования шрифта

работы с графическими изображениями

редактирования текста

построения диаграмм
Ответ: работы с графическими изображениями

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

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

3. Для выделения круга необходимо удерживать нажатыми клавиши:

Alt+Ctrl

Shift

Esc

Alt+Del
Ответ: Shift

4. Для копирования выделенной области необходимо выполнить команды:

Edit, Copy

Edit, Cut

Alt + Print Screen

Ответ: Edit, Copy

5. Инструмент предназначен для:

определения цветовых параметров выделенной области

определения цветовых параметров пикселя

заливки другим цветом выделенной области

Ответ: определения цветовых параметров пикселя

6. Текстовая надпись формируется:

на новом текстовом слое

на новом холсте

на выделенном слое
Ответ: на новом текстовом слое

7. При передаче отсканированного текста и вставленного в него рисунка в документ Word в документ
предается:
только текст

текст и картинка

30
 только картинка
Ответ: текст и картинка

8. Команда Save for Web предназначена для записи файла изображения:

в формате HTML

в формате PSD

в форматах TIF (TIFF) или JPG с одновременной оптимизацией

Ответ: в форматах TIF (TIFF) или JPG с одновременной оптимизацией

9. Инструмент Magnetic Lasso Tool предназначен для выделения:

области, имеющей четкий контур

эллиптической области

произвольной области
Ответ: области, имеющей четкий контур

10. При оптимизации изображения достигается:

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

получение изображения высокого качества

получение изображения с минимальным размером файла

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

31