Кнопки под ником, Урок по Photoshop'у Опции

[Reginald]

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

1. Для начала создаём файл со следующими параметрами

(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/post-1-1178105490.jpg)

2. Заливаем следующим цветом: 3e3e3e
При помощи Rectangular Marquee Tool (Кнопка M) в середине выделям прямоугольник (примерно 1/3 часть), создаём новый слой (Ctrl+Shift+N) и снова заливаем тем же цветом.

3. Нажимаем правой кнопкой на «Layer 2» и выбираем «Blending Options...», выбираем «Inner Glow» со следующими параметрами

(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/post-1-1178105564.jpg)

Затем выбираем «Color Overlay»

(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/post-1-1178105593.jpg)

4. При помощи Rectangular Marquee Tool выделяем ещё один прямоугольник меньшего размера, создаём новый слой и заливаем его цветом 282828

(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/12777289fi7.jpg)

5. Создаём новый слой.
Выбираем Rounded Rectangle Tool (Кнопка U), радиус ставим 100 px, и рисуем форму как на рисунке.
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/44970862pp0.jpg)
Жмем правую кнопку, выбираем Make selection, жмем OK, заливаем выделение черным.

6. Правой кнопкой на Layer 4, выбираем «Blending Options...». Применяем следующие эффекты
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/80949187es6.jpg)
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/54890518sr8.jpg)
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/67839430me3.jpg)

Результат
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/10ik8.jpg)

7. Создаём новый слой.
Выбираем Rounded Rectangle Tool, радиус 100 px, и рисуем форму поменьше.
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/11le1.jpg)
Жмем правую кнопку, выбираем Make selection, жмем OK, заливаем выделение белым.

8. Правой кнопкой на Layer 5, выбираем «Blending Options...». Применяем следующие эффекты
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/12sh2.jpg)
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/13sg6.jpg)

Результат
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/14qn2.jpg)

9. Выбираем Text Tool (Кнопка T), используем шрифт Neuropol (скачать). Нажимаем Ctrl+T и задаем следующие параметры текста
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/13je0.jpg)

Результат
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/15ho4.jpg)

10. Правой кнопкой на Layer 6, выбираем «Blending Options...». Применяем следующие эффекты
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/16ny5.jpg)

Результат
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/17em6.jpg)

11. Создаём новый слой.
Выбираем Line Tool (Кнопка U). В графе Weight ставим 5 px, цвет белый.
Рисуем линию скраю (зажмите Shift и линия будет прямая)
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/18op8.jpg)

12. Теперь нужно добавить ещё две точки на линии.
Выбираем «Add Anchor Point Tool» (IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/addanchorpointtoolmi2.jpg) и в центре слева и справа добавляем две новых точки.
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/19vk9.jpg)

13. Выбираем «Direct Selection Tool» (IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/directselectiontoolkg0.jpg) и с зажатым Shift'ом выбираем созданные вами точки.
Используя стрелки на клавиатуре вытягиваем форму влево.
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/20ez4.jpg)

14. Правой кнопкой на Shape 1, выбираем «Blending Options...». Применяем следующие эффекты
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/21yj0.jpg)
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/22ry2.jpg)

Результат
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/23ny3.jpg)

15. Продублируйте слой Shape 1 несколько раз (Ctrl+J).
Расположите полученные трубки с левой и правой стороны кнопки.
Чтобы перевернуть трубку выбираем Edit->Transform->Flip Horizontally

Результат
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/24hp1.jpg)

16. Создаём новый слой.
Выбираем Ellipse Tool (Кнопка U). Цвет черный.
Рисуем круг.
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/25td8.jpg)
Затем полученный слой Shape 2 ставим перед Layer 5 в панели слоев.

17. Правой кнопкой на Shape 2, выбираем «Blending Options...». Применяем следующие эффекты
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/26ga7.jpg)

Результат
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/27zs1.jpg)

18. Дублируем получившийся слой и размещаем соответственно трубкам.
(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/resultsap9.jpg)

19. Наслаждаемся полученными результатами.
Можно поиграть с цветами при помощи Blending Options...->Color Overlay (не забудьте поменять Blend Mode на Multiply)

(IMG:http://i196.photobucket.com/albums/aa55/Saint_Reginald/Tubed_Buttons/samplese1.jpg)

[Serge LeCompt]

Зачётно!!!

[redfill]

Класс, весьма полезный урок +1 (IMG:style_emoticons/default4/thumbup.gif)

[SeidaliN]

сохранил (IMG:style_emoticons/default4/crazy.gif) +1

[Serge LeCompt]

сохранил (IMG:style_emoticons/default4/crazy.gif) +1

Аналогично!
Аффтар пеши исчо ! (с)

[redfill]

Посидел, сделал тоже свою кнопочку:

(IMG:http://img150.imageshack.us/img150/8255/buttonanimng8.gif) — анимированная

(IMG:http://img71.imageshack.us/img71/7026/buttonid0.jpg) — с белым фоном, просто что бы показать все что не видно на черном фоне.

[Morning Sky]

о_О захапала для своего будущего сайта (IMG:style_emoticons/default4/ax.gif)