Button Kit

[ScrollUnLock]

В продолжение моей предыдущей темы. Думаю многих, в том числе меня, перед создание нового скина останавливает мысль о нарезке скина на элементы... Потратив несколько часов на размышления придумал данный метод.  Метод основан на использование смарт-объектов и инструмента "Раскройка" в фотошопе .И так, приступим:

1. Скачиваем прикрепленный файл к теме Button Kit 1.0. Когда откроем файл перед нами откроется такая картина



Рассмотри слои:



group_1- группа кнопок которые состоят из 4х кадров

• default- обычное состояние кнопки
• hover- наведенное состояние
• push- нажатое состояние
• inactive- неактивное состояние

group_2- группа кнопок содержащих 7 кадров

• default- обычное состояние кнопки
• hover- наведенное состояние
• push- нажатое
• active- активное состояние
• hover- наведенное состояние для активной кнопки
• push- нажатое состояние для активной кнопки
• inactive- неактивное состояние

Каждая группа в свою очередь состоит из подгрупп

• glass- "стекло", слой который накладывается сверху
• icon- слои отвечающие за графику на самих кнопках
• button- самые нижние слои, отвечают за форму наших кнопок

Как можно было заметить к группам применены эффекты


Применяя эффекты к группе вы меняете все кнопки в этой группе

2. Откройте двойным кликом смарт-объект FindBtn



Как видно из смарт-объекта FindBtn максимальный размер для кнопки 64х64 пикселя, такой размер взят для максимальной гибкости данного инструмента, т.к предполагается использование тени/света/теснений и прочих эффектов



Удаляем стандартный слой, создаем новую фигуру, нажимаем Ctrl+S и закрываем кладку Ctrl+W



И что мы видим? Все кнопки изменили свою форму



Проделываем такую же операцию со слоем glass только лишь с тем отличием, что эффект накладывается не на группу слоев, на объект в смарт-объекте glass

3. Для редактирования иконок, изменяем содержимое смарт-объектов расположенных в слое icon



4. Приступаем к применению эффектов. Применять эффекты необходимо к группам button и icon



После у меня получилось так

5. Приступим к экспорту текстур. Скроем слой Hide_before_export, нажмем Ctrl+Shift+Alt+S или Файл> Сохранить для Web



Нажимаем Сохранить



Указываем папку куда следует сохранить, выбираем только изображения и только пользовательские фрагменты

Вот что у меня получилось



Всем приятного использования) Отвечу на все вопросы

[ScrollUnLock]

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

[Soolo]

набор для конвейера =)
+

[ScrollUnLock]

набор для конвейера =)
+

Спасибо) Не для конвейера, а для упрощения разработки 

[ScrollUnLock]

Для тех кого может смутить, то что размер текстур получается большим (64х64 для одной кнопки), а ваша кнопка имеет реальный размер к примеру 20х20, я говорил с Артемом и он сказал, что на производительности это никак не должно повлиять

[Soolo]

я говорил с Артемом и он сказал, что на производительности это никак не должно повлиять

в смысле? о какой производительности идёт речь? АИМП же поддерживает только растровые картинки и всё-равно для сборки в редакторе придётся уменьшать кнопки до нужного размера в пикселях

[ScrollUnLock]

в смысле? о какой производительности идёт речь? АИМП же поддерживает только растровые картинки и всё-равно для сборки в редакторе придётся уменьшать кнопки до нужного размера в пикселях

Так мой инструмент и создан для того чтобы ничего больше не сжимать руками, как он порезал так и порезал

Такую кнопку уже можно использовать в редакторе

[Я Гриша!]

Спасибо полезная штука, с юбилеем +100

[ScrollUnLock]

С юбилеем +100

Спасибо)))

[Tarik]

Спасибо.

[ScrollUnLock]

Спасибо.

Не за что)