Библиотека Интернет Индустрии I2R.ru

Автор: Татьяна Вукс
NunDesign: Материалы для web разработчиков

Можете со мной поспорить, но трудно найти более удачное решение для обработки веб-графики. Достоинств много, но я не собираюсь рекламировать сий замечательный продукт, поскольку в маркетинговом плане корпорации Adobe не участвую.

Вот! Adobe! – с этого пожалуй и начнем. Думаю больше всего повезло тем, кто в веб пришел из полиграфии. Основная причина понятна – трудно найти дизайнера, который не был бы знаком с интерфейсом Adobe PhotoShop. Уникальные возможности для работы с растровой графикой, богатые подборки фильтров и акшинов для получения различных спецэффектов… Удивительные возможности для создания богатых коллажей, ретуширования фотографий посредственного качества и много чего еще.

Adobe Image Ready я лично поначалу восприняла как некий Add-Ins к собственно PhotoShop`у, и тот факт, что Image Ready предоставляет тот же интерфейс, воспринялся естественно. Та же панель инструментов, так же организована работа со слоями…те же функциональные клавиши на основные операции. Тут же нашлись и свои плюсы – больше функций при обработке изображений для web. В очередной стандартной (для Adobe) палитре собраны все функции оптимизации графики – gif, jpg, png. Но! Подобную работу можно было бы провести и c помощью только лишь Adobe PhotoShop. Посему остановимся на оригинальных и достойных сервисах ImageReady.

1. SLICE

Слово «слайсы» переводится на русский язык как «ломтики».

Если вы пытаетесь исполнить веб-страницу «накопительным» методом – т.е. забив некоторое количество информации и украсив все это некоторым количеством анимированных гифов, то и разбираться со слайсами у вас необходимости не возникнет. Совсем другая ситуация, если дизайн страницы возникает у вас в голове как ОБРАЗ, некая композиция, которую желательно воспроизвести, но упомянутый выше «накопительный» метод вас не устраивает (а может вы еще и художник, и страницу могли бы нарисовать – хотя бы даже и в PhotoShop`е). Тут на помощь и приходит метод слайсов – метод разбиения рисованной страницы на «ломтики». Забегая на перед скажу, что результатом такого разбиения будет html-страница, в которой находится таблица, разбитая на ячейки, с параметрами < table cellspacing="0" cellpadding="0" border="0"> - что означает, что элементы таблицы (ячейки) не имеют отступов и «вплотную» прилегают друг к другу. Каждый элемент полученной таблицы содержит соответствующий «ломтик» вашей картинки. Таким образом облегчается работа по верстке страницы, когда картинки и элементы меню требуется подгонять по размерам, и форматирование таблицы представляется совершеннейшим кошмаром.

Итак, вы имеете картинку, которая есть ваша будущая страница. Должно быть имеется уже заставка, нарисован заголовок, нашлось место для логотипов и всех пунктов меню. Самый простой способ разбить страницу на «слайсы» - поставить направляющие линии (Ctrl-R – на странице появляются вертикальная и горизонтальная линейки, далее вы просто вытягиваете направляющие из линейки и ставите направляющие в нужные места).

• Управляющие блоки (элементы меню);
• Слишком большие по размеру картинки – если разрезать их на несколько прямоугольников меньшей формы, страница будет грузиться более «динамично»;
• Все элементы, которые в последствии будут являться ссылками на другие страницы;

Когда вы посчитали, что направляющих линий достаточно, заходите в меню Slices, оттуда – Сreate Slices fromGuides, и вы увидите, что отмеченные вашими направляющими блоки получили «идентификационные номера» - т.е. вы порезали большую картинку на долгожданные «ломтики» - каждый из них станет элементом таблицы, каждый будет находиться в отдельной ячейке

Управлять слайсами легко. Кнопка для быстрого вызова инструмента управления – "А" – на панели инструментов – стрелочка с прямоугольничком. Слайсы можно перемещать, менять их размеры (приходится иногда подравнивать…), можно управлять слайсами так, как ячейками таблицы в Microsoft Word – разбивать ячейки (в меню Slices подменю Divide Slice), склеивать (Combine Slices ) – html-интерпретацией являются свойства тегов таблицы colspan() и rowspan().

Теперь настройки. В первом квадрате слайса – его порядковый номер, потом – его тип. При стандартных настройках это означает, что имя слайса будет состоять из имени всего файла + порядковый номер слайса. В свитке настроек слайса можно поменять его тип, имя, указать URL (в случае, если этот элемент картинки является пунктом меню) – можно относительный путь, можно абсолютный, таргет, в котором ссылка должна открываться, message – сообщение в строке состояния, alt – соответственно alt-тег.

Дальше оптимизируем наш эскиз, и говорим File » SaveOptimizedAs (или комбинация клавиш Ctrl+Shift+Alt+S) – даем имя файлу, отмечаем CheckBox что нужно сделать – сгенерить images (папку, в которую будут записаны картинки, можно назвать как вам будет угодно) и html-файл.

Готово! можно открывать любой редактор (в котором вы правите код) – подрихтовать то, что в этом будет нуждаться, и запускать проект в Internet !!!

Ну, может, не так сразу… Если вы планировали основной блок страницы сделать одноцветным, например, белым, и именно для этого выравнивали слайсы, объединяя все белые квадраты в один большой, то стоит теперь в этой ячейке таблицы картинку (собственно ваш белый квадрат) убить, а в свойствах ячейки указать bgcolor=”#цвет вашего фона”, width="ширина в пикселях одноцветной прямоугольной области" height="высота в пикселях одноцветной прямоугольной области"; по хорошему стоит еще сделать gif 1x1px необходимого (в данном примере белого) цвета (индексировать соответственно – он будет занимать несколько байт) – и указать дополнительное свойство тега

Таким образом мы получаем технологию создания графического образа веб-сайта из составных графических элементов, и при этом уходим от головной боли "точной склейки" картинок таким образом, чтобы не было смещения элементов даже на 1 пиксель!

Можно сделать еще круче! Каждому нарисованному вами слайсу задать динамику – и тогда ваши кнопки будут подсвечиваться, будет появляться дополнительная информация в любом месте вашей страницы, и все это не выходя из эскиза, из ImageReady! – Это уже технология RollOvers – и об этом в следущий раз.

P.S. Любители DreamWeaver`a и FireWork`a!!! Не обижайтесь и не шлите гневных писем! Я очень люблю продукты Macromedia и работаю в них, и то, что эта статья посвящена ImageReady – почти случайность. За последние две недели может количество фанов Adobe увеличилось? Не знаю, но вопросов много было именно по этой теме.

До встречи!

Статьи по теме:

• Создаем сложные области выделения
• Рисованная графика средствами Adobe PhotoShop
• Photoshop для профессионалов. Классическое руководство по цветокоррекции от Дэна Маргулиса
• Золото скифов. Металлозаготовки
• Об Adobe Image Ready (часть 2 - RollOvers)