Инструмент для WEB-креатива

Спецвыпуск Xakep, номер #021, стр. 021-084-3

СЛОИ

Естественно, в каждой ячейке твоей разметки может быть несколько стандартных фотошоповских слоев. А ты можешь их включать и выключать. Получается, что так в одном файле можно хранить макет целого WEB-ресурса. Решил сменить цветовую гамму сразу на всех страничках? Легко! Просто включи сразу все слои и примени к ним инструмент RGB или Variation.

КАРТЫ

Допустим, у тебя сложная картинка, ее на табличку не разобьешь. А хочется, чтобы мышка очень точно попадала в область. Представь, что у тебя фотография или рисунок человека и хочется, чтобы можно было кликнуть на ручку, на ножку, на брюшко и на голову. Для того и придумали карты. Называется это Image Map. Ты просто выделяешь любую область на картинке и делаешь на нее ссылку. Теперь, когда ты нажмешь на нужную часть тела, то попадешь на привязанную к ней страничку. Кстати, если пользоваться картами, то резать картинку не надо.

КАК РАЗМЕТИТЬ КАРТЫ В IR?

В ImageReady для нанесения на картинку Image Map имеется специальный инструмент в виде пальчика вверх. Их несколько типов: для круговых выделений, для прямоугольных, сложные объекты можно выделять ломанной. После того как ты нарисовал область карты, можно присвоить ей ссылку. Еще области можно дать имя и сделать подпись. Все эти фичи настраиваются в специальном окошке.

ОЖИВИ СВОЙ КРЕАТИФФ!

Ты, наверное, видел на многих сайтах такой прикольный эффект, когда наводишь на кнопочку курсор, она либо загорается, либо проваливается. Такие штуки делают обычно с помощью JavaScript или Flash. ImageReady умеет это делать на JavaScript. Фокус тут в том, что скрипт отслеживает положение курсора и меняет картинки.

Ты можешь менять картинку в любом месте экрана, когда курсор попадает в заданную область. То есть можно заставить человечка дрыгать ногами, шевелить пальцами или улыбаться, когда наводишь на него курсор. В IR доступны все стандартные фотожоповские инструменты. Например, чтобы заставить перца улыбаться, нужно создать новый слой и на нем растянуть человечку лыбу пальцем. Если ты хочешь подсветить кнопку, то на новом слое нужно добавить яркости и красного цвета.

ЧТО И КАК ОЖИВЛЯТЬ?

В ImageReady можно сделать чувствительными областями Image Map или Slice. То есть курсор умеет чувствовать ячейка или область на карте. Дальше нужно заготовить слой, на котором будут изменения. Таких слоев может быть несколько: первый для спокойного состояния, второй - когда навели курсор, третий - когда убрали курсор, четвертый - когда кликнули, пятый - когда попытались взять и перетащить. Словом, можно накреативить живой интерфейс не хуже, чем на флэшке. И для этого не надо быть крутым программистом JavaScript. IR напишет скрипты за тебя, твое дело - чистый графический креатив в фотожопе.

ROLLOVER

Есть такое специальное окошко, в котором ты задаешь: какие слои соответствуют каким состояниям курсора и в каких областях. То есть ты должен выбрать область на карте или ячейку. Потом для этой области или ячейки нужно создать несколько состояний: наведена, нажата и так далее. Чтобы все работало, для каждого состояния нужно выбрать слои, которые ты приготовил. Например, на одном слое у тебя обычная рожа, а на другом улыбающаяся. Чтобы чел улыбался при нажатии на рожу, нужно нарисовать на его роже область карты, для этой области создать состояния: "нормальное" и "нажатое". Для состояния "нажатое" нужно выбрать видимый слой с улыбающейся рожей, а для состояния "нормальное" нужно выбрать видимый слой с обычной рожей. Чтобы протестить наш креатифф, надо нажать на кнопку play, после этого можно кликать на рожу, она будет улыбаться. Функции можно протестить в твоей бродилке. Для этого нужно нажать на кнопку "тестить в Ишаке". Такая кнопка со значком Ыгтернет Гэгсплорера.