|
||
|
||
|
||
Раньше мне приходилось выполнять разделение графических элементов вручную, подгонять каждый пиксель, строить громоздкие и довольно сложные таблицы, тратить на это все кучу времени, теперь же эту задачу берет на себя
ImageReady.
Программа ImageReady 2.0 входит в состав Photoshop 5.5 – она автоматически сохраняет созданные вами области, как независимые графические изображения, а также позволяет создавать необходимый HTML-код, который можно затем отредактировать. Рис.1. Photoshop(слева) и ImageReady(справа) Программы Photoshop и ImageReady взаимосвязанны друг с другом. Поэтому чтобы перейти от первой ко второй или наоборот, всего лишь необходимо щелкнуть на пиктограмме в нижней части панели инструментов (см.рис. 1). А если вы вообще не используете Photoshop, то запускайте ImageReady прамо из каталога Photoshop. Теперь, когда мы в программе, открываем файл который будем "нарезать". ImageReady предлагает два инструмента "нарезки" — инструмент Slice для отделения элементов, а инструмент Slice select — для их редактирования. Вот как они работают. Инструмент Slice (рис. 1(1)) - Предназначен для создания прямоугольных областей. Начертите прямоугольную рамку вокруг области, которую вы хотите отделить. Поскольку изображения, как правило, прямоугольной формы, имеет смысл отделять области также прямоугольной области. Инструмент Slice select (рис. 1(2)) - Предназначен для изменения размера или формы отделенной области, щелкните на пиктограмме этого инструмента и перетяните одну из сторон или один из углов отделенной области. Вы также можете щелкнуть внутри области, чтобы изменить ее местоположение или удалить ее. По мере того как вы создаете границы вокруг кнопок, или графических изображений, ImageReady автоматически заполняет образовавшиеся пустоты незаполненными областями (линии из точек) смотрите (рис. 2). Рис. 2. Использование инструмента Sile для создания прямоугольных областей вокруг графических элементов. Чтобы скрыть или показать границы областей, воспользуйтесь пиктограммами на панели инструментов. Вот как необходимо использовать эти пиктограммы. Hide slices (рис. 1(3)) - При нажатии на этой пиктограмме, скрываются границы "нарезанных" областей и улучшается внешний вид страницы. Show slices (рис. 1(4)) - При нажатии на этой пиктограмме, снова появляются границы областей, что необходимо при их редактировании. Теперь, когда вы "нарезали" свою картинку, можно присвоить адреса URL, имена файлов и другие атрибуты, любому вашему элементу. Для этого щелкнете в палитре Slise (рис. 3). Эта палитра позволяет следить за тем, как ImageReady создает HTML-код соответствующей области. Ниже перечислены параметры палитры Slice. Type - Вы можете заполнить созданную область графическим изображением (Image). А можете оставить ее пустой (No Image) - в этом случае ImageReady автоматически заполнит область "пустым" графическим изображением с именем файла spacer.gif. BG - Если область содержит прозрачные элементы, используйте параметр BG(фон), чтобы определить цвет, который будет заполнять эти элементы. Name - ImageReady автоматически присваивает "нарезаемым" областям имена в том порядке, в котором они появляются. Если вы решили изменить имя области, введите свой вариант в поле ввода Name. URL - Чтобы превратить "нарезанную" область в кнопку, введите адрес URL, к которому должна быть привязана эта кнопка. Если HTML-страница, с которой вы хотите связать кнопку, содержится в той же папке, что и страница, над которой вы работаете, то достаточно указать только имя файла. Если же файлы содержатся в других папках, необходимо указать полный путь к ним. Target - Если ваша страница содержит структуры, введите необходимый идентификатор структуры в этом поле ввода. ImageReady предлагает несколько параметров для обозначения структур, включая _parent, _self, _top, и _blank. Рис. 3. Палитра Slice позволяет присваивать "нарезанной" области адрес URL, превращая графический элемент в кнопку. Это еще не все. Видите на вкладке небольшую двунаправленную стрелку слева от слова Slice? За ней скрываются дополнительные параметры. Дважды щелкните на этой стрелке, чтобы открыть список этих параметров, показанный на рис. 4. Вот как работают эти параметры. Precision - Чтобы указать точное местоположение и размеры границы области, введите координаты в полях ввода Х и Y, а размеры области — в полях ввода W (Ширина) и Н (Высота). Установите флажок Constrain Proportions, чтобы сохранить пропорции области при внесении изменений. Message - Введите текст сообщения, которое будет отображаться в нижней части окна броузера, когда посетитель страницы будет наводить указатель мыши на кнопку. Тем, кто знаком с языком JavaScript, ImageReady дает возможность воспользоваться идентификатором onMouseOver="window.status". Alt - Если вы хотите указать текстовый эквивалент кнопки, введите его в поле ввода Alt. Рис. 4. Дважды щелкните на вкладке Slice, чтобы отобразить список дополнительных параметров Теперь, когда вы проделали всю выше описанную работу,выберите команду File=>Save Optimized As. Затем введите имя файла HTML-документа и укажите имя папки, в которой он будет сохранен. ImageReady автоматически будет помещать графические элементы во вложенную папку под названием images. Рис. 5. Используйте команду Save Optimized As, чтобы указать местоположение файла HTML и связанных с ним графических изображений С помощью флажков, показанных на рис. 5, вы можете указать, что должно быть сохранено: HTML-страница, изображения и/или только выделенные изображения. Если вас интересуют сведения о параметрах, используемых при создании HTML-кода, или о способе присвоения имен, щелкните на кнопках HTML Options или Saving Files Options соответственно.
Автор: Илларион Лащевский, fable@mail.ru |
||
|
||
Copyright © 2000гг. "Internet Zone" & Nik Romanov, info@izone.com.ua | ||
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone" как на источник получения информации, при этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izone.com.ua/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. |