Помещаем фотографию в Illustrator
7.1. Помещаем фотографию в Illustrator
Задача этого занятия — создание рекламной листовки компании с фотографией сотрудников в качестве фона. Это значит, что придется использовать растровую графику — единственный разумный способ передачи фото. В растровой графике изображение состоит из пикселов, а не из математически описанных фигур. Растровые изображения напоминают мозаику.
Прежде чем описывать особенности точечной графики в Illustrator, следует заметить, что не нужно ждать от этой программы потрясающих возможностей — для этого есть специальные пакеты, например, Photoshop. В Illustrator операции с растровыми изображениями носят вспомогательный характер.
Сразу, без лишних рассуждений, приступим к работе. В качестве возможных вариантов оформления заказчик принес нам несколько различных фотографий. Первое, что необходимо сделать, — это создать новое изображение (File > New (Файл > Новый) или Ctrl+N). Далее разместим на нем фотографию (пока одну).
Есть несколько способов вставки растровых изображений в Illustrator, но все же основной — команда File > Place (Файл > Поместить). После запуска этой команды появится диалоговое окно (Рисунок 7.1).
Найдите нужный файл на жестком диске. Обратите внимание на то, чтобы возле параметра Template (Шаблон) отсутствовал флажок, так как нам необходимо изображение обычного вида, а не шаблонного (см. занятие 1).
В Illustrator объект можно поместить в документ двумя способами.
Диалоговое окно фильтра Cutout
Рисунок 7.8. Диалоговое окно фильтра Cutout
Это второй фильтр группы Artistic (Художественные). Его результат повторяет внешний вид бумажной аппликации, которой мы все занимались в раннем детстве? (изображение выглядит склеенным из разноцветных кусков бумаги).
В результате мы получили растровый фон (Рисунок 7.9).
Диалоговое окно фильтра Saturate
Рисунок 7.6. Диалоговое окно фильтра Saturate
Здесь можно изменить только один параметр, а именно Intensity (Интенсивность). В нашем случае его следует уменьшить (Рисунок 7.7).
Диалоговое окно инструмента Scale
Рисунок 7.5. Диалоговое окно инструмента Scale
точечные изображения не подвергаются интерполяции. Изображение увеличится не за счет изменения количества образующих его пикселов, а за счет уменьшения разрешения, то есть количества пикселов на единицу длины. При большом масштабировании это грозит потерей качества, проявлением пикселизации1 и некоторыми другими неприятностями.
Эта особенность вынуждает изначально определять нужный размер растровых изображений и задавать его в каком-нибудь точечном редакторе, лучше всего в Photoshop. Аналогичным способом можно производить и другие преобразования.
Мы готовим листовку с перспективой ее последующей печати, поэтому лучше сразу перевести растровое изображение в режим CMYK (все первоначальные варианты заказчика были предоставлены в режиме RGB), чтобы оценить результат и не столкнуться с неприятными неожиданностями в конце работы.
В Illustrator есть возможность менять цветовой режим растровых вставок. Не путайте эту возможность с изменением цветового режима всего документа, реализуемого командой File > Document Color Mode (Файл > Цветовая модель документа). В данном случае речь идет только об одном объекте. Однако следует учитывать цветовой режим документа. Если он задан как CMYK, опция перевода в RGB будет неактивна, и наоборот.
Как это ни странно, но необходимые для этого команды находятся в меню Filter (Фильтр), а именно в разделе Colors (Цвета). Это три команды:
После выбора цветового режима следует привести фотографию к фоновому изображению. Здесь можно делать все, что позволяет фантазия, а помогут нам в этом фильтры.
1 Дефект изображения, при котором пикселы отчетливо видны невооруженным глазом. — Примеч. ред.
Диалоговое окно Photoshop Import
Рисунок 7.2. Диалоговое окно Photoshop Import
На нашей фотографии изображение каждого человека было размещено на отдельном слое, но так как мы будем использовать фотографию исключительно в качестве фона, то лучше объединить слои в единое целое, установив флажок возле параметра Flatten Photoshop layers to a single image (Свести слои Photoshop в единое изображение). После выполнения одной из этих команд выбранное изображение появится на экране.
Диалоговое окно Place
Рисунок 7.1. Диалоговое окно Place
Растровое изображение можно также открыть командой Open (Открыть).
Одна из фотографий заказчика была сохранена в формате PSD, который является многослойным, то есть документ может состоять из нескольких слоев.
В таких случаях при открытии появляется диалоговое окно (Рисунок 7.2).
Итоговый растровый фон
Рисунок 7.9. Итоговый растровый фон
После завершения подготовки фонового изображения остается только добавить необходимые надписи (см. занятие 1).
На Рисунок 7.10 представлен простейший вариант рекламной листовки.
Краткие итоги
7.5. Краткие итоги
Итак, мы убедились в том, что Illustrator —достаточно гибкая программа, которая неплохо справляется и с растровыми изображениями (табл. 7.1). В ней даже можно выполнять несложную верстку с применением фотографий.
Но все же это программа для обработки векторной графики, поэтому и для полноценной работы с растровыми изображениями необходимо иметь растровый редактор, например, Photoshop.
Палитра Links
Рисунок 7.3. Палитра Links
3.
4. После устранения недочетов щелкните на значке
ВНИМАНИЕ
В меню Edit > Preferences > File and Clipboard (Правка > Установки * Файлы и буфер обмена) есть настройка Update Links (Обновлять связи). Если выставить значение Automatically (Автоматически), то обновления будет производить сама программа.
После просмотра всех фотографий и их детального анализа мы остановили свой выбор на изображении, представленном на Рисунок 7.4.
Рисунок 7.4. Растровый фон для документа
Даже если будет произведен тщательный подбор, изображение все равно вряд ли будет идеальным, поэтому потребуются некоторые преобразования.
Простейший вариант рекламной листовКи
Рисунок 7.10. Простейший вариант рекламной листовКи
Растровые фильтры и эффекты
7.4. Растровые фильтры и эффекты
Так как данное изображение будет использоваться в качестве фона, необходимо изменить его цвета, точнее их насыщенность. Для этого воспользуемся фильтром Saturate (Насыщенность): (Filter > Color > Saturate (Фильтр > Цвет > Насыщенность). После этого появится диалоговое окно (Рисунок 7.6).
Редактирование растрового изображения
7.3. Редактирование растрового изображения
Импортированный растровый объект обладает многими свойствами, которые характерны и для векторных объектов. Вы можете передвигать его, масштабировать, применять стандартные трансформации — Move (Движение), Rotate (Поворот), Reflect (Отражение), Scale (Масштабирование), подбирая тем самым оптимальные размеры и месторасположение.
Первое, что нам необходимо сделать, — это немного увеличить фотографию. Для этого выделите ее инструментом Selection (Выделение) («горячая» клавиша V), затем простым перетаскиванием мыши увеличьте до нужного размера.
Можно также воспользоваться инструментом Scale (Масштабирование) (S). Мы вызвали его диалоговое окно, нажав клавишу Enter (Рисунок 7.5).
Мы увеличили фотографию на 150%.
Обратите внимание на то, что масштабирование в Illustrator имеет свои особенности. В отличие от Photoshop или любого другого растрового редактора, в Illustrator
Результат применения фильтра Saturate
Рисунок 7.7. Результат применения фильтра Saturate
Изображение уже больше подходит для использования его в качестве фона, одна-со нам бы хотелось придать ему некоторую долю декоративности, поэтому мы вос-юльзовались фильтром Cutout (Аппликация): Filter > Artistic > Cutout (Фильтр > Художественные > Аппликация) (Рисунок 7.8).
Функции программы
Таблица 7.1. Функции программы, используемые для работы с растровыми изображениями
| Название | Описание | Клавиатурное сокращение |
| Инструменты | ||
| Selection (Выделение) | Выделение и перемещение растровых вставок | V |
| Туре (Текст) | Создание текста листовки | Т |
| Палитры | ||
| Links (Связи) | Операции со ссылками на помещенные изображения | |
| Окна | ||
| Place (Поместить) Photoshop Import (Импорт из Photoshop) | Импорт растровых изображений в документ Импортирование документов в формате PDF | |
| Scale (Масштабирование) | Масштабирование растровых вставок | |
| Фильтры | ||
| Saturate (Насыщенность) | Редактирование насыщенности цвета | |
| Cutout(Аппликация) | Имитация бумажной аппликации |
Замена изображений
7.2. Замена изображений
Как уже говорилось, заказчик принес нам несколько фотографий, и мы решили сразу выбрать наиболее подходящую. Однако помещать и удалять их достаточно утомительно, поэтому мы решили воспользоваться способами, которые позволяют выполнять эти действия несколько быстрее.
Для применения первого способа выполните следующие действия. 1. Выделите существующий объект инструментом Selection (Выделение). 2. Откройте диалоговое окно Place (Поместить). 3. Установите флажок рядом с параметром Replace (Заменить). 4. Найдите среди файлов нужный и щелкните на кнопке ОК. В итоге помещенное изображение заменится на новое.
Второй способ заключается в использовании палитры Links (Связи). 1. Для ее вызова выберите Window > Show Links (Окно > Показать связи). 2. После этого появится палитра (Рисунок 7.3). Здесь щелкните на значке
Анимированный Flashбаннер
8.1. Анимированный Flash-баннер
Теперь несколько усложним задачу — изготовим анимированный Flash-баннер. Говорить о полноценной Flash-анимацию, в данном случае, конечно, не приходится, — для этого есть специализированные пакеты. Но для создания несложного, любительского ролика можно использовать и Illustrator.
Никаких специальных инструментов и средств интерфейса, вроде временной шкалы, которые характерны для программ разработки анимации, в Adobe Illustrator нет. Но есть одна тонкость — в качестве кадров можно использовать слои.
Создайте баннер, на котором будет только текст.
1. Сгруппируйте символы командой Object > Group (Объект > Группировать).
2. Следующая задача — сделать из символов шрифта контурные объекты, иначе не получится корректное формирование слоев. Для этого выделите группу и выберите Туре > Create outlines (Шрифт > Трассировка).
3. После этого откройте меню палитры Layers (Слои), щелкнув на кнопке в виде стрелки на палитре (Рисунок 8.11).
Color Table
Рисунок 8.7. Color Table
Экспериментируя с настройками оптимизации GIF, добейтесь минимально возможного размера файла.
В конце описания функций оптимизации GIF хочется рассказать про один инструмент, облегчающий жизнь малоопытным пользователям. Щелкните на кнопке в виде стрелки напротив параметра Settings (Установки). В открывшемся меню выберите Optimize to File Size (Оптимизировать под размер файла). Откроется окно (Рисунок 8.7).
GIFизображение с 0% 60% и 100% параметром Lossy
Рисунок 8.6. GIF-изображение с 0%, 60% и 100% параметром Lossy
Interlaced (Чересстрочный). Сделать GIF чересстрочным, то есть его загрузка будет происходить через строку. Это немного увеличит размер файла, но выигрыш явно есть — пользователь еще до полной загрузки видит, какая информация размещена на рисунке. Transparency (Прозрачность). Сохранять или нет прозрачность, если она есть. В GIF прозрачность битовая, то есть она или есть или ее нет, градации не допускаются. Color Table (Цветовая таблица). Основной инструмент ручного редактирования цветов при экспорте GIF-файлов. В ней показаны все цвета, которые есть в данный момент при текущих настройках (Рисунок 8.7). Вы можете выбрать любой цвет и двойным щелчком на нем назначить другой на его место (через стандартное окно Color Picker (Выбор цвета)).
Инструменты Color Table (Цветовая таблица).
1. Сделать выбранный цвет веб-совместимым. 2. Закрепить выбранный цвет. Какие бы изменения вы не производили в палитрах, закрепленный цвет останется в изображении. 3. Новый цвет. Позволяет добавить в таблицу еще один цвет. 4. Удалить выбранный цвет. Профессионалы сами оценивают, какие цвета нужны изображению, а какие нет. Ненужные удаляются при помощи этой кнопки.Иллюстрации для Web
Иллюстрации для Web
На прошлых занятиях мы говорили о подготовке работ, которые будут распечатаны — в основном Illustrator для этого и служит. Однако заказчик может попросить вас не только разработать полиграфический дизайн фирмы, но и выполнить работу, связанную с интернет-дизайном. Скорее всего, вам придется делать рекламные баннеры для сайта компании. Возможно, это станет «довеском» к основной работе, связанной с печатным «лицом» фирмы, — бланками, визитками и т. п.
Поэтому в этой главе в основном будет описано создание баннеров в различных форматах. Первый баннер, который мы сделаем, — статичный растровый в форматах JPEG и GIF. Основой его послужит все тот же знак инь и ян.
Работа для Всемирной паутины имеет свой особенности, которые начинаются с настройки интерфейса программы.
По умолчанию в Illustrator фон представляет собой белый «холст». Однако всегда следует помнить, что, в отличие от программ редактирования растровой графики, этот холст не является частью изображения, он не несет в себе никакой графической информации и не записывается в файлы при сохранении. Это нормально для картинок, предназначенных для печати, так как неплохо имитирует бумагу, но совершенно не подходит для экрана обозревателя — мы должны сразу точно видеть, какие области остаются незаполненными цветом или изображением.
Сетка прозрачности (Transparency Grid) — это особый режим отображения фона, при котором прозрачные области показываются специальной сеткой, которая, кстати, стандартна для большинства графических программ, во всех же продуктах Adobe она одинакова. Отобразить ее на мониторе можно, выполнив View > Show Transparency Grid (Вид > Показать сетку прозрачности) (Рисунок 8.1).
Разумеется, в таком режиме значительно удобнее, чем в стандартном, готовить для Интернета изображения, содержащие прозрачные области, — не возникает путаницы с белым цветом на изображении и белым фоном.
Исходная фигура
Рисунок 8.14. Исходная фигура
Создание интерактивного SVG несет в себе элементы программирования, поэтому всем объектам необходимо дать имена, чтобы потом их использовать.
Выделите крест и откройте палитру Layers (Слои). Развернув единственный слой, найдите этот объект и переименуйте его в cross.
ВНИМАНИЕ
В именах при сохранении интерактивного SVG нельзя использовать пробелы и подчеркивания. Поэтому даже Layer 1 необходимо переименовать в Layerl.
Для переименования дважды щелкните левой кнопкой мыши на объекте и измените имя в открывшемся окне (Рисунок 8.15).
Итоговая страница в окне Internet Explorer
Рисунок 8.23. Итоговая страница в окне Internet Explorer
Итоговый вид палитры SVG Interactivity
Рисунок 8.17. Итоговый вид палитры SVG Interactivity
Осталось сохранить файл в формате SVG. Желательно, чтобы место сохранения содержало еще и используемый JavaScript-файл — иначе возможны проблемы. Настройки сохранения можно использовать по умолчанию. Изображение в Internet Explorer показано на Рисунок 8.18.
Изображение в режиме просмотра
Рисунок 8.2. Изображение в режиме просмотра Preview (а) и Pixel Preview (б)
Приступим к изготовлению баннера. Он должен быть достаточно простым, однако содержать и текст, и графику. Его размеры— 460 х 80 пикселов. Единственная сложность, которая может возникнуть, — цвет фона. Чтобы он не был прозрачным, в основу баннера следует положить прямоугольник нужного оттенка.
Мы использовали готовую фигуру «инь и ян», инструмент Реп (Перо) для создания облака и горы и инструмент Text (Текст) для ввода надписи (Рисунок 8.3).
JPEGразмывание хоть и портит изображение
Рисунок 8.10. JPEG-размывание хоть и портит изображение (внизу), но зато значительно уменьшает его размер
При оптимизации изображений не нужно знать много правил, требуется большой опыт. Через какое-то время вы научитесь определять, какое изображение, к примеру, можно размыть, а какое — нет, какой формат подходит для данного рисунка.
Сохранив данный баннер и оценив размер файла, вы поймете, что он не очень подходит для формата JPEG. Причина этому — небольшое количество цветов, из-за чего больше подходит GIF.
Меню палитры Layers
Рисунок 8.11. Меню палитры Layers
Нас в этом меню интересует команда Release to Layer (Sequence) (Преобразовать в слои (Последовательно)), которая переводит каждый отдельный объект на новый слой. Обратите внимание, что при применении команды должна быть выделена именно группа Group, а не слой Layerl.
То, как должна выглядеть палитра Layers (Слои) после выполнения Release to Layer (Sequence) (Преобразовать в слои (Последовательно)), показано на Рисунок 8.12.
Наш баннер
Рисунок 8.3. Наш баннер
Основа создания изображений для использования в Интернете — инструмент Save for Web (Сохранить для Web). Он практически одинаков почти во всех программах от Adobe. Среди графических редакторов, пожалуй, нет более удобного и практичного инструмента для наглядной оптимизации. Для запуска Save for Web (Сохранить для Web) выберите File > Save for Web (Файл > Сохранить для Web). Однако гораздо лучше использовать стандартное сочетание клавиш Shift+Ctrl+Alt+S (Рисунок 8.4).
Настройки для оптимизации формата JPEG
Рисунок 8.9. Настройки для оптимизации формата JPEG
Настраивая эти параметры, вы неизбежно столкнетесь со стремлением получить наименьший файл и нежеланием терять качество. Найти золотую середину — вот в чем искусство оптимизации.
Progressive (Прогрессивный). Вариант JPEG. Отличается от стандартного наличием черезстрочной разверстки, очень полезной при использовании работ в Сети. ICC Profile (Сохранить в файле цветовой профиль). Необходимо, если вы хотите, чтобы при редактировании изображения на другом компьютере цвета были точно такими, как вы их задумали. Optimized (Оптимизированный). Переключает формат JPEG с Baseline (Стандартный) на Optimized (Оптимизированный). В этом режиме более точно передаются цвета, меньше потери от сжатия. Blur (Размыть). Метод уменьшения размеров JPEG-файлов. Основан на размывании картинки с заданной степенью силы. Конечно, это сильно портит изображение, но иногда вполне подходит, например, если изображение может быть нечетким.Настройки для оптимизации GIF
Рисунок 8.5. Настройки для оптимизации GIF
Diffusion (Диффузная). Своеобразное перемешивание имеющихся пикселов. Почти всегда улучшает вид изображения, поэтому часто используется. Pattern (Образец). Смещение пикселов по заданному образцу. Noise (Шум). Для внешнего увеличения числа цветов используется принцип шума. Иногда очень эффективно при сохранении текстур. Lossy (Потери). Для уменьшения размеров изображения можно удалить часть графической информации (в зависимости от настроек) и тем самым упростить документ. На Рисунок 8.6 показано одно и то же GIF-изображение со значением параметра Lossy (Потери) 0%, 60% и 100%. Обратите внимание на изменение размеров файла. Colors (Цвета). Для некоторых палитр количество цветов можно изменять. Это один из наиболее надежных способов получить минимальное по размеру изображение — начинать с нескольких цветов и постепенно увеличивать, пока результат не станет удовлетворительным. В нашем баннере цветов совсем мало — только 8, поэтому большое число выбирать не стоит. Web Snap (Соответствие Web). Количество цветов в палитре в процентах, которое должно быть веб-безопасными, то есть одинаково отображаться и на PC, и на Macintosh. При выставлении этого значения равным 100% будет сформирована обычная веб-палитра.
Настройки оптимизации для формата SWF
Рисунок 8.13. Настройки оптимизации для формата SWF
Существуют следующие настройки.
Read Only (Только чтение). Если вы установите флажок, то файл будет записан таким образом, что его уже нельзя будет открыть для редактирования в какой-либо программе. Это, с одной стороны, уменьшает размер файлов, а с другой, защищает ваши авторские права. Настройка, обозначенная 1. Параметр, задающий тип сохранения, — изображение или анимация. Если вы выберете вариант AI File to SWF File (Файл Illustrator в файл SWF), изображение будет сохранено в виде статичной картинки, полностью повторяющей то, что вы видите на экране при работе в Illustrator. Layers to SWF Frames (Слои в SWF-фреймы) позволяет сделать анимацию на основе имеющихся слоев, которые будут представлены как кадры. Нам нужно выбрать именно этот вариант. Curve Quality (Качество кривых). Точность повторения кривыми файла кривых исходного изображения. При уменьшении этого параметра значительно снижается качество, особенно в области мелких деталей, но зато уменьшается размер файла. Для нашего случая оптимально значение «7». Frame Rate (Задержка фрейма). Частота смены кадров и, как следствие, скорость анимации. Чтобы эффект был правильным, выставьте не более 4 кадров в секунду. Loop (Повторять). Проигрывать анимацию многократно. Подходит для анимации, для которой важен повторяющийся цикл. Баннер относится именно к такому типу.Окно подключения JavaScriptфайла
Рисунок 8.16. Окно подключения JavaScript-файла
Щелкните на кнопке Add (Добавить) и найдите файл events.js на жестком диске.
После этого можно приступать непосредственно к заданию интерактивности. Это делается методами объектно-ориентированного программирования, через события и атрибуты к ним. Если вы занимались программированием хотя бы на любительском уровне, то вам все будет очень просто и знакомо.
Вот и все. После этого палитра SVG Interactivity (SVG-интерактивность) должна выглядеть как на Рисунок 8.17.
Окно Save for Web
Рисунок 8.4. Окно Save for Web
Большинство настроек данного инструмента предназначено для оптимизации графических изображений. Чтобы изредка использовать Save for Web (Сохранить для Web), нет смысла осваивать все настройки — это потребует от вас знаний HTML, CSS и много другого. Достаточно понимать графические опции сохранения, которые находятся в правой части экрана. Именно их мы и опишем применительно к баннеру, который будет сохранен в формате GIF.
Основные свойства этого формата следующие.
Так как сейчас мы изучаем настройки сохранения для GIF, оставьте этот параметр изменений. Выбор палитры цветов для оптимизации GIF. Так как цвета в этом формате заказные, то можно использовать любые из 16 миллионов, но в количестве, не превышающем 256. Практически всегда лучше использовать палитру Adaptive (Адаптивная). Она наиболее гибкая и легкая в настройке.
Способ смешения имеющихся пикселов, с целью получить выигрыш в гамме, то есть небольшим количеством цветов имитировать куда большее.
Это не всегда эффективно, но каждый раз при оптимизации сложного GIF, стоит попробовать все варианты.
Окно свойств объекта
Рисунок 8.15. Окно свойств объекта
Далее сгруппируйте (Ctrl+G) крест с кругом и аналогичным способом переименуйте Group в all.
Так как работать мы будем с JavaScript-процедурами, необходимо подключить файл с описанием этих процедур. Этот файл вы можете найти по адресу http://wnk.biz или написать сами, если уверенно владеете JavaScript.
Чтобы выполнить подключение файла, воспользуйтесь палитрой SVG Interactivity (SVG-интерактивность): Window > SVG Interactivity (Окно > SVG-Интерактивность). Щелкните на кнопке в виде стрелки на палитре и выберите в открывшемся меню JavaScript Files (Рисунок 8.16).
Палитра Layers после выполнения Release to Layer (Sequence)
Рисунок 8.12. Палитра Layers после выполнения Release to Layer (Sequence)
На этом подготовка закончена, можно сохранять при помощи Save for Web (Сохранить для Web) в SWF. SWF — это основной формат графики, основанной на Flash-технологиях. Точнее будет сказать, что это и есть Flash-формат (Рисунок 8.13).
Наверное, сегодня уже все пользователи в той или иной степени знакомы с Flash. В настоящее время это наиболее распространенный формат анимации в Интернете, при помощи которого построено подавляющее большинство мультимедийных интернет-страниц.
Конечно, в Adobe Illustrator не реализовано и десятой части возможностей Flash, ведь программа предназначена не для этого. Тем не менее, в ней вы сможете сделать или статичную картинку или простую анимацию.
Работа с форматом SVG
8.2. Работа с форматом SVG
В настоящее время информация, которая размещена в Интернете, носит смешанный характер. Трудно найти такой сайт, в котором есть только графика или только текст. Именно повсеместное внедрение графических данных в тексты уже достаточно давно дало толчок к появлению формата S VG.
Прежде чем говорить об этом формате, вспомним, в каком виде существует графика в Интернете. В основном в трех растровых форматах —JPEG, GIF и PNG. Кроме того, значительное распространение получила векторная Flash-графика.
Какие существуют недостатки? Для растровых форматов это:
Flash-файлы неудобны тем, что все содержание передают как графику, что не очень хорошо для текстового наполнения.
SVG в этом отношении абсолютно революционен. Он создан на основе интернет-стандарта XML, который представляет из себя определенные правила написания кода HTML. Это значит, что SVG, в отличие от SWF, не является компилированным файлом. Он описывает изображение при помощи стандартных норм XML и поэтому может создаваться не только в графическом редакторе, но и в редакторе верстки HTML-страниц, даже в обычном Блокноте.
SVG (Scalable Vector Graphics) переводится как «масштабируемая векторная графика». Не совсем понятно, почему формат назван так — любая векторная графика легко масштабируется, это одно из ее основных свойств. Формат SVG объединяет в себе графические данные, текст и интерактивные компоненты.
Графические данные могут быть как векторными, так и растровыми. Векторная часть в свою очередь делится на примитивы и линии (кривые Безье). SVG способен передавать и два вида анимации — заданную по кадрам и программно описанную (однако, опыт показывает, что для создания анимации более эффективен формат Flash). Подробное описание формата SVG можно получить на официальном сайте http://www.w3.org/Graphics/SV6.
Наш пример будет достаточно простым, но полезным. Мы создадим векторную фигуру, линии которой будут утолщаться при наведении курсора мыши. Используем наш знак (Рисунок 8.14).
Результат подготовки изображения первой страницы сайта
Рисунок 8.20. Результат подготовки изображения первой страницы сайта
Теперь приступим к созданию меню сайта. Вначале напишите его при помощи Text (Текст). Обратите внимание на то, что каждый пункт должен быть отдельным блоком, не связанным с другими. После этого каждый пункт нужно связать с соответствующей страницей, указав ее URL (пример для первого пункта показан на Рисунок 8.21).
Создание HTMLстраницы
8.3. Создание HTML-страницы
Illustrator, в принципе, можно использовать и для создания целых сайтов. Правда, с оговоркой, которая звучала уже неоднократно — это будет совсем не профессиональная работа. Но если вам нужно сделать, к примеру, одну информативную страницу, «визитку» в Интернете, то учить HTML и осваивать специальные пакеты нет смысла. Вам поможет уже вполне привычная во всех отношениях программа.
Страница разбитая на пластины
Рисунок 8.22. Страница, разбитая на пластины
На этом работа почти выполнена. Конечно, лучше оптимизировать каждую пластину отдельно после запуска Save for Web (Сохранить для Web), но для данного примера достаточно и автоматических настроек.
В качестве формата сохранения пластин выберите GIF — он подойдет для этого случая. После этого в окне Save for Web (Сохранить для Web) щелкните на кнопке Save (Сохранить) и выберите вариант сохранения HTML and Images (HTML и изображения). Получившаяся страница в окне Internet Explorer показана на Рисунок 8.23.
Размер всех файлов страницы после оптимизации оказался равен 32 Кбайт — это отличный результат для любительской страницы с графикой. Резюмируя, хотелось бы сказать, что при желании заниматься веб-дизайном лучше осваивать специальные программы и пакеты, разбираться в технологиях — только это обеспечит профессиональный результат. Illustrator как инструмент для создания сайтов подходит только для случайной, разовой работы.
SVG в окне обозревателя
Рисунок 8.18. SVG в окне обозревателя
Особое внимание обратите на то, какого размера получился файл (у нас это всего 720 байт!). Никакая GIF-анимация не сравнится с этим форматом по компактности.
Функции программы
Таблица 8.1. Функции программы, используемые для подготовки изображений для Интернета
| Название | Описание | Клавиатурное сокращение |
| Инструменты | ||
| Туре (Текст) | Создание текстовой части баннера | т |
| Реп (Перо) | Рисование графической части баннера | р |
| Rectangle (Прямоугольник) | Основа для фона баннера | м |
| Paintbrush (Кисть) | Рисование элементов сайта | в |
| Палитры | ||
| Layers (Слои) | Разбиение текста на слои | F7 |
| SVG Interactivity (SVG-интерактивность) | Задание атрибутов при создании SVG | |
| Attributes(Атрибуты) | Задание гиперссылок | F11 |
| Окна | ||
| Save for Web (Сохранить для Web) | Оптимизация различных графических форматов, используемых в Сети | Ctrl+Shift+Alt+S |
| Optimize to File Size (Оптимизировать под размер файлов) | Автоматическая подгонка параметров сохранения изображения под необходимые размер файла | |
| JavaScript Files | Подключение файла Java Script для SVG-работы |
Вид страницы которую мы будем повторять
Рисунок 8.19. Вид страницы, которую мы будем повторять
Единственный элемент, который будет использован готовым, — это центральная растровая картинка. Вы можете копировать ее с экрана.
1. Итак, первое действие — поместить растровую картинку в документ. Для этого используется команда Place (Поместить). 2. Следующее действие — создание огибающей линии. Проще всего это делается следующим образом: возьмите инструмент Paintbrush (Кисть) и нарисуйте примерный контур. Нет смысла пытаться полностью повторить существующий — этого даже мы не делали. 3. Затем смените Paintbrush (Кисть) на Smooth (Сглаживание) и подровняйте контур. Чтобы создать иллюзию, что он нарисован реальной кистью, выберите подходящий вариант из готовых стилей. Откройте библиотеку художественных кистей — Window > Brush Libraries > Artistic Sample (Окно > Библиотеки кистей > Художественные образцы). Вы можете сами подобрать вариант, но нам показалось, что наиболее подходящий — Dry Ink. 4. Разрывы в линии можно сформировать несколькими способами, самый простой — наложить поверх нее прямоугольники белого цвета без обводки. 5. Название издательства формируется при помощи инструмента Text (Текст) без особых ухищрений. То, что у нас получилось, показано на Рисунок 8.20.Включенная сетка прозрачности
Рисунок 8.1. Включенная сетка прозрачности
Еще одна опция, позволяющая настроить просмотр так, чтобы было удобнее работать с интернет-графикой, это Pixel Preview (Пиксельный режим) — View > Pixel Preview (Вид > Пиксельный режим).
Как вы помните, основное отличие векторной и растровой графики заключается в том, что векторная строится на кривых, основанных на математических формулах, а растровая — на пикселах.
Если мы создаем иллюстрацию для Интернета, то должны быть готовы к тому, что придется использовать так называемое экранное разрешение, а именно 72 ppi. Это значит, что вы практически наверняка потеряете четкость и ровность контуров, которая характерна для растровой графики высокого разрешения и любой векторной графики. Гораздо лучше увидеть такие изменения еще в процессе работы, чтобы результат не стал сюрпризом. Для этого и создана функция Pixel Preview (Пиксельный режим), которая имитирует экранное разрешение. При этом все объекты выглядят так, как они будут выглядеть при разрешении 72 ppi.
На Рисунок 8.2. показано одно изображение в обычном режиме отображения и в режиме Pixel Preview (Пиксельный режим).
Задание URL через палитру Attributes (Атрибуты)
Рисунок 8.21. Задание URL через палитру Attributes (Атрибуты)
Физически страница сформирована. Однако так как она вся построена на картинках, нужно разбить изображение на пластины (используя инструмент Slice (Пластина)), чтобы ускорить загрузку.
Все элементы — с небольшим количеством цветов, поэтому нет необходимости разделять на пластины по принципу насыщенности цветами (для дальнейшего выбора формата сохранения этой пластины). Поэтому лучше разделить так, чтобы загрузка сохраняла внутреннюю логику картинки. Как это сделали авторы, показано на Рисунок 8.22.
Использование Data Driven
9.3. Использование Data Driven
Довольно часто людям, имеющим дело с компьютерной графикой, приходится заниматься рутинным повторением одного и того же действия. Чуть выше мы поговорили, как это решается при помощи Actions (Действия).
Data Driven Graphics (Динамическая графика) — это еще более мощный способ автоматизировать работу. В основу положен принцип шаблонности — вы создаете шаблон, а затем меняете только данные в файле-описании. Наиболее это понятно разработчикам веб-страниц, которые имели опыт работы с CSS и XML — сначала определяется стиль всего документа, потом редактируется наполнение. Недаром Data Driven Graphics (Динамическая графика) основана именно на XML.
Основной способ использования — создание однотипных документов в большом количестве, например, визиток фирмы. Если их нужно сделать более 20, то инструмент Data Driven Graphics (Динамическая графика) становится просто незаменимым. Именно визитками в этом примере мы и займемся.
Сначала необходимо создать шаблон. Этот процесс ничем не отличается от простого рисования в Illustrator. Однако сразу создайте папку для хранения файлов, относящихся к этому проекту, и положите туда первую фотографию. Шаблон, созданный авторами, показан на Рисунок 9.5.
Использование макросов
9.2. Использование макросов
При работе с Illustrator пользователь достаточно быстро запоминает ряд клавиатурных сокращений. Это отличительная черта не только профессионала, но и просто внимательного человека, так как очень много всплывающих подсказок, а в основном меню рядом со многими командами написаны сочетания клавиш, которые позволяют вызвать их с помощью клавиатуры. Несомненным плюсом программы является то, что разработчики предусмотрели возможность создавать свои собственные клавиатурные сокращения, которые будут удобны именно вам, а при выполнении некоторых видов работы необходимы, как воздух, особенно если одну операцию приходится выполнять многократно.
Делается это очень просто. Выберите Edit > Keyboard Shortcuts (Правка > Клавиатурные сокращения), откроется окно (Рисунок 9.2).
Как вы видите, здесь можно назначить клавиатурное сокращение для любого инструмента или пункта меню. Можно, например, вызывать часто используемые фильтры, не открывая каждый раз меню.
ВНИМАНИЕ
Ваши сокращения не должны совпадать с наиболее распространенными стандартными (например, не стоит назначать сочетанию клавиш Ctrl+V иное значение, кроме «Вставить»), иначе вам будет трудно работать в других программах.
Бывает также, что приходится выполнять не одно действие, а целую цепочку постоянно повторяющихся действий. Выстраиваясь определенным образом, действия образуют последовательность команд, которая получила название макропоследовательности.
Именно такие большие списки последовательно выполняющихся команд можно создавать самим, а можно воспользоваться готовыми. За такими макропоследовательностями также можно закреплять клавиатурные сокращения, то есть для выполнения достаточно будет просто нажать клавишу.
Использование сценариев
9.4. Использование сценариев
Для Adobe Illustrator вы можете также писать сценарии, которые по сложности не будут уступать многим программным элементам. Это наиболее мощный и сложный способ автоматизации работы. Несколько готовых можно увидеть в File > Scripts (Файл > Скрипт) (Рисунок 9.9).
Как заставить программу работать быстрее
9.1. Как заставить программу работать быстрее
Самый простой способ заставить программу работать быстрее — это настроить работу с дополнительными модулями (plug-ins). Каждый такой модуль — это отдельная небольшая программа, которая требует определенных системных ресурсов. Хранятся модули в папке Illustrator CS/Plug-ins. В ней, как видите, находится много папок, однако их названия и названия файлов позволяют понять, что именно в них содержится.
Создайте новую папку там же. Затем скопируйте туда только те надстройки, которые необходимы в повседневной работе. После этого выберите: Edit > Preferences > Plug-ins&Scratch Disks (Правка > Настройки > Плагины и диски подкачки). Откроется окно (Рисунок 9.1).
Краткие итоги
9.5. Краткие итоги
Adobe Illustrator предоставляет широкие возможности для автоматизации работы. Если их использовать, то можно сэкономить много времени и сил, однако помните — выполнение сложных операций с множеством действий при помощи, скажем, макропоследовательностей, весьма рискованная затея. Именно от правильного определения ситуаций, когда можно автоматизировать, а когда нет, и зависит качество работы с этими средствами.
Лист с новыми данными
Рисунок 9.8. Лист с новыми данными
Разумеется, работать с Data Driven Graphics (Динамическая графика) имеет смысл в тех случаях, когда есть хотя бы 20 вариантов или информацию приходится часто обновлять.
Машина должна работать
Машина должна работать
В 70-х годах в СССР на различных предприятиях появились загадочные люди, которые называли себя бригадами НОТ. Народ очень быстро расшифровал НОТ как «Новый отряд тунеядцев». Однако это было не совсем так. НОТ — это «Научная организация труда».
К чему этот исторический экскурс? А к тому, что в СССР поняли, что при тех же затратах машинного и человеческого времени можно получать куда более высокую производительность, если внести небольшие изменения в процесс. В СССР, правда, НОТ никакой реальной отдачи не принесла.
Человек, работающий на компьютере, также зачастую не понимает, что очень многие ресурсы компьютера и его времени уходят зря. Эта глава посвящена тому, как можно сэкономить время и ресурсы.
Окно Keyboard Shortcuts
Рисунок 9.2. Окно Keyboard Shortcuts
Казалось бы, что еще можно пожелать? Ведь так быстро, удобно, практично. Но нет, создатели и разработчики программы пошли еще дальше.
Если вдуматься, то списки команд нужны для того, чтобы не повторять их множество раз. А раз уж возникает необходимость выполнять их снова и снова, то вполне логичным является реализация возможности применения макропоследовательностей не к одному файлу, а к целым группам. Именно эту замечательную идею и осуществили разработчики, за что им огромное спасибо, так как не приходится сидеть за компьютером и монотонно нажимать клавиши.
В одном из прошлых занятий мы создавали визитку. Сейчас попробуем записать макрос, который будет оптимизировать процесс их размещения на листе формата А4 для последующей печати.
Откройте палитру Actions (Действия): Window > Actions (Окно > Действия) (Рисунок 9.3).
Окно Preferences/Plugins&Scratch Disks
Рисунок 9.1. Окно Preferences/Plug-ins&Scratch Disks
Щелкнув на кнопке Choose (Выбор), смените папку Plug-ins на созданную вами. После перезагрузки программы изменения вступят в силу. Если вам понадобится какой-либо фильтр, достаточно будет просто скопировать его в эту же папку.
Окно Variable Options
Рисунок 9.6. Окно Variable Options
В поле Name (Имя) задается имя для данного атрибута. В Data Driven Graphics (Динамическая графика) очень важно указывать понятное имя, иначе потом, уже при работе с XML-файлом, легко запутаться.
Второй параметр — Туре (Тип) — сложнее. Здесь вы указываете тип атрибута. Как правило, программа сама его правильно определяет, но иногда его приходится корректировать. Существует четыре варианта.
Аналогичным способом отметьте все графические и текстовые фрагменты, которые будут подвергаться изменению.
Сохраним полученное в наборе (список Data Set (Набор данных) палитры), щелкнув на кнопке
После обновления файла у нас уже два набора данных
Рисунок 9.7. После обновления файла у нас уже два набора данных
Выберите вариант Ivan Petrov. Вы увидите то, что показано на Рисунок 9.8.
Расположение «визиток»
Рисунок 9.4. Расположение «визиток»
5. Откройте новый файл. Поместите аналогичный прямоугольник и запустите записанную макропоследовательность. Если результат будет идентичен тому, что вы сделали вручную, — все правильно.
З Палитра Actions
Рисунок 9.З. Палитра Actions
Палитра Actions (Действия) содержит наборы различных последовательностей. Чтобы их увидеть, необходимо щелкнуть на треугольнике, расположенном слева от имени набора.
После этого перед вами появится список Actions (Действия), любое из которых может быть выполнено. Если вы хотите увидеть, из чего состоят последовательности, щелкните на треугольнике, расположенном слева от них, и перед вами появится список составляющих операций.
Внизу палитры расположены значки, позволяющие управлять действиями:
Шаблон листа
Рисунок 9.5. Шаблон листа
Запомните, что вставленное изображение обязательно должно быть ссылкой, а не помещенным в документ. Иными словами, в окне Place (Поместить) должна быть отмечена опция Link (Связь). Надписи, которые будут меняться, не должны находиться в одном текстовом блоке с другими. Каждая должна быть написана отдельно. Единственная надпись, которая останется неизменной, — название компании.
После этого можно переходить ко второй части работы над шаблоном, а именно: заданию его динамических свойств. Для этого служит специальная палитра Variables (Варианты), которую можно открыть (если она не открыта), выполнив: Window > Show Variables (Окно > Видеть Варианты).
Выделите изображение и щелкните на кнопке
Функции программы
Таблица 9.1. Функции программы, используемые для автоматизации работы
| Название | Описание |
| Палитры | |
| Actions (Действия) Variables (Варианты) | Операции с макропоследовательностями Работа с Data Driven (Динамическая графика) |
| Окна | |
| Preferences (Установки) | Настройка работы с дополнительными модулями |
Вид меню Script
Рисунок 9.9. Вид меню Script
Названия этих сценариев вполне точно описывают их задачи. Например, ExportDocsAsFlash сохраняет документ в формате SWF. Если вы программист, то можете писать собственные сценарии, выполняющие необходимые задачи. Много готовых сценариев можно найти в Интернете.
