AIMP Forum
AIMP for Windows => Skin Editor, Skin Engine => Вопросы / Questions => Topic started by: ScrollUnLock on February 02, 2014, 22:54:52
-
В продолжение моей предыдущей темы (https://www.aimp.ru/forum/index.php?topic=33915.0). Думаю многих, в том числе меня, перед создание нового скина останавливает мысль о нарезке скина на элементы... Потратив несколько часов на размышления придумал данный метод. Метод основан на использование смарт-объектов и инструмента "Раскройка" в фотошопе .И так, приступим:
1. Скачиваем прикрепленный файл к теме Button Kit 1.0. Когда откроем файл перед нами откроется такая картина
(http://habrastorage.org/files/a01/edb/5e1/a01edb5e1e5046a6aa9470b6fffe9905.jpg)
Рассмотри слои:
(http://habrastorage.org/files/f7c/4a6/fd4/f7c4a6fd4f6b4b80879a530476cab7c5.jpg)
group_1- группа кнопок которые состоят из 4х кадров
- default- обычное состояние кнопки
- hover- наведенное состояние
- push- нажатое состояние
- inactive- неактивное состояние
group_2- группа кнопок содержащих 7 кадров
- default- обычное состояние кнопки
- hover- наведенное состояние
- push- нажатое
- active- активное состояние
- hover- наведенное состояние для активной кнопки
- push- нажатое состояние для активной кнопки
- inactive- неактивное состояние
Каждая группа в свою очередь состоит из подгрупп
(http://habrastorage.org/files/046/44b/ce8/04644bce89da4e129aedeadd75d03fd8.jpg)
- glass- "стекло", слой который накладывается сверху
- icon- слои отвечающие за графику на самих кнопках
- button- самые нижние слои, отвечают за форму наших кнопок
Как можно было заметить к группам применены эффекты
(http://habrastorage.org/files/f26/a1a/811/f26a1a8119b44849a5f530d42fbf6c3c.jpg)
Применяя эффекты к группе вы меняете все кнопки в этой группе
2. Откройте двойным кликом смарт-объект FindBtn
(http://habrastorage.org/files/150/ae4/bf9/150ae4bf9e6a4b4ab528bca4f9997a79.jpg)
Как видно из смарт-объекта FindBtn максимальный размер для кнопки 64х64 пикселя, такой размер взят для максимальной гибкости данного инструмента, т.к предполагается использование тени/света/теснений и прочих эффектов
(http://habrastorage.org/files/663/612/2d1/6636122d1ab24bd5aa68744a35855e18.jpg)
Удаляем стандартный слой, создаем новую фигуру, нажимаем Ctrl+S и закрываем кладку Ctrl+W
(http://habrastorage.org/files/d3b/922/948/d3b922948da04287ab79e6935e59debe.jpg)
И что мы видим? Все кнопки изменили свою форму
(http://habrastorage.org/files/471/33e/8e9/47133e8e9fbd43fb85ca2431a7dfdfa9.jpg)
Проделываем такую же операцию со слоем glass только лишь с тем отличием, что эффект накладывается не на группу слоев, на объект в смарт-объекте glass
3. Для редактирования иконок, изменяем содержимое смарт-объектов расположенных в слое icon
(http://habrastorage.org/files/edb/937/47c/edb93747c41e4bf5a2182c1a147d6282.jpg)
4. Приступаем к применению эффектов. Применять эффекты необходимо к группам button и icon
(http://habrastorage.org/files/c8f/7d0/53c/c8f7d053c79344149a02f144521f25e8.jpg)
После у меня получилось так
5. Приступим к экспорту текстур. Скроем слой Hide_before_export, нажмем Ctrl+Shift+Alt+S или Файл> Сохранить для Web
(http://habrastorage.org/files/adb/9d8/6c2/adb9d86c28424e4189a68e0e2477a8df.jpg)
Нажимаем Сохранить
(http://habrastorage.org/files/8e6/769/aa6/8e6769aa6d084080bf8350f1bf5eb77f.jpg)
Указываем папку куда следует сохранить, выбираем только изображения и только пользовательские фрагменты
Вот что у меня получилось
(http://habrastorage.org/files/4cd/c97/feb/4cdc97feb7404eb3abbb9a11ddd641dc.jpg)
Всем приятного использования) Отвечу на все вопросы
-
В процессе написания инструкции обнаружил проблему с градиентами, т.к эффекты на группы накладываются по все группе, то получается, что и градиент будет отличаться на всех кнопках, поэтому накладываем градиент в смарт-объекте, а к группам применяем эффект с наложением цвета, а не градиента и тогда проблему удастся избежать
-
набор для конвейера =)
+
-
набор для конвейера =)
+
Спасибо) Не для конвейера, а для упрощения разработки ;)
-
Для тех кого может смутить, то что размер текстур получается большим (64х64 для одной кнопки), а ваша кнопка имеет реальный размер к примеру 20х20, я говорил с Артемом и он сказал, что на производительности это никак не должно повлиять
-
я говорил с Артемом и он сказал, что на производительности это никак не должно повлиять
в смысле? о какой производительности идёт речь? АИМП же поддерживает только растровые картинки и всё-равно для сборки в редакторе придётся уменьшать кнопки до нужного размера в пикселях
-
в смысле? о какой производительности идёт речь? АИМП же поддерживает только растровые картинки и всё-равно для сборки в редакторе придётся уменьшать кнопки до нужного размера в пикселях
Так мой инструмент и создан для того чтобы ничего больше не сжимать руками, как он порезал так и порезал
(http://cs313316.vk.me/v313316781/6a26/4iiGAcZH6lI.jpg)
Такую кнопку уже можно использовать в редакторе
-
Спасибо полезная штука, с юбилеем +100
-
С юбилеем +100
Спасибо)))
-
Спасибо.
-
Спасибо.
Не за что)