Практические работы по редактору растров

Практические работы по редактору растровой графики Adobe Photoshop

Практическая работа № 6
Главное меню программы AdobePhotoshop.

Панель управления и главное меню

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

Рис. Панель управления

Рассмотрим кнопки Панели управления.
Для запуска дополнительной программы для удобного просмотра фотографий в верхней части интерфейса есть кнопка под названием

"Запустить Bridge". Данная функция позволяет непосредственно в окне CS5 открыть программу-библиотеку, с помощью которой можно удобно просматривать и сортировать все фото и видео файлы, находящиеся на вашем компьютере.
Кнопка под названием

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

"Масштаб", который позволяет задавать нужный для отображения на экране размер изображения. При нажатии на нее появляется на выбор четыре пункта: 25 %, 50 %, 100 % и 200 %. При этом в данном элементе можно самостоятельно указать нужный процент масштабирования.
В случае, если вы открыли несколько документов, то при работе с ними очень удобно использовать меню

"Упорядочить документы", т.к. благодаря нему можно выбрать разные варианты отображения окон с открытыми изображениями. Например, есть команды "Расположить вертикально"или "Расположить в сетке", а функция "Актуальные пиксели", которая позволяет отображать документы по очередности в соответствии с размерами картинок, вообще в ndexекоторых случаях просто незаменима. Также полезна команда под названием "Показать во весь экран", которая позволяет подогнать картинку таким образом, чтобы она полностью поместилась на рабочей области программы.
Далее рассмотрим инструмент

"Режимы экрана". Их всего три: "Стандартное окно", "Целый экран с главным меню" и "Целый экран". Если выбрать один из последних двух режимов, то пространство рабочей области программы будет увеличено за счет скрытия некоторых или всех панелей соответственно. Кстати, как мы уже писали выше, для переключения между режимами можно использовать горячую клавишу Tab.
В CS5 можно решать различные задачи с помощью разнообразных инструментов, но иногда бывает сложно переключаться от одного набора панелей и палитр другому. Именно для решения этого вопроса разработчиками программы AdobePhotoshop CS5 и была создана панель под названием "Основная рабочая среда", которая предназначена для выбора рабочей среды. С ее помощью процесс работы в фотошопе значительно упрощается. Данная панель имеет наборы инструментов, которые предназначены для определенного вида работы с картинками. В каждый из наборов включены самые необходимые и часто используемые параметры и панели, которые собственно и позволяют достигать требуемых результатов, как при обработке фотографий, так при создании анимированных изображений или 3D-графики. Рассмотрим их более детально:

• Рабочая среда "Дизайн". Имеет набор палитры цветов, а также панель с оформлением текстовых символов, которые имеют всевозможные настройки вида шрифта и его расположения.
• Рабочая среда "Рисование" в основном имеет наборы кистей и инструментов, которые предназначены для рисования. Также в данной среде включена и палитра цветов.
• Рабочая среда "Фотография" имеет все необходимые элементы для редактирования фото, например, такие как панели: "Коррекция", "Операции" и "История".
• Рабочая среда "Движение" предназначена для удобного создания анимированных картинок.
• Рабочая среда "3D" пригодится вам в работе с 3D-объектами.
Есть и другие рабочие среды, однако мы описали только самые интересные. Стоит отметить, что вы также можете управлять рабочими средами, т.е. создавать новые либо удалять уже имеющиеся.
Главное меню CS5 имеет стандартный вид, который присутствует в аналогичном исполнении не только у большинства графических редакторов, но и вообще у любых программ, созданных для работы на операционных системах семейства Windows - рис.

Рис. Главное меню AdobePhotoshop CS5

Пункт "Файл", который содержит основные команды по открытию, созданию, сохранению, закрытию графических документов, а также функции для импорта, печати и т.д.. Этим пунктом меню приходится пользоваться в основном в начале и конце работы, так как большинство его команд связаны с созданием, открытием и сохранением файлов.
Далее идет пункт "Редактирование", который содержит команды, предназначенные для выполнения основных операций над изображением, например, такие, как: копирование, вырезание, вставка, заливка, масштабирование, трансформирование и т.д.. Здесь находятся основные команды редактирования, многие из которых есть и в других программах, например, Undo (Отменить), Paste (Вставить), Сору (Копировать) и т. д. В конце данного списка находятся команды для настройки клавиатурных сокращений, а также для изменения установок самого AdobePhotoshop CS5.
Следующим идет пункт "Изображение". В этом подменю главного меню сосредоточены команды для работы с изображением. Здесь можно задать режим картинки, например, RGB или Grayscale, откорректировать уровни, контраст, изменить размеры фото и многое другое.
Затем идет следующая группа меню - "Слои". Команды данного пункта позволяют делать операции со слоями, а именно создавать, удалять изменять параметры, упорядочивать, объединять и применять различные эффекты.
Команды пункта "Выделение" - подменю для создания и редактирования выделений. Позволяют инвертировать выделение, задать цветовой диапазон, уточнить край, а также сохранять и загружать выделенные области.
Команды групп "Фильтр" предназначены для налаживания различных эффектов для изображений. Например, выбрав один из фильтров картинку можно размыть, исказить, добавить ей резкости, наложить штрихи и т.д.
Инструмент "Анализ" позволяет сделать подробный анализ изображения, например, топографической карты. В PhotoshopExtended можно определить и рассчитать расстояние, периметр, площадь и другие размеры. Возможность записи нужных данных в вычислительные логи и экспорт этих данных, включая показания гистограммы, в таблицу для дальнейшего анализа. Так, использование Маркера Масштаба (ScaleMarker) позволяет легко масштабировать добавляемый в изображение графический объект, а инструмент Счетчик(Counttool) дает возможность легко и точно рассчитать данные объектов или их деталей в изображениях научного характера. Инструмента Counttool устраняет необходимость выполнять вычисления вручную или полагаться на визуальные оценки изменений.
Пункт "3D" служит для работы с трехмерными объектами. В CS5 есть возможность простого создания и добавления разнообразных 3D объектов в 2D изображения, возможность редактирования существующих текстур на трехмерных моделях непосредственно в PhotoshopExtended, немедленная визуализация результата. PhotoshopExtended поддерживает общепринятые 3D форматы, включая 3DS, OBJ, U3D, KMZ и COLLADA, таким образом, вы можете импортировать, рассматривать и работать с большинством трехмерных моделей.
Пункт "Просмотр" содержит группу команд, позволяющих изменять способ отображения картинки, режима экрана, а также таких дополнительных элементов, как линейки и направляющие.
Команды пункта "Окно" позволяют показывать/скрывать все окна, которые есть в программе.
Заключительным является пункт "Справка". Команды данной группы позволяют открывать документацию по работе с AdobePhotoshop.

Практическая работа № 7
Работа со слоями

Цели: Создать условия для приобретения практических навыков при работе со слоями.
Закрепить практические навыки при использовании инструментов ретуширования.
Практическая работа «Собака и кабель»

AdobePhotoshop - прекрасный инструмент для выполнения фотомонтажа. Он имеет набор средств, позволяющих быстро и качественно совместить несколько изображений. Если хорошо постараться, то можно незаметно объединить несколько разных рисунков так, что всем будет казаться, что "так и было".
При фотомонтаже самым трудным является подбор цветов и яркости, определение масштаба отдельных частей и их выравнивание в изображении. Самое незначительное противоречие быстро распознается глазом наблюдателя и разоблачает фотомонтаж.
Сегодня вы научитесь:
Совмещать два изображения.
Работать со слоями.
Трансформировать слои.
Использовать параметры слоёв.
Работать с инструментами ретуширования.
Создавать искусственные тени.

Рисунок 1.

Выполнение упражнения
Открытие исходных файлов
1. Зайдите в папку " Photoshop\Урок\Упражнение";
2. Откройте файлы "Кабель.jpg" и "Собака 1.jpg".
Совмещение изображений
Первое, что необходимо сделать для того, чтобы объединить два изображения - скопировать одно из них в другое. При этом копируемое изображение помещается в отдельный слой и может быть изменено независимо от второго изображения.
Обратите внимание, что нет необходимости копировать всё изображение целиком - нам нужен только кабель, но не белый фон, на котором он находится.
Выполните:
1. Выберите инструмент "Волшебная палочка";
2. Установите параметр "Допуск" в значение 40;
3. Щёлкните по белому фону - он выделится;
4. Нажмите "Ctrl+Shift+I" - выделение будет инвертировано, и теперь выделенным станет только кабель;
5. Нажмите "Ctrl+C", чтобы скопировать кабель в буфер обмена;
6. Переключитесь на окно с фотографией собаки;
7. Нажмите "Ctrl+V" - изображение кабеля будет скопировано.
Посмотрите в палитру слоёв. Обратите внимание, что скопированное изображение кабеля помещено в новый слой.

Рисунок 2.

Трансформация
Изображение кабеля получилось очень большим. Необходимо его уменьшить. Кроме того, нужно развернуть кабель и переместить его к пасти собаки. Все эти операции можно сделать с помощью трансформации.
Выполните:
1. В палитре слоёв щёлкните по слою с кабелем - он должен быть выбранным;
2. Выберите команду "Правка => Трансформация" - вокруг кабеля появится рамка с квадратиками;
3. Нажмите и держите "Shift", чтобы масштабировать пропорционально;
4. Ухватите за квадратик в правом нижнем углу и перетяните его, чтобы уменьшить изображение;
5. Когда достигните нужного размера, отпустите кнопку мыши и клавишу "Shift";
6. Переместите указатель мыши за пределы рамки - указатель превратится в изогнутую обоюдоострую стрелку; такой курсор означает поворот;
7. Зажмите левую кнопку мыши и поверните изображение кабеля;
8. Для перемещения ухватите изображение кабеля за область внутри рамки и перетащите кабель к пасти собаки;
9. Нажмите "Enter" для завершения трансформации.
Вы должны получить такой результат:

Рисунок 3.

Ретуширование
В данный момент картинка ещё не выглядит реальной. Проведём ретуширование для создания эффекта того, что кабель находится в пасти собаки.
Выполните:
1. Чтобы было проще редактировать, воспользуйтесь инструментом "Лупа" для увеличения изображения;
2. Выберите инструмент "Ластик";
3. Выберите кисть с мягкими краями;
4. Сотрите часть кабеля напротив пасти;
5. Выберите инструмент "Палец";
6. Выберите маленькую кисть с мягкими краями;
7. Немного растяните оторванные края кабеля с помощью инструмента "Палец", чтобы возник эффект, что кабель действительно в пасти.
У вас должно получится так:

Рисунок 4.

Затемнение
Чтобы изображение выглядело более реалистично, нужно сделать часть кабеля возле пасти более тёмной.
Выполните:
1. Выберите инструмент "Кисть";
2. Выберите чёрный цвет;
3. Установите параметр "Мутность" равным 20;
4. Несколькими мазками кисти сделайте кабель возле пасти темнее.
У вас должно получится примерно так:

Рисунок 5.

Добавление надписи
Теперь добавим надпись.
Выполните:
1. Выберите инструмент "Печать";
2. Щёлкните мышкой в верхней части изображения, чтобы выбрать, с какого места должна начинаться надпись;
3. На панели параметров выберите шрифт "ComicSans MS" или любой другой;
4. На панели параметров выберите достаточно большой размер шрифта (подберите размер визуально);
5. На панели параметров выберите чёрный цвет букв;
6. Введите надпись "PEMOHT" (даже если у вас не получается ввести русские буквы, это слово можно легко набрать с помощью латинских букв);
7. Щёлкните по кнопке с галочкой на панели параметров;
8. Выберите инструмент "Сдвиг";
9. Передвиньте надпись так, чтобы она располагалась по центру.

Рисунок 6.

Создание тени
Для создания тени можно воспользоваться возможностью создания эффектов для слоёв.
Выполните:
1. Дважды щёлкните по текстовому слою в палитре слоёв - появится окно эффектов;
2. Щёлкните по надписи "Тень";
3. Отодвиньте окно эффектов, чтобы видеть изображение;
4. Поэкспериментируйте с настройками эффекта, чтобы создать красивую тень.
Задание: Работа со слоями
Совместите два изображения, используя технику, изученную в упражнении.
Исходные файлы вы можете найти в папке “Photoshop\Урок\Задание.”

Вариант 1 Поместите кабель в пасть другой собаке. Возьмите за основу файлы Собака 2.jpg и Кабель.jpg.

Вариант 2 Поместите космический корабль на фон галактики. Возьмите за основу файлы battleship.jpg и cosmos.jpg.

Практическая работа № 8
Создание эффекта рваных краев с помощью фильтров

С помощью фильтров и слоя-маски вы можете формировать интересные эффекты рваных краев и бумажной текстуры...

1. Откройте изображение, создайте новый слои и грубо начертите черную форму, в которую вы хотите уместить свое изображение.

2. Создайте вокруг формы прямоугольную область выделения и примените фильтр AddNoise (Зернистость) с параметрами Gaussian (По Гауссу) и Monochromatic (Сохранить оттенки). Это создаст текстуру для следующего фильтра.

3. Края формы пока еще слишком ровные. Чтобы деформировать их, воспользуйтесь фильтром TornEdges (Рваные края).

4. Для усиления деформации обратитесь к фильтру Ripple (Рябь), выберите в списке Size вариант Small, а регулятор установите примерно на 700. Теперь края по-настоящему рваные.

5. После однократного обращения к этому фильтру в рваных краях иногда видна периодичность. Если у вас получилось именно так, примените фильтр еще раз, выбрав в списке Size вариант Medium. Это привносит элемент случайности.

6. Выберите все, скопируйте изображение в буфер и удалите слои. Переидите к палитре Channels, создайте новый канал и вставьте в него содержимое буфера. Теперь этот канал может служить в качестве маски.

7. Удерживая Control/Command+~", щелкните на миниатюре нового канала, чтобы загрузить его как выделение. Вернитесь к палитре Layers и командой AddLayerMask добавьте слой-маску. Форма превращается в маску, сквозь которую видно изображение.

8. В завершение мы добавили еще один слои под изображение и применили к нему фильтр AddNoise с параметром Monochromatic. Затем вызвали диалоговое окно Hue/Saturation (Control/Command+U) и включили параметр Colorize (Тонирование). Перемещая верхний регулятор, придали серым точкам цвет.

9. Снова примените фильтр Ripple с теми же установками, что и в последний раз. В завершение задайте верхнему слою режим наложения Multiply — сквозь изображение начинает просвечивать «текстура бумаги».

Практическая работа № 9

Работа с текстом

1. Открываем любое изображение:

2. Берем инструмент
HorizontalTypeMaskTool
(Горизонтальная текстовая маска)
Он находится в группе текстовых инструментов.
Пишем текст, в данном случае это слово «Русь».
Выбираем инструмент – выделение. Получаем выделение из текста.

3. Правой кнопкой мыши нажимаем по выделенному,
выбираем команду «копировать выделение на новый слой».
Переименовываем полученный слой в "текст".
Отключаем видимость фонового слоя «Задний план» (background),
убрав иконку глаза около него в окне слоев.

4. Создаем новый слой нажав правой унопкой мыши по слою,
выбираем команду «Создать дубликат слоя». Помещаем его ниже между слоями
(т.е между фоновым слоем «Задний план» (backgroun) и слоем «текст»)
перетаскиванием. Заливаем каким-нибудь цветом.

Теперь немного приукрасим наш текст стилями. Выделяем слой «текст».
Жмем два раза на иконку слоя, либо идем в меню
Layer-Layer Style (Слой-Стильслоя).

Ставимгалочкинапротив
Drop Shadow (Тень),
Bevel and Emboss (Тиснение).
Наш текст готов.

Варианты:

* Задание: Используя данную инструкцию создайте свой текст
(используя свое изображение),
который вы могли бы использовать в учебной деятельности
(элемент сайта, школьной публикации, презентации, логотип школы,
класса и т.д.). Сохраните изображение с расширением *.jpg
и отправьте на проверку.

Практическая работа № 10
Создание сложных изображений

1. Немного теории.
Все трехмерные (3D) объекты, которые мы хотим создать должны быть вначале нарисованы в фотошопе в градациях серого. Что это значит? Все просто, трехмерные объекты в фотошоп рисуются на основании заданных цветов которые лежат от черного к белому, но обязательно в градациях серого (не путайте с черно-белым изображением). На скриншоте который расположен ниже показан этот спектр цветов:

Именно этот спектр цветов является рабочим для создания 3D объектов.
Чем темнее вы выберете цвет, тем больше будет вмятина в 3D объекте, и наоборот, чем светлее будет выбранный цвет, тем больше это место будет возвышаться на 3D объекте. Таким образом мы можем создавать рельефы, выпуклости и вогнутости на 3D объекте.
Необходимо заметить, что все 3D объекты имеют стандартный геометрический набор в четырех направлениях:
- плоскость;
- двусторонняя плоскость;
- цилиндр;
- сфера;
На основании которых строятся модели, исходя из того, какую модель нам предстоит построить. Это значит, что имея заготовку в виде рисунка в градациях серого, мы можем построить из него четыре различных фигуры. Для того, что бы это все понять, перейдем к практике.
2. Подготовка рабочей среды программы к работе.
Если у Вас еще не включенаотрисовкаOpenGL, включаем ускорение трехмерных объектов: Edit (Редактировать)>Preferences (Установки)>Performance(Производительность), ставим галочку и нажимаем Ok.

Нам понадобится палитра для работы с 3D объектами. Если у Вас ее нет сделайте следующее:Window (Окно)>3D.

3. Создание заготовки.
Создаем новый рисунок: File (Файл)>New (Новый (Cntr+N)), выставляем такие параметры:

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

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

Это и есть наш рисунок – заготовка.

4. Создание 3D объектов.
В палитре 3D объектов, установите такие настройки, и нажмите кнопку создать:

Посмотрите на фигуру которая получилась:

Теперь повращайте ее инструментами:

Как Вы видите более темные цвета посажены глубже, а более светлые наоборот более выдвинуты вперед.
Попробуйте проанализировать фигуру, глядя на нашу заготовку и сравнивая ее с фигурой.
Теперь верните состояние когда у нас была простая заготовка. В палитре 3D объектов, выставите теперь такие настройки, и нажмите кнопку создать:

Посмотрите на фигуру которая получилась:

Как Вы видите более темные цвета посажены глубже, а более светлые наоборот более выдвинуты в перед.
Попробуйте проанализировать фигуру, глядя на нашу заготовку и сравнивая ее с фигурой.
Теперь вновь верните состояние когда у нас была простая заготовка.
В палитре 3D объектов, выставите теперь такие настройки, и нажмите кнопку создать:

Посмотрите на фигуру которая получилась:

Как Вы видите более темные цвета посажены глубже, а более светлые наоборот более выдвинуты вперед.
Попробуйте проанализировать фигуру, глядя на нашу заготовку и сравнивая ее с фигурой.
Теперь снова верните состояние когда у нас была простая заготовка.
В палитре 3D объектов, выставите теперь такие настройки, и нажмите кнопку создать:

Посмотрите на фигуру которая получилась:

5. Теперь я думаю Вы поняли принцип по которому фотошоп строит трехмерные объекты.

Для закрепления материала, покажу такой пример:

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

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

Практическая работа № 11
Создание анимации

В AdobePhotoshop создайте новый файл шириной 200 и высотой 300 пикселов, прозрачный.
Сделайте заливку черным цветом (Ведро) – это будет ваша основа для светофора.
Нарисуйте три окружности (Овал), схематично изображающие лампочки светофора – залейте их серым цветом. Объедините слои (Слои - Объединить видимые) и получившийся слой назовите “Зеленый”

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

У вас должно получиться три одинаковых слоя. Активизируйте слой под названием “Зеленый”, выполните заливку одной (нижней) окружности зеленым цветом. Обратите внимание на палитру Слои – закрасилась нижняя окружность, хотя на рисунке изменений нет.

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

Перейдите в AdobeImageReady, используя соответствующую команду или кнопку на панели инструментов.
Откройте палитру Анимация, если ее нет на экране (Окно - Анимация).
В контекстном меню палитры Анимация выберите команду MakeFramesFromLayers (Создать кадры из слоев).После этого в палитре появятся три кадра, соответствующие слоям изображения светофора.
В контекстном меню палитры Анимация выберите команду SeleсtAllFrames (Выбрать все кадры), и задайте время показа кадров 0,5 секунды. Если выделены все кадры, то достаточно задать время показа для одного кадра, остальные получат это время автоматически.
Убедитесь, что кадры расположены в нужной последовательности: красный, желтый, зеленый свет. Если порядок не правильный, то в палитре Анимация перемещайте кадры при нажатой левой клавишей мыши в нужную позицию.

Запустите анимацию. Если все получилось как надо, то светофор должен поочередно мигать красным, желтым и зеленым цветом. <Рисунок 20>