3.4. Создание макета дизайна Web-страниц с помощью графического редактора Adobe Image Ready
Программа Adobe Image Ready наряду с созданием анимации предназначена для оптимизации изображений, создания Веб-страниц и ролловеров (элементов Веб-страницы, меняющих свой вид в разных ситуациях).
Отдельные элементы графического изображения на Веб-странице часто используются как средства навигации. К каждому из них привязывается своя ссылка так, что, щелкнув на таком элементе, вы перейдете на другую страницу сайта или другой сайт. Кроме того, фрагменты одного изображения можно по-разному оптимизировать для просмотра в браузере.
Фрагмент (Slice) – это прямоугольная область изображения. При сохранении изображения в виде Веб-страницы каждый фрагмент сохраняется в отдельный файл. Отдельные фрагменты могут быть оптимизированы под разные форматы, одни, например, под GIF, а другие – под JPEG. Для разрезания изображения на фрагменты служит инструмент Slice Tool (Фрагмент), а для работы с фрагментами, т. е. для их выделения, перемещения и изменения размеров – инструмент Slice Select Tool (Выделение фрагмента), показанные на рис.3 5. Включение линеек производится по команде View | Show Rulers (Вид | Показать линейку).
|
Для разрезания изображения на фрагменты необходимо выполнить следующие действия. 1. Установите направляющие линии, по которым будет происходить разрезание изображения. Направляющие линии разрезания вытаскиваются левой кнопкой мыши из областей вертикальной и горизонтальной линеек. |
Рис. 3.5. Инструменты Slice Tool и Slice Select Tool |
При расстановке направляющих старайтесь, чтобы фрагменты вмещали участки изображения сходных палитр цветов. Также разрезанию в Image Ready подлежат навигационные панели, кнопки и ссылки. Другим способом нарезания изображения на фрагменты является инструмент Slice Tool (Фрагмент). Он позволяет «вручную» выделять любые фрагменты, а остальные будут автоматически рассчитаны и нарезаны программой.
2. Выберите команду Slice | Create Slice from Guides (Фрагмент | Создать фрагменты по направляющим). Далее для выделения и манипуляций фрагментами: числом, размерами – используйте инструмент Slice Select Tool (Выделение фрагмента). Для объединения фрагментов используйте команду Slice | Combine Slices, а для разбивки фрагмента на подфрагменты применяйте команду Slice | Divide Slices. Режим показа/скрытия видимости границ фрагментов определяет команда View | Show | Slices (Вид | Показать | Фрагменты).
3. Далее оптимизируйте и сохраните изображение. Выберите команду File | Save Optimized As (Оптимизировать и сохранить как). Включите опцию Save HTML File и Save Image. В результате все фрагменты будут сохранены как отдельные графические файлы в папке Images, которая автоматически создается внутри указанной папки. При этом создается HTML-файл, в котором прописан код таблицы размещения фрагментов изображения для правильной автоматической сборки полного изображения.
4. Для просмотра изображения в браузере выполните команду File | Preview in | Internet Explorer. Помимо изображения будет представлен HTML-код оптимизированного изображения.