Логотип

Если Доблестная компания Adobe будет продолжать такими темпами выпускать продукты, которые просто уникальны каждый в своей области, то все остальные софт-фирмы, хоть как-то конкурирующие с Adobe в этой области могут не дергаться. Я в прошлых номерах осветил как мог пятый фотошоп, ImageReady, думал надолго теперь от Adobe новенького ничего не будет. Как бы не так! Там похоже засела крутая команда. Очень крутая.
Продукт для создания красивой страницы для интернета называется ImageStyler (вспоминается название PhotoStyler). Решение в этой области настолько же радикальное и всеохватывающее, как ImageReady в области извращений над анимированными гифами. И, что самое главное, настолько же простая в использовании. Все делается с полщелчка. Стиль общения - такой же, как и в предыдущих программах.
Идея такая. Например, когда я делаю дизайн сайта (пример моего дизайна - http://www.irnet.ru/), я сначала готовлю в фотошопе заготовку 800х600, разбрасываю основные элементы, рисунки, менюшки и пр. Рисую, в общем. Потом как-то это дело нарезаю на кусочки и вперед - городить html'ку. Сам себе "визивиг", так сказать :-)
В ImageStyler'е точно так же. Только ваше участие заканчивается на том этапе, когда все нарисовано. Дальше прога сгенерит толковую хэтэмээлку (сам проверял, действительно, толковая) и все! Больше ничего делать не надо. А, да! чуть не забыл! Ява-скриптовские кнопочки тоже сама обработает и код впихнет, в html'ку же. Язык Ява знать совсем необязательно. Концепция программы, надо заметить, отходит от принципов фотошопа с его слоями, хотя понятие слой сохранилось (куда ж без него!). По функциональным возможностям напоминает Corel, Операции уже не с растровой графикой в слоях, а с объектами. Но вот объекты могут быть как растровыми, так и векторными.
В целом - сильное решение. Очень.
В софтине уже заложено много готовых красивых решений в виде шаблонов. Так же, есть готовые стили для кнопочек, есть всякие рисунки, которые необходимы именно при создании страниц. Я просто накидал кое-что для исследования, как хорошо она работает в плане создания анимированных кнопочек с элементами ява-скрипта. Что получилось, попытаюсь рассказать.
Для начала замечу, что все элементы: надписи, кнопки, рисунки являются объектами, и, поэтому все операции совершаются только над выделенными объектами. Это я к тому, что менюшка JavaScript отображает состояние
именно выделенного объекта.
 

1

За менюшкой - виден рисунок, на котором скажем, есть три кнопочки, которые нужно "оживить". Состояния слоев (включен/выключен - концепция, как в ImageReady) объектов (в данном случае - кнопок SiteMap, Products, Links) можно поставить в соответствие каждому состоянию, так и названных по функциям ява-скрипта - noAction, onMouseOver и т.д. Т.е. выделяем например, onMouseOver и делаем изменения объекта (либо изменяем видимость слоев в закладке Object Layers в этой же менюшке), соответствующие этому состоянию. На рис.1 выбрано состояние noAction, в этом состоянии кнопка Products (она выделена прямоугольником) имеет обычный вид.
 

2

На рис.2 я сказал программе, какое состояние объекта будет при положении мышки "над ней" (onMouseOver). Сделал тень для букв и слегка изменил цвет (его я указал в меню цвета, а тень включил в закладке ObjLayers, естественно, предварительно ее сделав уготовленной для этого местной тулзой).
 

3

На рис.3 я сместил буквы вправо-вниз (там даже тулза специальная есть, именно для этого! вон наверху менюшки) и убрал тень, т.е. когда в "натуре" картинка будет давиться кнопкой, текст будет как бы продавливаться. Ну, в принципе, про создание "живых" кнопок все. Остальное берет на себя сия софтина. Ну, и, конечно, можно изменять состояние не только одного объекта, можно менять какую-либо картинку вместе с кнопочкой (фотку, например). На "крутых" сайтах такое часто встречается.
Интересен вопрос о том, какого качества и какого типа картинки генерит ImageStyler? Это можно задать, хотя он сам иногда додумывает и выбирает оптимальный, если качество от этого не страдает. Если в картинке меньше 256 цветов, то gif, то в некоторых случаях, будет выгоднее, чем jpg.
 

4

Стилей для объектов не так уж и много, но комбинируя их с цветом, можо играть до бесконечности. На рис.4 витой ленточке присвоен стиль "огонь". Причем существуют не только стили как формы, но и как эффекты. Полезно, наприемер, для эффекта "увеличительное стекло", когда наводишь мышкой на фотографию.
 

5

Очень удачно решена проблема качество/размер для картинок. Можно визуально подобрать степень сжатия для jpeg'а (рис.5) или попробовать перевести картинку в индексное представление и посмотреть, достаточно ли будет 256 цветов для нее. Размер показывается тут же. Это опции экспорта. Т.е. можно готовые рисунки просто сбрасывать для использования их в каких-нибудь других местах, где не нужно такой сильной разработки страницы. Вот такая html'ка. 
Естественно, не удержался заглянуть внутрь, а еще и посмотрел в редакторе (Netscape Composer) как оно там?...
ImageStyler Делает табличку, размещая в ней основные элементы картинки(ок).
 

7

В редакторе хорошо видно, как он разбил всю картину на кусочки. На рис.7 я выделил один из них. Да, заметьте, что имена для чувствительных областей ImageStyler сам обозвал (ALT= в IMG SRC) по тексту, я ничего сам не вводил! Умный, гад! :-)
Насчет множественных чувствительных областей (USEMAP) пример приводить не буду, тем более, что я не пробовал, но это, как я посмотрел, там совсем просто.
Ну, что еще осталось.... Да! Кряка, конечно, нигде нет, вернее, никто пока не видел. Софтина совсем свежая (9 сентября выложилась, говорят). На Adob'овском сайте лежит только триал-версия (15Мб). Там путь до FTP как всегда запрятанный, поэтому для удобства приведу его здесь:
ftp.adobe.com/pub/adobe/magic/imagestyler/win/is1try.exe. Ссылку не делаю, а зачем? Если пойдете ручками, то там есть скрытая дира, не помню какая из них.
В общем, если подойти к этому делу творчески, то можно недурные вещи ваять играючи. Впрочем, как с помощью любого софта Adobe можно все творить играючи. За что и любим :-)

Назад

Cooler (c) Alexander Chizhov, 1998

Источник получения информации http://www.izcity.com/

Hosted by uCoz