Создание дизайн-шаблонов; уроки Photoshop, Illustrator, Lightroom, Gimp; обои для рабочего стола; иконки и headers для блогов.
Главная Фотоальбом Обо мне Карта блога
Подпишись на RSS!

Круглая кнопка web2.0 в Photoshop

На днях я получила письмо от читателя с просьбой перевести урок в Photoshop Blue Circle Button Tutorial. Я посмотрела и меня этот урок заинтересовал. Такая вот кнопочка в стиле web 2.0 Smiles-HappyТак что сегодня этот урок я делаю специально  для читателя моего блога - Максима :-)

Кстати, вы, всегда, можете предложить мне тему для публикации, если меня она заинтересует, то обязательно появится здесь! Итак, приступим.

1. Создадим новый документ размером 150×150 pixel с белым фоном. Нарисуем круг инструментом Marquee Tool , удерживая Shift. Создадим новый слой на панеле слоев и зальем круг черным цветом. 

Круглая кнопка

2. В оригинальном уроке используются уже готовые градиенты web 2.0, которые можно скачать у создателя, а также у меня: скачать web 2.0 градиенты. (6.63 Kb)

Установка: Edit > Present Manager > Выбираем Gradients > Load...

 

3. Сейчас займемся Layer Styles. Установите параметры как на картинках:

Shadow

Gradient

Gradient2

Stroke

4. Вот, что у нас получилось

Круглая кнопка Рис.2

5. Выделим слой с кругом кликнув по нему в панели слоев удерживая Ctrl. Создаем новый слой и зальем выделенную часть белым цветом.

Круглая кнопка Рис.3

6. Идем в Select > Modify > Contract. Круг стал меньше.

Круглая кнопка Рис.4 Круглая кнопка Рис.5

7. Теперь опустим выделение как показано на рисунке:

Круглая кнопка Рис.6

8. Нажмем на Del, а затем слою установим Opacity 50%.

Круглая кнопка Рис.7 Круглая кнопка Рис.8

9. Получилось вот так:

Круглая кнопка Рис.9

10.Теперь стандартным инструментом Shapes нарисуем вот такую загогулину:

Круглая кнопка Рис.10

Круглая кнопка Рис.11

11. Щелкнем по слою с загогулиной и Rasterize Layer

Круглая кнопка Рис.12

12. Кликнем по слою с кругом удерживая CTRL, чтобы выделить его. Затем идем Select > Inverse. И удалим ненужную загогулину.

Круглая кнопка Рис.13 Круглая кнопка Рис.14

13. На панели слоев установим Blend Mode - Overlay и Opacity - 40%. Итоговое изображение:

Круглая кнопка Рис.15

14. Ну и напоследок нарисуем рамочку, используя опять Shapes.

Круглая кнопка Рис.16

Круглая кнопка Рис.17

15. Теперь добавим Stroke в Blending Options.

Круглая кнопка Рис.18

Круглая кнопка Рис.19

16. Я также поменяла Opacity этого слоя на 60%. Добавив на кнопку свою надпись получаем финальный результат! Victory

Круглая кнопка Рис.20

Поиграв с расцветкой градиента можно получить любой результат:Smiles

Круглая кнопка web2.0 в Photoshop

Постовой:  10 красивых рукописных шрифтов, которые вы можете использовать в оформлении кнопок!


почта
12 Ноябрь, 2008

 Мне очень понравился урок! Просто, а главное так свежо, и эффектно!Спасибо!

Отправить комментарий

Не показывается.
Image CAPTCHA

Услуги по созданию дизайна; верстка



© JuliettaRose, 2008-2017. При использовании материалов ссылка на источник обязательна.
Яндекс.Метрика