Клуб друзей



Режем картинку на составные части

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

Представим вот такую картинку, которую нам и нужно будет разрезать:



    Первым делом загружаем ее в Photoshop и включаем режим Show Rules (показать линейки) Ctrl+R. Затем подводим указатель мыши в поле линеек со шкалой, нажимаем левую клавишу и протаскиваем линию разметки до желаемого места на рисунке. Так проделываем по вертикали и горизонтали:
Теперь выделяем каждую часть рисунка, копируем выделение в буфер. Далее создаем новый рисунок и копируем из буфера в новый рисунок. Так у нас должно получиться столько рисунков, на сколько частей его разделили. Здесь я показал всего четыре - для примера достаточно.
Затем уже в HTML-документе разместите каждый рисунок по ячейкам таблицы, при этом конечно атрибуты BORDER="0" CELLSPACING="0" CELLPADDING="0"
Самое сложное в этой операции - точное выделение частей рисунка. Выделять нужно так, чтобы указатель в виде крестика на старте и финише окрасился в другой цвет полностью, это будет означать, что он находится точно на разметочной линии.



[<<Назад]

WDstudio © 2000г.