Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

Разрезание изображения на ломтики

Операция разрезания изображения на ломтики (slice) состоит в том, что картинка делится на отдельные зоны, что позволяет ускорить загрузку изображения большого размера. Совокупность небольших ломтиков загружается быстрее, чем одно большое изображение. Браузер последовательно собирает ломтики в единую картинку, используя HTML-таблицы и фреймы.

Ломтики, создаваемые при помощи инструмента Slice (Ломтик), называются «пользовательскими ломтиками» (рис. 23.72а). Размер «ломтиков слоя» (о них рассказывается ниже в разделе «Создание ломтиков слоя» данной главы) выбирается автоматически таким образом, чтобы в них вошли все видимые пикселы выделенного слоя (рис. 23.726). При создании ломтиков обоих типов (и пользовательских, и ломтиков слоя) программа ImageReady делит оставшуюся часть изображения на «автоматически создаваемые ломтики», которые имеют метки серого цвета (рис. 23.72в).

Ломтики можно создавать, выделять, редактировать и просматривать как в программе ImageReady, так и в программе Photoshop. Мы предпочитаем использовать ImageReady, поскольку она предоставляет более широкий набор средств для работы с ломтиками. Для вызова на экран палитры Slice (Ломтик) в программе ImageReady выполните команду Window > Show Slice (Окно > Показать палитру Slice) или щелкните по кнопке Slice Palette (Палитра Slice) на панели опций инструмента Slice Select (Выделение ломтиков). В программе Photoshop щелкните по кнопке Slice Options (Опции ломтиков) на панели опций инструмента Slice Select (Выделение ломтиков), чтобы вызвать окно Slice Options (Опции ломтиков). И палитра, и диалоговое окно предоставляют одинаковый набор средств для работы с ломтиками.

За сценой

В HTML-файле таблица может быть использована в качестве решетки, которая контролирует расположение графики и текста на Web-странице. Ячейки таблицы можно закодировать так, чтобы они содержали отдельные изображения или данные либо ломтики большого графического изображения. Фреймы работают как отдельные окна внутри большего окна браузера. Во фрейме может отображаться HTML-графика, страничка или сайт независимо от других фреймов на этой же странице. Для того чтобы подробнее изучить HTML-таблицы и фреймы, обратитесь к книгам Линды Уэйнманн (Lynda Weinmann) «Designing Web Graphics.3» или «Creative HTML Design» (обе книги изданы компанией New Riders Publishing); Элизабет Кастро (Elizabeth Castro) «HTML 4 for the World Wide Web» (издательство Peachpit Press); или Чака Маскьяно (Chuck Musciano) и Билла Кеннеди (Bill Kennedy) «HTML: Definitive Guide» (издательство O'Reilly&Associates)

Рис. 23.73. Диалоговое окно Divide Slice

Рис. 23.74. Изображение, поделенное на шесть ломтиков

Разрезание изображения на ломтики с помощью команд

1. Выполните команду меню Slices > Promote to User-slice (Ломтики > Преобразовать в пользовательский ломтик), а затем воспользуйтесь командой Divide Slice (Разделить ломтик). Установите флажок Preview (Предварительный просмотр).
2. Установите флажок Divide Horizontally Into (Разделить по горизонтали на), чтобы получить горизонтально расположенные ломтики (рис. 23.73), а затем введите количество ломтиков в поле slices down, evenly spaced (одинаковых ломтиков) или высоту каждого ломтика в поле pixels per slice (пикселов на ломтик).

   В дополнение к указанным действиям или вместо них установите флажок Divide Vertically Into (Разделить по вертикали на), чтобы получить вертикально расположенные ломтики, затем введите количество ломтиков в поле slices across, evenly spaced (одинаковых ломтиков), либо значение ширины каждого ломтика в поле pixels per slice (пикселов на ломтик).

3. Щелкните по кнопке ОК. В верхнем левом углу каждого ломтика появится метка, которая определяет его номер. Нумерация начинается с 01 и идет слева-направо и сверху-вниз (рис. 23.74).

После применения команды Divide Slice (Разделить ломтик) будут выделены все ломтики. Для того чтобы выделить только один ломтик, активизируйте инструмент Slice Select (Выделение ломтиков) с помощью клавиши К (комбинации клавиш Shift+K) и щелкните по нужному ломтику.

Разбиение изображения на ломтики вручную

С помощью инструмента Slice (Ломтик) можно вручную контролировать расположение ломтиков. Можно изменять размер пользовательских ломтиков, перемещать их и заново производить разбиение; но эти операции неприменимы к автоматически создаваемым ломтикам.

1. Активизируйте инструмент Slice (Ломтик), нажав клавишу К (комбинацию клавиш Shift+K).
2. Щелкните мышью в окне изображения и перетащите указатель по диагонали, чтобы обозначить первый ломтик (рис. 23.75 и 23.76). Б верхнем левом углу появится метка с номером ломтика, а вокруг нового ломтика -тонкая пунктирная рамка, обозначающая границу ломтика, и манипуляторы, позволяющие изменять его размеры. Программа ImageReady автоматически разобьет оставшуюся часть изображения на ломтики.
3. По желанию. Нарисуйте дополнительные ломтики с помощью инструмента Slice. Каждому новому ломтику будет присвоен соответствующий номер. Программа ImageReady заново поделит в автоматическом режиме оставшееся изображение на ломтики и присвоит им новые номера.
4. По желанию. Для того чтобы поделить ломтик на более мелкие пользовательские ломтики, активизируйте инструмент Slice Select (Выделение ломтиков) с помощью клавиши К (сочетания клавиш Shift+K), щелкните по пользовательскому или автоматически созданному ломтику для того, чтобы выделить его, а затем выполните команду Slices > Divide Slice (Ломтик > Разделить ломтик) и щелкните по кнопке ОК. Каждому новому ломтику будет присвоен собственный номер.

Рис. 23.75. Создание ломтика с помощью инструмента Slice

Рис. 23.76. Новый ломтик

Рис. 23.77. Панель Color Adjustments в диалоговом окне Slices

Выделенный ломтик будет отображаться нормально в отличие от невыделенного, который окажется серым. В программе ImageReady, чтобы отрегулировать, насколько темным или светлым будет выделенный ломтик, надо задать значения в процентах в полях User-slices (Пользовательские ломтики) и/или Auto-slices (Автоматически создаваемые ломтики) в области Color Adjustments (Корректировки цвета) в диалоговом окне, открываемом при помощи команд Edit > Preferences > Slices (Правка > Установки > Ломтики) - см. рис. 23.77.

Шаблон для ломтиков

Для того чтобы спроектировать расположение ломтиков до их создания, отобразите линейки по краям изображения (комбинации клавиш Ctrl+R), перетащите направляющие и оставьте их там, где следует разместить границы ломтиков, а затем воспользуйтесь командой Slices > Create Slices from Guides (Ломтики > Создать ломтики по направляющим).

Эта команда удалит ранее существовавшие ломтики. Так как направляющие тянутся от одного края окна к другому, то можно создать подобие шахматной доски с «клетками» разного размера. Затем можно изменить размер ломтиков, перетаскивая границы, либо соединить несколько выделенных ломтиков в один с помощью команды Slices >Combine Slices (Ломтики > Объединить ломтики), но такая операция может оказаться более трудоемкой, чем изначальное построение ломтиков с помощью инструмента Slice.

Создание ломтика на основе слоя

Границы ломтиков слоя автоматически обновляются при трансформации, перемещении слоя и добавлении эффектов слоя. Такие ломтики особенно удобны при создании ролловера с различными эффектами (например, с отбрасыванием тени), увеличивающими площадь слоя.

Чтобы создать ломтик на основе слоя, выделите слой на палитре Layers (Слои), а затем воспользуйтесь командой New Layer Based Slice (Создать ломтик на основе слоя) в меню Layer (Слой).

Преобразование ломтика, созданного автоматически или на основе слоя, в пользовательский ломтик

1. Выберите инструмент Slice Select (Выделение ломтиков), нажав клавишу К или сочетание клавиш Shift+K.
2. Щелкните по ломтику, который следует преобразовать.
3. Воспользуйтесь командой Promote to User-slice (Преобразовать в пользовательский ломтик) в меню Slices (Ломтики).

Удаление ломтиков

1. Активизируйте инструмент Slice Select (Выделение ломтиков) с помощью клавиши К или комбинации клавиш Shift+K.
2. Для того чтобы удалить один ломтик, щелкните по нему. Если вы хотите удалить несколько ломтиков, то, нажав клавишу Shift, выделите их щелчком мыши. Затем в меню Slices (Ломтики) или меню палитры Slice (Ломтик) выполните команду Delete Slice (Удалить ломтик), либо просто нажмите клавишу Backspace. Для того чтобы удалить все ломтики изображения, воспользуйтесь командой меню Slices > Delete All (Ломтики > Удалить все).