Альтернативные описатели

Альтернативные описатели (alt tag) достаточно важны, так как их текст помещается на место рисунков, которые не удалось загрузить. В современных броузерах альтернативные описатели отображаются во вспомогательных окнах при помещении курсора над соответствующим фрагментом.
Еще одним свойством альтернативных описателей является возможность их распознавания программами чтения с экрана, используемыми людьми с ослабленным зрением, и программами индексации.
Для того чтобы присоединить альтернативный описатель к фрагменту в Dreamweaver MX, выполните следующие действия.
1. Выберите фрагмент Mascot на открытой странице. Щелкните в окне Property в области Alt и введите в ее текстовое поле Company Mascot (Рисунок 9.31).
2. Протестируйте страницу в броузере. Когда она откроется, поместите курсор над талисманом, и вы увидите введенный альтернативный текст.

Цвет пикселей отображен в формате

Рисунок 9.3. Цвет пикселей отображен в формате RGB в палитре инструмента Color Picker. Можно заметить, что паразитным цветом является красный

Чтобы уменьшить влияние одной составляющей, уменьшите значение одного цвета, и сразу увеличится влияние остальных. Например, уменьшение красной составляющей увеличивает влияние желтого. В нашем примере потребуются дополнительные изменения.
8. Хотя в данном случае можно использовать параметры Hue (Оттенок) и Saturation (Насыщенность), это не рекомендуется, так как нам не требуется слишком точная регулировка. Лучшим выбором будут функции Levels или Curves. Выберите в меню пункт Filters=>Adjust Colors=>Curves. Откроется диалоговое окно Curves. Обратите внимание на прямую линию, пересекающую окно по диагонали, и на то, что квадрат окна разбит на части. Это — квадранты полутонов. Эта линия всегда рассматривается как более точный инструмент, нежели ползунки в области Levels.

9. Так как нужно уменьшить влияние красного цвета, выберите в меню каналов над квадратом значение Red. Для того чтобы посмотреть, какое влияние оказывает этот инструмент, переместите точку в центре прямой. Сначала переместите ее в нижнюю часть графика. Рисунок приобретет зеленые тона, так как из светлых и средних тонов была убрана красная составляющая. Переместите точку в противоположном направлении, и в рисунок добавится красный цвет. Верните центральную точку в ее исходную позицию и перемещайте ее вниз до тех пор, пока значение в поле Output не будет равно 115 (Рисунок 9.4). Щелкните на кнопке Cancel.

Цветовая коррекция рисунка средствами Fireworks MX

Сейчас мы займемся цветовой коррекцией изображения, созданного с помощью цифровой камеры со вспышкой. Мы пройдем все пять действий, перечисленных в предыдущем разделе. Все средства процесса коррекции содержатся в меню Filters, и это значительно упрощает работу. При коррекции рисунков не забывайте, что изменения должны быть незначительными. Не усугубляйте проблемы, которые собираетесь решить.
Для того чтобы выполнить цветовую коррекцию, следуйте следующим инструкциям.
1. Откройте файл FlashGathering.tif в папке Chapter 9 Exercise на Web-узле этой книги. Как только вы взглянете на любой рисунок, то сразу сможете сказать, что он в высоком ключе (светлый), в среднем ключе (хорошие средние тона) или в низком ключе (темный). Правильное определение ключа способствует выработке правильной стратегии коррекции.
2. Выберите в меню команду Filters=>Adjust Color=>Levels. В окне откроется гистограмма, показывающая распределение пикселей в разрезе яркости. Высота графика слева показывает относительное количество темных пикселей, а высота графика справа — светлых. Мы видим, что в нашем случае (Рисунок 9.1) пиксели в основном сконцентрированы в темной области. Это значит, что часть из них нужно сместить в сторону светлой области.

Цветовая коррекция в Fireworks

Изображение, созданное с помощью цифровой камеры или сканера, не может быть совершенным. Смещение цветовой гаммы (color cast) (когда рисунок оттенен каким-то посторонним фоном и нужно сместить баланс цвета) происходит независимо от нашего желания и снижает контрастность рисунка. Хотя существует несколько гораздо лучших приложений для цветовой коррекции, особенно в полиграфии, Fireworks может неплохо справиться с этой работой в рисунках с низким разрешением (которые и используются в Web). Коррекция цвета, будь то для полиграфии или для Web, состоит из одной и той же последовательности действий.
1. Определить ключевой тон.
2. Скорректировать яркость и тени.
3. Скорректировать контрастность.
4. Скорректировать цветовой баланс.
5. Применить маскировку сглаживания.

Диалоговое ото Swap Image позволяет

Рисунок 9.26. Диалоговое ото Swap Image позволяет указать в качестве мишени внешний рисунок

Это — одна из тех техник, которая требует осмотрительности. Когда рисунок помещается в Dreamweaver MX, а затем просматривается с помощью броузера, убедитесь, что файл мишени находится на локальном узле. Если это не так, клиент вашего узла получит вместо рисунка значок, означающий, что рисунок не найден, так как Fireworks MX создает путь к этому файлу относительно текущего документа. Еще одной тонкостью этой техники являются размеры файла мишени. Они должны совпадать с размерами рисунка триггера; в противном случае броузер будет изменять размеры мишени самостоятельно.

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

Рисунок 9.19. Для удаления фона с рисунка была применена растровая маска

3. Оставив выделенным градиент, выберите в меню пункт Edit=>Cut. Щелкните на рисунке и выберите в меню Modify=> Mask=> Paste as Mask. В окне Property отобразится результат применения векторной маски (Рисунок 9.20).
4. В списке Vector Mask окна Property выберите пункт Grayscale Appearance. Рисунок станет терять четкость, как будто он находится позади другого рисунка. Для того чтобы скорректировать этот эффект, перемещайте круглый маркер градиента к месту расположения носа субъекта на рисунке.

Добавление альтернативного описания

Рисунок 9.31- Добавление альтернативного описания к фрагменту осуществляется в окне Property

Alt. В качестве альтернативного описания фрагмента введите Go to New Riders. Target: _blank. Узел New Riders будет загружаться в отдельное окно броузера без имени. Когда закончите, окно Property будет похоже на показанное на Рисунок 9.32.

3. Нажмите клавишу <F12>, чтобы проверить изменения в броузере. Выйдите из броузера и выберите в меню пункт File=>Export, чтобы экспортировать фрагменты рисунка и файл HTML.

Добавление границы к маске

Добавление границы к маске

Маски не всегда используются для размытия четкости и не всегда имеют прямые границы. К маске можно применить любые эффекты, которые мы используем для обычных рисунков. Используя эффект Edge, можно создать массу причудливых и красивых эффектов обрамлений.
Для того чтобы добавить к маске границу, выполните следующие действия.
1. Откройте файл Edgemask. png. Выберите инструмент Rectangle в разделе Tools и нарисуйте белый прямоугольник, обрамляющий рисунок. Нарисуйте черный прямоугольник, немного больший, чем лицо персонажа на рисунке, и разместите его на слое выше слоя белого прямоугольника.
2. Выделите черный прямоугольник и выберите в меню пункт Filters=>Alien Skin Splat LE=>Edges. Откроется окно, запрашивающее, хотите ли вы конвертировать рисунок в растр. Щелкните на кнопке ОК.

Добавление рамки в рисунок

Зачем просиживать часами, убирая белые рамки вокруг рисунков, если этим рамкам можно придать изумительный вид всего за два действия? Рамки обычно используют в тех случаях, когда к некоторой информации нужно привлечь внимание, но обрамлять ее прямыми линиями было бы слишком тривиально.
Для того чтобы добавить рамку к рисунку, выполните следующие действия.
1. В папке Chapter 9 Exercise откройте файл FlashEvent.png и уменьшите рисунок до 75% его размера.
2. В разделе Vector выберите инструмент Rectangle и нарисуйте прямоугольник от верхнего левого до нижнего правого края рабочей области.
3. В окне Property установите следующие параметры: Fill-None; Stroke Color-0000FF; Tip Size-10; Stroke Category-Unnatural,Viscous Alien Paint; Edge-30; Texture-Chiffon; Texture Amount-26 %.
Ну как вам картинка в рамке? Вместо того чтобы для рамки использовать однообразные пиксели, Fireworks MX предлагает добавить текстуру. Эти текстуры можно использовать как из заготовок приложения Fireworks, так и создавать самостоятельно. Для последнего случая на примере деревянной текстуры мы продемонстрируем этот процесс.
1. Вернитесь к исходному рисунку, выбрав в меню File=>Revert и уменьшив его размер до 75%. Откройте панель Layers.
2. Нарисуйте прямоугольник, который был бы больше самого рисунка. Установите Stroke-None, а заполнение в Pattern, Wood Pattern 2.
3. Перейдите к слою с шаблоном (под слоем с рисунком). Добавьте внутреннюю фаску (inner bevel) из раздела Effects окна Property.

Документ HTML сгенерированный

Рисунок 9.30. Документ HTML, сгенерированный Fireworks, открыт в Dreamweaver MX, после чего выделен фрагмент Mascot

Для того чтобы вставить программу HTML, дважды щелкните на файле в диалоговом окне Insert Fireworks HTML или выберите этот файл и щелкните на кнопке Open. Диалоговое окно закроется, и в области Fireworks HTML File отобразится путь. Щелкните на кнопке ОК. Файл отобразится в рабочей области в том месте, в котором вы щелкнете мышью. Кнопка Insert Fireworks HTML хороша для вставки рисунков и программ в определенное место страницы. Однако ее использование для открытия полностраничного рисунка Fireworks MX похоже на стрельбу из пушки по воробьям. Кнопку Options в нижней части диалогового окна Insert Fireworks HTML можно использовать, однако, с некоторой осторожностью. Установка флажка Delete File After Insertion удаляет файл Fireworks HTML сразу после его вставки в Dreamweaver MX.

Фильтр Alien Skin Edges из набора

Рисунок 9.21. Фильтр Alien Skin Edges из набора Splat, примененный к маске

1. Откройте файл Flashgathering.png в Fireworks. Когда рисунок откроется, загрузите FreeHand и откройте в нем новый документ.
2. Щелкните на рисунке в Fireworks и перетащите его во FreeHand. Откройте панель Layers во FreeHand с помощью команды Window=>Panels=>Layers или комбинации клавиш <Ctrl+6>.
3. Когда откроется панель Layers, щелкните на рисунке и перетащите его в непечатную область этой панели (Эта техника описана в главе 5.) Рисунок поблекнет.
4. Выберите инструмент Ellipse и нарисуйте эллипс вокруг затененного лица, для того чтобы отметить маскируемую область. Выделите нарисованный эллипс.
5. Теперь можно деформировать эллипс и применить зубчатый эффект. Выберите в меню пункт Window=>Toolbars=>Xtra Tools. Откроется панель Xtra Tools. Дважды щелкните на инструменте Roughen (Шероховатость), после чего отобразятся его параметры (Рисунок 9.22).
6. Введите уровень шероховатости, равный 12, выберите значение переключателя Rough для границы и щелкните на кнопке ОК. Выделив объект, поместите курсор вовнутрь его. Курсор примет вид четырехнаправленной стрелки.
7. Чтобы применить эффект Roughen, щелкните и протащите указатель мыши по объекту. Отпустите кнопку мыши и снимите выделение с объекта.
8. Наибольшим достоинством пакета Macromedia Studio является интеграция его составляющих. Объекты, созданные в одном приложении, можно просто переместить в другое. Итак, выделите форму и скопируйте ее. Откройте рисунок Fireworks MX и выделите рисунок, к которому вы хотите применить маску. Выберите в меню пункт Modify=>MaskoPaste As Mask. Маска применится, но, возможно, в неверном месте.
9. Откройте панель Layers в Fireworks MX и щелкните на значке с изображением цепочки, обозначающем связь между рисунком и маской. Выберите слой маски на панели Layers, выделите маску и перетащите ее в нужное положение. Снова щелкните на значке с изображением цепочки, и связь восстановится. Повторная установка связи позволяет маске и подчиненному рисунку перемещаться по рабочей области как единое целое. Если у вас творческое настроение, добавьте в окне Property к рисунку эффект тени (Рисунок 9.23).

Фильтры

Ни один разговор о работе с рисунками в приложении Fireworks нельзя считать законченным, если не упомянуты фильтры. В Fireworks фильтры содержатся в меню Xtras. Если вы, например, работали с Photoshop, то уже знакомы с фильтрами. При работе с Fireworks все фильтры, содержащиеся в папке Xtras, подключаются к меню Xtras. Чтобы добавить фильтры Photoshop в Fireworks, достаточно в параметрах последнего указать путь к папке plug- ins первого.
Откройте пункт меню Preferences, выберите в нем пункт Folders=>Photoshop Plug-ins и щелкните на кнопке Browse. Перейдите к папке Plug-ins Photoshop и щелкните на кнопке Choose.

Фон был размыт а насыщенность

Рисунок 9.15. Фон был размыт, а насыщенность цвета уменьшена с помощью ползунка Saturation

4. Если сделанное вами выделение не отображается, сделайте следующее. Выберите в меню пункт Modify=>Selective JPEG=>Save Selection as JPEG Mask. Выделенный фрагмент поблекнет, а это означает, что была применена маска. Для того чтобы определить уровень сжатия, выберите в меню Modify=>Selective JPEG=>Settings. Откроется диалоговое окно параметров Settings. Установите уровень сжатия 30%. Это еще больше увеличит уровень сжатия выделенной области по сравнению с остальным рисунком. Щелкните на кнопке ОК.
5. Для того чтобы увидеть результат применения настроек сжатия, щелкните на вкладке Preview рабочей области приложения. Область станет зернистой. Для того чтобы снять маску, щелкните на вкладке Original и выберите в меню Selective JPEG =>Remove JPEG Mask. Применить сжатие можно также с помощью панели Optimize. Откройте эту панель и загрузите выделение. В списке Settings выберите пункт JPEG-Better Quality. Щелкните на кнопке Edit Selective Quality, и откроется диалоговое окно настройки избирательного сжатия Selective JPEG Settings. В этом диалоговом окне установите флажок Enable Selective Quality и задайте для уровня сжатия значение 70% (Рисунок 9.16). Щелкните на кнопке ОК и перейдите к представлению Preview рабочей области. С помощью функции Export Special можно сохранить рисунок в формате JPG с уровнем сжатия 80%. Сохраните рисунок в своей папке. Теперь сравним размеры файлов. Исходный рисунок . tif имел размер 448 Кбайт, только что сохраненный файл имеет размер всего 12 Кбайт.
Флажки Preserve Text Quality (Сохранить качество текста) и Preserve Button Quality (Сохранить качество кнопок) имеют приоритет над уровнями избирательного сжатия.
Если какой-либо текст или кнопки находятся в области, подвергающейся сжатию, вы можете воспользоваться этими флажками.

Форматы

Существует множество форматов рисунков, доступных в пакете Macromedia MX Studio. Знание того, какой формат лучше всего подходит для конкретной задачи, критично для успеха всего процесса. В некоторых приложениях пакета недоступны такие популярные форматы, как TIFF, PICT и BMP. Однако во всех приложениях пакета доступны три общих формата — PNG, JPG и GIF. Их можно создавать и редактировать также и в приложениях FreeHand и Fireworks.

GIF

Файлы формата GIF (Graphic Interchange Format) лучше всего использовать для цветных рисунков, которые имеют небольшие размеры благодаря ограниченной цветовой гамме (от 2 до 256 цветов). Фотографии, переведенные в формат GIF, чаще всего теряют качество, в связи с тем, что этот формат не может передать переходные цвета. Несмотря на это, фрагменты (slice) Web-страниц, как правило, сохраняются именно в формате GIF.
Если требуется прозрачность, ее можно создать и в формате GIF, однако при этом следует иметь в виду, что это 1-битовая прозрачность, а это значит, что в ней нельзя будет создать эффект feather.

Инструмент Pencil идеально подходит

Рисунок 9.9. Инструмент Pencil идеально подходит для корректировки областей из одною или нескольких пикселей

Инструмент Rubber Stamp

Инструмент Rubber Stamp

Иногда этот инструмент называют Clone, так как он копирует пиксели из одной области рисунка в другую.
Для того чтобы использовать инструмент Rubber Stamp, выполните следующие действия.
1. Откройте только что скорректированный рисунок, выберите инструмент Magnifying Tool и увеличьте область, на которой находится изъян на галстуке. Выберите инструмент Rubber Stamp.
2. Если инструмент перенести на рисунок, вид курсора изменится. Поместите курсор на красную область на галстуке (под второй полоской) и, удерживая клавишу <Alt>, щелкните кнопкой мыши. В месте щелчка появится перекрестие, а курсор примет вид круга. Перекрестие указывает на область, из которой будут копироваться пиксели, а круг — на область их окончательного размещения.
3. Если рисунок увеличен, использовать значения по умолчанию не рекомендуется. В окне Property установите для параметра Size (Размер) значение 2, а для параметра Edge (Ширина границы) — 1. Протащите инструментом, чтобы скопировать несколько красных пикселей в область над полоской. Продолжайте до тех пор, пока не закрасите большую часть области дефекта.
4. Повторите те же действия для области дефекта под полоской. Для того чтобы закрасить саму полоску, поместите курсор над третьей полоской, удерживайте клавишу <Alt>, щелкните на второй полоске и перетащите нужный фрагмент. Ту же технику можно применить и для первой полоски. После выполненных действий получившийся рисунок должен быть похож на Рисунок 9.8.

Инструмент Scale используется

Рисунок 9.14. Инструмент Scale используется для масштабирования выделения в рабочей области, а также для изменения значений ширины и высоты в окне Property

Использование инструмента Pencil и выделения

Использование инструмента Pencil и выделения

Несмотря на выполненные действия, остались пиксели, которые нужно подправить. Мы не могли использовать инструмент Rubber Stamp в этих областях, так как был риск копирования красного цвета на полоски или наоборот. Для точной корректировки идеальным инструментом будет Pensil (Карандаш). Выберите этот инструмент, установите его ширину, форму и цвет. После этого можно закрашивать нужные пиксели.
1. Выберите инструмент Eyedropper и щелкните на полоске галстука, после щелкните на красной области галстука.
2. Выберите инструмент Pencil. Щелкните на пикселях, которые нужно закрасить красным. Цветом полоски закрасьте оставшиеся дефекты на полосках (Рисунок 9.9).
Если теперь уменьшить размер до 100%, дважды щелкнув на инструменте Magnifying Glass, то можно увидеть результат всей нашей работы (Рисунок 9.10).

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

Обратите внимание, что на галстуке персонажа съемки есть дефект, который необходимо удалить. Для достижения этой цели существует множество способов, но мы рассмотрим только два, в которых используются инструменты Pencil (Карандаш) и Rubber Stamp (Штамп).

Использование в переключателе внешних файлов

Два предыдущих примера продемонстрировали замещение с использованием рисунка, расположенного в кадре рисунка Fireworks MX. Однако при этом в качестве источника замещения можно использовать и рисунки, размещенные вне отрытого документа. Сразу заметим, что это распространяется только на рисунки форматов GIF, Animated GIF, PNG и JPG.
Для использования при замещении внешних файлов нужно выполнить следующее.
1. Откройте файл External .png и добавьте в рисунок фрагмент (slice). Щелкните на маркере поведения и в списке раздела Behaviors выберите пункт Add Swap Image Behavior. Откроется диалоговое окно Swap Image (Рисунок 9.26).
2. Установите переключатель в положение Image File и щелкните на кнопке Browse. Выберите файл External2.png, размещенный в подкаталоге Rollover папки Chapter 9 Exercise, и щелкните на кнопке Open. Если файл имеет тип Animated GIF, снимите флажок Preload Images.
3. Во вкладке Preview приложения Fireworks этот эффект протестировать невозможно, поэтому нажмите клавишу <F12> и проверьте его в броузере.

Используя инструменты Rubber

Рисунок 9.10. Используя инструменты Rubber Stamp и Pencil, мы удалили дефект с рисунка

3. С рисунка можно удалить и торчащую из кармана ручку, и это еще проще. Увеличьте рисунок в области размещения ручки. Обратите внимание, что в этой области не так много деталей. Выберите инструмент Lasso и выделите область белой рубашки, примерно соответствующую размерам ручки. Затем выберите инструмент Subselection и перетащите выделение на область ручки. Этот инструмент копирует выделенные пиксели и позволяет последовательно их перемещать с помощью мыши до того места, в которое они должны быть помещены. Сохраните полученный рисунок и оставьте его открытым для следующего примера.

Избирательная компрессия JPG

Эта функция появилась в Fireworks 4. Избирательная компрессия JPG позволяет задавать различные уровни сжатия для разных областей рисунка. Например, на используемом в качестве примера рисунке фон для нас не важен. Если какая-либо деталь в этой области исчезнет, то вряд ли это кто-то заметит. Зато в награду мы получим меньшие размеры файла.

Изменение размеров рисунка

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

Эффект виньетки выполняется

Рисунок 9.18. Эффект виньетки выполняется за счет увеличения размытости границы в окне Property

JPEG

Формат JPEG (Joint Photographic Experts Group) является фактическим стандартом рисунков в Web. По сравнению с форматом PNG, размеры файлов JPG имеют немного меньший размер, однако при этом пропорционально теряют качество. При сжатии рисунка цвет данных смещается относительно своего исходного состояния. Именно поэтому в качестве цвета фона Web-страницы никогда не используется формат JPG. Вместе с этим, формат JPG не поддерживает прозрачность.
И все же формат JPG рекомендуется для размещения фотографий в Web. При этом изначально лучше отсканировать фотографию, сохраняя ее в формате без потерь, например в TIFF. Компрессию JPG можно применять только при окончательном сохранении рисунка. Если же компрессию JPG применить к рисунку JPG, качество ухудшится в два раза. Вот почему помещение рисунков JPG в качестве материала для Flash-анимации будет не самым мудрым решением.
Когда создается рисунок JPG, цвет смещается и ухудшается. Повторное сохранение этого файла в формате JPEG, либо во Flash (это приложение по умолчанию использует для сжатия кадров анимации именно формат JPG), либо в Fireworks только усугубит проблему, так как цвета снова сместятся и ухудшатся.

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

Рисунок 9.6. К рисунку применяется маскировка сглаживания

Карты рисунков и переключатели

Карты рисунков являются обычными изображениями, которые были разделены на слайсы (slices) в приложении Fireworks. Переключатели (rollovers) используют эти составляющие для определения того, какой рисунок какую часть заменяет. Надо сказать, что создать переключатели, которые замещают один рисунок другим, в Fireworks достаточно просто. Примером переключателя может служить изменение цвета кнопки при наведении на нее указателя мыши. Карты рисунков используются для помещения на одном рисунке ссылок на разные адреса. Например, если у вас есть полоска с тремя значками, можно создать карту так, чтобы с каждым значком был связан свой собственный адрес URL. В следующих трех примерах мы покажем: как создать простой переключатель, который замещает один рисунок другим; как создать распределенный переключатель, который использует один рисунок на странице 'для замещения другого рисунка; и как использовать внешний по отношению к Fireworks рисунок для распределенного переключателя.
Для того чтобы создать простой переключатель, выполните следующие действия.
1. Откройте в Fireworks файл Rolloverl.png. Щелкните на рисунке и выберите в меню пункт Edit=>Insert=>Slice. Откройте панель Frames (Кадры), нажав комбинацию клавиш <Shift+F2> или щелкнув Frames and History и выбрав вкладку Frames.
2. Откройте файл Rollover2. png, щелкните на рисунке и скопируйте его в буфер обмена. Закройте рисунок.
3. В меню Panel Option выберите пункт Add Frames (Добавить кадры). Откроется диалоговое окно Add Frames. В поле ввода Number введите 1. В области Insert New Frames выберите пункт After Current Frame. Щелкните на кнопке ОК.
4. Под номером 1 откроется новый кадр. Выделите его и вставьте в него рисунок из буфера обмена.
5. Выделите кадр с номером 1, щелкните на фрагменте, выделив его, после чего щелкните на белом маркере внутри. Перетащите маркер в верхний левый угол фрагмента. От маркера в левый верхний угол рисунка протянется синяя линия (Рисунок 9.24).
6. Откроется диалоговое окно Swap Image, запрашивающее, где расположен рисунок, замещающий исходный. Так как у нас имеется только один дополнительный кадр, в списке Swap Image From будет находиться только кадр Frame 2. Щелкните на кнопке ОК.
7. Щелкните на вкладке Preview и протестируйте замещение. Также можно нажать клавишу <F12> и протестировать замещение в броузере.

Команды представленные в диалоговом

Рисунок 9.13. Команды, представленные в диалоговом окне Numeric Transform, позволяют масштабировать рисунок на заданное количество процентов (Scale), а также устанавливать его точные размеры (Resize)

Использование инструмента Scale
Инструмент масштабирования Scale используется для изменения размеров рисунка вручную. Этот инструмент работает с векторными и с растровыми объектами, равно как и с их комбинацией.
Чтобы скорректировать размеры рисунка, выполните следующие действия.
1. Используя рисунок из предыдущего примера, выберите инструмент Rectanglar marquee и выделите некоторый фрагмент. Выберите инструмент Scale, и на границах выделения отобразятся маркеры, с помощью которых можно изменять размеры фрагмента. Заметим, что только угловые маркеры позволяют масштабировать, остальные же только искажают рисунок.
2. Нажмите клавишу <Shift> и, удерживая ее, перетащите маркер, выделения, растягивая или сжимая область.

Маски

Маски в Fireworks могут быть векторными и растровыми. Эти маски применяются не ко всему рисунку, а к объекту под маской. Видимость фрагментов рисунка зависит от уровня серого пикселей применяемой маски. Если пиксель белый, то находящееся под ним видимо, если пиксель черный — скрыто.
Маски скрывают на подчиненном рисунке все, что находится вне границ маски. Форма может быть создана в растровом или векторном виде. В первом случае может быть использована любая программа работы с графикой. Векторы обычно используются для создания сложных масок (например, для рисунка, проступающего сквозь текст; в этом случае текст составляется из векторов).
Для Web-дизайнера это — очень полезная техника, так как эффективное использование масок предопределяет отношение пользователя к рисунку. Маски также открывают массу творческих возможностей для создания заполнения с использованием фотографий или графики, а не обычных цветов или градиентов.
Для того чтобы создать растровую маску, выполните следующие действия.
1. Откройте файл Mask.png из папки Chapter 9 Exercise. По необходимости откройте панель Layers и обратите внимание, что присутствуют два слоя: один для рисунка, и другой, черно-белый, для маски.
Слой маски был создан посредством выбора предмета, его копирования и вставки. Скопированный рисунок был преобразован в серые тона с помощью команды CommandsoCreative=>Convert To Grayscale и инструмента Lasso с однопиксельной границей для выделения объекта. Выделение было заполнено черным цветом, после чего была выполнена инверсия цвета с помощью команды Filters=>Adjust Color Invert.
2. Откройте оба уровня и выберите в меню команду Modify=>MaskoGroup As Mask. Фон с рисунка исчезнет, и оба слоя будут объединены в один. Связь будет отображена в виде цепочки на панели Layers (Рисунок 9.19).
Векторные маски более гибкие, так как их можно отредактировать в любой момент, применяя разнообразные способы: от заполнения до спецэффектов. Формы являются не единственными доступными рисунками, используемыми для масок. Как вы узнаете в главе 12, для этого можно использовать и текст. В предыдущем примере для создания маски мы связали два слоя. В следующем примере для достижения того же эффекта мы будем использовать несколько иной способ.
1. Откройте файл Vmask.png. Выберите инструмент Rectangle из группы Vectors и нарисуйте прямоугольник, обрамляющий рисунок.
2. В окне Property установите Stroke-None и Fill-Linear Gradient. Щелкните на инструменте Gradient и переместите маркеры так, чтобы цвета изменялись от черного внизу до белого вверху.

Масштабирование в кратное число раз

Масштабирование в кратное число раз

В каком бы состоянии ни находился рисунок, никогда не масштабируйте без сохранения пропорций. Но даже и в этом случае добиться наивысшей точности удается, применяя масштабирование в целое число раз.
Для масштабирования рисунка с сохранением пропорций выполните следующие действия.
1. Выделите предыдущий рисунок, щелкнув на нем мышью. Выберите в меню пункт Modify=>Transform=>Numeric Transform. Откроется диалоговое окно Numeric Transform.
2. В списке в верхней части окна выберите пункт Scale. Установите флажки Scale Attributes и Constrain Proportions и масштаб 200%. Щелкните на кнопке ОК. Изображение увеличится в два раза и станет зернистым. Обратите внимание, что рабочая область не увеличилась, чтобы вместить рисунок. Отмените выполненное действие.
3. Снова выберите в меню команду Modify=>Transform=>Numeric Transform, чтобы открыть диалоговое окно Numeric Transform. На этот раз в списке выберите пункт Resize и установите точные размеры рисунка. Установите ширину, равную 150 пикселям, и щелкните на кнопке ОК (Рисунок 9.13). Посмотрите на результат и отмените действие.

Настройки избирательного сжатия

Рисунок 9.16. Настройки избирательного сжатия могут быть установлены с помощью меню или панели Optimize

Объект маски созданный во FreeHand

Рисунок 9.23. Объект маски, созданный во FreeHand, применен в качестве маски к рисунку в Fireworks. Для этого были использованы операции Cut и Paste из меню Modify

В Fireworks будут работать только фильтры Photoshop 5 и более поздних версий. Другие фильтры, такие как Eye Candy 2000 Splat (Alien Skin) и KPT (Kai's Power Tools), работать с Fireworks будут в любом случае. Если вас интересует, будут те или иные встраиваемые модули (plug-in) работать в Fireworks, обратитесь с этим вопросом к их производителю.
Как вы узнали выше, фильтры доступы в меню Filters. Однако это — не единственное место, где их можно найти. Если выделен какой-либо объект, фильтры будут доступны в окне Property после щелчка мышью на знаке "плюс" в списке Effects. Еще хотелось бы упомянуть, что фильтры работают только с растровыми рисунками. Как вы уже убедились в предыдущем примере, применение фильтра к векторному объекту требует его преобразования в растровый рисунок.

Обратите внимание на изменение

Рисунок 9.20. Обратите внимание на изменение в окне Property, когда векторная маска была применена к рисунку

3. В списке Edge Mode выберите пункт Torn Paper и щелкните на кнопке ОК. Форма объекта в рабочей области радикально изменится.
4. Выделите слои белого и черного прямоугольников на панели Object. После этого в списке Panel Options выберите пункт Flatten Selection. Два слоя сольются в один.
5. Выделите новый слой вместе со слоем рисунка и создайте растровую маску. Если маска не покроет лицо, щелкните на значке связки между объектом и маской на полоске слоя. Связка разорвется.
6. Щелкните на значке маски на полоске слоя и выделите маску в рабочей области. Выберите инструмент Direct Selection и переместите маску на нужное место. Переключитесь между двумя панелями, чтобы вернуть на место связку, после чего сохраните рисунок (Рисунок 9.21).

Обрезка рисунка

При работе в Web большую работу приходится выполнять, приводя размеры рисунков на странице в соответствие с их идеальной компоновкой. При этом лучшим способом будет уравнивание размеров исходного рисунка с его копией на Web-странице. Для этого лучше всего применить обрезание. В приложении Fireworks для этого существуют два способа.
1. Откройте рисунок и выберите инструмент Crop. Щелкните и протащите область, поместив в нее персонаж фотографии. Отпустите кнопку мыши. Область внутри прямоугольника — это то, что мы хотим сохранить, а область вне его мы будем игнорировать (Рисунок 9.11).
2. С помощью маркеров выделенной области можно скорректировать ее размеры. Когда результат вас удовлетворит, нажмите клавишу <Enter>. Рисунок вне области выделения исчезнет, и в результате уменьшится размер получившегося рисунка. Операцию вырезания можно отменить, выбрав в меню пункт Edit=>Undo Cropped Document или нажав комбинацию клавиш <Ctrl+Z>. Оставьте рисунок открытым для следующего примера.

Окно Property позволяет просмотреть

Рисунок 9.32. Окно Property позволяет просмотреть фрагменты перед экспортом

Сила приложения Fireworks состоит в средствах маскирования. Поэтому мы обсудили процесс создания векторной и растровой маски, применение фильтра к границам маски, а также использование инструментов Xtra приложения FreeHand для создания масок, используемых Freeworks.
В настоящей главе рассматривались также переключатели (rollover). Было показано, как создать простой, распределенный переключатели и переключатель, вызывающий внешние файлы для замещения. Мы закончили главу исчерпывающим обзором ряда вопросов, касающихся сдайсов и их экспорта в Dreamweaver MX. При этом было показано, как перед экспортом настроить эти фрагменты в окне Property.
В следующей главе речь пойдет еще об одной форме растровых рисунков — цифровом видео. Вы узнаете, как новые функции работы с цифровым видео приложения Flash MX позволяют добавить видео на Flash-узлы и в анимацию.

Окончательный рисунок имеет немного

Рисунок 9.7. Окончательный рисунок имеет немного больше деталей, и цвета не так смазаны, как на исходном рисунке

Оптимизация слайсов для экспорта в Fireworks MX

В одном из предыдущих разделов вы узнали, как создаются слайсы, подготовили фрагменты для экспорта и поместили их в Dreamweaver MX. В этом разделе описывается, как превратить окно Property в прекрасный инструмент для подготовки фрагментов перед выбором в меню пункта Export.
1. Откройте рисунок и выделите фрагмент Mascot.
2. Окно Property изменится, и в нем будут отображены свойства выделенного фрагмента.
Edit the Object Name. Измените имя на Mascotl, нажмите клавишу <Enter> и убедитесь, что новое имя отобразилось на панели слоя Web. Slice Color. Щелкните на значке с цветом и выберите цвет FF0000, чтобы изменить его с зеленого на красный. Slice Export Setting. В списке на панели Optimize выберите значение GIF Web Snap 128. Это значение позволит применять избирательное сжатие — нечто подобное тому избирательному сжатию JPG, которое мы рассматривали выше в этой главе. Это особенно полезно для фрагментов, содержащих небольшое количество цветов. Link (http://www.newriders.com). После щелчка на фрагменте пользователь попадет на узел New Riders.

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

Рисунок 9.29. Папки для страницы и фрагментов определены

Альтернативой индивидуальному выбору каждого фрагмента является открытие панели Insert, щелчок на кнопке Common, щелчок внутри пустой страницы Dreamweaver MX и щелчок на кнопке Insert Fireworks HTML (Рисунок 9.30). Откроется диалоговое окно Insert Fireworks HTML. Щелкните на кнопке Browse и перейдите к документу HTML, сгенерированному Fireworks MX.

Перетащите маркер к тому месту

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

2. Щелкните на маркере и перетащите его верхний левый угол мишени (Рисунок 9.25). Откроется диалоговое окно Swap Image. Когда вас попросят указать кадр мишени, укажите второй. Щелкните на кнопке ОК, и диалоговое окно закроется. Теперь можно все это протестировать либо на вкладке Preview приложения Fireworks, либо в броузере, нажав клавишу <F12>.
Для того чтобы удалить переключатель, щелкните на линии, начинающейся с маркера поведения. В ответ на вопрос, действительно ли хотите удалить переключатель, щелкните на кнопке ОК, и линия исчезнет.

PNG

Наименее понятным форматом из этой серии является PNG (Portable Network Graphics). Изначально он создавался как свободная от лицензий альтернатива формату CompuServe GIF. На самом деле этот выпад не сработал. Но не потому, что он не мог себя противопоставить таким монстрам, как GIF и JPG, а потому, что в старых броузерах отсутствовала его поддержка. Несмотря на это, благодаря своей способности хранить большой объем информации в небольших файлах без потери качества рисунка, он нашел свою нишу в пространстве графических форматов. К тому же PNG является единственным Web-форматом, обеспечивающим реальную прозрачность.
Формат PNG можно использовать для хранения данных в 8- и 24- битовом цвете. По сравнению с JPG, формат PNG имеет несколько большие размеры файла, но именно за счет того, что не теряется качество. Таким образом, несмотря на большие размеры, качество рисунков в нем значительно выше, чем в формате JPG.
Однако реальной находкой для Web-дизайнера этот формат становится благодаря его поддержке прозрачности. Информация о прозрачности хранится в альфа-канале, который значительно надежней, чем 1-битовая прозрачность, предлагаемая форматом GIF. Еще одно преимущество этого формата — возможность использования оттенения (opacity). Единственным же его недостатком является то, что не все броузеры поддерживают альфа-канал прозрачности, не требуя при этом установки дополнительного модуля (plug-in) типа QuickTime. Если в вашем рисунке PNG фон является прозрачным, можно как альтернативу предложить обработать его во Flash MX.
Формат PNG в приложении Fireworks принят по умолчанию. Если вы готовите рисунки для использования во Flash MX, независимо от того, применяется прозрачность или нет, это — лучший формат. Если в этом рисунке используется прозрачность, Flash MX преобразует ее в свой символ, что позволит ей отображаться в связанных объектах. Еще одним преимуществом использования Fireworks в связке с Flash MX является то, что последний распознает все слои, векторы и прочие механизмы, которые хранятся в файлах формата PNG.

Ползунки яркости и контрастности

Рисунок 9.2. Ползунки яркости и контрастности осветляют и затемняют пиксели. Перетаскивая ползунки, смотрите на полученный эффект

5. Корректировка цветового баланса требует выявления паразитного цвета и его устранения. Паразитным является цвет, который доминирует во всем рисунке. Его легче всего выявить на полутонах. Нельзя посмотреть на рисунок и сразу сказать, что в нем слишком много зеленого цвета. Нужно посмотреть на фрагмент рисунка, цвет которого вы определенно знаете, и тогда станет понятно, какой цвет его загрязняет. Выберите инструмент Eyedropper и установите в окне Property значение 3x3 Average. Другие два значения (Point Sample и 5x5 Average) нам не подходят. Первое из них показывает в окне только один пиксель, а второе вычисляет среднее значение цвета для области в радиусе 5 пикселей вокруг отмеченной точки. Для нас такой диапазон слишком велик.
6; Переместите курсор в область блика и посмотрите на средние тона. Щелкните мышью, и получившийся цвет примера отобразится в области Fill Color панели инструментов.
7. Щелкните на пиктограмме с изображением ножика, чтобы открыть меню Swathes, и выберите в нем инструмент Color Picker. Выберите модель RGB. Отобранный цвет отобразится в отдельном окошке, а ползунки покажут значения его составляющих. В нашем примере паразитным цветом был красный, соответственно ползунок красного мы сместим немного влево (Рисунок 9.3). Закройте Color Picker.

Ползунок ватта в диалоговом окне

Рисунок 9.5. Ползунок ватта.в диалоговом окне Levels поможет удалить красный паразитный оттенок из рисунка

12. Щелкните на кнопке ОК и сохраните рисунок. Откройте исходное изображение, чтобы увидеть эффект от произведенных действий (Рисунок 9.7).

Присвоив слайсам имена в слое

Рисунок 9.28. Присвоив слайсам имена в слое Web, легче придать им свойства интерактивности

Обратите внимание на имя фрагмента Going_On. В Fireworks не допускается наличие пробелов в именах на слое Web, так как обращение к ним происходит из программ HTML. Если в имя фрагмента включить пробел, будет вызвано окно, объясняющее правила. Для решения проблемы можно либо объединять слова (например, GoingOn), либо соединять их знаком подчеркивания. Если этого не сделать и вставить пробел, то как только в окне предупреждения будет выполнен щелчок на кнопке OK, Fireworks автоматически вставит между словами знак подчеркивания.
1. Когда фрагменты созданы и им присвоены имена, выберите в меню пункт File=>Export или нажмите комбинацию клавиш <Ctrl+Shift+R>. Откроется диалоговое окно Export. Фрагменты будут преобразованы в отдельные рисунки, и их будет сопровождать документ HTML. Советуем вам помещать файлы рисунков и HTML в одно легкодоступное место, чтобы не создавать мешанину из файлов, размещенных в папках и на рабочем столе. Это поможет команде легко получить доступ к нарезке, без угрозы потери какой-либо ее составляющей.
2. Создайте для страницы папку FWSlices и в ней папку Images, в которую будут помещены рисунки. Когда страницу надо будет собрать, ответственному за эту работу достаточно будет открыть папку FWSlices, чтобы увидеть в ней файл HTML и папку Images, содержащую все рисунки фрагментов страницы. Еще одним достоинством этого метода размещения является то, что-когда страницу придется отправлять по FTP на удаленный узел или по электронной почте в качестве вложения, придется сжимать всего одну-единственную папку.
3. Если для страницы у вас еще нет папки, вы можете создать ее непосредственно в диалоговом окне Export, щелкнув на кнопке New Folder. В созданной папке можно дополнительно создать каталог для рисунков. Чтобы сохранение выполнялось в нужные папки, используйте следующие настройки: File Name-MainPage; Save As Type—HTML and Images; Slices—Export Slices. Установите флажок Include Areas Without Slices, чтобы сохранить ту небольшую область, которая не вошла ни в один фрагмент.
4. Установите флажок Put Images In Subfolder и щелкните на кнопке Browse. Откроется диалоговое окно File Selector. Перейдите к папке, содержащей фрагменты, откройте ее и щелкните на кнопке Select. Имя выбранной папки отобразится после слова Select на кнопке (Рисунок 9.29).
5. Щелкните на кнопке Options. Откроется диалоговое окно, определяющее способ форматирования файла HTML. Щелкните на вкладке General и в списке HTML Style выберите пункт Dreamweaver HTML.
6. Щелкните на вкладке Table. В этом разделе определяется, как будут обрабатываться пустое пространство между фрагментами, а также цвет и заполнение пустых ячеек. В списке Space выберите пункт 1-Pixel Transparent Spacer (1-пиксельное прозрачное заполнение). В списке Contents выберите пункт Use Canvas Color=>Spacer Image. Последовательно щелкните на кнопках ОКи Save.
7. Перед тем как выйти из Fireworks и перейти в Dreamweaver MX, сохраните нарезанный рисунок в формате PNG в той же папке, что и страницу HTML Это поможет при последующем редактировании в Dreamweaver MX легко найти файл, содержащий все фрагменты. После этого можно в Fireworks щелкнуть на кнопке Quick Export и перейти в Dreamweaver MX, выбрав в меню пункт DreamweaveroLaunch Dreamweaver.
8. Когда откроется Dreamweaver MX, перейдите к папке, содержащей документ HTML, сгенерированный Fireworks, и дважды щелкните на этом файле. После того как он откроется в Dreamweaver MX, выберите конкретный фрагмент, щелкнув на нем мышью.

Работа с рисунками в Fireworks MX

Fireworks был одним из тех странных продуктов, которые рынок долго не принимал. Одни по-прежнему работали с Photoshop, другим это приложение казалось просто игрушкой. Все это продолжалось до тех пор, пока обе группы не поняли, что главным назначением этого приложения является создание и оптимизация рисунков для Web.
В то время Fireworks представлял собой странный гибрид средств для векторной и растровой графики, который, однако, позволял делать прекрасные вещи. Спустя годы Fireworks стал составной частью пакета Macromedia MX Studio.
Чтобы разобраться с этим приложением, прежде всего нужно изучить форматы, с которыми придется работать, — GIF и JPEG, — а также любой другой формат, в который приложение Fireworks может экспортировать рисунок.

Растры

Растровой графики избежать невозможно, так как рисунки, какими бы они ни были, состоят из пикселей. Образно говоря, после того как рисунок создан, его пиксели подобны энергии — их больше нельзя ни разрушить, ни создать заново. К рисунку можно добавить пиксели, чтобы увеличить его разрешение. Этот процесс называется интерполяцией. При этом качество рисунка ухудшается и одновременно увеличивается размер файла. Процесс удаления пикселей называется дискретизацией. В результате получается меньший размер файла, но рисунок оказывается "искалеченным", так как удаленную информацию невозможно восстановить.
При создании рисунков для Web встает вопрос разрешения. Разрешение — это количество пикселей в дюйме отображаемой информации. Если рисунок предназначен для печати, обычно используется разрешение 1200 пикселей на дюйм. Если же рисунок предназначен для Web, разрешение должно соответствовать качеству монитора. И здесь возникает проблема: системы Мае и PC используют разные разрешения экрана. В системах Мае разрешение экрана равно 72 пикселям на дюйм, а в системах PC — 96. Этой разницей можно пренебречь и просто использовать более высокое разрешение, например 100 пикселей на дюйм. Также следует упомянуть, что в Web используется пространство цветов RGB, поэтому сохранять рисунки для Web нужно с использованием только этой модели.

Размывка и создание блеклости ( blurring & desaturating)

Размывка и создание блеклости ( blurring & desaturating)

Иногда требуется создать такой фон, который не пересекается с какой-либо графикой переднего плана. Хорошей техникой создания такого фона является размытие рисунка и последующее уменьшение интенсивности цветов. Снижение насыщенности рисунка называют desaturating. Эта техника еще известна под названием выталкивания цвета (popping color).
Для того чтобы размыть рисунок и создать в нем блеклость, выполните следующие действия.
1. Загрузите файл с выделением и выберите в меню команду Filters=>Blur=>Gaussian Blur. Откроется диалоговое окно Gaussian Blur. Установите флажок Preview, задайте для уровня размывки значение 3. Если вы собираетесь размыть только выделение, используйте именно эту функцию, а не команду Blur. С помощью этой функции можно управлять уровнем размывки, а команда Blur применяет к выделению предустановленный уровень. Щелкните на кнопке ОК.
2. Выберите в меню пункт Filters=>Adjust Color=>Hue and Saturation. Откроется диалоговое окно Hue/Saturation. Ползунок Hue используется для изменения оттенка выделения. Ползунок Saturation влияет на интенсивность цветов в выделенном фрагменте. Ползунок Lightness влияет на яркость выделения. Установка флажка Preview позволяет сразу же наблюдать за внесенными изменениями. Флажок Colorize обычно используется для придания цвета черно-белым рисункам.
3. Итак, установите флажок Preview и снимите флажок Colorize. Переместите ползунок Saturation влево до значения -55. Цвет фона исчезнет (Рисунок 9.15). Сохраните рисунок.

Резюме

В этой главе было подробно описано создание рисунков в приложении Fireworks MX.
При демонстрации процесса цветовой коррекции было показано, как различные средства приложения, начиная от уровней и заканчивая маскировкой сглаживания, помогут улучшить качество рисунка.
Было также показано, что некоторые средства рисования (Rubber Stamp и Pencil) идеальны для больших и мелких правок в рисунке. Было продемонстрировано, что инструмент Cropping может использоваться не только для обрезки рисунка, но и для непосредственного экспорта вырезанной области.
В главе также рассматривались некоторые вопросы, касающиеся определения и изменения размеров рисунка с использованием различных средств. Было показано, как выталкивать цвет, уменьшив насыщенность цветов рисунка, и как к изображению применять избирательное сжатие JPG.

Рисунки с эффектом Sepia Tone

Рисунок 9.17. Рисунки с эффектом Sepia Tone создаются с помощью диалогового окна Hue/Saturation

Можно применить этот эффект и проще: выделить рисунок и выбрать в меню пункт Commandsi=>CreativeoConvert to Sepia Tone. Однако первый способ нам нравится больше, поскольку в данном случае можно управлять цветом.

Рисунок готов к обрезке С помощью

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

1. Поместите курсор над инструментом Crop, щелкните и удерживайте кнопку мыши. В открывшейся панели Tools выберите инструмент Area Export (Экспорт области).
2. Это — довольно интересная вариация операции вырезания. Вместо удаления области на рисунке, находящейся вне выделения, экспортируется его внутренняя область. Щелкните и протащите прямоугольник на рисунке так, чтобы он захватил нужную область изображения. Нажмите клавишу <Enter>. Откроется меню Export Special (Рисунок 9.12), позволяющее экспортировать выделенную область в любой из форматов, поддерживаемых Fireworks MX. Сохраните рисунок и оставьте его открытым для следующего примера.

С помощью инструмента Area Export

Рисунок 9.12. С помощью инструмента Area Export можно экспортировать только выделенную область рисунка

Как уже говорилось выше, растр — это набор пикселей. Когда мы видим растровый рисунок, например увеличенную фотографию, фактически мы имеем дело с иллюзией. Для примера предположим, что существует рисунок размером 3x5 дюймов, который необходимо увеличить так, чтобы его размеры составили 6x10 дюймов. Когда выполняется такая операция, размеры рисунка не удваиваются — просто в пространстве всего растра дублируются пиксели. Результатом становится крупнозернистое изображение. Нам всем приходилось видеть этот эффект, выполненный профессиональными художниками. Но для среднего пользователя масштабирование растрового рисунка в сторону увеличения не рекомендуется.
В противоположность этому, сжатие рисунка имеет обратный эффект. То же количество пикселей сжимается на меньшем пространстве, что создает иллюзию увеличения разрешения рисунка. Чтобы избежать обеих проблем, следуйте простому правилу: устанавливайте размер рисунка в момент его сканирования.

С помощью кривой каналов можно

Рисунок 9.4. С помощью кривой каналов можно удалить красный паразитный оттенок из рисунка

10. Выберите в меню пункт Filters=>Adjust Colors Levels. Откроется диалоговое окно уровней (Levels). В меню Channel выберите красный канал (Red) и переместите ползунок Gamma вправо или влево. Вы увидите тот же эффект, что и при использовании кривых каналов (Curves). Перемещайте ползунок вправо до тех пор, пока значение в поле Gamma не будет равно . 93 (Рисунок 9.5). Щелкните на кнопке ОК.
11. Последним нашим действием будет маскировка сглаживания (unsharp masking, или USM). Эта функция корректирует уровень контрастности в точках, прилегающих к особенно резкой границе между цветами, где возникает впечатление врезки одного рисунка в другой, как бы локально уменьшающее фокус. USM не может выполнить обратную задачу и увеличить фокус нерезкого изображения. Выберите в меню пункт Filters=>Sharpen=>Unsharp Mask. Откроется диалоговое окно Unsharp Mask (Рисунок 9.6) с тремя ползунками. Ползунок Sharpen Amount может перемещаться между значениями 1 и 500. Чем выше значение, тем более радикальным будет уровень изменений. Вы это ощутите, если передвинете его в крайнюю правую точку. Никогда не используйте значение 500! Ползунок Pixel Radius задает радиус применения фильтра относительно текущей точки. Он может также перемещаться между значениями 1 и 500. Чем больше радиус, тем на большую область повлияют изменения, что может стать слишком заметным. Поэтому сохраняйте это значение небольшим. Ползунок Threshold задает уровень понижения контрастности. Чем меньше значение ползунка, тем ниже уровень интенсивности применяемого фильтра на отдельные пиксели. На некоторых отсканированных изображениях могут быть заметны пыль или царапины, которые все равно не получится сгладить, какое бы большое значение ни задавалось. Поэтому для большинства рисунков рекомендуется использовать уровень 12 (хотя вы можете сами подобрать для каждого конкретного случая наиболее приемлемое значение). В нашем примере мы зададим следующие значения: Sharpen Amount-48; Pixel Radius-1; Threshold-42.

С помощью маркера определяются рисунки триггера и мишени

Рисунок 9.25. С помощью маркера определяются рисунки триггера и мишени

С помощью ползунка можно настроить

Рисунок 9.1. С помощью ползунка можно настроить светлую и темную область и таким образом перераспределить тональные значения более корректно

3. В части диаграммы с минимальной интенсивностью перетащите мышью ползунок границы черного цвета вправо до значения 10. В части диаграммы максимальной интенсивности перетащите ползунок границы белого цвета влево до значения 240. Щелкните на кнопке ОК. Таким образом, мы перераспределили тональные значения рисунка. Все темные пиксели со значениями 0-9 переместились к значению 10 (т.е. в сторону средних тонов), а все слишком светлые со значениями 241-255 — к значению 240. Как вы видите, на костюме и рубашке персонажа стали видны отдельные детали. Средние тона на его лице стали более рельефными. 4. Выполнив первые три действия, можно произвести тонкую коррекцию яркости и контрастности изображения. Выберите в меню Filters=>Adjust Colors=>Brihgtness and Contrast Откроется диалоговое окно Brightnes/Contrast с ползунками яркости и контрастности. Перемещайте их для того, чтобы посмотреть, какой эффект они производят. Затем переместите ползунок яркости до значения -3, чтобы немного оттенить белую рубашку. Потом переместите ползунок контрастности до значения 6. После выполнения этого действия на пиджаке проявилось больше деталей (Рисунок 9.2). Хотя в поля диалогового окна можно вводить и точные значения, лучше все же использовать ползунки, так как с их помощью процесс настройки может быть более наглядным.

Слайсы должны соответствовать геометрии страницы

Рисунок 9.27. Слайсы должны соответствовать геометрии страницы

Сохранение выделения

Сохранение выделения

Возможны случаи, когда для изолирования определенной области рисунка от всего остального необходимо выполнить сложное выделение (например, выделить лицо). В этом случае фон и остальные объекты не будут содержаться в выделении. Такой процесс, естественно, занимает много времени, но Fireworks предоставляет возможность создавать сложное выделение и сохранять его для последующего использования.
Для того чтобы сохранить выделение, выполните следующие действия.
1. Откройте рисунок и выберите инструмент Lasso. Нам нужно изменить фон, поэтому очень важно провести четкую границу между объектом и его фоном. Для этого к выделению нужно применить 1-пиксельное разделение.
2. В окне Property в списке Edge выберите пункт Feather и в качестве его значения введите 1.
3. Отделите фон, тщательно отмечая границы объекта. Если нужно добавить часть выделения, одновременно нажмите кнопку мыши и клавишу <Shift> (при этом под курсором отобразится маленький знак "плюс"), если нужно удалить часть выделения, нажмите кнопку мыши и клавишу <Alt> (при этом под курсором отобразится маленький знак "минус"). Выберите в меню пункт Select=>Save Bitmap Selection и сохраните область. Чтобы отменить выделение, щелкните мышью в любой точке рабочей области.
4. Выберите в меню пункт Select=> Restore Bitmap Selection, и выделение снова отобразится в рабочей области. Если сохранить выделение, закрыть приложение, снова открыть его и выбрать в меню пункт Restore Bitmap Selection, то выделение восстановится на экране. В файле формата PNG можно сохранить выделение. К сожалению, только одно.

Совет

Совет

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

Совет

Совет

Используя инструмент Scale, можно масштабировать и в целое число раз. Для этого выделите область, выберите инструмент Scale и измените значения высоты и ширины в окне Property (Рисунок 9.14). При этом имейте в виду, что пропорции изображения могут измениться. Если вы передумаете и захотите снять выделение, нажмите клавишу <Esc>.

Создание эффекта виньетки

Многие из вас видели старые фотографии в антикварных магазинах или у своих дедушек и бабушек. Как правило, это снимок, заключенный в овал, который немного размыт по краям. Это — старая техника, использовавшаяся когда-то в фотографии. Ее название — Granny Mask.
Чтобы создать эффект виньетки, выполните следующие действия.
1. Откройте рисунок, созданный в предыдущем примере. Выберите инструмент Oval Marquee и установите в окне Property тип границы Feather со значением 10.
2. Установите курсор на подбородок персонажа и растяните овал, удерживая нажатой клавишу < Alt> и перемещая мышь от центра овала. Получится овальное выделение.
3. Выберите в меню пункт Select=>Select Inverse или нажмите комбинацию клавиш <Ctrl+Shift+I>. В результате будет выделено все, кроме исходного выделения. Дважды нажмите клавишу <Delete>, и создастся интересная размытая граница (Рисунок 9.18). Чтобы увеличить эффект размытия, продолжайте нажимать клавишу <Delete>.

Создание маски

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

Создание маски во FreeHand и использование ее в Fireworks

Создание маски во FreeHand и использование ее в Fireworks

Не забывайте, что вы работаете с пакетом MX Studio, который оснащен уникальными возможностями. Приложение FreeHand содержит инструменты Xtras и Modification, которые недоступны в Fireworks. Если вы хотите использовать средства FreeHand, поместите копию рисунка в непечатную область FreeHand на панели Layers. Создайте форму и модифицируйте ее по своему усмотрению, после чего перетащите ее из FreeHand в документ Fireworks. Более подробная информация об использовании FreeHand приведена в главе 11.
Для того чтобы создать маску во FreeHand и использовать ее в Fireworks, выполните следующие действия.

Создание распределенного переключателя

Это — довольно интересный эффект. Пользователь помещает курсор над одним фрагментом рисунка, а на странице изменяется совершенно другой фрагмент. Фрагмент, который вызывает замещение, называется триггером, а замещаемый фрагмент — мишенью (target). Простейшим примером этого эффекта является изменение рисунка страницы в тот момент, когда пользователь помещает указатель мыши над какой-либо кнопкой навигации.
Для того чтобы создать распределенный переключатель, выполните следующие действия.
1. Откройте файл Dis joint .png. Триггер — это рисунок, расположенный слева, а мишень — черный квадрат справа. Откройте панель Frames и щелкните на втором кадре. Обратите внимание, что мишень была замещена рисунком. Вернитесь к первому кадру.

Создание рисунков Sepia Tone

Если вы когда-либо были в парке развлечений и заходили в стилизованную фотостудию, где вам предлагали надеть костюм старого покроя и в результате вы получали черно-белую фотографию, выглядящую, будто ей уже добрая сотня лет, вы поймете смысл этого эффекта. Вы смотрите на фотографию и верите, что именно так выглядели ваши далекие предки. Современная цифровая техника, позволяющая создавать фотографии, выглядящие старыми, называется sepia tone.
Для того чтобы создать рисунок в этой технике, выполните следующие действия.
1. Откройте в папке Chapter 9 Exercise файл FlashEvent.png. Щелкните на рисунке и выберите в меню пункт Filters=>Adjust ColoroHue/Saturation. Откроется диалоговое окно Hue/Saturation.
2. Установите флажки Preview и Colorize. Рисунок станет синим, а ползунок Saturation переместится влево. Передвиньте ползунок Hue влево до значения 40 (Рисунок 9.17). Посмотрите на результат. Щелкните на кнопке Cancel, чтобы не сохранять получившийся рисунок.

Создание слайсов

Основной целью создания слайсов рисунков является минимизация времени загрузки в броузер. Например, в Fireworks MX создать целые страницы. Однако когда эти страницы будут загружаться в броузер пользователя, имеющего медленный канал в Internet, тем придется довольно долго ожидать окончания процесса.
Слайсы разбивают рисунок на небольшие фрагменты, которые могут быть быстро прочитаны и собраны броузером. Еще одним важным свойством слайсов, как мы видели, является то, что каждому фрагменту можно назначить функциональную нагрузку, сделав его интерактивным элементом страницы. Dreamweaver MX собирает фрагменты, используя таблицу, сгенерированную Fireworks MX для фрагментов.
Не переусердствуйте при разделении рисунка на слайсы! Если создать слишком много фрагментов, то будет построена такая сложная таблица, что на ее обработку потребуется больше времени, чем на загрузку целой нефрагментированной страницы. При планировании страниц нужно принимать в расчет слайсы. Упрощенная компоновка страницы поможет избежать создания громоздких таблиц.
Чтобы создать слайсы на домашней странице нашего примера — узла JTC, — выполните следующие действия.
1. Откройте файл Sliceit.png в Fireworks. Если вы поводите курсором по рисунку, то обнаружите, что это — единое растровое изображение. Разбивая рисунок на слайсы, не думайте о том, что на нем нарисовано. Вместо этого достаточно взглянуть на его геометрию. Лучшим разделением на слайсы является то, которое состоит из строк и столбцов.
2. На панели инструментов выберите Slice (или нажмите клавишу <К>, чтобы переключиться на этот инструмент с текущего). Нарисуйте фрагмент вокруг человечка.
3. Нарисуйте один фрагмент, содержащий баннер в верхней части страницы вместе с его тенью, и еще один, содержащий баннер в центральной части страницы со словами JTC has got it going on!. Еще один фрагмент нарисуйте вокруг области Ask в нижней части страницы. Создайте фрагменты вокруг области Store Locator в левой части страницы и вокруг области Survey в правой ее части.
4. Размеры фрагментов можно изменять, переключившись на инструмент Selection и переместив курсор к границе фрагмента. Находясь над границей фрагмента, курсор примет вид двунаправленной стрелки, перпендикулярной линии границы. Щелкните мышью и переместите границу в нужную сторону. Окончательный вариант слайсов приведен на Рисунок 9.27.
5. Для показа всех фрагментов откройте слой Web. Независимо от сложности нарезки и использования, имеет смысл присвоить имя каждому фрагменту. Это поможет впоследствии легко идентифицировать их. Выделите фрагмент верхнего баннера и дважды щелкните на его строке в слое Web. Присвойте ему имя Wall. Присвойте имена и стальным фрагментам, основываясь на ключевых словах: Wall, Mascot, Survey, Going_on, Ask, Locator. В результате экран будет выглядеть так же, как на Рисунок 9.28.

Спецэффекты

Средствами Fireworks можно создать массу спецэффектов. Тремя нашими любимыми являются: создание рисунков sepia tone, применение эффекта, который мы называем Granny Feather, и добавление к рисунку кадра.
Спецэффекты используются для разных целей. Иногда нужно, чтобы рисунок смотрелся старым или создавал определенное настроение. Среди последних — размытие рисунка черной краской для создания мистического настроения; зловещий дух, создаваемый глубокими тенями, и т.п. И как всегда, для того чтобы правильно использовать эффекты, нужно много экспериментировать. Переборщить с эффектами — это гораздо хуже, чем вообще их не применять.

Векторы

Векторные объекты являются сердцем и душой этого приложения. Хотя в нем существует множество прекрасных средств для растровой графики, в том числе и мощных эффектов, векторные объекты предоставляют Web-дизайнерам и художникам возможность точного редактирования практически любого рисунка.
В Fireworks векторы как бы плавают в пространстве (как в приложении FreeHnad). Их положение на рабочей области не фиксировано конкретными пикселями, а определяется набором математических координат. К тому же именно математические вычисления определяют форму объекта и цвет его заполнения. Вот почему векторные объекты имеют меньшие размеры файлов.
Однако реально Fireworks делает выдающимся тот факт, что поверхности в нем состоят из пикселей. Когда изменяется векторный объект (например, изменяется форма эллипса), вначале модифицируется форма векторного объекта, а затем к этой форме применяется заполнение, которое формирует поверхность. Вот что делает эффекты Live Effects такими рельефными и точными.
Возможность использовать векторы позволяет создавать довольно сложные рисунки в приложении FreeHand, а затем переносить их в Fireworks для редактирования и оптимизации.

Выбран инструмент Roughen и установлены его параметры

Рисунок 9.22. Выбран инструмент Roughen и установлены его параметры