Создание составных изображений в растровой графике
план-конспект занятия по информатике и икт (7 класс) по теме

Федерация Интернет Образования

Московский Центр Интернет-образования

Создание составных изображений в растровой графике

(Программа Adobe Photoshop 5.5)

Пособие по разделу курса

«Подготовка изображений для публикации в Web»

Москва 2000 г.

Ястребов Леонид Иосифович, к. ф.-м. н. 

«Создание составных изображений в растровой графике (Программа Adobe Photoshop 5.5)». Пособие по разделу курса «Подготовка изображений для публикации в Web». Московский Центр Интернет-образования. 2000

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

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

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

© Ястребов Л.И.,2000

© Московский Центр Интернет-образования, 2000

СОДЕРЖАНИЕ

Введение.        

Начало работы        

Чего добились:        

Панель инструментов.        

Чего добились:        

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

Чего добились:        

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

Чего добились:        

Волшебная палочка.        

Чего добились.        

Лассо.        

Чего добились:        

Магнитное лассо.        

Чего добились:        

Ластик.        

Чего добились:        

Итог        

Введение.

1. Существует большое число компьютерных компаний, выпускающих программы для обработки растровых изображений. Среди них выделяется компания Adobe Inc., имеющая в своем арсенале целую линейку программ. Одна из них - Adobe PhotoShop - является лидером среди программ такого рода и фактически стала стандартом при сравнении с ней других графических программ (редакторов).
2. Условно можно считать, что для работы 3-й версии программы (Adobe PhotoShop 3.0) достаточно стандартного 386-го компьютера. Для 4-й версии  нужны уже 486-е и 586-е модификации. В частности, уже 4-я версия была выпущена с учетом спецификации ММХ, которые впервые появились на «Пентиумах». В настоящее время широко используется программа Adobe PhotoShop 5.5 и готовится к выходу 6-я версия.
3. В комплекте поставки программы, начиная с 5-й версии содержится учебник (на английском языке) в формате PDF (Portable Document Format), предложенном той же фирмой. Такие документы читаются программой Acrobat Reader. Ниже мы используем  изображения, содержащиеся есть в Lesson 1, а так же частично заимствуем методику изложения. Тем не менее, наши приемы будут значительно отличаться от тех, что предложены фирмой Adobe. Цель таких отличий: дать пусть менее элегантные, но зато надежные и всегда применимые методы.
4. Кроме того, мы с самого начала вводим понятие слоев - фундаментального понятия программы – чтобы обучающиеся смогли сразу начать совершать те ошибки, которые необходимы для последующего освоения профессиональных приемов работы со слоями.

Начало работы

1. Запускаем программу Adobe PhotoShop 5.5. Ее главное меню показано на рисунке, ниже меню приведены переводы соответствующих пунктов. Если сравним его с главным меню программы Word, приведенным на следующем рисунке, то увидим, что характерными особенностями PhotoShop по сравнению с Word  является наличие отдельных меню для работы с изображением (Image), слоями (Layer), способами выделения областей (Select), а также возможность наложения фильтров (Filter). При этом заметим, что меню Окно (Window) включает в себя не только возможность переключаться между окнами отдельных документов, открытых в Программе, но и возможность открывать так называемые палитры - дополнительные окна интерфейса программы.

Главное меню Adobe Photoshop

Главное меню Word

2. Откроем меню Window.  Мы видим, что существует много палитр, объединенных в группы по 3.

3. Нам нужна палитра Navigator. В данном случае панель Navigator уже активирована - в меню имеется строка «скрыть Навигатор» (Hide Navigator).
4. Если выбрать «скрыть Навигатор», то панель Навигатора исчезнет и в меню Window появится строка Show Navigator (Показать Навигатор). После запуска  появится панель Навигатора, приведенная  на рисунке.

5. Красный прямоугольник показывает размеры окна просмотра и его местоположение (смещая прямоугольник, можно менять область просмотра). Левые и правые треугольники уменьшают и увеличивают масштаб просмотра изображения (который отображается в окне слева); того же эффекта можно добиться, смещая ползунок. Заметим, что на этой же палитре присутствует меню “Options”, описанное ниже. Данное меню зависит от того, какой инструмент из палитры инструментов используется.
6. Открыли меню File. С помощью подменю Open  открыли диалог и из папки  “C:\Program Files\Adobe\Photoshop 5.5\Training\Photoshop 5.0\Tutorial\Lesson01” загружаем изображения Start01, End01 Наша задача состоит в том, чтобы построить коллаж - из ‘элементов изображения Start01 собрать портрет End01

Чего добились:

• Сориентировали слушателей относительно уникального места, занимаемого Программой в мире графики, показали, что выбор данной Программы для изучения не случаен.
• Дали сильным слушателям возможность самостоятельной работы.
• Предупредили о работе со слоями. Предотвратили появление комплексов, связанных с ошибками при работе со слоями.
• Научились загружать изображения в Программу.
• Продемонстрировали возможности создания коллажей на примере изображений Start01, End01

Панель инструментов.

1. Закрываем все панели кроме панели инструментов. Изучаем панели отдельных инструментов

Чего добились:

• Познакомились с общим видом Панели инструментов – главной панели Программы.

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

1. На панели инструментов выбрали инструмент «Выделение прямоугольной области».

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

Два раза кликаем левой клавишей по инструменту «Выделение прямоугольной области». Получаем окно диалога для установки опций инструмента выделения.

2. На изображении Start01 обводим  дыню, взяв максимум по вертикали и достаточно места по горизонтали (чтобы все будущие элементы поместились в новой области).
3. Открываем  меню Edit. Копируем выделенную область в буфер обмена с помощью опции Copy.
4. Создаем новый файл, куда поместим рисунок из буфера обмена: File>New

Появилось окно диалога:

Изучаем, каковы характеристики изображения:

• Даем название
• Ширина и высота измеряются (нажали кнопочку выпадающего меню)  в см, дюймах и пикселях.
• Воспользовались возможностью и обсудили, что есть пиксели (см…) (Задали вопрос: сколько сантиметров в дюйме, сколько пикселей в сантиметре – обсудили возникшее недоразумение еще раз).
• Пришли к понятию разрешение (resolution) (см…). Задали стандартное экранное разрешение – 72 пикселя на дюйм.
• Обсудили – откуда Программа взяла числа, приведенные в окошках. Пришли к выводу, что она ориентируется на буфер обмена. При желании проверили эту версию, сделав новое выделение и создав новое изображение. (Заметим, что когда приступаем к созданию нового большего выделения, в момент клика по изображению старое выделение пропадает. Открыли способ снимать выделение – ткнуть в любое место вне выделенной области.)
• Задали фон (contents) как белый.

5. Нажали кнопку ОК. – Создали новое пустое изображение с белым фоном.
6. Edit>Paste. Вклеили изображение дыни. Имеем отдельное изображение дыни.

Чего добились:

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

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

1. Создаем глаз. Нужно вишенку положить на морковку, чтобы получился глаз.

Нужно увеличить изображение, чтобы было легче работать. Инструмент Лупа увеличивает, центрируя, нужную область. Уменьшение: Лупа,Alt. Сочетание клавиш Ctrl,Alt,+  и Ctrl,Alt,-

2. Другим способом изменения масштаба изображения является использование окна Навигатора. 
3. Увеличили вишенку с помощью Лупы.
4. Нажали левой клавишей на прямоугольное выделение, подержали – получили и выбрали эллиптическое выделение.

5. Разместили курсор (крестик) в углу воображаемого прямоугольника, в который может быть вписана вишенка, растянули. Если необходимо, подвинули выделение как целое.
6. Edit\Copy.  Edit\Paste. Взяли инструмент Перетаскивание. Перетащили копию вишенки на морковку. Получили глаз.
7. Тем же способом выделяем  получившийся глаз, обводя уже по морковке. Edit\Copy.  Edit\Paste. Перемещение. Двигается только зрачок. Почему не получается скопировать сразу зрачок-вишенку и радужку-мороковку?
8. Вводим понятие слоя. Демонстрируем, что копию вишенки может двигать, зацепившись Перемещением за слой в любом месте, а не только на вишенке.
9. Можно ли увидеть слои? Как понять – на каком слое мы находимся?
10. Команда Window\Show Layers. Палитра Слои показывает наличие двух слоев.

11. Команда Layer\Flatten Image – спрессовать слои. На палитре слои исчезли, остался Background
12. Выделяем и копируем глаз целиком. Вставляем на дыню. Проверяем, что получился новый слой. Вставляем еще раз. Еще один новый слой.
13. Подгоняем слои на место, попеременно делая их активными. Ошибаемся, смещая background. Не надо смещать обратно: команда Edit\Undo… Проверяем работу «глазков» - их закрывание «убирает» слои. Обращаем внимание, что правый (для нас) глаз человечка кажется темнее, чем левый. Объяснение – локальный контраст. Спрессовать слои. Сохранить картинку как BMP.

Чего добились:  

• Изучили Лупу, увеличение, уменьшение.
• Эллиптическая область выделения, степень ее «эллиптичности», смещение.
• Операции копирования и вставки.
• Слои.
• Палитра слоев. Сделать слой активным, невидимым, подогнать картинку по слоям. Спрессовать слои.
• Отменять любую (непосредственно предшествовавшую) команду.
• Сохранять картинку как BMP.

Волшебная палочка.

1. Переносим «нос». Выбираем инструмент «Волшебная палочка»:

2. Два раза кликаем левой клавишей. Появляется диалоговое меню

3. Обсуждаем инструмент. Обсуждаем понятие Tolerance – толерантность (родственность, сходство, близость).
4. Кликаем на «носу» – выделяем область. Изменяем толерантность. Снимаем выделение (как?). Снова кликаем. Повторяем – следим за результатами. Можно ли взять толерантность больше 100 ? Каково предельное значение толерантности? Запомним это значение.
5. Нельзя снять выделение области привычным способом (каким?), если область выделена целиком. Нужна команда Select\Deselect (Ctrl, D)
6. Обращаем внимание, что в зависимости от того, где кликаем волшебной палочкой, получаем разные выделенные области. Обсуждаем – почему. Число шагов (толерантность) начинает свой отсчет от стартового цвета.
7. Дополнение области – Волшебная палочка с нажатой клавишей Shift. Подсказка: Значок + под изображение инструмента. Что произойдет, если применим  Волшебную палочку и Alt. Вспоминаем, что Alt таким же образом действовал и с Лупой.
8. Строим рабочую гипотезу:

9. Копируем «нос», вставляем его в «лицо», помещаем на место. Прессуем слои. Спасаем картинку.
10. Общий вывод о том, когда имеет смысл применять волшебную палочку.

Чего добились.

• Познакомились с Волшебной палочкой и ее параметрами. Определили критерии ее применения.
• Выявили минимальное и максимальное значения толерантности.
• Добавление и вычитание областей выделения.
• Общая гипотеза о роли вспомогательных клавиш Shift и Alt.
• Познакомились с меню Select.

Лассо.

1. Поставили курсор на лассо. Подержали – появилось меню возможных лассо. Выбрали самое левое – обычное лассо.

2.  Два раза кликнули – появилось диалоговое меню

3. Аккуратно обводим киви. Завершаем обводку. Дважды кликаем и замыкаем контур. Лассо требует очень точной координации действий.
4. Снова кликаем на лассо и удерживаем в нажатом состоянии клавишу. Выбираем вторую иконку – полигональное лассо.
5. Это – кусочно-линейная аппроксимация. Проводим контур вокруг киви. Проводить легче, но полигональный характер виден.
6. Убираем выделение. Включаем галочку в окошке Anti-aliased (сглаживание). Снова проводим контур. Качество намного лучше.
7. Предположим, рука дернулась и часть киви не выделена. Добавлять уже умеем. Но как точно провести границу добавляемой области по границе уже существующей?
8. Достаточно просто захватить уже выделенную область. Добавится только непересекающаяся часть. 

9. Аналогично, с помощью клавиши Shift выделяем область, которую надо вырезать. При этом удаляются только пересекающиеся части выделенных областей.
10. Сделали вывод, что это – общее заключение.
11. Копируем и вставляем «рот» человечка. Сохраняем.

Чего добились:

• Изучили инструмент Лассо. Обычное и полигональное.
• Изучили опцию сглаживания контура.
• Научились дополнять и удалять области выделений. 

Магнитное лассо.

1. Магнитное лассо – инструмент, до некоторой степени обратный Волшебной палочке. Если Палочка «реагирует» на родственные области, то Магнитное лассо – на контраст между областями.

2. Рассмотрим – какая из деталей будущего лица лучше всего поддается выделению магнитным лассо. Долька грейпфрута.
3. Обвели дольку, кликая на местах перегиба, в дополнение к «мнению»  компьютера.

4. Скопировали, вставили. Надо повернуть. Воспользуемся тем, что «ухо» находится в отдельном слое.
5. Select\All/  Выделили все видимое поле. Не должно смущать.
6. Edit\Transform или  Edit\Free Transform.
7. Поиграть с меню. Допустимы любые искажения, связанные с вращением или переносом любой границы выделения параллельно самой себе. Нельзя “выгнуть саму границу”.
8. Поставили ухо на место.

Чего добились:

• Изучили инструмент «Магнитное лассо».
• Познакомились с понятиями цветовой контраст на границе (Edge Contrast), частота узлов (Frequency), Ширина Лассо  (Lasso Width).
• Познакомились с трансформацией выделенной области, с различными  видами искажений, включая вращение и смещение центра вращения.

Ластик.

1. Ухо легло некрасиво – непохоже: слишком ровный обрез.
2. Контур исказить не можем. Остается убрать лишнюю часть.
3. Выбираем Ластик. 

4. Два раза кликнули. Появилось диалоговое меню

5. Исследуем опции. Ластик может быть представлен как Карандаш или как Кисть. И в том и в другом случае важны размеры Ластика.
6. Установим в диалоговом меню опцию Paintbrush (Кисть).
7. Войдем в меню Window и выберем Show Brushes.

8. Какую кисть выбрать и как ее «увидеть»?
9. File\Preferences\Display and Cursors (Файл\Свойства\Указатели) 

10. Выбираем указатели в соответствии с рисунком. Это позволяет видеть размер Кисти при рисовании или стирании, а также «прицел» для всех остальных курсоров (Other Cursors). Можно воспользоваться опцией Предварительного просмотра (Preview).
11. Выберем в палитре Кисти жестко очерченный круг – Карандаш. Его размеры видны на «Ухе». Стирать плохо – получается грубая область.
12. Варианты:

1. Выделим сразу область нужной конфигурации и будем копировать только ее. Лишимся преимуществ магнитного лассо.
2. Выделим на Ухе область, которую надо удалить. Будем стирать ластиком по всему слою, не задумываясь, попадаем ли мы туда, куда надо. Будет стираться только нужная область.
3. Выделим область, которую надо удалить. Нажмем клавишу Del. Выделенная область очистится.

13. Вопрос: зачем  стирать Ластиком, если можно убрать сразу всю область?
14. Ответ: иногда нужно сделать область полупрозрачной. Тогда ставим нужную опцию Ластика.

Чего добились:

• Изучили инструмент Ластик. Познакомились с опциями Ластика.
• Познакомились с окном Window. Научились вызывать палитру выбора и описания кистей, и с ее помощью выбирать размер и жесткость Кисти.
• Научились устанавливать в меню Preferences  вид курсора. Теперь всегда видим реальный размер Кисти, Карандаша, Ластика и любого другого инструмента, воздействующего сразу на несколько пикселей.
• Научились удалять ненужную часть изображения с помощью выделения соответствующей области и работы в ней Ластиком или с помощью клавиши Del.

Итог

В результате - научились работать с основными инструментами, создавать коллаж, т.е. - из различных элементов - целое.

Не путать с монтажом - при монтаже изображение должно смотреться как единое целое. Нужно подбирать цветовой баланс, одинаковую резкость объектов и т.д.

Об этом - в следующих главах.