Вас удручает перспектива создания иллюстраций для Web с помощью пакета Adobe Photoshop? Расслабьтесь: последние версии программ Adobe Illustrator, Macromedia FreeHand и CorelDraw позволяют импортировать созданную в них графику непосредственно в файлы форматов GIF или JPEG, готовые для размещения в Web. Кроме того, векторные графические пакеты содержат также многие специальные средства для работы в Web, например палитры цветов Web, возможность экспорта текста HTML и привязки графики к URL.
Графический формат обмена (Graphic Interchange Format, GIF) поддерживают все браузеры. Изображение в формате GIF строится по принципу чересстрочной развертки, поэтому оно отображается на экране уже после загрузки части файла. Вначале выводится грубый набросок изображения с очень низким разрешением, который становится все более отчетливым по мере загрузки оставшейся части файла. В новой версии GIF89a поддерживается прозрачность фона, поэтому изображения не обязательно должны быть прямоугольными. Следует помнить, что GIF - это формат, который лучше использовать для изображений с небольшим количеством цветов. Для хранения в Web более сложных изображений, например фотографий, лучше использовать формат JPEG, для которого характерны более высокая степень сжатия и меньшие размеры файлов.
В данной статье рассказывается о том, как создать файл GIF для типичной кнопки Web с помощью пакетов Illustrator 7.0, FreeHand 7 и CorelDraw 7. Мы также поможем вам обойти некоторые из возможных препятствий на тернистом пути к World Wide Web.
Шаг 1: Создание графического объекта для переноса в Web
Примеры, приведенные на врезках, иллюстрируют этапы работы. Мы взяли векторный рисунок из коллекции Aridi, слегка отредактировали его и затем расположили текст дугой под нижним краем рисунка. Вначале можно работать с большим рисунком, но с определенного момента все изображение необходимо привести к тому масштабу, который будет использоваться в Web.
При макетировании Web-страницы следует помнить, что она создается в расчете на экран среднего размера. Значит, размер изображения не должен быть больше, чем 6405480 пикселов (около 2305152 мм), - превышение этих размеров заставит пользователя для просмотра всего изображения выполнить прокрутку экрана. Нельзя забывать и о том, что каждый лишний пиксел увеличивает размер файла, а следовательно, и время его загрузки на компьютер пользователя. Пользователь, которому пришлось ждать появления изображения на экране две минуты, вряд ли оценит ваше произведение, каким бы высокохудожественным оно ни было.
Шаг 2: Выбирайте цвета только из палитры Web
При создании графики для Web имейте в виду, что миллионы людей до сих пор используют 8-разрядные цветные мониторы. Более того, поскольку работа с ограниченной палитрой цветов повышает общую производительность, многие пользователи специально выбирают для своих мониторов режим 256 цветов, чтобы ускорить работу. Помните: великолепный цвет, выбранный вами для заголовка, может выглядеть на некоторых мониторах, как рой комариных личинок, копошащихся в мутной воде, или вовсе будет заменен другим цветом.
Чтобы избежать смешения или замены цветов, следует использовать палитру из 216 цветов, специально подобранных для Web. В последних версиях пакетов векторной иллюстративной графики такая возможность реализуется легко. Так, в пакете Adobe Illustrator 7.0 для этого достаточно выбрать команду Web из подменю "Библиотеки образцов" (Swatch Libraries) меню "Окно" (Window). Ниспадающее меню палитры позволяет выбрать режим отображения: названия цветов или образцы.
В свою очередь, в пакете FreeHand 7 надо выполнить команду "Смеситель цветов" (Color Mixer) из подменю "Панели" (Panels) меню "Окно". Задав для палитры "Смеситель цветов" модель RGB, выберите любую комбинацию числовых значений 0, 51, 102, 153, 204 или 255 для каждого из трех первичных цветов. Можно также смешивать собственные цвета в системе CMYK, выбирая значения в процентах 0, 20, 40, 60, 80 или 100 для голубого, пурпурного и желтого компонентов. Для черного цвета всегда оставляйте значение 0. Кроме того, можно установить цветовую палитру Web (например, Internet Color System компании Pantone) и выбирать из нее цвета, щелкая мышью по картинке "Смеситель цветов Apple" (Apple Color Mixer) в палитре "Смеситель цветов".
Чтобы отобразить цветовую палитру в пакете CorelDraw 7, щелкните на черном треугольнике инструмента заполнения и выберите палитру из раскрывшейся инструментальной панели. Затем из ниспадающего меню "Цветовая модель" (Color Model) выберите значение "Палитра" (Palette), а из ниспадающего списка палитр - Netscape Navigator или Internet Explorer. Теперь в палитре цветов будут отображены 216 цветов Web, а также несколько оттенков серого (следует избегать тех цветов, в которых используются значения RGB, отличные от 0, 51, 102, 153, 204 или 255).
При создании Web-страниц нужно всегда стремиться к сокращению размеров файлов, поэтому следует использовать как можно меньшее число цветов. В нашем примере используется только три цвета: R51G102B102, R51G102B153 и R255G51B51.
Не забудьте сохранить нарисованную картинку в формате используемого вами иллюстративного пакета - это облегчит редактирование изображения, если позже вы решите изменить цвета или саму иллюстрацию. Проверьте, приведено ли изображение к окончательному масштабу.
Шаг 3: Экспортирование иллюстрации в формат GIF
Перед экспортом готовой иллюстрации присвойте файлу короткое имя, не содержащее пробелов и отвечающее соглашениям DOS: имя файла, точка и трехбуквенное расширение gif. Желательно также в имени файла использовать только строчные буквы или по крайней мере применять одинаковые правила использования строчных и заглавных букв для присвоения имен файлам - сеть Internet основана на операционной системе Unix, поэтому при задании ссылок на имена файлов в тексте HTML имеет значение регистр, в котором набраны буквы.
В пакете Adobe Illustrator 7.0 выполните команду "Экспорт" (Export) из меню "Файл" (File). В появившемся диалоговом окне выберите из списка "Формат" (Format) значение GIF89a. Введите имя файла с расширением gif, а затем щелкните по кнопке "Сохранить" (Save) - появится диалоговое окно "Опции GIF89a" (GIF89a Options). Выберите из меню "Палитра" (Palette) значение Web. Если хотите, чтобы изображение при просмотре с помощью браузера сначала отображалось с низким разрешением, а затем постепенно улучшалось, установите флажок в ячейке "Чересстрочный" (Interlaced). Если объект не прямоугольный и фоновые цвета или шаблоны Web-страницы должны "просвечиваться" через него, щелкните на ячейке "Прозрачный" (Transparent). Щелчок на ячейке "Сглаживание" (Anti-alias) позволяет устранить ступенчатость при отображении кривых. Если картинке был присвоен адрес URL, щелкните на ячейке "Карта изображения" (Imagemap) и выберите опцию "Клиент (.html)" (Client-side). И наконец, чтобы экспортировать файл в формат GIF, щелкните на кнопке OK.
Чтобы вызвать диалоговое окно "Экспорт" в пакете Macromedia FreeHand 7, выполните аналогичную команду из меню "Файл"; затем введите имя файла и выберите GIF из меню "Формат". Щелкнув на кнопке "Опции", вызовите диалоговое окно "Значения по умолчанию для экспорта в растровый формат" (Bitmap Export Defaults) и задайте низкое разрешение (вполне подойдет принятое по умолчанию значение 72 точки на дюйм), а также сглаживание. После этого щелкните на кнопке "Еще" (More), чтобы вызвать диалоговое окно для задания опций формата GIF, и установите обе опции - "Чересстрочный GIF" и "Прозрачный GIF". Закройте окна (кнопка OK и кнопка "Экспорт" - в окне "Экспорт"). На этом экспорт файла будет завершен.
В пакете CorelDraw 7 выполните команду "Экспорт" из меню "Файл" - появится диалоговое окно "Экспорт". Затем выберите из меню "Тип для сохранения" (Save As Type) формат CompuServe Bitmap (GIF), введите имя файла и щелкните на кнопке "Экспорт", чтобы вызвать диалоговое окно "Экспорт растрового изображения" (Bitmap Export). Используйте значения, принятые по умолчанию: 256 цветов, коэффициент масштабирования 1:1 и разрешение 72 точки на дюйм. Чтобы отобразить диалоговое окно "Опции GIF89a", щелкните на кнопке OK. Щелкните на кнопке "Цвет изображения" (Image Color) и ячейке "Чересстрочный". И наконец, завершите экспорт в формат GIF, щелкнув на кнопке OK.
Просмотр иллюстрации с помощью браузера
Теперь созданный вами рисунок готов к просмотру с помощью браузера. Запустите браузер, выполните команду "Открыть" (Open) из меню "Файл" и выберите "свежеиспеченный" GIF-файл. Можно также мышью перетащить картинку созданной иллюстрации с рабочего стола и отпустить ее в окне браузера. Изображение появится в окне браузера, а через прозрачные области рисунка должен быть виден серый фон заднего плана. Если браузер обладает возможностями редактирования, можно сразу вставить рисунок непосредственно в уже существующую Web-страницу или с помощью любого текстового редактора вставить инструкцию HTML 
. Если появляется рамка, а это нежелательно, добавьте в тег IMG SOURCE текст BORDER=0. Оператор ALT предназначен для браузеров, работающих в режиме "только текст", и его не следует забывать.
Создайте собственный логотип для Web-страницы или такое изображение, которое трудно либо невозможно воспроизвести с помощью редактора растровой графики, а затем продемонстрируйте его заказчикам и друзьям. Попробуйте применить шаблоны штриховки или перевести текст в контуры и применить различные эффекты к отдельным буквам. Только не забывайте, что меньшие по объему графические файлы с небольшим количеством цветов загружаются быстрее и не расстраивают пользователей, занимающихся Web-"серфингом"!
Шерин Венит - автор 18 книг по дизайну и верстке. На ее Web-узле (www.TaosMtn.com) можно найти множество векторных файлов, конвертированных в форматы GIF и JPEG.
Исходным материалом для дальнейшей работы во всех трех иллюстративных пакетах служит слегка измененный векторный рисунок из коллекции Aridi
Adobe Illustrator
Выполните команду Web из подменю "Библиотека образцов" меню "Окно". Чтобы облегчить дальнейшую работу, сохраните копию изображения в формате иллюстративного пакета. После выполнения команды "Экспорт" из меню "Файл" выберите значение GIF89a из списка диалогового окна. В следующем диалоговом окне для завершения создания GIF-файла щелкните на ячейках "Чересстрочный", "Прозрачный", "Сглаживание" и "Карта изображения (Клиент)".
Macromedia FreeHand
Вызовите "Смеситель цветов", выберите модель RGB и задайте комбинацию определенных числовых значений для каждого из трех первичных цветов. Выберите значение GIF из списка диалогового окна "Экспорт", введите имя файла и щелкните на кнопке "Опции". В появившемся окне "Значения по умолчанию для экспорта в растровый формат" задайте низкое разрешение и сглаживание, а затем щелкните на кнопке "Еще". Выберите обе опции в окне диалога "Опции GIF" и закройте оба диалоговых окна, щелкнув на кнопках OK. Щелчок на кнопке "Экспорт" завершит процесс.
CorelDraw
Щелкните на кнопке выбора цвета, которую можно найти, раскрыв "ковшик" заполнения на инструментальной панели. В палитре "Цвет" выберите из меню "Цветовая модель" значение "Палитра", а из раскрывающегося списка - Netscape Navigator или Internet Explorer. В диалоговом окне "Экспорт" выберите тип CompuServe Bitmap (GIF), введите имя файла, затем, оставив значения опций для экспорта, принятые по умолчанию, щелкните на кнопке OK. В появившемся затем диалоговом окне "Опции GIF89a" щелкните на радиокнопке "Цвет изображения" и ячейке "Чересстрочный"; щелчок на кнопке OK завершит процесс.
Создание ссылок на адреса URL
Хотя для создания большинства ссылок вам будет удобнее использовать одно из средств разработки Web, пакеты Illustrator и FreeHand также содержат удобные средства для вставки ссылок. Если ваше изображение всегда будет привязано к одному и тому же адресу URL, соответствующий текст программы на HTML можно вставить прямо в одной из этих программ.
В пакете Adobe Illustrator 7.0 выберите объекты и выполните команду "Показать атрибуты" (Show Attributes) из меню "Окно" (Window) - появится палитра "Атрибуты" (Attributes). Введите адрес URL на указанном месте. (Illustrator также позволяет мгновенно проверять ссылки на адреса URL. Если на компьютере установлен браузер и к нему подключен модем, вы можете мгновенно соединиться с выбранным URL, воспользовавшись средствами палитры "Атрибуты".)
В пакете FreeHand 7 выберите изображение и выполните команду "Редактор URL" (URL Editor) из подменю Xtras в меню "Окно". Выберите команду "Новый" (New) из всплывающего меню панели "Редактор URL"; в появившемся диалоговом окне "Новый URL" введите адрес URL и щелкните на кнопке OK. После ввода адреса он появится в панели "Редактор URL", откуда его можно будет легко выбрать повторно.