Уроки WEB дизайна




 Введение в Adobe Illustrator


Программа 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.

Карта сайта Реклама
На нашем сайте Вы сможете найти любую информацию о программах 3D Max, Macromedia Flash MX, Corel Draw 12, Adobe Illustrator и многих других. Вы не найдете на данном сайте различные серийники, ключи, активацию, русификаторы, кряк, crack, keygen, серийные ключи и кейгены для этих программ. Для приобретения или скачивания программ воспользуйтесь ссылками на официальных сайтах производителей.