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

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

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

спрайт вида

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

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

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

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

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


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

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

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

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

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




Share this story