AIMP Forum

AIMP для Windows => Skin Editor / Skin Engine => Вопросы => Topic started by: ScrollUnLock on March 25, 2012, 13:32:17

Title: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 13:32:17
Решил поделится своим методом создания кнопок! Для меня была нудная и скучная задача- создать много однотипных кнопок для скина. Для решения этой проблемы я придумал(может и кто то и до меня придумал, но я ничего не искал, а придумал сам методом проб и ошибок) свой способ реализовать это в Photoshop. Приступим:

1. Создаем новый документ в фотошоп, который гораздо больше нашей кнопки и заливаем его розовым(на нем очень хорошо все видно) и создаем форму нашей кнопки. В моем случае это вот такая
(http://s54.radikal.ru/i143/1203/1f/b712129ecf2a.jpg)

2. Накладываем на кнопку необходимый эффект, в моем случае со свечением(для этого и брал разрешение с запасом)
(http://s019.radikal.ru/i609/1203/bc/003843e6b746.jpg)

3. Преобразовываем слой с кнопкой в Смарт-объект(затем увидите зачем это...)
(http://s019.radikal.ru/i609/1203/0a/b38af18dba5e.jpg)

4. Теперь открываем полученый смарт-объект двойным кликом по слою, получится, что разрешения "оптимизировались" под наложеные эффекты. Создаем новый слой, заполняем его серым и кладем под слой с кнопкой, это будет фон
(http://i062.radikal.ru/1203/57/379839506dc1.jpg)

5. На кнопке же должна быть какая нибудь "иконка"? Вот по этому создаем новый слой над слоем с основой кнопки и рисуем значок.
(http://s019.radikal.ru/i607/1203/b7/fb4b66c743c8.jpg)

6. Преобразовываем его в смарт-объект(потом поймете зачем) и накладываем эффект. У меня вот получилась этакая кнопочка закрыть в Windows
(http://s019.radikal.ru/i614/1203/fc/4411c416ba62.jpg)

7. Теперь копируем эффекты с основы(формы) и преобразовываем в смарт-объект и накладываем снова эффекты. Должно получится так
(http://s019.radikal.ru/i632/1203/52/9de7b4ef4f9c.jpg)
 
8. Теперь создаем папку называем ее "Кнопка 1", помещаем в нее все 3 слоя. Получится должно так
(http://s019.radikal.ru/i629/1203/f0/8ebb64ba7bb3.jpg)

9. Теперь надо менять разрешения картинки, меняем размер холста по формуле: ширина * 4(в зависимости от необходимого колличества кадров) У меня ширина была 58, необходимо 4 кадра, следовательно 58 * 4=  232(мне удобнее создавать в ширь,а затем уже в самом редакторе "оптимизировать" картинку)
(http://s58.radikal.ru/i161/1203/d7/0e780254a870.jpg)

10. Теперь создаем 3 копии группы
(http://s017.radikal.ru/i437/1203/1e/9487e4a3a4b3.jpg)

11. Раставляем их как по порядку.
(http://i047.radikal.ru/1203/b3/744602b1c020.jpg)

12. Cкрываем(можно и удалить, но советую оставить и скрыть хотя бы 1 слой фон)
во всех 4 группах слой "фон". Получилось так
(http://s019.radikal.ru/i638/1203/f5/8d14e9636a5a.png)

13. Теперь надо создать эффекты согласно кадру кнопки, в 4 кадре можно вовсе удалить эффекты так как этот кадр надо использовать для хит-тест маски
(http://s006.radikal.ru/i215/1203/fb/5f2e53265889.png)

14. Вот и все получилась у меня такая кнопка. А зачем я преобразовывал слои в смарт-объекты? А вот зачем- теперь достаточно отредактиравать один смарт-объект, как сразу же изменятся все остальные. На деле таким образом можно сделать много и быстро кнопок.
(http://s019.radikal.ru/i634/1203/e9/a5748e77eb14.png)

Вот так выглядит моя кнопка на деле(все остальные кнопки создавались таким же методом)
(http://i011.radikal.ru/1203/5e/291c91245427.jpg)
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 13:43:55
Лучше нужно было создать в этой (https://www.aimp.ru/forum/index.php?topic=2202.0) теме.
Не рекомендую преобразовать слой в Смарт-объект. Потому что размер документа увеличивается. В результате долго будет открываться в редакторе (Фотошопе).
Title: Re: Метод создания кнопок
Post by: John Éshan on March 25, 2012, 13:47:36
Молодец, целый урок по фотошоп) я не так делаю, но не намного сложнее, как смогу еще +1 поставлю
Title: Re: Метод создания кнопок
Post by: Tarik on March 25, 2012, 13:48:35
Не рекомендую преобразовать слой в Смарт-объект. Потому что размер документа увеличивается. В результате долго будет открываться в редакторе (Фотошопе).
Разве это существенная проблема? :)
ScrollUnLock, +1, может сгодится.
Title: Re: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 13:48:56
Лучше нужно было создать в этой (https://www.aimp.ru/forum/index.php?topic=2202.0) теме.
Не рекомендую преобразовать слой в Смарт-объект. Потому что размер документа увеличивается. В результате долго будет открываться в редакторе (Фотошопе).
Мой способ лучший для этой задачи, размер файла увеличивается не кретично. С открытием файлов проблем нету, ну по крайней мере средних характеристик моего нотбука хватает чтобы даже не чувствовать разницы.
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 13:50:01
Разве это существенная проблема? :)
Нет конечно... ;D
Title: Re: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 13:56:39
Прикрепил исходник .PSD
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 13:59:51
Давайте здесь будем выкладывать исходники кнопок... Tarik вы не против?
Title: Re: Метод создания кнопок
Post by: John Éshan on March 25, 2012, 14:04:17
Давайте здесь будем выкладывать исходники кнопок... Tarik вы не против?
Я конечно не Tarik, но с какой стати их выкладывать в вопросах по программе SkinEditor
Title: Re: Метод создания кнопок
Post by: Tarik on March 25, 2012, 14:07:41
Давайте здесь будем выкладывать исходники кнопок... Tarik вы не против?
Здесь, имхо, не нужно, а вот может в разделе обложек (или в креативе?) создать тему, в которой можно будет выкладывать готовые .psd с эффектами и проч.
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 14:09:21
Я конечно не Tarik, но с какой стати их выкладывать в вопросах по программе SkinEditor
А скин в каком программе создается? Куда тему надо переместит? Креатив? Или в раздел недоделанных обложек?
Title: Re: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 14:10:08
Здесь, имхо, не нужно, а вот может в разделе обложек (или в креативе?) создать тему, в которой можно будет выкладывать готовые .psd с эффектами и проч.
Можно было бы, но не все приверженцы "open source" ;D
Title: Re: Метод создания кнопок
Post by: John Éshan on March 25, 2012, 14:11:45
Здесь, имхо, не нужно, а вот может в разделе обложек (или в креативе?) создать тему, в которой можно будет выкладывать готовые .psd с эффектами и проч.
Если бы это было предложение, то был бы против (ну или нейтрален)
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 14:13:24
Если бы это было предложение, то был бы против (ну или нейтрален)
Ух... Значит ты не хочешь поделится своими кнопками ;D 
Title: Re: Метод создания кнопок
Post by: John Éshan on March 25, 2012, 14:14:08
Можно было бы, но не все приверженцы "open source" ;D
Тогда уж можно в теме со своей обложкой помимо скина и проекта скина, выкладывать и .PSD скина
Title: Re: Метод создания кнопок
Post by: Sionnain on March 25, 2012, 14:14:23
Здесь, имхо, не нужно, а вот может в разделе обложек (или в креативе?) создать тему, в которой можно будет выкладывать готовые .psd с эффектами и проч.

А я уже предлагал это:

https://www.aimp.ru/forum/index.php?topic=31173.msg193285#msg193285
Title: Re: Метод создания кнопок
Post by: Tarik on March 25, 2012, 14:14:47
Вам что, жалко выложить псд какой-нибудь простой иконки с интересным эффектом? Мда...
Title: Re: Метод создания кнопок
Post by: John Éshan on March 25, 2012, 14:15:41
Ух... Значит ты не хочешь поделится своими кнопками ;D
Нет, просто для уроков фотошопа есть множество других сайтов
Title: Re: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 14:16:03
Пока вы тут думаете, выкладываю исходник "визуализации" каналов своего скина. Состоит так же как и кнопка из смарт-объектов, так что для того чтобы изменить все стрелки достаточно изменить один объект "стрелка" и все стрелки изменятся ;D
Title: Re: Метод создания кнопок
Post by: John Éshan on March 25, 2012, 14:17:15
Вам что, жалко выложить псд какой-нибудь простой иконки с интересным эффектом? Мда...
Нет
Title: Re: Метод создания кнопок
Post by: John Éshan on March 25, 2012, 14:19:32
А скин в каком программе создается? Куда тему надо переместит? Креатив? Или в раздел недоделанных обложек?
К твоему сведению, в СЕ скин только собирается, а не рисуется....это так для общего развития
Title: Re: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 14:20:32
Кто нибудь попробовал мой метод? Отпишитесь
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 14:21:09
Другие сайты и есть другие сайт. А это наш Сайт и Наш Форум. Если мне надо создать в Фотошопе эффект стекла, значит мне надо искать в гугле о том что как делается этот эффект?

Хватит офф-топить... Прочистите пожалуйста
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 14:22:36
Кто нибудь попробовал мой метод? Отпишитесь
Я попробовал метод создание кнопки... Спасибо! Но не получилось как у тебя ;D

Завтра поставлю +
Title: Re: Метод создания кнопок
Post by: John Éshan on March 25, 2012, 14:23:44
Другие сайты и есть другие сайт. А это наш Сайт и Наш Форум. Если мне надо создать в Фотошопе эффект стекла, значит мне надо искать в гугле о том что как делается этот эффект?
Ааа....вот оно что, ты наверное развалишся, если напечатаеш пару слов в гугле...
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 14:25:47
Ааа....вот оно что, ты наверное развалишся, если напечатаеш пару слов в гугле...
Я пас!
Title: Re: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 14:34:38
Выскажу свое мнение по этому поводу. Прежде следует определится нужны ли вообще .PSD исходники, вообще в принципе я не только о том, что касается кнопок, меню и тд от скинов, а вообще- то лично я считаю, что нет, не нужны, для этого есть специализированные сайты, а вот .PSD от скинов, думаю следует выкладывать в теме со скином.
Title: Re: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 14:35:57
Я попробовал метод создание кнопки... Спасибо! Но не получилось как у тебя ;D
Что именно не получилось? Что то я не учел в инструкции?
Title: Re: Метод создания кнопок
Post by: Hayo Tee on March 25, 2012, 14:38:55
Что именно не получилось? Что то я не учел в инструкции?
Получилось, но не точна похож на = (http://s019.radikal.ru/i614/1203/fc/4411c416ba62.jpg) 
Title: Re: Метод создания кнопок
Post by: ScrollUnLock on March 25, 2012, 21:38:41
   Если нужно много однотипных кнопок, не проще ли просто воспользоваться Ctr+Shift+T, а затем Ctr+Alt+Shift+T - скопируются и все эффекты, форму для каждого экземпляра в дальнейшем можно и отредактировать, если нужно.
  Такие темы я считаю очень полезны будут для многих, а выкладывать лучше всё-таки в https://www.aimp.ru/forum/index.php?topic=2202.0 (https://www.aimp.ru/forum/index.php?topic=2202.0).
После создания одной кнопки, достаточно будет изменить смарт-объект со значком и все! не надо будет создавать каждый раз новый файл, так что считаю мой способ удобнее! Сразу не увидел ту тему...
Title: Re: Метод создания кнопок
Post by: sagitt67 on April 09, 2012, 22:35:21
Полезная информация, но каждый делает по-своему (я делаю попроще, хотя сам алгоритм похож).