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

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

КРЕАТИВНАЯ НАРЕЗКА

Допустим, ты уже придумал и нарисовал свою новую страничку в PhotoShop. То есть ты продумал: где будет размещаться текст, где будут размещаться картинки, где будут кнопочки. Теперь эту большую картинку нужно порезать на маленькие картиночки. Эти маленькие картиночки нужно засунуть в табличку HTML. Весь этот гимор для того, чтобы браузер смог разобрать, где какая картиночка должна быть, чтобы из маленьких картиночек собрать большую. К каждой маленькой картинке можно прицепить ссылку на другую страничку, так получится кнопка.

КАК РЕЗАТЬ?

Для шинковки эскиза сайта в табличку ручным способом или в HTML-редакторах обычно нужно сначала создать табличку, а потом туда запихивать изображения. Этот процесс отнимает много времени и давит креатифф. В ImageReady все наоборот: ты рисуешь табличку поверх картинки. Дальше софтина сама режет твою картинку на мелкие части, создает таблицу и запихивает туда маленькие картинки.

Шинковочный инструмент называется Slice и похож на ножик или скальпель. И снова приятность! У таблички в IR (ImageReady) нет ничего общего с M$ Exel. То есть тебе не придется париться с колонками и строками. Ты просто рисуешь скальпелем прямоугольники (ячейки), а софтина сама думает, к каким столбцам или строкам их приписать. Даже в HTML-редакторах тебе приходится париться, как бы склеить ячейки так, чтобы получилась нужная таблица. Тут достаточно нарисовать одну ячейку, а софтина сама добавит все остальные ячейки, необходимые, чтобы получилась полноценная HTML-таблица.

После того как ты раскроил картинку на области скальпелем, можно поправить размеры каждой области (ячейки). Для этого нужно взять специальный скальпель для выделения, выбрать им нужную область и таскать ее за контурные точки. Можно удалить лишние области или добавить новые. Если ты ошибся, то имеется полноценный многоступенчатый History, как в PhotoShop. То есть ты сможешь вернуться на несколько шагов назад.

ЧТО ЕЩЕ МОЖНО ДЕЛАТЬ С ЯЧЕЙКАМИ?

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

НЕ ЗАБЫВАЙ, ЧТО ТЫ В ФОТОЖОПЕ!

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