Интернет-технологии для работников образования. Ч.3: Подготовка изображений для публикации в Web

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ НОВГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ИМЕНИ ЯРОСЛАВА МУДРОГО

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ РАБОТНИКОВ ОБРАЗОВАНИЯ Часть 3 Подготовка изображений для публикации в WEB

ВЕЛИКИЙ НОВГОРОД 2004

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ НОВГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ИМЕНИ ЯРОСЛАВА МУДРОГО

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ РАБОТНИКОВ ОБРАЗОВАНИЯ Часть 3 Подготовка изображений для публикации в WEB Методические рекомендации

ВЕЛИКИЙ НОВГОРОД 2004

УДК

Печатается по решению

ББК

РИС НовГУ Рецензент директор Центра компьютерного проектирования Галактионов Н.Б. Интернет-технологии для работников образования: Метод. рекомендации / Авт. – сост.: Н.В. Курмышев, Г.Ю. Соколова; НовГУ им. Ярослава Мудрого. – Великий Новгород, 2004. Ч. 3: Подготовка изображений для публикации в Web. – 64с. Методические рекомендации охватывают третий учебный модуль курса

«Интернет-технологии

для

работников

образования».

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

УДК ББК

© Новгородский государственный университет, 2004 © С.А. Луций, составление, 2004

Учебно-методическое издание

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ РАБОТНИКОВ ОБРАЗОВАНИЯ Часть 3 Подготовка изображений для публикации в WEB Методические рекомендации

Автор-составитель Луций Сергей Анатольевич

Редактор Компьютерная верстка Корректор

______________________________________________________________ Изд. лиц. ЛР №020815 от 21.09.98 Подписано в печать Бумага офсетная. Формат 60*84 1/16. Гарнитура Times New Roman. Печать офсетная. Усл. печ. л. Уч.-изд. л. Тираж 100 экз. Заказ № . Издательско-полиграфический центр Новгородского Государственного университета им. Ярослава Мудрого 173003, Великий Новгород, ул. Б. Санкт-Петербургская, 41. Отпечатано в ИПЦ НовГУ. 173003, Великий Новгород, ул. Б. Санкт-Петербургская, 41

3

ВВЕДЕНИЕ Курс «Интернет–технологии для работников образования» адресован студентам

педагогических

специальностей,

учителям-предметникам,

преподавателям вузов и другим работникам образовательных учреждений, ведущим практическую педагогическую деятельность. Содержание курса построено по модульному принципу. Предлагаются 4 учебных модуля, которые, в зависимости от стартового уровня обучающихся, могут изучаться как последовательно, так и независимо друг от друга: • «Основы работы с персональным компьютером»; • «Основы работы в Интернет»; • «Подготовка изображений для публикации в WEB»; • «Разработка Web–представлений». В настоящих методических рекомендациях излагается учебный материал третьего модуля «Подготовка изображений для публикации в WEB».

В

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

4 1. ОСНОВЫ РАБОТЫ С РАСТРОВЫМИ ИЗОБРАЖЕНИЯМИ 1.1 Общие понятия и определения Цифровое изображение — модель реального или синтезированного изображения, хранящаяся в памяти компьютера в виде совокупности кодов (цифр). При создании Web-страниц приходится иметь дело с различными видами моделей изображений. Наиболее часто используется растровая модель. Растровая модель цифрового изображения — прямоугольная матрица одинаковых неделимых элементов – пикселей (англ. pixel — picture element — элемент изображения), каждый из которых в закодированном виде отображает определенный участок реального или синтезированного изображения. Основные параметры растровых изображений: •

Размер — произведение ширины на высоту в пикселях

(например, 400х200). Размер нужно учитывать, чтобы фотография или рисунок занимали определенное место WEB-страницы при типовом размере экрана 800х600 пикселей. •

Разрешение — плотность информации на единицу длины по

горизонтали и вертикали (измеряется в ppi — pixels per inch — пиксели на дюйм или dpi — dots per inch — точки на дюйм). Имеет смысл только, когда известны размеры реального изображения. При подготовке изображений для публикации в WEB разрешение следует учитывать во время

сканирования

сканировании

фотографий

фотографии

или

размером

рисунков.

10х15

см

Например, (4х6

при

дюймов)

с

разрешением 300 ppi получится цифровое изображение 1200х1800 пикселей, при сканировании с разрешением 100 ppi — 400х600. •

Модель цвета — способ математического описания цвета

пикселя. Для WEB-графики типовыми моделями являются: ƒ

Grayscale (Градации серого) — для черно-белых

фотографий;

5 ƒ

RGB (Полноцветная) или Indexed (Индексированная)

— для цветных фотографий и рисунков. •

Глубина цвета (бит на пиксель) — количество бит

информации о цвете каждого пикселя изображения, хранящихся в модели. Например, модель Grayscale (Градации серого) имеет глубину цвета 8 бит на пиксель (256 градаций яркости), а RGB (Полноцветная) — 24 (по 8 на каждый канал). На WEB-страницах используется большое количество разнообразных растровых изображений: •

фоновые заполнения или фоновые рисунки.

•

логотипы или другие символы-знаки.

•

красочные надписи-заголовки.

•

фотографии и фотокомпозиции (коллажи).

•

синтезированные изображения (рисунки), в том числе и

анимированные. •

элементы управления (например, кнопки).

•

декоративные разделительные полосы (линии, разделители,

границы). •

анимированные баннеры или значки (GIF-анимация)

•

слайсы для навигационных карт ссылок и т.п., и т.д.

Различные типы изображений для помещения на WEB-страницу можно получить следующим образом: •

ввести:

сканировать

фотографию

или

рисунок

(рекомендации по сканированию и борьбе с сопутствующим муаром приведены в Приложениях 2 и 3), сделать снимок цифровым фотоаппаратом, «захватить» кадр телевизионной камеры •

создать: нарисовать с помощью моделей инструментов

художника, скомбинировать из нескольких изображений, сгенерировать с помощью специальной программы, например, World Builder

6 •

взять из доступных интернет-коллекций, например:

ƒ

http://dweb.ru/foto/index.htm, http://all-photo.ru,

http://express.irk.ru/1000/frames/index.htm, http://pix.km.ua/, http://photo.karelia.ru — библиотеки фотографий, ƒ

http://www.webman.ru/animation/main.htm,

http://www.animfactory.com, http://dweb.ru/gif/gifs.htm — библиотеки GIF-анимаций, ƒ

http://dweb.ru/fon/fons.htm, http://www.inet-

images.com/csp/index5.html — библиотеки фонов, •

взять

из

доступных

коллекций

изображений,

распространяемых на CD, например, Microsoft Photo Clipart; •

скопировать с какого-либо сайта, что, впрочем, не всегда

этично. 1.2 Основы работы в программе Adobe Photoshop Приведенное

выше

перечисление

типов

растровых

изображений

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

с

Adobe

Photoshop

программой)

6

разработан

(особенности так,

чтобы

взаимодействия учесть

уровень

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

7

Рис. 2.1 Основной экран программы Adobe Photoshop 6 В строке-заголовке указано название программы (Adobe Photoshop), а также имеются типовые для Windows кнопки управления окном – Свернуть, Развернуть/Восстановить, Закрыть. Строка основного меню содержит следующие пункты: •

File (Файл) — группирует команды работы с файлами;

•

Edit

(Правка)

—

содержит

команды

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

изображений; •

Image (Изображение) — включает в себя команды по

настройке и корректировке изображений; •

Layer (Слой) — объединяет команды по работе со слоями

многослойных изображений;

8 •

Select (Выделение) — группирует команды управления

выделенными областями; •

Filter

(Фильтр)

—

содержит

команды

фильтрации

(специальной обработки) изображений; •

View (Вид) — включает в себя команды управления

отображением; •

Window (Окно) — объединяет команды настройки рабочего

пространства; •

Help

(Справка)

—

группирует

команды

работы

со

справочником по программе. При выборе любого пункта меню он раскрывается на подпункты (команды). Некоторые из них имеют в конце многоточие (…). Это означает, что команда открывает окно диалога. Другие — знак треугольник (►). Это означает, что команда раскрывает собственное меню команд. Панель свойств служит для настройки параметров используемого в данный момент инструмента, поэтому она меняет свой состав при выборе различных инструментов (рис. 2.2). На ней размещаются: кнопка с изображением активного инструмента, служащая для установки параметров в исходное состояние, управляющие кнопки, окна для ввода числовых значений, раскрывающиеся списки, флажки и переключатели.

Рис. 2.2. Контекстная панель свойств инструмента Brush (Кисть) На

рабочем

поле

изображений, плавающие

располагаются палитры

окна

открытых

с вкладками

и

и

палитра

свернутых основных

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

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

кнопки

с

графическими

обозначениями

инструментов (назначение инструментов приведено активизации

в

Приложении инструмента

1).

Для

достаточно

щелкнуть по нему мышью. На некоторых кнопках помещен маленький черный треугольник. Это означает, что данная кнопка содержит набор функционально однородных инструментов. Если нажать на такую кнопку мышью, то она раскрывает этот набор в виде списка, из которого щелчком мыши выбирается нужнант инструмента. В нижней части панели расположены зоны выбора основного и фонового цвета, переключения в режим Быстрая маска, изменения способа отображения изображений на экране и вызова программы Image Ready (рис. 2.3).

Рис. 2.3. Общий вид палитры инструментов

Зона выбора цвета Режимы маски Способы отображения Переключение между Adobe Photoshop и Adobe Image Ready

10 Назначение некоторых кнопок палитры инструментов Таблица 2.1

Кнопка

Название

Назначение

Редактирование в Основной режим: выделенные области отображаются как движущиеся пунктирные границы («марширующие муравьи») стандартном режиме Редактирование в режиме Quick Mask (Быстрая маска)

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

Стандартное окно Изображение отображается в стандартном окне документа (F) Полный экран с основным меню (F)

Отображает окно документа на весь размер экрана с сохранением основного меню программы.

Полный экран без Полноэкранный режим отображения без сохранения основного меню. В этом режиме доступ к командам или инструментам основного меню возможен только с помощью их клавиатурных эквивалентов (F)

Для выбора основного или фонового цвета достаточно щелкнуть мышью на соответствующем квадратике (верхний — основной цвет, нижний — фоновый) в нижней части палитры инструментов. При этом появляется окно диалога «Color Picker» (Выбор цвета) — рис. 2.4. Здесь расположены: • зона для выбора (щелчком мыши) образца цвета — большой квадрат • вертикальная линейка для задания области цветовых оттенков • небольшой квадрат, показывающий в нижней части старый цвет, а в верхней — выбранный новый • окна для ввода цифровых значений компонентов цвета в различных моделях (HSB, RGB, Lab, CMYK) • окно отображения или ввода номера цвета (#)

11 • флажок для выбора безопасных цветов WEB (Only Web Colors). При создании WEB-рисунков его рекомендуется установить. После выбора цвета нужно нажать на клавише OK. Для смены основного и фонового цветов щелкните на изогнутой стрелке в правом верхнем углу (или нажмите на клавиатуре клавишу Х), а для установки цвета по умолчанию (черный — основной, белый — фоновый) — на квадратиках в нижнем левом углу или нажмите на клавиатуре клавишу D. Рис.2.4 Окно диалога выбора цвета

Полосы прокрутки (горизонтальная и вертикальная) предназначены для вывода

на

экран

областей

документа, не

умещающихся

внутри

окна

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

кнопку

соответствующем

прокрутки, направлении

можно

перемещать

небольшими

изображение шагами

в

либо

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

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

Если

нажать

установленный

флажок,

то

параметр

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

списки

позволяют

выбрать

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

13 Рис. 2.5 Переключатель (Uniform, Gaussian), флажки (Preview, Monochromatic), числовое поле (2,85), движковый регулятор (Amount) и область просмотра в окне диалога «Add Noise» (Добавить шум)

После установки в окне диалога нужных значений, его следует закрыть. Для этого нажмите одну из командных кнопок: OK — установки принимаются или Cancel —отмена команды, вызвавшей окно диалога. 1.3 Выход из Photoshop После завершения работы необходимо выйти из программы. Для этого выберите File | Exit (Файл | Выход). Если в каком-либо из открытых окон содержится несохраненная информация, Photoshop предложит указать, как поступить с ней (рис. 2.6).

Рис. 2.5 Окно предупреждения о наличии не сохраненных результатов работы

14 Назначение кнопок в окне-предупреждении Таблица 2.2 Кнопка Yes (Да)

Назначение Сохранить документ и выйти из Photoshop. Если файлу не присвоено имя, будет открыто окно диалога «Сохранить как»

No (Нет)

Выйти без сохранения документа

Cancel

Закрыть текущее окно диалога и вернуться в программу

(Отменить)

Photoshop

2. ПОДГОТОВКА ФОТОГРАФИЙ ДЛЯ ПУБЛИКАЦИИ В WEB Практическое занятие №1 Все, кто хоть раз побродил по просторам Интернет, безусловно, обратили внимание на то, что практически нет ни одного сайта без фотографий. К сожалению, многие разработчики и хозяева Web-страниц не заботятся о том, как будет выглядеть фотоизображение на экране, как оно впишется в общую концепцию страницы или сайта, какое впечатление она произведет, как долго будет загружаться, как будет смотреться при разных разрешениях экрана и еще много, много тому подобных "как" и "какое". Результат — огромное количество Web-страниц с фотографиями явно не того качества, которое можно из них "вытащить". Неправильно кадрированные, перекошенные, с цветным отливом, нерезкие, со смещенным или зауженным тоновым диапазоном (чрезмерно темные или светлые), с недостаточным (вялые) или избыточным контрастом, с пятнами, с трещинами и другими техническими дефектами фотографии сплошь и рядом встречаются в Интернет. Все это отнюдь не украшает Web-страницы и не делает чести их авторам. Поэтому, прежде чем поместить фотографию на страницу, необходимо ее подготовить к публикации, то есть выполнить, по крайней мере, следующие действия:

15 • Выявить и проанализировать все виды дефектов (глобальные и локальные, художественные и технические), присущие фотографии, а также наметить пути их устранения. • Откадрировать, выделив наиболее сюжетно-важную часть, и привести размер фотографии в соответствие с выделенным для нее местом на странице. • Устранить глобальные художественные дефекты. • Устранить глобальные технические дефекты. • Устранить локальные художественные и технические дефекты. • Улучшить

локальную

и

глобальную

резкость

(всегда

выполняется в последнюю очередь!). • Оптимизировать, то есть сохранить в формате (чаще всего в JPEG, который и разрабатывался для хранения именно фотографий), распознаваемом Web-браузерами, минимизировав объем файла при заданном уровне качества. После тщательного выполнения перечисленных процедур, можно смело размещать фотографию на Web-странице и не краснеть, хотя бы за ее техническое качество (о содержании — особая речь). Именно с этой целью, а также чтобы познать некоторые секреты работы с растровой графикой в Adobe Photoshop, мы выполним подготовку (коррекцию и ретушь) старой черно-белой фотографии, имеющей множество типовых дефектов. Для этого: 1.

запустите на выполнение пакет Adobe Photoshop;

2.

ознакомьтесь с элементами основного окна: ƒ

Строка заголовок;

ƒ

Строка основного меню;

ƒ

Панель свойств;

ƒ

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

ƒ

Рабочая область и плавающие палитры;

16

3.

ƒ

Полосы прокрутки;

ƒ

Строка состояния;

Проверьте возможности задания основного и фонового цветов с

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

Откройте файл Old.jpg, выбрав команду File | Open (Файл |

Открыть). Посмотрите на строке состояния размер изображения. 5.

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

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

.Выберите инструмент Crop (Кадрирование) и очертите им

внутреннюю часть фотографии. Для этого установите указатель в один из углов, нажмите левую клавишу мыши и, не отпуская ее, протяните по диагонали в противоположный угол. Появляется маркерная рамка, а область вне рамки затемняется (рис. 3.1). Рис. 3.1 Фотография с большим количеством типовых художественных и технических дефектов. С помощью инструмента Crop (Кадрирование) выделена внутренняя, информативная часть изображения.

17 7.

Перемещением маркеров подстройте область, а затем

нажмите

клавишу Enter. Выполняется кадрирование фотографии (удаляются лишние части вне рамки). Посмотрите на строке состояния новый размер изображения. 8.

Нажмите Ctrl+0, чтобы максимизировать окно изображения в

пределах свободной зоны рабочей области. Следующая задача — тоновая коррекция. 9.

Вызовите команду Image | Histogram (Изображение | Гистограмма).

Проанализируйте гистограмму (рис. 3.2). Обратите внимание на зауженный тоновой диапазон (нет белого и черного тонов, основная масса пикселей располагается в зоне темных полутонов). Гистограмма — график, показывающий распределение пикселей по яркости. По горизонтальной оси (Х) откладываются значения яркости (Level — от 0 до 255), по вертикальной (Y) — количество пикселей изображения (Count), имеющих соответствующее значение яркости.

Рис. 3.2 Гистограмма (распределение пикселей по яркости) показывает зауженный тоновой диапазон (примерно 20-200, вместо 0-255)

10.

Вызовите команду Image | Adjust | Auto Levels (Изображение |

Настройка | Автоуровни). Расширяется тоновой диапазон, фотография становится более контрастной (оживает). 11.

Вызовите команду Image | Histogram (Изображение | Гистограмма).

Проанализируйте новую гистограмму и сравните ее с предыдущим вариантом.

18 Рис. 3.3 Гистограмма после применения автоматического выравнивания уровней равномерно растянулась по всему диапазону яркостей от 0 до 255.

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

Отмените автоматическое выравнивание уровней, нажав Ctrl+Z

или выбрав Edit | Undo (Правка | Отменить). 13.

Вызовите команду Image |

Adjust | Levels (Изображение |

Настройка | Уровни). Появляется окно диалога. 14. (Авто).

Нажмите Указатель

(правый

кнопку

Auto

белой

точки

белый

треугольник)

сдвинулся в позицию 197, а указатель черной

точки

треугольник)

—

(левый в

черный

позицию

19.

Расширился тоновой диапазон: самые темные пиксели (19) стали черными (0), самые светлые (197) — белыми (255), то есть зауженный диапазон яркостей (19-197) преобразовался в полный

(0-255). Изображение стало более

контрастным, «сочным». Получили результат практически такой же, как и при предыдущей автоматической коррекции. Однако при ручной коррекции у нас есть возможность подрегулировать и передачу полутонов.

19 15.

Сдвиньте указатель серой точки (гамма-корректор — средний,

серый треугольник) в положение 1,65-1,70. На изображении проявляются детали в полутонах: прорисовываются детали лица, проявляется прическа, фактура платья. Если результат вас удовлетворяет, нажмите OK. Если – нет, подберите параметры тоновой коррекции по своему усмотрению. 16.

Вот теперь тоновая коррекция успешно завершена, изображение

выглядит вполне насыщенным и достаточно контрастным.

Следующая

глобальная

проблема — «грязный» и испещренный трещинами

фон.

Очевидно,

есть

смысл

привести его в порядок. Можно, конечно, потренироваться в устранении множества пятен и трещин с помощью инструментов Photoshop, а можно попытаться обработать сразу весь фон и, таким образом, устранить большое количество дефектов одновременно. Для обработки нам потребуется отделить фон от фигуры девушки, чтобы заодно не испортить и главный персонаж. Для этого в программе предусмотрено много различных вариантов. Мы воспользуемся одним из инструментов группы Lasso (Лассо). 17.

Выберите инструмент Poligonal Lasso (Многоугольное лассо). Он

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

Обойдите контур фигуры девушки, закрепляя границу выделения

щелчками мыши. Вдоль контура тянется линия, составленная из отрезков прямых. СОВЕТ: если очередная точка установлена «не туда», то ее можно отменить, нажав на клавиатуре клавишу BackSpace (Забой). ВНИМАНИЕ: при выполнении двойного щелчка граница выделения автоматически замыкается и, если нажать клавишу BackSpace (Забой), то

20 содержимое выделенной области будет удалено. В этом случае сначала нужно отменить очистку выделенной области, нажав Ctrl+Z или выбрав Edit | Undo (Правка | Отменить), затем отменить выделение командой Select | Deselect (Выделение | Отменить выделение) и снова повторить создание выделенной области с помощью Poligonal Lasso (Многоугольное лассо). При возврате в начальную точку возле инструмента появляется маленький кружочек. Щелчок мыши в этот момент замыкает границу выделения (она превращается в «колонну марширующих муравьев» — Marquee) и формирует выделенную область. Теперь все, что расположено внутри нее, доступно для обработки, а все, что лежит вне — защищено от изменения или, как говорят, замаскировано. 19.

Чтобы в дальнейшем обработать фон, инвертируйте выделение,

выбрав команду Select | Inverse (Выделение | Инвертировать выделение) или нажав Ctrl+Shift+I. Маскируем девушку и делаем доступным для обработки только фон. 2.1 Обработка фона фильтрами Чтобы избавиться от множества мелких и не очень мелких дефектов фона, давайте попробуем его размыть. В этом случае мы, во-первых, удалим все технические дефекты, во-вторых, создадим плавные, нерезкие тоновые переходы. Фон станет более мягким и будет оттенять портрет девушки, не мешая его восприятию. Для этого в составе меню Filter (Фильтр) имеется специальный пункт Blur (Размытие). Раскрыв его, можно увидеть несколько вариантов управления размытием изображений: Blur (Размытие) — простейший вариант уменьшения случайных точечных дефектов усреднением соседних пикселей. Создает легкую нерезкость изображения. Blur

More

(Усиленное

размытие)

предыдущему, но эффективнее его в 3-4 раза.

—

работает

аналогично

21 Gaussian Blur (Размытие по Гауссу) — наиболее популярный регулируемый

фильтр

взвешенного

усреднения

пикселей

по

колоколообразной кривой Гаусса. Формирует слабый или сильный «туман» на изображении в зависимости от радиуса размытия, устанавливаемого в окне диалога. Motion Blur (Размытие в движении) — моделирует размытие краев движущихся объектов при съемке с большой выдержкой (эффект, часто используемый в спортивной фотографии). В окне диалога задается направление движения (от-360º до +360º) и величина смещения пикселей (от 1 до 999). Radial Blur (Радиальное размытие) — очень мощный фильтр, который мы подробно рассмотрим позднее. Здесь же отметим, что фильтр имеет два различных варианта размытия (круговое и из центра), для каждого из которых можно задать качество, положение начальной точки и величину эффекта. Smart Blur (Умное размытие) — очень «интеллектуальный» фильтр, который размывает не все изображение, а учитывает необходимость сохранения его четкости, то есть не затрагивает области резких цветовых и тоновых переходов. В окне диалога фильтра можно задать радиус зоны анализа, порог различимости пикселей, качество размытия в различных режимах: Normal — для всей области, Edge Only и Overlay — только в пределах границ резких цветовых и тоновых переходов. Фильтр часто используется для устранения муара изображений, отсканированных с типографских оттисков. Судя

по

приведенному

описанию,

наиболее

подходящими

«тружениками» для выполнения нашей работы являются Gaussian Blur и Smart Blur. Однако, последний фильтр «слишком умен», чтобы справиться с трещинами и царапинами на нашей фотографии, так как он либо оставит их без

22 изменения в режиме Normal, либо, наоборот, подчеркнет в режимах Edge Only и Overlay. Потому воспользуемся первым из кандидатов в наши соратники. 1. Вызовите Filter | Blur | Gaussian Blur (Фильтр | Размытие | Размытие по Гауссу). Появляется окно диалога (рис. 3.4). Рис. 3.4 С помощью задания различных значений радиуса размытия можно добиться множества вариантов фильтрации фона

2. Поменяйте

значения

Radius

(Радиус)

с

помощью

движка.

Посмотрите, как это влияет на величину эффекта (степень размытия фона). 3. Установите

понравившееся

вам

значение

и

нажмите

OK.

Размываем фон, не затрагивая замаскированную фигуру девушки. Мы полностью избавились от трещин, пятен, помятостей и сколов эмульсии в области фона «одним движением». Однако фон выглядит слишком гладким, искусственным. Фигура девушки на нем смотрится инородным телом, она как бы наклеена. Попробуем немного оживить и, в то же время, облагородить фоновую часть изображения. Для этой цели мы применим фактуризацию фона с помощью фильтра Add Noise (Добавить шум). 4. Вызовите Filter | Noise | Add Noise (Фильтр | Шум | Добавить шум). Появляется окно диалога (рис. 3.5).

23 Рис. 3.5 Множество вариантов «зашумления» изображения можно получить, используя разные режимы распределения визуальных помех (Distribution) и регулируя степень их проявления (Amount) 5. Установите значение шума (Amount) в пределах от 2 до 5%. Проверьте, как влияет переключение режимов распределения помех (Uniform — равномерное, Gaussian — по Гауссу). Если включен режим Preview (Просмотр), на изображении появляется структурная визуальная помеха (шум), которая делает фон более живым, бархатистым. Нажмите OK. 6. Если фон вам кажется чрезмерно грубым, немного смягчите его, вызвав Filter | Blur | Blur (Фильтр | Размытие | Размытие). Сглаживаем резкие участки фона. С фоном покончено, теперь можно смело приступать к косметической отделке портрета, а именно, к устранению технических и художественных дефектов на основном элементе композиции. 2.2 Устранение технических дефектов 1.

Чтобы случайно не испортить фон, инвертируйте выделение,

выбрав команду Select | Inverse (Выделение | Инвертировать выделение) или нажав Ctrl+Shift+I . Маскируем фон и выделяем девушку в качестве объекта наших будущих забот. 2.

Увеличьте масштаб изображения до 300%, используя комбинацию

клавиш Ctrl+«+» и сместите (движками прокрутки или с помощью палитры

24 «Навигатор»)

область

отображения

так,

чтобы

хорошо

была

видна

вертикальная трещина на прическе. 3.

Выберите

инструмент

Clone

Stamp

(Штамп). На панели свойств появляются параметры, характерные для этого инструмента.

4.

Выберите в раскрывающейся палитре Brush (Кисть), размером,

чуть больше ширины трещины, оставьте стандартный режим наложения пикселей (Normal), установите непрозрачность копируемой области Opacity — 100% и флажок Aligned (Выровненный). Задаем параметры инструмента. 5.

Установите курсор в виде кружочка, показывающего размер кисти,

чуть правее и выше трещины. Удерживая клавишу Alt, щелкните левой клавишей мыши, чтобы зафиксировать область копируемой информации. Отпустите Alt, передвиньте кисть влево вниз, чтобы она перекрыла дефект, и нажмите левую кнопку мыши. Часть трещины перекрывается копируемой «чистой» областью прически. СОВЕТ: При задании исходной точки копируемой области изображения приходится решать две противоречивые задачи: a. с одной стороны, чтобы обеспечить реалистичность, нужно выбирать эту точку как можно ближе к закрашиваемой части изображения (наиболее соответствует по текстуре, тоновым и цветовым характеристикам); b. с другой стороны, при малом расстоянии возможно перекрытие копируемой и целевой областей, что приводит к появлению следов от инструмента, то есть, к дополнительным дефектам. Для получения качественных результатов при работе с инструментом Clone Stamp (Штамп) рекомендуется:

25 • задавать расстояние между исходной точкой и областью закрашивания копируемым участком равным или чуть больше, чем диаметр кисти; • диаметр кисти выбирать минимально необходимого размера; • чтобы уменьшить заметность наложения нового участка, выбирать кисти с мягким краем; • как можно чаще изменять положение исходной точки (щелчок при нажатой клавише Alt). 6.

Аналогично «заштампуйте» остальные трещины и сколы эмульсии

на прическе девушки. Не забывайте почаще менять место, откуда берется информация (щелчок мыши при нажатой клавише Alt) и подбирать размер кисти. Для увеличения размера кисти нажмите клавишу “]“ (правая квадратная скобка), для уменьшения — “[“ (левая квадратная скобка). Это позволяет последовательно выбирать кисти из палитры Brush (Кисть) и одновременно меняет диаметр кисти на экране. Такой интерактивный способ подбора размера кисти очень быстр и удобен, поэтому потренируйтесь в его использовании. Учитывайте направление распространения волос, чтобы не сделать из укладки прическу типа «спагетти». Приводим в порядок прическу (рис. 3.6).

26 Рис. 3.6 - «Как можно, не испортив прически, убрать с нее лишние детали?» - «В Photoshop — c помощью инструмента Clone Stamp (Штамп)»

Следующие объекты для устранения дефектов — лицо и шея. Кроме трещин, пятен, сколов, царапин и помятостей, здесь виден довольно сильный блик. При его устранении попробуйте уменьшить непрозрачность копируемой области (Opacity) до 20-50%. Аналогично действуйте при удалении дефектов с подбородка и шеи. Таким образом, многократно копируя инструментом Clone Stamp (Штамп) при пониженном значении непрозрачности, можно не только устранить дефект, но и точно подобрать требуемый тон. 7.

Работая в масштабе 300-500%, постарайтесь, как можно аккуратнее,

убрать все артефакты на лице и шее. Штамп не смог окончательно победить некоторые шероховатости и дефекты на лице, где они существенно заметнее, чем на прическе. Чтобы сгладить следы самого инструмента и некоторые другие мелкие погрешности, можно поработать еще одним инструментом, а именно — Blur (Размытие) из группы Focus (Фокус). Этот инструмент работает как локальный фильтр размытия, параметры которого легко установить на панели свойств. Им хорошо не только сглаживать технические дефекты, но и устранять недостатки оригинала (морщинки, родинки, небольшие шрамы и т.п.). К сожалению, имеется и подводный камень — инструмент разрушает фактуру поверхности. Поэтому пользоваться им надо

27 осторожно, а степень его воздействия (Pressure) желательно устанавливать на панели свойств меньше 100%. 8.

Выберите инструмент Blur (Размытие) из группы Focus

(Фокус). Установите Pressure (Нажим) равным 50–70%. Подготавливаем инструмент к работе. 9.

Установите масштаб 500% и поработайте инструментом, чтобы

аккуратно сгладить оставшиеся дефекты на лице и шее. Как и при работе с инструментом Stamp (Штамп), меняйте размер инструмента в соответствие с размером дефекта. После того, как мы с помощью «электронной пудры и тонального крема» скрыли все, что смогли, пора заняться и более почетным делом — подчеркиванием

достоинств.

Для

этой

цели

воспользуемся

другим

инструментом той же группы Focus (Фокус) — Sharpen (Резкость), который выполняет локальное увеличение резкости. С помощью этого инструмента мы усилим блеск глаз, выделим ресницы, брови и губы. Как и при использовании Blur (Размытие), придется соблюдать определенную осторожность: инструмент достаточно «острый» и, вместо подчеркивания достоинств, в неаккуратных руках способен выявить недостатки. 10.

Выберите инструмент Sharpen (Резкость) и установите Pressure

(Нажим) равным 5–10%. Задаем относительно безопасные режимы работы инструментом. 11.

Установите масштаб 400%, подберите размер кисти величиной чуть

больше радужной оболочки глаза и нажмите несколько раз, наблюдая, как происходит увеличение контраста и некоторое осветление зрачка (рис. 3.7). Повторите процедуру для другого глаза. Если заметите, что появляются посторонние артефакты, отмените последний мазок, нажав Ctrl+Z.

28 12.

Уменьшите размер кисти и пройдитесь ею по ресницам и бровям.

Обратите внимание, как увеличивается контраст и проявляются мелкие детали в месте воздействия инструмента Sharpen (Резкость). 13.

Выполните аналогично подчеркивание абриса губ. Полюбуйтесь

собственным результатом в нормальном масштабе (Ctrl+0). Если вас что-либо не удовлетворяет, отмените шаги на палитре «History» (Протокол) и выполните работу более аккуратно. Рис. 3.7 Инструмент Sharpen (Резкость) способен улучшить блеск глаз. Теперь,

когда

наиболее

сложные

вопросы

успешно

решены,

самостоятельно приведите в порядок платье и воротник. Воспользуйтесь инструментом Clone Stamp (Штамп) для устранения технических дефектов и наращивания «оторванного» рукава. После «штамповки» прогладьте платье инструментом Blur (Размытие). В результате должно получится примерно, как на рис. 3.8. Рис. 3.8 С Photoshop в руках можно поработать

не

только

электронным визажистом, но и электронным

портным

—

платье и воротник в полном порядке!

14.

Отмените выделение, выбрав команду Select | Deselect (Выделение |

Убрать выделение) или просто нажав Ctrl+D. Граница выделения исчезает.

29 Принципиально ретушь изображения завершена. Остается выполнить последнюю операцию — оптимизацию файла для размещения на Webстранице. 2.3 Оптимизация файла изображения 1.

Вызовите команду File | Save for Web (Файл | Сохранить для WEB).

Появляется окно диалога “Save for Web” (рис. 3.9). В верхней части имеются 4 вкладки, позволяющие выводить в зоне предварительного

просмотра

исходное

оптимизированное изображение (Optimized),

изображение

(Original),

одновременно исходное и

оптимизированное в соседних окнах (2-Up), до 4 вариантов оптимизации одновременно (4-Up). Слева — набор инструментов (Рука, Нож, Лупа, Пипетка), справа — органы управления параметрами оптимизации для выбранного формата файла, снизу под изображениями — параметры исходного и

оптимизированного

файлов

изображений,

а

также

оптимизированного при определенной скорости модема.

время

загрузки

30

Рис. 3.9 Рабочее окно команды Save for Web (Сохранить для Web) В зависимости от выбранного для сохранения стандартного для Web формата (GIF, JPEG, PNG-8, PNG-24) файла в правой части можно: •

выбрать чересстрочное появление изображения (Progressive

для JPEG, Interlaced для GIF) •

задать уровень качества (Quality для JPEG) или количество

цветов (Colors) в палитре для GIF и PNG-8 •

степень сглаживания артифактов (Blur для JPEG, Dither для

GIF и PNG-8) •

подобрать и оптимизировать цветовую палитру (Color Table,

Web Snap) •

изменить размер изображения (Image Size)

31 и

многое,

многое

другое,

что

раньше

выполнялось

только

специализированными графическими пакетами оптимизации изображений для WWW. Целью оптимизации является минимизация объема файла (то есть, времени его загрузки) при заданном уровне качества. Поэтому: 2.

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

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

Сохраните изображение в папке Мои рисунки с именем,

состоящим только из маленьких латинских букв и символов (не более 8), например, girl. 3. СОЗДАНИЕ ИЗОБРАЖЕНИЙ ДЛЯ ПУБЛИКАЦИИ В ИНТЕРНЕТ Практическое занятие №2 Помимо обработки сканированных или снятых цифровым фотоаппаратом материалов Adobe Photoshop имеет мощнейшие средства, как для создания простых графических элементов, так и для синтеза достаточно сложных многослойных

композиций,

которые

могут

широко

применятся

при

оформлении Web-сайтов. 3.1 Создание надписи-заголовка Заголовок любой Web-страницы — это та "вешалка", с которой начинается "театр". От того, как оформлена надпись, зависит очень многое в восприятии страницы, то, какое впечатление она произведет на посетителя. Плохо оформленный заголовок может сразу же оттолкнуть посетителя, в то время как оформленный достойно, с выдумкой, способен заинтересовать, заинтриговать и привлечь внимание к странице. Требования к нему достаточно просты и логичны: • заголовок должен нести смысловую нагрузку, а не быть общим лозунгом;

32 • выделяться среди всех материалов страницы, но в то же время — соответствовать ее стилю и духу; • шрифт заголовка должен быть удобочитаем, а не служить ребусом для разгадывания букв; • цветовое и художественное оформление должны подчиняться законам колористики и композиции; • анимационные эффекты в заголовке должны применяться с осторожностью, так как зачастую анимация вызывает не интерес, а раздражение Если учитывать вышесказанное и проявить определенный уровень изобретательности, можно сделать заголовок, который, по крайней мере, не вызовет неприятие у посетителей вашего сайта. Попробуем потренироваться в этом направлении, а заодно еще больше узнаем о возможностях программы Photoshop. 1.

Вызовите команду File | New (Файл | Создать). Появляется окно

диалога создания нового изображения. 2.

Создайте заготовку для написания и размещения заголовка. Для

этого задайте ее размеры: Width (Ширина) — 400 пикселей, Height (Высота) — 75 пикселей, Resolution (Разрешение) — не имеет в данном случае никакого значения, поэтому оставьте типовое разрешение для экрана монитора — 72 pixels/inch (пиксель/дюйм). Выберите из списков основной для Web тип модели изображения Mode (Режим) – RGB, а также Contents (Содержимое) — Transparent (Прозрачный), чтобы впоследствии можно было поместить заголовок на любой фон, и нажмите OK. В рабочей области создается окно изображения (рис. 4.1).

33

. Рис. 4.1

Заготовка для основной надписи: прозрачный фон

отображается в виде шахматной доски. Для работы с текстами в Photoshop 6 предусмотрен специальный инструмент — Text (Текст), с помощью которого можно создать разнообразные текстовые фрагменты. При вводе текста создается специальный текстовый слой (на

палитре

Layers

он

обозначается

буквой

Т),

которому,

кроме

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

Выберите инструмент Type (Текст). На панели свойств (рис. 4.2)

появляется набор параметров инструмента. Выберите шрифт Arial Black (входит в стандартную поставку Windows), задайте его размер 36 pt (пункта). Цвет шрифта задайте по своему вкусу с учетом цвета будущего фона.

Рис. 4.2 Панель свойств инструмента Type (Текст) 4.

Введите название вашей первой страницы, например «МОЯ

ЛЮБИМАЯ ШКОЛА». В рабочем окне пjявляется надпись. 5.

Photoshop позволяет переместить текст в любую позицию. Для

этого нужно сдвинуть курсор вне зоны текста (он преобразуется в указатель инструмента перемещения) и, нажав клавишу мыши, передвинуть текстовую надпись. 6.

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

стили слоев.

34 7.

Вызовите Layer | Layer Style | Bevel and Emboss (Слой | Стиль слоя

| Фаска и рельеф). Подберите параметры эффекта (Size — размер фаски и Soften — смягчение) так, как вам нравится, и нажмите на кнопке OK. Наш вариант объемной надписи представлен на рис. 4.3.

Рис. 4.3 Основная надпись после применения стиля Bevel and Emboss выглядит достаточно рельефно

8.

Нажмите на кнопке Create warped text (Создать фигурный

текст), расположенной на панели свойств инструмента Type (Текст). Появляется окно диалога (рис. 4.4). Здесь имеются: раскрывающийся список стилей оформления текста Style (Стиль), переключатель ориентации формы Horizontal (Горизонтально) или Vertical(Вертикально), движковые регуляторы Bend (Изгиб), Horizontal Distortion (Горизонтальные искажения) и Vertical Distortion (Вертикальные искажения). Рис. 4.4 Окно

диалога

Warp

text

(Фигурный текст) позволяет в широких пределах управлять формой текстовых фрагментов

9.

Раскройте список стилей оформления текса Style (Стиль) и

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

35 Надпись готова к размещению на главной странице сайта. Теперь ее нужно сохранить в формате для Web. 10.

Вызовите команду Save For Web (Сохранить для Web). Подберите

соответствующий формат (GIF, PNG-8, или PNG, так как они позволяют сохранить прозрачность слоя при установленном флажке Transparency – прозрачность) и оптимизируйте изображение по критерию минимального размера файла при приемлемом для вас уровне качества за счет подбора количества цветов в палитре. Сохраните результат на диске с именем, например, title. 3.2 «Изготовление» кнопок Различные кнопки являются необходимым элементом оформления практически любого сайта. С их помощью чаще всего выполняется навигация в пределах сайта, переходы на другие сайты, вызов исполнения специфических процедур, например, загрузка информации и т.п. Существует огромное многообразие оформления кнопок: от простейших прямоугольных рамок до сложных, "навороченных" анимированных объемных фигур. Мы с вами рассмотрим создание нескольких вариантов кнопок. Кнопка-логотип Кнопка-логотип может быть необходима, например, для организации ссылки на другой сайт. Как и любой другой элемент оформления ее можно создать самыми разными способами. Мы используем прекрасные возможности векторных слоев Photoshop 6. 1.

Создайте новое изображение размером

70х70 пикселей с прозрачной основой в режиме RGB

с помощью команды File | New (Файл |

Создать). 2.

Задайте основной цвет — белый.

36 Возьмите второй инструмент — Rounded Rectangle Tool (Скругленный прямоугольник) и впишите с его помощью квадрат (удерживая клавишу Shift) в границы изображения (рис. 4.5). Рис. 4.5 Квадрат со скругленными углами на прозрачном фоне — основа для создания кнопки-логотипа 3.

Вызовите команду Window | Show Styles (Окно | Показать стили).

Появляется палитра стилей (рис.4.6) Рис. 4.6 Палитра стилей оформления векторных объектов

4.

Выберите из палитры стиль Chiseled Sky (Фрагмент неба). Квадрат

со скругленными углами преобразуется в "трехмерную" кнопку голубого цвета. Если цвет вас не устраивает, можете легко его изменить, вызвав команду Layer | Layer Style | Color Overlay (Слой | Стиль слоя | Наложение цвета) для сплошной заливки или Layer | Layer Style | Gradient Overlay (Слой | Стиль слоя | Наложение градиента) для заливки градиентной цветовой растяжкой. Попробуйте оба варианта изменения цветовых характеристик кнопки. 5.

Откройте изображение LOGO.JPG, содержащую эмблему на белом

фоне. Нам требуется "наклеить" ее на кнопку. 6.

Вызовите команду Select | Color Range (Выделение | Цветовой

диапазон) и выделите белый цвет фона. 7.

Инвертируйте выделение командой Select | Inverse (Выделение |

Инверсия) или просто нажмите Ctrl+Shift+I. Результат показан на рис 4.7a.

37 8.

Скопируйте ее в буфер, затем активизируйте изображение кнопки и

вставьте содержимое буфера. Отцентрируйте вставленную эмблему на кнопке, перемещая мышью при нажатой клавише Ctrl. Рис. 4.7 Выделенная из фона эмблема предприятия (a) и готовая кнопкалоготип

(b)

с

"наклеенной

b

a

эмблемой 9.

Совместите слои командой Merge Visible (Совместить видимые),

чтобы оставить прозрачную основу.

Все — стильная трехмерная кнопка-

логотип готова (рис. 4.7b). После помещения на Web-страницу и добавления ссылки, достаточно будет нажать на нее мышью, чтобы очутиться на нужном сайте. 10.

Вызовите команду Save For Web (Сохранить для Web). Выберите

формат GIF, чтобы сохранить прозрачность. Не забудьте установить флажок Transparency

(Прозрачность).

Оптимизируйте

файл

по

критерию

качество/размер и сохраните изображение в файле logotip. У нас получились неплохие результаты при 16-ти цветной палитре Selective (Выборочная) и алгоритме сглаживания Diffusion (Диффузия). Управляющие кнопки В качестве примера рассмотрим процесс создания кнопки Load, которая служит для вызова режима загрузки какой-либо информации с сайта. 1.

Создайте заготовку размером 50х40 пикселей с прозрачной основой

в режиме RGB. Выберите в качестве основного, например, темно синий цвет (R0G0B150).

38 2.

Возьмите

инструмент

Ellipse

Tool

(Эллипс) и впишите эллипс в заготовку, начав рисование из любого угла и оставив небольшие пространства по сторонам (рис. 4.8). Формируем темно синий эллипс. 3.

Выполните двойной щелчок на обозначении векторного слоя и

выберите в появившемся окне диалога "Layer Style" (Стиль слоя) вариант Bevel and Emboss (Фаска и рельеф). Подберите параметры эффекта так, как вам нравится, чтобы получилась объемная эллиптическая кнопка. 4.

Перейдите к эффекту Drop Shadow (Тень) и создайте небольшую

тень, отбрасываемую кнопкой вправо вниз (рис. 4.9). 5.

Выберите инструмент Type Tool (Текст). Задайте желто-

оранжевый цвет, установите шрифт Arial Black кеглем 11 и введите надпись LOAD. Переместите ее на центр кнопки. 6.

Чтобы вписать надпись в форму кнопки (эллипс), нажмите на

клавише Create warped text, расположенной на панели свойств инструмента Type Tool (Текст), и выберите вариант стиля Bulge (Вздутие). Подберите соответствующее значение параметра Bend (Изгиб). завершена. Рис. 4.8 Исходный вариант темно-синего эллипса для создания кнопки (масштаб 400%) Рис. 4.9 Объемная кнопка на прозрачном фоне с тенью — все получено с использованием стилей слоя.

Работа над кнопкой

39

Рис. 4.10 Надпись на кнопке расположена по центру Рис. 4.11 После

вписывания

текста

в

форму эллипса можно считать, что изображение кнопки готово к записи

в

файл

в

формате,

пригодном для размещения в Web 7.

Совместите слои командой Layer | Merge visiable (Слой |

Соместить видимые), чтобы сохранить прозрачность фона. Командой Save For Web (Сохранить для Web) сохраните кнопку в формате GIF с именем load, предварительно оптимизировав по критерию качество/размер. 3.3 Создание многослойной композиции Теперь перейдем к более сложному — сделаем картинку для университетского

сайта,

аналогичную

изображению

на

обложке

презентационной папки для бумаг. Основными элементами композиции будут: •

достаточно сложный синтезированный фон;

•

фигура Ярослава Мудрого;

•

оформленная текстовая надпись.

Создание фонового изображения 1.

Вызовите команду File | New (Файл | Создать). Появляется окно

диалога. 2.

Задайте размеры 200х300 пикселей,

Resolution (Разрешение)

оставьте по умолчанию — 72, Mode (Режим) — RGB, Contents (Цвет фона) — White (Белый), введите в поле Name имя для создаваемого файла example и

40 нажмите OK. В рабочей области формируется окно изображения. На палитре Layers (Слои) показан только один слой Background (Фон). Для

создания

фонового

изображения

нам

сначала

понадобиться выполнить градиентную радиальную заливку. 3.

Нажмите Ctrl+0, чтобы максимизировать окно изображения в

пределах рабочего пространства. 4.

Выберите инструмент Gradient (Градиент), на

панели свойств щелкните по значку (второй слева) Radial Gradient (Радиальный градиент). 5.

Для основного цвета задайте R0G0B255 – чистый синий, для

фонового - R0G0B100 (темно-синий). 6.

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

любую сторону примерно на 2/3 расстояния до границы окна. После отпускания клавиши мыши белый фон заполняется цветовой радиальной растяжкой от ярко-синего до темно-синего. Потренируйтесь в выполнении растяжки в различных направлениях и из различных точек. В результате должно получиться примерно как на рисунке. Следующая задача — попытаться создать эффект взрыва. Для этого нам потребуется внести в изображение определенную динамику. Принципиально иллюзию движения позволяют создавать фильтры, размывающие изображение в определенном направлении.

В

нашем

случае

эти

фильтры

будут

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

41 7.

Вызовите Filter | Stylize |Extrude (Фильтр | Стилизация |

Экструзия).

Появляется

окно

диалога,

в

котором

задайте

параметры

выдавливания, как показано на рисунке.

8.

Нажмите ОК. Гладкая картинка заметно исказится, на ней

появляется множество «выдавленных» пирамидок. 9.

Вызовите Filter |

Blur |Radial Blur (Фильтр | Размытие

|

Радиальное

размытие). Появляется окно диалога, в котором задайте параметры, как показано на рисунке: Amount (Величина) — 30, Blur Method (Метод размытия) — Zoom (Из центра), Quality (Качество) — Draft (Черновое) и нажмите ОК. Размытое радиально изображение выглядит достаточно динамичным. Следующий этап – вставка изображения статуэтки Ярослава Мудрого. Выделение и вставка изображения 1.

Загрузите

в

рабочую

область

изображение

статуэтки Ярослава Мудрого из файла, открыв (File | Open) файл YAROSLAV.JPG и нажмите Ctrl+0. Вводим объект для работы.

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

объекта

подсказывают,

что

лучше

всего

использовать

цветочувствительные инструменты выделения, а именно Magic Wand (Волшебная палочка). 2.

Выберите инструмент Magic Wand (Волшебная палочка).

На панели свойств отображаются его параметры. 3.

Введите значение Tolerance (Допуск) равным 20.

4.

Нажмите инструментом Magic Wand (Волшебная палочка) где-

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

Нажмите и удерживайте клавишу Shift. Устанавливается режим

дополнения к выделенной области, а к стандартной форме курсора добавляется знак плюс (+). 6.

Пощелкайте инструментом Magic Wand (Волшебная палочка) на

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

Выберите команду Select | Inverse (Выделение | Инвертировать).

Вместо фона выделенной становится фигура Ярослава Мудрого. Следующая задача — перенос выделенного изображения на подготовленный ранее фон. Эта операция легко выполняется через буфер обмена (Clipboard) Windows.

43 8.

Выберите команду Edit | Copy

(Правка | Копировать). Содержимое выделенной области копируется в буфер обмена. 9.

Закройте

окно

изображения

YAROSLAV.JPG, так как оно больше не нужно. Выберите команду Edit | Paste

10.

(Правка

|

Вставить).

Содержимое

буфера

вставляется и размещается в собственном слое над слоем фона, что хорошо видно на палитре Layers (Слои). 11.

Выберите команду Edit | Free Transform (Правка | Произвольная

трансформация). Вокруг вставленного объекта появляется маркерная рамка. Зацепившись за любой из угловых маркеров, уменьшите размер объекта так, чтобы он был по высоте чуть больше 1/3 от размера окна. Корректируем размер фигуры в соответствии с правилом золотого сечения. 12.

Разместите фигуру таким образом, чтобы уровень ее глаз был рас-

положен примерно на 2/3 от высоты обложки по вертикали, а линия правой от нас стороны носа примерно совпадала с вертикальной осевой. В соответствии с правилами композиции мы позиционируем доминанту немного асимметрично. Следующий момент — это изменение цвета фигуры. Несмотря на то, что желтый цвет дерева хорошо гармонирует с синим цветом фона (сочетаемые цвета), постараемся придать композиции немного большую колористическую строгость. А именно — окрасим фигуру в один из оттенков синего цвета. Тонирование объекта путем замены цвета Фигура Ярослава имеет довольно мало оттенков желтого цвета, поэтому для его замены удобно воспользоваться специальной командой Replace Color (Замена цвета) из меню Image | Adjust (Изображение | Настройка): 1.

Вызовите команду Image | Adjust | Replace Color (Изображение |

Настройка | Замена цвета). Появляется окно диалога команды.

44 2.

Выберите пипетку для задания исходного цвета и щелкните ею где-

либо на изображении князя Ярослава. Установите значения Fuzziness (Допуск) — 200, чтобы охватить все множество оттенков желтого, Hue (Цветовой тон) — 180 (на цветовом круге соответствует чистому синему), Saturation (Насыщенность) — 0, Lightness (Яркость) — 5-10. Поработайте с движковым регулятором и пипетками. Если какой-либо результат тонирования вы считаете приемлемым, нажмите кнопку OK. Тонируем изображение фигуры. Тонирование и предварительная обработка вставленного объекта завершены. Можно приступить к более органичному внедрению объекта в фон. Управление прозрачностью объекта Попробуем создать эффект, имитирующий постепенное «проявление» фигуры из фона. Нам потребуется выполнить преобразование граничных частей фигуры так, чтобы они постепенно «таяли», становясь прозрачными.

Для

этого

в

Photoshop

имеется

возможность использовать особенности специального слоя, который называется слой-маска. Закрашивание этого слоя черным цветом маскирует (скрывает) изображение, закрашивание белым – показывает (проявляет) изображение, закрашивание оттенками серого – создает полупрозрачность слоя. 1.

Выберите команду Layer | Add Layer Mask (Слой | Добавить слой-

маску) и укажите вариант Reveal All (Показать все). На палитре Layers (Слои) появляется белый прямоугольник слоя-маски и специальный значок-цепочка, связывающая текущий слой со слоем-маской.. 2.

Для закрашивания выберите инструмент Airbrush

(Аэрограф), на панели свойств возьмите кисть вторую слева во втором ряду, установите Pressure (Нажим) = 10%. Задаем параметры инструмента для последующей работы.

45 3.

Установите в качестве основного цвета – черный, нажав клавишу D

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

Выберите команду Layer | Remove Layer Mask (Слой | Удалить

слой-маску) и укажите вариант Apply (Применить). Слой-маска накладывается на слой, содержащий фигуру, создавая эффект постепенного перехода. Ввод и оформление текстовой надписи 1.

Выберите инструмент Eyedropper (Пипетка) и возьмите

самый яркий синий цвет непосредственно из изображения. Задаем цвет будущей надписи в общей тональности с остальными объектами обложки. 2.

Выберите инструмент Тype Tool (Текст). Курсор принимает форму

вертикальной черты, на панели свойств появляются инструменты, характерные для текстовых процессоров. 3.

На панели свойств выберите из раскрывающегося списка шрифтов

Arial Black. Установите размер 18 пунктов, способ выравнивания – по центру. Задаем параметры будущей надписи. 4.

Щелкните

в

нижней

левой

части

изображения на расстоянии примерно 2/3 интервала от нижней границы до фигуры. Курсор фиксируется в указанной позиции. 5.

Введите

первую

строку

текста

—

NOVGOROD затем нажмите клавишу Enter и введите вторую

строку

—

STATE

UNIVERSITY.

Вводим

текстовую надпись основным цветом. Для перемещения текста сдвиньте курсор вне зоны текста (он преобразуется в указатель инструмента перемещения) и, нажав клавишу мыши, установите надпись в соответствующую позицию.

46 6.

Нажмите на панели свойств кнопку Create warped text (Создать

фигурный текст) и подберите форму надписи по своему вкусу.

7.

Для завершения работы с текстом нужно выбрать любой другой

инструмент. Если посмотреть на картинку, то не трудно заметить, что плоская надпись смотрится чужеродным телом на фоне достаточно рельефного и фактурного изображения. Следовательно, наша задача — придать надписи объем, чтобы она вписалась в общую композицию. Придание тексту эффекта трехмерности Для оформления нашей текстовой надписи воспользуемся вариантом стиля Bevel and Emboss (Фаска и рельеф). 1.

Вызовите команду Layer | Layer Style (Слой | Стиль слоя) и

укажите вариант Bevel and Emboss (Фаска и рельеф). Появляется окно диалога «Layer Style», в котором слева среди множества стилей оформления отмечен «Bevel and Emboss» (Фаска и рельеф). Правее расположено окно с множеством параметров эффекта. 2.

Установите следующие значения: Style (Стиль) — Inner Bevel

(Внутренний

скос);

Technique

(Техника

выполнения) — Smooth (Сглаженный); Depth (Глубина) = 100; Direction (Направление) — Up (Вверх); Size (Размер) = 2; Soften (Смягчение) = 0; Angle (Угол освещения) = 135; Altitude (Возвышение источника света) = 15. Остальные параметры оставьте по умолчанию. Нажмите ОК. Текст становится выпуклым, трехмерным. На палитре Layers (Слои) рядом со значком текстового слоя появляется буква f, показывающая, что к слою приложен эффект. Ниже появляется надпись, конкретизирующая какой именно эффект использован для этого слоя (Bevel and Emboss).

47

Нетрудно заметить, что текст чрезмерно выделяется из фона, привлекает внимание

и

начинает

доминировать

над

основным

изображением.

Следовательно, необходимо принять меры, чтобы приглушить его. Лучший и наиболее простой способ — увеличить прозрачность текста. 3.

На палитре Layers (Слои) при активном

текстовом слое нажмите мышью на треугольник Set the opacity

(Установить

непрозрачность).

Появляется

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

Подвигайте его так, чтобы подобрать наилучшее значение

непрозрачности надписи. «Произведение»

готово.

Можно

сохранить его в файле для размещения на сайте

уже

знакомым

нам

способом

—

командой Save for Web (Сохранит для Web). Так

как

изображение

многослойное,

то

предварительно требуется совместить все слои в один фоновый (Background). 5.

Нажмите

мышью

на

треугольнике вызова меню на палитре Layers (Слои). Раскрывается меню команд работы со слоями. 6.

Выберите команду Flatten Image (Совместить слои). Все слои

сливаются в один слой Background (Фон). Объем изображения уменьшается с 330 до 176 Кб. 7.

Вызовите на выполнение команду Save for Web (Сохранить для

Web). Проанализируйте качество и размер изображения в различных форматах и при различной степени сжатия. Сохраните изображение в папке Мои рисунки.

48 ПРИЛОЖЕНИЕ 1. НАЗНАЧЕНИЕ ИНСТРУМЕНТОВ ПАЛИТРЫ TOOLS (ИНСТРУМЕНТЫ) В соответствии с выполняемыми функциями инструменты можно условно разделить на следующие группы: • выделение частей или всего изображения; • рисование и закрашивание; • создание векторных рисунков и текста; • управление отображением; • ретушь фотоизображений; • инструменты для Web дизайна; • ввода комментариев. Приведенная

классификация

весьма

условна,

так

как

часть

инструментальных средств может быть отнесена одновременно к нескольким группам. Например, Stamp (Штамп) может быть отнесен и к инструментам рисования, и к инструментам ретуши, а инструменты из группы Pen (Перо) — рисования и выделения. Инструменты выделения Для выполнения операций над отдельными частями изображения сначала необходимо их выделить. Для этого используются инструменты Marquee (Область), Lasso (Лассо), Magic Wand (Волшебная палочка), а также инструменты из группы Pen (Перо). Инструменты для выделения правильных по форме областей (Marquee) Кнопка

Название Rectangular Marquee (Прямоугольное)

Назначение Выделяет прямоугольные области. Для получения квадратной области удерживайте клавишу Shift

Elliptical Marquee Выделяет овальные области. Для выделения области в (Овальное) форме круга удерживайте клавишу Shift Single row (Строка)

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

49 Single column Определяет выделенную область как вертикальный (Столбец) столбец толщиной в один пиксель

Инструменты для выделения произвольных по форме областей Кнопка

Название

Назначение

Lasso (Лассо)

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

Polygonal Lasso (Многоугольн ое лассо)

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

Magnetic Lasso (Магнитное лассо)

Объединяет свойства двух инструментов выделения областей: Lasso (Лассо) и Magic Wand (Волшебная палочка). При использовании нет необходимости точного следования контуру выделяемого объекта. Если объект имеет достаточно хороший контраст по отношению к окружающему фону, то линия границы выделяемой области будет сама притягиваться к краю объекта.

Magic Wand (Волшебная палочка)

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

Группа инструментов Перо (Pen) С помощью этих инструментов можно рисовать в интерактивном режиме контуры, позволяющие

создавать

геометрические

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

Название

Назначение

Pen (Перо)

Для рисования контуров с помощью линейных сегментов или кривых Безье путем создания набора узловых точек (узлов)

Freeform Pen (Свободное перо)

Для создания контуров в режиме «свободного» рисования аналогично рисованию карандашом на бумаге. Узловые точки, добавляются автоматически.

Add Anchor Point (Перо+)

Для добавления новых узловых точек

Delete Anchor Point (Перо-)

Для удаления узловых точек

Convert Point (Конвертор узлов)

Для изменения свойств узловых точек

50

Инструменты управления контурами Кнопка

Название

Назначение

Direct Selection (Указатель)

Предназначен для редактирования узловых точек контуров (выделять, перемещать, менять угол направления и величину вектора)

Path Component Selection (Указатель субконтуров)

Для выделения и перемещения всего контура или субконтура

Инструменты для рисования К ним относятся три инструмента, имитирующих работу

традиционных

инструментов

художника:

Кисть (Paintbrush), Карандаш (Pencil) и Аэрограф (Airbrush). Кнопка

Название

Назначение

Paintbrush (Кисть)

Позволяет наносить мягкие мазки основным цветом

Pencil (Карандаш)

Позволяет рисовать линии с резкими (жесткими) краями

Airbrush (Аэрограф)

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

Группа History Brush Кнопка

Название History Brush (Кисть возврата)

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

Art History Позволяет создавать оригинальные изображения, стилизованные под различные типы живописи при помощи выбора одного из Brush (Стилизован десяти предлагаемых методов. ная кисть)

51 Группа Eraser

Кнопка

Название Eraser (Ластик)

Назначение Используется для удаления закрашиванием их цветом фона

пикселей

изображения

Background Для точного выделения фрагментов изображений. По принципу действия похож на традиционный ластик, но, в отличие от него, Eraser (Фоновый удаляет области изображения близкие по цвету. ластик) Magic Eraser (Волшебный ластик)

Интегрирует в себе возможности Magic Wand и команды Clear. После нажатия на пикселе изображения Photoshop определяет диапазон пикселей со сходными цветами (Magic Wand), но вместо того, чтобы выделять пиксели, Волшебный ластик делает их прозрачными (Clear), отображая на их месте «шахматку»

Группа Stamp(Штамп) Инструмент Stamp (Штамп) существует в двух вариантах Clone Stamp (Клон или просто Штамп) и Pattern Stamp (Шаблон или Штампузор). Первый — предоставляет возможность рисования точными копиями элементов изображения, а второй — цветными узорами. Кнопка

Название

Назначение

Clone Stamp (Штамп)

Копирует элементы изображения то же изображение, либо в другой документ

Pattern Stamp (Штамп-узор)

Для закрашивания изображения узором

Группа Eyedropper (Пипетка) Кнопка

Название

Назначение

Eyedropper (Пипетка)

Позволяет взять основной или фоновый цвет из изображения или палитр

Color Sampler (Метка цвета)

Позволяет установить на изображении до четырех меток в точках, информация о цвете которых будет отображаться в палитре «Info» (Инфо).

Measure (Измеритель)

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

52 Инструменты Заливки Кнопка

Название Gradient (Градиент)

Назначение Для построения различных типов градиентных заливок (плавный цветовой переход — растяжка) от основного цвета к фоновому, от основного цвета к прозрачному или более сложных комбинаций

Paint Bucket Закраска области изображения основным цветом или узорами (Заливка) (pattern)

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

Название

Назначение

Rectangle (Прямоугольник)

Используется для рисования прямоугольников и квадратов (при нажатой клавише Alt)

Rounded Rectangle (Скругленный прямоугольник)

Рисует прямоугольники или квадраты (при нажатой клавише Alt) со скруглёнными углами

Ellipse (Овал)

Для рисования эллипсов и окружностей (при нажатой Alt)

Polygon (Многоугольник)

Для рисования многоугольников с заданным количеством сторон

Line(Линия)

Для рисования линий

Custom Shape (Фигура) — [U]

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

Инструмент Type (Текст) Кнопка

Название Create a text layer (Создать текстовый слой)

Назначение Позволяет создавать текст, который будет окрашен в основной цвет и добавлен в изображение в виде нового текстового слоя

53 Create a mask or selection (Создать выделение)

Создание выделенной области в форме символов текста

Ввод горизонтального текста Horizontally orient text (Горизонтальный текст) Vertically orient text Ввод вертикального текста (Вертикальный текст)

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

Название

Назначение

Move (Перемещение)

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

Hand (Рука)

Позволяет просматривать части изображения, не поместившиеся на экране, заменяя функции полос прокрутки

Zoom (Масштаб)

Увеличение или уменьшение масштаба отображения

Инструменты для ретуши. Группа инструментов Тонирование Кнопка

Название

Назначение

Dodge (Осветлитель)

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

Burn (Затемнитель)

Затемняет отдельные области изображения

Sponge (Губка)

Изменяет насыщенность отдельных частей изображения.

Группа инструментов Фокус Кнопка

Название

Назначение

Blur (Размытие)

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

Sharpen (Резкость)

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

Smudge (Палец)

Имитирует эффект размазывания невысохшей краски

54 Инструмент для выполнения кадрирования Кнопка

Название Crop (Кадрирование)

Назначение Для кадрирования изображений отсечением лишних частей

Инструменты для Web дизайна Кнопка

Название Slice (Фрагмент)

Назначение Для разделения изображения на несколько фрагментов с целью создания карт ссылок или оптимизации изображения по частям.

Slice Select (Выбор фрагмента)

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

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

Название

Назначение

Notes (Заметки)

Используется для добавления в файл письменных примечаний

Audio Annotation (Звуковая аннотация)

Предназначен для добавления в файл звуковых пояснений (вводятся с помощью микрофона)

55 ПРИЛОЖЕНИЕ 2. РЕКОМЕНДАЦИИ ПО СКАНИРОВАНИЮ ИЗОБРАЖЕНИЙ В первую очередь оцените параметры сканера. По возможности используйте сканер с характеристиками, которые превышают ваши потребности. В этом случае вы можете рассчитывать, что получите гарантированное качество. ЗАМЕЧАНИЕ При выборе параметров сканирования: • следует учитывать конечную цель ввода и обработки фотографии, то есть, на каком устройстве и с какими характеристиками будет выводиться оцифрованное и обработанное изображение; • следует принимать во внимание качество и особенности сканируемого оригинала. Сбалансированный учет вышеприведенных характеристик позволит задать при сканировании оптимальные режимы. Если есть возможность, сканируйте негатив, а не фотоотпечаток, так как любой дополнительный процесс (в данном случае фотопечать) вносит свои искажения. Adobe Photoshop более качественно и, главное, математически точно выполнит преобразование из негатива в позитив. Если у вас в распоряжении имеется слайд, то ему следует отдать предпочтение перед негативом и фотографией, так как слайды имеют больший динамический диапазон плотностей, то есть большее количество деталей в тенях и светах изображения. Подготовьте

фотографию, негатив

или

слайд

для

сканирования.

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

56 Тщательно размещайте сканируемый объект на рабочем поле сканера относительно направляющих линеек, так как любые перекосы приведут к искажению изображения. Коррекция изображения с помощью поворота программными средствами значительно ухудшит его качество при пересчете положения пикселов. Сканируйте минимальную сюжетно-важную область, а не все изображение, включая обрамление. Это сократит объем файла и позволит вам «разобраться» с ним более просто. Не стремитесь выполнить коррекцию цвета, яркости и контрастности изображения при вводе с помощью программного обеспечения сканера (если, конечно, вы не занимаетесь массовым вводом однотипных фотографий или слайдов), так как в программе Adobe Photoshop вы сможете это сделать более тонко, значительно более удобно, быстро и эффективно. ЗАМЕЧАНИЕ Несмотря на рекомендации производителей сканеров корректировать изображение при вводе, учтите: ƒ при любой предварительной коррекции неизбежна потеря исходной информации; ƒ результат

коррекции

можно

оценить

только

после

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

57 целочисленную

кратность

по

отношению

к

аппаратной

разрешающей

способности сканера (например, если аппаратное разрешение сканера 600 dpi, то рекомендуется использовать режимы 300, 200, 150, 100, но никак не 510, 420, 350 dpi и т.п.) ВНИМАНИЕ Помните, что программная интерполяция не добавляет информации, а лишь увеличивает время сканирования и объем результирующего файла за счет вставки промежуточных точек и расчета всех их параметров. ЗАМЕЧАНИЕ Пожалуй, единственным примером, когда программная интерполяция действительно полезна, может быть сканирование черно-белых графических материалов, имеющих очень тонкие и наклонные линии. В этом случае удается избежать их разрывов из-за дискретизации и еще при сканировании устранить лестничный эффект (Aliasing). При сканировании старых черно-белых фотоснимков используйте режим RGB (полноцветный), а не Grayscale (в градациях серого). Это обусловлено тем, что при старении фотографий происходят физико-химические процессы, вызывающие их окрашивание чаще всего в желто-коричневый цвет. Если сканировать их в полутоновом режиме (Grayscale), то эта информация будет безвозвратно потеряна (отфильтрована). Кроме того, многие функции по обработке изображения не работают в модели Grayscale. Чтобы в дальнейшем было удобнее работать (сократить объем файла), можно будет преобразовать модель изображения из RGB в Grayscale непосредственно в Adobe Photoshop. В этом случае окрашенные части не исчезнут, как при сканировании, а преобразуются в соответствующие им серые полутона. При сканировании цветных фотоматериалов устанавливайте режим RGB. Использование CMYK оправдано лишь только в том случае, когда сканированное изображение без какой-либо обработки сразу же выводится на принтер или

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

обеспечением

сканера).

С

другой

стороны,

всегда

предпочтительнее работать с файлом меньшего размера (в режиме CMYK добавляется четвертый канал, что увеличивает размер файла примерно на 30%), а преобразование в CMYK выполнить после завершения обработки. Используйте для сохранения результатов сканирования на диске форматы файлов без деструктивного сжатия (TIF, PSD, BMP и т.п.), так как это предотвратит

потерю

информации

и,

следовательно,

потерю

качества

изображения. Если вы сканируете изображение для Web, то учитывайте, что разрешение экранов у большинства пользователей не превышает 96 ppi. Поэтому, зная размеры вашей фотографии и желательный размер ее изображения на экране, правильно рассчитывайте и выбирайте разрешение сканера. Если вы собираетесь предварительно редактировать и обрабатывать фотографию, задайте разрешение сканера в 1,5–2 раза выше расчетного. Это позволит удобно и эффективно работать в увеличенном масштабе, а после выполнения обработки вы легко приведете разрешение и размеры изображения к требуемым значениям с помощью команды Image Size (Размер изображения) из меню Image (Изображение). Если вы учтете эти рекомендации и «выжмете» из сканера и его программного обеспечения все, на что они способны, то получите приличный исходный материал для дальнейшей увлекательной творческой деятельности.

59 Устранение паразитного узора (муара) при сканировании печатной продукции Для устранения муара, который появляется из-за наложения печатного растра и сетки дискретизации сканера, можно попробовать применить следующие меры: 1.

Выполнить команду Filter | Noise | Despeckle (Фильтр | Шум |

Убрать шум). 2.

Выполнить команду Filter | Noise | Median (Фильтр | Шум |

Медианный) и задать параметр медианной фильтрации 1 пиксель. 3. Сканировать с разрешением в два раза больше, чем требуется, затем уменьшить разрешение в два раза с помощью команды Image | Image Size (Изображение | Размер изображения). 4.

При сканировании попробовать поместить оригинал под углом.

Проверить результаты при разных углах и выбрать наилучший.

60 ПРИЛОЖЕНИЕ 4. FAQ – НАБОЛЕВШИЕ ВОПРОСЫ И КРАТКИЕ ОТВЕТЫ НА НИХ 1. Что такое цифровое изображение (ЦИ)? ЦИ — модель реального или синтезированного изображения, хранящаяся на машинном носителе в виде совокупности цифровых кодов. Для WEB используют в основном растровые модели изображений. 2.

Что такое пиксель?

Пиксель (англ. pixel — picture element — элемент картинки) — неделимый прямоугольный элемент растровой модели, параметры которого описывают соответствующий ему участок реального или синтезированного изображения. 3.

Каковы параметры растровых изображений?

Размер — произведение ширины на высоту в пикселях. Разрешение — количество информации на единицу длины. Измеряется в ppi (pixels per inch — пиксели на дюйм) и dpi (dots per inch — точки на дюйм). Имеет смысл только, если известны реальные размеры изображения или отпечатка. Цветовая модель — способ описания элементов изображения в цифровом виде. Например, Bitmap, Grayscale, Indexed, RGB, HLS, Lab, CMYK. В Internet используются модели Grayscale, Indexed, RGB. Глубина цвета — количество бит памяти, выделяемых для описания тоновых или цветовых характеристик каждого пикселя в соответствие с моделью. Например, 1бит/пикс. (Bitmap, Halftone), 8 бит/пикс. (Grayscale, Indexed), 24 бит/пикс. (RGB). 4.

Какое разрешение требуется для публикации изображений в

WEB? Так как информация представляется на экране монитора, то при сканировании в масштабе 1:1 следует задавать разрешение 75 ppi — типовое значение разрешающей способности большинства мониторов.

61 5.

Что такое формат файла?

Формат — способ организации информации в файле. Для WEB используются форматы со сжатием: • GIF — для хранения рисунков и анимаций в модели Indexed (недеструктивное сжатие) • JPEG — для хранения фотографий в модели RGB (деструктивное сжатие) • PNG8 — для рисунков и фотографий в моделях Grayscale и Indexed (недеструктивное сжатие) • PNG24

—

для

рисунков

и

фотографий

в

модели

RGB

(недеструктивное сжатие) 6.

В чем заключается оптимизация файлов изображений для

WEB? Основной критерий — минимизация объема файла, а значит времени его передачи по сети, при допустимом уровне качества. Достигается использованием соответствующего формата файла (GIF, JPEG или PNG) и подбором совокупности параметров, определяющих наилучшее соотношение качество/размер. Выполняется оптимизация командой File | Save for WEB (Файл | Сохранить для WEB). 7.

Как изменить размер изображения

Для изменения размера изображения вызовите команду Image | Image Size (Изображение | Размер изображения), установите флажки Constrain proportions (Сохранить пропорции) и Resample Image (Пересчитать размеры), выберите алгоритм пересчета Bicubic (Бикубический) и введите новое значение ширины (Width) или высоты (Height) в разделе Pixels Dimensions (Размеры в пикселях). 8.

Как откадрировать изображение?

Для этого следует использовать специальный инструмент Crop (Кадрирование). С его помощью очерчивается требуемая прямоугольная часть

62 изображения, которая корректируется (при необходимости) перемещением угловых и боковых маркеров. Затем выполняется двойной щелчок внутри рамки или нажимается клавиша Enter. Часть изображения вне рамки удаляется. Для использования изображения на WEB-странице всегда следует кадрировать его так, чтобы на нем не было лишних неинформативных частей, увеличивающих размер файла и не несущих смысловой или композиционной нагрузки. 9.

Как изменить масштаб картинки на рабочем столе?

С помощью горячих клавиш: •

увеличить — Ctrl + "+"

•

уменьшить — Ctrl + "-"

•

масштаб 1:1 — Alt+Ctrl+0

•

максимальный размер в пределах свободной зоны рабочего поля —

Ctrl +0 Как перемещаться с одного фрагмента картинки на другой, не отключая рабочего инструмента (например, кисти или штампа)? Это можно сделать несколькими способами: •

удерживая нажатой клавишу Пробел (инструмент преобразуется в

руку —

), переместить изображение в окне на нужный участок при нажатой

левой кнопке мыши; •

передвинуть красную рамку в окне палитры Navigator (Навигатор);

•

с помощью движков прокрутки справа и внизу окна изображения.

10.

Как осветлить все изображение?

Предварительно следует проанализировать гистограмму изображения с помощью команды Image | Histogram (Изображение | Гистограмма). Если его тоновой диапазон явно смещен в область темных полутонов и теней, то лучше воспользоваться командой Image | Adjust | Levels (Изображение | Настройка | Уровни) для установки "белой точки" (движок — правый белый треугольник) и коррекции тоновых искажений в области полутонов (движок — средний серый

63 треугольник). Если гистограмма показывает почти полный равномерный тоновой диапазон, то можно воспользоваться командой Image | Adjust | Brightness/Contrast (Изображение | Настройка | Яркость/Контрастность). 11.

Как осветлить часть изображения?

Для этого можно использовать инструмент Dodge (Осветлитель). Как правило, степень его воздействия следует задавать на панели свойств не более 10%. 12.

Как затемнить все изображение?

Предварительно следует проанализировать гистограмму. Если его тоновой диапазон явно заужен и смещен в область светлых полутонов и светов, то лучше воспользоваться командой Image | Adjust | Levels (Изображение | Настройка | Уровни) для установки "черной точки" (движок — левый черный треугольник) и коррекции тоновых искажений в области полутонов (движок — средний серый треугольник). Если гистограмма показывает почти полный тоновой диапазон, то можно воспользоваться командой Image | Adjust | Brightness/Contrast (Изображение | Настройка | Яркость/Контрастность). 13.

Как затемнить часть изображения?

Для этого можно использовать инструмент Burn (Затемнитель). Как правило, степень его воздействия следует задавать на панели свойств не более 10%. 14.

Как увеличить резкость изображения?

Для увеличения резкости всего изображения или выделенной области следует использовать фильтры группы Sharpen (Резкость), для локального увеличения резкости — инструмент Sharpen (Резкость) на панели Tools (Инструменты). Среди фильтров наиболее удобным и эффективным является Unsharp Mask (Нерезкая маска). 15.

Как устранить цветовой отлив?

Прежде всего, нужно устранить тоновые искажения с помощью команды Image | Adjust | Levels (Изображение | Настройка | Уровни), а затем командой

64 Image | Adjust | Color Balance (Изображение | Настройка | Цветовой баланс) — выполнить коррекцию цвета. 16.

Как устранить локальные технические дефекты (царапины,

пятна и т.п.)? Наилучший способ — использовать инструмент Clone Stamp (Штамп). Размер инструмента (Brush — кисть) следует подбирать в соответствие с размером дефекта. Область, откуда будет браться информация для "заштамповывания" дефекта, должна находиться как можно ближе, но на расстоянии не менее диаметра кисти. Ее местоположение задается щелчком мыши при нажатой клавише Alt. Далее клавиша Alt отпускается, указатель переносится на дефект и выполняется щелчок мыши для перекрытия дефекта. 17.

Как выбрать основной и фоновый цвет?

Для этого нужно щелкнуть на соответствующем квадрате индикатора основного (верхний) или фонового (нижний) цвета. В окне диалога Color Picker (Выбор цвета) установите флажок Only WEB Colors (Только цвета WEB), укажите щелчком мыши нужный оттенок в основном окне образцов цвета и щелкните по кнопке OK или нажмите клавишу Enter. 18. Для

Как отменить неправильно выполненные операции отмены последней операции нажмите Ctrl+Z. Для отмены

нескольких последовательных действий — Ctrl+Alt+Z или откройте палитру History (Протокол) и вернитесь назад на нужн

65 СОДЕРЖАНИЕ

Введение ....................................................................................................................... 3 1. Основы работы с растровыми изображениями .................................................... 4 1.1 Общие понятия и определения ........................................................................ 4 1.2 Основы работы в программе Adobe Photoshop .............................................. 6 1.3 Выход из Photoshop....................................................................................... 13 2. Подготовка фотографий для публикации в Web ............................................... 14 2.1 Обработка фона фильтрами ........................................................................... 20 2.2 Устранение технических дефектов ............................................................... 23 2.3 Оптимизация файла изображения ................................................................. 29 3. Создание изображений для публикации в Интернет......................................... 31 3.1 Создание надписи-заголовка.......................................................................... 31 3.2 «Изготовление» кнопок .................................................................................. 35 3.3 Создание многослойной композиции ........................................................... 39 ПРИЛОЖЕНИЕ 1. Назначение инструментов палитры Tools (Инструменты) .. 48 ПРИЛОЖЕНИЕ 2. Рекомендации по сканированию изображений..................... 55 ПРИЛОЖЕНИЕ 4. FAQ – наболевшие вопросы и краткие ответы на них ......... 60 Содержание ................................................................................................................ 65