Ноя

11

Универсальный способ декорирования блоков – создание спрайта

Filed Under (html) by Александр Бойченко on 11-11-2009

Не так давно Сергей Чикуёнок описал способ декорирования блоков. Способ мне показался довольно интересным, однако ключевой особенностью этого метода является использование необычного спрайта о быстром создании которого и пойдет речь ниже.

Наша задача, получить из

спрайт вида

размером 1000px*1000px.

Итак, задача сводится к 2 действиям:
1) Увеличить размер спрайта
2) Получить «хитрый» спрайт

Если внимательно изучить тот спрайт, что надо получить, то можно заметить, что растягивать его куда проще, чем первоначальный, поэтому менять размер картинки мы будем после того, как получим «хитрый» спрайт. Кстати – особенность спрайта легко растягиваться может служить нам на руку, так как не всегда с первого раза можно угадать его размер, вдруг в наш блок решат засунуть больше текста, чем это предполагалось заранее?

Определившись с порядком работ, пора приступать, нам потребуется 4 шага, чтоб получить финальный результат, не так много, правда? :)

Шаг 1: Получаем «хитрый» спрайт,
По сути он получается смещением картинки влево и вверх. Для этого лучше всего использовать фотошоповский фильтр offset:


вуаля, спрайт готов :)

Шаг 2, 3, 4:
Увеличиваем спрайт в размере:)
Image -> Convas Size …

Растягиваем нижний пиксель на всю высоту

Растягиваем правый пиксель на всю ширину

Сохраняем\оптимизируем полученный результат.

5 комментариев
Читать далее

Comments:

5 комментариев на “Универсальный способ декорирования блоков – создание спрайта”

  1. Алексей on 11 Ноя 2009 at 11:08 #

    Оу, оказывается это не так сложно, как я себе представлял :)
    Нужно учить фотошоп.
    Спасибо.

  2. GreLI on 9 Дек 2009 at 15:07 #

    А каким образом нижний пиксель растягивается на всю высоту (и правый на всю ширину)? Я ничего умнее копирования в отдельный документ и растягивания (лучше по nearest neighbor) не придумал.

  3. Александр Бойченко on 9 Дек 2009 at 15:13 #

    в Фотошопе есть 2 специфических выделения:
    single row marquee tool
    single column marquee tool

    Находятся тут: http://img0.liveinternet.ru/images/attach/c/0/37/92/37092945_1230018770_screenshot2.jpg
    инструмент выделяет полосу, толщиной 1 пиксель по вертикали или горизонтали, затем ctrl+t и растягиваем насколько нам надо….

  4. Мохов олег on 9 Дек 2009 at 18:04 #

    Вау, за Filter → Offset спасибо! =)

  5. Олег Громов on 14 Ноя 2010 at 14:14 #

    И правда, фильтр полезный. Я всегда такое ручками вырезал-вставлял.

Оставить комментарий