Иллюстрации для Web
На прошлых занятиях мы говорили о подготовке работ, которые будут распечатаны — в основном Illustrator для этого и служит. Однако заказчик может попросить вас не только разработать полиграфический дизайн фирмы, но и выполнить работу, связанную с интернет-дизайном. Скорее всего, вам придется делать рекламные баннеры для сайта компании. Возможно, это станет «довеском» к основной работе, связанной с печатным «лицом» фирмы, — бланками, визитками и т. п.
Поэтому в этой главе в основном будет описано создание баннеров в различных форматах. Первый баннер, который мы сделаем, — статичный растровый в форматах JPEG и GIF. Основой его послужит все тот же знак инь и ян.
Работа для Всемирной паутины имеет свой особенности, которые начинаются с настройки интерфейса программы.
По умолчанию в Illustrator фон представляет собой белый «холст». Однако всегда следует помнить, что, в отличие от программ редактирования растровой графики, этот холст не является частью изображения, он не несет в себе никакой графической информации и не записывается в файлы при сохранении. Это нормально для картинок, предназначенных для печати, так как неплохо имитирует бумагу, но совершенно не подходит для экрана обозревателя — мы должны сразу точно видеть, какие области остаются незаполненными цветом или изображением.
Сетка прозрачности (Transparency Grid) — это особый режим отображения фона, при котором прозрачные области показываются специальной сеткой, которая, кстати, стандартна для большинства графических программ, во всех же продуктах Adobe она одинакова. Отобразить ее на мониторе можно, выполнив View > Show Transparency Grid (Вид > Показать сетку прозрачности) (рис. 8.1).
Разумеется, в таком режиме значительно удобнее, чем в стандартном, готовить для Интернета изображения, содержащие прозрачные области, — не возникает путаницы с белым цветом на изображении и белым фоном.
Рис. 8.1. Включенная сетка прозрачности
Еще одна опция, позволяющая настроить просмотр так, чтобы было удобнее работать с интернет-графикой, это Pixel Preview (Пиксельный режим) — View > Pixel Preview (Вид > Пиксельный режим).
Как вы помните, основное отличие векторной и растровой графики заключается в том, что векторная строится на кривых, основанных на математических формулах, а растровая — на пикселах.
Если мы создаем иллюстрацию для Интернета, то должны быть готовы к тому, что придется использовать так называемое экранное разрешение, а именно 72 ppi. Это значит, что вы практически наверняка потеряете четкость и ровность контуров, которая характерна для растровой графики высокого разрешения и любой векторной графики. Гораздо лучше увидеть такие изменения еще в процессе работы, чтобы результат не стал сюрпризом. Для этого и создана функция Pixel Preview (Пиксельный режим), которая имитирует экранное разрешение. При этом все объекты выглядят так, как они будут выглядеть при разрешении 72 ppi.
На рис. 8.2. показано одно изображение в обычном режиме отображения и в режиме Pixel Preview (Пиксельный режим).
Рис. 8.2. Изображение в режиме просмотра Preview (а) и Pixel Preview (б)
Приступим к изготовлению баннера. Он должен быть достаточно простым, однако содержать и текст, и графику. Его размеры— 460 х 80 пикселов. Единственная сложность, которая может возникнуть, — цвет фона. Чтобы он не был прозрачным, в основу баннера следует положить прямоугольник нужного оттенка.
Мы использовали готовую фигуру «инь и ян», инструмент Реп (Перо) для создания облака и горы и инструмент Text (Текст) для ввода надписи (рис. 8.3).
Рис. 8.3. Наш баннер
Основа создания изображений для использования в Интернете — инструмент Save for Web (Сохранить для Web). Он практически одинаков почти во всех программах от Adobe. Среди графических редакторов, пожалуй, нет более удобного и практичного инструмента для наглядной оптимизации. Для запуска Save for Web (Сохранить для Web) выберите File > Save for Web (Файл > Сохранить для Web). Однако гораздо лучше использовать стандартное сочетание клавиш Shift+Ctrl+Alt+S (рис. 8.4).
Рис. 8.4. Окно Save for Web
Большинство настроек данного инструмента предназначено для оптимизации графических изображений. Чтобы изредка использовать Save for Web (Сохранить для Web), нет смысла осваивать все настройки — это потребует от вас знаний HTML, CSS и много другого. Достаточно понимать графические опции сохранения, которые находятся в правой части экрана. Именно их мы и опишем применительно к баннеру, который будет сохранен в формате GIF.
Основные свойства этого формата следующие.
Работает с индексированными цветами. Это значит, что в нем содержится палитра описания цветов (максимум 256), но каждый байт индексирован, то есть занимает всего 1 байт.
Применяется LZW-сжатие, которое действует по принципу нахождения совпадений цветов. Поэтому сжатие в GIF наиболее эффективно по отношению к одноцветным элементам по сравнению с другими форматами.
Может загружаться через строку (Interlaced). Это экономит время и терпение посетителей вашего сайта.
Поддерживает прозрачность.
В Illustrator можно сразу, используя команду Export (Экспорт), сохранить изображение в этом популярном формате. Но нас интересует не столько сохранение, сколько оптимизация перед сохранением. Поэтому запустите инструмент Save for Web (Сохранить для Web). Все настройки нам не нужны, с оптимизацией GIF связаны только те, которые показаны на рис. 8.5.
Settings (Установки). Эта настройка относится не только к оптимизации GIF, она открыта всегда. Это список из нескольких вариантов сохранения, среди которых есть JPEG, GIF и PNG. Последний формат так и не получил распространения в Интернете, поэтому его мы не будем рассматривать. В этом контекстном меню можно определить формат для сохранения. Варианты следующие:
GIF; a JPEG;
PNG-8;
PNG-24;
SWF;
SVG.
Так как сейчас мы изучаем настройки сохранения для GIF, оставьте этот параметр изменений.
Выбор палитры цветов для оптимизации GIF. Так как цвета в этом формате заказные, то можно использовать любые из 16 миллионов, но в количестве, не превышающем 256. Практически всегда лучше использовать палитру Adaptive (Адаптивная). Она наиболее гибкая и легкая в настройке.
Способ смешения имеющихся пикселов, с целью получить выигрыш в гамме, то есть небольшим количеством цветов имитировать куда большее.
Это не всегда эффективно, но каждый раз при оптимизации сложного GIF, стоит попробовать все варианты.
Рис. 8.5. Настройки для оптимизации GIF
Diffusion (Диффузная). Своеобразное перемешивание имеющихся пикселов. Почти всегда улучшает вид изображения, поэтому часто используется.
Pattern (Образец). Смещение пикселов по заданному образцу.
Noise (Шум). Для внешнего увеличения числа цветов используется принцип шума. Иногда очень эффективно при сохранении текстур.
Lossy (Потери). Для уменьшения размеров изображения можно удалить часть графической информации (в зависимости от настроек) и тем самым упростить документ. На рис. 8.6 показано одно и то же GIF-изображение со значением параметра Lossy (Потери) 0%, 60% и 100%. Обратите внимание на изменение размеров файла.
Colors (Цвета). Для некоторых палитр количество цветов можно изменять. Это один из наиболее надежных способов получить минимальное по размеру изображение — начинать с нескольких цветов и постепенно увеличивать, пока результат не станет удовлетворительным. В нашем баннере цветов совсем мало — только 8, поэтому большое число выбирать не стоит.
Web Snap (Соответствие Web). Количество цветов в палитре в процентах, которое должно быть веб-безопасными, то есть одинаково отображаться и на PC, и на Macintosh. При выставлении этого значения равным 100% будет сформирована обычная веб-палитра.
Рис. 8.6. GIF-изображение с 0%, 60% и 100% параметром Lossy
Interlaced (Чересстрочный). Сделать GIF чересстрочным, то есть его загрузка будет происходить через строку. Это немного увеличит размер файла, но выигрыш явно есть — пользователь еще до полной загрузки видит, какая информация размещена на рисунке.
Transparency (Прозрачность). Сохранять или нет прозрачность, если она есть. В GIF прозрачность битовая, то есть она или есть или ее нет, градации не допускаются.
Color Table (Цветовая таблица). Основной инструмент ручного редактирования цветов при экспорте GIF-файлов. В ней показаны все цвета, которые есть в данный момент при текущих настройках (рис. 8.7). Вы можете выбрать любой цвет и двойным щелчком на нем назначить другой на его место (через стандартное окно Color Picker (Выбор цвета)).
Инструменты Color Table (Цветовая таблица).
1. Сделать выбранный цвет веб-совместимым.
2. Закрепить выбранный цвет. Какие бы изменения вы не производили в палитрах, закрепленный цвет останется в изображении.
3. Новый цвет. Позволяет добавить в таблицу еще один цвет.
4. Удалить выбранный цвет. Профессионалы сами оценивают, какие цвета нужны изображению, а какие нет. Ненужные удаляются при помощи этой кнопки.
Рис. 8.7. Color Table
Экспериментируя с настройками оптимизации GIF, добейтесь минимально возможного размера файла.
В конце описания функций оптимизации GIF хочется рассказать про один инструмент, облегчающий жизнь малоопытным пользователям. Щелкните на кнопке в виде стрелки напротив параметра Settings (Установки). В открывшемся меню выберите Optimize to File Size (Оптимизировать под размер файла). Откроется окно (рис. 8.7).
Рис 8.8. Окно настроек команды Optimize to File Size (Оптимизировать под размер файла)
Как, наверное, уже многие догадались, это инструмент автоматической настройки изображения под необходимый размер. Конечно, он не всегда эффективен, но все же обычно помогает.
Desired File Size (Желаемый размер файла). Здесь указывается желательный размер итогового файла. Конечно, далеко не всегда программа сможет выполнить поставленную задачу в точности, но в том, что приближение будет максимальным, можете не сомневаться.
Start With (Начинать с). На каком принципе строить выбор. Есть два варианта:
Current Setting (Текущие настройки). Оптимизировать тот формат, который уже выбран пользователем;
Auto Select GIF/JPEG (Авто выбор GIF/JPEG). Программа будет вначале сама определять, в каком формате выгоднее оптимизировать данный файл.
Use (Использовать). К чему применять инструмент:
Current Slice (Текущая пластина). Если изображение не разрезано (про разбиение на пластины читайте ниже), то есть только этот вариант, который обозначает в такой ситуации «данный файл».
All Slices (Все пластины). К назначенному значению по очереди будут приближаться все пластины, которые есть.
Total of All Slices (Все для пластин). Изображение сначала будет оптимизировано целиком и только потом разбито на пластины.
Конечно, Optimize to File Size (Оптимизировать под размер файла) — не решение всех проблем молодого пользователя в оптимизации, но может помочь хотя бы указать верное направление для ручных настроек.
После того, как все настройки будут выставлены, сохраните файл на диске и оцените его размер. В нашем случае это 1,84 Кбайт.
Перейдем к рассмотрению оптимизации второго основного интернет-формата — JPEG. Перечислим его основные свойства.
Способен сохранять изображения высокой глубины цвета — до 24 бит. Это позволяет передавать любые фотографии.
Формат с потерей качества. Метод сжатия, примененный в нем, основан не на поиске повторений, как у GIF, а на активном преобразовании изображения с целью его упрощения.
Не способен передавать прозрачность.
Оптимизируется этот формат также инструментом Save For Web (Сохранить для Web) (рис. 8.9).
Quality (Качество). Эта настройка определяет степень сжатия файла и, как следствие, его качество. В данном случае возможен выбор между цифровым вводом (от 1 до 100) или по типам. Последний вариант считается классическим. Имеются следующие типы качества.
Maximum (Максимальный). По официальному описанию формата в этом варианте не происходит изменений, видимых глазом. Практика показывает, что так оно и есть. Однако размер такого файла больше подходит для хранения на диске, чем для использования в сети.
High (Высокое).
Medium (Среднее).
Low (Малое).
Рис. 8.9. Настройки для оптимизации формата JPEG
Настраивая эти параметры, вы неизбежно столкнетесь со стремлением получить наименьший файл и нежеланием терять качество. Найти золотую середину — вот в чем искусство оптимизации.
Progressive (Прогрессивный). Вариант JPEG. Отличается от стандартного наличием черезстрочной разверстки, очень полезной при использовании работ в Сети.
ICC Profile (Сохранить в файле цветовой профиль). Необходимо, если вы хотите, чтобы при редактировании изображения на другом компьютере цвета были точно такими, как вы их задумали.
Optimized (Оптимизированный). Переключает формат JPEG с Baseline (Стандартный) на Optimized (Оптимизированный). В этом режиме более точно передаются цвета, меньше потери от сжатия.
Blur (Размыть). Метод уменьшения размеров JPEG-файлов. Основан на размывании картинки с заданной степенью силы. Конечно, это сильно портит изображение, но иногда вполне подходит, например, если изображение может быть нечетким.
Рис. 8.10. JPEG-размывание хоть и портит изображение (внизу), но зато значительно уменьшает его размер
При оптимизации изображений не нужно знать много правил, требуется большой опыт. Через какое-то время вы научитесь определять, какое изображение, к примеру, можно размыть, а какое — нет, какой формат подходит для данного рисунка.
Сохранив данный баннер и оценив размер файла, вы поймете, что он не очень подходит для формата JPEG. Причина этому — небольшое количество цветов, из-за чего больше подходит GIF.
Содержание раздела
