Web-разработка с Macromedia Studio MX
         

Создание талисмана JCT


Как и в случае создания концепции узла, все начинается с карандаша и листа бумаги. Хотя будет описано создание всего двух фрагментов талисмана, на самом деле этот процесс включает создание множества эскизов. К тому же в нем присутствует значительный объем исследований, на основе которых создается образ, в том числе сбор информации об одежде стиля "хип-хоп" из журналов, видеоклипов и т.п. Это — самая сложная часть работы.
Первый эскиз (рис. 11.4) содержит ряд примечаний. Имея всего один глаз, персонаж выглядит несколько зловеще. На данном этапе еще не понятно, в какую одежду он будет одет. Ввиду того, что у него скрещены руки, его рубашка может просто теряться на рисунке.
Чтобы подчеркнуть рубашку, потребуется другая поза. Мы выбрали более открытую позу с широко расставленными руками. На рис. 11.5 показан эскиз молодого человека в виде каркасной модели, с помощью которой легче скорректировать позу. Рисунок рядом показывает последовательность наполнения этой каркасной модели элементами одежды.
Когда эскиз нас удовлетворит, его можно увеличить и поместить в планшет, где его очертания можно трассировать световым пером. Эскиз для оцифровки можно также отсканировать. Даже если рисунок предназначен для Web, при сканировании нужно применять большее разрешение, чем 72 dpi. Обычно используют разрешение 150-300 dpi, так как с ним легче работать. После тонирования рисунка и понижения его разрешения до 72 dpi его линии и цвета будут выглядеть четкими. На рис. 11.6 показан результат сканирования.





Рис. 11.4. Создание талисмана JCT начинается с эскиза на бумаге

Независимо от ваших стараний при сканировании, на рисунке все равно будут проявляться посторонние элементы, такие как пыль, ворсинки и т.п., которые называют шумом. Сейчас самое время избавить рисунок от этого шума. Области, в которых присутствует шум, обведены на рисунке кружочками. К тому же грубые линии, появившиеся после сканирования, не всегда могут удовлетворить художника. Поэтому сейчас мы займемся очисткой рисунка в Fireworks.

Замечание
Если вы хотите повторить действия, которые выполнил Крис при создании талисмана, скопируйте файлы из папки chapter 11 Exercise с Web-узла книги на жесткий диск. Откройте файл Flick_Dude.pngn3 своей папки.

1. Выберите инструмент Magnifying Glass и увеличьте загрязненную область. В данном случае — это область носка кроссовка.
2. В окне свойств выберите инструмент Eraser и установите для него размер в 1-2 пикселя без границы. Это позволит нам не задеть какие-либо линии рисунка при очистке шума.
3. Нажмите кнопку мыши и протащите указатель вдоль внешней стороны линий в тех местах, где видны серые пятнышки пыли (рис. 11.7). Это действие лучше всего выполнять, имея под рукой планшет и карандаш. Однако при отсутствии таковых, все можно сделать и с помощью мыши. Увеличьте рисунок до такого размера, чтобы отдельные пиксели на экране превратились в маленькие прямоугольники. Это поможет при очистке не задеть линии основного рисунка.



Рис. 11.5. Рисунок постепенно становится сформировавшимся персонажем, по мере того, как зафиксирована поза и на нее наложены элементы одежды

Раскраска рисунка с помощью инструментов рисования
Каждый художник имеет свой стиль и метод работы, и Крис не является исключением. Согласно его методике, вначале рисунок следует раскрасить основными цветами, а затем усложнить раскраску с помощью полутонов и эффектов. Кроссовки персонажа мы сделаем монотонно красными, рубашку — монотонно голубой и т.п. При выполнении подобных задач чаще всего используются инструменты Paint Bucket (Заливка), Paint Brush (Кисть), а для более тонкой работы — Pencil (Карандаш).
После того как шум будет удален, можно приступать к раскраске рисунка. Если для этой цели используется Photoshop, нужно выделить черные линии, продублировать их и перенести на новый слой, на котором, собственно, и будет выполняться раскраска. В Fireworks для этого достаточно выбрать инструмент заливки.
Прежде чем начать раскраску, хотелось бы обратить внимание на то, что инструмент Paint Bucket имеет в окне свойств ряд параметров, которые влияют на его работу. Когда вы выберете этот инструмент, обратите внимание на наличие в окне свойств флажка Fill Selection. Для данной части примера его устанавливать не нужно. Если это сделать, закраска будет применяться ко всему рисунку.



Рис. 11.6. Для работы с грубыми линиями в Fireworks MX рисунок должен быть отсканирован с разрешением 150-300 dpi

Для того чтобы раскрасить талисман, выполните следующие действия.
1. Выберите инструмент Magnifying Glass и увеличьте рисунок в области кроссовок, пока один из них не займет собой весь экран.
2. Выберите инструмент заливки и установите для него в красный цвет (FF0000) в окне свойств (рис. 11.8).
3. Поместите инструмент вовнутрь пустой области кроссовка и щелкните мышью. Одной из характерных черт приложения Fireworks является то, что можно прокручивать видимую область рисунка, не меняя инструмент. Для того чтобы раскрасить другой кроссовок, нажмите клавишу пробела, и курсор мыши примет вид руки. Удерживая клавишу пробела, смещайте с помощью мыши рисунок, пока на экране не появится второй кроссовок. Раскрасьте его также красным цветом.
Джинсы персонажа занимают большое пространство на рисунке, так что нет смысла применять такое большое увеличение.



Рис. 11.7. Шум с рисунка удаляется с помощью инструмента Eraser



Рис. 11.8. Кроссовки персонажа раскрашены с помощью инструмента Paint Bucket. Обратите внимание, что в окне свойств спят флажок Fill Selection

Совет
После того как вы научитесь работать с приложением, непосредственное переключение инструментов на панели станет ненужным. Лично я для этого использую клавиатуру. Если вы не знаете комбинации клавиш, с помощью которой можно переключиться на определенный инструмент, подведите к нему курсор мыши и задержите на секунду. В экранной подсказке высветится клавиша, соответствующая ему. Например, для инструмента Paint Bucket используется клавиша <G>, а для Magnifying Glass — <Z>.

4. Нажмите клавишу <Z>, чтобы выбрать инструмент Magnifying Glass. Удерживая нажатой клавишу <Alt>, щелкните в области джинсов, уменьшив увеличение. Вы также можете выбрать один из предустановленных масштабов отображения рисунка, щелкнув на области Select Magnification в нижней части окна и выбрав в списке нужный процент увеличения.
5. Имея в области видимости джинсы, нажмите клавишу <G> и измените цвет заливки на 3366СС (этот цвет наиболее близок к цвету джинсовой ткани). Заполните этим цветом джинсы. Обратите внимание, что остались не закрашенными некоторые маленькие области внутри джинсов.
6. С помощью инструмента Magnifying Glass увеличьте эти области. Если случайно переключится цвет, щелкните инструментом Eyedroper (клавиша <1>) в том месте, цвет которого нужно использовать. При этом в окне свойств можно установить размер захвата 3x3 Average. Это значит, что будет выбран средний цвет области заданного размера, окружающей место, в котором щелкнули мышью. Выбирать область в один пиксель опасно, так как выбирается цвет одного конкретного пикселя, что неприемлемо в композиционных цветах.
7. Снова выберите инструмент Paint Bucket (при этом убедитесь, что установлен цвет джинсовой ткани) и заполните оставшиеся маленькие фрагменты джинсов.
8. Когда вы накопите опыт работы с Fireworks MX, вы сможете также переключиться на инструмент Brush (клавиша <В>), выбрать в окне свойств 1-пиксельный размер с мягкой границей и заполнять маленькие области с его помощью. Если же потребуется заполнить области размером в 1 пиксель, можно использовать инструмент Pencil, щелкая непосредственно в той точке, которую нужно закрасить (рис. 11.9). Оставшуюся часть талисмана нужно закрасить аналогичным образом с использованием следующих цветов.
Пуговица джинсов — #FFCC33.
 Майка —#FF3366.
Шнурки туфель — #999999.
 Рубашка — #66CCFF.
Цвет бликов — #FFCC99.
Язык—#FF0000.
Стекла очков — #ЗЗССЗЗ.
Волосы — JFFFF00.
Кепка (лицевая часть) — #0066СС.
Кепка (козырек) — #000066.
Кепка (застежка) — SFF0000.
Кепка (затененная часть застежки) — #650000.



Рис. 11.9. Кисть является подходящим инструментом для закрашивания очень маленьких областей

Создание оттенков
Оттенки в рисунке создают иллюзию глубины. Этот эффект можно получить, применяя распылитель.
1. Выберите инструмент лупы и увеличьте область, в которой хотите применить оттенки.
2. Выберите инструмент кисти и в окне свойств в списке Brush выберите вариант Air Brush-Basic. Установите радиус распыления 5-10 пикселей. Установите значение Opacity 60%, а также флажок сохранения прозрачности (Preserve Transparency). В качестве цвета оттенка выберите темно-синий (#000066).
3. Щелкните и протащите распылитель вдоль внутренней стороны границы джинсов. Каждый раз, когда вы будете отпускать кнопку мыши, распылитель будет как бы пополняться очередной каплей краски. Если распыление проводить по области с оттенками, последние будут усиливаться. Результат нанесения оттенков показан на рис. 11.10.

Замечание
Распылитель — это одна из нескольких методик нанесения теней в рисунок. В некоторых случаях нанесение оттенков может даже не потребоваться, а будет достаточно применить только монотонные цвета. Обе цветные версии (раскрашенная и с нанесенными распылителем тенями) рисунка талисмана JCT содержатся в папке Exercise на Web-узле настоящей книги.



Рис. 11.10. При помощи распылителя можно нанести на рисунок оттенки. При этом многое зависит от размера кисти и параметра Opacity в окне Property

Устранение фона и уменьшение разрешения
Теперь мы займемся устранением фона. Это необходимо потому, что наш талисман должен отображаться поверх уже существующего фона страницы, который является составной частью общего дизайна узла JCT. После того как мы устраним фон, рисунок талисмана можно будет считать законченным. Нам останется только уменьшить разрешение до значения, наиболее пригодного для Web, —72 dpi.
Для того чтобы удалить фон и уменьшить разрешение, выполните следующие действия.
1. Откройте файл JCT_Dudef inal. png в папке Exercise, но ничего пока не выделяйте. Установите для цвета рабочей области в окне свойств значение Transparent (Прозрачный).
2. Выберите инструмент Magic Wand (Волшебная палочка) и нажмите клавишу <Shift>. Удерживая нажатой эту клавишу, щелкните на пустом месте рисунка и на пустых местах между руками талисмана. Отпустите кнопку мыши и клавишу <Shift>. Нажмите клавишу <Delete>. На месте фона появятся белые и серые квадратики, расположенные в шахматном порядке. Это — обозначение прозрачности.
3. Снимите выделение, нажав <Ctrl+D>.

Замечание
Щелчок мышью или выбор нового инструмента не снимает выделение автоматически. Хотя иногда это возможно, лучше все-таки выполнить команду Deselect. Это будет гарантировать, что на рабочей области не останется ни одного выделенного элемента.

4. После того как фон удален, можно уменьшить разрешение рисунка. Выберите в меню пункт Modify=>Canvas=>Image Size или щелкните на кнопке Image Size в окне Property. Когда откроется диалоговое окно Image Size, убедитесь, что установлены флажки Constrain Proportions (Сохранить пропорции) и Resample Image (Перестроить рисунок) (рис. 11.11).
5. Измените значение в поле Resolution со 150 на 72 пикселей на дюйм. Щелкните на кнопке ОК.
Теперь рисунок можно сохранить в формате PNG или экспортировать в формат GIF.



Рис. 11.11. В диалоговом окне Image Size можно изменить размеры и разрешение рисунка


Содержание раздела