Использование слайсов в Web-дизайне
Теоретические аспекты работы со слайсами
Нарезка с помощью инструмента Slice Tool
Нарезка с помощью направляющих
Определение параметров слайсов
Использование слайсов на практике
Создание навигационных элементов с помощью слайсов
Слайсы как инструмент оптимизации
Слайсы и большие графические изображения
Путешествуя по ресурсам Всемирной сети, мы постоянно встречаемся с графическими изображениями, отдельные фрагменты которых связаны различными гиперссылками. Чаще всего это обычные навигационные панели (возможно, с rollover-эффектами), а иногда и большие графические изображения, щелкая в разных местах которых мы попадаем на различные Web-страницы. Подобный эффект достигается за счет разрезания исходного изображения на отдельные фрагменты и последующего их размещения в отдельных ячейках таблицы, соответствующих различным гиперссылкам. В данной статье будем основываться на том, что подобные области имеют строго прямоугольную форму — при другой форме активных областей необходимо создание так называемых карт ссылок (или ImageMap), но это уже отдельная тема.
Существуют и другие варианты эффективности разрезания на фрагменты, не так явно бросающиеся в глаза, но не менее важные. Во-первых, это размещение на Web-страницах слишком больших по размеру картинок, и тогда разрезание больших изображений на несколько фрагментов обеспечивает эффект более динамичной загрузки страниц. Во-вторых, имеется возможность уменьшить общий объем графики посредством установки различных форматов сжатия для отдельных фрагментов изображения.
Фрагменты изображения, на которые с той или иной целью разрезают исходное изображение, получили название слайсов (Slices). Когда-то слайсы создавались вручную, и это было весьма трудоемким процессом: приходилось идеально рассчитывать размер каждого фрагмента, разрезать изображение в соответствии с расчетами, сохранять фрагменты в отдельных файлах и создавать HTML-таблицу с указанием размеров каждой ячейки. При обнаружении впоследствии малейшей неточности или в случае изменения исходного изображения работу приходилось повторять заново. Ситуация еще более усложнялась в том случае, когда фрагментам нужно было поставить в соответствие несколько графических файлов, переключаемых из JavaScript.
С появлением ImageReady все стало значительно проще: программа сама создает все необходимые фрагменты, пишет HTML, а при необходимости и JavaScript (для этого вам нужно лишь определить некоторые параметры нарезки), а результатом работы ImageReady будет появление нескольких графических файлов, число которых совпадает с количеством фрагментов. К тому же при любом изменении параметров отдельных фрагментов программа автоматически пересчитает их для всех остальных. Не возникает проблем и в случае изменения исходного изображения — обновление графических файлов, корректировка HTML и JavaScript произойдут автоматически.
Теоретические аспекты работы со слайсами
Для работы со слайсами в ImageReady существуют специальные инструменты — это Slice Tool (Нож для нарезки), используемый для разрезания исходного изображения, и Slice Select Tool (Выделение фрагментов), необходимый для выделения текущего фрагмента, при помощи которого выбранный слайс сразу выделяется контрастным цветом.
Кроме того, на панели инструментов есть переключатель Hide Auto Slices/Show Auto Slices (Скрыть границы слайсов/Показать границы слайсов), который включает и выключает показ границ фрагментов. При его включении на исходном изображении видны линии, изображающие границы фрагментов, а текущий фрагмент выглядит более ярко по сравнению с остальными фрагментами.
В ImageReady предусмотрено и специальное меню Slice (Слайс) для редактирования параметров фрагментов, где можно определить гиперссылку фрагмента, указать, в каком окне должна открываться ссылка, ввести имя файла для сохранения фрагмента и т.п. Если данное меню отсутствует на экране, то его можно открыть командой Window > Slice (Окно > Слайсы).
Каждым фрагментом в дальнейшем можно управлять: перемещать, изменять размеры, разрезать на более мелкие части — Slices > Divide Slices (Слайсы > Разрезание слайсов), склеивать — Slices > Combine Slices (Слайсы > Склеивание слайсов) и дублировать — Slices > Duplicate Slices (Слайсы > Дублирование слайсов).
При этом нужно иметь в виду, что изначально изображение представлено в виде одного-единственного слайса (рис. 1). Разбить его на несколько слайсов можно с помощью использования двух различных способов: посредством инструмента Slice Tool или на основе направляющих. Независимо от выбранного варианта все изображение разделится на фрагменты, а информация и свойства каждого созданного фрагмента будут отображаться в одноименной палитре, что значительно упростит процесс дальнейшего редактирования. Обе техники нарезки изображений прекрасно изложены на сайте http://www.metamorephosis.com/. В поисках информации и полезных примеров нарезания изображений можно заглянуть на адреса http://www.adobe.com/webstudio/golive/glvsliceimg/main.html, http://www.anriintern.com/ps/imageready.html, http://www.uwplatt.edu/~web/wtc/slices.html, http://www.uwplatt.edu/~web/wtc/slices.html, http://graphicdesign.about.com/library/tutorials/imageready/blslice.htm и др.
Нарезка с помощью инструмента Slice Tool
Данный вариант, как правило, применяется при выделении любых управляющих блоков, так как позволяет вручную, без последующего преобразования (без объединения, разделения и т.п.), вырезать только нужные фрагменты. Однако такой инструмент может оказаться не совсем удобным в случае, если требуется очень четко, без всяких погрешностей определить границы слайсов.
Чтобы воспользоваться данным способом, откройте исходное изображение и активизируйте инструмент Slice Tool, а затем с его помощью выделите на изображении часть рабочей области, соответствующей первому слайсу (рис. 2), затем — второму и т.д. При этом каждый раз ImageReady автоматически будет назначать порядковый номер слайса, показывая его в левом верхнем углу слайса.
Нарезка с помощью направляющих
Направляющие — это невыводимые на печать линии, которые могут быть помещены в любом месте изображения. При создании слайсов они предварительно помещаются в местах разрезания изображения на отдельные фрагменты. В случае необходимости направляющие можно перемещать, выключать или фиксировать. Эти линии прекрасно обеспечивают нарезание изображения на части таким образом, чтобы полученные фрагменты оказались точно состыкованными друг с другом.
Проставить направляющие можно как предварительно в Photoshop — команда ViewaNew Guide (ВидaНовая направляющая), так и сразу в ImageReady — View > Create Guides (Вид > Создание направляющих). Для этого, открыв изображение в той или иной программе, нужно воспользоваться соответствующей командой необходимое число раз, указывая при этом точное положение направляющей (рис. 3). Затем в программе ImageReady нужно применить команду Slices > Create Slices from Guides (Слайсы > Создать слайсы по направляющим), что приведет к созданию слайсов (рис. 4).
Недостаток данного способа состоит в том, что довольно часто наряду с нужными слайсами создаются и дополнительные, которые впоследствии приходится объединять. Для сцепления слайсов выделите их инструментом Slice Select Tool (Выделение фрагментов) при нажатой клавише Shift, щелкните на выделенной области правой кнопкой мыши и выберите команду Combine Slices (Склеивание слайсов).
Посмотрите на рис. 4: здесь, видимо, имеет смысл объединить слайсы, выделенные на рис. 5, так как все они одного типа и представляют собой обычные картинки без ссылок. Удобнее объединить между собой четвертый и пятый слайсы, а также слайсы с номерами 24 и 25 (рис. 6).
Преимущество данного способа — в более быстром создании большого количества слайсов и в возможности очень точного определения их границ.
Определение параметров слайсов
Независимо от способа нарезания слайсов, на следующем этапе для каждого слайса необходимо определить тип (изображение или не изображение — второй вариант используется для формирования ячеек таблицы с текстом или просто фоном), ссылку и имя. В числе параметров всегда указывается тип слайса, а все остальные параметры зависят от обстоятельств. Как правило, чаще всего используются следующие варианты:
• тип — Image и имя — для графического слайса без ссылки, то есть для обычной картинки (рис. 7);
• тип — Image, имя и ссылка — для навигационной кнопки (рис. 8);
• тип — No Image и текст (возможно, на некотором фоне — для текста; рис. 9).
Для определения параметров слайсов по очереди выбирайте каждый слайс инструментом Slice Select Tool и задавайте его параметры в палитре Slice.
Затем для каждого из слайсов следует определить вариант оптимизации в окне Optimize, где в числе прочих параметров можно указать формат сжатия файлов и количество используемых цветов (рис. 10). Иногда для разных слайсов целесообразно установить разные параметры оптимизации.
Сохранение слайсов
Разбив картинку на слайсы и отредактировав их с помощью функций из меню Slices, вам останется лишь сохранить их. Для непосредственного использования слайсов необходимо их сохранение с оптимизацией при помощи команды File > Save Optimized (Файл > Сохранить с оптимизацией; рис. 11), в случае необходимости изменив параметры сохранения.
Независимо от выбранного варианта оптимизации, в результате каждый слайс будет сохранен в отдельном файле, связанном с ячейкой в сгенерированной таблице. Одновременно с графическими файлами будет создан связанный с ними html-файл. По умолчанию все слайсы сохраняются в папке Images, имя которой несложно изменить. Для этого выберите команду File > Save Optimized (Файл > Сохранить с оптимизацией) с такими параметрами, как на рис. 12.
После этого откроется окно настроек, по своей сути представляющее не одно, а целую серию окон, изменяемых при нажатии кнопки Next (рис. 13).
Помимо сохранения с оптимизацией нужно обязательно сохранить исходный файл командой File > Save As (Файл > Сохранить как), поскольку в противном случае малейшие изменения дизайна потребуют от вас проделать всю работу еще раз.
 |
|
Использование слайсов на практике
Создание навигационных элементов с помощью слайсов
Откройте исходное изображение, представленное на рис. 14 (в качестве примера взято изображение с http://www.kasperskylab.ru/), активизируйте инструмент Slice Tool и с его помощью выделите на изображении часть рабочей области, соответствующей первому слайсу (рис. 15). Аналогичным образом выделите все остальные слайсы. В итоге изображение будет разбито на шесть отдельных слайсов (рис. 16).
На следующем этапе для каждого слайса необходимо определить тип (изображение или нет), ссылку и имя. Для этого воспользуйтесь инструментом Slice Select Tool: выберите первый слайс и задайте параметры слайса в палитре Slice (рис. 17). Повторите данный шаг для всех остальных слайсов.
Сохраните все слайсы с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией). В итоге будут получены файл Пример1.html и серия графических изображений в папке Images, каждое из которых будет соответствовать отдельному слайсу.
А теперь попробуем создать другую навигационную панель, применив иной вариант разрезания — на основе направляющих. Откройте в Photoshop исходное изображение, показанное на рис. 18 (в качестве примера взято изображение с сайта http://www.neftegaz.ru/), и поместите направляющие в местах разрезания его на отдельные фрагменты, воспользовавшись необходимое число раз командой View > New Guide (Вид > Новая направляющая; рис. 19).
Переключитесь в программу ImageReady и создайте слайсы по направляющим командой Slices > Create Slices from Guides (Слайсы > Создать слайсы по направляющим). Результат будет примерно таким, как на рис. 20. Обратите внимание, что при данном варианте все слайсы сгенерируются одновременно.
Затем задайте для каждого слайса тип, ссылку и имя в палитре Slice. Сохраните все слайсы с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией). В итоге будут получены файл Пример2.html и серия графических изображений в папке Images.
Слайсы как инструмент оптимизации
Каждый фрагмент можно сохранять в соответствующем формате сжатия (gif, jpg, png), устанавливая нужную степень сжатия и количество цветов. Очень тщательно следует подходить к выбору формата сжатия: как правило, изображения с небольшим количеством цветов лучше сохранять в формате gif, обеспечивающем наименьший объем, а фотографии и цветонасыщенную графику (например, градиентные заливки) предпочтительнее сохранять в формате jpg.
Чтобы рассмотреть данный вариант в действии, откройте подходящее исходное изображение — в данном случае будем работать с изображением с сайта http://www.uwplatt.edu/~web/wtc/slices.html (рис. 21).
Активизируйте инструмент Slice Tool и с его помощью выделите на изображении нужные слайсы (рис. 22).
Определите для слайсов типы, ссылки и имена в окне Slice. Установите для каждого из слайсов нужный формат оптимизации на вкладке Optimize: для слайсов с фотографией — в соответствии с рис. 23, а для навигационных слайсов — согласно рис. 24.
Сохраните все слайсы с помощью команды File > Save Optimized (Файл > Сохранить с оптимизацией), а в итоге будут получены файл Пример3.html и серия графических изображений в папке Images.
Слайсы и большие графические изображения
Большие графические изображения загружаются достаточно долго, но без некоторых из них никак не обойтись, например без графических шапок для Web-страниц. То же самое актуально и для фонов, и для ряда других составляющих.
Существует весьма простой прием ускорения загрузки такой статичной графики — посредством разбиения на слайсы. Это очень удобно, поскольку нарезанные изображения загружаются намного быстрее ненарезанных, даже при одинаковом суммарном весе. Интересные примеры применения данной технологии вы сможете найти по адресам http://www.sitepoint.com/article/881 и http://www.webclass.ru/rus/Tutorials/ImageReady/Creating_a_multiimage.html. Рассмотрим один из них. В данном случае нас будет интересовать вариант создания шапки Web-страницы.
На первом этапе предполагаемую шапку страницы нужно просто нарисовать в Photoshop. Пусть она будет напоминать изображение на рис. 25. После этого в местах предполагаемых разрезов проставьте направляющие (рис. 26) и переключитесь в программу ImageReady.
Воспользуйтесь командой Slices > Create Slices from Guides (Слайсы > Создать слайсы по направляющим). Результат будет выглядеть примерно так же, как на рис. 27.
Если разбиение произошло не в полном соответствии с вашими замыслами, можно исправить ситуацию, объединив нужные слайсы. В данном случае лучше объединить верхние слайсы, принципиально не отличающиеся друг от друга. Изображение примет такой вид, как на рис. 28. Никаких дополнительных параметров для созданных слайсов устанавливать не требуется, за исключением их имен (это нужно только для удобства) и варианта оптимизации. В данном случае все слайсы были оптимизированы при параметрах, представленных на рис. 29.
По окончании сохраните все слайсы с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией). Итак, были получены файл Пример4.html и серия графических изображений в папке Images.
Слайсы с rollover-эффектом
Слайсы совершенно незаменимы при создании навигационных графических объектов с rollover-эффектами. С их помощью будет намного проще и быстрее разработать любую панель управления. Посмотрим, как это можно осуществить на деле.
Откройте в ImageReady исходное изображение, показанное на рис. 30 (данный вариант меню взят с сайта http://www.relcom.ru/) и содержащее единственный слой Layer 1. Продублируйте данный слой два раза, вследствие чего появятся два новых слоя — Layer 1 copy и Layer 1 copy 2.
Активизируйте первый слой и разрежьте изображение на нужные фрагменты — получится пять слайсов (рис. 31). Обратите внимание: фрагменты с нечетными номерами не содержат картинок и для работы не нужны.
На следующем этапе необходимо сделать так, чтобы на каждом из слоев осталось по одному слайсу с очередным пунктом меню. Для этого выделите первый слайс на слое Layer 1 и воспользуйтесь командой Select > Create Selection from Slice (Выделение > Создание выделения для слайса) — вокруг слайса появится стандартное выделение. Сделайте инверсию и вырежьте ненужную часть изображения в буфер обмена. Изображение на первом слое при отключении видимости двух других слоев примет такой вид, как на рис. 32.
Проведите аналогичную операцию со слоями Layer 1 copy и Layer 1 copy 2, оставив на них соответственно третий и пятый слайсы (рис. 33). Скорректируйте при необходимости видимость слоев — все три слоя должны быть видимыми.
Перейдите на слой Layer1, активизируйте палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние). В окне Rollovers появится состояние Over State (рис. 34 и 35). Теперь нужно изменить внешний вид слайса для состояния Over State, для чего нужно выбрать из меню команду Layer > Layer Style > Color Overlay (Слой > Стиль слоя > Заливка) и изменить параметры слоя подходящим образом (например, как на рис. 36). Изображение будет таким, как на рис. 37. Проделайте аналогичные операции по созданию наведенного состояния мыши и корректировке для него параметров слоя для оставшихся двух слоев (рис. 38).
После этого задайте для каждого слайса тип, ссылку и имя в палитре Slice (рис. 39).
Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдите в окно браузера. В открывшемся окне вы увидите не только работающую кнопку, но и информацию о графическом файле кнопки и HTML-код (рис. 40).
Сохраните все слайсы с оптимизацией командой File > Save Optimized (Файл
> Сохранить с оптимизацией). В результате вы получите файл Пример5.html
и серию графических изображений в папке Images.
