Программа Adobe Illustrator позволяет создавать не только обычные графические документы и распечатывать их на принтере, но и создавать их электронные версии, создавать Web страницы. Из исходного документа Adobe Illustrator цветового формата RGB, можно создавать различного типа электронные документы. Такие, как просто графические Web страницы, причем управляющие информацией, которая хранится в файле формата HTML. А графическая, в файлах, выбранного формата для Web. Таких, как растровые форматы GIF, JPEG, PNG, WBMP и т.д. Или же векторных форматах Flash и SVG. Или же мы можем создать видеоклип с анимацией, хранящийся в специальном файле формата Flash. Или же видеоклип с интерактивными эффектами.

Как понятно из всего вышеперечисленного, для создания Web страницы лучше всего подходит документ в формате RGB, а не в формате CMYK, как сейчас у нас. Поэтому, конечно же, прежде чем мы начнем создавать нашу Web страницу, лучше преобразовать наш документ к виду цветового формата RGB. Для этого щелкнем на пункте меню File, далее пункт Document Color Mode и затем выберем RGB Color. Щелкнем. И вот теперь уже наш документ именно в том формате цветовом, который нам и нужен, RGB.

Теперь же попробуем преобразовать наш документ к виду HTML файла. Это достаточно просто сделать. Для этого, достаточно после того, как мы скомпоновали нашу страницу и все элементы на нем, рисунки, надписи и т. д., щелкнем на пункте меню File и далее Save for Web. Щелкнем на вот этом пункте меню. И в результате появляется вот такое стандартное окошко, в котором мы можем настраивать различные параметры для нашей будущей HTML страницы. Это окно состоит из нескольких основных частей.

Это панель инструментов, которая находятся слева из состоит из 6 инструментов, из центральной части рабочей области с видом нашей будущей HTML страницы, из строки состояния, которая находится в нижней части нашего окна и панели управления с различного рода настройками, которые находятся в правой части нашего окна настройки Web страницы. И наверху у нас находятся 4 вкладки для различного вида показа нашей HTML страницы. Рассмотрим сначала, какие у нас есть возможность вот в этой панели инструментов. Первая из них, это Hand Tool рука, при помощи которой мы можем перемещать HTML страницу по рабочей области. Сейчас, как мы видим, у нас включен именно этот режим, в результате чего мы свободно можем двигать нашу HTML страницу вверх-вниз.

Далее у нас находится Slice Select Tool выделение вырезки, при помощи которой мы можем в документе выделять вырезки, для задания для них личных файловых параметров. Сейчас, у нас пока вырезок на нашем документе нет, поэтому рассмотрим следующий пункт, пункт Zoom Tool, при помощи которого мы можем задавать увеличение нашей HTML страницы и рассматривать ее с увеличением.

Например, мы задали более крупный вид на некую область нашей HTML страницы. Далее мы можем, например, переключиться на режим передвижения, при помощи вот такой руки и рассматривать именно те части нашей HTML страницы, которые нас больше всего интересуют в данном конкретном случае. Далее находится пункт Eyedropper Tool пипетка, при помощи которого мы можем в активном изображении образца выбрать какой-либо цвет. Например, выберем цвет вот в этой области. И сам цвет отображается в соответствующем прямоугольнике. И вот в этой области задания цвета можем видеть, какой цвет соответствует выбранной нами точке в нашей HTML странице.

Можем выбрать, например, другой, вот этот белый цвет, вот такой темнозеленый, зеленый, в общем, где бы мы ни щелкали нашей пипеткой, соответствующий цвет и его выбор из нашей палитры, отображается в соответствующих местах нашей страницы, которая перед нами. И ниже, мы уже видели, вот этот кусочек, кусочек прямоугольника выбора цвета. Мы можем, конечно же, щелкнуть на нем непосредственно, и, так сказать, в ручном режиме выбрать какой-либо цвет для дальнейшего использования. Здесь абсолютно стандартные параметры, так же, как и в любом другом диалоге выбора цвета.

Мы можем выбрать, как в формате RGB, задавая, красный, зеленый и голубой, составляющий цвета, можем выбрать в формате CMYK, задавая соответствующие процентные составляющие оттенков. Или из любых других параметров. Можно непосредственно выбрать цвет, можно непосредственно выбрать из вот этой радуги цветов. Можем поставить галочку на Only Web Colors, для того чтобы мы могли выбрать только из цветов, которые обычно используются на Web страницах, для более точного отображения нашей Web страницы на различного рода браузерах.

И после выбора можем щелкнуть на кнопке ОК, и этот выбор зафиксируется у нас на вот этом прямоугольнике цвета. И далее, Toggle Slices Visibility управление видимостью вырезок, задает управление отображения вырезок, доступных для выделения. И, после всего, что мы могли выбрать, отобразить мы можем, конечно же, при помощи нашего увеличения масштаба, изменить масштаб изображения. Вот, например, если мы сейчас просто щелкнем на каком-либо месте нашего экрана, то произойдет дискретное увеличение масштаба. А если мы нажмем на кнопку Alt, и так щелкнем где-либо мышкой, то произойдет, наоборот, уменьшение масштаба изображения.

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

Наверху у нас над рабочей областью находятся 4 вкладки. Первая из них, эта вкладка Original оригинал. При этом в рабочей области окна будет находиться лишь исходное изображение нашего документа. Далее находится вкладка Optimized, при которой в рабочей области будет расположено результирующее изображение, файловые параметры которых оптимизированы программой или заданной нами. Далее находится вкладка 2-up, при которой у нас будут отображаться два варианта. Рабочая область, как мы видим, у нас разбивается на две половинку, правую и левую. В левой, из которых будет находиться исходное изображение, а в правой, будет находиться оптимизированное изображение, которое будет получено при помощи настройки различного рода параметров.

И последняя вкладка, вкладка 4-up, 4 варианта. При этом рабочая область, как мы видим, разбивается на 4 области. Наверху, слева будет находиться исходное изображение, справа оптимизированное. А в нижней части будут расположены два дополнительных обработанных изображения, файловые параметры которых отличаются от оптимизированного. И, в нижней части каждого из изображения, можно вкратце видеть те параметры, при которых и создано это изображение. Вот, в частности, например, вот это изображение у нас является рисунком GIF, с 256 цветов. Время загрузки будет составлять 18 секунд при модеме 28,8 Кбайт в секунду. А размер файла будет составлять 48 с хвостиком Кбайтов.

И в нижней части остальных вариантов, тоже можно видеть соответствующие настройки, которые использованы для их создания. Далее, в нижней части нашего окна расположена строка состояния, которая состоит, во-первых, из окошка Zoom Level, при помощи которого мы можем задавать увеличение для нашей рабочей области. Например, зададим 100% или любое другое значение. Например, можем задать 50%, что сразу же отражается на наших рабочих видах HTML страницы. И далее, находится информационное поле, в котором выводится информация о цветовых параметрах текущего пикселя, текущей точки изображения. Вот, по тому, как быстро мелькают цифры, можно увидеть, как меняется составляющая цвета, при перемещении нашей мыши по нашему документу. Конечно же, если мы вводим мышь по

прозрачным областям, то в этом случае, все составляющие цвета будут нулевыми.

Вернее, они будут просто-напросто отсутствовать. И далее, вот здесь находится, во-первых, кнопка запуска обозревателя по умолчанию, или же мы можем выбрать какой-либо другой браузер, для отображения этой HTML страницы, ее результирующего вида. Вот, например, щелкнем на Preview in Default Browser, и можно видеть наш документ уже в стандартном обозревателе Microsoft Internet Explorer. И в нижней части можно видеть описание HTML файла, который управляет выводом вот этого изображения. И все настройки, которые использованы для создания этого документа в HTML виде. Закроем теперь этот браузер, щелкнем на вот этом крестике, и мы опять попали в нашу программу Adobe Illustrator.

Рассмотрим теперь те возможности, которые у нас сконцентрированы в правой части этого окошка. Наверху у нас находится кнопка Save, при помощи которой можно сохранить изображение и наш документ в HTML файле уже непосредственным образом. Далее находится кнопка Cancel, которая просто-напросто отменяет выполнение всех наших действий и возвращает нас к основному виду Adobe Illustrator. И кнопка Done, сохранение текущих параметров настроек с закрытием окна и без выполнения сохранения файлов в HTML виде. Или же, если мы нажмем на кнопку Alt, то кнопка Cancel меняется на кнопку Reset, при котором происходит восстановление исходных параметров настроек без его закрытия.

Или же следующая кнопка, кнопка Done меняется на кнопку Remember, при которой происходит сохранение текущих параметров без закрытия данного окна. И ниже находится у нас раскрывающийся список Settings, в котором мы можем выбрать стиль сохранения изображения. Здесь у нас представлены практически все виды графических файлов, такие распространенные, как GIF с различным количеством цветов. Далее JPEG вид с различного рода настройками по сжатию изображения и качества выходного документа. Или же файл типа PNG. И далее, для каждого из выбранных нами форматов, можно настроить различного рода параметры.

Например, для файла типа GIF или JPEG и т. д. Выбрав, какой-либо из них, далее можем выбрать его настройки. Первый из этих параметров, например, это параметр Lossy регулировка допустимого уровня потери графической информации в растровом файле. Это можно регулировать при помощи вот этого ползунка. Далее список Colors, при помощи которого можно задавать количество цветов в нашем GIF файле. Далее Specify algorithm, в котором, мы можем при помощи ползунка Dither задавать уровень обработки изображения.

При помощи флажка Transparency мы можем подключить режим сохранения прозрачных участков, задавая соответствующий флажок и, задавая тип прозрачности. При помощи пункта Matte мы можем задавать выбор цвета раскраски прозрачных участков исходного изображения. Если, конечно же, мы при этом отменяем флажок Transparency. Далее у нас находится пункт Amount количество регулировки степени случайного перемешивания полностью прозрачных и непрозрачных точек. И флажок Interlaced, задает подключение режима постепенного повышения, в качестве изображения в процессе его загрузки по сети, что направлено на снижение времени задержки появления изображения на экране.

Особенно это существенно для пользователей, у которых достаточно низкая скорость связи с Интернетом. В этом случае, конечно же, этот пункт позволяет ему получить хоть какое-то изображение достаточно быстро, которое затем будет повышаться в своем качестве. И пункт Web Snap со своим ползунком, позволяет регулировать диапазон цветовых оттенков, при попадании в которое, будет происходить замена исходных цветовых образцов изображения меньшим количеством, относящихся к таблице стандартной цветовой палитры Web. Конечно же, если мы возьмем вместо формата GIF, формат JPEG, то соответствующие настройки уже совсем другие. В частности мы можем выбрать один из стандартных настроек по степени сжатия изображения. Мы можем выбрать флажок Progressive, при помощи которого может задавать подключение режима постепенного повышения качества изображения в процессе загрузки по сети, что аналогично практически с тем же параметром для случая GIF изображения.

Далее качество в процентах, сейчас, как мы видим, 60. Можем задавать пункт Blur регулировка уровня незначительного размытия изображения. И последний пункт Matte выбор цвета, в которые будут раскрашены прозрачные участки исходного изображения. Можем выбрать формат PNG, в этом случае соответствующие настройки тоже можно видеть перед нами. Можно выбрать файл WBMP или же файл формата SWF или SVG. Сейчас выберем обратно файл с расширением GIF, что достаточно часто используется в HTML страницах. Внизу этой части нашей страницы находятся три вкладки. Первая из них, это Color Table цветовая таблица, предназначена для цветовой обработки результирующего изображения, которое представлено в табличном цветовом формате. Что, достаточно четко видно на вот этом поле.

Далее находится Image Size размер изображения. Эта вкладка используется для изменения экранных размеров формируемого изображения, которая задается в количестве точек по горизонтали и по вертикали. И последняя вкладка, вкладка Layers, позволяет представить слои исходного документа в качестве слоев каскадной стилевой таблицы будущей Web страницы, которая будет доступна для управления отображения на экране. В этой же части этого окна у нас находятся пункты меню. Если мы щелкнем на вот этой кнопке, то появляется вот такое меню, в котором у нас есть несколько параметров. Первый из них, это Save Settings сохранить установки, используются для формирования нового стиля сохранения изображения из текущих файлов их параметров. Далее находится Delete Settings удалить установки. Optimize to File Size оптимизировать под файловый размер, при котором оптимизируются файловые параметры по заданному размеру файла.

Repopulate Views обновить виды, автоматически обновляет все файловые параметры для двух других образцов результирующих изображения, отличных от выбранного на вкладке 4-up, на которой мы сейчас как раз находимся. Далее у нас три пункта меню, связанных с Slices вырезками. Это связать вырезки, разорвать связи для вырезок, и разорвать связи для всех вырезок Unlink All Slices. И последний пункт Edit Output Settings редактировать выходные настройки, при помощи которого мы можем раскрыть диалоговое окно выходных настроек с 4 вкладками, для настроек в нем выходных параметров, создаваемой Web страницы. Вот та страница, которая при нажатии на данный пункт меню, появляется перед нами. Как мы видим, здесь тоже у нас достаточно много параметров для различного рода настроек нашей HTML страницы. Щелкнем сейчас на кнопку Cancel и вернемся к нашему окну Save for Web сохранение Web страницы.

Отметим, что меню также появляется и при нажатии на вот эту кнопку, кнопку вызова соответствующего контекстного меню, в котором у нас есть еще достаточно много кнопок, связанных с настройками цветов. И пункты меню появляются при нажатии и на вот такую кнопку. Здесь у нас появляется размер результирующего файла, который мы можем выбрать и его время загрузки различного рода настройками модема или иной связи с Интернетом, что задается с соответствующей скоростью в пунктах меню. После того, как мы настроили все наши параметры и выбрали тип рисунка, его настройки, цветовую гамму и т.д., можем щелкнуть на кнопку Save, после которого появляется вот такое стандартное окно, для сохранения нашего файла.

Здесь мы можем выбрать тип нашего файла, HTML и картинки в нем или только картинку в GIF файле, или же только HTML страницу, без сохранения рисунка. Выберем сейчас HTML and Images, и его управляющие HTML файл, далее можем выбрать имя для нашего файла. Например, пусть будет My HTML. И щелкаем на кнопке Save. После чего наша страница успешно сохранена на нашем жестком диске, а мы вернулись к нашему основному виду Adobe Illustrator. Теперь же, загрузив вот этот стандартный браузер и раскрыв My Documents, Мои документы, которые находятся у нас на жестком диске, можем видеть вот эту HTML страницу, которую мы только что создали. Далее щелкнув на нем дважды, мы можем видеть, как будет выглядеть вот эта страница уже в браузере Microsoft Internet Explorer. Как мы видим, она представляет собой просто-напросто одну страницу, состоящую из просто-напросто одной картинки, одного GIF файла. Закроем теперь эту HTML страницу. Щелкнем на вот этом крестике, и мы опять вернулись в Adobe Illustrator

⇐Анимации в формате gif | TeachPro WEB-дизайн | Создание web страницы с вырезками и гиперссылками⇒